@fanvue/ui 0.1.0-alpha.3 → 1.0.0

package/dist/cjs/components/Checkbox/Checkbox.cjs

@@ -0,0 +1,157 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const CheckboxPrimitive = require("@radix-ui/react-checkbox");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+const CheckIcon = require("../Icons/CheckIcon.cjs");
+const MinusIcon = require("../Icons/MinusIcon.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const CheckboxPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(CheckboxPrimitive);
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const Checkbox = React__namespace.forwardRef(
+  ({ className, size = "default", label, helperText, disabled, name, ...props }, ref) => {
+    const id = React__namespace.useId();
+    const helperTextId = helperText ? `${id}-helper` : void 0;
+    const hasLabel = Boolean(label || helperText);
+    const inputRef = React__namespace.useRef(null);
+    React__namespace.useImperativeHandle(ref, () => inputRef.current);
+    const handleCheckedChange = (value) => {
+      const checked = value === true;
+      if (inputRef.current) {
+        inputRef.current.checked = checked;
+        inputRef.current.dispatchEvent(new Event("change", { bubbles: true }));
+      }
+      props.onCheckedChange?.(value);
+    };
+    const checkboxElement = /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        className: cn.cn(
+          "relative inline-flex size-5 shrink-0",
+          // Alignment when used with label
+          label && (helperText ? "mt-1" : "mt-0.5")
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "checkbox",
+              name,
+              disabled,
+              "aria-hidden": true,
+              tabIndex: -1,
+              onChange: () => {
+              },
+              className: "pointer-events-none absolute size-px overflow-hidden opacity-0",
+              style: { clip: "rect(0,0,0,0)" }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            CheckboxPrimitive__namespace.Root,
+            {
+              id,
+              disabled,
+              "aria-describedby": helperTextId,
+              "data-testid": "checkbox",
+              ...props,
+              onCheckedChange: handleCheckedChange,
+              className: cn.cn(
+                // Base styles
+                "flex size-5 items-center justify-center rounded border-2",
+                "transition-[border-color,background-color,color,box-shadow] duration-150",
+                // Default state
+                "border-body-100 bg-transparent text-transparent",
+                // Checked state
+                "data-[state=checked]:border-body-100 data-[state=checked]:bg-body-100 data-[state=checked]:text-body-300",
+                // Indeterminate state
+                "data-[state=indeterminate]:border-body-100 data-[state=indeterminate]:bg-body-100 data-[state=indeterminate]:text-body-300",
+                // Hover state
+                "hover:ring-2 hover:ring-brand-green-500 group-hover:ring-2 group-hover:ring-brand-green-500",
+                // Focus state
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-purple-500 focus-visible:ring-offset-2 focus-visible:ring-offset-background-inverse-solid",
+                // Disabled state
+                "disabled:cursor-not-allowed disabled:border-disabled-400 disabled:ring-0 disabled:group-hover:ring-0",
+                "disabled:data-[state=checked]:border-disabled-400 disabled:data-[state=checked]:bg-disabled-400 disabled:data-[state=checked]:text-disabled-100",
+                !hasLabel && className
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                CheckboxPrimitive__namespace.Indicator,
+                {
+                  forceMount: true,
+                  className: cn.cn(
+                    "flex size-3 items-center justify-center text-body-300",
+                    "data-[state=unchecked]:invisible"
+                  ),
+                  children: props.checked === "indeterminate" ? /* @__PURE__ */ jsxRuntime.jsx(MinusIcon.MinusIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(CheckIcon.CheckIcon, {})
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+    if (!hasLabel) {
+      return checkboxElement;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn.cn(
+          "inline-flex flex-col gap-0.5",
+          disabled && "is-disabled cursor-not-allowed",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group inline-flex items-start gap-2", children: [
+            checkboxElement,
+            label && /* @__PURE__ */ jsxRuntime.jsx(
+              "label",
+              {
+                htmlFor: id,
+                className: cn.cn(
+                  "cursor-pointer select-none text-body-100",
+                  "group-has-disabled:cursor-not-allowed group-has-disabled:text-disabled-100",
+                  size === "small" ? "typography-body-2-semibold" : "typography-body-1-semibold"
+                ),
+                children: label
+              }
+            )
+          ] }),
+          helperText && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              id: helperTextId,
+              className: cn.cn(
+                "ml-7 text-body-200",
+                "in-[.is-disabled]:cursor-not-allowed in-[.is-disabled]:text-disabled-100",
+                size === "small" ? "typography-caption-regular" : "typography-body-2-regular"
+              ),
+              children: helperText
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+exports.Checkbox = Checkbox;
+//# sourceMappingURL=Checkbox.cjs.map

package/dist/cjs/components/Checkbox/Checkbox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.cjs","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { CheckIcon } from \"../Icons/CheckIcon\";\nimport { MinusIcon } from \"../Icons/MinusIcon\";\n\nexport type CheckboxSize = \"default\" | \"small\";\n\nexport interface CheckboxProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, \"asChild\"> {\n  /** Size variant for label and helper text */\n  size?: CheckboxSize;\n  /** Label text displayed next to the checkbox */\n  label?: string;\n  /** Helper text displayed below the label */\n  helperText?: string;\n}\n\nexport const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(\n  ({ className, size = \"default\", label, helperText, disabled, name, ...props }, ref) => {\n    const id = React.useId();\n    const helperTextId = helperText ? `${id}-helper` : undefined;\n    const hasLabel = Boolean(label || helperText);\n\n    // Hidden input for form library compatibility (e.g. react-hook-form register)\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);\n\n    const handleCheckedChange = (value: boolean | \"indeterminate\") => {\n      const checked = value === true;\n      if (inputRef.current) {\n        inputRef.current.checked = checked;\n        inputRef.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\n      }\n      props.onCheckedChange?.(value);\n    };\n\n    const checkboxElement = (\n      <span\n        className={cn(\n          \"relative inline-flex size-5 shrink-0\",\n          // Alignment when used with label\n          label && (helperText ? \"mt-1\" : \"mt-0.5\"),\n        )}\n      >\n        <input\n          ref={inputRef}\n          type=\"checkbox\"\n          name={name}\n          disabled={disabled}\n          aria-hidden\n          tabIndex={-1}\n          onChange={() => {}}\n          className=\"pointer-events-none absolute size-px overflow-hidden opacity-0\"\n          style={{ clip: \"rect(0,0,0,0)\" }}\n        />\n        <CheckboxPrimitive.Root\n          id={id}\n          disabled={disabled}\n          aria-describedby={helperTextId}\n          data-testid=\"checkbox\"\n          {...props}\n          onCheckedChange={handleCheckedChange}\n          className={cn(\n            // Base styles\n            \"flex size-5 items-center justify-center rounded border-2\",\n            \"transition-[border-color,background-color,color,box-shadow] duration-150\",\n            // Default state\n            \"border-body-100 bg-transparent text-transparent\",\n            // Checked state\n            \"data-[state=checked]:border-body-100 data-[state=checked]:bg-body-100 data-[state=checked]:text-body-300\",\n            // Indeterminate state\n            \"data-[state=indeterminate]:border-body-100 data-[state=indeterminate]:bg-body-100 data-[state=indeterminate]:text-body-300\",\n            // Hover state\n            \"hover:ring-2 hover:ring-brand-green-500 group-hover:ring-2 group-hover:ring-brand-green-500\",\n            // Focus state\n            \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-purple-500 focus-visible:ring-offset-2 focus-visible:ring-offset-background-inverse-solid\",\n            // Disabled state\n            \"disabled:cursor-not-allowed disabled:border-disabled-400 disabled:ring-0 disabled:group-hover:ring-0\",\n            \"disabled:data-[state=checked]:border-disabled-400 disabled:data-[state=checked]:bg-disabled-400 disabled:data-[state=checked]:text-disabled-100\",\n            !hasLabel && className,\n          )}\n        >\n          <CheckboxPrimitive.Indicator\n            forceMount\n            className={cn(\n              \"flex size-3 items-center justify-center text-body-300\",\n              \"data-[state=unchecked]:invisible\",\n            )}\n          >\n            {props.checked === \"indeterminate\" ? <MinusIcon /> : <CheckIcon />}\n          </CheckboxPrimitive.Indicator>\n        </CheckboxPrimitive.Root>\n      </span>\n    );\n\n    if (!hasLabel) {\n      return checkboxElement;\n    }\n\n    return (\n      <div\n        className={cn(\n          \"inline-flex flex-col gap-0.5\",\n          disabled && \"is-disabled cursor-not-allowed\",\n          className,\n        )}\n      >\n        <div className=\"group inline-flex items-start gap-2\">\n          {checkboxElement}\n          {label && (\n            <label\n              htmlFor={id}\n              className={cn(\n                \"cursor-pointer select-none text-body-100\",\n                \"group-has-disabled:cursor-not-allowed group-has-disabled:text-disabled-100\",\n                size === \"small\" ? \"typography-body-2-semibold\" : \"typography-body-1-semibold\",\n              )}\n            >\n              {label}\n            </label>\n          )}\n        </div>\n        {helperText && (\n          <span\n            id={helperTextId}\n            className={cn(\n              \"ml-7 text-body-200\",\n              \"in-[.is-disabled]:cursor-not-allowed in-[.is-disabled]:text-disabled-100\",\n              size === \"small\" ? \"typography-caption-regular\" : \"typography-body-2-regular\",\n            )}\n          >\n            {helperText}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nCheckbox.displayName = \"Checkbox\";\n"],"names":["React","jsxs","cn","jsx","CheckboxPrimitive","MinusIcon","CheckIcon"],"mappings":"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"}

package/dist/cjs/components/Chip/Chip.cjs

@@ -0,0 +1,92 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const reactSlot = require("@radix-ui/react-slot");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const Chip = React__namespace.forwardRef(
+  ({
+    className,
+    variant = "rounded",
+    size = "32",
+    selected = false,
+    disabled = false,
+    leftDot = false,
+    leftIcon,
+    rightIcon,
+    notificationLabel,
+    onClick,
+    asChild = false,
+    children,
+    ...props
+  }, ref) => {
+    const isInteractive = !!onClick && !asChild;
+    const Comp = asChild ? reactSlot.Slot : isInteractive ? "button" : "span";
+    const isDark = variant === "dark";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      Comp,
+      {
+        ref,
+        "data-testid": "chip",
+        className: cn.cn(
+          "typography-caption-semibold relative inline-flex items-center gap-2 px-3 transition-colors",
+          // Shape
+          variant === "square" ? "rounded-lg" : "rounded-full",
+          // Size
+          size === "32" && "h-8 py-1",
+          size === "40" && "h-10 py-2.5",
+          // Variant colors
+          isDark && "bg-background-800 text-body-white-solid-constant",
+          !isDark && selected && "bg-brand-green-50 text-neutral-400",
+          !isDark && !selected && "bg-neutral-100 text-neutral-400",
+          // Hover
+          isInteractive && !disabled && !isDark && selected && "hover:bg-brand-green-500 hover:text-body-black-solid-constant",
+          isInteractive && !disabled && !isDark && !selected && "hover:bg-hover-400",
+          // Focus
+          "focus-visible:shadow-focus-ring focus-visible:outline-none",
+          // Disabled
+          disabled && isDark && "pointer-events-none opacity-50",
+          disabled && !isDark && "pointer-events-none text-neutral-300",
+          className
+        ),
+        ...isInteractive && {
+          type: "button",
+          disabled,
+          "aria-pressed": selected,
+          onClick
+        },
+        ...!isInteractive && disabled && { "aria-disabled": true },
+        ...selected && { "data-selected": "" },
+        ...props,
+        children: [
+          leftDot && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-2 shrink-0 rounded-full bg-current", "aria-hidden": "true" }),
+          leftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-5 shrink-0 items-center justify-center", "aria-hidden": "true", children: leftIcon }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slottable, { children }),
+          rightIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-5 shrink-0 items-center justify-center", "aria-hidden": "true", children: rightIcon }),
+          notificationLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-caption-semibold absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-body-100 px-1 text-body-300", children: notificationLabel })
+        ]
+      }
+    );
+  }
+);
+Chip.displayName = "Chip";
+exports.Chip = Chip;
+//# sourceMappingURL=Chip.cjs.map

package/dist/cjs/components/Chip/Chip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.cjs","sources":["../../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport type ChipVariant = \"rounded\" | \"square\" | \"dark\";\nexport type ChipSize = \"32\" | \"40\";\n\nexport interface ChipProps extends React.HTMLAttributes<HTMLElement> {\n  /** Visual shape variant of the chip */\n  variant?: ChipVariant;\n  /** Size of the chip */\n  size?: ChipSize;\n  /** Whether the chip is in a selected state */\n  selected?: boolean;\n  /** Whether the chip is disabled */\n  disabled?: boolean;\n  /** Show left status dot */\n  leftDot?: boolean;\n  /** Left icon element */\n  leftIcon?: React.ReactNode;\n  /** Right icon element */\n  rightIcon?: React.ReactNode;\n  /** Notification badge content (e.g., \"99+\"). Passed as a string for i18n support. */\n  notificationLabel?: string;\n  /** Click handler — when provided, the chip renders as a `<button>` for accessibility */\n  onClick?: React.MouseEventHandler<HTMLElement>;\n  /** Render as a different element using Radix Slot */\n  asChild?: boolean;\n}\n\nexport const Chip = React.forwardRef<HTMLButtonElement, ChipProps>(\n  (\n    {\n      className,\n      variant = \"rounded\",\n      size = \"32\",\n      selected = false,\n      disabled = false,\n      leftDot = false,\n      leftIcon,\n      rightIcon,\n      notificationLabel,\n      onClick,\n      asChild = false,\n      children,\n      ...props\n    },\n    ref,\n    // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: Variant-heavy UI component\n  ) => {\n    const isInteractive = !!onClick && !asChild;\n    const Comp = asChild ? Slot : isInteractive ? \"button\" : \"span\";\n    const isDark = variant === \"dark\";\n\n    return (\n      <Comp\n        ref={ref}\n        data-testid=\"chip\"\n        className={cn(\n          \"typography-caption-semibold relative inline-flex items-center gap-2 px-3 transition-colors\",\n          // Shape\n          variant === \"square\" ? \"rounded-lg\" : \"rounded-full\",\n          // Size\n          size === \"32\" && \"h-8 py-1\",\n          size === \"40\" && \"h-10 py-2.5\",\n          // Variant colors\n          isDark && \"bg-background-800 text-body-white-solid-constant\",\n          !isDark && selected && \"bg-brand-green-50 text-neutral-400\",\n          !isDark && !selected && \"bg-neutral-100 text-neutral-400\",\n          // Hover\n          isInteractive &&\n            !disabled &&\n            !isDark &&\n            selected &&\n            \"hover:bg-brand-green-500 hover:text-body-black-solid-constant\",\n          isInteractive && !disabled && !isDark && !selected && \"hover:bg-hover-400\",\n          // Focus\n          \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n          // Disabled\n          disabled && isDark && \"pointer-events-none opacity-50\",\n          disabled && !isDark && \"pointer-events-none text-neutral-300\",\n          className,\n        )}\n        {...(isInteractive && {\n          type: \"button\" as const,\n          disabled,\n          \"aria-pressed\": selected,\n          onClick,\n        })}\n        {...(!isInteractive && disabled && { \"aria-disabled\": true })}\n        {...(selected && { \"data-selected\": \"\" })}\n        {...props}\n      >\n        {leftDot && <span className=\"size-2 shrink-0 rounded-full bg-current\" aria-hidden=\"true\" />}\n        {leftIcon && (\n          <span className=\"flex size-5 shrink-0 items-center justify-center\" aria-hidden=\"true\">\n            {leftIcon}\n          </span>\n        )}\n        <Slottable>{children}</Slottable>\n        {rightIcon && (\n          <span className=\"flex size-5 shrink-0 items-center justify-center\" aria-hidden=\"true\">\n            {rightIcon}\n          </span>\n        )}\n        {notificationLabel && (\n          <span className=\"typography-caption-semibold absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-body-100 px-1 text-body-300\">\n            {notificationLabel}\n          </span>\n        )}\n      </Comp>\n    );\n  },\n);\n\nChip.displayName = \"Chip\";\n"],"names":["React","Slot","jsxs","cn","jsx","Slottable"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA8BO,MAAM,OAAOA,iBAAM;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,IACP,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QAEG;AACH,UAAM,gBAAgB,CAAC,CAAC,WAAW,CAAC;AACpC,UAAM,OAAO,UAAUC,UAAAA,OAAO,gBAAgB,WAAW;AACzD,UAAM,SAAS,YAAY;AAE3B,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAWC,GAAAA;AAAAA,UACT;AAAA;AAAA,UAEA,YAAY,WAAW,eAAe;AAAA;AAAA,UAEtC,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA;AAAA,UAEjB,UAAU;AAAA,UACV,CAAC,UAAU,YAAY;AAAA,UACvB,CAAC,UAAU,CAAC,YAAY;AAAA;AAAA,UAExB,iBACE,CAAC,YACD,CAAC,UACD,YACA;AAAA,UACF,iBAAiB,CAAC,YAAY,CAAC,UAAU,CAAC,YAAY;AAAA;AAAA,UAEtD;AAAA;AAAA,UAEA,YAAY,UAAU;AAAA,UACtB,YAAY,CAAC,UAAU;AAAA,UACvB;AAAA,QAAA;AAAA,QAED,GAAI,iBAAiB;AAAA,UACpB,MAAM;AAAA,UACN;AAAA,UACA,gBAAgB;AAAA,UAChB;AAAA,QAAA;AAAA,QAED,GAAI,CAAC,iBAAiB,YAAY,EAAE,iBAAiB,KAAA;AAAA,QACrD,GAAI,YAAY,EAAE,iBAAiB,GAAA;AAAA,QACnC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,WAAWC,2BAAAA,IAAC,QAAA,EAAK,WAAU,2CAA0C,eAAY,QAAO;AAAA,UACxF,YACCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oDAAmD,eAAY,QAC5E,UAAA,UACH;AAAA,UAEFA,+BAACC,UAAAA,aAAW,UAAS;AAAA,UACpB,aACCD,2BAAAA,IAAC,QAAA,EAAK,WAAU,oDAAmD,eAAY,QAC5E,UAAA,WACH;AAAA,UAED,qBACCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,iJACb,UAAA,kBAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,KAAK,cAAc;;"}

package/dist/cjs/components/Count/Count.cjs

@@ -0,0 +1,56 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const reactSlot = require("@radix-ui/react-slot");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+function getDisplayValue(value, max) {
+  return value > max ? `${max}+` : value.toString();
+}
+const Count = React__namespace.forwardRef(
+  ({ className, variant = "Default", value = 0, max = 99, asChild = false, children, ...props }, ref) => {
+    if (value === 0 && !children) {
+      return null;
+    }
+    const Comp = asChild ? reactSlot.Slot : "span";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Comp,
+      {
+        ref,
+        className: cn.cn(
+          "typography-caption-semibold inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 tabular-nums leading-none",
+          variant === "Default" && "bg-error-500 text-body-white-solid-constant",
+          variant === "Brand" && "bg-brand-green-500 text-body-black-solid-constant",
+          variant === "Pink" && "bg-brand-pink-500 text-body-black-solid-constant",
+          variant === "Info" && "bg-info-500 text-body-white-solid-constant",
+          variant === "Success" && "bg-success-500 text-body-white-solid-constant",
+          variant === "Warning" && "bg-warning-500 text-body-black-solid-constant",
+          className
+        ),
+        ...props,
+        children: children ?? getDisplayValue(value, max)
+      }
+    );
+  }
+);
+Count.displayName = "Count";
+exports.Count = Count;
+//# sourceMappingURL=Count.cjs.map

package/dist/cjs/components/Count/Count.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Count.cjs","sources":["../../../../src/components/Count/Count.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport type CountVariant = \"Default\" | \"Brand\" | \"Pink\" | \"Info\" | \"Success\" | \"Warning\";\n\nfunction getDisplayValue(value: number, max: number): string {\n  return value > max ? `${max}+` : value.toString();\n}\n\nexport interface CountProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Visual style variant of the count */\n  variant?: CountVariant;\n  /** The count value to display */\n  value?: number;\n  /** Maximum value to display before showing overflow (e.g., \"99+\") */\n  max?: number;\n  /** Render as a different element using Radix Slot */\n  asChild?: boolean;\n}\n\nexport const Count = React.forwardRef<HTMLSpanElement, CountProps>(\n  (\n    { className, variant = \"Default\", value = 0, max = 99, asChild = false, children, ...props },\n    ref,\n  ) => {\n    if (value === 0 && !children) {\n      return null;\n    }\n\n    const Comp = asChild ? Slot : \"span\";\n\n    return (\n      <Comp\n        ref={ref}\n        className={cn(\n          \"typography-caption-semibold inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 tabular-nums leading-none\",\n          variant === \"Default\" && \"bg-error-500 text-body-white-solid-constant\",\n          variant === \"Brand\" && \"bg-brand-green-500 text-body-black-solid-constant\",\n          variant === \"Pink\" && \"bg-brand-pink-500 text-body-black-solid-constant\",\n          variant === \"Info\" && \"bg-info-500 text-body-white-solid-constant\",\n          variant === \"Success\" && \"bg-success-500 text-body-white-solid-constant\",\n          variant === \"Warning\" && \"bg-warning-500 text-body-black-solid-constant\",\n          className,\n        )}\n        {...props}\n      >\n        {children ?? getDisplayValue(value, max)}\n      </Comp>\n    );\n  },\n);\n\nCount.displayName = \"Count\";\n"],"names":["React","Slot","jsx","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAMA,SAAS,gBAAgB,OAAe,KAAqB;AAC3D,SAAO,QAAQ,MAAM,GAAG,GAAG,MAAM,MAAM,SAAA;AACzC;AAaO,MAAM,QAAQA,iBAAM;AAAA,EACzB,CACE,EAAE,WAAW,UAAU,WAAW,QAAQ,GAAG,MAAM,IAAI,UAAU,OAAO,UAAU,GAAG,MAAA,GACrF,QACG;AACH,QAAI,UAAU,KAAK,CAAC,UAAU;AAC5B,aAAO;AAAA,IACT;AAEA,UAAM,OAAO,UAAUC,UAAAA,OAAO;AAE9B,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA;AAAAA,UACT;AAAA,UACA,YAAY,aAAa;AAAA,UACzB,YAAY,WAAW;AAAA,UACvB,YAAY,UAAU;AAAA,UACtB,YAAY,UAAU;AAAA,UACtB,YAAY,aAAa;AAAA,UACzB,YAAY,aAAa;AAAA,UACzB;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH,UAAA,YAAY,gBAAgB,OAAO,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAG7C;AACF;AAEA,MAAM,cAAc;;"}

package/dist/cjs/components/DatePicker/DatePicker.cjs

@@ -0,0 +1,133 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const reactDayPicker = require("react-day-picker");
+const cn = require("../../utils/cn.cjs");
+const Button = require("../Button/Button.cjs");
+const ChevronLeftIcon = require("../Icons/ChevronLeftIcon.cjs");
+const ChevronRightIcon = require("../Icons/ChevronRightIcon.cjs");
+function Day({ day, modifiers, className, ...divProps }) {
+  const { range_start, range_end } = modifiers;
+  const isSingleDayRange = range_start && range_end;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn.cn(
+        className,
+        (range_start || range_end) && !isSingleDayRange && "from-50% from-transparent to-50%",
+        range_start && !isSingleDayRange && "bg-linear-to-r to-brand-green-50",
+        range_end && !isSingleDayRange && "bg-linear-to-l to-brand-green-50"
+      ),
+      ...divProps
+    }
+  );
+}
+function DayButton({ day, modifiers, className, ...buttonProps }) {
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: cn.cn(
+        "relative z-10 inline-flex size-10 cursor-pointer items-center justify-center rounded-lg",
+        "typography-body-2-regular",
+        "transition-colors hover:bg-brand-green-50",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-purple-500",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        modifiers.today && !modifiers.selected && "border border-brand-green-500",
+        modifiers.selected && !modifiers.range_middle ? "bg-brand-green-500 text-body-black-solid-constant hover:bg-brand-green-500" : "text-body-100",
+        modifiers.range_middle && "rounded-none bg-transparent",
+        modifiers.outside && "pointer-events-none opacity-50"
+      ),
+      ...buttonProps
+    }
+  );
+}
+const DatePicker = React.forwardRef(
+  ({
+    type = "single",
+    onApply,
+    onCancel,
+    cancelLabel = "Cancel",
+    applyLabel = "Apply",
+    showFooter = true,
+    className,
+    formatters,
+    ...dayPickerProps
+  }, ref) => {
+    const numberOfMonths = type === "double" ? 2 : 1;
+    const isMulti = numberOfMonths > 1;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn.cn(
+          "inline-flex flex-col rounded-2xl border border-neutral-200 bg-background-inverse-solid shadow-[0px_6px_12px_0px_rgba(0,0,0,0.1)] backdrop-blur-sm",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactDayPicker.DayPicker,
+            {
+              showOutsideDays: true,
+              numberOfMonths,
+              formatters: {
+                formatCaption: (date) => date.toLocaleDateString("en-US", { month: "short", year: "numeric" }),
+                ...formatters
+              },
+              classNames: {
+                root: "w-full",
+                months: "relative flex",
+                month: "flex flex-1 flex-col",
+                month_caption: cn.cn("flex items-center py-4", isMulti ? "justify-center px-2" : "px-5"),
+                caption_label: "typography-body-1-semibold text-body-100",
+                nav: cn.cn(
+                  "absolute top-4 z-20 flex",
+                  isMulti ? "pointer-events-none inset-x-3 justify-between" : "right-3 gap-1"
+                ),
+                button_previous: "pointer-events-auto inline-flex size-8 cursor-pointer items-center justify-center rounded-full text-body-100 transition-colors hover:bg-brand-green-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-purple-500 disabled:cursor-not-allowed disabled:opacity-50",
+                // !TODO https://linear.app/fanvue/issue/ENG-7301/swap-out-typography-tailwind-utility-classes
+                button_next: "pointer-events-auto inline-flex size-8 cursor-pointer items-center justify-center rounded-full text-body-100 transition-colors hover:bg-brand-green-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-purple-500 disabled:cursor-not-allowed disabled:opacity-50",
+                // !TODO https://linear.app/fanvue/issue/ENG-7301/swap-out-typography-tailwind-utility-classes
+                month_grid: cn.cn("mb-4", isMulti ? "mx-2" : "mx-4"),
+                weekdays: "flex",
+                weekday: "flex h-[30px] w-10 flex-1 items-center justify-center typography-body-2-regular text-body-200",
+                week: "flex overflow-hidden rounded-lg",
+                day: "relative flex w-10 flex-1 items-center justify-center",
+                range_middle: "bg-brand-green-50",
+                hidden: "hidden"
+              },
+              components: {
+                /**
+                 * !NOTE: We're unable to use semantic elements for the grid due to rdp, as such we've disabled the a11y lint rules for these elements in biome.json.
+                 */
+                Chevron: ({ orientation }) => orientation === "left" ? /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon.ChevronLeftIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon.ChevronRightIcon, {}),
+                MonthGrid: (props) => /* @__PURE__ */ jsxRuntime.jsx("div", { role: "grid", ...props }),
+                Weekdays: (props) => /* @__PURE__ */ jsxRuntime.jsx("div", { role: "row", ...props }),
+                Weekday: (props) => /* @__PURE__ */ jsxRuntime.jsx("div", { role: "columnheader", ...props }),
+                Weeks: (props) => /* @__PURE__ */ jsxRuntime.jsx("div", { role: "rowgroup", ...props }),
+                Week: ({ week, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { role: "row", ...props }),
+                Day,
+                DayButton
+              },
+              ...dayPickerProps
+            }
+          ),
+          showFooter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4 px-5 pb-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "secondary", size: "40", className: "flex-1", onClick: onCancel, children: cancelLabel }),
+            /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "primary", size: "40", className: "flex-1", onClick: onApply, children: applyLabel })
+          ] })
+        ]
+      }
+    );
+  }
+);
+DatePicker.displayName = "DatePicker";
+exports.DatePicker = DatePicker;
+//# sourceMappingURL=DatePicker.cjs.map

