@khanhminh/design-system 1.14.0 → 1.14.2

package/dist/components/base/Button/Button.js

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+import { Button as Button$1 } from '../../ui/button.js';
+
+const Button = (props) => {
+    return jsx(Button$1, { ...props });
+};
+
+export { Button };

package/dist/components/base/Checkbox/Checkbox.js

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+import { Checkbox as Checkbox$1 } from '../../ui/checkbox.js';
+
+const Checkbox = (props) => {
+    return jsx(Checkbox$1, { ...props });
+};
+
+export { Checkbox };

package/dist/components/base/Input/Input.js

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+import { Input as Input$1 } from '../../ui/input.js';
+
+const Input = (props) => {
+    return jsx(Input$1, { ...props });
+};
+
+export { Input };

package/dist/components/base/Label/Label.js

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+import { Label as Label$1 } from '../../ui/label.js';
+
+const Label = (props) => {
+    return jsx(Label$1, { ...props });
+};
+
+export { Label };

package/dist/components/base/ScrollArea/ScrollArea.js

@@ -0,0 +1,8 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ScrollArea as ScrollArea$1, ScrollBar } from '../../ui/scroll-area.js';
+
+const ScrollArea = ({ children, orientation = 'horizontal', className, ...props }) => {
+    return (jsxs(ScrollArea$1, { className: className, "data-slot": "scroll-area", ...props, children: [jsx("div", { "data-slot": "scroll-area-viewport", children: children }), jsx("div", { "data-slot": "scroll-area-scrollbar", children: jsx(ScrollBar, { orientation: orientation }) })] }));
+};
+
+export { ScrollArea as default };

package/dist/components/base/Separator/Separator.js

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+import { Separator as Separator$1 } from '../../ui/separator.js';
+
+const Separator = (props) => {
+    return jsx(Separator$1, { ...props });
+};
+
+export { Separator };

package/dist/components/base/Spinner/Spinner.js

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+import { Spinner as Spinner$1 } from '../../ui/spinner.js';
+
+const Spinner = (props) => {
+    return jsx(Spinner$1, { ...props });
+};
+
+export { Spinner };

package/dist/components/base/Switch/Switch.js

@@ -0,0 +1,9 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Switch as Switch$1 } from '../../ui/switch.js';
+import { Label } from '../Label/Label.js';
+
+const Switch = ({ id, label, ...props }) => {
+    return (jsxs("div", { className: "flex items-center space-x-2", children: [jsx(Switch$1, { "data-slot": "switch", id: id, ...props }), jsx(Label, { "data-slot": "label", htmlFor: id, children: label })] }));
+};
+
+export { Switch as default };

package/dist/components/index.js

@@ -0,0 +1,8 @@
+export { Button } from './base/Button/Button.js';
+export { Input } from './base/Input/Input.js';
+export { Spinner } from './base/Spinner/Spinner.js';
+export { Checkbox } from './base/Checkbox/Checkbox.js';
+export { Label } from './base/Label/Label.js';
+export { Separator } from './base/Separator/Separator.js';
+export { default as Switch } from './base/Switch/Switch.js';
+export { default as ScrollArea } from './base/ScrollArea/ScrollArea.js';

package/dist/components/ui/button.js

