tw-react-components 0.0.139 → 0.0.140

package/index.cjs.js

@@ -123,6 +123,19 @@ function getDisplayDate(date, format, locale) {
     return (locale ? dayjs(date).locale(locale) : dayjs(date)).format(format);
 }
 
+function getValueFromCookie(key, _default) {
+    var _a, _b;
+    const transformers = {
+        string: String,
+        boolean: (value) => value === 'true',
+    };
+    return typeof window !== 'undefined'
+        ? transformers[typeof _default]((_b = (_a = document.cookie
+            .split('; ')
+            .find((row) => row.startsWith(key))) === null || _a === void 0 ? void 0 : _a.split('=')[1]) !== null && _b !== void 0 ? _b : _default)
+        : _default;
+}
+
 function isEmpty(s) {
     if (Array.isArray(s))
         return s.length === 0;
@@ -586,10 +599,10 @@ const sizeClassNames = {
     },
 };
 const Button = react.forwardRef((_a, ref) => {
-    var { children, className, size = 'medium', color = 'slate', variant = 'filled', rounded, prefixIcon: PrefixIcon, suffixIcon: SuffixIcon } = _a, props = __rest(_a, ["children", "className", "size", "color", "variant", "rounded", "prefixIcon", "suffixIcon"]);
+    var { children, className, size = 'medium', color = 'slate', variant = 'filled', rounded, prefixIcon: PrefixIcon, suffixIcon: SuffixIcon, unstyled } = _a, props = __rest(_a, ["children", "className", "size", "color", "variant", "rounded", "prefixIcon", "suffixIcon", "unstyled"]);
     return (jsxRuntime.jsxs("button", Object.assign({ className: cn('relative flex aspect-square items-center font-medium duration-200', sizeClassNames[size].base, variantClassNames[variant][color].base, rounded ? 'rounded-full' : 'rounded-md', props.disabled
             ? 'cursor-not-allowed opacity-50'
-            : props.onClick
+            : !unstyled
                 ? `${variantClassNames[variant][color].hover} ${variantClassNames[variant][color].focus} ${variantClassNames[variant][color].active}`
                 : 'cursor-default', children ? `${sizeClassNames[size].withChildren} aspect-[initial]` : 'justify-center', className), type: "button" }, props, { ref: ref, children: [PrefixIcon && (jsxRuntime.jsx(PrefixIcon, { className: children ? sizeClassNames[size].icon.withChildren : sizeClassNames[size].icon.base })), children, SuffixIcon && (jsxRuntime.jsx(SuffixIcon, { className: children ? sizeClassNames[size].icon.withChildren : sizeClassNames[size].icon.base }))] })));
 });
