@choice-ui/react 1.6.8 → 1.7.0

package/dist/components/toast/src/tv.js

@@ -0,0 +1,412 @@
+import { tcv } from "../../../shared/utils/tcx/tcx.js";
+const toastViewportTv = tcv({
+  base: ["fixed z-modals flex flex-col outline-none"],
+  variants: {
+    expanded: {
+      true: {},
+      false: {}
+    },
+    layout: {
+      default: "w-72 max-w-[calc(100vw-2rem)]",
+      compact: "w-fit min-w-48 max-w-[calc(100vw-2rem)]"
+    },
+    position: {
+      "top-left": "top-(--toast-offset) left-(--toast-offset) items-start",
+      "top-center": "top-(--toast-offset) left-1/2 -translate-x-1/2 items-center",
+      "top-right": "top-(--toast-offset) right-(--toast-offset) items-end",
+      "bottom-left": "bottom-(--toast-offset) left-(--toast-offset) items-start",
+      "bottom-center": "bottom-(--toast-offset) left-1/2 -translate-x-1/2 items-center",
+      "bottom-right": "bottom-(--toast-offset) right-(--toast-offset) items-end"
+    }
+  },
+  defaultVariants: {
+    position: "bottom-right",
+    expanded: false
+  }
+});
+const toastRootTv = tcv({
+  slots: {
+    root: [
+      "bg-(--toast-background-color) shadow-lg",
+      "absolute pointer-events-auto",
+      "flex",
+      "select-none touch-none overflow-hidden"
+    ],
+    icon: [
+      "shrink-0 self-center w-6 h-6 flex items-center justify-center",
+      "transition-opacity duration-200"
+    ],
+    content: [
+      "grid min-w-0 h-full items-center",
+      "overflow-hidden",
+      "transition-opacity duration-200",
+      "opacity-100"
+    ],
+    actions: [
+      "flex items-center justify-center truncate",
+      "transition-opacity duration-200 pointer-events-auto self-stretch"
+    ],
+    button: "flex items-center justify-center pointer-events-auto px-2",
+    title: "text-body-medium-strong min-w-0",
+    description: "text-body-medium",
+    progressTrack: "absolute overflow-hidden pointer-events-none",
+    progressIndicator: "h-full origin-left"
+  },
+  variants: {
+    position: {
+      "top-left": {
+        root: "left-0 top-0 origin-top"
+      },
+      "top-center": {
+        root: "top-0 origin-top"
+      },
+      "top-right": {
+        root: "right-0 top-0 origin-top"
+      },
+      "bottom-left": {
+        root: "left-0 bottom-0 origin-bottom"
+      },
+      "bottom-center": {
+        root: "bottom-0 origin-bottom"
+      },
+      "bottom-right": {
+        root: "right-0 bottom-0 origin-bottom"
+      }
+    },
+    hasDescription: {
+      true: {
+        icon: "row-span-2"
+      }
+    },
+    hasActions: {
+      true: {
+        root: "grid-cols-[1fr_auto] grid"
+      },
+      false: {
+        content: "pr-3"
+      }
+    },
+    hasIcon: {
+      true: {
+        content: "pl-2 pr-2 grid-cols-[1.5rem_auto] gap-x-2"
+      },
+      false: {
+        content: "pl-3 pr-2"
+      }
+    },
+    expanded: {
+      true: {
+        icon: "opacity-100 pointer-events-auto",
+        content: "opacity-100 pointer-events-auto",
+        actions: "opacity-100 pointer-events-auto"
+      }
+    },
+    behind: {
+      true: {
+        icon: "opacity-0 pointer-events-none",
+        content: "opacity-0 pointer-events-none",
+        actions: "opacity-0 pointer-events-none"
+      }
+    },
+    layout: {
+      default: {
+        root: "left-0 right-0 w-full items-center transition-colors delay-100 duration-400 rounded-lg",
+        content: "py-3 min-h-14 relative",
+        title: "line-clamp-2",
+        description: "line-clamp-3 opacity-70",
+        actions: "border-l text-white grid",
+        button: "w-full h-full [&+button]:border-t"
+      },
+      compact: {
+        root: "w-fit h-10 overflow-hidden rounded-xl",
+        content: "flex items-center h-10 min-w-fit",
+        title: "truncate",
+        actions: "flex items-center min-w-fit",
+        button: ""
+      }
+    },
+    variant: {
+      default: {},
+      accent: {},
+      success: {},
+      warning: {},
+      error: {},
+      assistive: {},
+      reset: {}
+    },
+    type: {
+      default: {},
+      info: {},
+      success: {},
+      warning: {},
+      error: {},
+      loading: {}
+    },
+    buttonVariant: {
+      action: {},
+      cancel: {}
+    }
+  },
+  compoundVariants: [
+    // text color
+    {
+      variant: ["accent", "success", "default", "error", "assistive"],
+      class: {
+        root: "text-white"
+      }
+    },
+    {
+      variant: "warning",
+      class: {
+        root: "text-gray-900"
+      }
+    },
+    // Type color
+    {
+      variant: "default",
+      type: ["default", "loading"],
+      class: {
+        icon: "text-white",
+        progressIndicator: "bg-white"
+      }
+    },
+    {
+      variant: "default",
+      type: "info",
+      class: {
+        icon: "text-accent-foreground",
+        progressIndicator: "bg-accent-foreground"
+      }
+    },
+    {
+      variant: "default",
+      type: "success",
+      class: {
+        icon: "text-success-foreground",
+        progressIndicator: "bg-success-foreground"
+      }
+    },
+    {
+      variant: "default",
+      type: "warning",
+      class: {
+        icon: "text-warning-foreground",
+        progressIndicator: "bg-warning-foreground"
+      }
+    },
+    {
+      variant: "default",
+      type: "error",
+      class: {
+        icon: "text-danger-foreground",
+        progressIndicator: "bg-danger-foreground"
+      }
+    },
+    // button in layout
+    {
+      layout: "default",
+      variant: "default",
+      class: {
+        actions: "border-menu-boundary",
+        button: "border-menu-boundary"
+      }
+    },
+    {
+      layout: "default",
+      variant: ["accent", "success", "warning", "error", "assistive"],
+      class: {
+        actions: "border-black/20",
+        button: "border-black/20"
+      }
+    },
+    {
+      layout: "default",
+      variant: ["accent", "success", "default", "error", "assistive"],
+      class: {
+        actions: "text-white",
+        button: "hover:bg-white/10 active:bg-white/20"
+      }
+    },
+    {
+      layout: "default",
+      variant: "warning",
+      class: {
+        actions: "text-gray-900",
+        button: "hover:bg-black/10 active:bg-black/20"
+      }
+    },
+    {
+      buttonVariant: "action",
+      layout: "compact",
+      class: {
+        button: "mr-2"
+      }
+    },
+    {
+      buttonVariant: "cancel",
+      layout: "compact",
+      class: {
+        button: "size-10 flex items-center justify-center"
+      }
+    },
+    {
+      buttonVariant: "cancel",
+      layout: "compact",
+      variant: "default",
+      class: {
+        button: "border-menu-boundary border-l"
+      }
+    },
+    {
+      buttonVariant: "action",
+      layout: "compact",
+      class: {
+        button: "px-2 h-6 rounded-md border border-transparent"
+      }
+    },
+    {
+      buttonVariant: "action",
+      layout: "compact",
+      variant: "default",
+      class: {
+        button: "border-menu-boundary"
+      }
+    },
+    {
+      buttonVariant: ["action", "cancel"],
+      layout: "compact",
+      variant: "default",
+      class: {
+        button: "hover:bg-white/10 active:bg-white/20"
+      }
+    },
+    {
+      buttonVariant: "action",
+      layout: "compact",
+      variant: ["accent", "success", "warning", "error", "assistive"],
+      class: {
+        button: "bg-black/30 hover:bg-black hover:text-white"
+      }
+    },
+    {
+      buttonVariant: "cancel",
+      layout: "compact",
+      variant: ["accent", "success", "warning", "error", "assistive"],
+      class: {
+        button: "border-black/10 hover:bg-black/10 active:bg-black/20 border-l"
+      }
+    },
+    // progress track
+    {
+      layout: "default",
+      class: {
+        progressTrack: "bottom-1 inset-x-2 h-0.5 rounded-full"
+      }
+    },
+    {
+      layout: "compact",
+      class: {
+        progressTrack: "inset-0 rounded-xl -z-1"
+      }
+    },
+    // progress indicator
+    {
+      layout: "default",
+      variant: "default",
+      class: {
+        progressIndicator: "bg-white/20"
+      }
+    },
+    {
+      layout: "default",
+      variant: "accent",
+      class: {
+        progressIndicator: "bg-blue-400/50"
+      }
+    },
+    {
+      layout: "default",
+      variant: "success",
+      class: {
+        progressIndicator: "bg-green-400/50"
+      }
+    },
+    {
+      layout: "default",
+      variant: "warning",
+      class: {
+        progressIndicator: "bg-black/20"
+      }
+    },
+    {
+      layout: "default",
+      variant: "error",
+      class: {
+        progressIndicator: "bg-red-400/50"
+      }
+    },
+    {
+      layout: "default",
+      variant: "assistive",
+      class: {
+        progressIndicator: "bg-pink-400/50"
+      }
+    },
+    // compact layout with progress
+    {
+      layout: "compact",
+      variant: "default",
+      class: {
+        progressIndicator: "bg-menu-background"
+      }
+    },
+    {
+      layout: "compact",
+      variant: "accent",
+      class: {
+        progressIndicator: "bg-accent-background"
+      }
+    },
+    {
+      layout: "compact",
+      variant: "success",
+      class: {
+        progressIndicator: "bg-success-background"
+      }
+    },
+    {
+      layout: "compact",
+      variant: "warning",
+      class: {
+        progressIndicator: "bg-warning-background"
+      }
+    },
+    {
+      layout: "compact",
+      variant: "error",
+      class: {
+        progressIndicator: "bg-danger-background"
+      }
+    },
+    {
+      layout: "compact",
+      variant: "assistive",
+      class: {
+        progressIndicator: "bg-assistive-background"
+      }
+    }
+  ],
+  defaultVariants: {
+    hasActions: false,
+    type: "default",
+    layout: "default",
+    variant: "default",
+    expanded: false,
+    behind: false,
+    position: "bottom-right"
+  }
+});
+export {
+  toastRootTv,
+  toastViewportTv
+};

