@choice-ui/react 1.7.4 → 1.7.5

package/dist/components/panel/src/panel.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { forwardRef, useMemo, Children } from "react";
+import { forwardRef, useMemo, Children, memo } from "react";
 import { propertiesPanelTv } from "./tv.js";
 import { PanelContext, usePanelContext } from "./context/panel-context.js";
 import { PanelLabel } from "./components/panel-label.js";
@@ -11,7 +11,7 @@ import { PanelRowLabel } from "./components/panel-row-label.js";
 import { PanelRowManyIcon } from "./components/panel-row-many-icon.js";
 import { PanelPreviewer } from "./components/panel-previewer.js";
 import { tcx } from "../../../shared/utils/tcx/tcx.js";
-const PanelContent = function PanelContent2({
+const PanelContent = memo(function PanelContent2({
   children,
   collapsible,
   title,
@@ -22,7 +22,7 @@ const PanelContent = function PanelContent2({
     title,
     collapsible && !isCollapsed && otherChildren
   ] }) : /* @__PURE__ */ jsx(Fragment, { children });
-};
+});
 const PanelBase = forwardRef(function Panel(props, ref) {
   const {
     className,
@@ -61,42 +61,43 @@ const PanelBase = forwardRef(function Panel(props, ref) {
     });
     return { title: title2, otherChildren: otherChildren2 };
   }, [children, collapsible, isCollapsed]);
-  const styles = propertiesPanelTv({
-    isEmpty: isEmpty || isCollapsed || otherChildren.length === 0
-  });
-  return /* @__PURE__ */ jsx(
-    PanelContext.Provider,
+  const tv = useMemo(
+    () => propertiesPanelTv({
+      isEmpty: isEmpty || isCollapsed || otherChildren.length === 0
+    }),
+    [isEmpty, isCollapsed, otherChildren.length]
+  );
+  const contextValue = useMemo(
+    () => ({ collapsible, isCollapsed, onCollapsedChange, showLabels, alwaysShowCollapsible }),
+    [collapsible, isCollapsed, onCollapsedChange, showLabels, alwaysShowCollapsible]
+  );
+  return /* @__PURE__ */ jsx(PanelContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    "div",
     {
-      value: { collapsible, isCollapsed, onCollapsedChange, showLabels, alwaysShowCollapsible },
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ref,
-          className: tcx(styles.container(), className),
-          "aria-expanded": !isCollapsed,
-          ...rest,
-          children: [
-            triggerRef && /* @__PURE__ */ jsx(
-              "div",
-              {
-                ref: triggerRef,
-                className: styles.triggerRef()
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              PanelContent,
-              {
-                collapsible,
-                title,
-                otherChildren,
-                children
-              }
-            )
-          ]
-        }
-      )
+      ref,
+      className: tcx(tv.container(), className),
+      "aria-expanded": !isCollapsed,
+      ...rest,
+      children: [
+        triggerRef && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: triggerRef,
+            className: tv.triggerRef()
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          PanelContent,
+          {
+            collapsible,
+            title,
+            otherChildren,
+            children
+          }
+        )
+      ]
     }
-  );
+  ) });
 });
 PanelBase.displayName = "Panel";
 const Panel2 = PanelBase;

package/dist/components/panel/src/styles/style.module.css

