luan-ui 0.3.0 → 0.4.1
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.
- package/dist/components/alert/alert.d.ts +79 -0
- package/dist/components/alert/alert.js +117 -0
- package/dist/components/alert/alert.js.map +1 -0
- package/dist/components/alert-dialog/alert-dialog.d.ts +10 -0
- package/dist/components/alert-dialog/alert-dialog.js +18 -0
- package/dist/components/alert-dialog/alert-dialog.js.map +1 -0
- package/dist/components/button/button.d.ts +2 -2
- package/dist/components/button/button.js +3 -2
- package/dist/components/button/button.js.map +1 -1
- package/dist/index.d.ts +3 -0
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/utilities/get-variants/get-variants.js +3 -2
- package/dist/utilities/get-variants/get-variants.js.map +1 -1
- package/dist/utilities/responsive/responsive.d.ts +5 -3
- package/dist/utilities/responsive/responsive.js.map +1 -1
- package/package.json +17 -21
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import type { ResponsiveValue } from "../../utilities/responsive/responsive";
|
|
2
|
+
import { type ComponentPropsWithoutRef } from "react";
|
|
3
|
+
type AlertProps = ComponentPropsWithoutRef<"div"> & {
|
|
4
|
+
variant?: "primary" | "secondary" | "error";
|
|
5
|
+
asChild?: boolean;
|
|
6
|
+
size?: ResponsiveValue<"small" | "medium">;
|
|
7
|
+
};
|
|
8
|
+
export declare const SIZES: {
|
|
9
|
+
sm: {
|
|
10
|
+
small: string;
|
|
11
|
+
medium: string;
|
|
12
|
+
};
|
|
13
|
+
md: {
|
|
14
|
+
small: string;
|
|
15
|
+
medium: string;
|
|
16
|
+
};
|
|
17
|
+
lg: {
|
|
18
|
+
small: string;
|
|
19
|
+
medium: string;
|
|
20
|
+
};
|
|
21
|
+
xl: {
|
|
22
|
+
small: string;
|
|
23
|
+
medium: string;
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
declare const Alert: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
27
|
+
variant?: "primary" | "secondary" | "error";
|
|
28
|
+
asChild?: boolean;
|
|
29
|
+
size?: ResponsiveValue<"small" | "medium">;
|
|
30
|
+
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
31
|
+
type AlertTitleProps = ComponentPropsWithoutRef<"div"> & {
|
|
32
|
+
asChild?: boolean;
|
|
33
|
+
};
|
|
34
|
+
export declare const TITLE_SIZES: {
|
|
35
|
+
sm: {
|
|
36
|
+
small: string;
|
|
37
|
+
medium: string;
|
|
38
|
+
};
|
|
39
|
+
md: {
|
|
40
|
+
small: string;
|
|
41
|
+
medium: string;
|
|
42
|
+
};
|
|
43
|
+
lg: {
|
|
44
|
+
small: string;
|
|
45
|
+
medium: string;
|
|
46
|
+
};
|
|
47
|
+
xl: {
|
|
48
|
+
small: string;
|
|
49
|
+
medium: string;
|
|
50
|
+
};
|
|
51
|
+
};
|
|
52
|
+
declare const AlertTitle: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
53
|
+
asChild?: boolean;
|
|
54
|
+
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
55
|
+
type AlertDescriptionProps = ComponentPropsWithoutRef<"div"> & {
|
|
56
|
+
asChild?: boolean;
|
|
57
|
+
};
|
|
58
|
+
export declare const DESCRIPTION_SIZES: {
|
|
59
|
+
sm: {
|
|
60
|
+
small: string;
|
|
61
|
+
medium: string;
|
|
62
|
+
};
|
|
63
|
+
md: {
|
|
64
|
+
small: string;
|
|
65
|
+
medium: string;
|
|
66
|
+
};
|
|
67
|
+
lg: {
|
|
68
|
+
small: string;
|
|
69
|
+
medium: string;
|
|
70
|
+
};
|
|
71
|
+
xl: {
|
|
72
|
+
small: string;
|
|
73
|
+
medium: string;
|
|
74
|
+
};
|
|
75
|
+
};
|
|
76
|
+
declare const AlertDescription: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
77
|
+
asChild?: boolean;
|
|
78
|
+
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
79
|
+
export { Alert, AlertDescription, AlertTitle, type AlertDescriptionProps, type AlertProps, type AlertTitleProps, };
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Slot } from "../slot/slot";
|
|
3
|
+
import { getVariants } from "../../utilities/get-variants/get-variants";
|
|
4
|
+
import { createContext, forwardRef, useContext, } from "react";
|
|
5
|
+
const AlertContext = createContext(undefined);
|
|
6
|
+
const useAlertContext = () => {
|
|
7
|
+
const context = useContext(AlertContext);
|
|
8
|
+
if (!context) {
|
|
9
|
+
throw new Error("useAlertContext must be used within an Alert component");
|
|
10
|
+
}
|
|
11
|
+
return context;
|
|
12
|
+
};
|
|
13
|
+
const alertStyles = getVariants({
|
|
14
|
+
base: "grid w-fit grid-cols-[0_1fr] items-start gap-1 rounded-md border border-transparent has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] [&>svg]:translate-y-1",
|
|
15
|
+
variants: {
|
|
16
|
+
variant: {
|
|
17
|
+
primary: "bg-gray-700 text-white",
|
|
18
|
+
secondary: "border-gray-700 text-gray-700",
|
|
19
|
+
error: "bg-red-500 text-white",
|
|
20
|
+
},
|
|
21
|
+
size: {
|
|
22
|
+
small: "px-2 py-1 has-[>svg]:gap-x-2",
|
|
23
|
+
medium: "px-3 py-2 has-[>svg]:gap-x-3",
|
|
24
|
+
},
|
|
25
|
+
},
|
|
26
|
+
});
|
|
27
|
+
export const SIZES = {
|
|
28
|
+
sm: {
|
|
29
|
+
small: "sm:px-2 sm:py-1 sm:has-[>svg]:gap-x-2",
|
|
30
|
+
medium: "sm:px-3 sm:py-2 sm:has-[>svg]:gap-x-3",
|
|
31
|
+
},
|
|
32
|
+
md: {
|
|
33
|
+
small: "md:px-2 md:py-1 md:has-[>svg]:gap-x-2",
|
|
34
|
+
medium: "md:px-3 md:py-2 md:has-[>svg]:gap-x-3",
|
|
35
|
+
},
|
|
36
|
+
lg: {
|
|
37
|
+
small: "lg:px-2 lg:py-1 lg:has-[>svg]:gap-x-2",
|
|
38
|
+
medium: "lg:px-3 lg:py-2 lg:has-[>svg]:gap-x-3",
|
|
39
|
+
},
|
|
40
|
+
xl: {
|
|
41
|
+
small: "xl:px-2 xl:py-1 xl:has-[>svg]:gap-x-2",
|
|
42
|
+
medium: "xl:px-3 xl:py-2 xl:has-[>svg]:gap-x-3",
|
|
43
|
+
},
|
|
44
|
+
};
|
|
45
|
+
const Alert = forwardRef(({ variant = "primary", size = "medium", className, asChild, ...props }, ref) => {
|
|
46
|
+
const Component = asChild ? Slot : "div";
|
|
47
|
+
return (_jsx(AlertContext.Provider, { value: { variant, size }, children: _jsx(Component, { className: alertStyles({ variant, size, className }), ...props, ref: ref }) }));
|
|
48
|
+
});
|
|
49
|
+
Alert.displayName = "Alert";
|
|
50
|
+
const alertTitleStyles = getVariants({
|
|
51
|
+
base: "col-start-2 font-bold",
|
|
52
|
+
variants: {
|
|
53
|
+
size: {
|
|
54
|
+
small: "text-sm",
|
|
55
|
+
medium: "text-base",
|
|
56
|
+
},
|
|
57
|
+
},
|
|
58
|
+
});
|
|
59
|
+
export const TITLE_SIZES = {
|
|
60
|
+
sm: {
|
|
61
|
+
small: "sm:text-sm",
|
|
62
|
+
medium: "sm:text-base",
|
|
63
|
+
},
|
|
64
|
+
md: {
|
|
65
|
+
small: "md:text-sm",
|
|
66
|
+
medium: "md:text-base",
|
|
67
|
+
},
|
|
68
|
+
lg: {
|
|
69
|
+
small: "lg:text-sm",
|
|
70
|
+
medium: "lg:text-base",
|
|
71
|
+
},
|
|
72
|
+
xl: {
|
|
73
|
+
small: "xl:text-sm",
|
|
74
|
+
medium: "xl:text-base",
|
|
75
|
+
},
|
|
76
|
+
};
|
|
77
|
+
const AlertTitle = forwardRef(({ className, asChild, ...props }, ref) => {
|
|
78
|
+
const { size } = useAlertContext();
|
|
79
|
+
const Component = asChild ? Slot : "div";
|
|
80
|
+
return (_jsx(Component, { ref: ref, ...props, className: alertTitleStyles({ size, className }) }));
|
|
81
|
+
});
|
|
82
|
+
AlertTitle.displayName = "AlertTitle";
|
|
83
|
+
const alertDescriptionStyles = getVariants({
|
|
84
|
+
base: "col-start-2",
|
|
85
|
+
variants: {
|
|
86
|
+
size: {
|
|
87
|
+
small: "text-xs",
|
|
88
|
+
medium: "text-sm",
|
|
89
|
+
},
|
|
90
|
+
},
|
|
91
|
+
});
|
|
92
|
+
export const DESCRIPTION_SIZES = {
|
|
93
|
+
sm: {
|
|
94
|
+
small: "sm:text-xs",
|
|
95
|
+
medium: "sm:text-sm",
|
|
96
|
+
},
|
|
97
|
+
md: {
|
|
98
|
+
small: "md:text-xs",
|
|
99
|
+
medium: "md:text-sm",
|
|
100
|
+
},
|
|
101
|
+
lg: {
|
|
102
|
+
small: "lg:text-xs",
|
|
103
|
+
medium: "lg:text-sm",
|
|
104
|
+
},
|
|
105
|
+
xl: {
|
|
106
|
+
small: "xl:text-xs",
|
|
107
|
+
medium: "xl:text-sm",
|
|
108
|
+
},
|
|
109
|
+
};
|
|
110
|
+
const AlertDescription = forwardRef(({ className, asChild, ...props }, ref) => {
|
|
111
|
+
const { size } = useAlertContext();
|
|
112
|
+
const Component = asChild ? Slot : "div";
|
|
113
|
+
return (_jsx(Component, { ref: ref, ...props, className: alertDescriptionStyles({ size, className }) }));
|
|
114
|
+
});
|
|
115
|
+
AlertDescription.displayName = "AlertDescription";
|
|
116
|
+
export { Alert, AlertDescription, AlertTitle, };
|
|
117
|
+
//# sourceMappingURL=alert.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"alert.js","sourceRoot":"/","sources":["components/alert/alert.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AAEnE,OAAO,EAEN,aAAa,EACb,UAAU,EACV,UAAU,GACV,MAAM,OAAO,CAAC;AAOf,MAAM,YAAY,GAAG,aAAa,CAA+B,SAAS,CAAC,CAAC;AAE5E,MAAM,eAAe,GAAG,GAAG,EAAE;IAC5B,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACzC,IAAI,CAAC,OAAO,EAAE,CAAC;QACd,MAAM,IAAI,KAAK,CAAC,wDAAwD,CAAC,CAAC;IAC3E,CAAC;IACD,OAAO,OAAO,CAAC;AAChB,CAAC,CAAC;AAQF,MAAM,WAAW,GAAG,WAAW,CAAC;IAC/B,IAAI,EAAE,6JAA6J;IACnK,QAAQ,EAAE;QACT,OAAO,EAAE;YACR,OAAO,EAAE,wBAAwB;YACjC,SAAS,EAAE,+BAA+B;YAC1C,KAAK,EAAE,uBAAuB;SAC9B;QACD,IAAI,EAAE;YACL,KAAK,EAAE,8BAA8B;YACrC,MAAM,EAAE,8BAA8B;SACtC;KACD;CACD,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,KAAK,GAAG;IACpB,EAAE,EAAE;QACH,KAAK,EAAE,uCAAuC;QAC9C,MAAM,EAAE,uCAAuC;KAC/C;IACD,EAAE,EAAE;QACH,KAAK,EAAE,uCAAuC;QAC9C,MAAM,EAAE,uCAAuC;KAC/C;IACD,EAAE,EAAE;QACH,KAAK,EAAE,uCAAuC;QAC9C,MAAM,EAAE,uCAAuC;KAC/C;IACD,EAAE,EAAE;QACH,KAAK,EAAE,uCAAuC;QAC9C,MAAM,EAAE,uCAAuC;KAC/C;CACD,CAAC;AAEF,MAAM,KAAK,GAAG,UAAU,CACvB,CACC,EAAE,OAAO,GAAG,SAAS,EAAE,IAAI,GAAG,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EACtE,GAAG,EACF,EAAE;IACH,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAEzC,OAAO,CACN,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,YAC9C,KAAC,SAAS,IACT,SAAS,EAAE,WAAW,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,KAChD,KAAK,EACT,GAAG,EAAE,GAAG,GACP,GACqB,CACxB,CAAC;AACH,CAAC,CACD,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAM5B,MAAM,gBAAgB,GAAG,WAAW,CAAC;IACpC,IAAI,EAAE,uBAAuB;IAC7B,QAAQ,EAAE;QACT,IAAI,EAAE;YACL,KAAK,EAAE,SAAS;YAChB,MAAM,EAAE,WAAW;SACnB;KACD;CACD,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,WAAW,GAAG;IAC1B,EAAE,EAAE;QACH,KAAK,EAAE,YAAY;QACnB,MAAM,EAAE,cAAc;KACtB;IACD,EAAE,EAAE;QACH,KAAK,EAAE,YAAY;QACnB,MAAM,EAAE,cAAc;KACtB;IACD,EAAE,EAAE;QACH,KAAK,EAAE,YAAY;QACnB,MAAM,EAAE,cAAc;KACtB;IACD,EAAE,EAAE;QACH,KAAK,EAAE,YAAY;QACnB,MAAM,EAAE,cAAc;KACtB;CACD,CAAC;AAEF,MAAM,UAAU,GAAG,UAAU,CAC5B,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzC,MAAM,EAAE,IAAI,EAAE,GAAG,eAAe,EAAE,CAAC;IACnC,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IACzC,OAAO,CACN,KAAC,SAAS,IACT,GAAG,EAAE,GAAG,KACJ,KAAK,EACT,SAAS,EAAE,gBAAgB,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,GAC/C,CACF,CAAC;AACH,CAAC,CACD,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAMtC,MAAM,sBAAsB,GAAG,WAAW,CAAC;IAC1C,IAAI,EAAE,aAAa;IACnB,QAAQ,EAAE;QACT,IAAI,EAAE;YACL,KAAK,EAAE,SAAS;YAChB,MAAM,EAAE,SAAS;SACjB;KACD;CACD,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAChC,EAAE,EAAE;QACH,KAAK,EAAE,YAAY;QACnB,MAAM,EAAE,YAAY;KACpB;IACD,EAAE,EAAE;QACH,KAAK,EAAE,YAAY;QACnB,MAAM,EAAE,YAAY;KACpB;IACD,EAAE,EAAE;QACH,KAAK,EAAE,YAAY;QACnB,MAAM,EAAE,YAAY;KACpB;IACD,EAAE,EAAE;QACH,KAAK,EAAE,YAAY;QACnB,MAAM,EAAE,YAAY;KACpB;CACD,CAAC;AAEF,MAAM,gBAAgB,GAAG,UAAU,CAClC,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzC,MAAM,EAAE,IAAI,EAAE,GAAG,eAAe,EAAE,CAAC;IACnC,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IACzC,OAAO,CACN,KAAC,SAAS,IACT,GAAG,EAAE,GAAG,KACJ,KAAK,EACT,SAAS,EAAE,sBAAsB,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,GACrD,CACF,CAAC;AACH,CAAC,CACD,CAAC;AAEF,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;AAElD,OAAO,EACN,KAAK,EACL,gBAAgB,EAChB,UAAU,GAIV,CAAC","sourcesContent":["import { Slot } from \"@components/slot/slot\";\nimport { getVariants } from \"@utilities/get-variants/get-variants\";\nimport type { ResponsiveValue } from \"@utilities/responsive/responsive\";\nimport {\n\ttype ComponentPropsWithoutRef,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n} from \"react\";\n\ntype AlertContextType = {\n\tvariant: \"primary\" | \"secondary\" | \"error\";\n\tsize: ResponsiveValue<\"small\" | \"medium\">;\n};\n\nconst AlertContext = createContext<AlertContextType | undefined>(undefined);\n\nconst useAlertContext = () => {\n\tconst context = useContext(AlertContext);\n\tif (!context) {\n\t\tthrow new Error(\"useAlertContext must be used within an Alert component\");\n\t}\n\treturn context;\n};\n\ntype AlertProps = ComponentPropsWithoutRef<\"div\"> & {\n\tvariant?: \"primary\" | \"secondary\" | \"error\";\n\tasChild?: boolean;\n\tsize?: ResponsiveValue<\"small\" | \"medium\">;\n};\n\nconst alertStyles = getVariants({\n\tbase: \"grid w-fit grid-cols-[0_1fr] items-start gap-1 rounded-md border border-transparent has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] [&>svg]:translate-y-1\",\n\tvariants: {\n\t\tvariant: {\n\t\t\tprimary: \"bg-gray-700 text-white\",\n\t\t\tsecondary: \"border-gray-700 text-gray-700\",\n\t\t\terror: \"bg-red-500 text-white\",\n\t\t},\n\t\tsize: {\n\t\t\tsmall: \"px-2 py-1 has-[>svg]:gap-x-2\",\n\t\t\tmedium: \"px-3 py-2 has-[>svg]:gap-x-3\",\n\t\t},\n\t},\n});\n\nexport const SIZES = {\n\tsm: {\n\t\tsmall: \"sm:px-2 sm:py-1 sm:has-[>svg]:gap-x-2\",\n\t\tmedium: \"sm:px-3 sm:py-2 sm:has-[>svg]:gap-x-3\",\n\t},\n\tmd: {\n\t\tsmall: \"md:px-2 md:py-1 md:has-[>svg]:gap-x-2\",\n\t\tmedium: \"md:px-3 md:py-2 md:has-[>svg]:gap-x-3\",\n\t},\n\tlg: {\n\t\tsmall: \"lg:px-2 lg:py-1 lg:has-[>svg]:gap-x-2\",\n\t\tmedium: \"lg:px-3 lg:py-2 lg:has-[>svg]:gap-x-3\",\n\t},\n\txl: {\n\t\tsmall: \"xl:px-2 xl:py-1 xl:has-[>svg]:gap-x-2\",\n\t\tmedium: \"xl:px-3 xl:py-2 xl:has-[>svg]:gap-x-3\",\n\t},\n};\n\nconst Alert = forwardRef<HTMLDivElement, AlertProps>(\n\t(\n\t\t{ variant = \"primary\", size = \"medium\", className, asChild, ...props },\n\t\tref,\n\t) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<AlertContext.Provider value={{ variant, size }}>\n\t\t\t\t<Component\n\t\t\t\t\tclassName={alertStyles({ variant, size, className })}\n\t\t\t\t\t{...props}\n\t\t\t\t\tref={ref}\n\t\t\t\t/>\n\t\t\t</AlertContext.Provider>\n\t\t);\n\t},\n);\n\nAlert.displayName = \"Alert\";\n\ntype AlertTitleProps = ComponentPropsWithoutRef<\"div\"> & {\n\tasChild?: boolean;\n};\n\nconst alertTitleStyles = getVariants({\n\tbase: \"col-start-2 font-bold\",\n\tvariants: {\n\t\tsize: {\n\t\t\tsmall: \"text-sm\",\n\t\t\tmedium: \"text-base\",\n\t\t},\n\t},\n});\n\nexport const TITLE_SIZES = {\n\tsm: {\n\t\tsmall: \"sm:text-sm\",\n\t\tmedium: \"sm:text-base\",\n\t},\n\tmd: {\n\t\tsmall: \"md:text-sm\",\n\t\tmedium: \"md:text-base\",\n\t},\n\tlg: {\n\t\tsmall: \"lg:text-sm\",\n\t\tmedium: \"lg:text-base\",\n\t},\n\txl: {\n\t\tsmall: \"xl:text-sm\",\n\t\tmedium: \"xl:text-base\",\n\t},\n};\n\nconst AlertTitle = forwardRef<HTMLDivElement, AlertTitleProps>(\n\t({ className, asChild, ...props }, ref) => {\n\t\tconst { size } = useAlertContext();\n\t\tconst Component = asChild ? Slot : \"div\";\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t\tclassName={alertTitleStyles({ size, className })}\n\t\t\t/>\n\t\t);\n\t},\n);\n\nAlertTitle.displayName = \"AlertTitle\";\n\ntype AlertDescriptionProps = ComponentPropsWithoutRef<\"div\"> & {\n\tasChild?: boolean;\n};\n\nconst alertDescriptionStyles = getVariants({\n\tbase: \"col-start-2\",\n\tvariants: {\n\t\tsize: {\n\t\t\tsmall: \"text-xs\",\n\t\t\tmedium: \"text-sm\",\n\t\t},\n\t},\n});\n\nexport const DESCRIPTION_SIZES = {\n\tsm: {\n\t\tsmall: \"sm:text-xs\",\n\t\tmedium: \"sm:text-sm\",\n\t},\n\tmd: {\n\t\tsmall: \"md:text-xs\",\n\t\tmedium: \"md:text-sm\",\n\t},\n\tlg: {\n\t\tsmall: \"lg:text-xs\",\n\t\tmedium: \"lg:text-sm\",\n\t},\n\txl: {\n\t\tsmall: \"xl:text-xs\",\n\t\tmedium: \"xl:text-sm\",\n\t},\n};\n\nconst AlertDescription = forwardRef<HTMLDivElement, AlertDescriptionProps>(\n\t({ className, asChild, ...props }, ref) => {\n\t\tconst { size } = useAlertContext();\n\t\tconst Component = asChild ? Slot : \"div\";\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t\tclassName={alertDescriptionStyles({ size, className })}\n\t\t\t/>\n\t\t);\n\t},\n);\n\nAlertDescription.displayName = \"AlertDescription\";\n\nexport {\n\tAlert,\n\tAlertDescription,\n\tAlertTitle,\n\ttype AlertDescriptionProps,\n\ttype AlertProps,\n\ttype AlertTitleProps,\n};\n"]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { AlertDialog as RadixAlertDialog } from "radix-ui";
|
|
2
|
+
declare const AlertDialog: import("react").FC<RadixAlertDialog.AlertDialogProps>;
|
|
3
|
+
declare const AlertDialogTrigger: import("react").ForwardRefExoticComponent<RadixAlertDialog.AlertDialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
4
|
+
declare const AlertDialogOverlay: import("react").ForwardRefExoticComponent<Omit<RadixAlertDialog.AlertDialogOverlayProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
5
|
+
declare const AlertDialogContent: import("react").ForwardRefExoticComponent<Omit<RadixAlertDialog.AlertDialogContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
6
|
+
declare const AlertDialogTitle: import("react").ForwardRefExoticComponent<Omit<RadixAlertDialog.AlertDialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
|
|
7
|
+
declare const AlertDialogDescription: import("react").ForwardRefExoticComponent<Omit<RadixAlertDialog.AlertDialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
|
|
8
|
+
declare const AlertDialogAction: import("react").ForwardRefExoticComponent<RadixAlertDialog.AlertDialogActionProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
9
|
+
declare const AlertDialogCancel: import("react").ForwardRefExoticComponent<RadixAlertDialog.AlertDialogCancelProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
10
|
+
export { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogOverlay, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from "../../utilities/cn/cn";
|
|
3
|
+
import { AlertDialog as RadixAlertDialog } from "radix-ui";
|
|
4
|
+
import { forwardRef, } from "react";
|
|
5
|
+
const AlertDialog = RadixAlertDialog.Root;
|
|
6
|
+
const AlertDialogTrigger = RadixAlertDialog.Trigger;
|
|
7
|
+
const AlertDialogOverlay = forwardRef(({ className, ...props }, ref) => (_jsx(RadixAlertDialog.Overlay, { ref: ref, className: cn("fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-fade-out data-[state=closed]:animate-out data-[state=open]:animate-fade-in data-[state=open]:animate-in", className), ...props })));
|
|
8
|
+
AlertDialogOverlay.displayName = RadixAlertDialog.Overlay.displayName;
|
|
9
|
+
const AlertDialogContent = forwardRef(({ className, ...props }, ref) => (_jsxs(_Fragment, { children: [_jsx(AlertDialogOverlay, {}), _jsx(RadixAlertDialog.Content, { ref: ref, className: cn("-translate-x-1/2 -translate-y-1/2 fixed top-1/2 left-1/2 z-50 flex w-fit max-w-xl flex-col gap-4 rounded-lg bg-white p-4", className), ...props })] })));
|
|
10
|
+
AlertDialogContent.displayName = RadixAlertDialog.Content.displayName;
|
|
11
|
+
const AlertDialogTitle = forwardRef(({ className, ...props }, ref) => (_jsx(RadixAlertDialog.Title, { ref: ref, className: cn("font-medium text-lg", className), ...props })));
|
|
12
|
+
AlertDialogTitle.displayName = RadixAlertDialog.Title.displayName;
|
|
13
|
+
const AlertDialogDescription = forwardRef(({ className, ...props }, ref) => (_jsx(RadixAlertDialog.Description, { ref: ref, className: cn("text-gray-500 text-sm", className), ...props })));
|
|
14
|
+
AlertDialogDescription.displayName = RadixAlertDialog.Description.displayName;
|
|
15
|
+
const AlertDialogAction = RadixAlertDialog.Action;
|
|
16
|
+
const AlertDialogCancel = RadixAlertDialog.Cancel;
|
|
17
|
+
export { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogOverlay, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };
|
|
18
|
+
//# sourceMappingURL=alert-dialog.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"alert-dialog.js","sourceRoot":"/","sources":["components/alert-dialog/alert-dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,WAAW,IAAI,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAC3D,OAAO,EAGN,UAAU,GACV,MAAM,OAAO,CAAC;AAEf,MAAM,WAAW,GAAG,gBAAgB,CAAC,IAAI,CAAC;AAE1C,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,OAAO,CAAC;AAEpD,MAAM,kBAAkB,GAAG,UAAU,CAGnC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnC,KAAC,gBAAgB,CAAC,OAAO,IACxB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACZ,oKAAoK,EACpK,SAAS,CACT,KACG,KAAK,GACR,CACF,CAAC,CAAC;AACH,kBAAkB,CAAC,WAAW,GAAG,gBAAgB,CAAC,OAAO,CAAC,WAAW,CAAC;AAEtE,MAAM,kBAAkB,GAAG,UAAU,CAGnC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnC,8BACC,KAAC,kBAAkB,KAAG,EACtB,KAAC,gBAAgB,CAAC,OAAO,IACxB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACZ,0HAA0H,EAC1H,SAAS,CACT,KACG,KAAK,GACR,IACA,CACH,CAAC,CAAC;AACH,kBAAkB,CAAC,WAAW,GAAG,gBAAgB,CAAC,OAAO,CAAC,WAAW,CAAC;AAEtE,MAAM,gBAAgB,GAAG,UAAU,CAGjC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnC,KAAC,gBAAgB,CAAC,KAAK,IACtB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,KAC3C,KAAK,GACR,CACF,CAAC,CAAC;AACH,gBAAgB,CAAC,WAAW,GAAG,gBAAgB,CAAC,KAAK,CAAC,WAAW,CAAC;AAElE,MAAM,sBAAsB,GAAG,UAAU,CAGvC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnC,KAAC,gBAAgB,CAAC,WAAW,IAC5B,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,CAAC,KAC7C,KAAK,GACR,CACF,CAAC,CAAC;AACH,sBAAsB,CAAC,WAAW,GAAG,gBAAgB,CAAC,WAAW,CAAC,WAAW,CAAC;AAE9E,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,MAAM,CAAC;AAElD,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,MAAM,CAAC;AAElD,OAAO,EACN,WAAW,EACX,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,GACjB,CAAC","sourcesContent":["import { cn } from \"@utilities/cn/cn\";\nimport { AlertDialog as RadixAlertDialog } from \"radix-ui\";\nimport {\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\tforwardRef,\n} from \"react\";\n\nconst AlertDialog = RadixAlertDialog.Root;\n\nconst AlertDialogTrigger = RadixAlertDialog.Trigger;\n\nconst AlertDialogOverlay = forwardRef<\n\tComponentRef<typeof RadixAlertDialog.Overlay>,\n\tComponentPropsWithoutRef<typeof RadixAlertDialog.Overlay>\n>(({ className, ...props }, ref) => (\n\t<RadixAlertDialog.Overlay\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-fade-out data-[state=closed]:animate-out data-[state=open]:animate-fade-in data-[state=open]:animate-in\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nAlertDialogOverlay.displayName = RadixAlertDialog.Overlay.displayName;\n\nconst AlertDialogContent = forwardRef<\n\tComponentRef<typeof RadixAlertDialog.Content>,\n\tComponentPropsWithoutRef<typeof RadixAlertDialog.Content>\n>(({ className, ...props }, ref) => (\n\t<>\n\t\t<AlertDialogOverlay />\n\t\t<RadixAlertDialog.Content\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"-translate-x-1/2 -translate-y-1/2 fixed top-1/2 left-1/2 z-50 flex w-fit max-w-xl flex-col gap-4 rounded-lg bg-white p-4\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t</>\n));\nAlertDialogContent.displayName = RadixAlertDialog.Content.displayName;\n\nconst AlertDialogTitle = forwardRef<\n\tComponentRef<typeof RadixAlertDialog.Title>,\n\tComponentPropsWithoutRef<typeof RadixAlertDialog.Title>\n>(({ className, ...props }, ref) => (\n\t<RadixAlertDialog.Title\n\t\tref={ref}\n\t\tclassName={cn(\"font-medium text-lg\", className)}\n\t\t{...props}\n\t/>\n));\nAlertDialogTitle.displayName = RadixAlertDialog.Title.displayName;\n\nconst AlertDialogDescription = forwardRef<\n\tComponentRef<typeof RadixAlertDialog.Description>,\n\tComponentPropsWithoutRef<typeof RadixAlertDialog.Description>\n>(({ className, ...props }, ref) => (\n\t<RadixAlertDialog.Description\n\t\tref={ref}\n\t\tclassName={cn(\"text-gray-500 text-sm\", className)}\n\t\t{...props}\n\t/>\n));\nAlertDialogDescription.displayName = RadixAlertDialog.Description.displayName;\n\nconst AlertDialogAction = RadixAlertDialog.Action;\n\nconst AlertDialogCancel = RadixAlertDialog.Cancel;\n\nexport {\n\tAlertDialog,\n\tAlertDialogTrigger,\n\tAlertDialogContent,\n\tAlertDialogOverlay,\n\tAlertDialogTitle,\n\tAlertDialogDescription,\n\tAlertDialogAction,\n\tAlertDialogCancel,\n};\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { ResponsiveValue } from "../../utilities/responsive/responsive";
|
|
2
2
|
export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
3
|
-
variant?: "primary" | "secondary";
|
|
3
|
+
variant?: "primary" | "secondary" | "destructive";
|
|
4
4
|
size?: ResponsiveValue<"small" | "medium" | "large">;
|
|
5
5
|
asChild?: boolean;
|
|
6
6
|
iconStart?: React.ReactNode;
|
|
@@ -52,7 +52,7 @@ export declare const SIZES: {
|
|
|
52
52
|
* <Button disabled>Disabled Button</Button>
|
|
53
53
|
*/
|
|
54
54
|
export declare const Button: import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
55
|
-
variant?: "primary" | "secondary";
|
|
55
|
+
variant?: "primary" | "secondary" | "destructive";
|
|
56
56
|
size?: ResponsiveValue<"small" | "medium" | "large">;
|
|
57
57
|
asChild?: boolean;
|
|
58
58
|
iconStart?: React.ReactNode;
|
|
@@ -24,8 +24,9 @@ const buttonStyles = getVariants({
|
|
|
24
24
|
base: "flex w-fit cursor-pointer items-center justify-center gap-2 rounded border font-semibold",
|
|
25
25
|
variants: {
|
|
26
26
|
variant: {
|
|
27
|
-
primary: "border-transparent bg-gray-700 text-white hover:bg-gray-800",
|
|
28
|
-
secondary: "border-gray-700 bg-white text-gray-700 hover:bg-gray-50",
|
|
27
|
+
primary: "border-transparent bg-gray-700 text-white hover:bg-gray-800 active:bg-gray-900",
|
|
28
|
+
secondary: "border-gray-700 bg-white text-gray-700 hover:bg-gray-50 active:bg-gray-100",
|
|
29
|
+
destructive: "border-transparent bg-red-500 text-white hover:bg-red-600 active:bg-red-700",
|
|
29
30
|
},
|
|
30
31
|
size: {
|
|
31
32
|
small: "gap-2 px-2 py-1 text-sm",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sourceRoot":"/","sources":["components/button/button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AAEnE,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAUnC,MAAM,CAAC,MAAM,KAAK,GAAG;IACpB,EAAE,EAAE;QACH,KAAK,EAAE,qCAAqC;QAC5C,MAAM,EAAE,uCAAuC;QAC/C,KAAK,EAAE,qCAAqC;KAC5C;IACD,EAAE,EAAE;QACH,KAAK,EAAE,qCAAqC;QAC5C,MAAM,EAAE,uCAAuC;QAC/C,KAAK,EAAE,qCAAqC;KAC5C;IACD,EAAE,EAAE;QACH,KAAK,EAAE,qCAAqC;QAC5C,MAAM,EAAE,uCAAuC;QAC/C,KAAK,EAAE,qCAAqC;KAC5C;CACD,CAAC;AAEF,MAAM,YAAY,GAAG,WAAW,CAAC;IAChC,IAAI,EAAE,0FAA0F;IAChG,QAAQ,EAAE;QACT,OAAO,EAAE;YACR,OAAO,
|
|
1
|
+
{"version":3,"file":"button.js","sourceRoot":"/","sources":["components/button/button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AAEnE,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAUnC,MAAM,CAAC,MAAM,KAAK,GAAG;IACpB,EAAE,EAAE;QACH,KAAK,EAAE,qCAAqC;QAC5C,MAAM,EAAE,uCAAuC;QAC/C,KAAK,EAAE,qCAAqC;KAC5C;IACD,EAAE,EAAE;QACH,KAAK,EAAE,qCAAqC;QAC5C,MAAM,EAAE,uCAAuC;QAC/C,KAAK,EAAE,qCAAqC;KAC5C;IACD,EAAE,EAAE;QACH,KAAK,EAAE,qCAAqC;QAC5C,MAAM,EAAE,uCAAuC;QAC/C,KAAK,EAAE,qCAAqC;KAC5C;CACD,CAAC;AAEF,MAAM,YAAY,GAAG,WAAW,CAAC;IAChC,IAAI,EAAE,0FAA0F;IAChG,QAAQ,EAAE;QACT,OAAO,EAAE;YACR,OAAO,EACN,gFAAgF;YACjF,SAAS,EACR,4EAA4E;YAC7E,WAAW,EACV,6EAA6E;SAC9E;QACD,IAAI,EAAE;YACL,KAAK,EAAE,yBAAyB;YAChC,MAAM,EAAE,2BAA2B;YACnC,KAAK,EAAE,yBAAyB;SAChC;QACD,QAAQ,EAAE;YACT,IAAI,EAAE,+BAA+B;SACrC;KACD;IACD,gBAAgB,EAAE;QACjB;YACC,OAAO,EAAE,WAAW;YACpB,IAAI,EAAE,QAAQ;YACd,SAAS,EAAE,uBAAuB;SAClC;KACD;CACD,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC/B,CACC,EACC,OAAO,EACP,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,QAAQ,EACR,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACR,EACD,GAAG,EACF,EAAE;IACH,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IAC5C,OAAO,CACN,KAAC,SAAS,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,YAAY,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,KAC3D,KAAK,YAET,KAAC,SAAS,IAAC,KAAK,EAAE,QAAQ,YACxB,CAAC,KAAK,EAAE,EAAE,CAAC,CACX,8BACE,SAAS,IAAI,CACb,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,kBACvB,SAAS,GACJ,CACP,EACA,KAAK,EACL,OAAO,IAAI,CACX,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,kBACvB,OAAO,GACF,CACP,IACC,CACH,GACU,GACD,CACZ,CAAC;AACH,CAAC,CACD,CAAC;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC","sourcesContent":["import { Icon } from \"@components/icon/icon\";\nimport { Slot, Slottable } from \"@components/slot/slot\";\nimport { getVariants } from \"@utilities/get-variants/get-variants\";\nimport type { ResponsiveValue } from \"@utilities/responsive/responsive\";\nimport { forwardRef } from \"react\";\n\nexport type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n\tvariant?: \"primary\" | \"secondary\" | \"destructive\";\n\tsize?: ResponsiveValue<\"small\" | \"medium\" | \"large\">;\n\tasChild?: boolean;\n\ticonStart?: React.ReactNode;\n\ticonEnd?: React.ReactNode;\n};\n\nexport const SIZES = {\n\tsm: {\n\t\tsmall: \"sm:text-sm sm:px-2 sm:py-1 sm:gap-2\",\n\t\tmedium: \"sm:text-base sm:px-4 sm:py-2 sm:gap-4\",\n\t\tlarge: \"sm:text-lg sm:px-6 sm:py-3 sm:gap-6\",\n\t},\n\tmd: {\n\t\tsmall: \"md:text-sm md:px-2 md:py-1 md:gap-2\",\n\t\tmedium: \"md:text-base md:px-4 md:py-2 md:gap-4\",\n\t\tlarge: \"md:text-lg md:px-6 md:py-3 md:gap-6\",\n\t},\n\tlg: {\n\t\tsmall: \"lg:text-sm lg:px-2 lg:py-1 lg:gap-2\",\n\t\tmedium: \"lg:text-base lg:px-4 lg:py-2 lg:gap-4\",\n\t\tlarge: \"lg:text-lg lg:px-6 lg:py-3 lg:gap-6\",\n\t},\n};\n\nconst buttonStyles = getVariants({\n\tbase: \"flex w-fit cursor-pointer items-center justify-center gap-2 rounded border font-semibold\",\n\tvariants: {\n\t\tvariant: {\n\t\t\tprimary:\n\t\t\t\t\"border-transparent bg-gray-700 text-white hover:bg-gray-800 active:bg-gray-900\",\n\t\t\tsecondary:\n\t\t\t\t\"border-gray-700 bg-white text-gray-700 hover:bg-gray-50 active:bg-gray-100\",\n\t\t\tdestructive:\n\t\t\t\t\"border-transparent bg-red-500 text-white hover:bg-red-600 active:bg-red-700\",\n\t\t},\n\t\tsize: {\n\t\t\tsmall: \"gap-2 px-2 py-1 text-sm\",\n\t\t\tmedium: \"gap-3 px-4 py-2 text-base\",\n\t\t\tlarge: \"gap-4 px-6 py-3 text-lg\",\n\t\t},\n\t\tdisabled: {\n\t\t\ttrue: \"cursor-not-allowed opacity-50\",\n\t\t},\n\t},\n\tcompoundVariants: [\n\t\t{\n\t\t\tvariant: \"secondary\",\n\t\t\tsize: \"medium\",\n\t\t\tclassName: \"test-compound-variant\",\n\t\t},\n\t],\n});\n\n/**\n * A flexible button component that supports variants, sizes, and icons\n * @param {Object} props - The props for the Button component\n * @param {'primary' | 'secondary'} [props.variant='primary'] - The visual style variant of the button\n * @param {'small' | 'medium' | 'large'} [props.size='medium'] - The size of the button\n * @param {boolean} [props.asChild] - Whether to render the button as a child component using Radix Slot\n * @param {React.ReactNode} [props.iconStart] - Icon element to display before the button content\n * @param {React.ReactNode} [props.iconEnd] - Icon element to display after the button content\n * @param {string} [props.className] - Additional CSS classes to apply\n * @param {boolean} [props.disabled] - Whether the button is disabled\n * @returns {React.ReactElement} The Button component\n * @example\n * // Basic usage\n * <Button>Click me</Button>\n *\n * // With variants and size\n * <Button variant=\"secondary\" size=\"large\">\n * Large Secondary Button\n * </Button>\n *\n * // With icons\n * <Button iconStart={<SearchIcon />} iconEnd={<ArrowRightIcon />}>\n * Search\n * </Button>\n *\n * // Disabled state\n * <Button disabled>Disabled Button</Button>\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n\t(\n\t\t{\n\t\t\tasChild,\n\t\t\tchildren,\n\t\t\tvariant = \"primary\",\n\t\t\tsize = \"medium\",\n\t\t\tclassName,\n\t\t\tdisabled,\n\t\t\ticonStart,\n\t\t\ticonEnd,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst Component = asChild ? Slot : \"button\";\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tclassName={buttonStyles({ variant, size, disabled, className })}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<Slottable child={children}>\n\t\t\t\t\t{(child) => (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{iconStart && (\n\t\t\t\t\t\t\t\t<Icon size={size} asChild>\n\t\t\t\t\t\t\t\t\t{iconStart}\n\t\t\t\t\t\t\t\t</Icon>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{child}\n\t\t\t\t\t\t\t{iconEnd && (\n\t\t\t\t\t\t\t\t<Icon size={size} asChild>\n\t\t\t\t\t\t\t\t\t{iconEnd}\n\t\t\t\t\t\t\t\t</Icon>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t</Slottable>\n\t\t\t</Component>\n\t\t);\n\t},\n);\n\nButton.displayName = \"Button\";\n"]}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from "./components/accordion/accordion";
|
|
2
2
|
export type { AccordionContentProps, AccordionItemProps, AccordionProps, AccordionTriggerProps, } from "./components/accordion/accordion";
|
|
3
|
+
export { Alert, AlertDescription, AlertTitle } from "./components/alert/alert";
|
|
4
|
+
export type { AlertDescriptionProps, AlertProps, AlertTitleProps, } from "./components/alert/alert";
|
|
5
|
+
export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, } from "./components/alert-dialog/alert-dialog";
|
|
3
6
|
export { Avatar, AvatarFallback, AvatarImage } from "./components/avatar/avatar";
|
|
4
7
|
export { AvatarGroup } from "./components/avatar/avatar-group";
|
|
5
8
|
export type { AvatarGroupProps } from "./components/avatar/avatar-group";
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from "./components/accordion/accordion";
|
|
2
|
+
export { Alert, AlertDescription, AlertTitle } from "./components/alert/alert";
|
|
3
|
+
export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, } from "./components/alert-dialog/alert-dialog";
|
|
2
4
|
export { Avatar, AvatarFallback, AvatarImage } from "./components/avatar/avatar";
|
|
3
5
|
export { AvatarGroup } from "./components/avatar/avatar-group";
|
|
4
6
|
export { Badge } from "./components/badge/badge";
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"/","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,SAAS,EACT,gBAAgB,EAChB,aAAa,EACb,gBAAgB,GAChB,MAAM,iCAAiC,CAAC;AAOzC,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAChF,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAE9D,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAEnD,OAAO,EACN,IAAI,EACJ,WAAW,EACX,UAAU,EACV,UAAU,GACV,MAAM,uBAAuB,CAAC;AAO/B,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAEzD,OAAO,EACN,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,aAAa,GACb,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACN,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,aAAa,GACb,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACN,YAAY,EACZ,mBAAmB,EACnB,mBAAmB,EACnB,qBAAqB,EACrB,iBAAiB,EACjB,qBAAqB,EACrB,oBAAoB,EACpB,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EACf,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,GACtB,MAAM,yCAAyC,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AAEnE,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD,OAAO,EACN,UAAU,EACV,cAAc,EACd,cAAc,EACd,cAAc,GACd,MAAM,mCAAmC,CAAC;AAK3C,OAAO,EACN,OAAO,EACP,aAAa,EACb,YAAY,EACZ,cAAc,EACd,aAAa,EACb,cAAc,GACd,MAAM,6BAA6B,CAAC;AAKrC,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAEzD,OAAO,EACN,UAAU,EACV,cAAc,GACd,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EACN,MAAM,EACN,aAAa,EACb,WAAW,EACX,UAAU,EACV,WAAW,EACX,sBAAsB,EACtB,oBAAoB,EACpB,eAAe,EACf,aAAa,EACb,WAAW,GACX,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAEnD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAEnD,OAAO,EACN,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,WAAW,GACX,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACN,KAAK,EACL,SAAS,EACT,SAAS,EACT,SAAS,EACT,WAAW,EACX,QAAQ,EACR,WAAW,EACX,YAAY,GACZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACN,KAAK,EACL,OAAO,EACP,KAAK,GACL,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EACN,OAAO,EACP,cAAc,EACd,cAAc,GACd,MAAM,6BAA6B,CAAC","sourcesContent":["export {\n\tAccordion,\n\tAccordionContent,\n\tAccordionItem,\n\tAccordionTrigger,\n} from \"@components/accordion/accordion\";\nexport type {\n\tAccordionContentProps,\n\tAccordionItemProps,\n\tAccordionProps,\n\tAccordionTriggerProps,\n} from \"@components/accordion/accordion\";\nexport { Avatar, AvatarFallback, AvatarImage } from \"@components/avatar/avatar\";\nexport { AvatarGroup } from \"@components/avatar/avatar-group\";\nexport type { AvatarGroupProps } from \"@components/avatar/avatar-group\";\nexport { Badge } from \"@components/badge/badge\";\nexport type { BadgeProps } from \"@components/badge/badge\";\nexport { Button } from \"@components/button/button\";\nexport type { ButtonProps } from \"@components/button/button\";\nexport {\n\tCard,\n\tCardContent,\n\tCardFooter,\n\tCardHeader,\n} from \"@components/card/card\";\nexport type {\n\tCardContentProps,\n\tCardFooterProps,\n\tCardHeaderProps,\n\tCardProps,\n} from \"@components/card/card\";\nexport { Checkbox } from \"@components/checkbox/checkbox\";\nexport type { CheckboxProps } from \"@components/checkbox/checkbox\";\nexport {\n\tDialog,\n\tDialogClose,\n\tDialogContent,\n\tDialogDescription,\n\tDialogFooter,\n\tDialogHeader,\n\tDialogTitle,\n\tDialogTrigger,\n} from \"@components/dialog/dialog\";\nexport {\n\tDrawer,\n\tDrawerClose,\n\tDrawerContent,\n\tDrawerDescription,\n\tDrawerFooter,\n\tDrawerHeader,\n\tDrawerTitle,\n\tDrawerTrigger,\n} from \"@components/drawer/drawer\";\nexport {\n\tDropdownMenu,\n\tDropdownMenuTrigger,\n\tDropdownMenuContent,\n\tDropdownMenuRadioItem,\n\tDropdownMenuLabel,\n\tDropdownMenuSeparator,\n\tDropdownMenuShortcut,\n\tDropdownMenuGroup,\n\tDropdownMenuPortal,\n\tDropdownMenuSub,\n\tDropdownMenuSubContent,\n\tDropdownMenuSubTrigger,\n\tDropdownMenuRadioGroup,\n} from \"@components/dropdown-menu/dropdown-menu\";\nexport { getVariants } from \"@utilities/get-variants/get-variants\";\nexport type { ResponsiveValue } from \"@utilities/responsive/responsive\";\nexport { Label } from \"@components/label/label\";\nexport type { LabelProps } from \"@components/label/label\";\nexport { Input } from \"@components/input/input\";\nexport type { InputProps } from \"@components/input/input\";\nexport {\n\tPagination,\n\tPaginationItem,\n\tPaginationNext,\n\tPaginationPrev,\n} from \"@components/pagination/pagination\";\nexport type {\n\tPaginationItemProps,\n\tPaginationProps,\n} from \"@components/pagination/pagination\";\nexport {\n\tPopover,\n\tPopoverAnchor,\n\tPopoverClose,\n\tPopoverContent,\n\tPopoverPortal,\n\tPopoverTrigger,\n} from \"@components/popover/popover\";\nexport type {\n\tPopoverContentProps,\n\tPopoverProps,\n} from \"@components/popover/popover\";\nexport { Progress } from \"@components/progress/progress\";\nexport type { ProgressProps } from \"@components/progress/progress\";\nexport {\n\tRadioGroup,\n\tRadioGroupItem,\n} from \"@components/radio-group/radio-group\";\nexport {\n\tSelect,\n\tSelectContent,\n\tSelectGroup,\n\tSelectItem,\n\tSelectLabel,\n\tSelectScrollDownButton,\n\tSelectScrollUpButton,\n\tSelectSeparator,\n\tSelectTrigger,\n\tSelectValue,\n} from \"@components/select/select\";\nexport { Skeleton } from \"@components/skeleton/skeleton\";\nexport { Slider } from \"@components/slider/slider\";\nexport type { SliderProps } from \"@components/slider/slider\";\nexport { Switch } from \"@components/switch/switch\";\nexport type { SwitchProps } from \"@components/switch/switch\";\nexport {\n\tTabs,\n\tTabsContent,\n\tTabsList,\n\tTabsTrigger,\n} from \"@components/tabs/tabs\";\nexport {\n\tTable,\n\tTableBody,\n\tTableCell,\n\tTableHead,\n\tTableHeader,\n\tTableRow,\n\tTableFooter,\n\tTableCaption,\n} from \"@components/table/table\";\nexport {\n\tToast,\n\tToaster,\n\ttoast,\n} from \"@components/toast/toast\";\nexport type { ToastProps } from \"@components/toast/toast\";\nexport {\n\tTooltip,\n\tTooltipContent,\n\tTooltipTrigger,\n} from \"@components/tooltip/tooltip\";\nexport type { TooltipProps } from \"@components/tooltip/tooltip\";\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"/","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,SAAS,EACT,gBAAgB,EAChB,aAAa,EACb,gBAAgB,GAChB,MAAM,iCAAiC,CAAC;AAOzC,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAM9E,OAAO,EACN,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,GAClB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAChF,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAE9D,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAEnD,OAAO,EACN,IAAI,EACJ,WAAW,EACX,UAAU,EACV,UAAU,GACV,MAAM,uBAAuB,CAAC;AAO/B,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAEzD,OAAO,EACN,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,aAAa,GACb,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACN,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,aAAa,GACb,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACN,YAAY,EACZ,mBAAmB,EACnB,mBAAmB,EACnB,qBAAqB,EACrB,iBAAiB,EACjB,qBAAqB,EACrB,oBAAoB,EACpB,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EACf,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,GACtB,MAAM,yCAAyC,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AAEnE,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD,OAAO,EACN,UAAU,EACV,cAAc,EACd,cAAc,EACd,cAAc,GACd,MAAM,mCAAmC,CAAC;AAK3C,OAAO,EACN,OAAO,EACP,aAAa,EACb,YAAY,EACZ,cAAc,EACd,aAAa,EACb,cAAc,GACd,MAAM,6BAA6B,CAAC;AAKrC,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAEzD,OAAO,EACN,UAAU,EACV,cAAc,GACd,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EACN,MAAM,EACN,aAAa,EACb,WAAW,EACX,UAAU,EACV,WAAW,EACX,sBAAsB,EACtB,oBAAoB,EACpB,eAAe,EACf,aAAa,EACb,WAAW,GACX,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAEnD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAEnD,OAAO,EACN,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,WAAW,GACX,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACN,KAAK,EACL,SAAS,EACT,SAAS,EACT,SAAS,EACT,WAAW,EACX,QAAQ,EACR,WAAW,EACX,YAAY,GACZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACN,KAAK,EACL,OAAO,EACP,KAAK,GACL,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EACN,OAAO,EACP,cAAc,EACd,cAAc,GACd,MAAM,6BAA6B,CAAC","sourcesContent":["export {\n\tAccordion,\n\tAccordionContent,\n\tAccordionItem,\n\tAccordionTrigger,\n} from \"@components/accordion/accordion\";\nexport type {\n\tAccordionContentProps,\n\tAccordionItemProps,\n\tAccordionProps,\n\tAccordionTriggerProps,\n} from \"@components/accordion/accordion\";\nexport { Alert, AlertDescription, AlertTitle } from \"@components/alert/alert\";\nexport type {\n\tAlertDescriptionProps,\n\tAlertProps,\n\tAlertTitleProps,\n} from \"@components/alert/alert\";\nexport {\n\tAlertDialog,\n\tAlertDialogAction,\n\tAlertDialogCancel,\n\tAlertDialogContent,\n\tAlertDialogDescription,\n\tAlertDialogOverlay,\n\tAlertDialogTitle,\n\tAlertDialogTrigger,\n} from \"@components/alert-dialog/alert-dialog\";\nexport { Avatar, AvatarFallback, AvatarImage } from \"@components/avatar/avatar\";\nexport { AvatarGroup } from \"@components/avatar/avatar-group\";\nexport type { AvatarGroupProps } from \"@components/avatar/avatar-group\";\nexport { Badge } from \"@components/badge/badge\";\nexport type { BadgeProps } from \"@components/badge/badge\";\nexport { Button } from \"@components/button/button\";\nexport type { ButtonProps } from \"@components/button/button\";\nexport {\n\tCard,\n\tCardContent,\n\tCardFooter,\n\tCardHeader,\n} from \"@components/card/card\";\nexport type {\n\tCardContentProps,\n\tCardFooterProps,\n\tCardHeaderProps,\n\tCardProps,\n} from \"@components/card/card\";\nexport { Checkbox } from \"@components/checkbox/checkbox\";\nexport type { CheckboxProps } from \"@components/checkbox/checkbox\";\nexport {\n\tDialog,\n\tDialogClose,\n\tDialogContent,\n\tDialogDescription,\n\tDialogFooter,\n\tDialogHeader,\n\tDialogTitle,\n\tDialogTrigger,\n} from \"@components/dialog/dialog\";\nexport {\n\tDrawer,\n\tDrawerClose,\n\tDrawerContent,\n\tDrawerDescription,\n\tDrawerFooter,\n\tDrawerHeader,\n\tDrawerTitle,\n\tDrawerTrigger,\n} from \"@components/drawer/drawer\";\nexport {\n\tDropdownMenu,\n\tDropdownMenuTrigger,\n\tDropdownMenuContent,\n\tDropdownMenuRadioItem,\n\tDropdownMenuLabel,\n\tDropdownMenuSeparator,\n\tDropdownMenuShortcut,\n\tDropdownMenuGroup,\n\tDropdownMenuPortal,\n\tDropdownMenuSub,\n\tDropdownMenuSubContent,\n\tDropdownMenuSubTrigger,\n\tDropdownMenuRadioGroup,\n} from \"@components/dropdown-menu/dropdown-menu\";\nexport { getVariants } from \"@utilities/get-variants/get-variants\";\nexport type { ResponsiveValue } from \"@utilities/responsive/responsive\";\nexport { Label } from \"@components/label/label\";\nexport type { LabelProps } from \"@components/label/label\";\nexport { Input } from \"@components/input/input\";\nexport type { InputProps } from \"@components/input/input\";\nexport {\n\tPagination,\n\tPaginationItem,\n\tPaginationNext,\n\tPaginationPrev,\n} from \"@components/pagination/pagination\";\nexport type {\n\tPaginationItemProps,\n\tPaginationProps,\n} from \"@components/pagination/pagination\";\nexport {\n\tPopover,\n\tPopoverAnchor,\n\tPopoverClose,\n\tPopoverContent,\n\tPopoverPortal,\n\tPopoverTrigger,\n} from \"@components/popover/popover\";\nexport type {\n\tPopoverContentProps,\n\tPopoverProps,\n} from \"@components/popover/popover\";\nexport { Progress } from \"@components/progress/progress\";\nexport type { ProgressProps } from \"@components/progress/progress\";\nexport {\n\tRadioGroup,\n\tRadioGroupItem,\n} from \"@components/radio-group/radio-group\";\nexport {\n\tSelect,\n\tSelectContent,\n\tSelectGroup,\n\tSelectItem,\n\tSelectLabel,\n\tSelectScrollDownButton,\n\tSelectScrollUpButton,\n\tSelectSeparator,\n\tSelectTrigger,\n\tSelectValue,\n} from \"@components/select/select\";\nexport { Skeleton } from \"@components/skeleton/skeleton\";\nexport { Slider } from \"@components/slider/slider\";\nexport type { SliderProps } from \"@components/slider/slider\";\nexport { Switch } from \"@components/switch/switch\";\nexport type { SwitchProps } from \"@components/switch/switch\";\nexport {\n\tTabs,\n\tTabsContent,\n\tTabsList,\n\tTabsTrigger,\n} from \"@components/tabs/tabs\";\nexport {\n\tTable,\n\tTableBody,\n\tTableCell,\n\tTableHead,\n\tTableHeader,\n\tTableRow,\n\tTableFooter,\n\tTableCaption,\n} from \"@components/table/table\";\nexport {\n\tToast,\n\tToaster,\n\ttoast,\n} from \"@components/toast/toast\";\nexport type { ToastProps } from \"@components/toast/toast\";\nexport {\n\tTooltip,\n\tTooltipContent,\n\tTooltipTrigger,\n} from \"@components/tooltip/tooltip\";\nexport type { TooltipProps } from \"@components/tooltip/tooltip\";\n"]}
|
|
@@ -39,12 +39,12 @@ import { cn } from "../cn/cn";
|
|
|
39
39
|
*/
|
|
40
40
|
export const getVariants = ({ base, variants, compoundVariants, }) => ({ className, ...props }) => {
|
|
41
41
|
const responsiveClasses = Object.entries(props)
|
|
42
|
-
.
|
|
42
|
+
.map(([key, propValue]) => {
|
|
43
43
|
const variant = variants?.[key];
|
|
44
44
|
const value = typeof propValue === "boolean" ? String(propValue) : propValue;
|
|
45
45
|
// Handle undefined values
|
|
46
46
|
if (!value)
|
|
47
|
-
return;
|
|
47
|
+
return undefined;
|
|
48
48
|
const variantValue = variant?.[value];
|
|
49
49
|
// Handle string values
|
|
50
50
|
if (typeof variantValue === "string") {
|
|
@@ -65,6 +65,7 @@ export const getVariants = ({ base, variants, compoundVariants, }) => ({ classNa
|
|
|
65
65
|
})
|
|
66
66
|
.join(" ");
|
|
67
67
|
})
|
|
68
|
+
.filter(Boolean)
|
|
68
69
|
.join(" ");
|
|
69
70
|
const compoundClasses = compoundVariants
|
|
70
71
|
?.map(({ className, ...compound }) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"get-variants.js","sourceRoot":"/","sources":["utilities/get-variants/get-variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AA8BtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,MAAM,CAAC,MAAM,WAAW,GACvB,CAA0B,EACzB,IAAI,EACJ,QAAQ,EACR,gBAAgB,GACY,EAAE,EAAE,CACjC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAmB,EAAE,EAAE;IAC5C,MAAM,iBAAiB,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;SAC7C,
|
|
1
|
+
{"version":3,"file":"get-variants.js","sourceRoot":"/","sources":["utilities/get-variants/get-variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AA8BtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,MAAM,CAAC,MAAM,WAAW,GACvB,CAA0B,EACzB,IAAI,EACJ,QAAQ,EACR,gBAAgB,GACY,EAAE,EAAE,CACjC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAmB,EAAE,EAAE;IAC5C,MAAM,iBAAiB,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;SAC7C,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,CAA0C,EAAE,EAAE;QAClE,MAAM,OAAO,GAAG,QAAQ,EAAE,CAAC,GAAG,CAAC,CAAC;QAChC,MAAM,KAAK,GACV,OAAO,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QAEhE,0BAA0B;QAC1B,IAAI,CAAC,KAAK;YAAE,OAAO,SAAS,CAAC;QAE7B,MAAM,YAAY,GAAG,OAAO,EAAE,CAAC,KAA2B,CAAC,CAAC;QAE5D,uBAAuB;QACvB,IAAI,OAAO,YAAY,KAAK,QAAQ,EAAE,CAAC;YACtC,OAAO,YAAY,CAAC;QACrB,CAAC;QAED,2BAA2B;QAC3B,OAAO,MAAM,CAAC,OAAO,CAAC,KAAmC,CAAC;aACxD,GAAG,CAAC,CAAC,CAAC,UAAU,EAAE,KAAK,CAAC,EAAE,EAAE;YAC5B,mFAAmF;YACnF,IAAI,UAAU,KAAK,SAAS,EAAE,CAAC;gBAC9B,OAAO,QAAQ,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,KAA6B,CAAC,CAAC;YACzD,CAAC;YACD,iEAAiE;YACjE,OAAO,QAAQ,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,KAA6B,CAAC;gBACtD,EAAE,KAAK,CAAC,GAAG,CAAC;iBACX,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,GAAG,UAAU,IAAI,SAAS,EAAE,CAAC;iBAChD,IAAI,CAAC,GAAG,CAAC,CAAC;QACb,CAAC,CAAC;aACD,IAAI,CAAC,GAAG,CAAC,CAAC;IACb,CAAC,CAAC;SACD,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEZ,MAAM,eAAe,GAAG,gBAAgB;QACvC,EAAE,GAAG,CAAC,CAAC,EAAE,SAAS,EAAE,GAAG,QAAQ,EAAE,EAAE,EAAE;QACpC,IACC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,KAAK,CAC7B,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAChB,KAAK,CAAC,GAAG,CAAC,KAAK,MAAM,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC,KAAK,KAAK,CACrD,EACA,CAAC;YACF,OAAO,SAAS,CAAC;QAClB,CAAC;QACD,OAAO,SAAS,CAAC;IAClB,CAAC,CAAC;SACD,MAAM,CAAC,OAAO,CAAC,CAAC;IAElB,OAAO,EAAE,CAAC,IAAI,EAAE,iBAAiB,EAAE,eAAe,EAAE,SAAS,CAAC,CAAC;AAChE,CAAC,CAAC","sourcesContent":["import { cn } from \"@utilities/cn/cn\";\nimport type {\n\tBreakpointsMap,\n\tResponsiveValue,\n} from \"@utilities/responsive/responsive\";\n\ntype VariantValue = Record<string, string>;\ntype VariantConfig = Record<string, VariantValue>;\n\ntype StringBoolean = \"true\" | \"false\";\ntype BooleanVariant = Partial<Record<StringBoolean, string>>;\n\ntype VariantPropValue<T> = T extends BooleanVariant\n\t? ResponsiveValue<boolean> | undefined\n\t: T extends Record<string, unknown>\n\t\t? ResponsiveValue<keyof T>\n\t\t: never;\n\ntype VariantProps<T extends VariantConfig> = {\n\t[K in keyof T]: VariantPropValue<T[K]>;\n} & {\n\tclassName?: string;\n};\n\ntype ResponsiveClassesConfig<T extends VariantConfig> = {\n\tbase: string;\n\tvariants?: T;\n\tcompoundVariants?: Partial<VariantProps<T>>[];\n};\n\n/**\n * Creates a function that generates classes based on variant configurations and responsive props\n *\n * @template T - Type extending VariantConfig (Record of variant names to their possible values and corresponding classes)\n *\n * @param config - Configuration object for variants\n * @param config.base - Base classes that are always applied\n * @param config.variants - Object containing variant definitions where each key is a variant name\n * and value is either a string of class names, an object mapping variant values to class names,\n * or an object with true/false keys for boolean variants\n * @param config.compoundVariants - Optional array of compound variants that apply additional classes\n * when multiple variants have specific values\n *\n * @returns A function that accepts variant props and returns classes with twMerge\n *\n * @example\n * const getButtonVariants = getVariants({\n * base: \"px-4 py-2 rounded\",\n * variants: {\n * intent: {\n * primary: \"bg-blue-500 text-white\",\n * secondary: \"bg-gray-200 text-gray-800\"\n * },\n * size: {\n * sm: \"text-sm\",\n * lg: \"text-lg\"\n * },\n * disabled: {\n * true: \"opacity-50 cursor-not-allowed\"\n * }\n * }\n * });\n *\n * // Usage:\n * getButtonVariants({ intent: \"primary\", size: \"lg\", disabled: true })\n * // Or with responsive values:\n * getButtonVariants({ intent: { initial: \"primary\", md: \"secondary\" } })\n */\nexport const getVariants =\n\t<T extends VariantConfig>({\n\t\tbase,\n\t\tvariants,\n\t\tcompoundVariants,\n\t}: ResponsiveClassesConfig<T>) =>\n\t({ className, ...props }: VariantProps<T>) => {\n\t\tconst responsiveClasses = Object.entries(props)\n\t\t\t.map(([key, propValue]: [keyof T, VariantPropValue<T[keyof T]>]) => {\n\t\t\t\tconst variant = variants?.[key];\n\t\t\t\tconst value =\n\t\t\t\t\ttypeof propValue === \"boolean\" ? String(propValue) : propValue;\n\n\t\t\t\t// Handle undefined values\n\t\t\t\tif (!value) return undefined;\n\n\t\t\t\tconst variantValue = variant?.[value as keyof VariantValue];\n\n\t\t\t\t// Handle string values\n\t\t\t\tif (typeof variantValue === \"string\") {\n\t\t\t\t\treturn variantValue;\n\t\t\t\t}\n\n\t\t\t\t// Handle responsive values\n\t\t\t\treturn Object.entries(value as Partial<BreakpointsMap<T>>)\n\t\t\t\t\t.map(([breakpoint, value]) => {\n\t\t\t\t\t\t// If the breakpoint is initial, return the variant value without breakpoint prefix\n\t\t\t\t\t\tif (breakpoint === \"initial\") {\n\t\t\t\t\t\t\treturn variants?.[key]?.[value as keyof typeof variant];\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// Otherwise, return the variant value with the breakpoint prefix\n\t\t\t\t\t\treturn variants?.[key]?.[value as keyof typeof variant]\n\t\t\t\t\t\t\t?.split(\" \")\n\t\t\t\t\t\t\t.map((className) => `${breakpoint}:${className}`)\n\t\t\t\t\t\t\t.join(\" \");\n\t\t\t\t\t})\n\t\t\t\t\t.join(\" \");\n\t\t\t})\n\t\t\t.filter(Boolean)\n\t\t\t.join(\" \");\n\n\t\tconst compoundClasses = compoundVariants\n\t\t\t?.map(({ className, ...compound }) => {\n\t\t\t\tif (\n\t\t\t\t\tObject.entries(compound).every(\n\t\t\t\t\t\t([key, value]) =>\n\t\t\t\t\t\t\tprops[key] === String(value) || props[key] === value,\n\t\t\t\t\t)\n\t\t\t\t) {\n\t\t\t\t\treturn className;\n\t\t\t\t}\n\t\t\t\treturn undefined;\n\t\t\t})\n\t\t\t.filter(Boolean);\n\n\t\treturn cn(base, responsiveClasses, compoundClasses, className);\n\t};\n"]}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
export type
|
|
2
|
-
export type BreakpointsMap<V> =
|
|
3
|
-
|
|
1
|
+
export type Breakpoints = "sm" | "md" | "lg" | "xl";
|
|
2
|
+
export type BreakpointsMap<V> = {
|
|
3
|
+
initial: V;
|
|
4
|
+
} & Partial<{
|
|
5
|
+
[breakpoint in Breakpoints]: V;
|
|
4
6
|
}>;
|
|
5
7
|
export type ResponsiveValue<T> = T | BreakpointsMap<T>;
|
|
6
8
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"responsive.js","sourceRoot":"/","sources":["utilities/responsive/responsive.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"responsive.js","sourceRoot":"/","sources":["utilities/responsive/responsive.ts"],"names":[],"mappings":"AAUA,MAAM,eAAe,GAAG,CAAI,KAAyB,EAAc,EAAE,CACpE,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;AAE1B,MAAM,gBAAgB,GAAG,CACxB,KAAyB,EACI,EAAE,CAC/B,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;AAErE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CACjC,KAAyB,EACzB,MAAuB,EACF,EAAE,CACvB,eAAe,CAAC,KAAK,CAAC;IACrB,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;IACf,CAAC,CAAE,MAAM,CAAC,WAAW,CACnB,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,UAAU,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC;QAClD,UAAU;QACV,MAAM,CAAC,KAAK,CAAC;KACb,CAAC,CACoB,CAAC","sourcesContent":["export type Breakpoints = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport type BreakpointsMap<V> = {\n\tinitial: V;\n} & Partial<{\n\t[breakpoint in Breakpoints]: V;\n}>;\n\nexport type ResponsiveValue<T> = T | BreakpointsMap<T>;\n\nconst isSingularValue = <A>(value: ResponsiveValue<A>): value is A =>\n\t!isBreakpointsMap(value);\n\nconst isBreakpointsMap = <A>(\n\tvalue: ResponsiveValue<A>,\n): value is BreakpointsMap<A> =>\n\ttypeof value === \"object\" && value != null && !Array.isArray(value);\n\n/**\n * Maps a ResponsiveValue to a new ResponsiveValue using the provided mapper function. Singular values are passed through as is.\n *\n * @template V The type of the original value\n * @template T The type of the mapped value\n * @param {ResponsiveValue<V>} value - The original ResponsiveValue to be mapped\n * @param {function(V): T} mapper - A function that maps a ResponsiveValue to a new ResponsiveValue\n * @returns {ResponsiveValue<T>} A new ResponsiveValue with the mapped values\n *\n *\n * @example\n * const sizes = {\n * initial: 'md',\n * sm: 'lg',\n * }\n *\n * const output = mapResponsiveValue(sizes, size => {\n *\tswitch (size) {\n *\t\tcase 'initial':\n *\t\treturn 'sm';\n *\t\tcase 'sm':\n *\t\t\treturn 'md';\n *\t\t}\n *\t});\n *\n * // console.log(output)\n * {\n *\tinitial: 'sm',\n *\tsm: 'md',\n * }\n */\nexport const mapResponsiveValue = <V, T>(\n\tvalue: ResponsiveValue<V>,\n\tmapper: (value: V) => T,\n): ResponsiveValue<T> =>\n\tisSingularValue(value)\n\t\t? mapper(value)\n\t\t: (Object.fromEntries(\n\t\t\t\tObject.entries(value).map(([breakpoint, value]) => [\n\t\t\t\t\tbreakpoint,\n\t\t\t\t\tmapper(value),\n\t\t\t\t]),\n\t\t\t) as BreakpointsMap<T>);\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "luan-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.1",
|
|
4
4
|
"description": "A UI library for React",
|
|
5
5
|
"author": "benebene84 <benedikt.sperl@gmail.com> (https://github.com/benebene84)",
|
|
6
6
|
"main": "/dist/index.js",
|
|
@@ -34,35 +34,31 @@
|
|
|
34
34
|
"homepage": "https://github.com/benebene84/luan-ui#readme",
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@biomejs/biome": "^1.9.4",
|
|
37
|
-
"@chromatic-com/storybook": "^
|
|
38
|
-
"@storybook/addon-
|
|
39
|
-
"@storybook/addon-
|
|
40
|
-
"@storybook/addon-onboarding": "^8.6.14",
|
|
37
|
+
"@chromatic-com/storybook": "^4.0.0",
|
|
38
|
+
"@storybook/addon-docs": "^9.0.10",
|
|
39
|
+
"@storybook/addon-onboarding": "^9.0.10",
|
|
41
40
|
"@storybook/addon-webpack5-compiler-swc": "^3.0.0",
|
|
42
|
-
"@storybook/
|
|
43
|
-
"@
|
|
44
|
-
"@storybook/react-webpack5": "^8.6.14",
|
|
45
|
-
"@storybook/test": "^8.6.14",
|
|
46
|
-
"@tailwindcss/postcss": "^4.1.7",
|
|
41
|
+
"@storybook/react-webpack5": "^9.0.10",
|
|
42
|
+
"@tailwindcss/postcss": "^4.1.10",
|
|
47
43
|
"@testing-library/dom": "^10.4.0",
|
|
48
44
|
"@testing-library/jest-dom": "^6.6.3",
|
|
49
45
|
"@testing-library/react": "^16.3.0",
|
|
50
46
|
"@testing-library/user-event": "^14.6.1",
|
|
51
|
-
"@types/node": "^
|
|
52
|
-
"@types/react": "^19.1.
|
|
53
|
-
"@types/react-dom": "^19.1.
|
|
54
|
-
"@vitejs/plugin-react": "^4.5.
|
|
47
|
+
"@types/node": "^24.0.3",
|
|
48
|
+
"@types/react": "^19.1.8",
|
|
49
|
+
"@types/react-dom": "^19.1.6",
|
|
50
|
+
"@vitejs/plugin-react": "^4.5.2",
|
|
55
51
|
"css-loader": "^7.1.2",
|
|
56
52
|
"jsdom": "^26.1.0",
|
|
57
|
-
"lefthook": "^1.11.
|
|
58
|
-
"postcss": "^8.5.
|
|
53
|
+
"lefthook": "^1.11.14",
|
|
54
|
+
"postcss": "^8.5.6",
|
|
59
55
|
"postcss-loader": "^8.1.1",
|
|
60
|
-
"storybook": "^
|
|
56
|
+
"storybook": "^9.0.10",
|
|
61
57
|
"style-loader": "^4.0.0",
|
|
62
|
-
"tailwindcss": "^4.1.
|
|
58
|
+
"tailwindcss": "^4.1.10",
|
|
63
59
|
"tsc-alias": "^1.8.16",
|
|
64
60
|
"typescript": "^5.8.3",
|
|
65
|
-
"vitest": "^3.
|
|
61
|
+
"vitest": "^3.2.3"
|
|
66
62
|
},
|
|
67
63
|
"peerDependencies": {
|
|
68
64
|
"react": "^18.0.0 || ^19.0.0",
|
|
@@ -73,8 +69,8 @@
|
|
|
73
69
|
"@radix-ui/react-icons": "^1.3.2",
|
|
74
70
|
"clsx": "^2.1.1",
|
|
75
71
|
"radix-ui": "^1.4.2",
|
|
76
|
-
"sonner": "^2.0.
|
|
77
|
-
"tailwind-merge": "^3.3.
|
|
72
|
+
"sonner": "^2.0.5",
|
|
73
|
+
"tailwind-merge": "^3.3.1"
|
|
78
74
|
},
|
|
79
75
|
"packageManager": "pnpm@9.14.2"
|
|
80
76
|
}
|