tw-react-components 0.0.145 → 0.0.147

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/index.cjs.js CHANGED
@@ -6,6 +6,7 @@ var clsx = require('clsx');
6
6
  var tailwindMerge = require('tailwind-merge');
7
7
  var dayjs = require('dayjs');
8
8
  var advancedFormat = require('dayjs/plugin/advancedFormat');
9
+ var CollapsiblePrimitive = require('@radix-ui/react-collapsible');
9
10
  var lucideReact = require('lucide-react');
10
11
  var localeData = require('dayjs/plugin/localeData');
11
12
  var TooltipPrimitive = require('@radix-ui/react-tooltip');
@@ -41,6 +42,7 @@ function _interopNamespaceDefault(e) {
41
42
  return Object.freeze(n);
42
43
  }
43
44
 
45
+ var CollapsiblePrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(CollapsiblePrimitive);
44
46
  var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(TooltipPrimitive);
45
47
  var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(DropdownMenuPrimitive);
46
48
  var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(DialogPrimitive);
@@ -624,6 +626,14 @@ const Card = react.forwardRef((_a, ref) => {
624
626
  return (jsxRuntime.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 })));
625
627
  });
626
628
 
629
+ const $Collapsible = CollapsiblePrimitive__namespace.Root;
630
+ const CollapsibleTrigger = CollapsiblePrimitive__namespace.CollapsibleTrigger;
631
+ const CollapsibleContent = CollapsiblePrimitive__namespace.CollapsibleContent;
632
+ const Collapsible = Object.assign($Collapsible, {
633
+ Trigger: CollapsibleTrigger,
634
+ Content: CollapsibleContent,
635
+ });
636
+
627
637
  const directionClasses = {
628
638
  row: {
629
639
  normal: 'flex-row',
@@ -2054,23 +2064,29 @@ const Sidebar = Object.assign($Sidebar, {
2054
2064
  const Navbar = ({ className, sidebarTriggerClassName, leftSlot, rightSlot, }) => (jsxRuntime.jsx(Block, { className: cn('border-b p-3 dark:border-slate-700', className), fullWidth: true, children: jsxRuntime.jsxs(Flex, { align: "center", justify: "between", children: [jsxRuntime.jsxs(Flex, { align: "center", children: [jsxRuntime.jsx(Sidebar.Trigger, { className: sidebarTriggerClassName }), leftSlot] }), rightSlot] }) }));
2055
2065
 
2056
2066
  const Layout = (_a) => {
2057
- var { children, className } = _a, _b = _a.sidebarProps, { basePath, header, items, footer } = _b, sidebarProps = __rest(_b, ["basePath", "header", "items", "footer"]), { navbarProps } = _a;
2058
- return (jsxRuntime.jsxs(Flex, { className: "h-screen w-screen gap-0 text-black dark:bg-slate-900 dark:text-white", children: [jsxRuntime.jsxs(Sidebar, Object.assign({ collapsible: "icon" }, sidebarProps, { children: [header && (jsxRuntime.jsx(Sidebar.Header, { children: jsxRuntime.jsx(Sidebar.Menu, { children: jsxRuntime.jsx(Sidebar.MenuItem, { children: header }) }) })), jsxRuntime.jsx(Sidebar.Content, { className: "gap-0", children: items
2059
- .filter((item) => !item.hidden)
2060
- .map((item, index) => item.type === 'item' ? (jsxRuntime.jsx(Sidebar.Group, { children: jsxRuntime.jsx(Sidebar.Menu, { children: jsxRuntime.jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, item)) }) }, index)) : (jsxRuntime.jsxs(Sidebar.Group, { children: [item.title && jsxRuntime.jsx(Sidebar.GroupLabel, { children: item.title }), jsxRuntime.jsx(Sidebar.GroupContent, { children: jsxRuntime.jsx(Sidebar.Menu, { children: item.items
2061
- .filter((subItem) => !subItem.hidden)
2062
- .map((subItem, index) => (jsxRuntime.jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, subItem), index))) }) })] }, index))) }), footer && (jsxRuntime.jsx(Sidebar.Footer, { children: jsxRuntime.jsx(Sidebar.Menu, { children: jsxRuntime.jsx(Sidebar.MenuItem, { children: footer }) }) })), jsxRuntime.jsx(Sidebar.Rail, {})] })), jsxRuntime.jsxs(Flex, { className: "gap-0 overflow-hidden", direction: "column", fullHeight: true, fullWidth: true, children: [navbarProps && jsxRuntime.jsx(Navbar, Object.assign({}, navbarProps)), jsxRuntime.jsx(Flex, { className: cn('overflow-hidden p-3', className), direction: "column", fullWidth: true, fullHeight: true, children: children })] })] }));
2067
+ var { children, className } = _a, _b = _a.sidebarProps, { basePath, header, items, extraContent, footer } = _b, sidebarProps = __rest(_b, ["basePath", "header", "items", "extraContent", "footer"]), { navbarProps } = _a;
2068
+ return (jsxRuntime.jsxs(Flex, { className: "h-screen w-screen gap-0 text-black dark:bg-slate-900 dark:text-white", children: [jsxRuntime.jsxs(Sidebar, Object.assign({ collapsible: "icon" }, sidebarProps, { children: [header && (jsxRuntime.jsx(Sidebar.Header, { children: jsxRuntime.jsx(Sidebar.Menu, { children: jsxRuntime.jsx(Sidebar.MenuItem, { children: header }) }) })), jsxRuntime.jsxs(Sidebar.Content, { className: "gap-0", children: [items
2069
+ .filter((item) => !item.hidden)
2070
+ .map((item, index) => item.type === 'item' ? (jsxRuntime.jsx(Sidebar.Group, { children: jsxRuntime.jsx(Sidebar.Menu, { children: jsxRuntime.jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, item)) }) }, index)) : (jsxRuntime.jsxs(Sidebar.Group, { children: [item.title && jsxRuntime.jsx(Sidebar.GroupLabel, { children: item.title }), jsxRuntime.jsx(Sidebar.GroupContent, { children: jsxRuntime.jsx(Sidebar.Menu, { children: item.items
2071
+ .filter((subItem) => !subItem.hidden)
2072
+ .map((subItem, index) => (jsxRuntime.jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, subItem), index))) }) })] }, index))), extraContent] }), footer && (jsxRuntime.jsx(Sidebar.Footer, { children: jsxRuntime.jsx(Sidebar.Menu, { children: jsxRuntime.jsx(Sidebar.MenuItem, { children: footer }) }) })), jsxRuntime.jsx(Sidebar.Rail, {})] })), jsxRuntime.jsxs(Flex, { className: "gap-0 overflow-hidden", direction: "column", fullHeight: true, fullWidth: true, children: [navbarProps && jsxRuntime.jsx(Navbar, Object.assign({}, navbarProps)), jsxRuntime.jsx(Flex, { className: cn('overflow-hidden p-3', className), direction: "column", fullWidth: true, fullHeight: true, children: children })] })] }));
2063
2073
  };
