@choice-ui/react 1.9.9 → 2.0.1

package/dist/components/md-render/dist/index.d.ts

@@ -8,9 +8,10 @@ interface MentionItemProps {
 }
 interface MdRenderProps {
     allowedPrefixes?: string[];
+    children?: string;
     className?: string;
     components?: Partial<Components>;
-    content: string;
+    content?: string;
     customColor?: {
         codeBackground?: string;
         defaultBackground?: string;

package/dist/components/md-render/dist/index.js

@@ -280,13 +280,7 @@ var createMarkdownComponents = (tv, MentionComponent, mentionItems) => {
         {
           className: tv.codeBlock(),
           lineThreshold: void 0,
-          children: /* @__PURE__ */ jsx(
-            CodeBlock2.Code,
-            {
-              code: children,
-              language
-            }
-          )
+          children: /* @__PURE__ */ jsx(CodeBlock2.Code, { language, children })
         }
       );
     },
@@ -409,7 +403,7 @@ var INITIAL_COMPONENTS = {
         expandable: false,
         children: [
           /* @__PURE__ */ jsx(CodeBlock2.Header, { showLineCount: false }),
-          /* @__PURE__ */ jsx(CodeBlock2.Content, { code: children })
+          /* @__PURE__ */ jsx(CodeBlock2.Content, { children })
         ]
       }
     );
