@fanvue/ui 0.1.0-alpha.3 → 1.0.0

package/dist/components/Checkbox/Checkbox.mjs

@@ -0,0 +1,139 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+import { CheckIcon } from "../Icons/CheckIcon.mjs";
+import { MinusIcon } from "../Icons/MinusIcon.mjs";
+const Checkbox = React.forwardRef(
+  ({ className, size = "default", label, helperText, disabled, name, ...props }, ref) => {
+    const id = React.useId();
+    const helperTextId = helperText ? `${id}-helper` : void 0;
+    const hasLabel = Boolean(label || helperText);
+    const inputRef = React.useRef(null);
+    React.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__ */ jsxs(
+      "span",
+      {
+        className: cn(
+          "relative inline-flex size-5 shrink-0",
+          // Alignment when used with label
+          label && (helperText ? "mt-1" : "mt-0.5")
+        ),
+        children: [
+          /* @__PURE__ */ 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__ */ jsx(
+            CheckboxPrimitive.Root,
+            {
+              id,
+              disabled,
+              "aria-describedby": helperTextId,
+              "data-testid": "checkbox",
+              ...props,
+              onCheckedChange: handleCheckedChange,
+              className: 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__ */ jsx(
+                CheckboxPrimitive.Indicator,
+                {
+                  forceMount: true,
+                  className: cn(
+                    "flex size-3 items-center justify-center text-body-300",
+                    "data-[state=unchecked]:invisible"
+                  ),
+                  children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx(MinusIcon, {}) : /* @__PURE__ */ jsx(CheckIcon, {})
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+    if (!hasLabel) {
+      return checkboxElement;
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "inline-flex flex-col gap-0.5",
+          disabled && "is-disabled cursor-not-allowed",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "group inline-flex items-start gap-2", children: [
+            checkboxElement,
+            label && /* @__PURE__ */ jsx(
+              "label",
+              {
+                htmlFor: id,
+                className: 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__ */ jsx(
+            "span",
+            {
+              id: helperTextId,
+              className: 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";
+export {
+  Checkbox
+};
+//# sourceMappingURL=Checkbox.mjs.map

package/dist/components/Checkbox/Checkbox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.mjs","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":[],"mappings":";;;;;;;AAkBO,MAAM,WAAW,MAAM;AAAA,EAC5B,CAAC,EAAE,WAAW,OAAO,WAAW,OAAO,YAAY,UAAU,MAAM,GAAG,MAAA,GAAS,QAAQ;AACrF,UAAM,KAAK,MAAM,MAAA;AACjB,UAAM,eAAe,aAAa,GAAG,EAAE,YAAY;AACnD,UAAM,WAAW,QAAQ,SAAS,UAAU;AAG5C,UAAM,WAAW,MAAM,OAAyB,IAAI;AACpD,UAAM,oBAAoB,KAAK,MAAM,SAAS,OAA2B;AAEzE,UAAM,sBAAsB,CAAC,UAAqC;AAChE,YAAM,UAAU,UAAU;AAC1B,UAAI,SAAS,SAAS;AACpB,iBAAS,QAAQ,UAAU;AAC3B,iBAAS,QAAQ,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,KAAA,CAAM,CAAC;AAAA,MACvE;AACA,YAAM,kBAAkB,KAAK;AAAA,IAC/B;AAEA,UAAM,kBACJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA;AAAA,UAEA,UAAU,aAAa,SAAS;AAAA,QAAA;AAAA,QAGlC,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAK;AAAA,cACL,MAAK;AAAA,cACL;AAAA,cACA;AAAA,cACA,eAAW;AAAA,cACX,UAAU;AAAA,cACV,UAAU,MAAM;AAAA,cAAC;AAAA,cACjB,WAAU;AAAA,cACV,OAAO,EAAE,MAAM,gBAAA;AAAA,YAAgB;AAAA,UAAA;AAAA,UAEjC;AAAA,YAAC,kBAAkB;AAAA,YAAlB;AAAA,cACC;AAAA,cACA;AAAA,cACA,oBAAkB;AAAA,cAClB,eAAY;AAAA,cACX,GAAG;AAAA,cACJ,iBAAiB;AAAA,cACjB,WAAW;AAAA;AAAA,gBAET;AAAA,gBACA;AAAA;AAAA,gBAEA;AAAA;AAAA,gBAEA;AAAA;AAAA,gBAEA;AAAA;AAAA,gBAEA;AAAA;AAAA,gBAEA;AAAA;AAAA,gBAEA;AAAA,gBACA;AAAA,gBACA,CAAC,YAAY;AAAA,cAAA;AAAA,cAGf,UAAA;AAAA,gBAAC,kBAAkB;AAAA,gBAAlB;AAAA,kBACC,YAAU;AAAA,kBACV,WAAW;AAAA,oBACT;AAAA,oBACA;AAAA,kBAAA;AAAA,kBAGD,gBAAM,YAAY,sCAAmB,WAAA,EAAU,wBAAM,WAAA,CAAA,CAAU;AAAA,gBAAA;AAAA,cAAA;AAAA,YAClE;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAIJ,QAAI,CAAC,UAAU;AACb,aAAO;AAAA,IACT;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,YAAY;AAAA,UACZ;AAAA,QAAA;AAAA,QAGF,UAAA;AAAA,UAAA,qBAAC,OAAA,EAAI,WAAU,uCACZ,UAAA;AAAA,YAAA;AAAA,YACA,SACC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAAS;AAAA,gBACT,WAAW;AAAA,kBACT;AAAA,kBACA;AAAA,kBACA,SAAS,UAAU,+BAA+B;AAAA,gBAAA;AAAA,gBAGnD,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UACH,GAEJ;AAAA,UACC,cACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cACJ,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA,SAAS,UAAU,+BAA+B;AAAA,cAAA;AAAA,cAGnD,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,SAAS,cAAc;"}

package/dist/components/Chip/Chip.mjs

@@ -0,0 +1,75 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Slot, Slottable } from "@radix-ui/react-slot";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const Chip = React.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 ? Slot : isInteractive ? "button" : "span";
+    const isDark = variant === "dark";
+    return /* @__PURE__ */ jsxs(
+      Comp,
+      {
+        ref,
+        "data-testid": "chip",
+        className: 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__ */ jsx("span", { className: "size-2 shrink-0 rounded-full bg-current", "aria-hidden": "true" }),
+          leftIcon && /* @__PURE__ */ jsx("span", { className: "flex size-5 shrink-0 items-center justify-center", "aria-hidden": "true", children: leftIcon }),
+          /* @__PURE__ */ jsx(Slottable, { children }),
+          rightIcon && /* @__PURE__ */ jsx("span", { className: "flex size-5 shrink-0 items-center justify-center", "aria-hidden": "true", children: rightIcon }),
+          notificationLabel && /* @__PURE__ */ 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";
+export {
+  Chip
+};
+//# sourceMappingURL=Chip.mjs.map

package/dist/components/Chip/Chip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.mjs","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":[],"mappings":";;;;;AA8BO,MAAM,OAAO,MAAM;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,UAAU,OAAO,gBAAgB,WAAW;AACzD,UAAM,SAAS,YAAY;AAE3B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAW;AAAA,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,WAAW,oBAAC,QAAA,EAAK,WAAU,2CAA0C,eAAY,QAAO;AAAA,UACxF,YACC,oBAAC,QAAA,EAAK,WAAU,oDAAmD,eAAY,QAC5E,UAAA,UACH;AAAA,UAEF,oBAAC,aAAW,UAAS;AAAA,UACpB,aACC,oBAAC,QAAA,EAAK,WAAU,oDAAmD,eAAY,QAC5E,UAAA,WACH;AAAA,UAED,qBACC,oBAAC,QAAA,EAAK,WAAU,iJACb,UAAA,kBAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,KAAK,cAAc;"}

package/dist/components/Count/Count.mjs

@@ -0,0 +1,39 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+function getDisplayValue(value, max) {
+  return value > max ? `${max}+` : value.toString();
+}
+const Count = React.forwardRef(
+  ({ className, variant = "Default", value = 0, max = 99, asChild = false, children, ...props }, ref) => {
+    if (value === 0 && !children) {
+      return null;
+    }
+    const Comp = asChild ? Slot : "span";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        className: 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";
+export {
+  Count
+};
+//# sourceMappingURL=Count.mjs.map

package/dist/components/Count/Count.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Count.mjs","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":[],"mappings":";;;;;AAMA,SAAS,gBAAgB,OAAe,KAAqB;AAC3D,SAAO,QAAQ,MAAM,GAAG,GAAG,MAAM,MAAM,SAAA;AACzC;AAaO,MAAM,QAAQ,MAAM;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,UAAU,OAAO;AAE9B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,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/components/DatePicker/DatePicker.mjs

@@ -0,0 +1,133 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useEffect } from "react";
+import { DayPicker } from "react-day-picker";
+import { cn } from "../../utils/cn.mjs";
+import { Button } from "../Button/Button.mjs";
+import { ChevronLeftIcon } from "../Icons/ChevronLeftIcon.mjs";
+import { ChevronRightIcon } from "../Icons/ChevronRightIcon.mjs";
+function Day({ day, modifiers, className, ...divProps }) {
+  const { range_start, range_end } = modifiers;
+  const isSingleDayRange = range_start && range_end;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: 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 = useRef(null);
+  useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: 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 = 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__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: 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__ */ jsx(
+            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("flex items-center py-4", isMulti ? "justify-center px-2" : "px-5"),
+                caption_label: "typography-body-1-semibold text-body-100",
+                nav: 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("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__ */ jsx(ChevronLeftIcon, {}) : /* @__PURE__ */ jsx(ChevronRightIcon, {}),
+                MonthGrid: (props) => /* @__PURE__ */ jsx("div", { role: "grid", ...props }),
+                Weekdays: (props) => /* @__PURE__ */ jsx("div", { role: "row", ...props }),
+                Weekday: (props) => /* @__PURE__ */ jsx("div", { role: "columnheader", ...props }),
+                Weeks: (props) => /* @__PURE__ */ jsx("div", { role: "rowgroup", ...props }),
+                Week: ({ week, ...props }) => /* @__PURE__ */ jsx("div", { role: "row", ...props }),
+                Day,
+                DayButton
+              },
+              ...dayPickerProps
+            }
+          ),
+          showFooter && /* @__PURE__ */ jsxs("div", { className: "flex gap-4 px-5 pb-4", children: [
+            /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "40", className: "flex-1", onClick: onCancel, children: cancelLabel }),
+            /* @__PURE__ */ jsx(Button, { variant: "primary", size: "40", className: "flex-1", onClick: onApply, children: applyLabel })
+          ] })
+        ]
+      }
+    );
+  }
+);
+DatePicker.displayName = "DatePicker";
+export {
+  DatePicker
+};
+//# sourceMappingURL=DatePicker.mjs.map

package/dist/components/DatePicker/DatePicker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.mjs","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":[],"mappings":"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"}

package/dist/components/Divider/Divider.mjs

@@ -0,0 +1,51 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const Divider = React.forwardRef(({ label, className, ...props }, ref) => {
+  if (label !== void 0) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(`my-2 flex w-full items-center justify-center gap-2`, className),
+        children: [
+          /* @__PURE__ */ jsx(
+            SeparatorPrimitive.Root,
+            {
+              decorative: true,
+              orientation: "horizontal",
+              className: "h-px flex-1 bg-neutral-200",
+              ...props
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "typography-body-2-regular shrink-0 text-body-100", children: label }),
+          /* @__PURE__ */ jsx(
+            SeparatorPrimitive.Root,
+            {
+              decorative: true,
+              orientation: "horizontal",
+              className: "h-px flex-1 bg-neutral-200"
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    SeparatorPrimitive.Root,
+    {
+      ref,
+      decorative: true,
+      orientation: "horizontal",
+      className: cn(`mx-auto my-2 h-px w-full bg-neutral-200`, className),
+      ...props
+    }
+  );
+});
+Divider.displayName = "Divider";
+export {
+  Divider
+};
+//# sourceMappingURL=Divider.mjs.map

package/dist/components/Divider/Divider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.mjs","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":[],"mappings":";;;;;AAaO,MAAM,UAAU,MAAM,WAG3B,CAAC,EAAE,OAAO,WAAW,GAAG,MAAA,GAAS,QAAQ;AACzC,MAAI,UAAU,QAAW;AACvB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,sDAAsD,SAAS;AAAA,QAE7E,UAAA;AAAA,UAAA;AAAA,YAAC,mBAAmB;AAAA,YAAnB;AAAA,cACC,YAAU;AAAA,cACV,aAAY;AAAA,cACZ,WAAU;AAAA,cACT,GAAG;AAAA,YAAA;AAAA,UAAA;AAAA,UAEN,oBAAC,QAAA,EAAK,WAAU,oDAAoD,UAAA,OAAM;AAAA,UAC1E;AAAA,YAAC,mBAAmB;AAAA,YAAnB;AAAA,cACC,YAAU;AAAA,cACV,aAAY;AAAA,cACZ,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACZ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AAEA,SACE;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC;AAAA,MACA,YAAU;AAAA,MACV,aAAY;AAAA,MACZ,WAAW,GAAG,2CAA2C,SAAS;AAAA,MACjE,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AAED,QAAQ,cAAc;"}

package/dist/components/IconButton/IconButton.mjs

@@ -0,0 +1,75 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+import { Count } from "../Count/Count.mjs";
+const iconButtonVariants = {
+  primary: "bg-neutral-400 text-body-300 hover:bg-hover-100 disabled:opacity-50 focus:shadow-focus-ring",
+  secondary: `bg-neutral-100 text-neutral-400 hover:bg-neutral-200 disabled:opacity-50 focus:focus:shadow-focus-ring`,
+  tertiary: `bg-transparent text-neutral-400 hover:bg-hover-300 disabled:opacity-50 focus:shadow-focus-ring active:bg-brand-green-50`,
+  brand: `bg-body-black-solid-constant text-brand-green-500 hover:bg-brand-green-500 hover:text-body-black-solid-constant disabled:opacity-50 focus:shadow-focus-ring`,
+  contrast: `bg-transparent text-body-white-solid-constant disabled:opacity-50 focus:shadow-focus-ring`,
+  messaging: `bg-body-black-solid-constant text-brand-green-500 hover:bg-brand-green-500 hover:text-body-black-solid-constant disabled:opacity-50 focus:shadow-focus-ring`,
+  navTray: `bg-transparent text-neutral-400 disabled:opacity-50 focus:shadow-focus-ring active:bg-brand-green-50`,
+  tertiaryDestructive: `bg-transparent text-error-500 hover:bg-hover-300 disabled:opacity-50 focus:shadow-focus-ring`,
+  stop: `bg-neutral-400 text-body-300 hover:bg-brand-green-500 hover:text-body-black-solid-constant`,
+  microphone: `bg-neutral-400 text-body-300 hover:bg-brand-green-500 hover:text-body-black-solid-constant`
+};
+const iconSizeVariants = {
+  24: "size-4",
+  32: "size-5",
+  40: "size-6",
+  52: "size-7",
+  72: "size-8"
+};
+const sizeVariants = {
+  24: "p-1",
+  32: "p-1.5",
+  40: "p-[10px]",
+  52: "p-2",
+  72: "p-4"
+};
+const IconButton = React.forwardRef(
+  ({ className, variant = "primary", size = "40", icon, counterValue, disabled = false, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        "data-testid": "icon-button",
+        disabled,
+        className: cn(
+          // Base styles
+          "relative inline-flex shrink-0 items-center justify-center focus-visible:outline-none",
+          "cursor-pointer rounded-full transition-all duration-150 ease-in-out disabled:cursor-default",
+          // Size variants
+          sizeVariants[size],
+          // Variant styles
+          iconButtonVariants[variant],
+          // Manual CSS overrides
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "flex shrink-0 items-center justify-center overflow-clip",
+                iconSizeVariants[size]
+              ),
+              "aria-hidden": "true",
+              children: icon
+            }
+          ),
+          counterValue !== void 0 && (variant === "tertiary" || variant === "navTray") && /* @__PURE__ */ jsx("div", { className: "absolute top-0 right-0", children: /* @__PURE__ */ jsx(Count, { value: counterValue }) })
+        ]
+      }
+    );
+  }
+);
+IconButton.displayName = "IconButton";
+export {
+  IconButton
+};
+//# sourceMappingURL=IconButton.mjs.map

package/dist/components/IconButton/IconButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.mjs","sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Count } from \"../Count/Count\";\n\nconst iconButtonVariants = {\n  primary:\n    \"bg-neutral-400 text-body-300 hover:bg-hover-100 disabled:opacity-50 focus:shadow-focus-ring\",\n  secondary: `bg-neutral-100 text-neutral-400 hover:bg-neutral-200 disabled:opacity-50 focus:focus:shadow-focus-ring`,\n  tertiary: `bg-transparent text-neutral-400 hover:bg-hover-300 disabled:opacity-50 focus:shadow-focus-ring active:bg-brand-green-50`,\n  brand: `bg-body-black-solid-constant text-brand-green-500 hover:bg-brand-green-500 hover:text-body-black-solid-constant disabled:opacity-50 focus:shadow-focus-ring`,\n  contrast: `bg-transparent text-body-white-solid-constant disabled:opacity-50 focus:shadow-focus-ring`,\n  messaging: `bg-body-black-solid-constant text-brand-green-500 hover:bg-brand-green-500 hover:text-body-black-solid-constant disabled:opacity-50 focus:shadow-focus-ring`,\n  navTray: `bg-transparent text-neutral-400 disabled:opacity-50 focus:shadow-focus-ring active:bg-brand-green-50`,\n  tertiaryDestructive: `bg-transparent text-error-500 hover:bg-hover-300 disabled:opacity-50 focus:shadow-focus-ring`,\n  stop: `bg-neutral-400 text-body-300 hover:bg-brand-green-500 hover:text-body-black-solid-constant`,\n  microphone: `bg-neutral-400 text-body-300 hover:bg-brand-green-500 hover:text-body-black-solid-constant`,\n};\n\nconst iconSizeVariants = {\n  24: \"size-4\",\n  32: \"size-5\",\n  40: \"size-6\",\n  52: \"size-7\",\n  72: \"size-8\",\n} as const;\n\nconst sizeVariants = {\n  24: \"p-1\",\n  32: \"p-1.5\",\n  40: \"p-[10px]\",\n  52: \"p-2\",\n  72: \"p-4\",\n} as const;\n\nexport type IconButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"brand\"\n  | \"contrast\"\n  | \"messaging\"\n  | \"navTray\"\n  | \"tertiaryDestructive\"\n  | \"stop\"\n  | \"microphone\";\n\nexport type IconButtonSize = \"24\" | \"32\" | \"40\" | \"52\" | \"72\";\n\nexport interface IconButtonProps\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"style\"> {\n  /** Visual style variant of the icon button */\n  variant?: IconButtonVariant;\n  /** Size of the button */\n  size?: IconButtonSize;\n  /** Icon element to display */\n  icon: React.ReactNode;\n  /** Counter value to display */\n  counterValue?: number;\n}\n\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    { className, variant = \"primary\", size = \"40\", icon, counterValue, disabled = false, ...props },\n    ref,\n  ) => {\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        data-testid=\"icon-button\"\n        disabled={disabled}\n        className={cn(\n          // Base styles\n          \"relative inline-flex shrink-0 items-center justify-center focus-visible:outline-none\",\n          \"cursor-pointer rounded-full transition-all duration-150 ease-in-out disabled:cursor-default\",\n          // Size variants\n          sizeVariants[size],\n          // Variant styles\n          iconButtonVariants[variant],\n          // Manual CSS overrides\n          className,\n        )}\n        {...props}\n      >\n        <span\n          className={cn(\n            \"flex shrink-0 items-center justify-center overflow-clip\",\n            iconSizeVariants[size],\n          )}\n          aria-hidden=\"true\"\n        >\n          {icon}\n        </span>\n\n        {counterValue !== undefined && (variant === \"tertiary\" || variant === \"navTray\") && (\n          <div className=\"absolute top-0 right-0\">\n            <Count value={counterValue} />\n          </div>\n        )}\n      </button>\n    );\n  },\n);\n\nIconButton.displayName = \"IconButton\";\n"],"names":[],"mappings":";;;;;AAIA,MAAM,qBAAqB;AAAA,EACzB,SACE;AAAA,EACF,WAAW;AAAA,EACX,UAAU;AAAA,EACV,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,SAAS;AAAA,EACT,qBAAqB;AAAA,EACrB,MAAM;AAAA,EACN,YAAY;AACd;AAEA,MAAM,mBAAmB;AAAA,EACvB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,eAAe;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AA4BO,MAAM,aAAa,MAAM;AAAA,EAC9B,CACE,EAAE,WAAW,UAAU,WAAW,OAAO,MAAM,MAAM,cAAc,WAAW,OAAO,GAAG,MAAA,GACxF,QACG;AACH,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,eAAY;AAAA,QACZ;AAAA,QACA,WAAW;AAAA;AAAA,UAET;AAAA,UACA;AAAA;AAAA,UAEA,aAAa,IAAI;AAAA;AAAA,UAEjB,mBAAmB,OAAO;AAAA;AAAA,UAE1B;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,iBAAiB,IAAI;AAAA,cAAA;AAAA,cAEvB,eAAY;AAAA,cAEX,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAGF,iBAAiB,WAAc,YAAY,cAAc,YAAY,cACpE,oBAAC,OAAA,EAAI,WAAU,0BACb,UAAA,oBAAC,OAAA,EAAM,OAAO,cAAc,EAAA,CAC9B;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,WAAW,cAAc;"}

package/dist/components/Icons/ArrowRightIcon.mjs

@@ -0,0 +1,30 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const ArrowRightIcon = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "svg",
+    {
+      ref,
+      viewBox: "0 0 20 20",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      className: cn("size-5", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z",
+          clipRule: "evenodd"
+        }
+      )
+    }
+  )
+);
+ArrowRightIcon.displayName = "ArrowRightIcon";
+export {
+  ArrowRightIcon
+};
+//# sourceMappingURL=ArrowRightIcon.mjs.map

package/dist/components/Icons/ArrowRightIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrowRightIcon.mjs","sources":["../../../src/components/Icons/ArrowRightIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport type { IconProps } from \"./types\";\n\nexport const ArrowRightIcon = React.forwardRef<SVGSVGElement, IconProps>(\n  ({ className, ...props }, ref) => (\n    <svg\n      ref={ref}\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n      className={cn(\"size-5\", className)}\n      {...props}\n    >\n      <path\n        fillRule=\"evenodd\"\n        d=\"M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  ),\n);\n\nArrowRightIcon.displayName = \"ArrowRightIcon\";\n"],"names":[],"mappings":";;;;AAIO,MAAM,iBAAiB,MAAM;AAAA,EAClC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QACxB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW,GAAG,UAAU,SAAS;AAAA,MAChC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,UAAS;AAAA,UACT,GAAE;AAAA,UACF,UAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IACX;AAAA,EAAA;AAGN;AAEA,eAAe,cAAc;"}