tw-react-components 0.0.159 → 0.0.161

package/index.esm.js

@@ -557,19 +557,19 @@ const variantClassNames = {
 };
 const sizeClassNames = {
     small: {
-        base: 'gap-1.5 text-sm h-7',
-        withChildren: 'px-2',
+        base: 'gap-1 text-sm h-6',
+        withChildren: 'px-1.5',
         icon: {
-            base: 'h-4 w-4',
-            withChildren: 'h-3 w-3',
+            base: 'h-3 w-3',
+            withChildren: 'h-2 w-2',
         },
     },
     medium: {
-        base: 'gap-2 text-base h-10',
-        withChildren: 'px-2.5',
+        base: 'gap-1.5 text-base h-9',
+        withChildren: 'px-2',
         icon: {
-            base: 'h-5 w-5',
-            withChildren: 'h-4 w-4',
+            base: 'h-4 w-4',
+            withChildren: 'h-3 w-3',
         },
     },
 };
@@ -594,7 +594,7 @@ const Block = forwardRef((_a, ref) => {
 
 const Card = forwardRef((_a, ref) => {
     var { children, className } = _a, blockProps = __rest(_a, ["children", "className"]);
-    return (jsx(Block, Object.assign({ className: cn('rounded-lg border p-3 dark:border-slate-700 dark:bg-slate-900', className) }, blockProps, { ref: ref, children: children })));
+    return (jsx(Block, Object.assign({ className: cn('rounded-lg border p-2 dark:border-slate-700 dark:bg-slate-900', className) }, blockProps, { ref: ref, children: children })));
 });
 
 const $Collapsible = CollapsiblePrimitive.Root;
@@ -628,7 +628,7 @@ const justifyClasses = {
 };
 const Flex = forwardRef((_a, ref) => {
     var { children, className, reverse, wrap, direction = 'row', align = 'start', justify = 'start' } = _a, blockProps = __rest(_a, ["children", "className", "reverse", "wrap", "direction", "align", "justify"]);
-    return (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 })));
+    return (jsx(Block, Object.assign({ className: cn('flex gap-2', wrap && 'flex-wrap', directionClasses[direction][reverse ? 'reverse' : 'normal'], alignClasses[align], justifyClasses[justify], className) }, blockProps, { ref: ref, children: children })));
 });
 
 dayjs.extend(localeData);
@@ -804,35 +804,35 @@ const inputClasses = {
 };
 const sizeClasses = {
     small: {
-        label: 'text-sm',
-        input: 'text-sm py-1 px-2 h-7',
+        label: 'text-xs',
+        input: 'text-xs py-1 px-2 h-6',
         checkbox: {
-            input: 'w-4 h-4',
+            input: 'w-3 h-3',
             wrapper: 'h-6 gap-1',
         },
         suffix: {
-            wrapper: 'h-7',
-            icon: 'h-4 w-4 mx-1.5',
+            wrapper: 'h-6',
+            icon: 'h-3 w-3 mx-1.5',
         },
         clearButton: {
-            base: 'h-5 w-5',
+            base: 'h-4 w-4',
             withSuffixIcon: 'right-8',
         },
     },
     medium: {
-        label: 'text-base',
-        input: 'text-base py-2 px-3 h-10',
+        label: 'text-sm',
+        input: 'text-sm py-2 px-3 h-9',
         checkbox: {
-            input: 'w-5 h-5',
+            input: 'w-4 h-4',
             wrapper: 'h-8 gap-2',
         },
         suffix: {
-            wrapper: 'h-10',
-            icon: 'w-5 h-5 mx-2',
+            wrapper: 'h-9',
+            icon: 'w-4 h-4 mx-2',
         },
         clearButton: {
-            base: 'h-6 w-6',
-            withSuffixIcon: 'right-12',
+            base: 'h-5 w-5',
+            withSuffixIcon: 'right-9',
         },
     },
 };