package/dist/cjs/components/DatePicker/DatePicker.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.cjs","sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef } from \"react\";\nimport {\n  type ChevronProps,\n  type DateRange,\n  type DayButtonProps,\n  DayPicker,\n  type DayPickerProps,\n  type DayProps,\n  type MonthGridProps,\n  type WeekdayProps,\n  type WeekdaysProps,\n  type WeekProps,\n  type WeeksProps,\n} from \"react-day-picker\";\nimport { cn } from \"../../utils/cn\";\nimport type { OmitDistributed } from \"../../utils/types\";\nimport { Button } from \"../Button/Button\";\nimport { ChevronLeftIcon } from \"../Icons/ChevronLeftIcon\";\nimport { ChevronRightIcon } from \"../Icons/ChevronRightIcon\";\n\nexport type { DateRange }; // Needed by consumers when passing props\n\nexport type DatePickerType = \"single\" | \"double\";\n\nexport interface DatePickerOwnProps {\n  /** Display one month or two side-by-side. @default \"single\" */\n  type?: DatePickerType;\n  /** Called when the Apply button is clicked. */\n  onApply?: () => void;\n  /** Called when the Cancel button is clicked. */\n  onCancel?: () => void;\n  /** Label for the cancel button. @default \"Cancel\" */\n  cancelLabel?: string;\n  /** Label for the apply button. @default \"Apply\" */\n  applyLabel?: string;\n  /** Whether to render cancel / apply footer buttons. @default true */\n  showFooter?: boolean;\n  /** Additional className for the outer container. */\n  className?: string;\n}\n\nfunction Day({ day, modifiers, className, ...divProps }: DayProps) {\n  const { range_start, range_end } = modifiers;\n  const isSingleDayRange = range_start && range_end;\n\n  return (\n    <div\n      className={cn(\n        className,\n        (range_start || range_end) && !isSingleDayRange && \"from-50% from-transparent to-50%\",\n        range_start && !isSingleDayRange && \"bg-linear-to-r to-brand-green-50\",\n        range_end && !isSingleDayRange && \"bg-linear-to-l to-brand-green-50\",\n      )}\n      {...divProps}\n    />\n  );\n}\n\nfunction DayButton({ day, modifiers, className, ...buttonProps }: DayButtonProps) {\n  const ref = useRef<HTMLButtonElement>(null);\n\n  useEffect(() => {\n    if (modifiers.focused) ref.current?.focus();\n  }, [modifiers.focused]);\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={cn(\n        \"relative z-10 inline-flex size-10 cursor-pointer items-center justify-center rounded-lg\",\n        \"typography-body-2-regular\",\n        \"transition-colors hover:bg-brand-green-50\",\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-purple-500\",\n        \"disabled:cursor-not-allowed disabled:opacity-50\",\n        modifiers.today && !modifiers.selected && \"border border-brand-green-500\",\n        modifiers.selected && !modifiers.range_middle\n          ? \"bg-brand-green-500 text-body-black-solid-constant hover:bg-brand-green-500\"\n          : \"text-body-100\",\n        modifiers.range_middle && \"rounded-none bg-transparent\",\n        modifiers.outside && \"pointer-events-none opacity-50\",\n      )}\n      {...buttonProps}\n    />\n  );\n}\n\nexport type DatePickerProps = DatePickerOwnProps &\n  OmitDistributed<DayPickerProps, \"numberOfMonths\">;\n\nexport const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(\n  (\n    {\n      type = \"single\",\n      onApply,\n      onCancel,\n      cancelLabel = \"Cancel\",\n      applyLabel = \"Apply\",\n      showFooter = true,\n      className,\n      formatters,\n      ...dayPickerProps\n    },\n    ref,\n  ) => {\n    const numberOfMonths = type === \"double\" ? 2 : 1;\n    const isMulti = numberOfMonths > 1;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"inline-flex flex-col rounded-2xl border border-neutral-200 bg-background-inverse-solid shadow-[0px_6px_12px_0px_rgba(0,0,0,0.1)] backdrop-blur-sm\",\n          className,\n        )}\n      >\n        <DayPicker\n          showOutsideDays\n          numberOfMonths={numberOfMonths}\n          formatters={{\n            formatCaption: (date: Date) =>\n              date.toLocaleDateString(\"en-US\", { month: \"short\", year: \"numeric\" }),\n            ...formatters,\n          }}\n          classNames={{\n            root: \"w-full\",\n            months: \"relative flex\",\n            month: \"flex flex-1 flex-col\",\n            month_caption: cn(\"flex items-center py-4\", isMulti ? \"justify-center px-2\" : \"px-5\"),\n            caption_label: \"typography-body-1-semibold text-body-100\",\n            nav: cn(\n              \"absolute top-4 z-20 flex\",\n              isMulti ? \"pointer-events-none inset-x-3 justify-between\" : \"right-3 gap-1\",\n            ),\n            button_previous:\n              \"pointer-events-auto inline-flex size-8 cursor-pointer items-center justify-center rounded-full text-body-100 transition-colors hover:bg-brand-green-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-purple-500 disabled:cursor-not-allowed disabled:opacity-50\", // !TODO https://linear.app/fanvue/issue/ENG-7301/swap-out-typography-tailwind-utility-classes\n            button_next:\n              \"pointer-events-auto inline-flex size-8 cursor-pointer items-center justify-center rounded-full text-body-100 transition-colors hover:bg-brand-green-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-purple-500 disabled:cursor-not-allowed disabled:opacity-50\", // !TODO https://linear.app/fanvue/issue/ENG-7301/swap-out-typography-tailwind-utility-classes\n            month_grid: cn(\"mb-4\", isMulti ? \"mx-2\" : \"mx-4\"),\n            weekdays: \"flex\",\n            weekday:\n              \"flex h-[30px] w-10 flex-1 items-center justify-center typography-body-2-regular text-body-200\",\n            week: \"flex overflow-hidden rounded-lg\",\n            day: \"relative flex w-10 flex-1 items-center justify-center\",\n            range_middle: \"bg-brand-green-50\",\n            hidden: \"hidden\",\n          }}\n          components={{\n            /**\n             * !NOTE: We're unable to use semantic elements for the grid due to rdp, as such we've disabled the a11y lint rules for these elements in biome.json.\n             */\n            Chevron: ({ orientation }: ChevronProps) =>\n              orientation === \"left\" ? <ChevronLeftIcon /> : <ChevronRightIcon />,\n            MonthGrid: (props: MonthGridProps) => <div role=\"grid\" {...props} />,\n            Weekdays: (props: WeekdaysProps) => <div role=\"row\" {...props} />,\n            Weekday: (props: WeekdayProps) => <div role=\"columnheader\" {...props} />,\n            Weeks: (props: WeeksProps) => <div role=\"rowgroup\" {...props} />,\n            Week: ({ week, ...props }: WeekProps) => <div role=\"row\" {...props} />,\n            Day,\n            DayButton,\n          }}\n          {...dayPickerProps}\n        />\n\n        {showFooter && (\n          <div className=\"flex gap-4 px-5 pb-4\">\n            <Button variant=\"secondary\" size=\"40\" className=\"flex-1\" onClick={onCancel}>\n              {cancelLabel}\n            </Button>\n            <Button variant=\"primary\" size=\"40\" className=\"flex-1\" onClick={onApply}>\n              {applyLabel}\n            </Button>\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nDatePicker.displayName = \"DatePicker\";\n"],"names":["jsx","cn","useRef","useEffect","forwardRef","jsxs","DayPicker","ChevronLeftIcon","ChevronRightIcon","Button"],"mappings":"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"}

