@khanhminh/design-system 1.13.0 → 1.14.0

package/dist/index.cjs

@@ -1,11 +1,34 @@
 'use strict';
 
 var React = require('react');
-var classVarianceAuthority = require('class-variance-authority');
-var radixUi = require('radix-ui');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var lucideReact = require('lucide-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] = React.useState(initial);
+    const toggle = React.useCallback(() => setState((s) => !s), []);
+    const setOn = React.useCallback(() => setState(true), []);
+    const setOff = React.useCallback(() => setState(false), []);
+    return { state, toggle, setOn, setOff };
+}
+
+function cn(...inputs) {
+    return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+
+const applyTheme = (theme) => {
+    const root = window.document.documentElement;
+    const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const resolvedTheme = theme === 'system' ? (systemDark ? 'dark' : 'light') : theme;
+    root.classList.remove('light', 'dark');
+    root.classList.add(resolvedTheme);
+};
 
 var jsxRuntime = {exports: {}};
 
@@ -421,126 +444,6 @@ if (process.env.NODE_ENV === 'production') {
 
 var jsxRuntimeExports = jsxRuntime.exports;
 
-function cn(...inputs) {
-    return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
-
-const buttonVariants = classVarianceAuthority.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$1({ className, variant = 'default', size = 'default', asChild = false, ...props }) {
-    const Comp = asChild ? radixUi.Slot.Root : 'button';
-    return (jsxRuntimeExports.jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), "data-size": size, "data-slot": "button", "data-variant": variant, ...props }));
-}
-
-const Button = (props) => {
-    return jsxRuntimeExports.jsx(Button$1, { ...props });
-};
-
-function Input$1({ className, type, ...props }) {
-    return (jsxRuntimeExports.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 }));
-}
-
-const Input = (props) => {
-    return jsxRuntimeExports.jsx(Input$1, { ...props });
-};
-
-function Spinner$1({ className, ...props }) {
-    return jsxRuntimeExports.jsx(lucideReact.Loader2Icon, { "aria-label": "Loading", className: cn('size-4 animate-spin', className), role: "status", ...props });
-}
-
-const Spinner = (props) => {
-    return jsxRuntimeExports.jsx(Spinner$1, { ...props });
-};
-
-function Checkbox$1({ className, ...props }) {
-    return (jsxRuntimeExports.jsx(radixUi.Checkbox.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: jsxRuntimeExports.jsx(radixUi.Checkbox.Indicator, { className: "grid place-content-center text-current transition-none", "data-slot": "checkbox-indicator", children: jsxRuntimeExports.jsx(lucideReact.CheckIcon, { className: "size-3.5" }) }) }));
-}
-
-const Checkbox = (props) => {
-    return jsxRuntimeExports.jsx(Checkbox$1, { ...props });
-};
-
-function Label$1({ className, ...props }) {
-    return (jsxRuntimeExports.jsx(radixUi.Label.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 }));
-}
-
-const Label = (props) => {
-    return jsxRuntimeExports.jsx(Label$1, { ...props });
-};
-
-function Separator$1({ className, orientation = 'horizontal', decorative = true, ...props }) {
-    return (jsxRuntimeExports.jsx(radixUi.Separator.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 }));
-}
-
-const Separator = (props) => {
-    return jsxRuntimeExports.jsx(Separator$1, { ...props });
-};
-
-function Switch$1({ className, size = 'default', ...props }) {
-    return (jsxRuntimeExports.jsx(radixUi.Switch.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: jsxRuntimeExports.jsx(radixUi.Switch.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" }) }));
-}
-
-const Switch = ({ id, label, ...props }) => {
-    return (jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-2", children: [jsxRuntimeExports.jsx(Switch$1, { "data-slot": "switch", id: id, ...props }), jsxRuntimeExports.jsx(Label, { "data-slot": "label", htmlFor: id, children: label })] }));
-};
-
-function ScrollArea$1({ className, children, ...props }) {
-    return (jsxRuntimeExports.jsxs(radixUi.ScrollArea.Root, { className: cn('relative', className), "data-slot": "scroll-area", ...props, children: [jsxRuntimeExports.jsx(radixUi.ScrollArea.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 }), jsxRuntimeExports.jsx(ScrollBar, {}), jsxRuntimeExports.jsx(radixUi.ScrollArea.Corner, {})] }));
-}
-function ScrollBar({ className, orientation = 'vertical', ...props }) {
-    return (jsxRuntimeExports.jsx(radixUi.ScrollArea.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: jsxRuntimeExports.jsx(radixUi.ScrollArea.ScrollAreaThumb, { className: "bg-border relative flex-1 rounded-full", "data-slot": "scroll-area-thumb" }) }));
-}
-
-const ScrollArea = ({ children, orientation = 'horizontal', className, ...props }) => {
-    return (jsxRuntimeExports.jsxs(ScrollArea$1, { className: className, "data-slot": "scroll-area", ...props, children: [jsxRuntimeExports.jsx("div", { "data-slot": "scroll-area-viewport", children: children }), jsxRuntimeExports.jsx("div", { "data-slot": "scroll-area-scrollbar", children: jsxRuntimeExports.jsx(ScrollBar, { orientation: orientation }) })] }));
-};
-
-/**
- * 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] = React.useState(initial);
-    const toggle = React.useCallback(() => setState((s) => !s), []);
-    const setOn = React.useCallback(() => setState(true), []);
-    const setOff = React.useCallback(() => setState(false), []);
-    return { state, toggle, setOn, setOff };
-}
-
-const applyTheme = (theme) => {
-    const root = window.document.documentElement;
-    const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    const resolvedTheme = theme === 'system' ? (systemDark ? 'dark' : 'light') : theme;
-    root.classList.remove('light', 'dark');
-    root.classList.add(resolvedTheme);
-};
-
 const createStoreImpl = (createState) => {
   let state;
   const listeners = /* @__PURE__ */ new Set();
@@ -606,14 +509,6 @@ function ThemeProvider({ children }) {
     return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: children });
 }
 
