@sarunyu/system-one 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/README.md +11 -0
  2. package/dist/index.cjs +3672 -0
  3. package/dist/index.cjs.map +1 -0
  4. package/dist/index.js +3655 -0
  5. package/dist/index.js.map +1 -0
  6. package/dist/src/components/button.d.ts +16 -0
  7. package/dist/src/components/button.d.ts.map +1 -0
  8. package/dist/src/components/card.d.ts +18 -0
  9. package/dist/src/components/card.d.ts.map +1 -0
  10. package/dist/src/components/date-input.d.ts +33 -0
  11. package/dist/src/components/date-input.d.ts.map +1 -0
  12. package/dist/src/components/dropdown-multiple.d.ts +28 -0
  13. package/dist/src/components/dropdown-multiple.d.ts.map +1 -0
  14. package/dist/src/components/dropdown.d.ts +29 -0
  15. package/dist/src/components/dropdown.d.ts.map +1 -0
  16. package/dist/src/components/input.d.ts +15 -0
  17. package/dist/src/components/input.d.ts.map +1 -0
  18. package/dist/src/components/option-list.d.ts +19 -0
  19. package/dist/src/components/option-list.d.ts.map +1 -0
  20. package/dist/src/components/search-input.d.ts +11 -0
  21. package/dist/src/components/search-input.d.ts.map +1 -0
  22. package/dist/src/components/tab.d.ts +24 -0
  23. package/dist/src/components/tab.d.ts.map +1 -0
  24. package/dist/src/components/textarea.d.ts +14 -0
  25. package/dist/src/components/textarea.d.ts.map +1 -0
  26. package/dist/src/components/time-input.d.ts +36 -0
  27. package/dist/src/components/time-input.d.ts.map +1 -0
  28. package/dist/src/components/ui/drawer.d.ts +14 -0
  29. package/dist/src/components/ui/drawer.d.ts.map +1 -0
  30. package/dist/src/components/ui/use-mobile.d.ts +2 -0
  31. package/dist/src/components/ui/use-mobile.d.ts.map +1 -0
  32. package/dist/src/index.d.ts +25 -0
  33. package/dist/src/index.d.ts.map +1 -0
  34. package/dist/src/lib/utils.d.ts +3 -0
  35. package/dist/src/lib/utils.d.ts.map +1 -0
  36. package/dist/style.css +2 -0
  37. package/package.json +120 -0