@@ -0,0 +1,103 @@
+/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
+._label_yadvv_2 {
+  margin-top: calc(var(--spacing, .25rem) * 1);
+  -webkit-user-select: none;
+  user-select: none;
+  letter-spacing: .016875rem;
+  padding-left: .125rem;
+  padding-right: .125rem;
+  font-size: .5625rem;
+  font-weight: 500;
+  line-height: .875rem;
+}
+
+._single_yadvv_14 {
+  column-gap: calc(var(--spacing, .25rem) * 2);
+  padding-right: calc(var(--spacing, .25rem) * 4);
+  grid-template: "label"
+                 "input" minmax(2rem, auto)
+                 / 1fr;
+}
+
+._two-columns_yadvv_22 {
+  column-gap: calc(var(--spacing, .25rem) * 2);
+  padding-right: calc(var(--spacing, .25rem) * 4);
+  grid-template: "label-1 label-2"
+                 "input-1 input-2" minmax(2rem, auto)
+                 / 1fr 1fr;
+}
+
+._one-label-one-input_yadvv_30 {
+  column-gap: calc(var(--spacing, .25rem) * 2);
+  padding-right: calc(var(--spacing, .25rem) * 4);
+  grid-template: "label input" 2rem
+  / 8fr 20fr;
+}
+
+._one-label-one-input-one-icon_yadvv_37 {
+  column-gap: calc(var(--spacing, .25rem) * 1);
+  padding-right: calc(var(--spacing, .25rem) * 2);
+  grid-template: "label input icon" 2rem
+  / 8fr 20fr 1.5rem;
+}
+
+._one-label-two-input_yadvv_44 {
+  column-gap: calc(var(--spacing, .25rem) * 2);
+  padding-right: calc(var(--spacing, .25rem) * 4);
+  grid-template: "label input-1 input-2" 2rem
+  / 8fr 10fr 10fr;
+}
+
+._one-icon-one-input_yadvv_51 {
+  column-gap: calc(var(--spacing, .25rem) * 2);
+  padding-right: calc(var(--spacing, .25rem) * 4);
+  grid-template: ". label"
+                 "icon input" minmax(2rem, auto)
+                 / 1.5rem 1fr;
+}
+
+._one-input-one-icon_yadvv_59 {
+  column-gap: calc(var(--spacing, .25rem) * 2);
+  grid-template: "label label"
+                 "input icon" minmax(2rem, auto)
+                 / 1fr 1.5rem;
+}
+
+._one-input-two-icon_yadvv_66 {
+  grid-template: "label . . . ."
+                 "input . icon-1 . icon-2" minmax(2rem, auto)
+                 / 1fr .5rem 1.5rem .25rem 1.5rem;
+}
+
+._two-input-two-icon_yadvv_72 {
+  grid-template: "label-1 label-1 label-2 label-2 . . ."
+                 "input-1 . input-2 . icon-1 . icon-2" minmax(2rem, auto)
+                 / minmax(76px, 1fr) .5rem 1fr .5rem 1.5rem .25rem 1.5rem;
+}
+
+._two-input-one-icon_yadvv_78 {
+  column-gap: calc(var(--spacing, .25rem) * 2);
+  grid-template: "label-1 label-2 label-2"
+                 "input-1 input-2 icon" minmax(2rem, auto)
+                 / 1fr 1fr 1.5rem;
+}
+
+._one-icon-one-input-one-icon_yadvv_85 {
+  grid-template: "label label label label label"
+                 "icon-1 . input . icon-2" minmax(2rem, auto)
+                 / 1.5rem .5rem 1fr .5rem 1.5rem;
+}
+
+._one-icon-one-input-two-icon_yadvv_91 {
+  grid-template: "label label label label label label label"
+                 "icon-1 . input . icon-2 . icon-3" minmax(2rem, auto)
+                 / 1.5rem .5rem 1fr .5rem 1.5rem .25rem 1.5rem;
+}
+
+._two-input-one-icon-double-row_yadvv_97 {
+  column-gap: calc(var(--spacing, .25rem) * 2);
+  grid-template: "label-1 label-2 ."
+                 "input-1 input-3 icon-1" 2rem
+                 "input-2 input-3 icon-2" 2rem
+                 / 1fr 1fr 1.5rem;
+}

package/dist/components/panel/src/styles/style.module.css.js

@@ -0,0 +1,23 @@
+import './style.module.css';const label = "_label_yadvv_2";
+const single = "_single_yadvv_14";
+const s = {
+  label,
+  single,
+  "two-columns": "_two-columns_yadvv_22",
+  "one-label-one-input": "_one-label-one-input_yadvv_30",
+  "one-label-one-input-one-icon": "_one-label-one-input-one-icon_yadvv_37",
+  "one-label-two-input": "_one-label-two-input_yadvv_44",
+  "one-icon-one-input": "_one-icon-one-input_yadvv_51",
+  "one-input-one-icon": "_one-input-one-icon_yadvv_59",
+  "one-input-two-icon": "_one-input-two-icon_yadvv_66",
+  "two-input-two-icon": "_two-input-two-icon_yadvv_72",
+  "two-input-one-icon": "_two-input-one-icon_yadvv_78",
+  "one-icon-one-input-one-icon": "_one-icon-one-input-one-icon_yadvv_85",
+  "one-icon-one-input-two-icon": "_one-icon-one-input-two-icon_yadvv_91",
+  "two-input-one-icon-double-row": "_two-input-one-icon-double-row_yadvv_97"
+};
+export {
+  s as default,
+  label,
+  single
+};