@@ -421,6 +415,7 @@ var MdRender = memo(
       id,
       components: customComponents,
       content,
+      children,
       className,
       mentionRenderComponent,
       mentionItems,
@@ -429,9 +424,10 @@ var MdRender = memo(
       size = "default",
       variant = "default"
     } = props;
+    const markdownContent = content ?? children ?? "";
     const generatedId = useId();
     const blockId = id ?? generatedId;
-    const blocks = useMdBlocks(content);
+    const blocks = useMdBlocks(markdownContent);
     const tv = useMemo(() => mdRenderTv({ size, variant }), [size, variant]);
     const tvComponents = useMemo(
       () => createMarkdownComponents(tv, mentionRenderComponent, mentionItems),

package/dist/components/md-render/src/components/markdown-block.d.ts

@@ -1,8 +1,11 @@
 import { Components, Options } from 'react-markdown';
+import { BlockPolicyType } from 'harden-react-markdown';
 type HardenReactMarkdownProps = Options & {
     allowedImagePrefixes?: string[];
     allowedLinkPrefixes?: string[];
     defaultOrigin?: string;
+    linkBlockPolicy?: BlockPolicyType;
+    imageBlockPolicy?: BlockPolicyType;
 };
 interface MarkdownBlockProps extends Omit<HardenReactMarkdownProps, "children"> {
     components?: Partial<Components>;

package/dist/components/modal/dist/index.js

@@ -15,7 +15,7 @@ var ModalTv = tcv({
 });
 var ModalHeaderTv = tcv({
   slots: {
-    root: "modal__header border-default-boundary w-full flex-none items-center border-b",
+    root: ["modal__header", "grid border-default-boundary w-full flex-none items-center border-b"],
     title: "text-body-medium flex min-w-0 items-center gap-2 p-2 font-strong [grid-area:title] select-none",
     close: "p-2 [grid-area:close]"
   },
@@ -30,7 +30,7 @@ var ModalHeaderTv = tcv({
     },
     close: {
       true: {
-        root: "modal__header--action"
+        root: "grid-cols-[auto_1fr_2.5rem]"
       },
       false: {}
     }

package/dist/components/notifications/dist/index.d.ts

@@ -1,7 +1,4 @@
 import { ToasterProps } from 'sonner';
-import * as react from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
 interface NotificationsProps extends Omit<ToasterProps, "id"> {
     actions?: (id: string | number) => {
         action?: {
@@ -20,7 +17,6 @@ interface NotificationsProps extends Omit<ToasterProps, "id"> {
     text?: string;
     toasterId?: string;
 }
-declare const Toast: react.MemoExoticComponent<(props: NotificationsProps) => react_jsx_runtime.JSX.Element>;
 declare function notifications(toast: Omit<NotificationsProps, "id">): string | number;
 
-export { type NotificationsProps, Toast, notifications };
+export { type NotificationsProps, notifications };

package/dist/components/numeric-input/dist/index.d.ts

@@ -1,8 +1,8 @@
 import { TooltipProps } from '../../tooltip/src';
-import { default as react__default, ReactNode, HTMLProps } from 'react';
+import { default as React__default, ReactNode, HTMLProps } from 'react';
 import { IconButtonProps } from '../../icon-button/src';
 import { PressMoveProps } from '../../../../../shared/src';
-import * as react from 'react';
+import * as React$1 from 'react';
 
 type ElementType = "action" | "handler" | "menu";
 interface NumericInputElementProps {
@@ -11,18 +11,18 @@ interface NumericInputElementProps {
     position?: "prefix" | "suffix";
     type?: ElementType;
 }
-declare const NumericInputElement: react.MemoExoticComponent<react.ForwardRefExoticComponent<NumericInputElementProps & react.RefAttributes<HTMLDivElement>>>;
+declare const NumericInputElement: React$1.MemoExoticComponent<React$1.ForwardRefExoticComponent<NumericInputElementProps & React$1.RefAttributes<HTMLDivElement>>>;
 
 interface NumericInputMenuTriggerProps extends IconButtonProps {
     className?: string;
     type?: "menu" | "action";
 }
-declare const NumericInputMenuTrigger: react.ForwardRefExoticComponent<Omit<NumericInputMenuTriggerProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+declare const NumericInputMenuTrigger: React$1.ForwardRefExoticComponent<Omit<NumericInputMenuTriggerProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 interface NumericInputMenuActionPromptProps extends HTMLProps<HTMLDivElement> {
     children?: React.ReactNode;
     className?: string;
 }
-declare const NumericInputMenuActionPrompt: react.ForwardRefExoticComponent<Omit<NumericInputMenuActionPromptProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const NumericInputMenuActionPrompt: React$1.ForwardRefExoticComponent<Omit<NumericInputMenuActionPromptProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
 interface NumericInputVariableProps {
     className?: string;
@@ -30,7 +30,7 @@ interface NumericInputVariableProps {
     onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
     value?: number | null;
 }
-declare const NumericInputVariable: react.ForwardRefExoticComponent<NumericInputVariableProps & react.RefAttributes<HTMLDivElement>>;
+declare const NumericInputVariable: React$1.ForwardRefExoticComponent<NumericInputVariableProps & React$1.RefAttributes<HTMLDivElement>>;
 
 type NumericInputValue = string | number | (string | number | undefined)[] | Record<string, number>;
 type NumberResult = {
@@ -58,12 +58,13 @@ interface NumericInputContextValue {
     readOnly?: boolean;
     selected?: boolean;
     shiftStep?: number;
+    size?: "default" | "large";
     step?: number;
     value?: NumericInputValue;
     variant?: "default" | "light" | "dark" | "reset";
 }
 
-interface NumericInputProps extends NumericInputContextValue, Omit<HTMLProps<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "children" | "max" | "min" | "step" | "disabled" | "id"> {
+interface NumericInputProps extends NumericInputContextValue, Omit<HTMLProps<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "children" | "max" | "min" | "step" | "disabled" | "id" | "size"> {
     children?: ReactNode;
     className?: string;
     classNames?: {
@@ -74,9 +75,9 @@ interface NumericInputProps extends NumericInputContextValue, Omit<HTMLProps<HTM
     id?: string;
     onChange?: (value: NumericInputValue, detail: NumericChangeDetail) => void;
     tooltip?: TooltipProps;
-    triggerRef?: react__default.RefObject<HTMLDivElement> | ((el: HTMLDivElement | null) => void);
+    triggerRef?: React__default.RefObject<HTMLDivElement> | ((el: HTMLDivElement | null) => void);
 }
-interface NumericInputComponent extends react__default.ForwardRefExoticComponent<NumericInputProps & react__default.RefAttributes<HTMLInputElement>> {
+interface NumericInputComponent extends React__default.ForwardRefExoticComponent<NumericInputProps & React__default.RefAttributes<HTMLInputElement>> {
     ActionPrompt: typeof NumericInputMenuActionPrompt;
     MenuTrigger: typeof NumericInputMenuTrigger;
     Prefix: typeof NumericInputElement;
@@ -85,4 +86,18 @@ interface NumericInputComponent extends react__default.ForwardRefExoticComponent
 }
 declare const NumericInput: NumericInputComponent;
 
-export { type NumberResult, type NumericChangeDetail, NumericInput, NumericInputElement, type NumericInputElementProps, NumericInputMenuTrigger, type NumericInputMenuTriggerProps, type NumericInputProps, type NumericInputValue, NumericInputVariable, type NumericInputVariableProps };
+/**
+ * Hook for handling long press on numeric input increment/decrement buttons.
+ * Triggers the callback immediately on press, then repeatedly after a delay.
+ *
+ * @param callback - Function to call on press and during long press
+ * @param delay - Interval between repeated calls (default: 150ms)
+ * @param initialDelay - Delay before starting repeated calls (default: 400ms)
+ */
+declare function useNumericLongPress(callback: () => void, delay?: number, initialDelay?: number): {
+    onMouseDown: () => void;
+    onMouseUp: () => void;
+    onMouseLeave: () => void;
+};
+
+export { type NumberResult, type NumericChangeDetail, NumericInput, NumericInputElement, type NumericInputElementProps, NumericInputMenuTrigger, type NumericInputMenuTriggerProps, type NumericInputProps, type NumericInputValue, NumericInputVariable, type NumericInputVariableProps, useNumericLongPress };

package/dist/components/numeric-input/dist/index.js

@@ -22,9 +22,9 @@ function useNumericInputContext() {
 }
 var NumericInputTv = tcv({
   slots: {
-    container: ["group/input grid h-6 before:border-transparent", "input__number"],
-    input: ["peer", "h-6 w-full", "cursor-default appearance-none truncate"],
-    tooltip: "col-span-3 col-start-1 row-start-1 h-6"
+    container: ["group/input grid before:border-transparent", "input__number"],
+    input: ["peer", "w-full", "cursor-default appearance-none truncate"],
+    tooltip: "col-span-3 col-start-1 row-start-1"
   },
   variants: {
     variant: {
@@ -39,6 +39,18 @@ var NumericInputTv = tcv({
       },
       reset: {}
     },
+    size: {
+      default: {
+        container: ["h-6", "input__number--default"],
+        input: "h-6",
+        tooltip: "h-6"
+      },
+      large: {
+        container: ["h-8", "input__number--large"],
+        input: "h-8",
+        tooltip: "h-8"
+      }
+    },
     prefixElement: {
       true: {},
       false: {}
@@ -161,6 +173,7 @@ var NumericInputTv = tcv({
   ],
   defaultVariants: {
     variant: "default",
+    size: "default",
     selected: false,
     disabled: false,
     focused: false
@@ -172,6 +185,10 @@ var NumericInputMenuTriggerTv = tcv({
     disabled: {
       true: ""
     },
+    size: {
+      default: "",
+      large: ""
+    },
     type: {
       menu: "",
       action: ""
@@ -219,6 +236,7 @@ var NumericInputMenuTriggerTv = tcv({
   ],
   defaultVariants: {
     disabled: false,
+    size: "default",
     type: "menu",
     variant: "default"
   }
@@ -323,17 +341,21 @@ var NumericInputVariableTv = tcv({
   }
 });
 var NumericInputElementTv = tcv({
-  base: ["select-none", "z-2 h-6 w-6", "flex flex-none items-center justify-center"],
+  base: ["select-none", "z-2", "flex flex-none items-center justify-center"],
   variants: {
     type: {
       handler: "select-none",
-      action: "[grid-area:action]",
-      menu: "ml-px [grid-area:action]"
+      action: "",
+      menu: ""
     },
     position: {
       prefix: "rounded-l-md",
       suffix: "rounded-r-md"
     },
+    size: {
+      default: "h-6 w-6",
+      large: "h-8 w-8"
+    },
     disabled: {
       true: "text-disabled-foreground",
       false: "text-secondary-foreground"
@@ -356,6 +378,26 @@ var NumericInputElementTv = tcv({
       position: "suffix",
       class: "[grid-area:suffix-handler]"
     },
+    {
+      type: "action",
+      position: "prefix",
+      class: "[grid-area:prefix-handler]"
+    },
+    {
+      type: "action",
+      position: "suffix",
+      class: "[grid-area:action]"
+    },
+    {
+      type: "menu",
+      position: "prefix",
+      class: "[grid-area:prefix-handler]"
+    },
+    {
+      type: "menu",
+      position: "suffix",
+      class: "ml-px [grid-area:action]"
+    },
     {
       type: "handler",
       disabled: false,
@@ -394,25 +436,31 @@ var NumericInputElementTv = tcv({
   ],
   defaultVariants: {
     disabled: false,
-    variant: "default"
+    variant: "default",
+    size: "default"
   }
 });
 var NumericInputMenuActionPromptTv = tcv({
   base: [
     "[grid-area:action]",
-    "w-6 pr-2",
+    "pr-2",
     "flex items-center justify-center",
     "rounded-r-md",
     "pointer-events-none z-3"
   ],
   variants: {
+    size: {
+      default: "w-6",
+      large: "w-8"
+    },
     disabled: {
       true: "text-secondary-foreground bg-default-background",
       false: "bg-secondary-background group-focus-within/input:hidden group-hover/input:hidden"
     }
   },
   defaultVariants: {
-    disabled: false
+    disabled: false,
+    size: "default"
   }
 });
 var NumericInputElement = memo(
@@ -423,6 +471,7 @@ var NumericInputElement = memo(
     const tv = NumericInputElementTv({
       type,
       position,
+      size: context.size,
       disabled: context.disabled,
       variant: context.variant
     });
@@ -450,6 +499,7 @@ var NumericInputMenuTrigger = forwardRef(
     const context = useNumericInputContext();
     const tv = NumericInputMenuTriggerTv({
       type,
+      size: context.size,
       disabled: context.disabled,
       variant: context.variant
     });
@@ -457,6 +507,7 @@ var NumericInputMenuTrigger = forwardRef(
       IconButton,
       {
         ref,
+        size: context.size,
         variant: type === "menu" ? context.disabled ? "ghost" : "solid" : void 0,
         className: tcx(tv, className),
         disabled: context.disabled,
@@ -474,7 +525,10 @@ var NumericInputMenuActionPrompt = forwardRef((props, ref) => {
     "div",
     {
       ref,
-      className: tcx(NumericInputMenuActionPromptTv({ disabled: context.disabled }), className),
+      className: tcx(
+        NumericInputMenuActionPromptTv({ size: context.size, disabled: context.disabled }),
+        className
+      ),
       ...rest,
       children
     }
@@ -1042,6 +1096,7 @@ var NumericInputBase = forwardRef((props, ref) => {
     readOnly,
     required,
     shiftStep = 10,
+    size = "default",
     step = 1,
     value,
     variant = "default",
@@ -1094,6 +1149,7 @@ var NumericInputBase = forwardRef((props, ref) => {
   const contextValue = useMemo(
     () => ({
       variant,
+      size,
       // State
       value,
       defaultValue,
@@ -1120,6 +1176,7 @@ var NumericInputBase = forwardRef((props, ref) => {
     }),
     [
       variant,
+      size,
       value,
       defaultValue,
       disabled,
@@ -1175,6 +1232,7 @@ var NumericInputBase = forwardRef((props, ref) => {
   const actionPromptNode = actionPrompt[0] || null;
   const tv = NumericInputTv({
     variant,
+    size,
     selected: selected || handlerPressed,
     focused,
     disabled,

package/dist/components/panel/dist/index.d.ts

@@ -11,20 +11,20 @@ interface PanelRowProps extends Omit<HTMLProps<HTMLFieldSetElement>, "title"> {
      * @default "single"
      * @description
      * - `single`: `columns`: 1fr | `areas`: "label" "input" | `rows`: auto minmax(2rem, auto)
-     * - `two-columns`: `columns`: 1fr 1fr | `areas`: "label label" "left right" | `rows`: auto minmax(2rem, auto)
+     * - `two-columns`: `columns`: 1fr 1fr | `areas`: "label-1 label-2" "input-1 input-2" | `rows`: auto minmax(2rem, auto)
      * - `one-label-one-input`: `columns`: 8fr 20fr | `areas`: "label input" | `rows`: 2rem
-     * - `one-label-one-input-one-icon`: `columns`: 8fr 20fr 2rem | `areas`: "label input icon" | `rows`: 2rem
-     * - `one-label-two-input`: `columns`: 8fr 1fr 1fr | `areas`: "label left right" | `rows`: 2rem
-     * - `one-icon-one-input`: `columns`: 2rem 1fr | `areas`: "icon input" | `rows`: 2rem
-     * - `one-input-one-icon`: `columns`: 1fr 2rem | `areas`: "input icon" | `rows`: 2rem
-     * - `one-input-two-icon`: `columns`: 1fr 1fr 2rem | `areas`: "input left icon" "input right icon" | `rows`: 2rem
-     * - `two-input-two-icon`: `columns`: 1fr 1fr 2rem | `areas`: "left icon right icon" | `rows`: 2rem
-     * - `two-input-one-icon`: `columns`: 2rem 1fr 1fr | `areas`: "icon left right" | `rows`: 2rem
-     * - `one-icon-one-input-two-icon`: `columns`: 2rem 1fr 2rem | `areas`: "icon input icon" | `rows`: 2rem
-     * - `two-input-one-icon-double-row`: `columns`: 1fr 1fr 2rem | `areas`: "left icon right icon" | `rows`: 2rem 2rem
-     * - `one-icon-one-input-two-icon-double-row`: `columns`: 2rem 1fr 2rem | `areas`: "icon input icon" | `rows`: 2rem 2rem
+     * - `one-label-one-input-one-icon`: `columns`: 8fr 20fr 1.5rem | `areas`: "label input icon" | `rows`: 2rem
+     * - `one-label-two-input`: `columns`: 8fr 10fr 10fr | `areas`: "label input-1 input-2" | `rows`: 2rem
+     * - `one-icon-one-input`: `columns`: 1.5rem 1fr | `areas`: ". label" "icon input" | `rows`: auto minmax(2rem, auto)
+     * - `one-input-one-icon`: `columns`: 1fr 1.5rem | `areas`: "label label" "input icon" | `rows`: auto minmax(2rem, auto)
+     * - `one-input-two-icon`: `columns`: 1fr 0.5rem 1.5rem 0.25rem 1.5rem | `areas`: "label . . . ." "input . icon-1 . icon-2" | `rows`: auto minmax(2rem, auto)
+     * - `two-input-two-icon`: `columns`: minmax(76px, 1fr) 0.5rem 1fr 0.5rem 1.5rem 0.25rem 1.5rem | `areas`: "label-1 label-1 label-2 label-2 . . ." "input-1 . input-2 . icon-1 . icon-2" | `rows`: auto minmax(2rem, auto)
+     * - `two-input-one-icon`: `columns`: 1fr 1fr 1.5rem | `areas`: "label-1 label-2 label-2" "input-1 input-2 icon" | `rows`: auto minmax(2rem, auto)
+     * - `one-icon-one-input-one-icon`: `columns`: 1.5rem 0.5rem 1fr 0.5rem 1.5rem | `areas`: "label label label label label" "icon-1 . input . icon-2" | `rows`: auto minmax(2rem, auto)
+     * - `one-icon-one-input-two-icon`: `columns`: 1.5rem 0.5rem 1fr 0.5rem 1.5rem 0.25rem 1.5rem | `areas`: "label label label label label label label" "icon-1 . input . icon-2 . icon-3" | `rows`: auto minmax(2rem, auto)
+     * - `two-input-one-icon-double-row`: `columns`: 1fr 1fr 1.5rem | `areas`: "label-1 label-2 ." "input-1 input-3 icon-1" "input-2 input-3 icon-2" | `rows`: auto 2rem 2rem
      */
-    type?: "single" | "two-columns" | "one-label-one-input" | "one-label-one-input-one-icon" | "one-label-two-input" | "one-icon-one-input" | "one-input-one-icon" | "one-input-two-icon" | "two-input-two-icon" | "two-input-one-icon" | "one-icon-one-input-two-icon" | "two-input-one-icon-double-row";
+    type?: "single" | "two-columns" | "one-label-one-input" | "one-label-one-input-one-icon" | "one-label-two-input" | "one-icon-one-input" | "one-input-one-icon" | "one-input-two-icon" | "two-input-two-icon" | "two-input-one-icon" | "one-icon-one-input-one-icon" | "one-icon-one-input-two-icon" | "two-input-one-icon-double-row";
 }
 declare const PanelRow: react.ForwardRefExoticComponent<Omit<PanelRowProps, "ref"> & react.RefAttributes<HTMLFieldSetElement>>;
 
@@ -83,8 +83,8 @@ declare const SortablePaneContext: react__default.Context<SortablePaneContextVal
 declare const useSortablePane: () => SortablePaneContextValue;
 
 interface PanelSortableProps<T extends SortableItem> {
-    children: react__default.ReactNode;
     className?: string;
+    children: react__default.ReactNode;
     data: T[];
     onDrop: (position: "top" | "bottom" | null, id: string, newIndex: number) => void;
     onSelectedIdChange: (id: string | null) => void;
@@ -129,12 +129,12 @@ interface PanelProps extends Omit<HTMLProps<HTMLDivElement>, "title"> {
     showLabels?: boolean;
     triggerRef?: React.RefObject<HTMLDivElement>;
 }
-declare const PanelContent: ({ children, collapsible, title, otherChildren, }: {
+declare const PanelContent: react.NamedExoticComponent<{
     children: React.ReactNode;
     collapsible?: boolean;
     otherChildren: React.ReactNode[];
     title: React.ReactNode;
-}) => react_jsx_runtime.JSX.Element;
+}>;
 interface PanelComponentProps extends React.ForwardRefExoticComponent<PanelProps & React.RefAttributes<HTMLDivElement>> {
     Content: typeof PanelContent;
     Label: typeof PanelLabel;
@@ -149,4 +149,4 @@ interface PanelComponentProps extends React.ForwardRefExoticComponent<PanelProps
 declare const PanelBase: react.ForwardRefExoticComponent<Omit<PanelProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
 declare const Panel: PanelComponentProps;
 
-export { Panel, PanelBase, PanelContext, PanelLabel, PanelPreviewer, PanelRow, PanelRowLabel, PanelRowManyIcon, type PanelRowManyIconItem, type PanelRowManyIconProps, type PanelRowProps, PanelSortable, PanelSortableRow, PanelTitle, type SortableItem, SortablePaneContext, type SortablePaneContextValue, SortableRowDataContext, type SortableRowDataContextValue, usePanelContext, useSortablePane, useSortableRowItem };
+export { Panel, PanelBase, PanelContext, type PanelContextType, PanelLabel, PanelPreviewer, PanelRow, PanelRowLabel, PanelRowManyIcon, type PanelRowManyIconItem, type PanelRowManyIconProps, type PanelRowProps, PanelSortable, PanelSortableRow, PanelTitle, type SortableItem, SortablePaneContext, type SortablePaneContextValue, SortableRowDataContext, type SortableRowDataContextValue, usePanelContext, useSortablePane, useSortableRowItem };

package/dist/components/picture-preview/dist/index.d.ts

@@ -14,6 +14,11 @@ interface PicturePreviewProps extends HTMLProps<HTMLDivElement> {
     fileName?: string;
     onClose?: () => void;
     src: string;
+    control?: {
+        enable?: boolean;
+        position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+        show?: "always" | "hover";
+    };
 }
 declare const PicturePreview: react.ForwardRefExoticComponent<Omit<PicturePreviewProps, "ref"> & react.RefAttributes<HTMLDivElement>>;