|
|
|
|
@@ -579,13 +579,13 @@ export function TextContent(){
|
|
|
|
|
<div
|
|
|
|
|
className="flex flex-col items-center justify-center gap-y-8 mt-8 w-full"
|
|
|
|
|
>
|
|
|
|
|
<TextDisplay title="Text Input">
|
|
|
|
|
<GeneralInputDisplay title="Text Input">
|
|
|
|
|
<TextInput placeholder="Text Input" labelClassName="bg-(--bg-color) peer-focus:bg-(--bg-color)"/>
|
|
|
|
|
</TextDisplay>
|
|
|
|
|
<TextDisplay title="Text Area">
|
|
|
|
|
</GeneralInputDisplay>
|
|
|
|
|
<GeneralInputDisplay title="Text Area">
|
|
|
|
|
<TextArea placeholder="Textarea" className="resize" labelClassName="bg-(--bg-color) peer-focus:bg-(--bg-color)"/>
|
|
|
|
|
</TextDisplay>
|
|
|
|
|
<TextDisplay title="Select">
|
|
|
|
|
</GeneralInputDisplay>
|
|
|
|
|
<GeneralInputDisplay title="Select">
|
|
|
|
|
<SelectInput placeholder={selected.label} onChange={(newValue) => setSelected(selectOptions.find((option) => option.value === newValue) || selectOptions[0])}>
|
|
|
|
|
{
|
|
|
|
|
selectOptions.map((option) => (
|
|
|
|
|
@@ -599,8 +599,8 @@ export function TextContent(){
|
|
|
|
|
))
|
|
|
|
|
}
|
|
|
|
|
</SelectInput>
|
|
|
|
|
</TextDisplay>
|
|
|
|
|
<TextDisplay
|
|
|
|
|
</GeneralInputDisplay>
|
|
|
|
|
<GeneralInputDisplay
|
|
|
|
|
title="Number Input"
|
|
|
|
|
>
|
|
|
|
|
<NumberInput
|
|
|
|
|
@@ -610,9 +610,9 @@ export function TextContent(){
|
|
|
|
|
>
|
|
|
|
|
Number Test
|
|
|
|
|
</NumberInput>
|
|
|
|
|
</TextDisplay>
|
|
|
|
|
</GeneralInputDisplay>
|
|
|
|
|
{/* */
|
|
|
|
|
<TextDisplay
|
|
|
|
|
<GeneralInputDisplay
|
|
|
|
|
title="Number Slider"
|
|
|
|
|
>
|
|
|
|
|
<NumberSlider
|
|
|
|
|
@@ -621,13 +621,13 @@ export function TextContent(){
|
|
|
|
|
value={numberValue}
|
|
|
|
|
onChange={setNumberValue}
|
|
|
|
|
/>
|
|
|
|
|
</TextDisplay>
|
|
|
|
|
</GeneralInputDisplay>
|
|
|
|
|
/* */}
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function TextDisplay({
|
|
|
|
|
function GeneralInputDisplay({
|
|
|
|
|
title,
|
|
|
|
|
children
|
|
|
|
|
}:Readonly<{
|
|
|
|
|
@@ -649,13 +649,13 @@ export function FileContent(){
|
|
|
|
|
<div
|
|
|
|
|
className="flex flex-col items-center justify-center gap-y-8 mt-8 w-full"
|
|
|
|
|
>
|
|
|
|
|
<FileDisplay title="File Input">
|
|
|
|
|
<GeneralInputDisplay title="File Input">
|
|
|
|
|
<FileInput
|
|
|
|
|
showFileName={true}
|
|
|
|
|
showSize={true}
|
|
|
|
|
/>
|
|
|
|
|
</FileDisplay>
|
|
|
|
|
<FileDisplay title="Drag and Drop File Input">
|
|
|
|
|
</GeneralInputDisplay>
|
|
|
|
|
<GeneralInputDisplay title="Drag and Drop File Input">
|
|
|
|
|
<DragAndDropFileInput
|
|
|
|
|
showFileName={true}
|
|
|
|
|
showSize={true}
|
|
|
|
|
@@ -664,24 +664,7 @@ export function FileContent(){
|
|
|
|
|
>
|
|
|
|
|
Drag And Drop File Input
|
|
|
|
|
</DragAndDropFileInput>
|
|
|
|
|
</FileDisplay>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function FileDisplay({
|
|
|
|
|
title,
|
|
|
|
|
children
|
|
|
|
|
}:Readonly<{
|
|
|
|
|
title: React.ReactNode;
|
|
|
|
|
children: React.ReactNode;
|
|
|
|
|
}>){
|
|
|
|
|
return (
|
|
|
|
|
<div
|
|
|
|
|
className="flex flex-col items-center justify-center gap-y-2 w-full"
|
|
|
|
|
>
|
|
|
|
|
<h2 className="text-2xl">{title}</h2>
|
|
|
|
|
{children}
|
|
|
|
|
</GeneralInputDisplay>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
@@ -691,7 +674,7 @@ export function CheckboxContent(){
|
|
|
|
|
<div
|
|
|
|
|
className="flex flex-col items-center justify-center gap-y-8 mt-8 w-full"
|
|
|
|
|
>
|
|
|
|
|
<CheckboxDisplay title="Checkbox">
|
|
|
|
|
<GeneralInputDisplay title="Checkbox">
|
|
|
|
|
<div className="flex flex-row items-center justify-center gap-x-8">
|
|
|
|
|
<MattrixwvCheckbox className="group-data-checked:stroke-white group-data-checked:bg-amber-400" defaultChecked={true}>Default</MattrixwvCheckbox>
|
|
|
|
|
<PrimaryCheckbox defaultChecked={true} >Primary</PrimaryCheckbox>
|
|
|
|
|
@@ -705,8 +688,8 @@ export function CheckboxContent(){
|
|
|
|
|
<LightCheckbox defaultChecked={true}>Light</LightCheckbox>
|
|
|
|
|
<DarkCheckbox defaultChecked={true}>Dark</DarkCheckbox>
|
|
|
|
|
</div>
|
|
|
|
|
</CheckboxDisplay>
|
|
|
|
|
<CheckboxDisplay title="Checks">
|
|
|
|
|
</GeneralInputDisplay>
|
|
|
|
|
<GeneralInputDisplay title="Checks">
|
|
|
|
|
<div className="flex flex-row items-center justify-center gap-x-8">
|
|
|
|
|
<MattrixwvCheckbox className="group-data-checked:stroke-amber-400" defaultChecked={true} showBox={false}>Default</MattrixwvCheckbox>
|
|
|
|
|
<PrimaryCheckbox defaultChecked={true} showBox={false}>Primary</PrimaryCheckbox>
|
|
|
|
|
@@ -720,24 +703,7 @@ export function CheckboxContent(){
|
|
|
|
|
<LightCheckbox defaultChecked={true} showBox={false}>Light</LightCheckbox>
|
|
|
|
|
<DarkCheckbox defaultChecked={true} showBox={false}>Dark</DarkCheckbox>
|
|
|
|
|
</div>
|
|
|
|
|
</CheckboxDisplay>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function CheckboxDisplay({
|
|
|
|
|
title,
|
|
|
|
|
children
|
|
|
|
|
}:Readonly<{
|
|
|
|
|
title: React.ReactNode;
|
|
|
|
|
children: React.ReactNode;
|
|
|
|
|
}>){
|
|
|
|
|
return (
|
|
|
|
|
<div
|
|
|
|
|
className="flex flex-col items-center justify-center gap-y-2 w-full"
|
|
|
|
|
>
|
|
|
|
|
<h2 className="text-2xl">{title}</h2>
|
|
|
|
|
{children}
|
|
|
|
|
</GeneralInputDisplay>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
@@ -747,7 +713,7 @@ export function RadioContent(){
|
|
|
|
|
<div
|
|
|
|
|
className="flex flex-col items-center justify-center gap-y-8 mt-8 w-full"
|
|
|
|
|
>
|
|
|
|
|
<RadioDisplay title="Sizes">
|
|
|
|
|
<GeneralInputDisplay title="Sizes">
|
|
|
|
|
<RadioList
|
|
|
|
|
>
|
|
|
|
|
<PrimaryRadioButton size="xs" value="xs">Extra Small</PrimaryRadioButton>
|
|
|
|
|
@@ -756,8 +722,8 @@ export function RadioContent(){
|
|
|
|
|
<PrimaryRadioButton size="lg" value="lg">Large</PrimaryRadioButton>
|
|
|
|
|
<PrimaryRadioButton size="xl" value="xl">Extra Large</PrimaryRadioButton>
|
|
|
|
|
</RadioList>
|
|
|
|
|
</RadioDisplay>
|
|
|
|
|
<RadioDisplay title="Radio Checked">
|
|
|
|
|
</GeneralInputDisplay>
|
|
|
|
|
<GeneralInputDisplay title="Radio Checked">
|
|
|
|
|
<div
|
|
|
|
|
className="flex flex-row items-center justify-center gap-x-8"
|
|
|
|
|
>
|
|
|
|
|
@@ -772,8 +738,8 @@ export function RadioContent(){
|
|
|
|
|
<RadioList value="Light"><LightRadioButton value="Light">Light</LightRadioButton></RadioList>
|
|
|
|
|
<RadioList value="Dark"><DarkRadioButton value="Dark">Dark</DarkRadioButton></RadioList>
|
|
|
|
|
</div>
|
|
|
|
|
</RadioDisplay>
|
|
|
|
|
<RadioDisplay title="Radio Horizontal">
|
|
|
|
|
</GeneralInputDisplay>
|
|
|
|
|
<GeneralInputDisplay title="Radio Horizontal">
|
|
|
|
|
<RadioList
|
|
|
|
|
direction="horizontal"
|
|
|
|
|
>
|
|
|
|
|
@@ -789,8 +755,8 @@ export function RadioContent(){
|
|
|
|
|
<LightRadioButton value="light">Light</LightRadioButton>
|
|
|
|
|
<DarkRadioButton value="dark">Dark</DarkRadioButton>
|
|
|
|
|
</RadioList>
|
|
|
|
|
</RadioDisplay>
|
|
|
|
|
<RadioDisplay title="Radio Vertical">
|
|
|
|
|
</GeneralInputDisplay>
|
|
|
|
|
<GeneralInputDisplay title="Radio Vertical">
|
|
|
|
|
<RadioList
|
|
|
|
|
direction="vertical"
|
|
|
|
|
>
|
|
|
|
|
@@ -806,24 +772,7 @@ export function RadioContent(){
|
|
|
|
|
<LightRadioButton value="light">Light</LightRadioButton>
|
|
|
|
|
<DarkRadioButton value="dark">Dark</DarkRadioButton>
|
|
|
|
|
</RadioList>
|
|
|
|
|
</RadioDisplay>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function RadioDisplay({
|
|
|
|
|
title,
|
|
|
|
|
children
|
|
|
|
|
}:Readonly<{
|
|
|
|
|
title: React.ReactNode;
|
|
|
|
|
children: React.ReactNode;
|
|
|
|
|
}>){
|
|
|
|
|
return (
|
|
|
|
|
<div
|
|
|
|
|
className="flex flex-col items-center justify-center gap-y-2 w-full"
|
|
|
|
|
>
|
|
|
|
|
<h2 className="text-2xl">{title}</h2>
|
|
|
|
|
{children}
|
|
|
|
|
</GeneralInputDisplay>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|