2064
2074
  const RenderSideBarItem = ({ basePath = '/', pathname, title, Icon, items, }) => {
2065
2075
  const location = reactRouterDom.useLocation();
2066
2076
  const { open } = useSidebar();
2067
2077
  const currentPath = react.useMemo(() => location.pathname.replace(basePath, '').replace(/^\/*/, ''), [basePath, location.pathname]);
2068
- return (jsxRuntime.jsxs(Sidebar.MenuItem, { children: [jsxRuntime.jsx(Sidebar.MenuButton, { asChild: true, tooltip: title, isActive: isLinkStartsWithPathname(currentPath, pathname) &&
2069
- (!items ||
2070
- (!open &&
2071
- items.some((item) => isLinkStartsWithPathname(currentPath, `${pathname}/${item.pathname}`)))), children: jsxRuntime.jsxs(reactRouterDom.Link, { to: pathname, className: "font-medium", children: [Icon && jsxRuntime.jsx(Icon, {}), title] }) }), items && (jsxRuntime.jsx(Sidebar.MenuSub, { children: items
2072
- .filter((subItem) => !subItem.hidden)
2073
- .map((subItem, index) => (jsxRuntime.jsx(Sidebar.MenuSubItem, { children: jsxRuntime.jsx(Sidebar.MenuSubButton, { asChild: true, isActive: isLinkStartsWithPathname(currentPath, `${pathname}/${subItem.pathname}`), children: jsxRuntime.jsx(reactRouterDom.Link, { to: `${pathname}/${subItem.pathname}`, children: subItem.title }) }) }, index))) }))] }));
2078
+ if (!(items === null || items === void 0 ? void 0 : items.filter((subItem) => !subItem.hidden).length)) {
2079
+ return (jsxRuntime.jsx(Sidebar.MenuItem, { children: jsxRuntime.jsx(Sidebar.MenuButton, { asChild: true, isActive: isLinkStartsWithPathname(currentPath, pathname), children: jsxRuntime.jsxs(reactRouterDom.Link, { to: pathname, className: "font-medium", children: [Icon && jsxRuntime.jsx(Icon, {}), title] }) }) }));
2080
+ }
2081
+ const isOpen = open &&
2082
+ (isLinkStartsWithPathname(currentPath, pathname) ||
2083
+ items.some((subItem) => isLinkStartsWithPathname(currentPath, `${pathname}/${subItem.pathname}`)));
2084
+ return (jsxRuntime.jsx(Collapsible, { asChild: true, open: isOpen, className: "group/collapsible", children: jsxRuntime.jsxs(Sidebar.MenuItem, { children: [jsxRuntime.jsx(Collapsible.Trigger, { asChild: true, children: jsxRuntime.jsx(Sidebar.MenuButton, { asChild: true, tooltip: title, isActive: open
2085
+ ? currentPath === pathname &&
2086
+ !items.some((subItem) => isLinkStartsWithPathname(currentPath, `${pathname}/${subItem.pathname}`))
2087
+ : isLinkStartsWithPathname(currentPath, pathname), children: jsxRuntime.jsxs(reactRouterDom.Link, { to: pathname, className: "font-medium", children: [Icon && jsxRuntime.jsx(Icon, {}), title, jsxRuntime.jsx(lucideReact.ChevronRightIcon, { className: "ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" })] }) }) }), items && (jsxRuntime.jsx(Collapsible.Content, { children: jsxRuntime.jsx(Sidebar.MenuSub, { children: items
2088
+ .filter((subItem) => !subItem.hidden)
2089
+ .map((subItem, index) => (jsxRuntime.jsx(Sidebar.MenuSubItem, { children: jsxRuntime.jsx(Sidebar.MenuSubButton, { asChild: true, isActive: isLinkStartsWithPathname(currentPath, `${pathname}/${subItem.pathname}`), children: jsxRuntime.jsx(reactRouterDom.Link, { to: `${pathname}/${subItem.pathname}`, children: subItem.title }) }) }, index))) }) }))] }) }));
2074
2090
  };
2075
2091
  function isLinkStartsWithPathname(link, pathname) {
2076
2092
  return pathname === '' ? link === pathname : link.startsWith(pathname);
@@ -2183,6 +2199,7 @@ exports.Block = Block;
2183
2199
  exports.Button = Button;
2184
2200
  exports.Card = Card;
2185
2201
  exports.CheckboxInput = CheckboxInput;
2202
+ exports.Collapsible = Collapsible;
2186
2203
  exports.ConfirmDialog = ConfirmDialog;
2187
2204
  exports.DataTable = DataTable;
2188
2205
  exports.DateTimeInput = DateTimeInput;
package/index.esm.js CHANGED
@@ -4,6 +4,7 @@ import { clsx } from 'clsx';
4
4
  import { twMerge } from 'tailwind-merge';
5
5
  import dayjs from 'dayjs';
6
6
  import advancedFormat from 'dayjs/plugin/advancedFormat';
7
+ import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
7
8
  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';
8
9
  import localeData from 'dayjs/plugin/localeData';
9
10
  import * as TooltipPrimitive from '@radix-ui/react-tooltip';
@@ -597,6 +598,14 @@ const Card = forwardRef((_a, ref) => {
597
598
  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 })));
598
599
  });
599
600
 
601
+ const $Collapsible = CollapsiblePrimitive.Root;
602
+ const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
603
+ const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
604
+ const Collapsible = Object.assign($Collapsible, {
605
+ Trigger: CollapsibleTrigger,
606
+ Content: CollapsibleContent,
607
+ });
608
+
600
609
  const directionClasses = {
601
610
  row: {
602
611
  normal: 'flex-row',
@@ -2027,23 +2036,29 @@ const Sidebar = Object.assign($Sidebar, {
2027
2036
  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] }) }));
2028
2037
 
2029
2038
  const Layout = (_a) => {
2030
- var { children, className } = _a, _b = _a.sidebarProps, { basePath, header, items, footer } = _b, sidebarProps = __rest(_b, ["basePath", "header", "items", "footer"]), { navbarProps } = _a;
2031
- return (jsxs(Flex, { className: "h-screen w-screen gap-0 text-black dark:bg-slate-900 dark:text-white", children: [jsxs(Sidebar, Object.assign({ collapsible: "icon" }, sidebarProps, { children: [header && (jsx(Sidebar.Header, { children: jsx(Sidebar.Menu, { children: jsx(Sidebar.MenuItem, { children: header }) }) })), jsx(Sidebar.Content, { className: "gap-0", children: items
2032
- .filter((item) => !item.hidden)
2033
- .map((item, index) => item.type === 'item' ? (jsx(Sidebar.Group, { children: jsx(Sidebar.Menu, { children: jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, item)) }) }, index)) : (jsxs(Sidebar.Group, { children: [item.title && jsx(Sidebar.GroupLabel, { children: item.title }), jsx(Sidebar.GroupContent, { children: jsx(Sidebar.Menu, { children: item.items
2034
- .filter((subItem) => !subItem.hidden)
2035
- .map((subItem, index) => (jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, subItem), index))) }) })] }, index))) }), footer && (jsx(Sidebar.Footer, { children: jsx(Sidebar.Menu, { children: jsx(Sidebar.MenuItem, { children: footer }) }) })), jsx(Sidebar.Rail, {})] })), jsxs(Flex, { className: "gap-0 overflow-hidden", direction: "column", fullHeight: true, fullWidth: true, children: [navbarProps && jsx(Navbar, Object.assign({}, navbarProps)), jsx(Flex, { className: cn('overflow-hidden p-3', className), direction: "column", fullWidth: true, fullHeight: true, children: children })] })] }));
2039
+ var { children, className } = _a, _b = _a.sidebarProps, { basePath, header, items, extraContent, footer } = _b, sidebarProps = __rest(_b, ["basePath", "header", "items", "extraContent", "footer"]), { navbarProps } = _a;
2040
+ return (jsxs(Flex, { className: "h-screen w-screen gap-0 text-black dark:bg-slate-900 dark:text-white", children: [jsxs(Sidebar, Object.assign({ collapsible: "icon" }, sidebarProps, { children: [header && (jsx(Sidebar.Header, { children: jsx(Sidebar.Menu, { children: jsx(Sidebar.MenuItem, { children: header }) }) })), jsxs(Sidebar.Content, { className: "gap-0", children: [items
2041
+ .filter((item) => !item.hidden)
2042
+ .map((item, index) => item.type === 'item' ? (jsx(Sidebar.Group, { children: jsx(Sidebar.Menu, { children: jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, item)) }) }, index)) : (jsxs(Sidebar.Group, { children: [item.title && jsx(Sidebar.GroupLabel, { children: item.title }), jsx(Sidebar.GroupContent, { children: jsx(Sidebar.Menu, { children: item.items
2043
+ .filter((subItem) => !subItem.hidden)
2044
+ .map((subItem, index) => (jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, subItem), index))) }) })] }, index))), extraContent] }), footer && (jsx(Sidebar.Footer, { children: jsx(Sidebar.Menu, { children: jsx(Sidebar.MenuItem, { children: footer }) }) })), jsx(Sidebar.Rail, {})] })), jsxs(Flex, { className: "gap-0 overflow-hidden", direction: "column", fullHeight: true, fullWidth: true, children: [navbarProps && jsx(Navbar, Object.assign({}, navbarProps)), jsx(Flex, { className: cn('overflow-hidden p-3', className), direction: "column", fullWidth: true, fullHeight: true, children: children })] })] }));
2036
2045
  };
2037
2046
  const RenderSideBarItem = ({ basePath = '/', pathname, title, Icon, items, }) => {
2038
2047
  const location = useLocation();
2039
2048
  const { open } = useSidebar();
2040
2049
  const currentPath = useMemo(() => location.pathname.replace(basePath, '').replace(/^\/*/, ''), [basePath, location.pathname]);
2041
- return (jsxs(Sidebar.MenuItem, { children: [jsx(Sidebar.MenuButton, { asChild: true, tooltip: title, isActive: isLinkStartsWithPathname(currentPath, pathname) &&
2042
- (!items ||
2043
- (!open &&
2044
- items.some((item) => isLinkStartsWithPathname(currentPath, `${pathname}/${item.pathname}`)))), children: jsxs(Link, { to: pathname, className: "font-medium", children: [Icon && jsx(Icon, {}), title] }) }), items && (jsx(Sidebar.MenuSub, { children: items
2045
- .filter((subItem) => !subItem.hidden)
2046
- .map((subItem, index) => (jsx(Sidebar.MenuSubItem, { children: jsx(Sidebar.MenuSubButton, { asChild: true, isActive: isLinkStartsWithPathname(currentPath, `${pathname}/${subItem.pathname}`), children: jsx(Link, { to: `${pathname}/${subItem.pathname}`, children: subItem.title }) }) }, index))) }))] }));
2050
+ if (!(items === null || items === void 0 ? void 0 : items.filter((subItem) => !subItem.hidden).length)) {
2051
+ return (jsx(Sidebar.MenuItem, { children: jsx(Sidebar.MenuButton, { asChild: true, isActive: isLinkStartsWithPathname(currentPath, pathname), children: jsxs(Link, { to: pathname, className: "font-medium", children: [Icon && jsx(Icon, {}), title] }) }) }));
2052
+ }
2053
+ const isOpen = open &&
2054
+ (isLinkStartsWithPathname(currentPath, pathname) ||
2055
+ items.some((subItem) => isLinkStartsWithPathname(currentPath, `${pathname}/${subItem.pathname}`)));
2056
+ return (jsx(Collapsible, { asChild: true, open: isOpen, className: "group/collapsible", children: jsxs(Sidebar.MenuItem, { children: [jsx(Collapsible.Trigger, { asChild: true, children: jsx(Sidebar.MenuButton, { asChild: true, tooltip: title, isActive: open
2057
+ ? currentPath === pathname &&
2058
+ !items.some((subItem) => isLinkStartsWithPathname(currentPath, `${pathname}/${subItem.pathname}`))
2059
+ : isLinkStartsWithPathname(currentPath, pathname), children: jsxs(Link, { to: pathname, className: "font-medium", children: [Icon && jsx(Icon, {}), title, jsx(ChevronRightIcon, { className: "ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" })] }) }) }), items && (jsx(Collapsible.Content, { children: jsx(Sidebar.MenuSub, { children: items
2060
+ .filter((subItem) => !subItem.hidden)
2061
+ .map((subItem, index) => (jsx(Sidebar.MenuSubItem, { children: jsx(Sidebar.MenuSubButton, { asChild: true, isActive: isLinkStartsWithPathname(currentPath, `${pathname}/${subItem.pathname}`), children: jsx(Link, { to: `${pathname}/${subItem.pathname}`, children: subItem.title }) }) }, index))) }) }))] }) }));
2047
2062
  };
