@choice-ui/react 1.5.3 → 1.5.5

package/dist/components/otp-input/src/otp-input.js

@@ -0,0 +1,115 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { OTPInput as Lt } from "../../../node_modules/.pnpm/input-otp@1.4.2_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/input-otp/dist/index.js";
+import { useMemo, createContext, useContext } from "react";
+import { otpInputTv } from "./tv.js";
+import css from "./otp-input.module.css.js";
+import { tcx } from "../../../shared/utils/tcx/tcx.js";
+const OTPInputCtx = createContext({
+  styles: otpInputTv({}),
+  slotProps: [],
+  variant: "default",
+  disabled: false,
+  isInvalid: false
+});
+function OTPInputRoot({
+  className,
+  inputClassName,
+  variant = "default",
+  disabled = false,
+  isInvalid = false,
+  children,
+  ...props
+}) {
+  const tv = useMemo(
+    () => otpInputTv({ variant, disabled, isInvalid }),
+    [variant, disabled, isInvalid]
+  );
+  return /* @__PURE__ */ jsx(
+    Lt,
+    {
+      className: tv.input({ className: inputClassName }),
+      containerClassName: tv.base({ className }),
+      spellCheck: false,
+      autoComplete: "off",
+      "data-disabled": disabled || void 0,
+      "data-invalid": isInvalid || void 0,
+      "data-slot": "otp-input",
+      disabled,
+      render: ({ slots: slotProps }) => /* @__PURE__ */ jsx(OTPInputCtx.Provider, { value: { styles: tv, slotProps, variant, disabled, isInvalid }, children }),
+      ...props
+    }
+  );
+}
+function OTPInputGroup({ className, ...props }) {
+  var _a;
+  const { styles } = useContext(OTPInputCtx);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: (_a = styles == null ? void 0 : styles.group) == null ? void 0 : _a.call(styles, { className }),
+      "data-slot": "otp-input-group",
+      ...props
+    }
+  );
+}
+function OTPInputSlot({ className, index, ...props }) {
+  var _a, _b, _c, _d;
+  const { styles, slotProps, variant, disabled, isInvalid } = useContext(OTPInputCtx);
+  const { char, hasFakeCaret, isActive } = (slotProps == null ? void 0 : slotProps[index]) ?? {};
+  const slotStyles = otpInputTv({
+    variant,
+    selected: isActive,
+    disabled,
+    isInvalid
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      className: tcx((_a = styles == null ? void 0 : styles.slot) == null ? void 0 : _a.call(styles, { className }), (_b = slotStyles == null ? void 0 : slotStyles.slot) == null ? void 0 : _b.call(slotStyles)),
+      "data-active": isActive || void 0,
+      "data-disabled": disabled || void 0,
+      "data-filled": !!char || void 0,
+      "data-invalid": isInvalid || void 0,
+      "data-slot": "otp-input-slot",
+      children: [
+        char ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: (_c = styles == null ? void 0 : styles.slotValue) == null ? void 0 : _c.call(styles),
+            "data-slot": "otp-input-slot-value",
+            children: char
+          }
+        ) : null,
+        hasFakeCaret && isActive ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: tcx((_d = styles == null ? void 0 : styles.caret) == null ? void 0 : _d.call(styles), css.caret),
+            "data-slot": "otp-input-caret"
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function OTPInputSeparator({ className, children, ...props }) {
+  var _a;
+  const { styles } = useContext(OTPInputCtx);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: (_a = styles == null ? void 0 : styles.separator) == null ? void 0 : _a.call(styles, { className }),
+      "data-slot": "otp-input-separator",
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx("span", { children: "-" })
+    }
+  );
+}
+const OtpInput = Object.assign(OTPInputRoot, {
+  Group: OTPInputGroup,
+  Slot: OTPInputSlot,
+  Separator: OTPInputSeparator
+});
+export {
+  OtpInput
+};

package/dist/components/otp-input/src/otp-input.module.css