-exports.Button = Button;
-exports.Checkbox = Checkbox;
-exports.Input = Input;
-exports.Label = Label;
-exports.ScrollArea = ScrollArea;
-exports.Separator = Separator;
-exports.Spinner = Spinner;
-exports.Switch = Switch;
 exports.ThemeProvider = ThemeProvider;
 exports.applyTheme = applyTheme;
 exports.cn = cn;

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-export * from './components';
 export * from './hooks';
 export * from './lib';
 export * from './providers';

package/dist/index.js

@@ -1,9 +1,32 @@
 import React, { useState, useCallback, useEffect } from 'react';
-import { cva } from 'class-variance-authority';
-import { Slot, Checkbox as Checkbox$2, Label as Label$2, Separator as Separator$2, Switch as Switch$2, ScrollArea as ScrollArea$2 } from 'radix-ui';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { Loader2Icon, CheckIcon } from 'lucide-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 };
+}
+
+function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+
+const applyTheme = (theme) => {
+    const root = window.document.documentElement;
+    const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const resolvedTheme = theme === 'system' ? (systemDark ? 'dark' : 'light') : theme;
+    root.classList.remove('light', 'dark');
+    root.classList.add(resolvedTheme);
+};
 
 var jsxRuntime = {exports: {}};
 