@@ -879,7 +879,7 @@ const EmailInput = forwardRef((props, ref) => (jsx(BasicInput, Object.assign({ t
 
 const NumberInput = forwardRef((_a, ref) => {
     var { unit } = _a, props = __rest(_a, ["unit"]);
-    return (jsx(BasicInput, Object.assign({ type: "number" }, props, { suffixIcon: unit
+    return (jsx(BasicInput, Object.assign({ type: "number", inputClassName: cn(props.clearable && !!props.value && 'pr-8', props.className) }, props, { suffixIcon: unit
             ? ({ className }) => (jsx("div", { className: cn(className, 'flex w-min items-center'), onClick: props.onSuffixIconClick, children: unit }))
             : props.suffixIcon, ref: ref })));
 });
@@ -1383,14 +1383,14 @@ const HintRoot = forwardRef(({ children }, ref) => (jsx(Block, { className: "rel
 HintRoot.displayName = 'HintRoot';
 const dotSizeClassNames = {
     small: {
-        base: 'h-2 w-2',
+        base: 'h-1.5 w-1.5',
         top: '-top-0.5',
         right: '-right-0.5',
         bottom: '-bottom-0.5',
         left: '-left-0.5',
     },
     medium: {
-        base: 'h-3 w-3',
+        base: 'h-2.5 w-2.5',
         top: '-top-1',
         right: '-right-1',
         bottom: '-bottom-1',
@@ -1441,7 +1441,7 @@ const badgeSizeClassNames = {
 };
 const HintBadge = forwardRef((_a, ref) => {
     var { className, size = 'small', placement = 'top-right' } = _a, props = __rest(_a, ["className", "size", "placement"]);
-    return (jsx(Badge, Object.assign({ className: cn('absolute px-1', size === 'small' ? 'h-5' : 'h-6', {
+    return (jsx(Badge, Object.assign({ className: cn('absolute z-10 px-1', size === 'small' ? 'h-4' : 'h-5', {
             [`${badgeSizeClassNames.top} ${badgeSizeClassNames.left}`]: placement === 'top-left',
             [`${badgeSizeClassNames.top} ${badgeSizeClassNames.right}`]: placement === 'top-right',
             [`${badgeSizeClassNames.bottom} ${badgeSizeClassNames.right}`]: placement === 'bottom-right',
@@ -1457,13 +1457,13 @@ const Pagination = ({ disabled, pageSize = 10, currentPage, totalItems, setCurre
     useEffect(() => {
         setCurrentPage((page) => Math.min(page, Math.max(0, totalPages - 1)));
     }, [setCurrentPage, totalPages]);
-    return (jsx(Flex, { justify: "end", children: jsxs(Flex, { className: "h-10 gap-0 divide-x rounded-md border border-slate-300 bg-white dark:divide-slate-700 dark:border-slate-700 dark:bg-slate-800", children: [jsx(PaginationItem, { title: "First page", onClick: () => setCurrentPage(0), disabled: !currentPage || disabled, children: jsx(ChevronsLeftIcon, { className: "h-5 w-5" }) }), jsx(PaginationItem, { title: "Previous page", onClick: () => currentPage && setCurrentPage(currentPage - 1), disabled: !currentPage || disabled, children: jsx(ChevronLeftIcon, { className: "h-5 w-5" }) }), pagination.map((page, index) => (jsx(PaginationItem, { active: page !== '...' && page - 1 === currentPage, title: page !== '...' ? `Page ${page}` : undefined, onClick: page !== '...' ? () => setCurrentPage(page - 1) : undefined, disabled: page === '...' || disabled, children: page }, index))), jsx(PaginationItem, { title: "Next page", onClick: () => currentPage + 1 < totalPages && setCurrentPage(currentPage + 1), disabled: currentPage + 1 === totalPages || disabled, children: jsx(ChevronRightIcon, { className: "h-5 w-5" }) }), jsx(PaginationItem, { title: "Last page", onClick: () => setCurrentPage(Math.floor(totalItems && !(totalItems % pageSize)
+    return (jsx(Flex, { justify: "end", children: jsxs(Flex, { className: "h-9 gap-0 divide-x rounded-md border border-slate-300 bg-white dark:divide-slate-700 dark:border-slate-700 dark:bg-slate-800", children: [jsx(PaginationItem, { title: "First page", onClick: () => setCurrentPage(0), disabled: !currentPage || disabled, children: jsx(ChevronsLeftIcon, { className: "h-4 w-4" }) }), jsx(PaginationItem, { title: "Previous page", onClick: () => currentPage && setCurrentPage(currentPage - 1), disabled: !currentPage || disabled, children: jsx(ChevronLeftIcon, { className: "h-4 w-4" }) }), pagination.map((page, index) => (jsx(PaginationItem, { active: page !== '...' && page - 1 === currentPage, title: page !== '...' ? `Page ${page}` : undefined, onClick: page !== '...' ? () => setCurrentPage(page - 1) : undefined, disabled: page === '...' || disabled, children: page }, index))), jsx(PaginationItem, { title: "Next page", onClick: () => currentPage + 1 < totalPages && setCurrentPage(currentPage + 1), disabled: currentPage + 1 === totalPages || disabled, children: jsx(ChevronRightIcon, { className: "h-4 w-4" }) }), jsx(PaginationItem, { title: "Last page", onClick: () => setCurrentPage(Math.floor(totalItems && !(totalItems % pageSize)
                         ? (totalItems - 1) / pageSize
-                        : totalItems / pageSize)), disabled: currentPage + 1 === totalPages || disabled, children: jsx(ChevronsRightIcon, { className: "h-5 w-5" }) })] }) }));
+                        : totalItems / pageSize)), disabled: currentPage + 1 === totalPages || disabled, children: jsx(ChevronsRightIcon, { className: "h-4 w-4" }) })] }) }));
 };
 const PaginationItem = (_a) => {
     var { children, active, disabled } = _a, props = __rest(_a, ["children", "active", "disabled"]);
-    return (jsx(Flex, Object.assign({ className: cn('w-10 first:rounded-l-md last:rounded-r-md', {
+    return (jsx(Flex, Object.assign({ className: cn('w-9 text-sm first:rounded-l-md last:rounded-r-md', {
             'text-slate-400 dark:text-slate-500': disabled,
             'bg-slate-100 dark:bg-slate-900': active,
             'cursor-pointer hover:bg-slate-200 dark:hover:bg-slate-900': !disabled && props.onClick,
@@ -1721,7 +1721,7 @@ const FormDialog = ({ className, formClassName, open, title, form, children, sub
             // do nothering
         }
     });
-    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 })] })] })] }) }));
+    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-2 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, }) {
@@ -2041,7 +2041,7 @@ const Sidebar = Object.assign($Sidebar, {
     Trigger: SidebarTrigger,
 });
 
-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 Navbar = ({ className, sidebarTriggerClassName, leftSlot, rightSlot, }) => (jsx(Block, { className: cn('border-b p-2 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, header, items, extraContent, footer } = _b, sidebarProps = __rest(_b, ["basePath", "header", "items", "extraContent", "footer"]), { navbarProps, NavLink, useLocation } = _a;

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.159",
+  "version": "0.0.161",
   "license": "MIT",
   "homepage": "https://bacali95.github.io/tw-react-components",
   "type": "module",