diff --git a/lib/component/input/checkbox/DangerCheckbox.tsx b/lib/component/input/checkbox/DangerCheckbox.tsx new file mode 100644 index 0000000..48fd252 --- /dev/null +++ b/lib/component/input/checkbox/DangerCheckbox.tsx @@ -0,0 +1,24 @@ +import type { CheckboxProps } from "$/types/Input"; +import clsx from "clsx"; +import MattrixwvCheckbox from "./MattrixwvCheckbox"; + + +export default function DangerCheckbox({ + className, + box = true, + ...props +}: CheckboxProps){ + return ( + + ); +} diff --git a/lib/component/input/checkbox/DarkCheckbox.tsx b/lib/component/input/checkbox/DarkCheckbox.tsx new file mode 100644 index 0000000..2915f20 --- /dev/null +++ b/lib/component/input/checkbox/DarkCheckbox.tsx @@ -0,0 +1,24 @@ +import type { CheckboxProps } from "$/types/Input"; +import clsx from "clsx"; +import MattrixwvCheckbox from "./MattrixwvCheckbox"; + + +export default function DarkCheckbox({ + className, + box = true, + ...props +}: CheckboxProps){ + return ( + + ); +} diff --git a/lib/component/input/checkbox/InfoCheckbox.tsx b/lib/component/input/checkbox/InfoCheckbox.tsx new file mode 100644 index 0000000..d6cb9b9 --- /dev/null +++ b/lib/component/input/checkbox/InfoCheckbox.tsx @@ -0,0 +1,24 @@ +import type { CheckboxProps } from "$/types/Input"; +import clsx from "clsx"; +import MattrixwvCheckbox from "./MattrixwvCheckbox"; + + +export default function InfoCheckbox({ + className, + box = true, + ...props +}: CheckboxProps){ + return ( + + ); +} diff --git a/lib/component/input/checkbox/LightCheckbox.tsx b/lib/component/input/checkbox/LightCheckbox.tsx new file mode 100644 index 0000000..5934e13 --- /dev/null +++ b/lib/component/input/checkbox/LightCheckbox.tsx @@ -0,0 +1,24 @@ +import type { CheckboxProps } from "$/types/Input"; +import clsx from "clsx"; +import MattrixwvCheckbox from "./MattrixwvCheckbox"; + + +export default function LightCheckbox({ + className, + box = true, + ...props +}: CheckboxProps){ + return ( + + ); +} diff --git a/lib/component/input/checkbox/MattrixwvCheckbox.tsx b/lib/component/input/checkbox/MattrixwvCheckbox.tsx new file mode 100644 index 0000000..67a3435 --- /dev/null +++ b/lib/component/input/checkbox/MattrixwvCheckbox.tsx @@ -0,0 +1,71 @@ +import type { CheckboxProps } from "$/types/Input"; +import { Checkbox } from "@headlessui/react"; +import clsx from "clsx"; + + +export default function MattrixwvCheckbox({ + id, + className, + labelClassName, + name, + size = "sm", + box = true, + onChange, + checked, + defaultChecked, + strokeWidth = 2, + value, + children +}: CheckboxProps){ + return ( + +
+ + + +
+ { + children && +
+ {children} +
+ } + + ); +} diff --git a/lib/component/input/checkbox/MoltenCheckbox.tsx b/lib/component/input/checkbox/MoltenCheckbox.tsx new file mode 100644 index 0000000..e343e71 --- /dev/null +++ b/lib/component/input/checkbox/MoltenCheckbox.tsx @@ -0,0 +1,24 @@ +import type { CheckboxProps } from "$/types/Input"; +import clsx from "clsx"; +import MattrixwvCheckbox from "./MattrixwvCheckbox"; + + +export default function MoltenCheckbox({ + className, + box = true, + ...props +}: CheckboxProps){ + return ( + + ); +} diff --git a/lib/component/input/checkbox/PrimaryCheckbox.tsx b/lib/component/input/checkbox/PrimaryCheckbox.tsx new file mode 100644 index 0000000..6cd01d2 --- /dev/null +++ b/lib/component/input/checkbox/PrimaryCheckbox.tsx @@ -0,0 +1,24 @@ +import type { CheckboxProps } from "$/types/Input"; +import clsx from "clsx"; +import MattrixwvCheckbox from "./MattrixwvCheckbox"; + + +export default function PrimaryCheckbox({ + className, + box = true, + ...props +}: CheckboxProps){ + return ( + + ); +} diff --git a/lib/component/input/checkbox/SecondaryCheckbox.tsx b/lib/component/input/checkbox/SecondaryCheckbox.tsx new file mode 100644 index 0000000..cf7e67c --- /dev/null +++ b/lib/component/input/checkbox/SecondaryCheckbox.tsx @@ -0,0 +1,24 @@ +import type { CheckboxProps } from "$/types/Input"; +import clsx from "clsx"; +import MattrixwvCheckbox from "./MattrixwvCheckbox"; + + +export default function SecondaryCheckbox({ + className, + box = true, + ...props +}: CheckboxProps){ + return ( + + ); +} diff --git a/lib/component/input/checkbox/SuccessCheckbox.tsx b/lib/component/input/checkbox/SuccessCheckbox.tsx new file mode 100644 index 0000000..25fd089 --- /dev/null +++ b/lib/component/input/checkbox/SuccessCheckbox.tsx @@ -0,0 +1,25 @@ +import type { CheckboxProps } from "$/types/Input"; +import clsx from "clsx"; +import MattrixwvCheckbox from "./MattrixwvCheckbox"; + + +export default function SuccessCheckbox({ + className, + box = true, + ...props +}: CheckboxProps){ + return ( + + ); +} + diff --git a/lib/component/input/checkbox/TertiaryCheckbox.tsx b/lib/component/input/checkbox/TertiaryCheckbox.tsx new file mode 100644 index 0000000..3cdc986 --- /dev/null +++ b/lib/component/input/checkbox/TertiaryCheckbox.tsx @@ -0,0 +1,24 @@ +import type { CheckboxProps } from "$/types/Input"; +import clsx from "clsx"; +import MattrixwvCheckbox from "./MattrixwvCheckbox"; + + +export default function TertiaryCheckbox({ + className, + box = true, + ...props +}: CheckboxProps){ + return ( + + ); +} diff --git a/lib/component/input/checkbox/WarningCheckbox.tsx b/lib/component/input/checkbox/WarningCheckbox.tsx new file mode 100644 index 0000000..34ce563 --- /dev/null +++ b/lib/component/input/checkbox/WarningCheckbox.tsx @@ -0,0 +1,24 @@ +import type { CheckboxProps } from "$/types/Input"; +import clsx from "clsx"; +import MattrixwvCheckbox from "./MattrixwvCheckbox"; + + +export default function WarningCheckbox({ + className, + box = true, + ...props +}: CheckboxProps){ + return ( + + ); +} diff --git a/lib/component/input/file/DragAndDropFileInput.tsx b/lib/component/input/file/DragAndDropFileInput.tsx index bbf9790..10c73ed 100644 --- a/lib/component/input/file/DragAndDropFileInput.tsx +++ b/lib/component/input/file/DragAndDropFileInput.tsx @@ -1,20 +1,84 @@ -import { useRef } from "react"; +import type { FileInputProps } from "$/types/Input"; +import { humanReadableBytes } from "$/util/FileUtil"; +import clsx from "clsx"; +import { useEffect, useRef, useState } from "react"; -export default function DragAndDropFileInput(){ +export default function DragAndDropFileInput({ + id, + className, + name, + minSize, + maxSize, + showFileName, + showSize, + onChange, + disabled, + children +}: FileInputProps){ + const [ file, setFile ] = useState(); const inputRef = useRef(null); + useEffect(() => { + onChange?.(file); + }, [ file ]); + return ( -
e.preventDefault()} + onDrop={(e) => { + e.preventDefault(); + setFile(e.dataTransfer.files[0]); + if(inputRef.current){ inputRef.current.files = e.dataTransfer.files; } + }} > setFile(e.target.files?.[0])} + disabled={disabled} /> - Drag And Drop File Input -
+
+ {children} +
+ { + showFileName && +
+ {file?.name} +
+ } + { + showSize && +
maxSize, + "text-green-600": minSize && !maxSize && file?.size && file?.size > minSize, + "text-green-600 ": !minSize && maxSize && file?.size && file?.size < maxSize, + " text-green-600": minSize && maxSize && file?.size && file?.size > minSize && file?.size < maxSize + } + )} + > + {humanReadableBytes(file?.size ?? 0)} +
+ } +
+
+ ); } diff --git a/lib/component/input/file/FileInput.tsx b/lib/component/input/file/FileInput.tsx index 3d79cec..b15ab24 100644 --- a/lib/component/input/file/FileInput.tsx +++ b/lib/component/input/file/FileInput.tsx @@ -23,16 +23,16 @@ export default function FileInput({ return (
{ setFile(e.target.files?.[0]); onChange?.(e.target.files?.[0]); }} disabled={disabled} @@ -76,6 +76,7 @@ export default function FileInput({ className="text-nowrap rounded-r-lg" rounding="none" onClick={() => { inputRef.current?.click(); }} + disabled={disabled} > Click Me diff --git a/lib/component/input/radio/DangerRadioButton.tsx b/lib/component/input/radio/DangerRadioButton.tsx new file mode 100644 index 0000000..89e395b --- /dev/null +++ b/lib/component/input/radio/DangerRadioButton.tsx @@ -0,0 +1,19 @@ +import type { RadioButtonProps } from "$/types/Input"; +import clsx from "clsx"; +import RadioButton from "./RadioButton"; + + +export default function DangerRadioButton({ + className, + ...props +}: RadioButtonProps){ + return ( + + ); +} diff --git a/lib/component/input/radio/DarkRadioButton.tsx b/lib/component/input/radio/DarkRadioButton.tsx new file mode 100644 index 0000000..08de5a7 --- /dev/null +++ b/lib/component/input/radio/DarkRadioButton.tsx @@ -0,0 +1,19 @@ +import type { RadioButtonProps } from "$/types/Input"; +import clsx from "clsx"; +import RadioButton from "./RadioButton"; + + +export default function DarkRadioButton({ + className, + ...props +}: RadioButtonProps){ + return ( + + ); +} diff --git a/lib/component/input/radio/InfoRadioButton.tsx b/lib/component/input/radio/InfoRadioButton.tsx new file mode 100644 index 0000000..e2cfe93 --- /dev/null +++ b/lib/component/input/radio/InfoRadioButton.tsx @@ -0,0 +1,19 @@ +import type { RadioButtonProps } from "$/types/Input"; +import clsx from "clsx"; +import RadioButton from "./RadioButton"; + + +export default function InfoRadioButton({ + className, + ...props +}: RadioButtonProps){ + return ( + + ); +} diff --git a/lib/component/input/radio/LightRadioButton.tsx b/lib/component/input/radio/LightRadioButton.tsx new file mode 100644 index 0000000..85dac2a --- /dev/null +++ b/lib/component/input/radio/LightRadioButton.tsx @@ -0,0 +1,19 @@ +import type { RadioButtonProps } from "$/types/Input"; +import clsx from "clsx"; +import RadioButton from "./RadioButton"; + + +export default function LightRadioButton({ + className, + ...props +}: RadioButtonProps){ + return ( + + ); +} diff --git a/lib/component/input/radio/MoltenRadioButton.tsx b/lib/component/input/radio/MoltenRadioButton.tsx new file mode 100644 index 0000000..cb28b02 --- /dev/null +++ b/lib/component/input/radio/MoltenRadioButton.tsx @@ -0,0 +1,19 @@ +import type { RadioButtonProps } from "$/types/Input"; +import clsx from "clsx"; +import RadioButton from "./RadioButton"; + + +export default function MoltenRadioButton({ + className, + ...props +}: RadioButtonProps){ + return ( + + ); +} diff --git a/lib/component/input/radio/PrimaryRadioButton.tsx b/lib/component/input/radio/PrimaryRadioButton.tsx new file mode 100644 index 0000000..3b1eb05 --- /dev/null +++ b/lib/component/input/radio/PrimaryRadioButton.tsx @@ -0,0 +1,19 @@ +import type { RadioButtonProps } from "$/types/Input"; +import clsx from "clsx"; +import RadioButton from "./RadioButton"; + + +export default function PrimaryRadioButton({ + className, + ...props +}: RadioButtonProps){ + return ( + + ); +} diff --git a/lib/component/input/radio/RadioButton.tsx b/lib/component/input/radio/RadioButton.tsx new file mode 100644 index 0000000..e51956a --- /dev/null +++ b/lib/component/input/radio/RadioButton.tsx @@ -0,0 +1,44 @@ +import type { RadioButtonProps } from "$/types/Input"; +import { Radio } from "@headlessui/react"; +import clsx from "clsx"; + + +export default function RadioButton({ + id, + className, + labelClassName, + size = "sm", + value, + children +}: RadioButtonProps){ + return ( + +
+ { + children && +
+ {children} +
+ } + + ); +} diff --git a/lib/component/input/radio/RadioList.tsx b/lib/component/input/radio/RadioList.tsx new file mode 100644 index 0000000..54c1998 --- /dev/null +++ b/lib/component/input/radio/RadioList.tsx @@ -0,0 +1,35 @@ +import type { RadioListProps } from "$/types/Input"; +import { RadioGroup } from "@headlessui/react"; +import clsx from "clsx"; + + +export default function RadioList({ + id, + className, + name, + value, + onChange, + defaultValue, + direction = "horizontal", + children +}: RadioListProps){ + return ( + + {children} + + ); +} diff --git a/lib/component/input/radio/SecondaryRadioButton.tsx b/lib/component/input/radio/SecondaryRadioButton.tsx new file mode 100644 index 0000000..2518d70 --- /dev/null +++ b/lib/component/input/radio/SecondaryRadioButton.tsx @@ -0,0 +1,19 @@ +import type { RadioButtonProps } from "$/types/Input"; +import clsx from "clsx"; +import RadioButton from "./RadioButton"; + + +export default function SecondaryRadioButton({ + className, + ...props +}: RadioButtonProps){ + return ( + + ); +} diff --git a/lib/component/input/radio/SuccessRadioButton.tsx b/lib/component/input/radio/SuccessRadioButton.tsx new file mode 100644 index 0000000..88b3708 --- /dev/null +++ b/lib/component/input/radio/SuccessRadioButton.tsx @@ -0,0 +1,19 @@ +import type { RadioButtonProps } from "$/types/Input"; +import clsx from "clsx"; +import RadioButton from "./RadioButton"; + + +export default function SuccessRadioButton({ + className, + ...props +}: RadioButtonProps){ + return ( + + ); +} diff --git a/lib/component/input/radio/TertiaryRadioButton.tsx b/lib/component/input/radio/TertiaryRadioButton.tsx new file mode 100644 index 0000000..a97f9c9 --- /dev/null +++ b/lib/component/input/radio/TertiaryRadioButton.tsx @@ -0,0 +1,19 @@ +import type { RadioButtonProps } from "$/types/Input"; +import clsx from "clsx"; +import RadioButton from "./RadioButton"; + + +export default function TertiaryRadioButton({ + className, + ...props +}: RadioButtonProps){ + return ( + + ); +} diff --git a/lib/component/input/radio/WarningRadioButton.tsx b/lib/component/input/radio/WarningRadioButton.tsx new file mode 100644 index 0000000..1c5a59d --- /dev/null +++ b/lib/component/input/radio/WarningRadioButton.tsx @@ -0,0 +1,19 @@ +import type { RadioButtonProps } from "$/types/Input"; +import clsx from "clsx"; +import RadioButton from "./RadioButton"; + + +export default function WarningRadioButton({ + className, + ...props +}: RadioButtonProps){ + return ( + + ); +} diff --git a/lib/types/Input.d.ts b/lib/types/Input.d.ts index a8bf8b9..81ad384 100644 --- a/lib/types/Input.d.ts +++ b/lib/types/Input.d.ts @@ -105,9 +105,47 @@ export interface FileInputProps { maxSize?: number; showFileName?: boolean; showSize?: boolean; - defaultValue?: File; - value?: File; onChange?: (newFile: File | undefined) => void; disabled?: boolean; children?: React.ReactNode; } + + +export type CheckboxSize = "none" | "xs" | "sm" | "md" | "lg" | "xl"; + +export interface CheckboxProps { + id?: string; + className?: string; + labelClassName?: string; + name?: string; + size?: CheckboxSize; + box?: boolean; + onChange?: (newChecked: boolean) => void; + checked?: boolean; + defaultChecked?: boolean; + strokeWidth?: number; + value?: string; + children?: React.ReactNode; +} + +export type RadioButtonSize = "none" | "xs" | "sm" | "md" | "lg" | "xl"; + +export interface RadioButtonProps { + id?: string; + className?: string; + labelClassName?: string; + size?: RadioButtonSize; + value: string; + children?: React.ReactNode; +} + +export interface RadioListProps { + id?: string; + className?: string; + name?: string; + value?: string; + onChange?: (value: string) => void; + defaultValue?: string; + direction?: "vertical" | "horizontal"; + children?: React.ReactNode; +} diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx index d3f17c8..967f508 100644 --- a/src/routes/__root.tsx +++ b/src/routes/__root.tsx @@ -27,6 +27,7 @@ export const Route = createRootRoute({ { navLinks.map((link) => ( {link.label} diff --git a/src/routes/input/index.tsx b/src/routes/input/index.tsx index 7e96ed8..e935a43 100644 --- a/src/routes/input/index.tsx +++ b/src/routes/input/index.tsx @@ -1,6 +1,6 @@ import { MattrixwvTabGroup } from "$/component/tab"; import type { TabGroupContent } from "$/types/Tab"; -import { FileContent, SwitchContent, TextContent } from "@/util/InputUtils"; +import { CheckboxContent, FileContent, RadioContent, SwitchContent, TextContent } from "@/util/InputUtils"; import { createFileRoute } from "@tanstack/react-router"; @@ -11,9 +11,11 @@ export const Route = createFileRoute('/input/')({ function InputPage(){ const tabs: TabGroupContent[] = [ - { tab: "Input", content: }, - { tab: "Text", content: }, - { tab: "Switch", content: } + { tab: "Checkbox", content: }, + { tab: "Radio", content: }, + { tab: "File", content: }, + { tab: "Switch", content: }, + { tab: "Text", content: } ]; return ( diff --git a/src/util/InputUtils.tsx b/src/util/InputUtils.tsx index c303dd8..aae5e40 100644 --- a/src/util/InputUtils.tsx +++ b/src/util/InputUtils.tsx @@ -1,5 +1,28 @@ import { Button } from "$/component/button"; import { DragAndDropFileInput, FileInput, NumberInput, OptionInput, SelectInput, TextInput } from "$/component/input"; +import DangerCheckbox from "$/component/input/checkbox/DangerCheckbox"; +import DarkCheckbox from "$/component/input/checkbox/DarkCheckbox"; +import InfoCheckbox from "$/component/input/checkbox/InfoCheckbox"; +import LightCheckbox from "$/component/input/checkbox/LightCheckbox"; +import MattrixwvCheckbox from "$/component/input/checkbox/MattrixwvCheckbox"; +import MoltenCheckbox from "$/component/input/checkbox/MoltenCheckbox"; +import PrimaryCheckbox from "$/component/input/checkbox/PrimaryCheckbox"; +import SecondaryCheckbox from "$/component/input/checkbox/SecondaryCheckbox"; +import SuccessCheckbox from "$/component/input/checkbox/SuccessCheckbox"; +import TertiaryCheckbox from "$/component/input/checkbox/TertiaryCheckbox"; +import WarningCheckbox from "$/component/input/checkbox/WarningCheckbox"; +import DangerRadioButton from "$/component/input/radio/DangerRadioButton"; +import DarkRadioButton from "$/component/input/radio/DarkRadioButton"; +import InfoRadioButton from "$/component/input/radio/InfoRadioButton"; +import LightRadioButton from "$/component/input/radio/LightRadioButton"; +import MoltenRadioButton from "$/component/input/radio/MoltenRadioButton"; +import PrimaryRadioButton from "$/component/input/radio/PrimaryRadioButton"; +import RadioButton from "$/component/input/radio/RadioButton"; +import RadioList from "$/component/input/radio/RadioList"; +import SecondaryRadioButton from "$/component/input/radio/SecondaryRadioButton"; +import SuccessRadioButton from "$/component/input/radio/SuccessRadioButton"; +import TertiaryRadioButton from "$/component/input/radio/TertiaryRadioButton"; +import WarningRadioButton from "$/component/input/radio/WarningRadioButton"; import ButtonSwitch from "$/component/input/switch/ButtonSwitch"; import DangerSwitch from "$/component/input/switch/DangerSwitch"; import DarkSwitch from "$/component/input/switch/DarkSwitch"; @@ -36,6 +59,7 @@ export function SwitchContent(): React.ReactNode{ className="bg-gray-400 data-checked:bg-blue-600" knobClassName="bg-white" size={size} + defaultChecked={true} > {size} Switch @@ -57,6 +81,7 @@ export function SwitchContent(): React.ReactNode{ wide={true} offText={Off} onText="On" + defaultChecked={true} > {size} Switch @@ -73,6 +98,7 @@ export function SwitchContent(): React.ReactNode{ > {size} Switch @@ -110,6 +136,7 @@ export function SwitchContent(): React.ReactNode{ > {size} Switch @@ -147,6 +174,7 @@ export function SwitchContent(): React.ReactNode{ > {size} Switch @@ -184,6 +212,7 @@ export function SwitchContent(): React.ReactNode{ > {size} Switch @@ -221,6 +250,7 @@ export function SwitchContent(): React.ReactNode{ > {size} Switch @@ -258,6 +288,7 @@ export function SwitchContent(): React.ReactNode{ > {size} Switch @@ -295,6 +326,7 @@ export function SwitchContent(): React.ReactNode{ > {size} Switch @@ -332,6 +364,7 @@ export function SwitchContent(): React.ReactNode{ > {size} Switch @@ -369,6 +402,7 @@ export function SwitchContent(): React.ReactNode{ > {size} Switch @@ -534,7 +568,14 @@ export function FileContent(){ /> - + + Drag And Drop File Input +
); @@ -556,3 +597,149 @@ function FileDisplay({
); } + +export function CheckboxContent(){ + return ( +
+ +
+ Default + Primary + Secondary + Tertiary + Info + Success + Warning + Danger + Molten + Light + Dark +
+ + +
+ Default + Primary + Secondary + Tertiary + Info + Success + Warning + Danger + Molten + Light + Dark +
+ +
+ ); +} + +function CheckboxDisplay({ + title, + children +}:{ + title: React.ReactNode; + children: React.ReactNode; +}){ + return ( +
+

{title}

+ {children} +
+ ); +} + +export function RadioContent(){ + return ( +
+ + + Extra Small + Small + Medium + Large + Extra Large + + + +
+ Primary + Secondary + Tertiary + Info + Success + warning + Danger + Molten + Light + Dark +
+ + + + Default + Primary + Secondary + Tertiary + Info + Success + Warning + Danger + Molten + Light + Dark + + + + + Default + Primary + Secondary + Tertiary + Info + Success + Warning + Danger + Molten + Light + Dark + + +
+ ); +} + +function RadioDisplay({ + title, + children +}:{ + title: React.ReactNode; + children: React.ReactNode; +}){ + return ( +
+

{title}

+ {children} +
+ ); +}