@@ -0,0 +1,71 @@
+import { jsx } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import '@radix-ui/react-accessible-icon';
+import '@radix-ui/react-accordion';
+import '@radix-ui/react-alert-dialog';
+import '@radix-ui/react-aspect-ratio';
+import '@radix-ui/react-avatar';
+import '@radix-ui/react-checkbox';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-context-menu';
+import '@radix-ui/react-dialog';
+import '@radix-ui/react-direction';
+import '@radix-ui/react-dropdown-menu';
+import '@radix-ui/react-form';
+import '@radix-ui/react-hover-card';
+import '@radix-ui/react-label';
+import '@radix-ui/react-menubar';
+import '@radix-ui/react-navigation-menu';
+import '@radix-ui/react-one-time-password-field';
+import '@radix-ui/react-password-toggle-field';
+import '@radix-ui/react-popover';
+import '@radix-ui/react-portal';
+import '@radix-ui/react-progress';
+import '@radix-ui/react-radio-group';
+import '@radix-ui/react-scroll-area';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+import '@radix-ui/react-slider';
+import * as Slot from '@radix-ui/react-slot';
+import '@radix-ui/react-switch';
+import '@radix-ui/react-tabs';
+import '@radix-ui/react-toast';
+import '@radix-ui/react-toggle';
+import '@radix-ui/react-toggle-group';
+import '@radix-ui/react-toolbar';
+import '@radix-ui/react-tooltip';
+import '@radix-ui/react-visually-hidden';
+import { cn } from '../../lib/utils.js';
+
+const buttonVariants = cva("inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+    variants: {
+        variant: {
+            default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+            destructive: 'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40',
+            outline: 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
+            secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+            ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+            link: 'text-primary underline-offset-4 hover:underline',
+        },
+        size: {
+            default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+            xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+            sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
+            lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+            icon: 'size-9',
+            'icon-xs': "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+            'icon-sm': 'size-8',
+            'icon-lg': 'size-10',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});
+function Button({ className, variant = 'default', size = 'default', asChild = false, ...props }) {
+    const Comp = asChild ? Slot.Root : 'button';
+    return (jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), "data-size": size, "data-slot": "button", "data-variant": variant, ...props }));
+}
+
+export { Button, buttonVariants };

package/dist/components/ui/checkbox.js

@@ -0,0 +1,44 @@
+import { jsx } from 'react/jsx-runtime';
+import { CheckIcon } from 'lucide-react';
+import '@radix-ui/react-accessible-icon';
+import '@radix-ui/react-accordion';
+import '@radix-ui/react-alert-dialog';
+import '@radix-ui/react-aspect-ratio';
+import '@radix-ui/react-avatar';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-context-menu';
+import '@radix-ui/react-dialog';
+import '@radix-ui/react-direction';
+import '@radix-ui/react-dropdown-menu';
+import '@radix-ui/react-form';
+import '@radix-ui/react-hover-card';
+import '@radix-ui/react-label';
+import '@radix-ui/react-menubar';
+import '@radix-ui/react-navigation-menu';
+import '@radix-ui/react-one-time-password-field';
+import '@radix-ui/react-password-toggle-field';
+import '@radix-ui/react-popover';
+import '@radix-ui/react-portal';
+import '@radix-ui/react-progress';
+import '@radix-ui/react-radio-group';
+import '@radix-ui/react-scroll-area';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+import '@radix-ui/react-slider';
+import '@radix-ui/react-slot';
+import '@radix-ui/react-switch';
+import '@radix-ui/react-tabs';
+import '@radix-ui/react-toast';
+import '@radix-ui/react-toggle';
+import '@radix-ui/react-toggle-group';
+import '@radix-ui/react-toolbar';
+import '@radix-ui/react-tooltip';
+import '@radix-ui/react-visually-hidden';
+import { cn } from '../../lib/utils.js';
+
+function Checkbox({ className, ...props }) {
+    return (jsx(CheckboxPrimitive.Root, { className: cn('peer border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', className), "data-slot": "checkbox", ...props, children: jsx(CheckboxPrimitive.Indicator, { className: "grid place-content-center text-current transition-none", "data-slot": "checkbox-indicator", children: jsx(CheckIcon, { className: "size-3.5" }) }) }));
+}
+
+export { Checkbox };

package/dist/components/ui/input.js

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../../lib/utils.js';
+
+function Input({ className, type, ...props }) {
+    return (jsx("input", { className: cn('border-input selection:bg-primary selection:text-primary-foreground file:text-foreground placeholder:text-muted-foreground dark:bg-input/30 h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', 'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]', 'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40', className), "data-slot": "input", type: type, ...props }));
+}
+
+export { Input };

package/dist/components/ui/label.js