package/dist/components/panel/src/tv.d.ts

@@ -122,6 +122,9 @@ export declare const propertiesPanelRowTv: import('tailwind-variants').TVReturnT
         "two-input-two-icon": {
             container: string;
         };
+        "one-icon-one-input-one-icon": {
+            container: string;
+        };
         "one-icon-one-input-two-icon": {
             container: string;
         };
@@ -179,6 +182,9 @@ export declare const propertiesPanelRowTv: import('tailwind-variants').TVReturnT
         "two-input-two-icon": {
             container: string;
         };
+        "one-icon-one-input-one-icon": {
+            container: string;
+        };
         "one-icon-one-input-two-icon": {
             container: string;
         };
@@ -236,6 +242,9 @@ export declare const propertiesPanelRowTv: import('tailwind-variants').TVReturnT
         "two-input-two-icon": {
             container: string;
         };
+        "one-icon-one-input-one-icon": {
+            container: string;
+        };
         "one-icon-one-input-two-icon": {
             container: string;
         };
@@ -362,3 +371,83 @@ export declare const panelSortableRowTv: import('tailwind-variants').TVReturnTyp
     root: string;
     handle: string[];
 }, undefined, unknown, unknown, undefined>>;
+export declare const panelLabelTv: import('tailwind-variants').TVReturnType<{
+    showLabels: {
+        true: string[];
+        false: string;
+    };
+}, undefined, "[grid-area:label]", {
+    showLabels: {
+        true: string[];
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    showLabels: {
+        true: string[];
+        false: string;
+    };
+}, undefined, "[grid-area:label]", unknown, unknown, undefined>>;
+export declare const panelPreviewerTv: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "bg-secondary-background text-secondary-foreground relative mx-4 my-2 flex h-32 flex-col items-center justify-center rounded-xl", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "bg-secondary-background text-secondary-foreground relative mx-4 my-2 flex h-32 flex-col items-center justify-center rounded-xl", unknown, unknown, undefined>>;
+export declare const panelRowLabelTv: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "text-secondary-foreground cursor-default truncate select-none [grid-area:label]", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "text-secondary-foreground cursor-default truncate select-none [grid-area:label]", unknown, unknown, undefined>>;
+export declare const panelRowManyIconTv: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            container?: import('tailwind-merge').ClassNameValue;
+            iconWrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            container?: import('tailwind-merge').ClassNameValue;
+            iconWrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    container: string;
+    iconWrapper: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            container?: import('tailwind-merge').ClassNameValue;
+            iconWrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    container: string;
+    iconWrapper: string;
+}, import('tailwind-variants').TVReturnType<unknown, {
+    container: string;
+    iconWrapper: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const panelSortableContainerTv: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            container?: import('tailwind-merge').ClassNameValue;
+            rowContainer?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            container?: import('tailwind-merge').ClassNameValue;
+            rowContainer?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    container: string;
+    rowContainer: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            container?: import('tailwind-merge').ClassNameValue;
+            rowContainer?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    container: string;
+    rowContainer: string;
+}, import('tailwind-variants').TVReturnType<unknown, {
+    container: string;
+    rowContainer: string;
+}, undefined, unknown, unknown, undefined>>;

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

