tw-react-components 0.0.132 → 0.0.134

package/index.cjs.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var clsx = require('clsx');
@@ -23,12 +21,8 @@ var reactRouterDom = require('react-router-dom');
 var PopoverPrimitive = require('@radix-ui/react-popover');
 var SwitchPrimitives = require('@radix-ui/react-switch');
 var TabsPrimitive = require('@radix-ui/react-tabs');
-var react$1 = require('@headlessui/react');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
+function _interopNamespaceDefault(e) {
     var n = Object.create(null);
     if (e) {
         Object.keys(e).forEach(function (k) {
@@ -41,20 +35,17 @@ function _interopNamespace(e) {
             }
         });
     }
-    n["default"] = e;
+    n.default = e;
     return Object.freeze(n);
 }
 
-var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
-var advancedFormat__default = /*#__PURE__*/_interopDefaultLegacy(advancedFormat);
-var localeData__default = /*#__PURE__*/_interopDefaultLegacy(localeData);
-var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
-var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
-var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
-var Accordion__namespace = /*#__PURE__*/_interopNamespace(Accordion);
-var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
-var SwitchPrimitives__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitives);
-var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
+var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(TooltipPrimitive);
+var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(DropdownMenuPrimitive);
+var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(DialogPrimitive);
+var Accordion__namespace = /*#__PURE__*/_interopNamespaceDefault(Accordion);
+var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(PopoverPrimitive);
+var SwitchPrimitives__namespace = /*#__PURE__*/_interopNamespaceDefault(SwitchPrimitives);
+var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(TabsPrimitive);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -70,6 +61,8 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
 
 function __rest(s, e) {
     var t = {};
@@ -104,8 +97,8 @@ function cn(...inputs) {
 
 function compareDates(date1, date2, startOf) {
     if (startOf) {
-        date1 = dayjs__default["default"](date1).startOf(startOf).toDate();
-        date2 = dayjs__default["default"](date2).startOf(startOf).toDate();
+        date1 = dayjs(date1).startOf(startOf).toDate();
+        date2 = dayjs(date2).startOf(startOf).toDate();
     }
     return date1.getTime() - date2.getTime();
 }
@@ -123,9 +116,9 @@ function generalComparator(a, b) {
     return 0;
 }
 
-dayjs__default["default"].extend(advancedFormat__default["default"]);
+dayjs.extend(advancedFormat);
 function getDisplayDate(date, format, locale) {
-    return (locale ? dayjs__default["default"](date).locale(locale) : dayjs__default["default"](date)).format(format);
+    return (locale ? dayjs(date).locale(locale) : dayjs(date)).format(format);
 }
 
 function isEmpty(s) {
@@ -640,12 +633,12 @@ const Flex = react.forwardRef((_a, ref) => {
     return (jsxRuntime.jsx(Block, Object.assign({ className: cn('flex gap-3', wrap && 'flex-wrap', directionClasses[direction][reverse ? 'reverse' : 'normal'], alignClasses[align], justifyClasses[justify], className) }, blockProps, { ref: ref, children: children })));
 });
 
-dayjs__default["default"].extend(localeData__default["default"]);
+dayjs.extend(localeData);
 function useDays(locale = 'en') {
     return react.useMemo(() => {
-        dayjs__default["default"].extend(localeData__default["default"]).locale(locale);
-        const names = dayjs__default["default"].weekdays();
-        const shortNames = dayjs__default["default"].weekdaysShort();
+        dayjs.extend(localeData).locale(locale);
+        const names = dayjs.weekdays();
+        const shortNames = dayjs.weekdaysShort();
         return names.map((name, index) => ({ name, shortName: shortNames[index], index }));
     }, [locale]);
 }
@@ -673,12 +666,12 @@ function useLongPress(callback, ms = 100) {
     };
 }
 
-dayjs__default["default"].extend(localeData__default["default"]);
+dayjs.extend(localeData);
 function useMonths(locale = 'en') {
     return react.useMemo(() => {
-        dayjs__default["default"].extend(localeData__default["default"]).locale(locale);
-        const names = dayjs__default["default"].months();
-        const shortNames = dayjs__default["default"].monthsShort();
+        dayjs.extend(localeData).locale(locale);
+        const names = dayjs.months();
+        const shortNames = dayjs.monthsShort();
         return names.map((name, index) => ({ name, shortName: shortNames[index], index }));
     }, [locale]);
 }
@@ -1058,7 +1051,7 @@ const DateSelector = ({ date, value, minDate, maxDate, locale, calendarView, set
 
 const TimeSelector = ({ date, step = 1, minDate, maxDate, setNewDate, }) => {
     const editDateField = (field, diff) => () => {
-        const newDate = dayjs__default["default"](date).add(diff, field).toDate();
+        const newDate = dayjs(date).add(diff, field).toDate();
         if (minDate && compareDates(newDate, new Date(minDate), 'minute') < 0)
             return;
         if (maxDate && compareDates(newDate, new Date(maxDate), 'minute') > 0)
@@ -1094,7 +1087,7 @@ const DateTimeInput = react.forwardRef((_a, ref) => {
     }, [isOpen]);
     const setNewDate = (newDate) => {
         if (type === 'date') {
-            newDate = dayjs__default["default"](newDate).startOf('day').toDate();
+            newDate = dayjs(newDate).startOf('day').toDate();
         }
         onChange === null || onChange === void 0 ? void 0 : onChange(newDate);
         if (type === 'date') {
@@ -1314,20 +1307,20 @@ const SelectInput = react.forwardRef((_a, ref) => {
 const FormGroup = ({ className, label, children }) => (jsxRuntime.jsxs(Flex, { className: cn('relative !gap-4 rounded-lg border p-4 dark:border-slate-300', className), direction: "column", fullWidth: true, children: [jsxRuntime.jsx("div", { className: "absolute right-0 top-0 rounded-bl-lg rounded-tr-lg bg-slate-500 px-2 py-1 font-medium text-white dark:bg-slate-900 dark:text-white", children: label }), children] }));
 
 function withForm(Component) {
-    return react.forwardRef((_a, ref) => {
-        var { name, pattern, validate } = _a, props = __rest(_a, ["name", "pattern", "validate"]);
+    return react.forwardRef((props, ref) => {
+        const _a = props, { name, pattern, validate } = _a, restProps = __rest(_a, ["name", "pattern", "validate"]);
         const { control } = reactHookForm.useFormContext();
         return (jsxRuntime.jsx(reactHookForm.Controller, { name: name, control: control, rules: {
-                required: props.required,
-                min: props.min,
-                max: props.max,
-                minLength: props.minLength,
-                maxLength: props.maxLength,
+                required: restProps.required,
+                min: restProps.min,
+                max: restProps.max,
+                minLength: restProps.minLength,
+                maxLength: restProps.maxLength,
                 pattern,
                 validate,
             }, render: ({ field, fieldState }) => {
                 var _a, _b;
-                return (jsxRuntime.jsx(Component, Object.assign({}, props, field, { value: (_a = field.value) !== null && _a !== void 0 ? _a : '', disabled: (_b = field.disabled) !== null && _b !== void 0 ? _b : props.disabled, hasErrors: fieldState.error, ref: mergeRefs([ref, field.ref]) })));
+                return (jsxRuntime.jsx(Component, Object.assign({}, restProps, field, { value: (_a = field.value) !== null && _a !== void 0 ? _a : '', disabled: (_b = field.disabled) !== null && _b !== void 0 ? _b : restProps.disabled, hasErrors: fieldState.error, ref: mergeRefs([ref, field.ref]) })));
             } }));
     });
 }
@@ -1384,12 +1377,12 @@ const colorClassNames = {
     pink: 'bg-pink-500 dark:bg-pink-600',
     rose: 'bg-rose-500 dark:bg-rose-600',
 };
-const HintDot = react.forwardRef(({ size = 'medium', placement = 'top-right', color = 'green', ping }, ref) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Block, { className: cn('absolute rounded-full ', colorClassNames[color], dotSizeClassNames[size].base, {
+const HintDot = react.forwardRef(({ size = 'medium', placement = 'top-right', color = 'green', ping }, ref) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Block, { className: cn('absolute rounded-full', colorClassNames[color], dotSizeClassNames[size].base, {
                 [`${dotSizeClassNames[size].top} ${dotSizeClassNames[size].left}`]: placement === 'top-left',
                 [`${dotSizeClassNames[size].top} ${dotSizeClassNames[size].right}`]: placement === 'top-right',
                 [`${dotSizeClassNames[size].bottom} ${dotSizeClassNames[size].right}`]: placement === 'bottom-right',
                 [`${dotSizeClassNames[size].bottom} ${dotSizeClassNames[size].left}`]: placement === 'bottom-left',
-            }), ref: ref }), ping && (jsxRuntime.jsx(Block, { className: cn('absolute animate-ping rounded-full ', colorClassNames[color], dotSizeClassNames[size].base, {
+            }), ref: ref }), ping && (jsxRuntime.jsx(Block, { className: cn('absolute animate-ping rounded-full', colorClassNames[color], dotSizeClassNames[size].base, {
                 [`${dotSizeClassNames[size].top} ${dotSizeClassNames[size].left}`]: placement === 'top-left',
                 [`${dotSizeClassNames[size].top} ${dotSizeClassNames[size].right}`]: placement === 'top-right',
                 [`${dotSizeClassNames[size].bottom} ${dotSizeClassNames[size].right}`]: placement === 'bottom-right',
@@ -1774,7 +1767,7 @@ const $Popover = PopoverPrimitive__namespace.Root;
 const PopoverTrigger = PopoverPrimitive__namespace.Trigger;
 const PopoverContent = react.forwardRef((_a, ref) => {
     var { className, align = 'center', sideOffset = 4, container } = _a, props = __rest(_a, ["className", "align", "sideOffset", "container"]);
-    return (jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { container: container, children: jsxRuntime.jsx(PopoverPrimitive__namespace.Content, Object.assign({ ref: ref, align: align, sideOffset: sideOffset, className: cn(' z-50 rounded-md border bg-white p-1 shadow-md outline-none dark:border-slate-700 dark:bg-slate-900 dark:text-white', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', 'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', className) }, props)) }));
+    return (jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { container: container, children: jsxRuntime.jsx(PopoverPrimitive__namespace.Content, Object.assign({ ref: ref, align: align, sideOffset: sideOffset, className: cn('z-50 rounded-md border bg-white p-1 shadow-md outline-none dark:border-slate-700 dark:bg-slate-900 dark:text-white', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', 'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', className) }, props)) }));
 });
 PopoverContent.displayName = PopoverPrimitive__namespace.Content.displayName;
 const Popover = Object.assign($Popover, {
@@ -1783,8 +1776,8 @@ const Popover = Object.assign($Popover, {
 });
 
 const Switch = react.forwardRef((_a, ref) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsxRuntime.jsx(SwitchPrimitives__namespace.Root, Object.assign({ className: cn('peer inline-flex h-[calc(1.5rem+6px)] w-[calc(3rem+6px)] shrink-0 cursor-pointer items-center rounded-full border-[3px] border-transparent', 'transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-600 focus-visible:ring-offset-2', 'focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-blue-600 data-[state=unchecked]:bg-slate-300', 'dark:focus-visible:ring-slate-200 dark:focus-visible:ring-offset-slate-800 dark:data-[state=checked]:bg-blue-700 dark:data-[state=unchecked]:bg-slate-700', className) }, props, { ref: ref, children: jsxRuntime.jsx(SwitchPrimitives__namespace.Thumb, { className: cn('pointer-events-none block h-6 w-6 rounded-full bg-white shadow-lg ring-0 transition-transform', 'data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-0 dark:bg-slate-900') }) })));
+    var { className } = _a, _b = _a.thumbProps, _c = _b === void 0 ? {} : _b, { className: thumbClassName } = _c, thumbProps = __rest(_c, ["className"]), props = __rest(_a, ["className", "thumbProps"]);
+    return (jsxRuntime.jsx(SwitchPrimitives__namespace.Root, Object.assign({ className: cn('peer inline-flex h-[calc(1.5rem+6px)] w-[calc(3rem+6px)] shrink-0 cursor-pointer items-center rounded-full border-[3px] border-transparent', 'transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-600 focus-visible:ring-offset-2', 'focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-blue-600 data-[state=unchecked]:bg-slate-300', 'dark:focus-visible:ring-slate-200 dark:focus-visible:ring-offset-slate-800 dark:data-[state=checked]:bg-blue-700 dark:data-[state=unchecked]:bg-slate-700', className) }, props, { ref: ref, children: jsxRuntime.jsx(SwitchPrimitives__namespace.Thumb, Object.assign({ className: cn('pointer-events-none block h-6 w-6 rounded-full bg-white shadow-lg ring-0 transition-transform', 'data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-0 dark:bg-slate-900', thumbClassName) }, thumbProps)) })));
 });
 Switch.displayName = SwitchPrimitives__namespace.Root.displayName;
 
@@ -1813,13 +1806,9 @@ const Tabs = Object.assign($Tabs, {
 const ThemeSwitcher = ({ className }) => {
     const { theme, toggleTheme } = useLayoutContext();
     const darkMode = theme === 'dark';
-    return (jsxRuntime.jsx(react$1.Switch, { checked: darkMode, onChange: toggleTheme, className: cn('flex h-8 w-14 items-center rounded-full border p-1 dark:border-blue-700', {
-            'bg-blue-700': darkMode,
-            'bg-slate-100': !darkMode,
-        }, className), children: jsxRuntime.jsx("div", { className: cn('flex transform transition duration-200 ease-in-out', {
-                'translate-x-6': darkMode,
-                'translate-x-0': !darkMode,
-            }), children: darkMode ? (jsxRuntime.jsx(lucideReact.MoonIcon, { className: "h-6 w-6 rounded-full bg-slate-800 p-1 text-white" })) : (jsxRuntime.jsx(lucideReact.SunIcon, { className: "h-6 w-6 rounded-full bg-slate-200 p-1 text-black" })) }) }));
+    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" })),
+        } }));
 };
 
 exports.Badge = Badge;

package/index.esm.js

@@ -19,7 +19,6 @@ import { Link, useLocation } from 'react-router-dom';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
-import { Switch as Switch$1 } from '@headlessui/react';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -35,6 +34,8 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
 
 function __rest(s, e) {
     var t = {};
@@ -1279,20 +1280,20 @@ const SelectInput = forwardRef((_a, ref) => {
 const FormGroup = ({ className, label, children }) => (jsxs(Flex, { className: cn('relative !gap-4 rounded-lg border p-4 dark:border-slate-300', className), direction: "column", fullWidth: true, children: [jsx("div", { className: "absolute right-0 top-0 rounded-bl-lg rounded-tr-lg bg-slate-500 px-2 py-1 font-medium text-white dark:bg-slate-900 dark:text-white", children: label }), children] }));
 
 function withForm(Component) {
-    return forwardRef((_a, ref) => {
-        var { name, pattern, validate } = _a, props = __rest(_a, ["name", "pattern", "validate"]);
+    return forwardRef((props, ref) => {
+        const _a = props, { name, pattern, validate } = _a, restProps = __rest(_a, ["name", "pattern", "validate"]);
         const { control } = useFormContext();
         return (jsx(Controller, { name: name, control: control, rules: {
-                required: props.required,
-                min: props.min,
-                max: props.max,
-                minLength: props.minLength,
-                maxLength: props.maxLength,
+                required: restProps.required,
+                min: restProps.min,
+                max: restProps.max,
+                minLength: restProps.minLength,
+                maxLength: restProps.maxLength,
                 pattern,
                 validate,
             }, render: ({ field, fieldState }) => {
                 var _a, _b;
-                return (jsx(Component, Object.assign({}, props, field, { value: (_a = field.value) !== null && _a !== void 0 ? _a : '', disabled: (_b = field.disabled) !== null && _b !== void 0 ? _b : props.disabled, hasErrors: fieldState.error, ref: mergeRefs([ref, field.ref]) })));
+                return (jsx(Component, Object.assign({}, restProps, field, { value: (_a = field.value) !== null && _a !== void 0 ? _a : '', disabled: (_b = field.disabled) !== null && _b !== void 0 ? _b : restProps.disabled, hasErrors: fieldState.error, ref: mergeRefs([ref, field.ref]) })));
             } }));
     });
 }
@@ -1349,12 +1350,12 @@ const colorClassNames = {
     pink: 'bg-pink-500 dark:bg-pink-600',
     rose: 'bg-rose-500 dark:bg-rose-600',
 };
-const HintDot = forwardRef(({ size = 'medium', placement = 'top-right', color = 'green', ping }, ref) => (jsxs(Fragment, { children: [jsx(Block, { className: cn('absolute rounded-full ', colorClassNames[color], dotSizeClassNames[size].base, {
+const HintDot = forwardRef(({ size = 'medium', placement = 'top-right', color = 'green', ping }, ref) => (jsxs(Fragment, { children: [jsx(Block, { className: cn('absolute rounded-full', colorClassNames[color], dotSizeClassNames[size].base, {
                 [`${dotSizeClassNames[size].top} ${dotSizeClassNames[size].left}`]: placement === 'top-left',
                 [`${dotSizeClassNames[size].top} ${dotSizeClassNames[size].right}`]: placement === 'top-right',
                 [`${dotSizeClassNames[size].bottom} ${dotSizeClassNames[size].right}`]: placement === 'bottom-right',
                 [`${dotSizeClassNames[size].bottom} ${dotSizeClassNames[size].left}`]: placement === 'bottom-left',
-            }), ref: ref }), ping && (jsx(Block, { className: cn('absolute animate-ping rounded-full ', colorClassNames[color], dotSizeClassNames[size].base, {
+            }), ref: ref }), ping && (jsx(Block, { className: cn('absolute animate-ping rounded-full', colorClassNames[color], dotSizeClassNames[size].base, {
                 [`${dotSizeClassNames[size].top} ${dotSizeClassNames[size].left}`]: placement === 'top-left',
                 [`${dotSizeClassNames[size].top} ${dotSizeClassNames[size].right}`]: placement === 'top-right',
                 [`${dotSizeClassNames[size].bottom} ${dotSizeClassNames[size].right}`]: placement === 'bottom-right',
@@ -1739,7 +1740,7 @@ const $Popover = PopoverPrimitive.Root;
 const PopoverTrigger = PopoverPrimitive.Trigger;
 const PopoverContent = forwardRef((_a, ref) => {
     var { className, align = 'center', sideOffset = 4, container } = _a, props = __rest(_a, ["className", "align", "sideOffset", "container"]);
-    return (jsx(PopoverPrimitive.Portal, { container: container, children: jsx(PopoverPrimitive.Content, Object.assign({ ref: ref, align: align, sideOffset: sideOffset, className: cn(' z-50 rounded-md border bg-white p-1 shadow-md outline-none dark:border-slate-700 dark:bg-slate-900 dark:text-white', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', 'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', className) }, props)) }));
+    return (jsx(PopoverPrimitive.Portal, { container: container, children: jsx(PopoverPrimitive.Content, Object.assign({ ref: ref, align: align, sideOffset: sideOffset, className: cn('z-50 rounded-md border bg-white p-1 shadow-md outline-none dark:border-slate-700 dark:bg-slate-900 dark:text-white', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', 'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', className) }, props)) }));
 });
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 const Popover = Object.assign($Popover, {
@@ -1748,8 +1749,8 @@ const Popover = Object.assign($Popover, {
 });
 
 const Switch = forwardRef((_a, ref) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx(SwitchPrimitives.Root, Object.assign({ className: cn('peer inline-flex h-[calc(1.5rem+6px)] w-[calc(3rem+6px)] shrink-0 cursor-pointer items-center rounded-full border-[3px] border-transparent', 'transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-600 focus-visible:ring-offset-2', 'focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-blue-600 data-[state=unchecked]:bg-slate-300', 'dark:focus-visible:ring-slate-200 dark:focus-visible:ring-offset-slate-800 dark:data-[state=checked]:bg-blue-700 dark:data-[state=unchecked]:bg-slate-700', className) }, props, { ref: ref, children: jsx(SwitchPrimitives.Thumb, { className: cn('pointer-events-none block h-6 w-6 rounded-full bg-white shadow-lg ring-0 transition-transform', 'data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-0 dark:bg-slate-900') }) })));
+    var { className } = _a, _b = _a.thumbProps, _c = _b === void 0 ? {} : _b, { className: thumbClassName } = _c, thumbProps = __rest(_c, ["className"]), props = __rest(_a, ["className", "thumbProps"]);
+    return (jsx(SwitchPrimitives.Root, Object.assign({ className: cn('peer inline-flex h-[calc(1.5rem+6px)] w-[calc(3rem+6px)] shrink-0 cursor-pointer items-center rounded-full border-[3px] border-transparent', 'transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-600 focus-visible:ring-offset-2', 'focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-blue-600 data-[state=unchecked]:bg-slate-300', 'dark:focus-visible:ring-slate-200 dark:focus-visible:ring-offset-slate-800 dark:data-[state=checked]:bg-blue-700 dark:data-[state=unchecked]:bg-slate-700', className) }, props, { ref: ref, children: jsx(SwitchPrimitives.Thumb, Object.assign({ className: cn('pointer-events-none block h-6 w-6 rounded-full bg-white shadow-lg ring-0 transition-transform', 'data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-0 dark:bg-slate-900', thumbClassName) }, thumbProps)) })));
 });
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
@@ -1778,13 +1779,9 @@ const Tabs = Object.assign($Tabs, {
 const ThemeSwitcher = ({ className }) => {
     const { theme, toggleTheme } = useLayoutContext();
     const darkMode = theme === 'dark';
-    return (jsx(Switch$1, { checked: darkMode, onChange: toggleTheme, className: cn('flex h-8 w-14 items-center rounded-full border p-1 dark:border-blue-700', {
-            'bg-blue-700': darkMode,
-            'bg-slate-100': !darkMode,
-        }, className), children: jsx("div", { className: cn('flex transform transition duration-200 ease-in-out', {
-                'translate-x-6': darkMode,
-                'translate-x-0': !darkMode,
-            }), children: darkMode ? (jsx(MoonIcon, { className: "h-6 w-6 rounded-full bg-slate-800 p-1 text-white" })) : (jsx(SunIcon, { className: "h-6 w-6 rounded-full bg-slate-200 p-1 text-black" })) }) }));
+    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" })),
+        } }));
 };
 
 export { Badge, BasicInput, BasicInputExtension, Block, Button, Card, CheckboxInput, ConfirmDialog, DataTable, DateTimeInput, Dialog, DropdownMenu, EmailInput, Flex, FormDialog, FormGroup, FormInputs, Hint, Label, Layout, LayoutContext, LayoutContextProvider, List, ListSorter, ListSorterDialog, Navbar, NumberInput, Pagination, PasswordInput, PdfViewerDialog, Popover, SIDEBAR_KEY, SelectInput, Sidebar, Spinner, Switch, THEME_KEY, Table, Tabs, TextInput, TextareaInput, ThemeSwitcher, Tooltip, cn, compareDates, generalComparator, getDisplayDate, isEmpty, mergeRefs, resolveTargetObject, useDays, useLayoutContext, useLongPress, useMonths, useOnSwipe, useOutsideClick, usePagination };

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.132",
+  "version": "0.0.134",
   "license": "MIT",
   "homepage": "https://bacali95.github.io/tw-react-components",
   "author": {
@@ -19,6 +19,7 @@
   "exports": {
     ".": {
       "module": "./index.esm.js",
+      "types": "./index.esm.d.ts",
       "import": "./index.cjs.mjs",
       "default": "./index.cjs.js"
     },
@@ -28,5 +29,6 @@
     "./package.json": "./package.json"
   },
   "module": "./index.esm.js",
-  "main": "./index.cjs.js"
-}
+  "main": "./index.cjs.js",
+  "types": "./index.esm.d.ts"
+}

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

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 import { ButtonProps, ButtonVariant } from '../Button';
 export type BadgeVariant = Exclude<ButtonVariant, 'text'>;
 export type BadgeProps = Omit<ButtonProps, 'variant'> & {
     variant?: BadgeVariant;
 };
 export declare const Badge: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "variant"> & {
-    variant?: BadgeVariant | undefined;
+    variant?: BadgeVariant;
 } & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -7,9 +7,9 @@ export type BlockProps = PropsWithoutRef<ComponentProps<'div'> & {
     fullHeight?: boolean;
 }>;
 export declare const Block: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    className?: string | undefined;
-    centered?: boolean | undefined;
-    container?: boolean | undefined;
-    fullWidth?: boolean | undefined;
-    fullHeight?: boolean | undefined;
+    className?: string;
+    centered?: boolean;
+    container?: boolean;
+    fullWidth?: boolean;
+    fullHeight?: boolean;
 }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -11,10 +11,10 @@ export type ButtonProps = PropsWithoutRef<ComponentProps<'button'>> & {
     suffixIcon?: LucideIcon;
 };
 export declare const Button: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    size?: Size | undefined;
-    color?: Color | undefined;
-    variant?: ButtonVariant | undefined;
-    rounded?: boolean | undefined;
-    prefixIcon?: LucideIcon | undefined;
-    suffixIcon?: LucideIcon | undefined;
+    size?: Size;
+    color?: Color;
+    variant?: ButtonVariant;
+    rounded?: boolean;
+    prefixIcon?: LucideIcon;
+    suffixIcon?: LucideIcon;
 } & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 export declare const Card: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    className?: string | undefined;
-    centered?: boolean | undefined;
-    container?: boolean | undefined;
-    fullWidth?: boolean | undefined;
-    fullHeight?: boolean | undefined;
+    className?: string;
+    centered?: boolean;
+    container?: boolean;
+    fullWidth?: boolean;
+    fullHeight?: boolean;
 }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -6,7 +6,7 @@ export declare const Dialog: import("react").FC<DialogPrimitive.DialogProps> & {
     Close: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
     Trigger: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
     Content: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
-        fullScreen?: boolean | undefined;
+        fullScreen?: boolean;
     } & import("react").RefAttributes<HTMLDivElement>>;
     Header: {
         ({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;

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

@@ -4,16 +4,16 @@ export declare const DropdownMenu: import("react").FC<DropdownMenuPrimitive.Drop
     Trigger: import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
     Content: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Item: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
-        inset?: boolean | undefined;
+        inset?: boolean;
     } & import("react").RefAttributes<HTMLDivElement>>;
     CheckboxItem: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     RadioItem: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Label: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
-        inset?: boolean | undefined;
+        inset?: boolean;
     } & import("react").RefAttributes<HTMLDivElement>>;
     Separator: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Icon: import("react").ForwardRefExoticComponent<{
-        className?: string | undefined;
+        className?: string;
         icon: import("lucide-react").LucideIcon;
     } & import("react").RefAttributes<SVGSVGElement>>;
     Shortcut: {
@@ -25,7 +25,7 @@ export declare const DropdownMenu: import("react").FC<DropdownMenuPrimitive.Drop
     Sub: import("react").FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
     SubContent: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     SubTrigger: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
-        inset?: boolean | undefined;
+        inset?: boolean;
     } & import("react").RefAttributes<HTMLDivElement>>;
     RadioGroup: import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
 };

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BlockProps } from '../Block';
 type Direction = 'row' | 'column';
 type Position = 'start' | 'center' | 'end';
@@ -10,16 +9,16 @@ export type FlexProps = BlockProps & {
     justify?: Position | 'between';
 };
 export declare const Flex: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    className?: string | undefined;
-    centered?: boolean | undefined;
-    container?: boolean | undefined;
-    fullWidth?: boolean | undefined;
-    fullHeight?: boolean | undefined;
+    className?: string;
+    centered?: boolean;
+    container?: boolean;
+    fullWidth?: boolean;
+    fullHeight?: boolean;
 }, "ref"> & {
-    reverse?: boolean | undefined;
-    wrap?: boolean | undefined;
-    direction?: Direction | undefined;
-    align?: Position | undefined;
-    justify?: Position | "between" | undefined;
+    reverse?: boolean;
+    wrap?: boolean;
+    direction?: Direction;
+    align?: Position;
+    justify?: Position | "between";
 } & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/src/components/Form/controls/custom/date-time/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BasicInputProps } from '../../primitive';
 export type DateTimeInputType = 'date' | 'time' | 'datetime-local';
 export type DateTimeInputProps = {
@@ -14,14 +13,14 @@ export type DateTimeInputProps = {
     onChange?: (date?: Date | null) => void;
 } & Pick<BasicInputProps<'text'>, 'className' | 'inputClassName' | 'extensionClassName' | 'label' | 'name' | 'description' | 'placeholder' | 'required' | 'disabled' | 'onBlur' | 'size' | 'readOnly'>;
 export declare const DateTimeInput: import("react").ForwardRefExoticComponent<{
-    value?: string | Date | null | undefined;
-    type?: DateTimeInputType | undefined;
-    hasErrors?: boolean | undefined;
-    clearable?: boolean | undefined;
-    step?: number | undefined;
-    minDate?: Date | undefined;
-    maxDate?: Date | undefined;
-    displayFormat?: string | undefined;
-    displayLocale?: string | undefined;
-    onChange?: ((date?: Date | null) => void) | undefined;
+    value?: string | Date | null;
+    type?: DateTimeInputType;
+    hasErrors?: boolean;
+    clearable?: boolean;
+    step?: number;
+    minDate?: Date;
+    maxDate?: Date;
+    displayFormat?: string;
+    displayLocale?: string;
+    onChange?: (date?: Date | null) => void;
 } & Pick<BasicInputProps<"text">, "size" | "label" | "disabled" | "name" | "placeholder" | "readOnly" | "required" | "className" | "onBlur" | "inputClassName" | "extensionClassName" | "description"> & import("react").RefAttributes<HTMLDivElement>>;

package/src/components/Form/controls/primitive/BasicInput.d.ts

@@ -16,17 +16,17 @@ export type BasicInputProps<Type extends InputType> = {
     onSuffixIconClick?: (event: MouseEvent<HTMLDivElement>) => void;
 } & Omit<Type extends 'textarea' ? ComponentProps<'textarea'> : ComponentProps<'input'>, 'id' | 'ref' | 'size'>;
 export declare const BasicInput: import("react").ForwardRefExoticComponent<{
-    inputClassName?: string | undefined;
-    extensionClassName?: string | undefined;
+    inputClassName?: string;
+    extensionClassName?: string;
     type?: InputType;
-    label?: string | undefined;
+    label?: string;
     description?: ReactNode;
-    size?: Size | undefined;
-    hasErrors?: boolean | undefined;
-    clearable?: boolean | undefined;
-    suffixIcon?: LucideIcon | undefined;
-    onClear?: (() => void) | undefined;
-    onSuffixIconClick?: ((event: MouseEvent<HTMLDivElement>) => void) | undefined;
+    size?: Size;
+    hasErrors?: boolean;
+    clearable?: boolean;
+    suffixIcon?: LucideIcon;
+    onClear?: () => void;
+    onSuffixIconClick?: (event: MouseEvent<HTMLDivElement>) => void;
 } & Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> | import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "id" | "ref" | "size"> & import("react").RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
 export declare const BasicInputExtension: FC<PropsWithChildren<{
     className?: string;

package/src/components/Form/controls/primitive/CheckBoxInput.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BasicInputProps } from './BasicInput';
 export type CheckboxInputProps = Omit<BasicInputProps<'checkbox'>, 'type'>;
 export declare const CheckboxInput: import("react").ForwardRefExoticComponent<CheckboxInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/src/components/Form/controls/primitive/EmailInput.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BasicInputProps } from './BasicInput';
 export type EmailInputProps = Omit<BasicInputProps<'email'>, 'type'>;
 export declare const EmailInput: import("react").ForwardRefExoticComponent<EmailInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/src/components/Form/controls/primitive/NumberInput.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BasicInputProps } from './BasicInput';
 export type NumberInputProps = Omit<BasicInputProps<'number'>, 'type'>;
 export declare const NumberInput: import("react").ForwardRefExoticComponent<NumberInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/src/components/Form/controls/primitive/PasswordInput.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BasicInputProps } from './BasicInput';
 export type PasswordInputProps = Omit<BasicInputProps<'number'>, 'type'>;
 export declare const PasswordInput: import("react").ForwardRefExoticComponent<PasswordInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/src/components/Form/controls/primitive/TextInput.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BasicInputProps } from './BasicInput';
 export type TextInputProps = Omit<BasicInputProps<'text'>, 'type'>;
 export declare const TextInput: import("react").ForwardRefExoticComponent<TextInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/src/components/Form/controls/primitive/TextareaInput.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BasicInputProps } from './BasicInput';
 export type TextareaInputProps = Omit<BasicInputProps<'textarea'>, 'type'>;
 export declare const TextareaInput: import("react").ForwardRefExoticComponent<TextareaInputProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/src/components/Form/controls/with-form.d.ts

@@ -10,42 +10,42 @@ export type WithFormProps<Type extends InputType | SelectInputType, Props = Type
 export declare const FormInputs: {
     Text: ForwardRefExoticComponent<{
         name: string;
-        pattern?: RegExp | undefined;
+        pattern?: RegExp;
         validate?: Validate<string, any> | undefined;
     } & Omit<TextInputProps, "pattern" | "ref" | "name" | "value" | "onChange" | "onBlur"> & import("react").RefAttributes<HTMLInputElement>>;
     Email: ForwardRefExoticComponent<{
         name: string;
-        pattern?: RegExp | undefined;
+        pattern?: RegExp;
         validate?: Validate<string, any> | undefined;
     } & Omit<EmailInputProps, "pattern" | "ref" | "name" | "value" | "onChange" | "onBlur"> & import("react").RefAttributes<HTMLInputElement>>;
     Password: ForwardRefExoticComponent<{
         name: string;
-        pattern?: RegExp | undefined;
+        pattern?: RegExp;
         validate?: Validate<string, any> | undefined;
     } & Omit<PasswordInputProps, "pattern" | "ref" | "name" | "value" | "onChange" | "onBlur"> & import("react").RefAttributes<HTMLInputElement>>;
     Textarea: ForwardRefExoticComponent<{
         name: string;
-        pattern?: RegExp | undefined;
+        pattern?: RegExp;
         validate?: Validate<string, any> | undefined;
     } & Omit<TextareaInputProps, "pattern" | "ref" | "name" | "value" | "onChange" | "onBlur"> & import("react").RefAttributes<HTMLTextAreaElement>>;
     Number: ForwardRefExoticComponent<{
         name: string;
-        pattern?: RegExp | undefined;
+        pattern?: RegExp;
         validate?: Validate<number, any> | undefined;
     } & Omit<NumberInputProps, "pattern" | "ref" | "name" | "value" | "onChange" | "onBlur"> & import("react").RefAttributes<HTMLInputElement>>;
     Checkbox: ForwardRefExoticComponent<{
         name: string;
-        pattern?: RegExp | undefined;
+        pattern?: RegExp;
         validate?: Validate<string, any> | undefined;
     } & Omit<CheckboxInputProps, "pattern" | "ref" | "name" | "value" | "onChange" | "onBlur"> & import("react").RefAttributes<HTMLInputElement>>;
     DateTime: ForwardRefExoticComponent<{
         name: string;
-        pattern?: RegExp | undefined;
+        pattern?: RegExp;
         validate?: Validate<Date, any> | undefined;
     } & Omit<DateTimeInputProps, "pattern" | "ref" | "name" | "value" | "onChange" | "onBlur"> & import("react").RefAttributes<HTMLDivElement>>;
     Select: ForwardRefExoticComponent<{
         name: string;
-        pattern?: RegExp | undefined;
+        pattern?: RegExp;
         validate?: Validate<any, any> | undefined;
     } & Omit<SelectInputProps, "pattern" | "ref" | "name" | "value" | "onChange" | "onBlur"> & import("react").RefAttributes<HTMLInputElement>>;
 };

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BadgeProps, BadgeVariant } from '../Badge';
 import { Color, Size } from '../types';
 export type HintPlacement = 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
@@ -13,12 +12,12 @@ export type HintBadgeProps = BadgeProps & {
     placement?: HintPlacement;
 };
 export declare const Hint: import("react").ForwardRefExoticComponent<{
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLDivElement>> & {
     Dot: import("react").ForwardRefExoticComponent<HintDotProps & import("react").RefAttributes<HTMLDivElement>>;
     Badge: import("react").ForwardRefExoticComponent<Omit<import("..").ButtonProps, "variant"> & {
-        variant?: BadgeVariant | undefined;
+        variant?: BadgeVariant;
     } & {
-        placement?: HintPlacement | undefined;
+        placement?: HintPlacement;
     } & import("react").RefAttributes<HTMLButtonElement>>;
 };

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

@@ -1,21 +1,20 @@
-/// <reference types="react" />
 import { LucideIcon } from 'lucide-react';
 import { Size } from '../types';
 export declare const List: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
     Item: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        size?: Size | undefined;
-        inset?: boolean | undefined;
+        size?: Size;
+        inset?: boolean;
     } & import("react").RefAttributes<HTMLDivElement>>;
     Label: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        size?: Size | undefined;
-        inset?: boolean | undefined;
+        size?: Size;
+        inset?: boolean;
     } & import("react").RefAttributes<HTMLDivElement>>;
     Indicator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         icon: LucideIcon;
         iconClassName: string;
     } & import("react").RefAttributes<HTMLDivElement>>;
     Icon: import("react").ForwardRefExoticComponent<{
-        className?: string | undefined;
+        className?: string;
         icon: LucideIcon;
     } & import("react").RefAttributes<SVGSVGElement>>;
     Separator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 export declare const Popover: import("react").FC<PopoverPrimitive.PopoverProps> & {
     Trigger: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
     Content: import("react").ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
-        container?: HTMLElement | null | undefined;
+        container?: HTMLElement | null;
     } & import("react").RefAttributes<HTMLDivElement>>;
 };

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

@@ -1,4 +1,9 @@
-/// <reference types="react" />
 import * as SwitchPrimitives from '@radix-ui/react-switch';
-declare const Switch: import("react").ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+import { ComponentProps, ComponentPropsWithoutRef } from 'react';
+export type SwitchProps = ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> & {
+    thumbProps?: ComponentProps<typeof SwitchPrimitives.Thumb>;
+};
+declare const Switch: import("react").ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & {
+    thumbProps?: ComponentProps<typeof SwitchPrimitives.Thumb>;
+} & import("react").RefAttributes<HTMLButtonElement>>;
 export { Switch };

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 export declare const Tabs: import("react").ForwardRefExoticComponent<Omit<TabsPrimitive.TabsProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
     List: import("react").ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;