tw-react-components 0.0.167 → 0.0.168

package/index.esm.js

@@ -5,7 +5,7 @@ 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, MoonIcon, SunIcon, MonitorIcon } from 'lucide-react';
+import { HelpCircle, XIcon, AtSignIcon, EyeIcon, EyeOffIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, CalendarIcon, ClockIcon, CheckIcon, CircleIcon, CloudUploadIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsDownUpIcon, ChevronsUpDownIcon, ArrowUpDownIcon, SortAscIcon, SortDescIcon, MinusIcon, PlusIcon, PanelLeft, GripVertical, MoonIcon, SunIcon, MonitorIcon } 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';
@@ -20,6 +20,7 @@ import { CSS } from '@dnd-kit/utilities';
 import { Slot } from '@radix-ui/react-slot';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as ResizablePrimitive from 'react-resizable-panels';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 
@@ -2099,6 +2100,24 @@ const Popover = Object.assign($Popover, {
     Content: PopoverContent,
 });
 
+const ResizablePanelGroup = (_a) => {
+    var { className, dataTestId = 'resizable-panel-group' } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx(ResizablePrimitive.PanelGroup, Object.assign({ className: cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', className), "data-testid": dataTestId }, props)));
+};
+const ResizablePanel = (_a) => {
+    var { dataTestId = 'resizable-panel' } = _a, props = __rest(_a, ["dataTestId"]);
+    return (jsx(ResizablePrimitive.Panel, Object.assign({ "data-testid": dataTestId }, props)));
+};
+const ResizableHandle = (_a) => {
+    var { withHandle, className, dataTestId = 'resizable-handle' } = _a, props = __rest(_a, ["withHandle", "className", "dataTestId"]);
+    return (jsx(ResizablePrimitive.PanelResizeHandle, Object.assign({ className: cn('bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1', 'data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90', className), "data-testid": dataTestId }, props, { children: withHandle && (jsx("div", { className: "bg-border z-10 flex h-4 w-3 items-center justify-center rounded-sm border", "data-testid": `${dataTestId}-handle`, children: jsx(GripVertical, { className: "h-2.5 w-2.5" }) })) })));
+};
+const Resizable = {
+    PanelGroup: ResizablePanelGroup,
+    Panel: ResizablePanel,
+    Handle: ResizableHandle,
+};
+
 const Switch = (_a) => {
     var { className } = _a, _b = _a.thumbProps, _c = _b === void 0 ? {} : _b, { className: thumbClassName } = _c, thumbProps = __rest(_c, ["className"]), { dataTestId = 'switch' } = _a, props = __rest(_a, ["className", "thumbProps", "dataTestId"]);
     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), "data-testid": dataTestId }, props, { 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), "data-testid": `${dataTestId}-thumb` }, thumbProps)) })));
@@ -2193,4 +2212,4 @@ const ThemeSelector = ({ className, dataTestId = 'theme-selector' }) => {
     return (jsxs(DropdownMenu, { children: [jsx(DropdownMenu.Trigger, { asChild: true, dataTestId: `${dataTestId}-trigger`, children: jsx(Button, { prefixIcon: resolvedTheme === 'dark' ? MoonIcon : SunIcon, className: className, variant: "text" }) }), jsxs(DropdownMenu.Content, { dataTestId: `${dataTestId}-content`, children: [jsxs(DropdownMenu.Item, { onClick: () => setTheme('light'), dataTestId: `${dataTestId}-light`, children: [jsx(DropdownMenu.Icon, { icon: SunIcon }), "Light"] }), jsxs(DropdownMenu.Item, { onClick: () => setTheme('dark'), dataTestId: `${dataTestId}-dark`, children: [jsx(DropdownMenu.Icon, { icon: MoonIcon }), "Dark"] }), jsxs(DropdownMenu.Item, { onClick: () => setTheme('system'), dataTestId: `${dataTestId}-system`, children: [jsx(DropdownMenu.Icon, { icon: MonitorIcon }), "System"] })] })] }));
 };
 
-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, resolveTargetObject, useDays, useIsMobile, useLayoutContext, useLongPress, useMonths, useOnSwipe, useOutsideClick, usePagination, useSidebar };
+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, Tooltip, cn, compareDates, generalComparator, getDisplayDate, getValueFromCookie, isEmpty, resolveTargetObject, useDays, useIsMobile, useLayoutContext, useLongPress, useMonths, useOnSwipe, useOutsideClick, usePagination, useSidebar };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tw-react-components",
   "description": "A set of React components build with TailwindCSS to make a nice dashboard.",
-  "version": "0.0.167",
+  "version": "0.0.168",
   "license": "MIT",
   "homepage": "https://bacali95.github.io/tw-react-components",
   "type": "module",

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

@@ -0,0 +1,17 @@
+import type { FC } from 'react';
+import * as ResizablePrimitive from 'react-resizable-panels';
+export type ResizablePanelGroupProps = React.ComponentProps<typeof ResizablePrimitive.PanelGroup> & {
+    dataTestId?: string;
+};
+export type ResizablePanelProps = React.ComponentProps<typeof ResizablePrimitive.Panel> & {
+    dataTestId?: string;
+};
+export type ResizableHandleProps = React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+    withHandle?: boolean;
+    dataTestId?: string;
+};
+export declare const Resizable: {
+    PanelGroup: FC<ResizablePanelGroupProps>;
+    Panel: FC<ResizablePanelProps>;
+    Handle: FC<ResizableHandleProps>;
+};

package/src/components/index.d.ts

@@ -15,6 +15,7 @@ export * from './ListSorter';
 export * from './Navbar';
 export * from './Pagination';
 export * from './Popover';
+export * from './Resizable';
 export * from './Separator';
 export * from './Sheet';
 export * from './Sidebar';