tw-react-components 0.0.184 → 0.0.187

package/README.md

@@ -71,20 +71,17 @@ Add the following import to your main CSS file:
 This library provides a wide range of components:
 
 - **Layout:** Building blocks for page layouts
-
   - `Layout` - Main container for your application
   - `Flex` - Flexible box layout component
   - `Block` - Block-level layout component
   - `Card` - Container with styling and functionality
 
 - **Navigation:**
-
   - `Navbar` - Top navigation bar
   - `Sidebar` - Side navigation component
   - `Tabs` - Tabbed interface component
 
 - **Data Display:**
-
   - `Table` - Regular table component
   - `DataTable` - Advanced data table with sorting and filtering
   - `List` - Displaying lists of data
@@ -92,13 +89,11 @@ This library provides a wide range of components:
   - `Badge` - Small status indicator
 
 - **Input & Form:**
-
   - `Button` - Various button styles
   - `Form` - Form controls and helpers
   - `Switch` - Toggle switch component
 
 - **Feedback & Overlay:**
-
   - `Dialog` - Modal dialog boxes
   - `Popover` - Content that appears over the UI
   - `Tooltip` - Information shown on hover

package/index.esm.js

@@ -1,11 +1,12 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDownIcon, HelpCircle, XIcon, AtSignIcon, EyeIcon, EyeOffIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CalendarIcon, ClockIcon, CheckIcon, CircleIcon, CloudUploadIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsDownUpIcon, ChevronsUpDownIcon, ArrowUpDownIcon, SortAscIcon, SortDescIcon, MinusIcon, PlusIcon, PanelLeft, GripVertical, MoonIcon, SunIcon, MonitorIcon, X } from 'lucide-react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import dayjs from 'dayjs';
 import 'dayjs/locale/en.js';
 import advancedFormat from 'dayjs/plugin/advancedFormat.js';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
-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, GripVertical, MoonIcon, SunIcon, MonitorIcon, X } from 'lucide-react';
 import { useMemo, useState, useEffect, useId, useCallback, useRef, createContext, useContext } from 'react';
 import localeData from 'dayjs/plugin/localeData.js';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
@@ -143,6 +144,28 @@ function resolveTargetObject(payload, fieldChain, defaultValue) {
     return resolveTargetObject(payload[key], rest, defaultValue);
 }
 