package/dist/cjs/components/Divider/Divider.cjs

@@ -0,0 +1,69 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const SeparatorPrimitive = require("@radix-ui/react-separator");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const SeparatorPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(SeparatorPrimitive);
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const Divider = React__namespace.forwardRef(({ label, className, ...props }, ref) => {
+  if (label !== void 0) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn.cn(`my-2 flex w-full items-center justify-center gap-2`, className),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SeparatorPrimitive__namespace.Root,
+            {
+              decorative: true,
+              orientation: "horizontal",
+              className: "h-px flex-1 bg-neutral-200",
+              ...props
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-body-2-regular shrink-0 text-body-100", children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SeparatorPrimitive__namespace.Root,
+            {
+              decorative: true,
+              orientation: "horizontal",
+              className: "h-px flex-1 bg-neutral-200"
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SeparatorPrimitive__namespace.Root,
+    {
+      ref,
+      decorative: true,
+      orientation: "horizontal",
+      className: cn.cn(`mx-auto my-2 h-px w-full bg-neutral-200`, className),
+      ...props
+    }
+  );
+});
+Divider.displayName = "Divider";
+exports.Divider = Divider;
+//# sourceMappingURL=Divider.cjs.map

package/dist/cjs/components/Divider/Divider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.cjs","sources":["../../../../src/components/Divider/Divider.tsx"],"sourcesContent":["import * as SeparatorPrimitive from \"@radix-ui/react-separator\";\nimport * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\n\nexport type DividerOrientation = \"horizontal\" | \"vertical\";\nexport type DividerType = \"default\" | \"text\";\n\nexport interface DividerProps\n  extends React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> {\n  /** Custom label to display*/\n  label?: string;\n}\n\nexport const Divider = React.forwardRef<\n  React.ElementRef<typeof SeparatorPrimitive.Root>,\n  DividerProps\n>(({ label, className, ...props }, ref) => {\n  if (label !== undefined) {\n    return (\n      <div\n        ref={ref}\n        className={cn(`my-2 flex w-full items-center justify-center gap-2`, className)}\n      >\n        <SeparatorPrimitive.Root\n          decorative\n          orientation=\"horizontal\"\n          className=\"h-px flex-1 bg-neutral-200\"\n          {...props}\n        />\n        <span className=\"typography-body-2-regular shrink-0 text-body-100\">{label}</span>\n        <SeparatorPrimitive.Root\n          decorative\n          orientation=\"horizontal\"\n          className=\"h-px flex-1 bg-neutral-200\"\n        />\n      </div>\n    );\n  }\n\n  return (\n    <SeparatorPrimitive.Root\n      ref={ref}\n      decorative\n      orientation=\"horizontal\"\n      className={cn(`mx-auto my-2 h-px w-full bg-neutral-200`, className)}\n      {...props}\n    />\n  );\n});\n\nDivider.displayName = \"Divider\";\n"],"names":["React","jsxs","cn","jsx","SeparatorPrimitive"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAaO,MAAM,UAAUA,iBAAM,WAG3B,CAAC,EAAE,OAAO,WAAW,GAAG,MAAA,GAAS,QAAQ;AACzC,MAAI,UAAU,QAAW;AACvB,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA,GAAG,sDAAsD,SAAS;AAAA,QAE7E,UAAA;AAAA,UAAAC,2BAAAA;AAAAA,YAACC,8BAAmB;AAAA,YAAnB;AAAA,cACC,YAAU;AAAA,cACV,aAAY;AAAA,cACZ,WAAU;AAAA,cACT,GAAG;AAAA,YAAA;AAAA,UAAA;AAAA,UAEND,2BAAAA,IAAC,QAAA,EAAK,WAAU,oDAAoD,UAAA,OAAM;AAAA,UAC1EA,2BAAAA;AAAAA,YAACC,8BAAmB;AAAA,YAAnB;AAAA,cACC,YAAU;AAAA,cACV,aAAY;AAAA,cACZ,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACZ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AAEA,SACED,2BAAAA;AAAAA,IAACC,8BAAmB;AAAA,IAAnB;AAAA,MACC;AAAA,MACA,YAAU;AAAA,MACV,aAAY;AAAA,MACZ,WAAWF,GAAAA,GAAG,2CAA2C,SAAS;AAAA,MACjE,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AAED,QAAQ,cAAc;;"}