package/dist/components/toast/src/types.d.ts

@@ -0,0 +1,79 @@
+import { default as React } from 'react';
+export type ToastType = "info" | "success" | "warning" | "error" | "loading" | "default";
+export type ToastVariant = "default" | "accent" | "success" | "warning" | "error" | "assistive" | "reset";
+export type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+export type SwipeDirection = "up" | "down" | "left" | "right";
+export interface ToastData<T extends object = object> {
+    id: string;
+    type: ToastType;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    duration?: number;
+    priority?: number;
+    data?: T;
+    createdAt: number;
+    onClose?: () => void;
+    onAction?: () => void;
+    actionLabel?: React.ReactNode;
+    height?: number;
+    swipeDirection?: SwipeDirection;
+}
+export interface ToastManagerAddOptions<T extends object = object> {
+    id?: string;
+    type?: ToastType;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    duration?: number;
+    priority?: number;
+    data?: T;
+    onClose?: () => void;
+    onAction?: () => void;
+    actionLabel?: React.ReactNode;
+}
+export interface ToastManagerUpdateOptions<T extends object = object> {
+    type?: ToastType;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    duration?: number;
+    data?: T;
+    actionLabel?: React.ReactNode;
+}
+export interface ToastManagerPromiseOptions<Value, T extends object = object> {
+    loading: ToastManagerAddOptions<T>;
+    success: ToastManagerAddOptions<T> | ((value: Value) => ToastManagerAddOptions<T>);
+    error: ToastManagerAddOptions<T> | ((error: unknown) => ToastManagerAddOptions<T>);
+}
+export type ToastManagerAction = "add" | "close" | "update" | "promise";
+export interface ToastManagerEvent {
+    action: ToastManagerAction;
+    options: unknown;
+}
+export interface ToastManager {
+    subscribe: (listener: (event: ToastManagerEvent) => void) => () => void;
+    add: <T extends object = object>(options: ToastManagerAddOptions<T>) => string;
+    close: (id: string) => void;
+    update: <T extends object = object>(id: string, updates: ToastManagerUpdateOptions<T>) => void;
+    promise: <Value, T extends object = object>(promiseValue: Promise<Value>, options: ToastManagerPromiseOptions<Value, T>) => Promise<Value>;
+    success: <T extends object = object>(options: Omit<ToastManagerAddOptions<T>, "type">) => string;
+    error: <T extends object = object>(options: Omit<ToastManagerAddOptions<T>, "type">) => string;
+    warning: <T extends object = object>(options: Omit<ToastManagerAddOptions<T>, "type">) => string;
+    info: <T extends object = object>(options: Omit<ToastManagerAddOptions<T>, "type">) => string;
+    loading: <T extends object = object>(options: Omit<ToastManagerAddOptions<T>, "type">) => string;
+    destroy: () => void;
+}
+export interface TimerInfo {
+    timeout?: ReturnType<typeof setTimeout>;
+    start: number;
+    delay: number;
+    remaining: number;
+    callback: () => void;
+}
+export interface ToastRootState {
+    type: ToastType;
+    swiping: boolean;
+    expanded: boolean;
+}
+export interface ToastContentState {
+    expanded: boolean;
+    behind: boolean;
+}