@@ -0,0 +1,15 @@
+._caret_7qdip_1 {
+  animation: _caret-blink_7qdip_1 1s ease-out infinite;
+}
+
+@keyframes _caret-blink_7qdip_1 {
+  0%,
+  70%,
+  100% {
+    opacity: 1;
+  }
+  20%,
+  50% {
+    opacity: 0;
+  }
+}

package/dist/components/otp-input/src/otp-input.module.css.js

@@ -0,0 +1,8 @@
+import './otp-input.module.css';const caret = "_caret_7qdip_1";
+const css = {
+  caret
+};
+export {
+  caret,
+  css as default
+};

package/dist/components/otp-input/src/tv.d.ts

@@ -0,0 +1,121 @@
+export declare const otpInputTv: import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: {
+            slot: string;
+            slotValue: string;
+            caret: string;
+        };
+        light: {
+            slot: string;
+            slotValue: string;
+            caret: string;
+        };
+        dark: {
+            slot: string;
+            slotValue: string;
+            caret: string;
+        };
+    };
+    selected: {
+        true: {};
+        false: {};
+    };
+    disabled: {
+        true: {
+            slot: string;
+        };
+        false: {};
+    };
+    isInvalid: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string;
+    input: string;
+    group: string;
+    slot: string[];
+    slotValue: string;
+    caret: string;
+    separator: string;
+}, undefined, {
+    variant: {
+        default: {
+            slot: string;
+            slotValue: string;
+            caret: string;
+        };
+        light: {
+            slot: string;
+            slotValue: string;
+            caret: string;
+        };
+        dark: {
+            slot: string;
+            slotValue: string;
+            caret: string;
+        };
+    };
+    selected: {
+        true: {};
+        false: {};
+    };
+    disabled: {
+        true: {
+            slot: string;
+        };
+        false: {};
+    };
+    isInvalid: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string;
+    input: string;
+    group: string;
+    slot: string[];
+    slotValue: string;
+    caret: string;
+    separator: string;
+}, import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: {
+            slot: string;
+            slotValue: string;
+            caret: string;
+        };
+        light: {
+            slot: string;
+            slotValue: string;
+            caret: string;
+        };
+        dark: {
+            slot: string;
+            slotValue: string;
+            caret: string;
+        };
+    };
+    selected: {
+        true: {};
+        false: {};
+    };
+    disabled: {
+        true: {
+            slot: string;
+        };
+        false: {};
+    };
+    isInvalid: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string;
+    input: string;
+    group: string;
+    slot: string[];
+    slotValue: string;
+    caret: string;
+    separator: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/otp-input/src/tv.js