@@ -0,0 +1,18 @@
1
+ export type CardVariant = "desktop" | "tablet" | "mobile";
2
+ export type CardTagStatus = "not-registered" | "registered" | "full";
3
+ export interface CardProps {
4
+ variant?: CardVariant;
5
+ title?: string;
6
+ date?: string;
7
+ time?: string;
8
+ location?: string;
9
+ showLocation?: boolean;
10
+ showAudience?: boolean;
11
+ count?: string;
12
+ locked?: boolean;
13
+ tagStatus?: CardTagStatus;
14
+ image?: string;
15
+ className?: string;
16
+ }
17
+ export declare const Card: import('react').ForwardRefExoticComponent<CardProps & import('react').RefAttributes<HTMLDivElement>>;
18
+ //# sourceMappingURL=card.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/card.tsx"],"names":[],"mappings":"AAQA,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAC1D,MAAM,MAAM,aAAa,GAAG,gBAAgB,GAAG,YAAY,GAAG,MAAM,CAAC;AAErE,MAAM,WAAW,SAAS;IACxB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAiCD,eAAO,MAAM,IAAI,sGAyHf,CAAC"}
@@ -0,0 +1,33 @@
1
+ import { default as React } from 'react';
2
+ import { DateRange } from 'react-day-picker';
3
+ export type { DateRange };
4
+ export type DateInputState = "default" | "focus" | "error" | "disabled";
5
+ export type DateInputMode = "single" | "range";
6
+ /** "calendar" = DayPicker grid (default), "scroll" = drum-scroll picker (single mode only) */
7
+ export type DatePickerVariant = "calendar" | "scroll";
8
+ export interface DateInputProps {
9
+ mode?: DateInputMode;
10
+ /** Floating label / placeholder text */
11
+ placeholder?: string;
12
+ /** Shows red asterisk */
13
+ required?: boolean;
14
+ /** Override visual state (for showcase) */
15
+ forceState?: DateInputState;
16
+ /** Error message shown below in error state */
17
+ errorMessage?: string;
18
+ /** Helper text shown below */
19
+ helperText?: string;
20
+ /** "calendar" (default) or "scroll" drum picker. Scroll only works with mode="single". */
21
+ pickerVariant?: DatePickerVariant;
22
+ /** Controlled value – single mode */
23
+ value?: Date;
24
+ onChange?: (date: Date | undefined) => void;
25
+ /** Controlled value – range mode */
26
+ dateRange?: DateRange;
27
+ onRangeChange?: (range: DateRange | undefined) => void;
28
+ /** Gregorian years that are disabled in the year picker grid */
29
+ disabledYears?: number[];
30
+ className?: string;
31
+ }
32
+ export declare const DateInput: React.ForwardRefExoticComponent<DateInputProps & React.RefAttributes<HTMLDivElement>>;
33
+ //# sourceMappingURL=date-input.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"date-input.d.ts","sourceRoot":"","sources":["../../../src/components/date-input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,SAAS,EAAgB,MAAM,kBAAkB,CAAC;AAoBhE,YAAY,EAAE,SAAS,EAAE,CAAC;AAC1B,MAAM,MAAM,cAAc,GACtB,SAAS,GACT,OAAO,GACP,OAAO,GACP,UAAU,CAAC;AACf,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC/C,8FAA8F;AAC9F,MAAM,MAAM,iBAAiB,GAAG,UAAU,GAAG,QAAQ,CAAC;AAEtD,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,+CAA+C;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8BAA8B;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0FAA0F;IAC1F,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAClC,qCAAqC;IACrC,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;IAC5C,oCAAoC;IACpC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IACvD,gEAAgE;IAChE,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA6rBD,eAAO,MAAM,SAAS,uFA8ZrB,CAAC"}
@@ -0,0 +1,28 @@
1
+ import { default as React } from 'react';
2
+ export type DropdownMultipleState = "default" | "focus" | "error" | "disabled";
3
+ export interface DropdownMultipleOption {
4
+ label: string;
5
+ value: string;
6
+ }
7
+ export interface DropdownMultipleProps {
8
+ /** Placeholder / floating-label text */
9
+ placeholder?: string;
10
+ /** Text label rendered above the input */
11
+ label?: string;
12
+ /** Appends a red asterisk */
13
+ required?: boolean;
14
+ /** Override the visual state (for showcase) */
15
+ forceState?: DropdownMultipleState;
16
+ /** Error message shown below when state is "error" */
17
+ errorMessage?: string;
18
+ /** Helper text shown below */
19
+ helperText?: string;
20
+ /** Controlled selected values */
21
+ value?: string[];
22
+ onChange?: (value: string[]) => void;
23
+ /** Options list */
24
+ options?: DropdownMultipleOption[];
25
+ className?: string;
26
+ }
27
+ export declare const DropdownMultiple: React.ForwardRefExoticComponent<DropdownMultipleProps & React.RefAttributes<HTMLDivElement>>;
28
+ //# sourceMappingURL=dropdown-multiple.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"dropdown-multiple.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown-multiple.tsx"],"names":[],"mappings":"AAEA,OAAO,KAQN,MAAM,OAAO,CAAC;AAGf,MAAM,MAAM,qBAAqB,GAC7B,SAAS,GACT,OAAO,GACP,OAAO,GACP,UAAU,CAAC;AAEf,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,qBAAqB;IACpC,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,sDAAsD;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8BAA8B;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,mBAAmB;IACnB,OAAO,CAAC,EAAE,sBAAsB,EAAE,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA+QD,eAAO,MAAM,gBAAgB,8FA+e5B,CAAC"}
@@ -0,0 +1,29 @@
1
+ import { default as React } from 'react';
2
+ export type DropdownState = "default" | "focus" | "error" | "disabled";
3
+ export interface DropdownOption {
4
+ label: string;
5
+ value: string;
6
+ }
7
+ export interface DropdownProps {
8
+ /** Placeholder / floating-label text */
9
+ placeholder?: string;
10
+ /** External label rendered above the trigger */
11
+ label?: string;
12
+ /** Appends a red asterisk */
13
+ required?: boolean;
14
+ /** Override the visual state (for showcase) */
15
+ forceState?: DropdownState;
16
+ /** Error message shown below when state is "error" */
17
+ errorMessage?: string;
18
+ /** Helper text shown below */
19
+ helperText?: string;
20
+ /** Controlled selected value */
21
+ value?: string;
22
+ onChange?: (value: string) => void;
23
+ /** Options list */
24
+ options?: DropdownOption[];
25
+ className?: string;
26
+ }
27
+ declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement>>;
28
+ export { Dropdown };
29
+ //# sourceMappingURL=dropdown.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAGvE,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,CAAC;AAEvE,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,sDAAsD;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8BAA8B;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,mBAAmB;IACnB,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAsBD,QAAA,MAAM,QAAQ,sFAsVb,CAAC;AAIF,OAAO,EAAE,QAAQ,EAAE,CAAC"}
@@ -0,0 +1,15 @@
1
+ import { default as React } from 'react';
2
+ export type InputState = "default" | "focus" | "error" | "disabled";
3
+ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value"> {
4
+ forceState?: InputState;
5
+ errorMessage?: string;
6
+ value?: string;
7
+ onChange?: (value: string) => void;
8
+ rightIcon?: React.ReactNode;
9
+ unit?: string;
10
+ helperText?: string;
11
+ showCount?: boolean;
12
+ maxCount?: number;
13
+ }
14
+ export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLDivElement>>;
15
+ //# sourceMappingURL=input.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAGpD,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,CAAC;AAEpE,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC/E,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,KAAK,mFAuNhB,CAAC"}
@@ -0,0 +1,19 @@
1
+ import { default as React } from 'react';
2
+ export interface OptionItem {
3
+ label: string;
4
+ value: string;
5
+ icon?: React.ReactNode;
6
+ disabled?: boolean;
7
+ }
8
+ export interface OptionListProps {
9
+ options: OptionItem[];
10
+ selectedValue?: string;
11
+ selectedValues?: string[];
12
+ onSelect?: (value: string) => void;
13
+ onToggle?: (value: string) => void;
14
+ maxVisible?: number;
15
+ emptyText?: string;
16
+ className?: string;
17
+ }
18
+ export declare const OptionList: React.ForwardRefExoticComponent<OptionListProps & React.RefAttributes<HTMLDivElement>>;
19
+ //# sourceMappingURL=option-list.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"option-list.d.ts","sourceRoot":"","sources":["../../../src/components/option-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAGpD,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAsBD,eAAO,MAAM,UAAU,wFA6GtB,CAAC"}
@@ -0,0 +1,11 @@
1
+ export type SearchInputSize = "lg" | "sm";
2
+ export interface SearchInputProps {
3
+ placeholder?: string;
4
+ value?: string;
5
+ onChange?: (value: string) => void;
6
+ size?: SearchInputSize;
7
+ className?: string;
8
+ onClear?: () => void;
9
+ }
10
+ export declare const SearchInput: import('react').ForwardRefExoticComponent<SearchInputProps & import('react').RefAttributes<HTMLDivElement>>;
11
+ //# sourceMappingURL=search-input.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"search-input.d.ts","sourceRoot":"","sources":["../../../src/components/search-input.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1C,MAAM,WAAW,gBAAgB;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,WAAW,6GA2GvB,CAAC"}
@@ -0,0 +1,24 @@
1
+ export type TabSize = "lg" | "md" | "sm";
2
+ export interface TabItem {
3
+ id: string;
4
+ title: string;
5
+ disabled?: boolean;
6
+ }
7
+ export interface TabProps {
8
+ title?: string;
9
+ size?: TabSize;
10
+ active?: boolean;
11
+ disabled?: boolean;
12
+ onClick?: () => void;
13
+ className?: string;
14
+ }
15
+ export declare const Tab: import('react').ForwardRefExoticComponent<TabProps & import('react').RefAttributes<HTMLDivElement>>;
16
+ export interface TabGroupProps {
17
+ items: TabItem[];
18
+ activeId?: string;
19
+ size?: TabSize;
20
+ onChange?: (id: string) => void;
21
+ className?: string;
22
+ }
23
+ export declare const TabGroup: import('react').ForwardRefExoticComponent<TabGroupProps & import('react').RefAttributes<HTMLDivElement>>;
24
+ //# sourceMappingURL=tab.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../src/components/tab.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzC,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,QAAQ;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA0BD,eAAO,MAAM,GAAG,qGAyDd,CAAC;AAIH,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,QAAQ,0GAoBpB,CAAC"}
@@ -0,0 +1,14 @@
1
+ import { default as React } from 'react';
2
+ export type TextAreaState = "default" | "focus" | "error" | "disabled";
3
+ export interface TextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange" | "value" | "rows"> {
4
+ forceState?: TextAreaState;
5
+ errorMessage?: string;
6
+ value?: string;
7
+ onChange?: (value: string) => void;
8
+ helperText?: string;
9
+ showCount?: boolean;
10
+ maxCount?: number;
11
+ rows?: number;
12
+ }
13
+ export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLDivElement>>;
14
+ //# sourceMappingURL=textarea.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/components/textarea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAGpD,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,CAAC;AAEvE,MAAM,WAAW,aACf,SAAQ,IAAI,CACV,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EACjD,UAAU,GAAG,OAAO,GAAG,MAAM,CAC9B;IACD,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,QAAQ,sFA+KpB,CAAC"}
@@ -0,0 +1,36 @@
1
+ export type TimeInputState = "default" | "focus" | "error" | "disabled";
2
+ export type TimeInputMode = "single" | "range";
3
+ export interface TimeValue {
4
+ hour: number;
5
+ minute: number;
6
+ }
7
+ export interface TimeInputProps {
8
+ mode?: TimeInputMode;
9
+ /** Floating label / placeholder text */
10
+ placeholder?: string;
11
+ /** Shows red asterisk */
12
+ required?: boolean;
13
+ /** Override visual state (for showcase) */
14
+ forceState?: TimeInputState;
15
+ /** Error message shown below in error state */
16
+ errorMessage?: string;
17
+ /** Helper text shown below */
18
+ helperText?: string;
19
+ /** Single mode value */
20
+ value?: TimeValue;
21
+ onChange?: (v: TimeValue) => void;
22
+ /** Range mode values */
23
+ startTime?: TimeValue;
24
+ endTime?: TimeValue;
25
+ onStartChange?: (v: TimeValue) => void;
26
+ onEndChange?: (v: TimeValue) => void;
27
+ className?: string;
28
+ }
29
+ export interface TimeSlot {
30
+ start: TimeValue;
31
+ end: TimeValue;
32
+ label: string;
33
+ }
34
+ declare const TimeInput: import('react').ForwardRefExoticComponent<TimeInputProps & import('react').RefAttributes<HTMLDivElement>>;
35
+ export { TimeInput };
36
+ //# sourceMappingURL=time-input.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"time-input.d.ts","sourceRoot":"","sources":["../../../src/components/time-input.tsx"],"names":[],"mappings":"AAsBA,MAAM,MAAM,cAAc,GACtB,SAAS,GACT,OAAO,GACP,OAAO,GACP,UAAU,CAAC;AACf,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE/C,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,+CAA+C;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8BAA8B;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wBAAwB;IACxB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;IAClC,wBAAwB;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAUD,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,SAAS,CAAC;IACjB,GAAG,EAAE,SAAS,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAqVD,QAAA,MAAM,SAAS,2GA6Zd,CAAC;AAIF,OAAO,EAAE,SAAS,EAAE,CAAC"}
@@ -0,0 +1,14 @@
1
+ import { Drawer as DrawerPrimitive } from 'vaul';
2
+ import * as React from "react";
3
+ declare function Drawer({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
4
+ declare function DrawerTrigger({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
5
+ declare function DrawerPortal({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
6
+ declare function DrawerClose({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
7
+ declare function DrawerOverlay({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
8
+ declare function DrawerContent({ className, children, ...props }: React.ComponentProps<typeof DrawerPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
9
+ declare function DrawerHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
10
+ declare function DrawerFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
11
+ declare function DrawerTitle({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
12
+ declare function DrawerDescription({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
13
+ export { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, };
14
+ //# sourceMappingURL=drawer.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,MAAM,CAAC;AAIjD,iBAAS,MAAM,CAAC,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAEnD;AAED,iBAAS,aAAa,CAAC,EACrB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAEtD;AAED,iBAAS,YAAY,CAAC,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,CAAC,2CAErD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAEpD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAWtD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAqBtD;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQzE;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQzE;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAQpD;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,2CAQ1D;AAED,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,aAAa,EACb,WAAW,EACX,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,CAAC"}
@@ -0,0 +1,2 @@
1
+ export declare function useIsMobile(): boolean;
2
+ //# sourceMappingURL=use-mobile.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"use-mobile.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/use-mobile.ts"],"names":[],"mappings":"AAIA,wBAAgB,WAAW,YAgB1B"}
@@ -0,0 +1,25 @@
1
+ export { Button } from './components/button';
2
+ export { Card } from './components/card';
3
+ export { DateInput } from './components/date-input';
4
+ export { Dropdown } from './components/dropdown';
5
+ export { DropdownMultiple } from './components/dropdown-multiple';
6
+ export { Input } from './components/input';
7
+ export { OptionList } from './components/option-list';
8
+ export { SearchInput } from './components/search-input';
9
+ export { Tab, TabGroup } from './components/tab';
10
+ export { TextArea } from './components/textarea';
11
+ export { TimeInput } from './components/time-input';
12
+ export { cn } from './lib/utils';
13
+ export type { ButtonProps, ButtonSize, ButtonLabelSize, ButtonIconSize, ButtonVariant, } from './components/button';
14
+ export type { CardProps, CardVariant, CardTagStatus, } from './components/card';
15
+ export type { DateInputProps, DateInputState, DateInputMode, DatePickerVariant, } from './components/date-input';
16
+ export type { DateRange } from 'react-day-picker';
17
+ export type { DropdownState, DropdownOption, DropdownProps, } from './components/dropdown';
18
+ export type { DropdownMultipleState, DropdownMultipleOption, DropdownMultipleProps, } from './components/dropdown-multiple';
19
+ export type { InputState, InputProps, } from './components/input';
20
+ export type { OptionItem, OptionListProps, } from './components/option-list';
21
+ export type { SearchInputSize, SearchInputProps, } from './components/search-input';
22
+ export type { TabSize, TabItem, TabProps, TabGroupProps, } from './components/tab';
23
+ export type { TextAreaState, TextAreaProps, } from './components/textarea';
24
+ export type { TimeInputState, TimeInputMode, TimeValue, TimeInputProps, TimeSlot, } from './components/time-input';
25
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAGpD,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAGjC,YAAY,EACV,WAAW,EACX,UAAU,EACV,eAAe,EACf,cAAc,EACd,aAAa,GACd,MAAM,qBAAqB,CAAC;AAG7B,YAAY,EACV,SAAS,EACT,WAAW,EACX,aAAa,GACd,MAAM,mBAAmB,CAAC;AAG3B,YAAY,EACV,cAAc,EACd,cAAc,EACd,aAAa,EACb,iBAAiB,GAClB,MAAM,yBAAyB,CAAC;AACjC,YAAY,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAGlD,YAAY,EACV,aAAa,EACb,cAAc,EACd,aAAa,GACd,MAAM,uBAAuB,CAAC;AAG/B,YAAY,EACV,qBAAqB,EACrB,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,gCAAgC,CAAC;AAGxC,YAAY,EACV,UAAU,EACV,UAAU,GACX,MAAM,oBAAoB,CAAC;AAG5B,YAAY,EACV,UAAU,EACV,eAAe,GAChB,MAAM,0BAA0B,CAAC;AAGlC,YAAY,EACV,eAAe,EACf,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AAGnC,YAAY,EACV,OAAO,EACP,OAAO,EACP,QAAQ,EACR,aAAa,GACd,MAAM,kBAAkB,CAAC;AAG1B,YAAY,EACV,aAAa,EACb,aAAa,GACd,MAAM,uBAAuB,CAAC;AAG/B,YAAY,EACV,cAAc,EACd,aAAa,EACb,SAAS,EACT,cAAc,EACd,QAAQ,GACT,MAAM,yBAAyB,CAAC"}
@@ -0,0 +1,3 @@
1
+ import { ClassValue } from 'clsx';
2
+ export declare function cn(...inputs: ClassValue[]): string;
3
+ //# sourceMappingURL=utils.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAG7C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}
package/dist/style.css ADDED
@@ -0,0 +1,2 @@
1
+ /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
2
+ @import "https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600&display=swap";@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-duration:initial;--tw-animation-delay:0s;--tw-animation-direction:normal;--tw-animation-duration:initial;--tw-animation-fill-mode:none;--tw-animation-iteration-count:1;--tw-enter-blur:0;--tw-enter-opacity:1;--tw-enter-rotate:0;--tw-enter-scale:1;--tw-enter-translate-x:0;--tw-enter-translate-y:0;--tw-exit-blur:0;--tw-exit-opacity:1;--tw-exit-rotate:0;--tw-exit-scale:1;--tw-exit-translate-x:0;--tw-exit-translate-y:0}}}@keyframes caret-blink{0%,to{opacity:1}50%{opacity:0}}@layer theme{:root,:host{--font-sans:var(--font-sans);--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--aspect-video:16 / 9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}*{border-color:var(--border);outline-color:var(--ring)}@supports (color:color-mix(in lab, red, red)){*{outline-color:color-mix(in oklab, var(--ring) 50%, transparent)}}body{background-color:var(--background);color:var(--foreground);font-family:var(--font-sans)}html{font-size:var(--font-size)}h1{font-size:var(--text-2xl);font-weight:var(--font-weight-medium);line-height:1.5}h2{font-size:var(--text-xl);font-weight:var(--font-weight-medium);line-height:1.5}h3{font-size:var(--text-lg);font-weight:var(--font-weight-medium);line-height:1.5}h4,label,button{font-size:var(--text-base);font-weight:var(--font-weight-medium);line-height:1.5}input{font-size:var(--text-base);font-weight:var(--font-weight-normal);line-height:1.5}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.inset-0{inset:calc(var(--spacing) * 0)}.start{inset-inline-start:var(--spacing)}.end{inset-inline-end:var(--spacing)}.top-1\/2{top:50%}.top-\[8px\]{top:8px}.right-0{right:calc(var(--spacing) * 0)}.right-1{right:calc(var(--spacing) * 1)}.right-\[4px\]{right:4px}.left-0{left:calc(var(--spacing) * 0)}.left-1{left:calc(var(--spacing) * 1)}.left-\[8px\]{left:8px}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.m-0{margin:calc(var(--spacing) * 0)}.mx-auto{margin-inline:auto}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-auto{margin-top:auto}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.table{display:table}.aspect-video{aspect-ratio:var(--aspect-video)}.size-\[13px\]{width:13px;height:13px}.size-\[15px\]{width:15px;height:15px}.size-\[16px\]{width:16px;height:16px}.size-\[20px\]{width:20px;height:20px}.size-\[24px\]{width:24px;height:24px}.size-\[26px\]{width:26px;height:26px}.size-\[28px\]{width:28px;height:28px}.size-\[32px\]{width:32px;height:32px}.size-\[36px\]{width:36px;height:36px}.size-\[40px\]{width:40px;height:40px}.size-full{width:100%;height:100%}.h-2{height:calc(var(--spacing) * 2)}.h-\[14px\]{height:14px}.h-\[16px\]{height:16px}.h-\[22px\]{height:22px}.h-\[25px\]{height:25px}.h-\[28px\]{height:28px}.h-\[32px\]{height:32px}.h-\[36px\]{height:36px}.h-\[38px\]{height:38px}.h-\[40px\]{height:40px}.h-\[44px\]{height:44px}.h-\[116px\]{height:116px}.h-\[173px\]{height:173px}.h-auto{height:auto}.h-full{height:100%}.min-h-\[1px\]{min-height:1px}.min-h-\[32px\]{min-height:32px}.min-h-\[48px\]{min-height:48px}.min-h-\[120px\]{min-height:120px}.min-h-px{min-height:1px}.w-\[7px\]{width:7px}.w-\[16px\]{width:16px}.w-\[28px\]{width:28px}.w-\[36px\]{width:36px}.w-\[100px\]{width:100px}.w-\[163px\]{width:163px}.w-\[224px\]{width:224px}.w-\[308px\]{width:308px}.w-full{width:100%}.w-px{width:1px}.max-w-\[340px\]{max-width:340px}.max-w-\[343px\]{max-width:343px}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-\[40px\]{min-width:40px}.min-w-\[80px\]{min-width:80px}.min-w-\[340px\]{min-width:340px}.min-w-px{min-width:1px}.flex-1{flex:1}.shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.table-fixed{table-layout:fixed}.border-collapse{border-collapse:collapse}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.resize-none{resize:none}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.content-center{align-content:center}.content-stretch{align-content:stretch}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-\[2px\]{gap:2px}.gap-\[4px\]{gap:4px}.gap-\[6px\]{gap:6px}.gap-\[8px\]{gap:8px}.gap-\[12px\]{gap:12px}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}.gap-x-\[20px\]{column-gap:20px}.gap-y-\[32px\]{row-gap:32px}.self-center{align-self:center}.self-end{align-self:flex-end}.self-stretch{align-self:stretch}.overflow-auto{overflow:auto}.overflow-clip{overflow:clip}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.\!rounded-none{border-radius:0!important}.rounded{border-radius:.25rem}.rounded-\[2px\]{border-radius:2px}.rounded-\[3px\]{border-radius:3px}.rounded-\[4px\]{border-radius:4px}.rounded-\[6px\]{border-radius:6px}.rounded-\[8px\]{border-radius:8px}.rounded-full{border-radius:3.40282e38px}.\!rounded-l-\[6px\]{border-top-left-radius:6px!important;border-bottom-left-radius:6px!important}.\!rounded-l-none{border-top-left-radius:0!important;border-bottom-left-radius:0!important}.\!rounded-r-\[6px\]{border-top-right-radius:6px!important;border-bottom-right-radius:6px!important}.\!rounded-r-none{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-b-\[1\.5px\]{border-bottom-style:var(--tw-border-style);border-bottom-width:1.5px}.border-none{--tw-border-style:none;border-style:none}.border-solid{--tw-border-style:solid;border-style:solid}.border-border{border-color:var(--border)}.border-border-disabled{border-color:var(--border-disabled)}.border-primary-action{border-color:var(--primary-action)}.\!bg-primary-action{background-color:var(--primary-action)!important}.\!bg-range-bg{background-color:var(--range-bg)!important}.bg-\[\#e5e7eb\]{background-color:#e5e7eb}.bg-\[\#fafafa\]{background-color:#fafafa}.bg-background{background-color:var(--background)}.bg-black\/50{background-color:#00000080}@supports (color:color-mix(in lab, red, red)){.bg-black\/50{background-color:color-mix(in oklab, var(--color-black) 50%, transparent)}}.bg-border{background-color:var(--border)}.bg-disabled-bg{background-color:var(--disabled-bg)}.bg-hover-bg{background-color:var(--hover-bg)}.bg-muted{background-color:var(--muted)}.bg-primary-action{background-color:var(--primary-action)}.bg-primary-action-light{background-color:var(--primary-action-light)}.bg-primary-action-muted{background-color:var(--primary-action-muted)}.bg-selected-bg{background-color:var(--selected-bg)}.bg-selected-light-bg{background-color:var(--selected-light-bg)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.object-cover{object-fit:cover}.p-0{padding:calc(var(--spacing) * 0)}.p-2{padding:calc(var(--spacing) * 2)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-\[1px\]{padding:1px}.p-\[8px\]{padding:8px}.p-\[10px\]{padding:10px}.p-\[12px\]{padding:12px}.p-\[14px\]{padding:14px}.p-\[16px\]{padding:16px}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-\[4px\]{padding-inline:4px}.px-\[6px\]{padding-inline:6px}.px-\[8px\]{padding-inline:8px}.px-\[10px\]{padding-inline:10px}.px-\[12px\]{padding-inline:12px}.px-\[14px\]{padding-inline:14px}.py-\[4px\]{padding-block:4px}.py-\[6px\]{padding-block:6px}.py-\[7px\]{padding-block:7px}.py-\[8px\]{padding-block:8px}.py-\[10px\]{padding-block:10px}.py-\[12px\]{padding-block:12px}.pt-1{padding-top:calc(var(--spacing) * 1)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pt-\[12px\]{padding-top:12px}.pr-\[4px\]{padding-right:4px}.pr-\[6px\]{padding-right:6px}.pr-\[8px\]{padding-right:8px}.pr-\[10px\]{padding-right:10px}.pr-\[12px\]{padding-right:12px}.pr-\[14px\]{padding-right:14px}.pr-\[16px\]{padding-right:16px}.pb-8{padding-bottom:calc(var(--spacing) * 8)}.pb-\[6px\]{padding-bottom:6px}.pl-\[6px\]{padding-left:6px}.pl-\[8px\]{padding-left:8px}.pl-\[10px\]{padding-left:10px}.pl-\[12px\]{padding-left:12px}.pl-\[14px\]{padding-left:14px}.pl-\[16px\]{padding-left:16px}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-\[9px\]{font-size:9px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[14px\]{font-size:14px}.text-\[16px\]{font-size:16px}.leading-\[1\.5\]{--tw-leading:1.5;line-height:1.5}.leading-\[16px\]{--tw-leading:16px;line-height:16px}.leading-\[18px\]{--tw-leading:18px;line-height:18px}.leading-\[20px\]{--tw-leading:20px;line-height:20px}.leading-\[22px\]{--tw-leading:22px;line-height:22px}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.\!text-range-text{color:var(--range-text)!important}.\!text-white{color:var(--color-white)!important}.text-accent-orange{color:var(--accent-orange)}.text-disabled{color:var(--disabled)}.text-foreground{color:var(--foreground)}.text-muted-foreground{color:var(--muted-foreground)}.text-primary-action{color:var(--primary-action)}.text-subtle-text{color:var(--subtle-text)}.text-white{color:var(--color-white)}.not-italic{font-style:normal}.opacity-0{opacity:0}.opacity-50{opacity:.5}.shadow-\[0px_0px_2px_0px_rgba\(102\,102\,102\,0\.16\)\,0px_4px_8px_0px_rgba\(102\,102\,102\,0\.12\)\]{--tw-shadow:0px 0px 2px 0px var(--tw-shadow-color,#66666629), 0px 4px 8px 0px var(--tw-shadow-color,#6666661f);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.outline-black{outline-color:var(--color-black)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-100{--tw-duration:.1s;transition-duration:.1s}.duration-150{--tw-duration:.15s;transition-duration:.15s}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}}.group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:block:is(:where(.group\/drawer-content)[data-vaul-drawer-direction=bottom] *){display:block}.placeholder\:text-disabled::placeholder{color:var(--disabled)}.placeholder\:text-muted-foreground::placeholder{color:var(--muted-foreground)}.focus-within\:relative:focus-within{position:relative}.focus-within\:z-20:focus-within{z-index:20}@media (hover:hover){.hover\:\!bg-primary-action:hover{background-color:var(--primary-action)!important}.hover\:bg-disabled-bg:hover{background-color:var(--disabled-bg)}.hover\:bg-hover-bg:hover{background-color:var(--hover-bg)}.hover\:bg-primary-action-hover:hover{background-color:var(--primary-action-hover)}.hover\:bg-primary-action-light:hover{background-color:var(--primary-action-light)}.hover\:bg-selected-bg:hover{background-color:var(--selected-bg)}.hover\:text-primary-action:hover{color:var(--primary-action)}}.focus\:\!bg-primary-action:focus{background-color:var(--primary-action)!important}.active\:bg-disabled-bg:active{background-color:var(--disabled-bg)}.active\:bg-primary-action-active:active{background-color:var(--primary-action-active)}.disabled\:cursor-default:disabled{cursor:default}.aria-selected\:bg-transparent[aria-selected=true]{background-color:#0000}.aria-selected\:opacity-30[aria-selected=true]{opacity:.3}.aria-selected\:opacity-100[aria-selected=true]{opacity:1}.data-\[state\=closed\]\:animate-out[data-state=closed]{animation:exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.data-\[state\=closed\]\:fade-out-0[data-state=closed]{--tw-exit-opacity:0}.data-\[state\=open\]\:animate-in[data-state=open]{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.data-\[state\=open\]\:fade-in-0[data-state=open]{--tw-enter-opacity:0}.data-\[vaul-drawer-direction\=bottom\]\:inset-x-0[data-vaul-drawer-direction=bottom]{inset-inline:calc(var(--spacing) * 0)}.data-\[vaul-drawer-direction\=bottom\]\:bottom-0[data-vaul-drawer-direction=bottom]{bottom:calc(var(--spacing) * 0)}.data-\[vaul-drawer-direction\=bottom\]\:mt-24[data-vaul-drawer-direction=bottom]{margin-top:calc(var(--spacing) * 24)}.data-\[vaul-drawer-direction\=bottom\]\:max-h-\[80vh\][data-vaul-drawer-direction=bottom]{max-height:80vh}.data-\[vaul-drawer-direction\=bottom\]\:rounded-t-lg[data-vaul-drawer-direction=bottom]{border-top-left-radius:var(--radius);border-top-right-radius:var(--radius)}.data-\[vaul-drawer-direction\=bottom\]\:border-t[data-vaul-drawer-direction=bottom]{border-top-style:var(--tw-border-style);border-top-width:1px}.data-\[vaul-drawer-direction\=left\]\:inset-y-0[data-vaul-drawer-direction=left]{inset-block:calc(var(--spacing) * 0)}.data-\[vaul-drawer-direction\=left\]\:left-0[data-vaul-drawer-direction=left]{left:calc(var(--spacing) * 0)}.data-\[vaul-drawer-direction\=left\]\:w-3\/4[data-vaul-drawer-direction=left]{width:75%}.data-\[vaul-drawer-direction\=left\]\:border-r[data-vaul-drawer-direction=left]{border-right-style:var(--tw-border-style);border-right-width:1px}.data-\[vaul-drawer-direction\=right\]\:inset-y-0[data-vaul-drawer-direction=right]{inset-block:calc(var(--spacing) * 0)}.data-\[vaul-drawer-direction\=right\]\:right-0[data-vaul-drawer-direction=right]{right:calc(var(--spacing) * 0)}.data-\[vaul-drawer-direction\=right\]\:w-3\/4[data-vaul-drawer-direction=right]{width:75%}.data-\[vaul-drawer-direction\=right\]\:border-l[data-vaul-drawer-direction=right]{border-left-style:var(--tw-border-style);border-left-width:1px}.data-\[vaul-drawer-direction\=top\]\:inset-x-0[data-vaul-drawer-direction=top]{inset-inline:calc(var(--spacing) * 0)}.data-\[vaul-drawer-direction\=top\]\:top-0[data-vaul-drawer-direction=top]{top:calc(var(--spacing) * 0)}.data-\[vaul-drawer-direction\=top\]\:mb-24[data-vaul-drawer-direction=top]{margin-bottom:calc(var(--spacing) * 24)}.data-\[vaul-drawer-direction\=top\]\:max-h-\[80vh\][data-vaul-drawer-direction=top]{max-height:80vh}.data-\[vaul-drawer-direction\=top\]\:rounded-b-lg[data-vaul-drawer-direction=top]{border-bottom-right-radius:var(--radius);border-bottom-left-radius:var(--radius)}.data-\[vaul-drawer-direction\=top\]\:border-b[data-vaul-drawer-direction=top]{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}@media (min-width:40rem){.sm\:flex-row{flex-direction:row}.sm\:gap-6{gap:calc(var(--spacing) * 6)}.data-\[vaul-drawer-direction\=left\]\:sm\:max-w-sm[data-vaul-drawer-direction=left],.data-\[vaul-drawer-direction\=right\]\:sm\:max-w-sm[data-vaul-drawer-direction=right]{max-width:var(--container-sm)}}.\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar{display:none}.\[\&\:first-child\:has\(\.day-range-end\)\]\:rounded-l-\[6px\]:first-child:has(.day-range-end){border-top-left-radius:6px;border-bottom-left-radius:6px}.\[\&\:first-child\:has\(\.day-range-end\)\]\:rounded-l-\[8px\]:first-child:has(.day-range-end){border-top-left-radius:8px;border-bottom-left-radius:8px}.\[\&\:first-child\:has\(\.day-range-middle\)\]\:rounded-l-\[6px\]:first-child:has(.day-range-middle){border-top-left-radius:6px;border-bottom-left-radius:6px}.\[\&\:first-child\:has\(\.day-range-middle\)\]\:rounded-l-\[8px\]:first-child:has(.day-range-middle){border-top-left-radius:8px;border-bottom-left-radius:8px}.\[\&\:has\(\.day-range-end\)\]\:rounded-r-\[6px\]:has(.day-range-end){border-top-right-radius:6px;border-bottom-right-radius:6px}.\[\&\:has\(\.day-range-end\)\]\:rounded-r-\[8px\]:has(.day-range-end){border-top-right-radius:8px;border-bottom-right-radius:8px}.\[\&\:has\(\.day-range-end\)\]\:bg-range-bg:has(.day-range-end),.\[\&\:has\(\.day-range-middle\)\]\:bg-range-bg:has(.day-range-middle){background-color:var(--range-bg)}.\[\&\:has\(\.day-range-start\)\]\:rounded-l-\[6px\]:has(.day-range-start){border-top-left-radius:6px;border-bottom-left-radius:6px}.\[\&\:has\(\.day-range-start\)\]\:rounded-l-\[8px\]:has(.day-range-start){border-top-left-radius:8px;border-bottom-left-radius:8px}.\[\&\:has\(\.day-range-start\)\]\:bg-range-bg:has(.day-range-start){background-color:var(--range-bg)}.\[\&\:last-child\:has\(\.day-range-middle\)\]\:rounded-r-\[6px\]:last-child:has(.day-range-middle){border-top-right-radius:6px;border-bottom-right-radius:6px}.\[\&\:last-child\:has\(\.day-range-middle\)\]\:rounded-r-\[8px\]:last-child:has(.day-range-middle){border-top-right-radius:8px;border-bottom-right-radius:8px}.\[\&\:last-child\:has\(\.day-range-start\)\]\:rounded-r-\[6px\]:last-child:has(.day-range-start){border-top-right-radius:6px;border-bottom-right-radius:6px}.\[\&\:last-child\:has\(\.day-range-start\)\]\:rounded-r-\[8px\]:last-child:has(.day-range-start){border-top-right-radius:8px;border-bottom-right-radius:8px}.\[\&\:not\(\[aria-selected\=true\]\)\]\:\!bg-primary-action-light:not([aria-selected=true]){background-color:var(--primary-action-light)!important}.\[\&\:not\(\[aria-selected\=true\]\)\]\:text-foreground:not([aria-selected=true]){color:var(--foreground)}}@property --tw-animation-delay{syntax:"*";inherits:false;initial-value:0s}@property --tw-animation-direction{syntax:"*";inherits:false;initial-value:normal}@property --tw-animation-duration{syntax:"*";inherits:false}@property --tw-animation-fill-mode{syntax:"*";inherits:false;initial-value:none}@property --tw-animation-iteration-count{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-translate-y{syntax:"*";inherits:false;initial-value:0}:root{--font-size:16px;--font-sans:"Noto Sans Thai", sans-serif;--background:#fff;--foreground:#101828;--card:#fff;--card-foreground:#101828;--popover:#fff;--popover-foreground:#101828;--primary:#030213;--primary-foreground:#fff;--primary-action:#0a6ee7;--primary-action-hover:#095ec4;--primary-action-active:#074ea4;--primary-action-light:#0a6ee70f;--primary-action-muted:#0a6ee71a;--secondary:oklch(95% .0058 264.53);--secondary-foreground:#030213;--muted:#ececf0;--muted-foreground:#6a7282;--accent:#e9ebef;--accent-foreground:#030213;--accent-orange:#eb6101;--destructive:#e7000b;--destructive-foreground:#fff;--error-dark:#c10007;--success:#059669;--success-bg:#ecfdf5;--error-bg:#fff1f2;--border:#0000001a;--border-disabled:#0000000d;--input:transparent;--input-background:#f3f4f6;--disabled:#99a1af;--disabled-bg:#f3f4f6;--hover-bg:#f9fafb;--subtle-text:#4a5565;--caret-color:#0246a6;--selected-bg:#eff6ff;--selected-light-bg:#f3f8fe;--range-bg:#dae9fb;--range-text:#00a2d9;--switch-background:#cbced4;--font-weight-medium:500;--font-weight-normal:400;--ring:oklch(70.8% 0 0);--chart-1:oklch(64.6% .222 41.116);--chart-2:oklch(60% .118 184.704);--chart-3:oklch(39.8% .07 227.392);--chart-4:oklch(82.8% .189 84.429);--chart-5:oklch(76.9% .188 70.08);--radius:.625rem;--sidebar:oklch(98.5% 0 0);--sidebar-foreground:#101828;--sidebar-primary:#030213;--sidebar-primary-foreground:oklch(98.5% 0 0);--sidebar-accent:oklch(97% 0 0);--sidebar-accent-foreground:oklch(20.5% 0 0);--sidebar-border:oklch(92.2% 0 0);--sidebar-ring:oklch(70.8% 0 0)}.dark{--background:oklch(14.5% 0 0);--foreground:oklch(98.5% 0 0);--card:oklch(14.5% 0 0);--card-foreground:oklch(98.5% 0 0);--popover:oklch(14.5% 0 0);--popover-foreground:oklch(98.5% 0 0);--primary:oklch(98.5% 0 0);--primary-foreground:oklch(20.5% 0 0);--primary-action:#3b8ef5;--primary-action-hover:#5ba3f7;--primary-action-active:#2178e4;--primary-action-light:#3b8ef51a;--primary-action-muted:#3b8ef526;--secondary:oklch(26.9% 0 0);--secondary-foreground:oklch(98.5% 0 0);--muted:oklch(26.9% 0 0);--muted-foreground:oklch(70.8% 0 0);--accent:oklch(26.9% 0 0);--accent-foreground:oklch(98.5% 0 0);--destructive:oklch(39.6% .141 25.723);--destructive-foreground:oklch(63.7% .237 25.331);--border:oklch(26.9% 0 0);--border-disabled:oklch(20% 0 0);--input:oklch(26.9% 0 0);--input-background:oklch(22% 0 0);--disabled:oklch(50% 0 0);--disabled-bg:oklch(22% 0 0);--hover-bg:oklch(24% 0 0);--subtle-text:oklch(65% 0 0);--caret-color:#5ba3f7;--selected-bg:#3b8ef51f;--selected-light-bg:#3b8ef514;--ring:oklch(43.9% 0 0);--font-weight-medium:500;--font-weight-normal:400;--chart-1:oklch(48.8% .243 264.376);--chart-2:oklch(69.6% .17 162.48);--chart-3:oklch(76.9% .188 70.08);--chart-4:oklch(62.7% .265 303.9);--chart-5:oklch(64.5% .246 16.439);--sidebar:oklch(20.5% 0 0);--sidebar-foreground:oklch(98.5% 0 0);--sidebar-primary:oklch(48.8% .243 264.376);--sidebar-primary-foreground:oklch(98.5% 0 0);--sidebar-accent:oklch(26.9% 0 0);--sidebar-accent-foreground:oklch(98.5% 0 0);--sidebar-border:oklch(26.9% 0 0);--sidebar-ring:oklch(43.9% 0 0)}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-duration{syntax:"*";inherits:false}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));filter:blur(var(--tw-enter-blur,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0));filter:blur(var(--tw-exit-blur,0))}}
package/package.json ADDED
@@ -0,0 +1,120 @@
1
+ {
2
+ "name": "@sarunyu/system-one",
3
+ "version": "1.0.0",
4
+ "type": "module",
5
+ "description": "A flexible React design system built for AI-powered web generation tools (v0, Lovable, Figma Make). Tailwind CSS v4 + CSS variables for full theming support.",
6
+ "keywords": [
7
+ "react",
8
+ "design-system",
9
+ "ui",
10
+ "components",
11
+ "tailwindcss",
12
+ "v0",
13
+ "lovable",
14
+ "figma",
15
+ "ai-friendly"
16
+ ],
17
+ "license": "MIT",
18
+ "main": "./dist/index.cjs",
19
+ "module": "./dist/index.js",
20
+ "types": "./dist/src/index.d.ts",
21
+ "exports": {
22
+ ".": {
23
+ "types": "./dist/src/index.d.ts",
24
+ "import": "./dist/index.js",
25
+ "require": "./dist/index.cjs"
26
+ },
27
+ "./styles.css": "./dist/style.css"
28
+ },
29
+ "sideEffects": [
30
+ "*.css"
31
+ ],
32
+ "files": [
33
+ "dist"
34
+ ],
35
+ "scripts": {
36
+ "dev": "vite",
37
+ "build": "vite build",
38
+ "build:lib": "vite build --config vite.lib.config.ts && tailwindcss --input src/styles/globals.css --output dist/style.css --minify"
39
+ },
40
+ "dependencies": {
41
+ "@phosphor-icons/react": "^2.1.10",
42
+ "@radix-ui/react-popover": "1.1.6",
43
+ "clsx": "2.1.1",
44
+ "lucide-react": "0.487.0",
45
+ "react-day-picker": "8.10.1",
46
+ "tailwind-merge": "3.2.0",
47
+ "vaul": "1.1.2"
48
+ },
49
+ "devDependencies": {
50
+ "@emotion/react": "11.14.0",
51
+ "@emotion/styled": "11.14.1",
52
+ "@mui/icons-material": "7.3.5",
53
+ "@mui/material": "7.3.5",
54
+ "@popperjs/core": "2.11.8",
55
+ "@radix-ui/react-accordion": "1.2.3",
56
+ "@radix-ui/react-alert-dialog": "1.1.6",
57
+ "@radix-ui/react-aspect-ratio": "1.1.2",
58
+ "@radix-ui/react-avatar": "1.1.3",
59
+ "@radix-ui/react-checkbox": "1.1.4",
60
+ "@radix-ui/react-collapsible": "1.1.3",
61
+ "@radix-ui/react-context-menu": "2.2.6",
62
+ "@radix-ui/react-dialog": "1.1.6",
63
+ "@radix-ui/react-dropdown-menu": "2.1.6",
64
+ "@radix-ui/react-hover-card": "1.1.6",
65
+ "@radix-ui/react-label": "2.1.2",
66
+ "@radix-ui/react-menubar": "1.1.6",
67
+ "@radix-ui/react-navigation-menu": "1.2.5",
68
+ "@radix-ui/react-progress": "1.1.2",
69
+ "@radix-ui/react-radio-group": "1.2.3",
70
+ "@radix-ui/react-scroll-area": "1.2.3",
71
+ "@radix-ui/react-select": "2.1.6",
72
+ "@radix-ui/react-separator": "1.1.2",
73
+ "@radix-ui/react-slider": "1.2.3",
74
+ "@radix-ui/react-slot": "1.1.2",
75
+ "@radix-ui/react-switch": "1.1.3",
76
+ "@radix-ui/react-tabs": "1.1.3",
77
+ "@radix-ui/react-toggle": "1.1.2",
78
+ "@radix-ui/react-toggle-group": "1.1.2",
79
+ "@radix-ui/react-tooltip": "1.1.8",
80
+ "@tailwindcss/cli": "^4.2.2",
81
+ "@tailwindcss/vite": "4.1.12",
82
+ "@types/node": "^25.6.0",
83
+ "@vitejs/plugin-react": "4.7.0",
84
+ "canvas-confetti": "1.9.4",
85
+ "class-variance-authority": "0.7.1",
86
+ "cmdk": "1.1.1",
87
+ "date-fns": "3.6.0",
88
+ "embla-carousel-react": "8.6.0",
89
+ "input-otp": "1.4.2",
90
+ "motion": "12.23.24",
91
+ "next-themes": "0.4.6",
92
+ "react": "^18.3.1",
93
+ "react-dom": "^18.3.1",
94
+ "react-dnd": "16.0.1",
95
+ "react-dnd-html5-backend": "16.0.1",
96
+ "react-hook-form": "7.55.0",
97
+ "react-popper": "2.3.0",
98
+ "react-resizable-panels": "2.1.7",
99
+ "react-responsive-masonry": "2.7.1",
100
+ "react-router": "7.13.0",
101
+ "react-slick": "0.31.0",
102
+ "recharts": "2.15.2",
103
+ "sonner": "2.0.3",
104
+ "tailwindcss": "4.1.12",
105
+ "tw-animate-css": "1.3.8",
106
+ "typescript": "^6.0.2",
107
+ "vite": "^6.4.2",
108
+ "vite-plugin-dts": "^4.5.4"
109
+ },
110
+ "peerDependencies": {
111
+ "react": ">=18",
112
+ "react-dom": ">=18",
113
+ "tailwindcss": ">=4"
114
+ },
115
+ "peerDependenciesMeta": {
116
+ "tailwindcss": {
117
+ "optional": true
118
+ }
119
+ }
120
+ }