package/dist/components/toast/tsup.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('tsup').Options | import('tsup').Options[] | ((overrideOptions: import('tsup').Options) => import('tsup').Options | import('tsup').Options[] | Promise<import('tsup').Options | import('tsup').Options[]>);
+export default _default;

package/dist/index.js

@@ -89,11 +89,13 @@ import { convertSlateToText, convertTextToSlate, convertTextToSlateWithResolver
 import { extractTextWithMentions, parseTextWithMentions } from "./components/context-input/src/utils/text-extraction.js";
 import { extractMentionContext } from "./components/context-input/src/utils/context-extraction.js";
 import { ContextMenu } from "./components/context-menu/src/context-menu.js";
+import { Description } from "./components/description/src/description.js";
 import { Dialog } from "./components/dialog/src/dialog.js";
 import { Dropdown } from "./components/dropdown/src/dropdown.js";
 import { EmojiPicker } from "./components/emoji-picker/src/emoji-picker.js";
 import { useEmojiData } from "./components/emoji-picker/src/hooks/use-emoji-data.js";
 import { emojis } from "./components/emoji-picker/src/utils/emoji-data.js";
+import { ErrorMessage } from "./components/error-message/src/error-message.js";
 import { FileUpload } from "./components/file-upload/src/file-upload.js";
 import { FileUploadClear } from "./components/file-upload/src/components/file-upload-clear.js";
 import { FileUploadDropzone } from "./components/file-upload/src/components/file-upload-dropzone.js";
@@ -169,11 +171,12 @@ import { ModalInput } from "./components/modal/src/components/modal-input.js";
 import { ModalTextarea } from "./components/modal/src/components/modal-textarea.js";
 import { MultiSelect } from "./components/multi-select/src/multi-select.js";
 import { MultiSelectTrigger } from "./components/multi-select/src/components/multi-select-trigger.js";
-import { Toast, notifications } from "./components/notifications/src/notifications.js";
+import { notifications } from "./components/notifications/src/notifications.js";
 import { NumericInput } from "./components/numeric-input/src/numeric-input.js";
 import { NumericInputElement } from "./components/numeric-input/src/components/numeric-input-element.js";
 import { NumericInputMenuTrigger } from "./components/numeric-input/src/components/numeric-input-menu-trigger.js";
 import { NumericInputVariable } from "./components/numeric-input/src/components/numeric-input-variable.js";
+import { useNumericLongPress } from "./components/numeric-input/src/hooks/use-numeric-long-press.js";
 import { OtpInput } from "./components/otp-input/src/otp-input.js";
 import { Pagination } from "./components/pagination/src/pagination.js";
 import { Panel, PanelBase } from "./components/panel/src/panel.js";
@@ -224,6 +227,8 @@ import { TabItem } from "./components/tabs/src/tab-item.js";
 import { TextField } from "./components/text-field/src/text-field.js";
 import { Textarea } from "./components/textarea/src/textarea.js";
 import { ResizeHandle } from "./components/textarea/src/components/resize-handle.js";
+import { Toaster } from "./components/toast/src/toaster.js";
+import { toast } from "./components/toast/src/store.js";
 import { ToggleButton } from "./components/toggle-button/src/toggle-button.js";
 import { ToggleGroup } from "./components/toggle-button/src/toggle-group.js";
 import { Tooltip } from "./components/tooltip/src/tooltip.js";
@@ -303,12 +308,14 @@ export {
   DateInput,
   DateRangeInput,
   DateRangePreset,
+  Description,
   Dialog,
   DigitExtractor,
   DirectionContext,
   DragGuide,
   Dropdown,
   EmojiPicker,
+  ErrorMessage,
   FIELD_OPERATOR_MAP,
   FieldType,
   FileUpload,
@@ -441,7 +448,7 @@ export {
   TimeCalendar,
   TimeInput,
   TimeRangeInput,
-  Toast,
+  Toaster,
   ToggleButton,
   ToggleGroup,
   Tooltip,
@@ -636,6 +643,7 @@ export {
   tcx,
   timeStringToDate,
   timeToDate,
+  toast,
   tryRelaxedParsing,
   tryRelaxedTimeParsing,
   useAlertDialog,
@@ -682,6 +690,7 @@ export {
   useMenuTree,
   useMergedValue,
   useModifierKeys,
+  useNumericLongPress,
   usePanelContext,
   usePress,
   usePressMove,

package/dist/styles/components.css

@@ -26,6 +26,7 @@
   --animate-spinner-bounce-right: spinner-bounce-right 0.5s infinite alternate ease;
   --animate-indeterminate-bar: indeterminate-bar 1.5s cubic-bezier(0.65, 0.815, 0.735, 0.395)
     infinite normal none running;
+
 }
 
 /* Base styles */
@@ -625,3 +626,4 @@
     }
   }
 }
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@choice-ui/react",
-  "version": "1.6.8",
+  "version": "1.7.0",
   "description": "A desktop-first React UI component library built for professional desktop applications with comprehensive documentation",
   "sideEffects": false,
   "type": "module",

package/dist/components/text-field/src/components/field-description.d.ts

@@ -1,2 +0,0 @@
-import { HTMLProps } from 'react';
-export declare const FieldDescription: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<Omit<HTMLProps<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>>;

package/dist/components/text-field/src/components/field-description.js

@@ -1,16 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { memo, forwardRef } from "react";
-const FieldDescription = memo(
-  forwardRef(function FieldDescription2(props, ref) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        ...props
-      }
-    );
-  })
-);
-export {
-  FieldDescription
-};