@@ -0,0 +1,43 @@
+import { jsx } from 'react/jsx-runtime';
+import '@radix-ui/react-accessible-icon';
+import '@radix-ui/react-accordion';
+import '@radix-ui/react-alert-dialog';
+import '@radix-ui/react-aspect-ratio';
+import '@radix-ui/react-avatar';
+import '@radix-ui/react-checkbox';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-context-menu';
+import '@radix-ui/react-dialog';
+import '@radix-ui/react-direction';
+import '@radix-ui/react-dropdown-menu';
+import '@radix-ui/react-form';
+import '@radix-ui/react-hover-card';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import '@radix-ui/react-menubar';
+import '@radix-ui/react-navigation-menu';
+import '@radix-ui/react-one-time-password-field';
+import '@radix-ui/react-password-toggle-field';
+import '@radix-ui/react-popover';
+import '@radix-ui/react-portal';
+import '@radix-ui/react-progress';
+import '@radix-ui/react-radio-group';
+import '@radix-ui/react-scroll-area';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+import '@radix-ui/react-slider';
+import '@radix-ui/react-slot';
+import '@radix-ui/react-switch';
+import '@radix-ui/react-tabs';
+import '@radix-ui/react-toast';
+import '@radix-ui/react-toggle';
+import '@radix-ui/react-toggle-group';
+import '@radix-ui/react-toolbar';
+import '@radix-ui/react-tooltip';
+import '@radix-ui/react-visually-hidden';
+import { cn } from '../../lib/utils.js';
+
+function Label({ className, ...props }) {
+    return (jsx(LabelPrimitive.Root, { className: cn('flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50', className), "data-slot": "label", ...props }));
+}
+
+export { Label };

package/dist/components/ui/scroll-area.js

@@ -0,0 +1,46 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@radix-ui/react-accessible-icon';
+import '@radix-ui/react-accordion';
+import '@radix-ui/react-alert-dialog';
+import '@radix-ui/react-aspect-ratio';
+import '@radix-ui/react-avatar';
+import '@radix-ui/react-checkbox';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-context-menu';
+import '@radix-ui/react-dialog';
+import '@radix-ui/react-direction';
+import '@radix-ui/react-dropdown-menu';
+import '@radix-ui/react-form';
+import '@radix-ui/react-hover-card';
+import '@radix-ui/react-label';
+import '@radix-ui/react-menubar';
+import '@radix-ui/react-navigation-menu';
+import '@radix-ui/react-one-time-password-field';
+import '@radix-ui/react-password-toggle-field';
+import '@radix-ui/react-popover';
+import '@radix-ui/react-portal';
+import '@radix-ui/react-progress';
+import '@radix-ui/react-radio-group';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+import '@radix-ui/react-slider';
+import '@radix-ui/react-slot';
+import '@radix-ui/react-switch';
+import '@radix-ui/react-tabs';
+import '@radix-ui/react-toast';
+import '@radix-ui/react-toggle';
+import '@radix-ui/react-toggle-group';
+import '@radix-ui/react-toolbar';
+import '@radix-ui/react-tooltip';
+import '@radix-ui/react-visually-hidden';
+import { cn } from '../../lib/utils.js';
+
+function ScrollArea({ className, children, ...props }) {
+    return (jsxs(ScrollAreaPrimitive.Root, { className: cn('relative', className), "data-slot": "scroll-area", ...props, children: [jsx(ScrollAreaPrimitive.Viewport, { className: "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1", "data-slot": "scroll-area-viewport", children: children }), jsx(ScrollBar, {}), jsx(ScrollAreaPrimitive.Corner, {})] }));
+}
+function ScrollBar({ className, orientation = 'vertical', ...props }) {
+    return (jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, { className: cn('flex touch-none p-px transition-colors select-none', orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent', orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent', className), "data-slot": "scroll-area-scrollbar", orientation: orientation, ...props, children: jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "bg-border relative flex-1 rounded-full", "data-slot": "scroll-area-thumb" }) }));
+}
+
+export { ScrollArea, ScrollBar };

package/dist/components/ui/separator.js