+const $Accordion = (_a) => {
+    var { dataTestId = 'accordion' } = _a, props = __rest(_a, ["dataTestId"]);
+    return (jsx(AccordionPrimitive.Root, Object.assign({ "data-testid": dataTestId, "data-slot": "accordion" }, props)));
+};
+const AccordionItem = (_a) => {
+    var { className, dataTestId = 'accordion-item' } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx(AccordionPrimitive.Item, Object.assign({ className: cn('border-b last:border-b-0', className), "data-slot": "accordion-item", "data-testid": dataTestId }, props)));
+};
+const AccordionTrigger = (_a) => {
+    var { className, children, dataTestId = 'accordion-trigger' } = _a, props = __rest(_a, ["className", "children", "dataTestId"]);
+    return (jsx(AccordionPrimitive.Header, { className: "flex", children: jsxs(AccordionPrimitive.Trigger, Object.assign({ className: cn('focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 cursor-pointer items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180', className), "data-slot": "accordion-trigger", "data-testid": dataTestId }, props, { children: [children, jsx(ChevronDownIcon, { className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })] })) }));
+};
+const AccordionContent = (_a) => {
+    var { className, children, dataTestId = 'accordion-content' } = _a, props = __rest(_a, ["className", "children", "dataTestId"]);
+    return (jsx(AccordionPrimitive.Content, Object.assign({ className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm", "data-slot": "accordion-content", "data-testid": dataTestId }, props, { children: jsx("div", { className: cn('pt-0 pb-4', className), children: children }) })));
+};
+const Accordion = Object.assign($Accordion, {
+    Item: AccordionItem,
+    Trigger: AccordionTrigger,
+    Content: AccordionContent,
+});
+
 const Block = (_a) => {
     var { children, className, centered, container, fullWidth, fullHeight, dataTestId = 'block' } = _a, props = __rest(_a, ["children", "className", "centered", "container", "fullWidth", "fullHeight", "dataTestId"]);
     return (jsx("div", Object.assign({ "data-testid": dataTestId, className: cn(centered && 'mx-auto', container && 'container', fullWidth && 'w-full', fullHeight && 'h-full', className) }, props, { children: children })));
@@ -1964,7 +1987,7 @@ const SidebarContextProvider = (_a) => {
     var { defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children } = _a, props = __rest(_a, ["defaultOpen", "open", "onOpenChange", "className", "style", "children"]);
     const isMobile = useIsMobile();
     const [openMobile, setOpenMobile] = useState(false);
-    const screenRef = useRef(typeof document === 'undefined' ? null : document.documentElement);
+    useRef(typeof document === 'undefined' ? null : 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(getValueFromCookie(SIDEBAR_COOKIE_NAME, defaultOpen));
@@ -1982,16 +2005,6 @@ const SidebarContextProvider = (_a) => {
     const toggleSidebar = useCallback(() => {
         return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
     }, [isMobile, setOpen, setOpenMobile]);
-    // Add swipe gesture support for opening and closing the sidebar.
-    useOnSwipe(screenRef, (direction) => {
-        const _setOpen = isMobile ? setOpenMobile : setOpen;
-        if (direction === 'right') {
-            _setOpen(true);
-        }
-        else if (direction === 'left') {
-            _setOpen(false);
-        }
-    });
     // Adds a keyboard shortcut to toggle the sidebar.
     useEffect(() => {
         const handleKeyDown = (event) => {
@@ -2432,4 +2445,4 @@ function Toaster() {
             }), jsx(Toast.Viewport, {})] }));
 }
 
-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, Resizable, 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, Toast, Toaster, Tooltip, cn, compareDates, generalComparator, getDisplayDate, getValueFromCookie, isEmpty, reducer, resolveTargetObject, toast, useDays, useIsMobile, useLayoutContext, useLongPress, useMonths, useOnSwipe, useOutsideClick, usePagination, useSidebar, useToast };
+export { Accordion, 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, Resizable, 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, Toast, Toaster, Tooltip, cn, compareDates, generalComparator, getDisplayDate, getValueFromCookie, isEmpty, reducer, resolveTargetObject, toast, useDays, useIsMobile, useLayoutContext, useLongPress, useMonths, useOnSwipe, useOutsideClick, usePagination, useSidebar, useToast };

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.184",
+  "version": "0.0.187",
   "license": "MIT",
   "homepage": "https://bacali95.github.io/tw-react-components",
   "type": "module",
@@ -20,7 +20,7 @@
   "exports": {
     ".": {
       "import": "./index.esm.js",
-      "types": "./index.esm.d.ts"
+      "types": "./index.d.ts"
     },
     "./css": {
       "default": "./index.css"
@@ -35,5 +35,5 @@
   },
   "module": "./index.esm.js",
   "main": "./index.esm.js",
-  "types": "./index.esm.d.ts"
+  "types": "./index.d.ts"
 }

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

@@ -0,0 +1,19 @@
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import type { ComponentProps, FC } from 'react';
+export type AccordionProps = ComponentProps<typeof AccordionPrimitive.Root> & {
+    dataTestId?: string;
+};
+export type AccordionItemProps = ComponentProps<typeof AccordionPrimitive.Item> & {
+    dataTestId?: string;
+};
+export type AccordionTriggerProps = ComponentProps<typeof AccordionPrimitive.Trigger> & {
+    dataTestId?: string;
+};
+export type AccordionContentProps = ComponentProps<typeof AccordionPrimitive.Content> & {
+    dataTestId?: string;
+};
+export declare const Accordion: FC<AccordionProps> & {
+    Item: FC<AccordionItemProps>;
+    Trigger: FC<AccordionTriggerProps>;
+    Content: FC<AccordionContentProps>;
+};

package/src/components/index.d.ts

@@ -1,3 +1,4 @@
+export * from './Accordion';
 export * from './Badge';
 export * from './Block';
 export * from './Button';