tw-react-components 0.0.178 → 0.0.180

package/index.css

@@ -26,8 +26,11 @@
     --accent: 210 40% 96.1%;
     --accent-foreground: 222.2 47.4% 11.2%;
 
-    --destructive: 0 100% 50%;
-    --destructive-foreground: 210 40% 98%;
+    --success: var(--color-green-500);
+    --success-foreground: var(--color-neutral-50);
+
+    --destructive: var(--color-red-500);
+    --destructive-foreground: var(--color-neutral-50);
 
     --ring: 215 20.2% 65.1%;
 
@@ -68,8 +71,11 @@
     --secondary: 222.2 47.4% 11.2%;
     --secondary-foreground: 210 40% 98%;
 
-    --destructive: 0 63% 31%;
-    --destructive-foreground: 210 40% 98%;
+    --success: var(--color-green-600);
+    --success-foreground: var(--color-gray-100);
+
+    --destructive: var(--color-red-600);
+    --destructive-foreground: var(--color-gray-100);
 
     --ring: 216 34% 17%;
 

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, GripVertical, 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, 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';
@@ -23,6 +23,7 @@ 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';
+import * as ToastPrimitives from '@radix-ui/react-toast';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -786,6 +787,98 @@ function usePagination(currentIndex, totalPages) {
     }, [currentIndex, totalPages]);
 }
 
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 5000; // 5 seconds
+let count = 0;
+function genId() {
+    count = (count + 1) % Number.MAX_SAFE_INTEGER;
+    return count.toString();
+}
+const toastTimeouts = new Map();
+const addToRemoveQueue = (toastId) => {
+    if (toastTimeouts.has(toastId)) {
+        return;
+    }
+    const timeout = setTimeout(() => {
+        toastTimeouts.delete(toastId);
+        dispatch({
+            type: 'REMOVE_TOAST',
+            toastId: toastId,
+        });
+    }, TOAST_REMOVE_DELAY);
+    toastTimeouts.set(toastId, timeout);
+};
+const reducer = (state, action) => {
+    switch (action.type) {
+        case 'ADD_TOAST':
+            return Object.assign(Object.assign({}, state), { toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT) });
+        case 'UPDATE_TOAST':
+            return Object.assign(Object.assign({}, state), { toasts: state.toasts.map((t) => (t.id === action.toast.id ? Object.assign(Object.assign({}, t), action.toast) : t)) });
+        case 'DISMISS_TOAST': {
+            const { toastId } = action;
+            // ! Side effects ! - This could be extracted into a dismissToast() action,
+            // but I'll keep it here for simplicity
+            if (toastId) {
+                addToRemoveQueue(toastId);
+            }
+            else {
+                state.toasts.forEach((toast) => {
+                    addToRemoveQueue(toast.id);
+                });
+            }
+            return Object.assign(Object.assign({}, state), { toasts: state.toasts.map((t) => t.id === toastId || toastId === undefined
+                    ? Object.assign(Object.assign({}, t), { open: false }) : t) });
+        }
+        case 'REMOVE_TOAST':
+            if (action.toastId === undefined) {
+                return Object.assign(Object.assign({}, state), { toasts: [] });
+            }
+            return Object.assign(Object.assign({}, state), { toasts: state.toasts.filter((t) => t.id !== action.toastId) });
+    }
+};
+const listeners = [];
+let memoryState = { toasts: [] };
+function dispatch(action) {
+    memoryState = reducer(memoryState, action);
+    listeners.forEach((listener) => {
+        listener(memoryState);
+    });
+}
+function toast(_a) {
+    var props = __rest(_a, []);
+    const id = genId();
+    const update = (props) => dispatch({
+        type: 'UPDATE_TOAST',
+        toast: Object.assign(Object.assign({}, props), { id }),
+    });
+    const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id });
+    dispatch({
+        type: 'ADD_TOAST',
+        toast: Object.assign(Object.assign({}, props), { id, open: true, onOpenChange: (open) => {
+                if (!open)
+                    dismiss();
+            } }),
+    });
+    return {
+        id: id,
+        dismiss,
+        update,
+    };
+}
+function useToast() {
+    const [state, setState] = useState(memoryState);
+    useEffect(() => {
+        listeners.push(setState);
+        return () => {
+            const index = listeners.indexOf(setState);
+            if (index > -1) {
+                listeners.splice(index, 1);
+            }
+        };
+    }, [state]);
+    return Object.assign(Object.assign({}, state), { toast, dismiss: (toastId) => dispatch({ type: 'DISMISS_TOAST', toastId }) });
+}
+
 const Tooltip = ({ children, className, content, asChild, placement, dataTestId = 'tooltip', }) => (jsx(TooltipPrimitive.Provider, { delayDuration: 200, children: jsxs(TooltipPrimitive.Root, { children: [jsx(TooltipPrimitive.Trigger, { asChild: asChild, "data-testid": `${dataTestId}-trigger`, children: children }), jsx(TooltipPrimitive.Portal, { children: jsx(TooltipPrimitive.Content, { className: cn('animate-in fade-in-0 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', 'z-[101] overflow-hidden rounded-md border bg-white px-3 py-1.5 text-sm shadow-md dark:border-slate-700 dark:bg-slate-800 dark:text-white', className), side: placement, sideOffset: 5, "data-testid": `${dataTestId}-content`, children: content }) })] }) }));
 
 const Label = ({ children, className, description, required, hasErrors, htmlFor, dataTestId = 'label', }) => {
@@ -2246,4 +2339,65 @@ 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, 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 };
+const ToastProvider = ToastPrimitives.Provider;
+const ToastViewport = (_a) => {
+    var { className, dataTestId = 'toast-viewport' } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx(ToastPrimitives.Viewport, Object.assign({ className: cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:top-auto sm:right-0 sm:bottom-0 sm:flex-col md:max-w-[420px]', className), "data-testid": dataTestId }, props)));
+};
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+const toastVariants = cva('group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full', {
+    variants: {
+        variant: {
+            default: 'border bg-background text-foreground',
+            success: 'success group border-success bg-success text-success-foreground',
+            destructive: 'destructive group border-destructive bg-destructive text-destructive-foreground',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+const ToastRoot = (_a) => {
+    var { className, variant, dataTestId = 'toast' } = _a, props = __rest(_a, ["className", "variant", "dataTestId"]);
+    return (jsx(ToastPrimitives.Root, Object.assign({ className: cn(toastVariants({ variant }), className), "data-testid": dataTestId }, props)));
+};
+ToastRoot.displayName = ToastPrimitives.Root.displayName;
+const ToastAction = (_a) => {
+    var { className, dataTestId = 'toast-action' } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx(ToastPrimitives.Action, Object.assign({ className: cn('hover:bg-secondary focus:ring-ring inline-flex h-8 shrink-0 cursor-pointer items-center justify-center rounded-md border bg-transparent px-3 font-medium transition-colors focus:ring-1 focus:outline-none disabled:pointer-events-none disabled:opacity-50', 'group-[.success]:border-muted/40 group-[.success]:hover:border-success/30 group-[.success]:hover:bg-success group-[.success]:hover:text-success-foreground group-[.success]:focus:ring-success', 'group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive', className), "data-testid": dataTestId }, props)));
+};
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+const ToastClose = (_a) => {
+    var { className, dataTestId = 'toast-close' } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx(ToastPrimitives.Close, Object.assign({ className: cn('text-foreground/50 hover:text-foreground absolute top-1 right-1 cursor-pointer rounded-md p-1 opacity-0 transition-opacity group-hover:opacity-100 focus:opacity-100 focus:ring-1 focus:outline-none', 'group-[.success]:text-green-300 group-[.success]:hover:text-green-50 group-[.success]:focus:ring-green-400 group-[.success]:focus:ring-offset-green-600', 'group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', className), "toast-close": "", "data-testid": dataTestId }, props, { children: jsx(X, { className: "h-4 w-4" }) })));
+};
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+const ToastTitle = (_a) => {
+    var { className, dataTestId = 'toast-title' } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx(ToastPrimitives.Title, Object.assign({ className: cn('font-semibold [&+div]:text-sm', className), "data-testid": dataTestId }, props)));
+};
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+const ToastDescription = (_a) => {
+    var { className, dataTestId = 'toast-description' } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx(ToastPrimitives.Description, Object.assign({ className: cn('opacity-90', className), "data-testid": dataTestId }, props)));
+};
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+const Toast = Object.assign({}, {
+    Provider: ToastProvider,
+    Viewport: ToastViewport,
+    Root: ToastRoot,
+    Title: ToastTitle,
+    Description: ToastDescription,
+    Close: ToastClose,
+    Action: ToastAction,
+});
+
+function Toaster() {
+    const { toasts } = useToast();
+    return (jsxs(Toast.Provider, { children: [toasts.map(function (_a) {
+                var { id, title, description, action } = _a, props = __rest(_a, ["id", "title", "description", "action"]);
+                return (jsxs(Toast.Root, Object.assign({}, props, { children: [jsxs("div", { className: "grid gap-1", children: [title && jsx(Toast.Title, { children: title }), description && jsx(Toast.Description, { children: description })] }), action, jsx(Toast.Close, {})] }), id));
+            }), 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 };

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

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

@@ -0,0 +1,36 @@
+import * as ToastPrimitives from '@radix-ui/react-toast';
+import { type VariantProps } from 'class-variance-authority';
+import type { ComponentProps, FC, ReactElement } from 'react';
+export type ToastViewportProps = ComponentProps<typeof ToastPrimitives.Viewport> & {
+    dataTestId?: string;
+};
+declare const toastVariants: (props?: ({
+    variant?: "default" | "success" | "destructive" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export type ToastProps = ComponentProps<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants> & {
+    dataTestId?: string;
+};
+export type ToastActionProps = ComponentProps<typeof ToastPrimitives.Action> & {
+    dataTestId?: string;
+};
+declare const ToastAction: FC<ToastActionProps>;
+export type ToastCloseProps = ComponentProps<typeof ToastPrimitives.Close> & {
+    dataTestId?: string;
+};
+export type ToastTitleProps = ComponentProps<typeof ToastPrimitives.Title> & {
+    dataTestId?: string;
+};
+export type ToastDescriptionProps = ComponentProps<typeof ToastPrimitives.Description> & {
+    dataTestId?: string;
+};
+export type ToastActionElement = ReactElement<typeof ToastAction>;
+export declare const Toast: {
+    Provider: FC<ToastPrimitives.ToastProviderProps>;
+    Viewport: FC<ToastViewportProps>;
+    Root: FC<ToastProps>;
+    Title: FC<ToastTitleProps>;
+    Description: FC<ToastDescriptionProps>;
+    Close: FC<ToastCloseProps>;
+    Action: FC<ToastActionProps>;
+};
+export {};

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

@@ -0,0 +1 @@
+export declare function Toaster(): import("react/jsx-runtime").JSX.Element;

package/src/components/index.d.ts

@@ -25,5 +25,7 @@ export * from './Switch';
 export * from './Table';
 export * from './Tabs';
 export * from './ThemeSelector';
+export * from './Toast';
+export * from './Toaster';
 export * from './Tooltip';
 export * from './types';

package/src/hooks/index.d.ts

@@ -5,3 +5,4 @@ export * from './useMonths';
 export * from './useOnSwipe';
 export * from './useOutsideClick';
 export * from './usePagination';
+export * from './useToast';

package/src/hooks/useToast.d.ts

@@ -0,0 +1,44 @@
+import { type ReactNode } from 'react';
+import type { ToastActionElement, ToastProps } from '../components';
+export type ToasterToast = ToastProps & {
+    id: string;
+    title?: ReactNode;
+    description?: ReactNode;
+    action?: ToastActionElement;
+};
+declare const actionTypes: {
+    readonly ADD_TOAST: "ADD_TOAST";
+    readonly UPDATE_TOAST: "UPDATE_TOAST";
+    readonly DISMISS_TOAST: "DISMISS_TOAST";
+    readonly REMOVE_TOAST: "REMOVE_TOAST";
+};
+type ActionType = typeof actionTypes;
+type Action = {
+    type: ActionType['ADD_TOAST'];
+    toast: ToasterToast;
+} | {
+    type: ActionType['UPDATE_TOAST'];
+    toast: Partial<ToasterToast>;
+} | {
+    type: ActionType['DISMISS_TOAST'];
+    toastId?: ToasterToast['id'];
+} | {
+    type: ActionType['REMOVE_TOAST'];
+    toastId?: ToasterToast['id'];
+};
+interface State {
+    toasts: ToasterToast[];
+}
+export declare const reducer: (state: State, action: Action) => State;
+type Toast = Omit<ToasterToast, 'id'>;
+declare function toast({ ...props }: Toast): {
+    id: string;
+    dismiss: () => void;
+    update: (props: ToasterToast) => void;
+};
+declare function useToast(): {
+    toast: typeof toast;
+    dismiss: (toastId?: string) => void;
+    toasts: ToasterToast[];
+};
+export { useToast, toast };

package/tailwindcss-plugin.cjs

@@ -28,9 +28,13 @@ module.exports = plugin(
             DEFAULT: 'hsl(var(--secondary))',
             foreground: 'hsl(var(--secondary-foreground))',
           },
+          success: {
+            DEFAULT: 'var(--success)',
+            foreground: 'var(--success-foreground)',
+          },
           destructive: {
-            DEFAULT: 'hsl(var(--destructive))',
-            foreground: 'hsl(var(--destructive-foreground))',
+            DEFAULT: 'var(--destructive)',
+            foreground: 'var(--destructive-foreground)',
           },
           muted: {
             DEFAULT: 'hsl(var(--muted))',