@@ -1794,15 +1807,16 @@ const SidebarContextProvider = react.forwardRef((_a, ref) => {
     const screenRef = react.useRef(document.documentElement);
     // This is the internal state of the sidebar.
     // We use openProp and setOpenProp for control from outside the component.
-    const [_open, _setOpen] = react.useState(defaultOpen);
+    const [_open, _setOpen] = react.useState(getValueFromCookie(SIDEBAR_COOKIE_NAME, defaultOpen));
     const open = openProp !== null && openProp !== void 0 ? openProp : _open;
     const setOpen = react.useCallback((value) => {
         if (setOpenProp) {
             return setOpenProp === null || setOpenProp === void 0 ? void 0 : setOpenProp(typeof value === 'function' ? value(open) : value);
         }
-        _setOpen(value);
+        const newValue = typeof value === 'function' ? value(open) : value;
+        _setOpen(newValue);
         // This sets the cookie to keep the sidebar state.
-        document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${newValue}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
     }, [setOpenProp, open]);
     // Helper to toggle the sidebar.
     const toggleSidebar = react.useCallback(() => {
@@ -1861,7 +1875,7 @@ $Sidebar.displayName = 'Sidebar';
 const SidebarTrigger = react.forwardRef((_a, ref) => {
     var { className, onClick } = _a, props = __rest(_a, ["className", "onClick"]);
     const { toggleSidebar } = useSidebar();
-    return (jsxRuntime.jsx(Button, Object.assign({ ref: ref, "data-sidebar": "trigger", variant: "text", suffixIcon: lucideReact.PanelLeft, className: cn('h-7 w-7', className), onClick: (event) => {
+    return (jsxRuntime.jsx(Button, Object.assign({ ref: ref, "data-sidebar": "trigger", variant: "text", suffixIcon: lucideReact.PanelLeft, className: className, onClick: (event) => {
             onClick === null || onClick === void 0 ? void 0 : onClick(event);
             toggleSidebar();
         } }, props)));
@@ -2035,7 +2049,7 @@ const Sidebar = Object.assign($Sidebar, {
     Trigger: SidebarTrigger,
 });
 
-const Navbar = ({ className, leftSlot, rightSlot }) => (jsxRuntime.jsx(Block, { className: cn('border-b p-3 dark:border-slate-700', className), fullWidth: true, children: jsxRuntime.jsxs(Flex, { align: "center", justify: "between", children: [jsxRuntime.jsxs(Flex, { align: "center", children: [jsxRuntime.jsx(Sidebar.Trigger, {}), leftSlot] }), rightSlot] }) }));
+const Navbar = ({ className, sidebarTriggerClassName, leftSlot, rightSlot, }) => (jsxRuntime.jsx(Block, { className: cn('border-b p-3 dark:border-slate-700', className), fullWidth: true, children: jsxRuntime.jsxs(Flex, { align: "center", justify: "between", children: [jsxRuntime.jsxs(Flex, { align: "center", children: [jsxRuntime.jsx(Sidebar.Trigger, { className: sidebarTriggerClassName }), leftSlot] }), rightSlot] }) }));
 
 const Layout = (_a) => {
     var { children, className } = _a, _b = _a.sidebarProps, { basePath, smallLogo, fullLogo, items } = _b, sidebarProps = __rest(_b, ["basePath", "smallLogo", "fullLogo", "items"]), { navbarProps } = _a;
@@ -2095,26 +2109,37 @@ const Tabs = Object.assign($Tabs, {
 });
 
 const LayoutContext = react.createContext(undefined);
+const THEME_MEDIA_QUERY = '(prefers-color-scheme: dark)';
+const THEME_COOKIE_NAME = 'theme:state';
+const THEME_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 const LayoutContextProvider = ({ children }) => {
-    const [theme, setTheme] = react.useState(getValueFromLocalStorage(THEME_KEY, 'light'));
+    const [theme, _setTheme] = react.useState(getValueFromCookie(THEME_COOKIE_NAME, 'system'));
+    const [resolvedTheme, setResolvedTheme] = react.useState(() => theme === 'system' ? getSystemTheme() : theme);
     react.useEffect(() => {
-        if (theme) {
-            if (theme === 'dark') {
-                document.documentElement.classList.add('dark');
-            }
-            else {
-                document.documentElement.classList.remove('dark');
-            }
+        if (resolvedTheme === 'dark') {
+            document.documentElement.classList.add('dark');
+        }
+        else {
+            document.documentElement.classList.remove('dark');
+        }
+    }, [resolvedTheme]);
+    react.useEffect(() => {
+        if (theme !== 'system') {
+            setResolvedTheme(theme);
+            return;
         }
+        setResolvedTheme(getSystemTheme());
+        const handleMediaQuery = (e) => setResolvedTheme(getSystemTheme(e));
+        const mediaQuery = window.matchMedia(THEME_MEDIA_QUERY);
+        mediaQuery.addEventListener('change', handleMediaQuery);
+        return () => mediaQuery.removeEventListener('change', handleMediaQuery);
     }, [theme]);
-    const toggleTheme = () => {
-        setTheme((theme) => {
-            const newValue = theme === 'dark' ? 'light' : 'dark';
-            window.localStorage.setItem(THEME_KEY, newValue);
-            return newValue;
-        });
+    const setTheme = (theme) => {
+        _setTheme(theme);
+        // This sets the cookie to keep the theme state.
+        document.cookie = `${THEME_COOKIE_NAME}=${theme}; path=/; max-age=${THEME_COOKIE_MAX_AGE}`;
     };
-    return jsxRuntime.jsx(LayoutContext.Provider, { value: { theme, toggleTheme }, children: children });
+    return (jsxRuntime.jsx(LayoutContext.Provider, { value: { theme, resolvedTheme, setTheme }, children: children }));
 };
 function useLayoutContext() {
     const context = react.useContext(LayoutContext);
@@ -2123,24 +2148,15 @@ function useLayoutContext() {
     }
     return context;
 }
-const THEME_KEY = 'tw-react-components__theme';
-function getValueFromLocalStorage(key, _default) {
-    var _a;
-    const transformers = {
-        string: String,
-        boolean: (value) => value === 'true',
-    };
-    return typeof window !== 'undefined'
-        ? transformers[typeof _default]((_a = window.localStorage.getItem(key)) !== null && _a !== void 0 ? _a : _default)
-        : _default;
+function getSystemTheme(e) {
+    if (!e)
+        e = window.matchMedia(THEME_MEDIA_QUERY);
+    return e.matches ? 'dark' : 'light';
 }
 
-const ThemeSwitcher = ({ className }) => {
-    const { theme, toggleTheme } = useLayoutContext();
-    const darkMode = theme === 'dark';
-    return (jsxRuntime.jsx(Switch, { className: className, checked: darkMode, onCheckedChange: toggleTheme, thumbProps: {
-            children: darkMode ? (jsxRuntime.jsx(lucideReact.MoonIcon, { className: "h-6 w-6 rounded-full bg-slate-900 p-1 text-white" })) : (jsxRuntime.jsx(lucideReact.SunIcon, { className: "h-6 w-6 rounded-full bg-white p-1 text-black" })),
-        } }));
+const ThemeSelector = ({ className }) => {
+    const { resolvedTheme, setTheme } = useLayoutContext();
+    return (jsxRuntime.jsxs(DropdownMenu, { children: [jsxRuntime.jsx(DropdownMenu.Trigger, { asChild: true, children: jsxRuntime.jsx(Button, { prefixIcon: resolvedTheme === 'dark' ? lucideReact.MoonIcon : lucideReact.SunIcon, className: className, variant: "text" }) }), jsxRuntime.jsxs(DropdownMenu.Content, { children: [jsxRuntime.jsxs(DropdownMenu.Item, { onClick: () => setTheme('light'), children: [jsxRuntime.jsx(DropdownMenu.Icon, { icon: lucideReact.SunIcon }), "Light"] }), jsxRuntime.jsxs(DropdownMenu.Item, { onClick: () => setTheme('dark'), children: [jsxRuntime.jsx(DropdownMenu.Icon, { icon: lucideReact.MoonIcon }), "Dark"] }), jsxRuntime.jsxs(DropdownMenu.Item, { onClick: () => setTheme('system'), children: [jsxRuntime.jsx(DropdownMenu.Icon, { icon: lucideReact.MonitorIcon }), "System"] })] })] }));
 };
 
 exports.Badge = Badge;
@@ -2175,6 +2191,12 @@ exports.Pagination = Pagination;
 exports.PasswordInput = PasswordInput;
 exports.PdfViewerDialog = PdfViewerDialog;
 exports.Popover = Popover;
+exports.SIDEBAR_COOKIE_MAX_AGE = SIDEBAR_COOKIE_MAX_AGE;
+exports.SIDEBAR_COOKIE_NAME = SIDEBAR_COOKIE_NAME;
+exports.SIDEBAR_KEYBOARD_SHORTCUT = SIDEBAR_KEYBOARD_SHORTCUT;
+exports.SIDEBAR_WIDTH = SIDEBAR_WIDTH;
+exports.SIDEBAR_WIDTH_ICON = SIDEBAR_WIDTH_ICON;
+exports.SIDEBAR_WIDTH_MOBILE = SIDEBAR_WIDTH_MOBILE;
 exports.SelectInput = SelectInput;
 exports.Separator = Separator;
 exports.Sheet = Sheet;
@@ -2184,17 +2206,20 @@ exports.SidebarContextProvider = SidebarContextProvider;
 exports.Skeleton = Skeleton;
 exports.Spinner = Spinner;
 exports.Switch = Switch;
-exports.THEME_KEY = THEME_KEY;
+exports.THEME_COOKIE_MAX_AGE = THEME_COOKIE_MAX_AGE;
+exports.THEME_COOKIE_NAME = THEME_COOKIE_NAME;
+exports.THEME_MEDIA_QUERY = THEME_MEDIA_QUERY;
 exports.Table = Table;
 exports.Tabs = Tabs;
 exports.TextInput = TextInput;
 exports.TextareaInput = TextareaInput;
-exports.ThemeSwitcher = ThemeSwitcher;
+exports.ThemeSelector = ThemeSelector;
 exports.Tooltip = Tooltip;
 exports.cn = cn;
 exports.compareDates = compareDates;
 exports.generalComparator = generalComparator;
 exports.getDisplayDate = getDisplayDate;
+exports.getValueFromCookie = getValueFromCookie;
 exports.isEmpty = isEmpty;
 exports.mergeRefs = mergeRefs;
 exports.resolveTargetObject = resolveTargetObject;

package/index.esm.js

@@ -4,7 +4,7 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import dayjs from 'dayjs';
 import advancedFormat from 'dayjs/plugin/advancedFormat';
-import { HelpCircle, XIcon, AtSignIcon, EyeIcon, EyeOffIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, CalendarIcon, ClockIcon, CheckIcon, CircleIcon, CloudUploadIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsDownUpIcon, ChevronsUpDownIcon, ArrowUpDownIcon, SortAscIcon, SortDescIcon, MinusIcon, PlusIcon, PanelLeft, MoonIcon, SunIcon } from 'lucide-react';
+import { HelpCircle, XIcon, AtSignIcon, EyeIcon, EyeOffIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, CalendarIcon, ClockIcon, CheckIcon, CircleIcon, CloudUploadIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsDownUpIcon, ChevronsUpDownIcon, ArrowUpDownIcon, SortAscIcon, SortDescIcon, MinusIcon, PlusIcon, PanelLeft, MoonIcon, SunIcon, MonitorIcon } from 'lucide-react';
 import localeData from 'dayjs/plugin/localeData';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
@@ -96,6 +96,19 @@ function getDisplayDate(date, format, locale) {
     return (locale ? dayjs(date).locale(locale) : dayjs(date)).format(format);
 }
 
+function getValueFromCookie(key, _default) {
+    var _a, _b;
+    const transformers = {
+        string: String,
+        boolean: (value) => value === 'true',
+    };
+    return typeof window !== 'undefined'
+        ? transformers[typeof _default]((_b = (_a = document.cookie
+            .split('; ')
+            .find((row) => row.startsWith(key))) === null || _a === void 0 ? void 0 : _a.split('=')[1]) !== null && _b !== void 0 ? _b : _default)
+        : _default;
+}
+
 function isEmpty(s) {
     if (Array.isArray(s))
         return s.length === 0;
@@ -559,10 +572,10 @@ const sizeClassNames = {
     },
 };
 const Button = forwardRef((_a, ref) => {
-    var { children, className, size = 'medium', color = 'slate', variant = 'filled', rounded, prefixIcon: PrefixIcon, suffixIcon: SuffixIcon } = _a, props = __rest(_a, ["children", "className", "size", "color", "variant", "rounded", "prefixIcon", "suffixIcon"]);
+    var { children, className, size = 'medium', color = 'slate', variant = 'filled', rounded, prefixIcon: PrefixIcon, suffixIcon: SuffixIcon, unstyled } = _a, props = __rest(_a, ["children", "className", "size", "color", "variant", "rounded", "prefixIcon", "suffixIcon", "unstyled"]);
     return (jsxs("button", Object.assign({ className: cn('relative flex aspect-square items-center font-medium duration-200', sizeClassNames[size].base, variantClassNames[variant][color].base, rounded ? 'rounded-full' : 'rounded-md', props.disabled
             ? 'cursor-not-allowed opacity-50'
-            : props.onClick
+            : !unstyled
                 ? `${variantClassNames[variant][color].hover} ${variantClassNames[variant][color].focus} ${variantClassNames[variant][color].active}`
                 : 'cursor-default', children ? `${sizeClassNames[size].withChildren} aspect-[initial]` : 'justify-center', className), type: "button" }, props, { ref: ref, children: [PrefixIcon && (jsx(PrefixIcon, { className: children ? sizeClassNames[size].icon.withChildren : sizeClassNames[size].icon.base })), children, SuffixIcon && (jsx(SuffixIcon, { className: children ? sizeClassNames[size].icon.withChildren : sizeClassNames[size].icon.base }))] })));
 });
@@ -1767,15 +1780,16 @@ const SidebarContextProvider = forwardRef((_a, ref) => {
     const screenRef = useRef(document.documentElement);
     // This is the internal state of the sidebar.
     // We use openProp and setOpenProp for control from outside the component.
-    const [_open, _setOpen] = useState(defaultOpen);
+    const [_open, _setOpen] = useState(getValueFromCookie(SIDEBAR_COOKIE_NAME, defaultOpen));
     const open = openProp !== null && openProp !== void 0 ? openProp : _open;
     const setOpen = useCallback((value) => {
         if (setOpenProp) {
             return setOpenProp === null || setOpenProp === void 0 ? void 0 : setOpenProp(typeof value === 'function' ? value(open) : value);
         }
-        _setOpen(value);
+        const newValue = typeof value === 'function' ? value(open) : value;
+        _setOpen(newValue);
         // This sets the cookie to keep the sidebar state.
-        document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${newValue}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
     }, [setOpenProp, open]);
     // Helper to toggle the sidebar.
     const toggleSidebar = useCallback(() => {
@@ -1834,7 +1848,7 @@ $Sidebar.displayName = 'Sidebar';
 const SidebarTrigger = forwardRef((_a, ref) => {
     var { className, onClick } = _a, props = __rest(_a, ["className", "onClick"]);
     const { toggleSidebar } = useSidebar();
-    return (jsx(Button, Object.assign({ ref: ref, "data-sidebar": "trigger", variant: "text", suffixIcon: PanelLeft, className: cn('h-7 w-7', className), onClick: (event) => {
+    return (jsx(Button, Object.assign({ ref: ref, "data-sidebar": "trigger", variant: "text", suffixIcon: PanelLeft, className: className, onClick: (event) => {
             onClick === null || onClick === void 0 ? void 0 : onClick(event);
             toggleSidebar();
         } }, props)));
@@ -2008,7 +2022,7 @@ const Sidebar = Object.assign($Sidebar, {
     Trigger: SidebarTrigger,
 });
 
-const Navbar = ({ className, leftSlot, rightSlot }) => (jsx(Block, { className: cn('border-b p-3 dark:border-slate-700', className), fullWidth: true, children: jsxs(Flex, { align: "center", justify: "between", children: [jsxs(Flex, { align: "center", children: [jsx(Sidebar.Trigger, {}), leftSlot] }), rightSlot] }) }));
+const Navbar = ({ className, sidebarTriggerClassName, leftSlot, rightSlot, }) => (jsx(Block, { className: cn('border-b p-3 dark:border-slate-700', className), fullWidth: true, children: jsxs(Flex, { align: "center", justify: "between", children: [jsxs(Flex, { align: "center", children: [jsx(Sidebar.Trigger, { className: sidebarTriggerClassName }), leftSlot] }), rightSlot] }) }));
 
 const Layout = (_a) => {
     var { children, className } = _a, _b = _a.sidebarProps, { basePath, smallLogo, fullLogo, items } = _b, sidebarProps = __rest(_b, ["basePath", "smallLogo", "fullLogo", "items"]), { navbarProps } = _a;
@@ -2068,26 +2082,37 @@ const Tabs = Object.assign($Tabs, {
 });
 
 const LayoutContext = createContext(undefined);
+const THEME_MEDIA_QUERY = '(prefers-color-scheme: dark)';
+const THEME_COOKIE_NAME = 'theme:state';
+const THEME_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 const LayoutContextProvider = ({ children }) => {
-    const [theme, setTheme] = useState(getValueFromLocalStorage(THEME_KEY, 'light'));
+    const [theme, _setTheme] = useState(getValueFromCookie(THEME_COOKIE_NAME, 'system'));
+    const [resolvedTheme, setResolvedTheme] = useState(() => theme === 'system' ? getSystemTheme() : theme);
     useEffect(() => {
-        if (theme) {
-            if (theme === 'dark') {
-                document.documentElement.classList.add('dark');
-            }
-            else {
-                document.documentElement.classList.remove('dark');
-            }
+        if (resolvedTheme === 'dark') {
+            document.documentElement.classList.add('dark');
+        }
+        else {
+            document.documentElement.classList.remove('dark');
+        }
+    }, [resolvedTheme]);
+    useEffect(() => {
+        if (theme !== 'system') {
+            setResolvedTheme(theme);
+            return;
         }
+        setResolvedTheme(getSystemTheme());
+        const handleMediaQuery = (e) => setResolvedTheme(getSystemTheme(e));
+        const mediaQuery = window.matchMedia(THEME_MEDIA_QUERY);
+        mediaQuery.addEventListener('change', handleMediaQuery);
+        return () => mediaQuery.removeEventListener('change', handleMediaQuery);
     }, [theme]);
-    const toggleTheme = () => {
-        setTheme((theme) => {
-            const newValue = theme === 'dark' ? 'light' : 'dark';
-            window.localStorage.setItem(THEME_KEY, newValue);
-            return newValue;
-        });
+    const setTheme = (theme) => {
+        _setTheme(theme);
+        // This sets the cookie to keep the theme state.
+        document.cookie = `${THEME_COOKIE_NAME}=${theme}; path=/; max-age=${THEME_COOKIE_MAX_AGE}`;
     };
-    return jsx(LayoutContext.Provider, { value: { theme, toggleTheme }, children: children });
+    return (jsx(LayoutContext.Provider, { value: { theme, resolvedTheme, setTheme }, children: children }));
 };
 function useLayoutContext() {
     const context = useContext(LayoutContext);
@@ -2096,24 +2121,15 @@ function useLayoutContext() {
     }
     return context;
 }
-const THEME_KEY = 'tw-react-components__theme';
-function getValueFromLocalStorage(key, _default) {
-    var _a;
-    const transformers = {
-        string: String,
-        boolean: (value) => value === 'true',
-    };
-    return typeof window !== 'undefined'
-        ? transformers[typeof _default]((_a = window.localStorage.getItem(key)) !== null && _a !== void 0 ? _a : _default)
-        : _default;
+function getSystemTheme(e) {
+    if (!e)
+        e = window.matchMedia(THEME_MEDIA_QUERY);
+    return e.matches ? 'dark' : 'light';
 }
 
-const ThemeSwitcher = ({ className }) => {
-    const { theme, toggleTheme } = useLayoutContext();
-    const darkMode = theme === 'dark';
-    return (jsx(Switch, { className: className, checked: darkMode, onCheckedChange: toggleTheme, thumbProps: {
-            children: darkMode ? (jsx(MoonIcon, { className: "h-6 w-6 rounded-full bg-slate-900 p-1 text-white" })) : (jsx(SunIcon, { className: "h-6 w-6 rounded-full bg-white p-1 text-black" })),
-        } }));
+const ThemeSelector = ({ className }) => {
+    const { resolvedTheme, setTheme } = useLayoutContext();
+    return (jsxs(DropdownMenu, { children: [jsx(DropdownMenu.Trigger, { asChild: true, children: jsx(Button, { prefixIcon: resolvedTheme === 'dark' ? MoonIcon : SunIcon, className: className, variant: "text" }) }), jsxs(DropdownMenu.Content, { children: [jsxs(DropdownMenu.Item, { onClick: () => setTheme('light'), children: [jsx(DropdownMenu.Icon, { icon: SunIcon }), "Light"] }), jsxs(DropdownMenu.Item, { onClick: () => setTheme('dark'), children: [jsx(DropdownMenu.Icon, { icon: MoonIcon }), "Dark"] }), jsxs(DropdownMenu.Item, { onClick: () => setTheme('system'), children: [jsx(DropdownMenu.Icon, { icon: MonitorIcon }), "System"] })] })] }));
 };
 
-export { Badge, BasicInput, BasicInputExtension, Block, Button, Card, CheckboxInput, ConfirmDialog, DataTable, DateTimeInput, Dialog, DropdownMenu, EmailInput, FileInput, Flex, FormDialog, FormGroup, FormInputs, Hint, Label, Layout, LayoutContext, LayoutContextProvider, List, ListSorter, ListSorterDialog, Navbar, NumberInput, Pagination, PasswordInput, PdfViewerDialog, Popover, SelectInput, Separator, Sheet, Sidebar, SidebarContext, SidebarContextProvider, Skeleton, Spinner, Switch, THEME_KEY, Table, Tabs, TextInput, TextareaInput, ThemeSwitcher, Tooltip, cn, compareDates, generalComparator, getDisplayDate, isEmpty, mergeRefs, resolveTargetObject, useDays, useIsMobile, useLayoutContext, useLongPress, useMonths, useOnSwipe, useOutsideClick, usePagination, useSidebar };
+export { Badge, BasicInput, BasicInputExtension, Block, Button, Card, CheckboxInput, ConfirmDialog, DataTable, DateTimeInput, Dialog, DropdownMenu, EmailInput, FileInput, Flex, FormDialog, FormGroup, FormInputs, Hint, Label, Layout, LayoutContext, LayoutContextProvider, List, ListSorter, ListSorterDialog, Navbar, NumberInput, Pagination, PasswordInput, PdfViewerDialog, Popover, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SIDEBAR_WIDTH_MOBILE, SelectInput, Separator, Sheet, Sidebar, SidebarContext, SidebarContextProvider, Skeleton, Spinner, Switch, THEME_COOKIE_MAX_AGE, THEME_COOKIE_NAME, THEME_MEDIA_QUERY, Table, Tabs, TextInput, TextareaInput, ThemeSelector, Tooltip, cn, compareDates, generalComparator, getDisplayDate, getValueFromCookie, isEmpty, mergeRefs, resolveTargetObject, useDays, useIsMobile, useLayoutContext, useLongPress, useMonths, useOnSwipe, useOutsideClick, usePagination, useSidebar };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tw-react-components",
   "description": "A set of React components build with TailwindCSS to make a nice dashboard.",
-  "version": "0.0.139",
+  "version": "0.0.140",
   "license": "MIT",
   "homepage": "https://bacali95.github.io/tw-react-components",
   "author": {

package/src/components/Button/index.d.ts

@@ -9,6 +9,7 @@ export type ButtonProps = PropsWithoutRef<ComponentProps<'button'>> & {
     rounded?: boolean;
     prefixIcon?: LucideIcon;
     suffixIcon?: LucideIcon;
+    unstyled?: boolean;
 };
 export declare const Button: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     size?: Size;
@@ -17,4 +18,5 @@ export declare const Button: import("react").ForwardRefExoticComponent<Omit<impo
     rounded?: boolean;
     prefixIcon?: LucideIcon;
     suffixIcon?: LucideIcon;
+    unstyled?: boolean;
 } & import("react").RefAttributes<HTMLButtonElement>>;

package/src/components/Navbar/index.d.ts

@@ -1,6 +1,7 @@
 import { FC, ReactNode } from 'react';
 export type NavbarProps = {
     className?: string;
+    sidebarTriggerClassName?: string;
     leftSlot?: ReactNode;
     rightSlot?: ReactNode;
 };

package/src/components/Sidebar/index.d.ts

@@ -1,6 +1,12 @@
 import { type VariantProps } from 'class-variance-authority';
 import { ComponentProps } from 'react';
 import { Tooltip } from '../Tooltip';
+export declare const SIDEBAR_COOKIE_NAME = "sidebar:state";
+export declare const SIDEBAR_COOKIE_MAX_AGE: number;
+export declare const SIDEBAR_WIDTH = "16rem";
+export declare const SIDEBAR_WIDTH_MOBILE = "18rem";
+export declare const SIDEBAR_WIDTH_ICON = "3rem";
+export declare const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 export type SidebarContext = {
     state: 'expanded' | 'collapsed';
     open: boolean;
@@ -81,5 +87,6 @@ export declare const Sidebar: import("react").ForwardRefExoticComponent<Omit<imp
         rounded?: boolean;
         prefixIcon?: import("lucide-react").LucideIcon;
         suffixIcon?: import("lucide-react").LucideIcon;
+        unstyled?: boolean;
     } & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 };

package/src/components/{ThemeSwitcher → ThemeSelector}/index.d.ts

@@ -2,5 +2,5 @@ import { FC } from 'react';
 type Props = {
     className?: string;
 };
-export declare const ThemeSwitcher: FC<Props>;
+export declare const ThemeSelector: FC<Props>;
 export {};

package/src/components/index.d.ts

@@ -22,6 +22,6 @@ export * from './Spinner';
 export * from './Switch';
 export * from './Table';
 export * from './Tabs';
-export * from './ThemeSwitcher';
+export * from './ThemeSelector';
 export * from './Tooltip';
 export * from './types';

package/src/contexts/LayoutContext.d.ts

@@ -1,10 +1,13 @@
 import { FC, PropsWithChildren } from 'react';
+export type ThemeState = 'dark' | 'light' | 'system';
 export type LayoutContext = {
     theme: ThemeState;
-    toggleTheme: () => void;
+    resolvedTheme: Exclude<ThemeState, 'system'>;
+    setTheme: (theme: ThemeState) => void;
 };
 export declare const LayoutContext: import("react").Context<LayoutContext | undefined>;
+export declare const THEME_MEDIA_QUERY = "(prefers-color-scheme: dark)";
+export declare const THEME_COOKIE_NAME = "theme:state";
+export declare const THEME_COOKIE_MAX_AGE: number;
 export declare const LayoutContextProvider: FC<PropsWithChildren>;
 export declare function useLayoutContext(): LayoutContext;
-export type ThemeState = 'dark' | 'light';
-export declare const THEME_KEY = "tw-react-components__theme";

package/src/helpers/getValueFromCookie.d.ts

@@ -0,0 +1 @@
+export declare function getValueFromCookie<T extends string | boolean>(key: string, _default: T): T;

package/src/helpers/index.d.ts

@@ -2,6 +2,7 @@ export * from './cn';
 export * from './compareDates';
 export * from './generalComparator';
 export * from './getDisplayDate';
+export * from './getValueFromCookie';
 export * from './isEmpty';
 export * from './mergeRefs';
 export * from './resolveTargetObject';