@choice-ui/react 1.7.4 → 1.7.5

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

@@ -1,22 +1,15 @@
 import { HTMLProps } from 'react';
-import { TooltipProps } from '../../tooltip/src';
 import * as react from 'react';
 
-interface ButtonProps extends Omit<HTMLProps<HTMLButtonElement>, "size"> {
+interface ButtonProps extends Omit<HTMLProps<HTMLButtonElement | HTMLAnchorElement>, "size" | "as"> {
     active?: boolean;
+    as?: React.ElementType;
     asChild?: boolean;
     className?: string;
     focused?: boolean;
     loading?: boolean;
     readOnly?: boolean;
-    /**
-     * @default "default"
-     */
     size?: "default" | "large";
-    tooltip?: TooltipProps;
-    /**
-     * @default "primary"
-     */
     variant?: "primary" | "secondary" | "solid" | "destructive" | "secondary-destruct" | "inverse" | "success" | "link" | "link-danger" | "ghost" | "dark" | "reset";
 }
 declare const Button: react.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;

package/dist/components/button/dist/index.js

@@ -1,10 +1,9 @@
-import { LoaderCircle } from "@choiceform/icons-react";
 import { Slot } from "../../slot/dist/index.js";
-import { Tooltip } from "../../tooltip/dist/index.js";
-import { forwardRef, isValidElement, cloneElement, useMemo } from "react";
+import { LoaderCircle } from "@choiceform/icons-react";
+import { forwardRef, useMemo, isValidElement, cloneElement } from "react";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { isMultiElement } from "../../../shared/utils/assertion.js";
 import { tcv, tcx } from "../../../shared/utils/tcx/tcx.js";
+import { isMultiElement } from "../../../shared/utils/assertion.js";
 var buttonTv = tcv({
   slots: {
     button: [
@@ -75,6 +74,10 @@ var buttonTv = tcv({
     focused: {
       true: "",
       false: ""
+    },
+    multiElement: {
+      true: "",
+      false: ""
     }
   },
   compoundVariants: [
@@ -123,10 +126,15 @@ var buttonTv = tcv({
       variant: ["link", "link-danger", "ghost"],
       disabled: true,
       class: {
-        button: [
-          "text-disabled-foreground pointer-events-none",
-          "data-[multi-element=true]:border-default-boundary"
-        ]
+        button: ["text-disabled-foreground pointer-events-none"]
+      }
+    },
+    {
+      variant: ["link", "link-danger", "ghost"],
+      disabled: true,
+      multiElement: true,
+      class: {
+        button: ["border-default-boundary"]
       }
     },
     {
@@ -244,7 +252,8 @@ var buttonTv = tcv({
     active: false,
     disabled: false,
     loading: false,
-    focused: false
+    focused: false,
+    multiElement: false
   }
 });
 var Button = forwardRef(function Button2(props, ref) {
@@ -259,13 +268,25 @@ var Button = forwardRef(function Button2(props, ref) {
     loading,
     asChild,
     children,
-    tooltip,
+    as,
     "aria-label": ariaLabel,
     onClick,
     ...rest
   } = props;
-  const Button3 = asChild ? Slot : "button";
-  const tv = buttonTv({ variant, size, active, disabled, loading, focused, className });
+  const As = as ?? "button";
+  const AsComponent = asChild ? Slot : As;
+  const elementProps = !asChild && As === "button" ? { type: rest.type ?? "button" } : {};
+  const tv = useMemo(
+    () => buttonTv({
+      variant,
+      size,
+      active,
+      disabled,
+      loading,
+      focused
+    }),
+    [variant, size, active, disabled, loading, focused]
+  );
   const content = isValidElement(children) ? cloneElement(children, {
     children: children.props.children
   }) : loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -279,23 +300,21 @@ var Button = forwardRef(function Button2(props, ref) {
     return props["aria-label"];
   }, [children, props]);
   const handleClick = readOnly ? void 0 : onClick;
-  const button = /* @__PURE__ */ jsx(
-    Button3,
+  return /* @__PURE__ */ jsx(
+    AsComponent,
     {
-      ...rest,
       ref,
-      type: rest.type || "button",
+      className: tcx(tv.button({ multiElement: isMultiElement(content) }), className),
+      ...elementProps,
+      ...rest,
       disabled: disabled || loading,
       onClick: handleClick,
-      className: tcx(tv.button(), className),
-      "data-multi-element": isMultiElement(content),
       "aria-disabled": disabled || loading,
       "aria-busy": loading,
       "aria-label": ariaLabelProps,
       children: content
     }
   );
-  return tooltip ? /* @__PURE__ */ jsx(Tooltip, { ...tooltip, children: button }) : button;
 });
 Button.displayName = "Button";
 export {

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

@@ -1,20 +1,13 @@
-import { TooltipProps } from '../../tooltip/src';
 import { HTMLProps } from 'react';
-export interface ButtonProps extends Omit<HTMLProps<HTMLButtonElement>, "size"> {
+export interface ButtonProps extends Omit<HTMLProps<HTMLButtonElement | HTMLAnchorElement>, "size" | "as"> {
     active?: boolean;
+    as?: React.ElementType;
     asChild?: boolean;
     className?: string;
     focused?: boolean;
     loading?: boolean;
     readOnly?: boolean;
-    /**
-     * @default "default"
-     */
     size?: "default" | "large";
-    tooltip?: TooltipProps;
-    /**
-     * @default "primary"
-     */
     variant?: "primary" | "secondary" | "solid" | "destructive" | "secondary-destruct" | "inverse" | "success" | "link" | "link-danger" | "ghost" | "dark" | "reset";
 }
 export declare const Button: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/button/src/button.js

@@ -1,8 +1,7 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { LoaderCircle } from "@choiceform/icons-react";
 import { Slot } from "../../slot/dist/index.js";
-import { Tooltip } from "../../tooltip/dist/index.js";
-import { forwardRef, isValidElement, cloneElement, useMemo } from "react";
+import { LoaderCircle } from "@choiceform/icons-react";
+import { forwardRef, useMemo, isValidElement, cloneElement } from "react";
 import { buttonTv } from "./tv.js";
 import { tcx } from "../../../shared/utils/tcx/tcx.js";
 import { isMultiElement } from "../../../shared/utils/assertion.js";
@@ -18,13 +17,25 @@ const Button = forwardRef(function Button2(props, ref) {
     loading,
     asChild,
     children,
-    tooltip,
+    as,
     "aria-label": ariaLabel,
     onClick,
     ...rest
   } = props;
-  const Button3 = asChild ? Slot : "button";
-  const tv = buttonTv({ variant, size, active, disabled, loading, focused, className });
+  const As = as ?? "button";
+  const AsComponent = asChild ? Slot : As;
+  const elementProps = !asChild && As === "button" ? { type: rest.type ?? "button" } : {};
+  const tv = useMemo(
+    () => buttonTv({
+      variant,
+      size,
+      active,
+      disabled,
+      loading,
+      focused
+    }),
+    [variant, size, active, disabled, loading, focused]
+  );
   const content = isValidElement(children) ? cloneElement(children, {
     children: children.props.children
   }) : loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -38,23 +49,21 @@ const Button = forwardRef(function Button2(props, ref) {
     return props["aria-label"];
   }, [children, props]);
   const handleClick = readOnly ? void 0 : onClick;
-  const button = /* @__PURE__ */ jsx(
-    Button3,
+  return /* @__PURE__ */ jsx(
+    AsComponent,
     {
-      ...rest,
       ref,
-      type: rest.type || "button",
+      className: tcx(tv.button({ multiElement: isMultiElement(content) }), className),
+      ...elementProps,
+      ...rest,
       disabled: disabled || loading,
       onClick: handleClick,
-      className: tcx(tv.button(), className),
-      "data-multi-element": isMultiElement(content),
       "aria-disabled": disabled || loading,
       "aria-busy": loading,
       "aria-label": ariaLabelProps,
       children: content
     }
   );
-  return tooltip ? /* @__PURE__ */ jsx(Tooltip, { ...tooltip, children: button }) : button;
 });
 Button.displayName = "Button";
 export {

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

@@ -61,6 +61,10 @@ export declare const buttonTv: import('tailwind-variants').TVReturnType<{
         true: string;
         false: string;
     };
+    multiElement: {
+        true: string;
+        false: string;
+    };
 }, {
     button: string[];
     spinner: string[];
@@ -128,6 +132,10 @@ export declare const buttonTv: import('tailwind-variants').TVReturnType<{
         true: string;
         false: string;
     };
+    multiElement: {
+        true: string;
+        false: string;
+    };
 }, {
     button: string[];
     spinner: string[];
@@ -195,6 +203,10 @@ export declare const buttonTv: import('tailwind-variants').TVReturnType<{
         true: string;
         false: string;
     };
+    multiElement: {
+        true: string;
+        false: string;
+    };
 }, {
     button: string[];
     spinner: string[];

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

@@ -69,6 +69,10 @@ const buttonTv = tcv({
     focused: {
       true: "",
       false: ""
+    },
+    multiElement: {
+      true: "",
+      false: ""
     }
   },
   compoundVariants: [
@@ -117,10 +121,15 @@ const buttonTv = tcv({
       variant: ["link", "link-danger", "ghost"],
       disabled: true,
       class: {
-        button: [
-          "text-disabled-foreground pointer-events-none",
-          "data-[multi-element=true]:border-default-boundary"
-        ]
+        button: ["text-disabled-foreground pointer-events-none"]
+      }
+    },
+    {
+      variant: ["link", "link-danger", "ghost"],
+      disabled: true,
+      multiElement: true,
+      class: {
+        button: ["border-default-boundary"]
       }
     },
     {
@@ -238,7 +247,8 @@ const buttonTv = tcv({
     active: false,
     disabled: false,
     loading: false,
-    focused: false
+    focused: false,
+    multiElement: false
   }
 });
 export {

package/dist/components/comments/src/comment-item/tv.d.ts

@@ -4,8 +4,8 @@ export declare const CommentItemTv: import('tailwind-variants').TVReturnType<{
             meta?: import('tailwind-merge').ClassNameValue;
             content?: import('tailwind-merge').ClassNameValue;
             date?: import('tailwind-merge').ClassNameValue;
-            root?: import('tailwind-merge').ClassNameValue;
             name?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
             avatar?: import('tailwind-merge').ClassNameValue;
             actionMenu?: import('tailwind-merge').ClassNameValue;
         };
@@ -16,8 +16,8 @@ export declare const CommentItemTv: import('tailwind-variants').TVReturnType<{
             meta?: import('tailwind-merge').ClassNameValue;
             content?: import('tailwind-merge').ClassNameValue;
             date?: import('tailwind-merge').ClassNameValue;
-            root?: import('tailwind-merge').ClassNameValue;
             name?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
             avatar?: import('tailwind-merge').ClassNameValue;
             actionMenu?: import('tailwind-merge').ClassNameValue;
         };
@@ -36,8 +36,8 @@ export declare const CommentItemTv: import('tailwind-variants').TVReturnType<{
             meta?: import('tailwind-merge').ClassNameValue;
             content?: import('tailwind-merge').ClassNameValue;
             date?: import('tailwind-merge').ClassNameValue;
-            root?: import('tailwind-merge').ClassNameValue;
             name?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
             avatar?: import('tailwind-merge').ClassNameValue;
             actionMenu?: import('tailwind-merge').ClassNameValue;
         };

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

@@ -8,6 +8,7 @@ import { AnimatePresence, motion } from "framer-motion";
 import { Input } from "../../input/dist/index.js";
 import { Textarea } from "../../textarea/dist/index.js";
 import { tcv, tcx } from "../../../shared/utils/tcx/tcx.js";
+var style_default = {};
 var ModalTv = tcv({
   slots: {
     root: "bg-default-background z-modals pointer-events-auto relative flex max-w-fit flex-col rounded-xl shadow-xl"
@@ -15,7 +16,7 @@ var ModalTv = tcv({
 });
 var ModalHeaderTv = tcv({
   slots: {
-    root: "modal__header border-default-boundary w-full flex-none items-center border-b",
+    root: [style_default.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 +31,7 @@ var ModalHeaderTv = tcv({
     },
     close: {
       true: {
-        root: "modal__header--action"
+        root: "grid-cols-[auto_1fr_2.5rem]"
       },
       false: {}
     }

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

@@ -0,0 +1,4 @@
+._header_15lpo_1 {
+  grid-template-rows: minmax(2.5rem, auto);
+  grid-template-areas: "title . close" "input input input";
+}

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

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

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

@@ -39,7 +39,7 @@ export declare const ModalHeaderTv: import('tailwind-variants').TVReturnType<{
         false: {};
     };
 }, {
-    root: string;
+    root: string[];
     title: string;
     close: string;
 }, undefined, {
@@ -58,7 +58,7 @@ export declare const ModalHeaderTv: import('tailwind-variants').TVReturnType<{
         false: {};
     };
 }, {
-    root: string;
+    root: string[];
     title: string;
     close: string;
 }, import('tailwind-variants').TVReturnType<{
@@ -77,7 +77,7 @@ export declare const ModalHeaderTv: import('tailwind-variants').TVReturnType<{
         false: {};
     };
 }, {
-    root: string;
+    root: string[];
     title: string;
     close: string;
 }, undefined, unknown, unknown, undefined>>;

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

@@ -1,3 +1,4 @@
+import s from "./styles/style.module.css.js";
 import { tcv } from "../../../shared/utils/tcx/tcx.js";
 const ModalTv = tcv({
   slots: {
@@ -6,7 +7,7 @@ const ModalTv = tcv({
 });
 const ModalHeaderTv = tcv({
   slots: {
-    root: "modal__header border-default-boundary w-full flex-none items-center border-b",
+    root: [s.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]"
   },
@@ -21,7 +22,7 @@ const ModalHeaderTv = tcv({
     },
     close: {
       true: {
-        root: "modal__header--action"
+        root: "grid-cols-[auto_1fr_2.5rem]"
       },
       false: {}
     }

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

@@ -20,9 +20,10 @@ function useNumericInputContext() {
   }
   return context;
 }
+var style_default = {};
 var NumericInputTv = tcv({
   slots: {
-    container: ["group/input grid before:border-transparent", "input__number"],
+    container: ["group/input grid before:border-transparent", style_default.input],
     input: ["peer", "w-full", "cursor-default appearance-none truncate"],
     tooltip: "col-span-3 col-start-1 row-start-1"
   },
@@ -41,12 +42,12 @@ var NumericInputTv = tcv({
     },
     size: {
       default: {
-        container: ["h-6", "input__number--default"],
+        container: ["h-6", style_default.default],
         input: "h-6",
         tooltip: "h-6"
       },
       large: {
-        container: ["h-8", "input__number--large"],
+        container: ["h-8", style_default.large],
         input: "h-8",
         tooltip: "h-8"
       }

package/dist/components/numeric-input/src/styles/style.module.css

@@ -0,0 +1,45 @@
+/*! 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;
+    }
+  }
+}
+
+._input_irmph_10 {
+  grid-template-columns: auto auto 1fr auto auto;
+  grid-template-areas: "prefix-handler variable input action suffix-handler";
+}
+
+._input_irmph_10:before {
+  pointer-events: none;
+  z-index: 3;
+  border-radius: var(--radius-md, .375rem);
+  border-style: var(--tw-border-style);
+  content: "";
+  border-width: 1px;
+  grid-area: 1 / 1 / 2 / 6;
+}
+
+._default_irmph_25 {
+  grid-template-rows: 1.5rem;
+}
+
+._default_irmph_25:before {
+  height: calc(var(--spacing, .25rem) * 6);
+}
+
+._large_irmph_33 {
+  grid-template-rows: 2rem;
+}
+
+._large_irmph_33:before {
+  height: calc(var(--spacing, .25rem) * 8);
+}
+
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}

package/dist/components/numeric-input/src/styles/style.module.css.js

@@ -0,0 +1,12 @@
+import './style.module.css';const input = "_input_irmph_10";
+const large = "_large_irmph_33";
+const s = {
+  input,
+  "default": "_default_irmph_25",
+  large
+};
+export {
+  s as default,
+  input,
+  large
+};

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

@@ -1,7 +1,8 @@
+import s from "./styles/style.module.css.js";
 import { tcv } from "../../../shared/utils/tcx/tcx.js";
 const NumericInputTv = tcv({
   slots: {
-    container: ["group/input grid before:border-transparent", "input__number"],
+    container: ["group/input grid before:border-transparent", s.input],
     input: ["peer", "w-full", "cursor-default appearance-none truncate"],
     tooltip: "col-span-3 col-start-1 row-start-1"
   },
@@ -20,12 +21,12 @@ const NumericInputTv = tcv({
     },
     size: {
       default: {
-        container: ["h-6", "input__number--default"],
+        container: ["h-6", s.default],
         input: "h-6",
         tooltip: "h-6"
       },
       large: {
-        container: ["h-8", "input__number--large"],
+        container: ["h-8", s.large],
         input: "h-8",
         tooltip: "h-8"
       }

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

@@ -4,7 +4,6 @@ import { useMemo, createContext, useContext } from "react";
 import { otpInputTv } from "./tv.js";
 import { tcx } from "../../../shared/utils/tcx/tcx.js";
 const OTPInputCtx = createContext({
-  styles: otpInputTv({}),
   slotProps: [],
   variant: "default",
   disabled: false,
@@ -32,30 +31,26 @@ function OTPInputRoot({
       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 }),
+      render: ({ slots: slotProps }) => /* @__PURE__ */ jsx(OTPInputCtx.Provider, { value: { slotProps, variant, disabled, isInvalid }, children }),
       ...props
     }
   );
 }
 function OTPInputGroup({ className, ...props }) {
-  var _a;
-  const { styles } = useContext(OTPInputCtx);
+  const tv = otpInputTv();
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: (_a = styles == null ? void 0 : styles.group) == null ? void 0 : _a.call(styles, { className }),
-      "data-slot": "otp-input-group",
+      className: tcx(tv.group(), className),
       ...props
     }
   );
 }
 function OTPInputSlot({ className, index, ...props }) {
-  var _a, _b, _c, _d;
-  const { styles, slotProps, variant, disabled, isInvalid } = useContext(OTPInputCtx);
+  const { slotProps, variant, disabled, isInvalid } = useContext(OTPInputCtx);
   const { char, hasFakeCaret, isActive } = (slotProps == null ? void 0 : slotProps[index]) ?? {};
-  const slotStyles = otpInputTv({
+  const tv = otpInputTv({
     variant,
     selected: isActive,
     disabled,
@@ -65,40 +60,24 @@ function OTPInputSlot({ className, index, ...props }) {
     "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)),
+      className: tcx(tv.slot(), className),
       "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), "otp-input__caret"),
-            "data-slot": "otp-input-caret"
-          }
-        ) : null
+        char ? /* @__PURE__ */ jsx("div", { className: tv.slotValue(), children: char }) : null,
+        hasFakeCaret && isActive ? /* @__PURE__ */ jsx("div", { className: tv.caret() }) : null
       ]
     }
   );
 }
 function OTPInputSeparator({ className, children, ...props }) {
-  var _a;
-  const { styles } = useContext(OTPInputCtx);
+  const tv = otpInputTv();
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: (_a = styles == null ? void 0 : styles.separator) == null ? void 0 : _a.call(styles, { className }),
-      "data-slot": "otp-input-separator",
+      className: tcx(tv.separator(), className),
       ...props,
       children: children ?? /* @__PURE__ */ jsx("span", { children: "-" })
     }

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

@@ -0,0 +1,15 @@
+._caret_giwn8_1 {
+  animation: _otp-caret-blink_giwn8_1 1s ease-out infinite;
+}
+
+@keyframes _otp-caret-blink_giwn8_1 {
+  0%,
+  70%,
+  100% {
+    opacity: 1;
+  }
+  20%,
+  50% {
+    opacity: 0;
+  }
+}

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

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