@@ -0,0 +1,43 @@
+import { jsx } from 'react/jsx-runtime';
+import '@radix-ui/react-accessible-icon';
+import '@radix-ui/react-accordion';
+import '@radix-ui/react-alert-dialog';
+import '@radix-ui/react-aspect-ratio';
+import '@radix-ui/react-avatar';
+import '@radix-ui/react-checkbox';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-context-menu';
+import '@radix-ui/react-dialog';
+import '@radix-ui/react-direction';
+import '@radix-ui/react-dropdown-menu';
+import '@radix-ui/react-form';
+import '@radix-ui/react-hover-card';
+import '@radix-ui/react-label';
+import '@radix-ui/react-menubar';
+import '@radix-ui/react-navigation-menu';
+import '@radix-ui/react-one-time-password-field';
+import '@radix-ui/react-password-toggle-field';
+import '@radix-ui/react-popover';
+import '@radix-ui/react-portal';
+import '@radix-ui/react-progress';
+import '@radix-ui/react-radio-group';
+import '@radix-ui/react-scroll-area';
+import '@radix-ui/react-select';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import '@radix-ui/react-slider';
+import '@radix-ui/react-slot';
+import '@radix-ui/react-switch';
+import '@radix-ui/react-tabs';
+import '@radix-ui/react-toast';
+import '@radix-ui/react-toggle';
+import '@radix-ui/react-toggle-group';
+import '@radix-ui/react-toolbar';
+import '@radix-ui/react-tooltip';
+import '@radix-ui/react-visually-hidden';
+import { cn } from '../../lib/utils.js';
+
+function Separator({ className, orientation = 'horizontal', decorative = true, ...props }) {
+    return (jsx(SeparatorPrimitive.Root, { className: cn('bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px', className), "data-slot": "separator", decorative: decorative, orientation: orientation, ...props }));
+}
+
+export { Separator };

package/dist/components/ui/spinner.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import { Loader2Icon } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+
+function Spinner({ className, ...props }) {
+    return jsx(Loader2Icon, { "aria-label": "Loading", className: cn('size-4 animate-spin', className), role: "status", ...props });
+}
+
+export { Spinner };

package/dist/components/ui/switch.js

@@ -0,0 +1,43 @@
+import { jsx } from 'react/jsx-runtime';
+import '@radix-ui/react-accessible-icon';
+import '@radix-ui/react-accordion';
+import '@radix-ui/react-alert-dialog';
+import '@radix-ui/react-aspect-ratio';
+import '@radix-ui/react-avatar';
+import '@radix-ui/react-checkbox';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-context-menu';
+import '@radix-ui/react-dialog';
+import '@radix-ui/react-direction';
+import '@radix-ui/react-dropdown-menu';
+import '@radix-ui/react-form';
+import '@radix-ui/react-hover-card';
+import '@radix-ui/react-label';
+import '@radix-ui/react-menubar';
+import '@radix-ui/react-navigation-menu';
+import '@radix-ui/react-one-time-password-field';
+import '@radix-ui/react-password-toggle-field';
+import '@radix-ui/react-popover';
+import '@radix-ui/react-portal';
+import '@radix-ui/react-progress';
+import '@radix-ui/react-radio-group';
+import '@radix-ui/react-scroll-area';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+import '@radix-ui/react-slider';
+import '@radix-ui/react-slot';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import '@radix-ui/react-tabs';
+import '@radix-ui/react-toast';
+import '@radix-ui/react-toggle';
+import '@radix-ui/react-toggle-group';
+import '@radix-ui/react-toolbar';
+import '@radix-ui/react-tooltip';
+import '@radix-ui/react-visually-hidden';
+import { cn } from '../../lib/utils.js';
+
+function Switch({ className, size = 'default', ...props }) {
+    return (jsx(SwitchPrimitive.Root, { className: cn('peer group/switch focus-visible:border-ring focus-visible:ring-ring/50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80 inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6', className), "data-size": size, "data-slot": "switch", ...props, children: jsx(SwitchPrimitive.Thumb, { className: cn('bg-background dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0'), "data-slot": "switch-thumb" }) }));
+}
+
+export { Switch };

package/dist/hooks/useToggle.js

@@ -0,0 +1,17 @@
+import { useState, useCallback } from 'react';
+
+/**
+ * A simple boolean toggle hook.
+ *
+ * @param initial initial value (defaults to false)
+ * @returns an object with the current state and helpers to toggle / set on / set off
+ */
+function useToggle(initial = false) {
+    const [state, setState] = useState(initial);
+    const toggle = useCallback(() => setState((s) => !s), []);
+    const setOn = useCallback(() => setState(true), []);
+    const setOff = useCallback(() => setState(false), []);
+    return { state, toggle, setOn, setOff };
+}
+
+export { useToggle };