@@ -1,7 +1,8 @@
+import s from "./styles/style.module.css.js";
 import { tcv } from "../../../shared/utils/tcx/tcx.js";
 const propertiesPanelTv = tcv({
   slots: {
-    container: "properties-panel",
+    container: "relative flex min-w-0 flex-col not-last:border-b",
     triggerRef: "pointer-events-none absolute inset-y-0 left-0"
   },
   variants: {
@@ -27,25 +28,26 @@ const propertiesPaneTitleTv = tcv({
 });
 const propertiesPanelRowTv = tcv({
   slots: {
-    container: "group rows",
+    container: "group grid min-w-0 items-center pr-2 pl-4",
     triggerRef: "pointer-events-none absolute inset-y-0 left-0"
   },
   variants: {
     type: {
-      single: { container: "rows--single" },
-      "two-columns": { container: "rows--two-columns" },
-      "one-label-one-input": { container: "rows--one-label-one-input" },
-      "one-label-one-input-one-icon": { container: "rows--one-label-one-input-one-icon" },
-      "one-label-two-input": { container: "rows--one-label-two-input" },
-      "one-icon-one-input": { container: "rows--one-icon-one-input" },
-      "one-input-one-icon": { container: "rows--one-input-one-icon" },
-      "one-input-two-icon": { container: "rows--one-input-two-icon" },
-      "two-input-one-icon": { container: "rows--two-input-one-icon" },
-      "two-input-two-icon": { container: "rows--two-input-two-icon" },
-      "one-icon-one-input-two-icon": { container: "rows--one-icon-one-input-two-icon" },
-      "two-input-one-icon-double-row": { container: "rows--two-input-one-icon-double-row" },
+      single: { container: s.single },
+      "two-columns": { container: s["two-columns"] },
+      "one-label-one-input": { container: s["one-label-one-input"] },
+      "one-label-one-input-one-icon": { container: s["one-label-one-input-one-icon"] },
+      "one-label-two-input": { container: s["one-label-two-input"] },
+      "one-icon-one-input": { container: s["one-icon-one-input"] },
+      "one-input-one-icon": { container: s["one-input-one-icon"] },
+      "one-input-two-icon": { container: s["one-input-two-icon"] },
+      "two-input-one-icon": { container: s["two-input-one-icon"] },
+      "two-input-two-icon": { container: s["two-input-two-icon"] },
+      "one-icon-one-input-one-icon": { container: s["one-icon-one-input-one-icon"] },
+      "one-icon-one-input-two-icon": { container: s["one-icon-one-input-two-icon"] },
+      "two-input-one-icon-double-row": { container: s["two-input-one-icon-double-row"] },
       "one-icon-one-input-two-icon-double-row": {
-        container: "rows--one-icon-one-input-two-icon-double-row"
+        container: s["one-icon-one-input-two-icon-double-row"]
       }
     },
     triggerRef: {
@@ -97,7 +99,42 @@ const panelSortableRowTv = tcv({
     singleItem: false
   }
 });
+const panelLabelTv = tcv({
+  base: "[grid-area:label]",
+  variants: {
+    showLabels: {
+      true: ["text-secondary-foreground", s.label],
+      false: "sr-only"
+    }
+  },
+  defaultVariants: {
+    showLabels: false
+  }
+});
+const panelPreviewerTv = tcv({
+  base: "bg-secondary-background text-secondary-foreground relative mx-4 my-2 flex h-32 flex-col items-center justify-center rounded-xl"
+});
+const panelRowLabelTv = tcv({
+  base: "text-secondary-foreground cursor-default truncate select-none [grid-area:label]"
+});
+const panelRowManyIconTv = tcv({
+  slots: {
+    container: "group text-body-medium flex h-8 min-w-0 items-center justify-between gap-x-2 pr-2 pl-4 select-none",
+    iconWrapper: "text-secondary-foreground group-hover:text-default-foreground flex h-6 min-w-6 flex-none gap-x-1"
+  }
+});
+const panelSortableContainerTv = tcv({
+  slots: {
+    container: "relative flex flex-col",
+    rowContainer: "panel-sortable-row group/sortable-row relative"
+  }
+});
 export {
+  panelLabelTv,
+  panelPreviewerTv,
+  panelRowLabelTv,
+  panelRowManyIconTv,
+  panelSortableContainerTv,
   panelSortableRowTv,
   propertiesPaneTitleTv,
   propertiesPanelRowTv,

package/dist/components/skeleton/src/styles/style.module.css

@@ -0,0 +1,18 @@
+._skeleton_76sc4_1 {
+  transition: all 0.2s ease-in-out !important;
+  outline: none !important;
+  box-shadow: none !important;
+  border-color: transparent !important;
+  border-radius: var(--radius-md);
+  background-color: var(--color-secondary-background) !important;
+  resize: none !important;
+  pointer-events: none !important;
+  color: transparent !important;
+  &::placeholder,
+  &:placeholder-shown {
+    color: transparent !important;
+  }
+  & * {
+    visibility: hidden !important;
+  }
+}

package/dist/components/skeleton/src/styles/style.module.css.js

@@ -0,0 +1,8 @@
+import './style.module.css';const skeleton = "_skeleton_76sc4_1";
+const s = {
+  skeleton
+};
+export {
+  s as default,
+  skeleton
+};

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

@@ -1,3 +1,4 @@
+import s from "./styles/style.module.css.js";
 import { tcv } from "../../../shared/utils/tcx/tcx.js";
 const skeletonTv = tcv({
   slots: {
@@ -7,7 +8,7 @@ const skeletonTv = tcv({
   variants: {
     loading: {
       true: {
-        root: ["skeleton", "animate-pulse"]
+        root: [s.skeleton, "animate-pulse"]
       },
       false: {}
     },

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

@@ -1 +1 @@
-export { AllotmentProps, Allotment as Splitter, AllotmentHandle as SplitterHandle } from 'allotment';
+export { Allotment as Splitter, AllotmentHandle as SplitterHandle, AllotmentProps as SplitterProps } from 'allotment';

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

@@ -1,3 +1,3 @@
-import { Allotment as Splitter, AllotmentProps, AllotmentHandle as SplitterHandle } from 'allotment';
+import { Allotment as Splitter, AllotmentProps as SplitterProps, AllotmentHandle as SplitterHandle } from 'allotment';
 export { Splitter };
-export type { SplitterHandle, AllotmentProps };
+export type { SplitterHandle, SplitterProps };

package/dist/components/text-field/dist/index.js

@@ -18,6 +18,7 @@ var FieldAddon = memo(
   })
 );
 FieldAddon.displayName = "FieldAddon";
+var style_default = {};
 var TextFieldTv = tcv({
   slots: {
     container: ["flex min-w-0 flex-col items-start gap-2"],
@@ -26,7 +27,7 @@ var TextFieldTv = tcv({
       "rounded-md",
       "focus-within:before:border-selected-boundary",
       "before:border-transparent",
-      "fields__text-field"
+      style_default.textField
     ],
     input: "[grid-area:input]",
     prefix: "[grid-area:prefix]",

package/dist/components/text-field/src/styles/style.module.css

@@ -0,0 +1,31 @@
+/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
+@layer properties {
+  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+    *, :before, :after, ::backdrop {
+      --tw-border-style: solid;
+    }
+  }
+}
+
+._textField_u6mdl_10 {
+  grid-template-columns: auto 1fr auto;
+  grid-template-areas: "prefix input suffix";
+}
+
+._textField_u6mdl_10:before {
+  pointer-events: none;
+  z-index: 2;
+  border-style: var(--tw-border-style);
+  height: 100%;
+  transform-style: preserve-3d;
+  border-radius: inherit;
+  content: "";
+  border-width: 1px;
+  grid-area: 1 / 1 / 2 / 4;
+}
+
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}

package/dist/components/text-field/src/styles/style.module.css.js

@@ -0,0 +1,8 @@
+import './style.module.css';const textField = "_textField_u6mdl_10";
+const s = {
+  textField
+};
+export {
+  s as default,
+  textField
+};

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

@@ -1,3 +1,4 @@
+import s from "./styles/style.module.css.js";
 import { tcv } from "../../../shared/utils/tcx/tcx.js";
 const TextFieldTv = tcv({
   slots: {
@@ -7,7 +8,7 @@ const TextFieldTv = tcv({
       "rounded-md",
       "focus-within:before:border-selected-boundary",
       "before:border-transparent",
-      "fields__text-field"
+      s.textField
     ],
     input: "[grid-area:input]",
     prefix: "[grid-area:prefix]",