2048
2063
  function isLinkStartsWithPathname(link, pathname) {
2049
2064
  return pathname === '' ? link === pathname : link.startsWith(pathname);
@@ -2149,4 +2164,4 @@ const ThemeSelector = ({ className }) => {
2149
2164
  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"] })] })] }));
2150
2165
  };
2151
2166
 
2152
- 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, SHOW_IDS_COOKIE_MAX_AGE, SHOW_IDS_COOKIE_NAME, 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 };
2167
+ export { Badge, BasicInput, BasicInputExtension, Block, Button, Card, CheckboxInput, Collapsible, 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, SHOW_IDS_COOKIE_MAX_AGE, SHOW_IDS_COOKIE_NAME, 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 CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "tw-react-components",
3
3
  "description": "A set of React components build with TailwindCSS to make a nice dashboard.",
4
- "version": "0.0.145",
4
+ "version": "0.0.147",
5
5
  "license": "MIT",
6
6
  "homepage": "https://bacali95.github.io/tw-react-components",
7
7
  "author": {
@@ -0,0 +1,5 @@
1
+ import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
2
+ export declare const Collapsible: import("react").ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & import("react").RefAttributes<HTMLDivElement>> & {
3
+ Trigger: import("react").ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
4
+ Content: import("react").ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleContentProps & import("react").RefAttributes<HTMLDivElement>>;
5
+ };
@@ -20,6 +20,7 @@ export type SidebarProps = ComponentProps<typeof Sidebar> & {
20
20
  hidden?: boolean;
21
21
  items: SidebarItem[];
22
22
  })[];
23
+ extraContent?: ReactNode;
23
24
  footer?: ReactNode;
24
25
  };
25
26
  type Props = {
@@ -2,6 +2,7 @@ export * from './Badge';
2
2
  export * from './Block';
3
3
  export * from './Button';
4
4
  export * from './Card';
5
+ export * from './Collapsible';
5
6
  export * from './DataTable';
6
7
  export * from './Dialog';
7
8
  export * from './DropdownMenu';
@@ -1,4 +1,3 @@
1
- const { fontFamily } = require('tailwindcss/defaultTheme');
2
1
  const plugin = require('tailwindcss/plugin');
3
2
 
4
3
  module.exports = plugin(
@@ -65,9 +64,6 @@ module.exports = plugin(
65
64
  md: `calc(var(--radius) - 2px)`,
66
65
  sm: 'calc(var(--radius) - 4px)',
67
66
  },
68
- fontFamily: {
69
- sans: ['var(--font-sans)', ...fontFamily.sans],
70
- },
71
67
  keyframes: {
72
68
  'accordion-down': {
73
69
  from: { height: '0' },