tw-react-components 0.0.138 → 0.0.140

package/index.css

@@ -13,8 +13,8 @@
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 47.4% 11.2%;
 
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
+    --border: 220 13% 91%;
+    --input: 220 13% 91%;
 
     --card: 0 0% 100%;
     --card-foreground: 222.2 47.4% 11.2%;
@@ -58,8 +58,8 @@
     --popover: 224 71% 4%;
     --popover-foreground: 215 20.2% 65.1%;
 
-    --border: 216 34% 17%;
-    --input: 216 34% 17%;
+    --border: 215 25% 27%;
+    --input: 215 25% 27%;
 
     --card: 224 71% 4%;
     --card-foreground: 213 31% 91%;
@@ -92,6 +92,7 @@
   * {
     @apply border-border;
   }
+
   body {
     @apply bg-background text-foreground;
     font-feature-settings:

package/index.esm.js

@@ -1,23 +1,22 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import * as React from 'react';
 import { forwardRef, useMemo, useState, useEffect, useId, useCallback, useRef, createContext, useContext } from 'react';
 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, X, 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';
 import { useFormContext, Controller, FormProvider } from 'react-hook-form';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { cva } from 'class-variance-authority';
 import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter } from '@dnd-kit/core';
 import { restrictToFirstScrollableAncestor } from '@dnd-kit/modifiers';
 import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { Link, useLocation } from 'react-router-dom';
 import { Slot } from '@radix-ui/react-slot';
-import { cva } from 'class-variance-authority';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
@@ -97,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;
@@ -560,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 }))] })));
 });
@@ -1571,18 +1583,19 @@ const ExpandButton = ({ folded, foldComponent, unfoldComponent, onClick, }) => {
     return (jsx(Icon, { className: "h-6 w-6 cursor-pointer rounded p-1 hover:bg-slate-300 hover:dark:bg-slate-600", onClick: onClick }));
 };
 