@@ -0,0 +1,150 @@
+import { tcv } from "../../../shared/utils/tcx/tcx.js";
+const otpInputTv = tcv({
+  slots: {
+    base: "relative flex items-center gap-2",
+    input: "!absolute inset-0 w-full h-full opacity-0 cursor-text",
+    group: "flex items-center gap-1.5",
+    slot: [
+      "relative flex items-center justify-center",
+      "h-8 w-8",
+      "rounded-md",
+      "text-body-large",
+      "border border-solid border-transparent"
+    ],
+    slotValue: "",
+    caret: "absolute inset-y-2 left-1/2 w-px -translate-x-1/2",
+    separator: "text-secondary-foreground mx-1"
+  },
+  variants: {
+    variant: {
+      default: {
+        slot: "bg-secondary-background",
+        slotValue: "text-default-foreground",
+        caret: "bg-default-foreground"
+      },
+      light: {
+        slot: "bg-gray-100",
+        slotValue: "text-gray-900",
+        caret: "bg-gray-900"
+      },
+      dark: {
+        slot: "bg-gray-700",
+        slotValue: "text-white",
+        caret: "bg-white"
+      }
+    },
+    selected: {
+      true: {},
+      false: {}
+    },
+    disabled: {
+      true: {
+        slot: "cursor-not-allowed"
+      },
+      false: {}
+    },
+    isInvalid: {
+      true: {},
+      false: {}
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "default",
+      selected: true,
+      disabled: false,
+      class: {
+        slot: "bg-default-background border-selected-boundary"
+      }
+    },
+    {
+      variant: "default",
+      selected: false,
+      disabled: false,
+      class: {
+        slot: "hover:border-default-boundary"
+      }
+    },
+    {
+      variant: "light",
+      selected: false,
+      disabled: false,
+      class: {
+        slot: "hover:border-gray-200"
+      }
+    },
+    {
+      variant: "dark",
+      selected: false,
+      disabled: false,
+      class: {
+        slot: "hover:border-gray-600"
+      }
+    },
+    {
+      variant: ["default", "light", "dark"],
+      selected: true,
+      disabled: false,
+      class: {
+        slot: "border-selected-boundary"
+      }
+    },
+    {
+      variant: "default",
+      disabled: true,
+      class: {
+        slot: "bg-secondary-background",
+        slotValue: "text-disabled-foreground"
+      }
+    },
+    {
+      variant: "light",
+      disabled: true,
+      class: {
+        slot: "bg-gray-100",
+        slotValue: "text-black/30"
+      }
+    },
+    {
+      variant: "dark",
+      disabled: true,
+      class: {
+        slot: "bg-gray-700",
+        slotValue: "text-white/40"
+      }
+    },
+    {
+      variant: "default",
+      isInvalid: true,
+      disabled: false,
+      class: {
+        slot: "border-danger-boundary"
+      }
+    },
+    {
+      variant: "light",
+      isInvalid: true,
+      disabled: false,
+      class: {
+        slot: "border-danger-boundary"
+      }
+    },
+    {
+      variant: "dark",
+      isInvalid: true,
+      disabled: false,
+      class: {
+        slot: "border-danger-boundary"
+      }
+    }
+  ],
+  defaultVariants: {
+    variant: "default",
+    selected: false,
+    disabled: false,
+    isInvalid: false
+  }
+});
+export {
+  otpInputTv
+};

package/dist/components/otp-input/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/components/panel/src/components/panel-sortable.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import React, { forwardRef, useRef, useCallback, useEffect, useMemo, memo } from "react";
+import React__default, { forwardRef, useRef, useCallback, useEffect, useMemo, memo } from "react";
 import { usePanelDragDrop } from "../hooks/use-panel-drag-drop.js";
 import { SortablePaneContext, SortableRowDataContext, useSortableRowItem, useSortablePane } from "../context/sortable-context.js";
 import { tcx } from "../../../../shared/utils/tcx/tcx.js";