@@ -419,126 +442,6 @@ if (process.env.NODE_ENV === 'production') {
 
 var jsxRuntimeExports = jsxRuntime.exports;
 
-function cn(...inputs) {
-    return twMerge(clsx(inputs));
-}
-
-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$1({ className, variant = 'default', size = 'default', asChild = false, ...props }) {
-    const Comp = asChild ? Slot.Root : 'button';
-    return (jsxRuntimeExports.jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), "data-size": size, "data-slot": "button", "data-variant": variant, ...props }));
-}
-
-const Button = (props) => {
-    return jsxRuntimeExports.jsx(Button$1, { ...props });
-};
-
-function Input$1({ className, type, ...props }) {
-    return (jsxRuntimeExports.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 }));
-}
-
-const Input = (props) => {
-    return jsxRuntimeExports.jsx(Input$1, { ...props });
-};
-
-function Spinner$1({ className, ...props }) {
-    return jsxRuntimeExports.jsx(Loader2Icon, { "aria-label": "Loading", className: cn('size-4 animate-spin', className), role: "status", ...props });
-}
-
-const Spinner = (props) => {
-    return jsxRuntimeExports.jsx(Spinner$1, { ...props });
-};
-
-function Checkbox$1({ className, ...props }) {
-    return (jsxRuntimeExports.jsx(Checkbox$2.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: jsxRuntimeExports.jsx(Checkbox$2.Indicator, { className: "grid place-content-center text-current transition-none", "data-slot": "checkbox-indicator", children: jsxRuntimeExports.jsx(CheckIcon, { className: "size-3.5" }) }) }));
-}
-
-const Checkbox = (props) => {
-    return jsxRuntimeExports.jsx(Checkbox$1, { ...props });
-};
-
-function Label$1({ className, ...props }) {
-    return (jsxRuntimeExports.jsx(Label$2.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 }));
-}
-
-const Label = (props) => {
-    return jsxRuntimeExports.jsx(Label$1, { ...props });
-};
-
-function Separator$1({ className, orientation = 'horizontal', decorative = true, ...props }) {
-    return (jsxRuntimeExports.jsx(Separator$2.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 }));
-}
-
-const Separator = (props) => {
-    return jsxRuntimeExports.jsx(Separator$1, { ...props });
-};
-
-function Switch$1({ className, size = 'default', ...props }) {
-    return (jsxRuntimeExports.jsx(Switch$2.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: jsxRuntimeExports.jsx(Switch$2.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" }) }));
-}
-
-const Switch = ({ id, label, ...props }) => {
-    return (jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-2", children: [jsxRuntimeExports.jsx(Switch$1, { "data-slot": "switch", id: id, ...props }), jsxRuntimeExports.jsx(Label, { "data-slot": "label", htmlFor: id, children: label })] }));
-};
-
-function ScrollArea$1({ className, children, ...props }) {
-    return (jsxRuntimeExports.jsxs(ScrollArea$2.Root, { className: cn('relative', className), "data-slot": "scroll-area", ...props, children: [jsxRuntimeExports.jsx(ScrollArea$2.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 }), jsxRuntimeExports.jsx(ScrollBar, {}), jsxRuntimeExports.jsx(ScrollArea$2.Corner, {})] }));
-}
-function ScrollBar({ className, orientation = 'vertical', ...props }) {
-    return (jsxRuntimeExports.jsx(ScrollArea$2.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: jsxRuntimeExports.jsx(ScrollArea$2.ScrollAreaThumb, { className: "bg-border relative flex-1 rounded-full", "data-slot": "scroll-area-thumb" }) }));
-}
-
-const ScrollArea = ({ children, orientation = 'horizontal', className, ...props }) => {
-    return (jsxRuntimeExports.jsxs(ScrollArea$1, { className: className, "data-slot": "scroll-area", ...props, children: [jsxRuntimeExports.jsx("div", { "data-slot": "scroll-area-viewport", children: children }), jsxRuntimeExports.jsx("div", { "data-slot": "scroll-area-scrollbar", children: jsxRuntimeExports.jsx(ScrollBar, { orientation: orientation }) })] }));
-};
-
-/**
- * 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 };
-}
-
-const applyTheme = (theme) => {
-    const root = window.document.documentElement;
-    const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    const resolvedTheme = theme === 'system' ? (systemDark ? 'dark' : 'light') : theme;
-    root.classList.remove('light', 'dark');
-    root.classList.add(resolvedTheme);
-};
-
 const createStoreImpl = (createState) => {
   let state;
   const listeners = /* @__PURE__ */ new Set();
@@ -604,4 +507,4 @@ function ThemeProvider({ children }) {
     return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: children });
 }
 
-export { Button, Checkbox, Input, Label, ScrollArea, Separator, Spinner, Switch, ThemeProvider, applyTheme, cn, useThemeStore, useToggle };
+export { ThemeProvider, applyTheme, cn, useThemeStore, useToggle };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@khanhminh/design-system",
   "description": "A reusable React component library built with TypeScript, Tailwind CSS, and Radix UI",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "type": "module",
   "private": false,
   "main": "dist/index.cjs",
@@ -11,7 +11,10 @@
   "exports": {
     ".": {
       "import": "./dist/index.js",
-      "require": "./dist/index.cjs",
+      "require": "./dist/index.cjs"
+    },
+    "./components": {
+      "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
     "./package.json": "./package.json",