-const $Dialog = DialogPrimitive.Root;
+const $Dialog = (props) => (jsx(DialogPrimitive.Root, Object.assign({}, props)));
+$Dialog.displayName = DialogPrimitive.Root.displayName;
 const DialogTrigger = DialogPrimitive.Trigger;
 const DialogPortal = DialogPrimitive.Portal;
 const DialogClose = DialogPrimitive.Close;
 const DialogOverlay = forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx(DialogPrimitive.Overlay, Object.assign({ ref: ref, className: cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 backdrop-blur-sm', className) }, props)));
+    return (jsx(DialogPrimitive.Overlay, Object.assign({ ref: ref, className: cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', className) }, props)));
 });
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 const DialogContent = forwardRef((_a, ref) => {
     var { className, fullScreen, children } = _a, props = __rest(_a, ["className", "fullScreen", "children"]);
-    return (jsxs(DialogPortal, { children: [jsx(DialogOverlay, {}), jsxs(DialogPrimitive.Content, Object.assign({ ref: ref, className: cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]', 'fixed left-[50%] top-[50%] z-50 flex w-full max-w-lg translate-x-[-50%] translate-y-[-50%] flex-col gap-3 rounded-lg border bg-white p-3 shadow-md duration-200 xl:gap-4 xl:p-4 dark:border-slate-700 dark:bg-slate-900 dark:text-white', className, fullScreen && 'h-full max-h-none w-full max-w-none rounded-none') }, props, { children: [children, jsx(DialogPrimitive.Close, { className: "!absolute right-1 top-1 opacity-70 ring-offset-white transition-opacity hover:opacity-100 disabled:pointer-events-none xl:right-2 xl:top-2", asChild: true, children: jsx(Button, { prefixIcon: XIcon, size: "small", variant: "text" }) })] }))] }));
+    return (jsxs(DialogPortal, { children: [jsx(DialogOverlay, {}), jsxs(DialogPrimitive.Content, Object.assign({ ref: ref, className: cn('bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]', 'fixed left-[50%] top-[50%] z-50 flex max-h-[95dvh] w-full max-w-lg translate-x-[-50%] translate-y-[-50%] flex-col gap-4 rounded-lg border p-4 shadow-lg duration-200', className, fullScreen && 'h-full max-h-none w-full max-w-none rounded-none'), "aria-describedby": "dialog-content" }, props, { children: [children, jsx(DialogPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-2 top-2 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none", asChild: true, children: jsx(Button, { prefixIcon: XIcon, size: "small", variant: "text" }) }), jsx(DialogPrimitive.Description, { className: "hidden" })] }))] }));
 });
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 const DialogHeader = (_a) => {
@@ -1597,12 +1610,12 @@ const DialogFooter = (_a) => {
 DialogFooter.displayName = 'DialogFooter';
 const DialogTitle = forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx(DialogPrimitive.Title, Object.assign({ ref: ref, className: cn('text-lg font-semibold leading-none tracking-tight', className) }, props)));
+    return (jsx(DialogPrimitive.Title, Object.assign({ ref: ref, className: cn('text-foreground text-lg font-semibold', className) }, props)));
 });
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
 const DialogDescription = forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx(DialogPrimitive.Description, Object.assign({ ref: ref, className: cn('text-sm text-slate-600 dark:text-slate-400', className) }, props)));
+    return (jsx(DialogPrimitive.Description, Object.assign({ ref: ref, className: cn('text-muted-foreground text-sm', className) }, props)));
 });
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 const Dialog = Object.assign($Dialog, {
@@ -1617,9 +1630,69 @@ const Dialog = Object.assign($Dialog, {
     Description: DialogDescription,
 });
 
-const ConfirmDialog = ({ open, title, children, yesLabel, noLabel, onConfirm, onClose, }) => (jsx(Dialog, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxs(Dialog.Content, { onPointerDownOutside: (event) => event.preventDefault(), children: [jsx(Dialog.Header, { children: jsx(Dialog.Title, { children: title }) }), children, jsxs(Dialog.Footer, { children: [jsx(Dialog.Close, { asChild: true, children: jsx(Button, { color: "red", children: noLabel !== null && noLabel !== void 0 ? noLabel : 'No' }) }), jsx(Dialog.Close, { asChild: true, children: jsx(Button, { color: "green", onClick: onConfirm, children: yesLabel !== null && yesLabel !== void 0 ? yesLabel : 'Yes' }) })] })] }) }));
+const ConfirmDialog = ({ open, title, children, yesLabel, noLabel, onConfirm, onClose, }) => (jsx(Dialog, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxs(Dialog.Content, { children: [jsx(Dialog.Header, { children: jsx(Dialog.Title, { children: title }) }), children, jsxs(Dialog.Footer, { children: [jsx(Dialog.Close, { asChild: true, children: jsx(Button, { color: "red", children: noLabel !== null && noLabel !== void 0 ? noLabel : 'No' }) }), jsx(Dialog.Close, { asChild: true, children: jsx(Button, { color: "green", onClick: onConfirm, children: yesLabel !== null && yesLabel !== void 0 ? yesLabel : 'Yes' }) })] })] }) }));
+
+const $Sheet = (props) => (jsx(DialogPrimitive.Root, Object.assign({}, props)));
+$Sheet.displayName = DialogPrimitive.Root.displayName;
+const SheetTrigger = DialogPrimitive.Trigger;
+const SheetClose = DialogPrimitive.Close;
+const SheetPortal = DialogPrimitive.Portal;
+const SheetOverlay = forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx(DialogPrimitive.Overlay, Object.assign({ className: cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', className) }, props, { ref: ref })));
+});
+SheetOverlay.displayName = DialogPrimitive.Overlay.displayName;
+const sheetVariants = cva('fixed flex flex-col z-50 gap-4 bg-background p-4 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500', {
+    variants: {
+        side: {
+            top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+            bottom: 'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+            left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+            right: 'inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+        },
+    },
+    defaultVariants: {
+        side: 'right',
+    },
+});
+const SheetContent = forwardRef((_a, ref) => {
+    var { side = 'right', className, children } = _a, props = __rest(_a, ["side", "className", "children"]);
+    return (jsxs(SheetPortal, { children: [jsx(SheetOverlay, {}), jsxs(DialogPrimitive.Content, Object.assign({ ref: ref, className: cn(sheetVariants({ side }), className) }, props, { children: [children, jsx(DialogPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-2 top-2 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none", asChild: true, children: jsx(Button, { prefixIcon: XIcon, size: "small", variant: "text" }) }), jsx(DialogPrimitive.Description, { className: "hidden" })] }))] }));
+});
+SheetContent.displayName = DialogPrimitive.Content.displayName;
+const SheetHeader = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx("div", Object.assign({ className: cn('flex flex-col space-y-2 text-center sm:text-left', className) }, props)));
+};
+SheetHeader.displayName = 'SheetHeader';
+const SheetFooter = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx("div", Object.assign({ className: cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className) }, props)));
+};
+SheetFooter.displayName = 'SheetFooter';
+const SheetTitle = forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx(DialogPrimitive.Title, Object.assign({ ref: ref, className: cn('text-foreground text-lg font-semibold', className) }, props)));
+});
+SheetTitle.displayName = DialogPrimitive.Title.displayName;
+const SheetDescription = forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx(DialogPrimitive.Description, Object.assign({ ref: ref, className: cn('text-muted-foreground text-sm', className) }, props)));
+});
+SheetDescription.displayName = DialogPrimitive.Description.displayName;
+const Sheet = Object.assign($Sheet, {
+    Portal: SheetPortal,
+    Overlay: SheetOverlay,
+    Trigger: SheetTrigger,
+    Close: SheetClose,
+    Content: SheetContent,
+    Header: SheetHeader,
+    Footer: SheetFooter,
+    Title: SheetTitle,
+    Description: SheetDescription,
+});
 
-const FormDialog = ({ className, open, title, form, children, submitLabel = 'Submit', cancelLabel = 'Cancel', extraAction, onSubmit, onInvalid, onClose, }) => {
+const FormDialog = ({ className, formClassName, open, title, form, children, submitLabel = 'Submit', cancelLabel = 'Cancel', extraAction, as: As = Sheet, onSubmit, onInvalid, onClose, }) => {
     const id = useId();
     const handleSubmit = (data, event) => __awaiter(void 0, void 0, void 0, function* () {
         try {
@@ -1629,7 +1702,7 @@ const FormDialog = ({ className, open, title, form, children, submitLabel = 'Sub
             // do nothering
         }
     });
-    return (jsx(Dialog, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxs(Dialog.Content, { className: className, onPointerDownOutside: (event) => event.preventDefault(), children: [jsx(Dialog.Header, { children: jsx(Dialog.Title, { children: title }) }), jsx(FormProvider, Object.assign({}, form, { children: jsx("form", { id: `form-${id}`, onSubmit: form.handleSubmit(handleSubmit, onInvalid), children: children }) })), jsxs(Dialog.Footer, { className: "w-full sm:justify-between", children: [extraAction, jsxs(Dialog.Footer, { className: "ml-auto", children: [jsx(Dialog.Close, { asChild: true, children: jsx(Button, { color: "red", children: cancelLabel }) }), jsx(Button, { color: "green", type: "submit", form: `form-${id}`, disabled: form.formState.isSubmitting, children: submitLabel })] })] })] }) }));
+    return (jsx(As, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxs(As.Content, { className: className, children: [jsx(As.Header, { children: jsx(As.Title, { children: title }) }), jsx(FormProvider, Object.assign({}, form, { children: jsx("form", { id: `form-${id}`, className: cn('flex h-full w-full flex-col gap-3 overflow-auto', formClassName), onSubmit: form.handleSubmit(handleSubmit, onInvalid), children: children }) })), jsxs(As.Footer, { className: "w-full sm:justify-between", children: [extraAction, jsxs(As.Footer, { className: "ml-auto", children: [jsx(As.Close, { asChild: true, children: jsx(Button, { color: "red", children: cancelLabel }) }), jsx(Button, { color: "green", type: "submit", form: `form-${id}`, disabled: form.formState.isSubmitting, children: submitLabel })] })] })] }) }));
 };
 
 function ListSorter({ className, items, idResolver, renderer, onChange, }) {
@@ -1667,11 +1740,11 @@ function ListSorterDialog({ className, open, title, items, idResolver, renderer,
     }, [items]);
     const preFinish = () => onSubmit(sortedItems);
     const customRenderer = (item, index, listeners) => (jsxs(Flex, { align: "center", className: "gap-4 p-4 focus:outline-none dark:bg-slate-900 hover:dark:bg-slate-800", children: [jsx(Flex, Object.assign({ align: "center", justify: "center", className: "cursor-move rounded-lg p-2 hover:bg-slate-200 dark:hover:bg-slate-700" }, listeners, { children: jsx(ArrowUpDownIcon, { className: "h-5 w-5" }) })), renderer(item, index, listeners)] }));
-    return (jsx(Dialog, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxs(Dialog.Content, { className: cn('max-h-[90dvh]', className), onPointerDownOutside: (event) => event.preventDefault(), children: [jsx(Dialog.Header, { children: title }), jsx(ListSorter, { className: "divide-y overflow-auto rounded-lg border dark:divide-slate-700 dark:border-slate-700 dark:text-white", items: sortedItems, idResolver: idResolver, renderer: customRenderer, onChange: setSortedItems }), jsxs(Dialog.Footer, { children: [jsx(Dialog.Close, { asChild: true, children: jsx(Button, { color: "red", children: cancelLabel !== null && cancelLabel !== void 0 ? cancelLabel : 'Cancel' }) }), jsx(Button, { color: "green", onClick: preFinish, children: submitLabel !== null && submitLabel !== void 0 ? submitLabel : 'Submit' })] })] }) }));
+    return (jsx(Dialog, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxs(Dialog.Content, { className: className, onPointerDownOutside: (event) => event.preventDefault(), children: [jsx(Dialog.Header, { children: jsx(Dialog.Title, { children: title }) }), jsx(ListSorter, { className: "divide-y overflow-auto rounded-lg border dark:divide-slate-700 dark:border-slate-700 dark:text-white", items: sortedItems, idResolver: idResolver, renderer: customRenderer, onChange: setSortedItems }), jsxs(Dialog.Footer, { children: [jsx(Dialog.Close, { asChild: true, children: jsx(Button, { color: "red", children: cancelLabel !== null && cancelLabel !== void 0 ? cancelLabel : 'Cancel' }) }), jsx(Button, { color: "green", onClick: preFinish, children: submitLabel !== null && submitLabel !== void 0 ? submitLabel : 'Submit' })] })] }) }));
 }
 
 const PdfViewerDialog = ({ open, title, url, data, onClose }) => {
-    return !(url || data) ? null : (jsx(Dialog, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxs(Dialog.Content, { className: "h-[90dvh] max-w-[90dvw]", children: [jsx(Dialog.Header, { children: title }), (url || data) && (jsx("embed", { className: "rounded-lg", src: url !== null && url !== void 0 ? url : `data:application/pdf;base64,${data}`, type: "application/pdf", width: "100%", height: "100%" }))] }) }));
+    return !(url || data) ? null : (jsx(Dialog, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxs(Dialog.Content, { className: "h-[95dvh] max-w-[95dvw]", children: [jsx(Dialog.Header, { children: jsx(Dialog.Title, { children: title }) }), (url || data) && (jsx("embed", { className: "rounded-lg", src: url !== null && url !== void 0 ? url : `data:application/pdf;base64,${data}`, type: "application/pdf", width: "100%", height: "100%" }))] }) }));
 };
 
 const Separator = forwardRef((_a, ref) => {
@@ -1680,65 +1753,6 @@ const Separator = forwardRef((_a, ref) => {
 });
 Separator.displayName = SeparatorPrimitive.Root.displayName;
 
-const $Sheet = DialogPrimitive.Root;
-const SheetTrigger = DialogPrimitive.Trigger;
-const SheetClose = DialogPrimitive.Close;
-const SheetPortal = DialogPrimitive.Portal;
-const SheetOverlay = React.forwardRef((_a, ref) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx(DialogPrimitive.Overlay, Object.assign({ className: cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', className) }, props, { ref: ref })));
-});
-SheetOverlay.displayName = DialogPrimitive.Overlay.displayName;
-const sheetVariants = cva('fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500', {
-    variants: {
-        side: {
-            top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
-            bottom: 'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
-            left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
-            right: 'inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
-        },
-    },
-    defaultVariants: {
-        side: 'right',
-    },
-});
-const SheetContent = React.forwardRef((_a, ref) => {
-    var { side = 'right', className, children } = _a, props = __rest(_a, ["side", "className", "children"]);
-    return (jsxs(SheetPortal, { children: [jsx(SheetOverlay, {}), jsxs(DialogPrimitive.Content, Object.assign({ ref: ref, className: cn(sheetVariants({ side }), className) }, props, { children: [children, jsxs(DialogPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none", children: [jsx(X, { className: "h-4 w-4" }), jsx("span", { className: "sr-only", children: "Close" })] })] }))] }));
-});
-SheetContent.displayName = DialogPrimitive.Content.displayName;
-const SheetHeader = (_a) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx("div", Object.assign({ className: cn('flex flex-col space-y-2 text-center sm:text-left', className) }, props)));
-};
-SheetHeader.displayName = 'SheetHeader';
-const SheetFooter = (_a) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx("div", Object.assign({ className: cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className) }, props)));
-};
-SheetFooter.displayName = 'SheetFooter';
-const SheetTitle = React.forwardRef((_a, ref) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx(DialogPrimitive.Title, Object.assign({ ref: ref, className: cn('text-foreground text-lg font-semibold', className) }, props)));
-});
-SheetTitle.displayName = DialogPrimitive.Title.displayName;
-const SheetDescription = React.forwardRef((_a, ref) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx(DialogPrimitive.Description, Object.assign({ ref: ref, className: cn('text-muted-foreground text-sm', className) }, props)));
-});
-SheetDescription.displayName = DialogPrimitive.Description.displayName;
-const Sheet = Object.assign($Sheet, {
-    Portal: SheetPortal,
-    Overlay: SheetOverlay,
-    Trigger: SheetTrigger,
-    Close: SheetClose,
-    Content: SheetContent,
-    Header: SheetHeader,
-    Footer: SheetFooter,
-    Title: SheetTitle,
-    Description: SheetDescription,
-});
-
 const Skeleton = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
     return (jsx("div", Object.assign({ className: cn('bg-muted animate-pulse rounded-md', className) }, props)));
@@ -1766,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(() => {
@@ -1833,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)));
@@ -2007,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;
@@ -2067,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);
@@ -2095,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.138",
+  "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/Dialog/Dialog.d.ts

@@ -1,7 +1,7 @@
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { HTMLAttributes } from 'react';
-export declare const Dialog: import("react").FC<DialogPrimitive.DialogProps> & {
-    Portal: import("react").FC<DialogPrimitive.DialogPortalProps>;
+import { FC, HTMLAttributes } from 'react';
+export declare const Dialog: FC<DialogPrimitive.DialogProps> & {
+    Portal: FC<DialogPrimitive.DialogPortalProps>;
     Overlay: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Close: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
     Trigger: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/src/components/Dialog/FormDialog.d.ts

@@ -1,16 +1,20 @@
 import { PropsWithChildren, ReactNode } from 'react';
 import { FieldValues, SubmitErrorHandler, SubmitHandler, UseFormReturn } from 'react-hook-form';
+import { Sheet } from '../Sheet';
+import { Dialog } from './Dialog';
 type Props<T extends FieldValues> = {
     className?: string;
+    formClassName?: string;
     open: boolean;
     title: ReactNode;
     form: UseFormReturn<T>;
     submitLabel?: string;
     cancelLabel?: string;
     extraAction?: ReactNode;
+    as?: typeof Dialog | typeof Sheet;
     onSubmit: SubmitHandler<T>;
     onInvalid?: SubmitErrorHandler<T>;
     onClose: () => void;
 };
-export declare const FormDialog: <T extends FieldValues>({ className, open, title, form, children, submitLabel, cancelLabel, extraAction, onSubmit, onInvalid, onClose, }: PropsWithChildren<Props<T>>) => import("react/jsx-runtime").JSX.Element;
+export declare const FormDialog: <T extends FieldValues>({ className, formClassName, open, title, form, children, submitLabel, cancelLabel, extraAction, as: As, onSubmit, onInvalid, onClose, }: PropsWithChildren<Props<T>>) => import("react/jsx-runtime").JSX.Element;
 export {};

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/Sheet/index.d.ts

@@ -1,26 +1,26 @@
 import * as SheetPrimitive from '@radix-ui/react-dialog';
 import { type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
+import { ComponentPropsWithoutRef, FC, HTMLAttributes } from 'react';
 declare const sheetVariants: (props?: ({
     side?: "top" | "bottom" | "left" | "right" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, VariantProps<typeof sheetVariants> {
+interface SheetContentProps extends ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, VariantProps<typeof sheetVariants> {
 }
-export declare const Sheet: React.FC<SheetPrimitive.DialogProps> & {
-    Portal: React.FC<SheetPrimitive.DialogPortalProps>;
-    Overlay: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Trigger: React.ForwardRefExoticComponent<SheetPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-    Close: React.ForwardRefExoticComponent<SheetPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
-    Content: React.ForwardRefExoticComponent<SheetContentProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Sheet: FC<SheetPrimitive.DialogProps> & {
+    Portal: FC<SheetPrimitive.DialogPortalProps>;
+    Overlay: import("react").ForwardRefExoticComponent<Omit<SheetPrimitive.DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<SheetPrimitive.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Close: import("react").ForwardRefExoticComponent<SheetPrimitive.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Content: import("react").ForwardRefExoticComponent<SheetContentProps & import("react").RefAttributes<HTMLDivElement>>;
     Header: {
-        ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+        ({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Footer: {
-        ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+        ({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
-    Title: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
-    Description: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+    Title: import("react").ForwardRefExoticComponent<Omit<SheetPrimitive.DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+    Description: import("react").ForwardRefExoticComponent<Omit<SheetPrimitive.DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
 };
 export {};

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';