@@ -93,8 +93,8 @@ const PanelSortable = forwardRef(function PanelSortable2(props, ref) {
         SortableRowDataContext.Provider,
         {
           value: { item },
-          children: /* @__PURE__ */ jsx(RowContainer, { children: React.Children.map(props.children, (child) => {
-            if (React.isValidElement(child)) {
+          children: /* @__PURE__ */ jsx(RowContainer, { children: React__default.Children.map(props.children, (child) => {
+            if (React__default.isValidElement(child)) {
               return child;
             }
             return null;

package/dist/components/rich-input/src/hooks/use-editor-config.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback } from "react";
+import React__default, { useMemo, useCallback } from "react";
 import { createEditor } from "slate";
 import { withHistory } from "slate-history";
 import { withReact } from "slate-react";
@@ -16,10 +16,10 @@ const useEditorConfig = (props) => {
     disableTabFocus
   });
   const renderElement = useCallback((props2) => {
-    return React.createElement(ElementRender, props2);
+    return React__default.createElement(ElementRender, props2);
   }, []);
   const renderLeaf = useCallback((props2) => {
-    return React.createElement(LeafRender, props2);
+    return React__default.createElement(LeafRender, props2);
   }, []);
   return {
     editor,

package/dist/components/rich-input/src/utils/custom-options.js

@@ -1,63 +1,63 @@
 import { ParagraphPilcrow, ParagraphQuote, ParagraphCode, ParagraphHeading1, ParagraphHeading2, ParagraphHeading3, ParagraphListOrdered, ParagraphList, ParagraphListTodo, ParagraphBold, ParagraphItalic, ParagraphUnderline, ParagraphStrikethrough } from "@choiceform/icons-react";
-import React from "react";
+import React__default from "react";
 const charactersOptions = [
   {
     format: "bold",
-    icon: React.createElement(ParagraphBold)
+    icon: React__default.createElement(ParagraphBold)
   },
   {
     format: "italic",
-    icon: React.createElement(ParagraphItalic)
+    icon: React__default.createElement(ParagraphItalic)
   },
   {
     format: "underlined",
-    icon: React.createElement(ParagraphUnderline)
+    icon: React__default.createElement(ParagraphUnderline)
   },
   {
     format: "strikethrough",
-    icon: React.createElement(ParagraphStrikethrough)
+    icon: React__default.createElement(ParagraphStrikethrough)
   },
   {
     format: "code",
-    icon: React.createElement(ParagraphCode)
+    icon: React__default.createElement(ParagraphCode)
   }
 ];
 const paragraphOptions = [
   {
     format: "paragraph",
-    icon: React.createElement(ParagraphPilcrow)
+    icon: React__default.createElement(ParagraphPilcrow)
   },
   {
     format: "block_quote",
-    icon: React.createElement(ParagraphQuote)
+    icon: React__default.createElement(ParagraphQuote)
   },
   {
     format: "code",
-    icon: React.createElement(ParagraphCode)
+    icon: React__default.createElement(ParagraphCode)
   },
   {
     format: "h1",
-    icon: React.createElement(ParagraphHeading1)
+    icon: React__default.createElement(ParagraphHeading1)
   },
   {
     format: "h2",
-    icon: React.createElement(ParagraphHeading2)
+    icon: React__default.createElement(ParagraphHeading2)
   },
   {
     format: "h3",
-    icon: React.createElement(ParagraphHeading3)
+    icon: React__default.createElement(ParagraphHeading3)
   },
   {
     format: "numbered_list",
-    icon: React.createElement(ParagraphListOrdered)
+    icon: React__default.createElement(ParagraphListOrdered)
   },
   {
     format: "bulleted_list",
-    icon: React.createElement(ParagraphList)
+    icon: React__default.createElement(ParagraphList)
   },
   {
     format: "check_list",
-    icon: React.createElement(ParagraphListTodo)
+    icon: React__default.createElement(ParagraphListTodo)
   }
 ];
 export {

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

@@ -1,4 +1,4 @@
-import { MenuContextContent, MenuDivider, MenuContextItem, MenuContextLabel, MenuTrigger, MenuValue } from '../../menus/src';
+import { MenuContextContent, MenuDivider, MenuEmpty, MenuContextItem, MenuContextLabel, MenuTrigger, MenuValue } from '../../menus/src';
 import { FloatingFocusManagerProps } from '@floating-ui/react';
 import { default as React } from 'react';
 interface SelectProps {
@@ -22,6 +22,7 @@ interface SelectProps {
 interface SelectComponentType extends React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLButtonElement>> {
     Content: typeof MenuContextContent;
     Divider: typeof MenuDivider;
+    Empty: typeof MenuEmpty;
     Item: typeof MenuContextItem;
     Label: typeof MenuContextLabel;
     Trigger: typeof MenuTrigger;

package/dist/components/select/dist/index.js

@@ -1,7 +1,7 @@
 import { Slot } from "../../slot/dist/index.js";
-import { MenuValue, MenuContextContent, MenuContextLabel, MenuDivider, MenuTrigger, MenuContextItem, useMenuScroll, MenuContext, MenuScrollArrow } from "../../menus/dist/index.js";
+import { MenuValue, MenuTrigger, MenuContextLabel, MenuContextItem, MenuEmpty, MenuDivider, MenuContextContent, useMenuScroll, MenuContext, MenuScrollArrow } from "../../menus/dist/index.js";
 import { useFloatingParentNodeId, FloatingTree, useFloatingNodeId, useFloating, offset, shift, flip, size, inner, autoUpdate, useClick, useDismiss, useRole, useInnerOffset, useListNavigation, useTypeahead, useInteractions, FloatingNode, FloatingPortal, FloatingOverlay, FloatingFocusManager, FloatingList } from "@floating-ui/react";
-import React, { memo, useMemo, Children, isValidElement, useRef, useState, useId, useEffect, cloneElement } from "react";
+import React__default, { memo, useMemo, Children, isValidElement, useRef, useState, useId, useEffect, cloneElement } from "react";
 import { useEventCallback } from "usehooks-ts";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { tcx } from "../../../shared/utils/tcx/tcx.js";
@@ -45,9 +45,9 @@ var SelectComponent = memo(function SelectComponent2(props) {
       const result = [];
       children2.forEach((child) => {
         if (!isValidElement(child)) return;
-        if (child.type === MenuContextItem || child.type === MenuDivider || child.type === MenuContextLabel) {
+        if (child.type === MenuContextItem || child.type === MenuDivider || child.type === MenuContextLabel || child.type === MenuEmpty) {
           result.push(child);
-        } else if (child.type === React.Fragment && child.props.children) {
+        } else if (child.type === React__default.Fragment && child.props.children) {
           const fragmentChildren = Children.toArray(child.props.children);
           result.push(...extractSelectItems(fragmentChildren));
         }
@@ -67,6 +67,9 @@ var SelectComponent = memo(function SelectComponent2(props) {
       if (child.type === MenuContextLabel) {
         return { label: true, children: child.props.children };
       }
+      if (child.type === MenuEmpty) {
+        return { empty: true, children: child.props.children, element: child };
+      }
       const {
         value: itemValue,
         children: itemChildren,
@@ -82,7 +85,7 @@ var SelectComponent = memo(function SelectComponent2(props) {
     });
   }, [itemElements]);
   const selectableOptions = useMemo(() => {
-    return options.filter((option) => !option.divider && !option.label);
+    return options.filter((option) => !option.divider && !option.label && !option.empty);
   }, [options]);
   const listRef = useRef([]);
   const listContentRef = useRef([]);
@@ -287,6 +290,9 @@ var SelectComponent = memo(function SelectComponent2(props) {
       if (option.label) {
         return /* @__PURE__ */ jsx(MenuContextLabel, { children: option.children }, `label-${index}`);
       }
+      if (option.empty) {
+        return /* @__PURE__ */ jsx(MenuEmpty, { children: option.children }, `empty-${index}`);
+      }
       const currentSelectableIndex = selectableIndex;
       selectableIndex++;
       const isSelected = currentSelectedIndex === currentSelectableIndex;
@@ -467,11 +473,12 @@ var BaseSelect = memo(function Select(props) {
   return /* @__PURE__ */ jsx(SelectComponent, { ...props, children });
 });
 var Select2 = Object.assign(BaseSelect, {
-  Item: MenuContextItem,
-  Trigger: MenuTrigger,
+  Content: MenuContextContent,
   Divider: MenuDivider,
+  Empty: MenuEmpty,
+  Item: MenuContextItem,
   Label: MenuContextLabel,
-  Content: MenuContextContent,
+  Trigger: MenuTrigger,
   Value: MenuValue
 });
 Select2.displayName = "Select";

package/dist/components/select/src/select.d.ts

@@ -1,4 +1,4 @@
-import { MenuContextContent, MenuContextItem, MenuContextLabel, MenuDivider, MenuTrigger, MenuValue } from '../../menus/src';
+import { MenuContextContent, MenuContextItem, MenuContextLabel, MenuDivider, MenuEmpty, MenuTrigger, MenuValue } from '../../menus/src';
 import { FloatingFocusManagerProps } from '@floating-ui/react';
 import { default as React } from 'react';
 export interface SelectProps {
@@ -22,6 +22,7 @@ export interface SelectProps {
 interface SelectComponentType extends React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLButtonElement>> {
     Content: typeof MenuContextContent;
     Divider: typeof MenuDivider;
+    Empty: typeof MenuEmpty;
     Item: typeof MenuContextItem;
     Label: typeof MenuContextLabel;
     Trigger: typeof MenuTrigger;