@david-richard/notify-ds 1.0.0

package/dist/index.mjs

@@ -0,0 +1,959 @@
+import * as React4 from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// components/button.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var buttonVariants = cva(
+  [
+    // base
+    "inline-flex items-center justify-center whitespace-nowrap select-none",
+    "rounded-[var(--button-radius)] font-medium font-[var(--font-family-secondary)]",
+    // Red Hat Text Medium per spec
+    "transition-colors duration-[var(--p-duration-fast)] ease-[var(--p-easing-standard)]",
+    "outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] focus-visible:ring-offset-2",
+    "disabled:pointer-events-none disabled:opacity-[var(--p-opacity-disabled)]",
+    // icon child sizing
+    "[&_svg]:shrink-0"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: [
+          "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
+          "hover:bg-[var(--color-primary-hover)] active:bg-[var(--color-primary-pressed)]",
+          "data-[state=inactive]:bg-[var(--color-inactive)] data-[state=inactive]:text-[var(--color-inactive-foreground)]"
+        ],
+        secondary: [
+          "bg-transparent text-[var(--color-secondary-foreground)]",
+          "border border-[var(--color-secondary-border)]",
+          "hover:bg-[var(--color-secondary-hover)] active:bg-[var(--color-secondary-pressed)]",
+          "data-[state=inactive]:text-[var(--color-inactive-foreground)] data-[state=inactive]:border-[var(--color-inactive-border)]"
+        ],
+        tertiary: [
+          "bg-transparent text-[var(--color-tertiary-foreground)]",
+          "hover:bg-[var(--color-tertiary-hover)]",
+          "data-[state=inactive]:text-[var(--color-inactive-foreground)]"
+        ],
+        link: [
+          "bg-transparent text-[var(--color-link-foreground)] underline underline-offset-4",
+          "hover:decoration-2",
+          "data-[state=inactive]:text-[var(--color-inactive-foreground)]"
+        ]
+      },
+      size: {
+        xsm: "h-[var(--button-xsm-h)] px-[var(--button-xsm-px)] gap-[var(--button-xsm-gap)] text-[length:var(--button-xsm-fs)] leading-[var(--button-xsm-lh)] [&_svg]:size-3",
+        sm: "h-[var(--button-sm-h)]  px-[var(--button-sm-px)]  gap-[var(--button-sm-gap)]  text-[length:var(--button-sm-fs)]  leading-[var(--button-sm-lh)]  [&_svg]:size-[14px]",
+        md: "h-[var(--button-md-h)]  px-[var(--button-md-px)]  gap-[var(--button-md-gap)]  text-[length:var(--button-md-fs)]  leading-[var(--button-md-lh)]  [&_svg]:size-4",
+        lg: "h-[var(--button-lg-h)]  px-[var(--button-lg-px)]  gap-[var(--button-lg-gap)]  text-[length:var(--button-lg-fs)]  leading-[var(--button-lg-lh)]  [&_svg]:size-5"
+      },
+      iconOnly: {
+        true: "px-0 aspect-square rounded-[var(--button-icon-radius)]",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      // Link variant has no horizontal padding — it's text-like.
+      { variant: "link", iconOnly: false, class: "px-0 h-auto" },
+      // Tertiary should hug its text vertically.
+      { variant: "tertiary", iconOnly: false, class: "" }
+    ],
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+      iconOnly: false
+    }
+  }
+);
+var Button = React4.forwardRef(
+  ({ className, variant, size, iconOnly, state = "active", asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        "data-state": state,
+        className: cn(buttonVariants({ variant, size, iconOnly }), className),
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var IconButton = React4.forwardRef(
+  (props, ref) => /* @__PURE__ */ jsx(Button, { ref, iconOnly: true, ...props })
+);
+IconButton.displayName = "IconButton";
+var pillVariants = cva(
+  [
+    "flex items-center gap-2",
+    "h-12 w-full rounded-full px-4",
+    "border-[1.5px] bg-[var(--color-input-bg,#fff)]",
+    "transition-colors duration-[120ms]"
+  ],
+  {
+    variants: {
+      state: {
+        normal: "border-[var(--color-input-border-default,#C9C9C9)]",
+        active: "border-[var(--color-input-border-active,#40CCF2)] ring-0",
+        filled: "border-[var(--color-input-border-default,#C9C9C9)]",
+        error: "border-[var(--color-input-border-error,#EF2149)]",
+        disabled: "border-[var(--color-input-border-default,#C9C9C9)] bg-[var(--color-input-bg-disabled,#F4F4F4)] cursor-not-allowed opacity-50",
+        readonly: "border-[var(--color-input-border-default,#C9C9C9)] bg-[var(--color-input-bg-disabled,#F4F4F4)]"
+      }
+    },
+    defaultVariants: { state: "normal" }
+  }
+);
+var InputField = React4.forwardRef(
+  ({
+    type = "default",
+    state: stateProp,
+    label,
+    required,
+    helperText,
+    errorMessage,
+    rightSlot,
+    className,
+    onFocus,
+    onBlur,
+    onChange,
+    value,
+    defaultValue,
+    disabled,
+    readOnly,
+    placeholder,
+    ...props
+  }, ref) => {
+    const [focused, setFocused] = React4.useState(false);
+    const [hasValue, setHasValue] = React4.useState(!!defaultValue || !!value);
+    const [showPassword, setShowPassword] = React4.useState(false);
+    const state = stateProp ?? (disabled ? "disabled" : readOnly ? "readonly" : errorMessage ? "error" : focused ? "active" : hasValue ? "filled" : "normal");
+    const nativeType = type === "password" ? showPassword ? "text" : "password" : type === "search" ? "search" : "text";
+    const handleFocus = (e) => {
+      setFocused(true);
+      onFocus?.(e);
+    };
+    const handleBlur = (e) => {
+      setFocused(false);
+      onBlur?.(e);
+    };
+    const handleChange = (e) => {
+      setHasValue(e.target.value.length > 0);
+      onChange?.(e);
+    };
+    const iconColor = state === "active" ? "text-[var(--color-input-icon-active,#40CCF2)]" : state === "error" ? "text-[var(--color-input-icon-error,#EF2149)]" : "text-[var(--color-input-icon-default,#B1B1B1)]";
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full flex-col gap-1.5", className), children: [
+      label && /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-0.5 font-['Red_Hat_Text'] text-[18px] font-medium leading-tight text-[var(--color-text-primary,#000)]", children: [
+        label,
+        required && /* @__PURE__ */ jsx("span", { className: "text-[var(--color-brand-red,#EF2149)]", "aria-hidden": "true", children: " *" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: pillVariants({ state }), children: [
+        type === "search" && /* @__PURE__ */ jsx("span", { className: cn("shrink-0", iconColor), "aria-hidden": "true", children: /* @__PURE__ */ jsx(SearchIcon, {}) }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            type: nativeType,
+            disabled: disabled || state === "disabled",
+            readOnly: readOnly || state === "readonly",
+            placeholder,
+            value,
+            defaultValue,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            onChange: handleChange,
+            className: cn(
+              "min-w-0 flex-1 bg-transparent outline-none",
+              "font-['Inter'] text-[16px] font-normal",
+              "text-[var(--color-input-text,#000)] placeholder:text-[var(--color-input-placeholder,#B1B1B1)]",
+              "disabled:cursor-not-allowed"
+            ),
+            "aria-invalid": state === "error" || void 0,
+            ...props
+          }
+        ),
+        rightSlot,
+        !rightSlot && type === "password" && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            tabIndex: -1,
+            onClick: () => setShowPassword((v) => !v),
+            className: cn("shrink-0 cursor-pointer", iconColor),
+            "aria-label": showPassword ? "Hide password" : "Show password",
+            children: showPassword ? /* @__PURE__ */ jsx(EyeOffIcon, {}) : /* @__PURE__ */ jsx(EyeIcon, {})
+          }
+        ),
+        !rightSlot && type === "search" && hasValue && !disabled && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            tabIndex: -1,
+            onClick: () => setHasValue(false),
+            className: cn("shrink-0 cursor-pointer", iconColor),
+            "aria-label": "Clear search",
+            children: /* @__PURE__ */ jsx(XCircleIcon, {})
+          }
+        ),
+        !rightSlot && state === "error" && type !== "password" && /* @__PURE__ */ jsx("span", { className: cn("shrink-0", iconColor), "aria-hidden": "true", children: /* @__PURE__ */ jsx(InfoCircleIcon, {}) })
+      ] }),
+      (errorMessage || helperText) && /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: cn(
+            "font-['Inter'] text-[12px] font-normal leading-tight px-1",
+            errorMessage ? "text-[var(--color-input-text-error,#EF2149)]" : "text-[var(--color-text-tertiary,#6B7280)]"
+          ),
+          children: errorMessage ?? helperText
+        }
+      )
+    ] });
+  }
+);
+InputField.displayName = "InputField";
+function SearchIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "7", cy: "7", r: "4.5" }),
+    /* @__PURE__ */ jsx("line", { x1: "10.5", y1: "10.5", x2: "14", y2: "14" })
+  ] });
+}
+function EyeIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("path", { d: "M1 8s2.5-5 7-5 7 5 7 5-2.5 5-7 5-7-5-7-5Z" }),
+    /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "2" })
+  ] });
+}
+function EyeOffIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("path", { d: "M2 2l12 12M6.5 6.5A2 2 0 0 0 9.5 9.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M4.2 4.2C2.6 5.2 1 8 1 8s2.5 5 7 5c1.4 0 2.7-.4 3.8-1" }),
+    /* @__PURE__ */ jsx("path", { d: "M9.8 3.2C12.2 4.2 15 8 15 8s-.7 1.4-1.8 2.6" })
+  ] });
+}
+function XCircleIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6.5" }),
+    /* @__PURE__ */ jsx("line", { x1: "5.5", y1: "5.5", x2: "10.5", y2: "10.5" }),
+    /* @__PURE__ */ jsx("line", { x1: "10.5", y1: "5.5", x2: "5.5", y2: "10.5" })
+  ] });
+}
+function InfoCircleIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6.5" }),
+    /* @__PURE__ */ jsx("line", { x1: "8", y1: "7", x2: "8", y2: "11" }),
+    /* @__PURE__ */ jsx("circle", { cx: "8", cy: "5", r: "0.5", fill: "currentColor", stroke: "none" })
+  ] });
+}
+var Checkbox = React4.forwardRef(
+  ({ label, indeterminate, helperText, disabled, checked, defaultChecked, className, onChange, ...props }, ref) => {
+    const internalRef = React4.useRef(null);
+    const resolvedRef = ref ?? internalRef;
+    const [isChecked, setIsChecked] = React4.useState(!!defaultChecked || !!checked);
+    const isControlled = checked !== void 0;
+    const currentChecked = isControlled ? !!checked : isChecked;
+    React4.useEffect(() => {
+      if (resolvedRef.current) {
+        resolvedRef.current.indeterminate = !!indeterminate;
+      }
+    }, [indeterminate, resolvedRef]);
+    const handleChange = (e) => {
+      if (!isControlled) setIsChecked(e.target.checked);
+      onChange?.(e);
+    };
+    const showCheck = !indeterminate && currentChecked;
+    const showDash = !!indeterminate;
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: cn(
+          "inline-flex items-center gap-2 cursor-pointer select-none",
+          disabled && "opacity-50 cursor-not-allowed",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: resolvedRef,
+              type: "checkbox",
+              checked: isControlled ? checked : isChecked,
+              disabled,
+              onChange: handleChange,
+              className: "sr-only",
+              ...props
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[4px]",
+                "border-[1.5px] transition-colors duration-[120ms]",
+                showCheck || showDash ? "border-transparent bg-[var(--color-primary,#40CCF2)]" : "border-[var(--color-secondary-border,#339FB8)] bg-transparent"
+              ),
+              children: [
+                showCheck && /* @__PURE__ */ jsx(CheckIcon, {}),
+                showDash && /* @__PURE__ */ jsx(DashIcon, {})
+              ]
+            }
+          ),
+          (label || helperText) && /* @__PURE__ */ jsxs("span", { className: "flex flex-col gap-0.5", children: [
+            label && /* @__PURE__ */ jsx("span", { className: "font-['Red_Hat_Text'] text-[14px] font-normal leading-tight text-[var(--color-text-primary,#000)]", children: label }),
+            helperText && /* @__PURE__ */ jsx("span", { className: "font-['Inter'] text-[12px] text-[var(--color-text-tertiary,#6B7280)]", children: helperText })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+function CheckIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "11", height: "8", viewBox: "0 0 11 8", fill: "none", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "1,4 4,7 10,1" }) });
+}
+function DashIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "10", height: "2", viewBox: "0 0 10 2", fill: "none", stroke: "white", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsx("line", { x1: "1", y1: "1", x2: "9", y2: "1" }) });
+}
+var Radio = React4.forwardRef(
+  ({ label, helperText, disabled, checked, defaultChecked, className, onChange, ...props }, ref) => {
+    const [isChecked, setIsChecked] = React4.useState(!!defaultChecked);
+    const isControlled = checked !== void 0;
+    const currentChecked = isControlled ? !!checked : isChecked;
+    const handleChange = (e) => {
+      if (!isControlled) setIsChecked(e.target.checked);
+      onChange?.(e);
+    };
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: cn(
+          "inline-flex items-center gap-2 cursor-pointer select-none",
+          disabled && "opacity-50 cursor-not-allowed",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              type: "radio",
+              checked: isControlled ? checked : isChecked,
+              disabled,
+              onChange: handleChange,
+              className: "sr-only",
+              ...props
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-full",
+                "border-[1.5px] transition-colors duration-[120ms]",
+                currentChecked ? "border-transparent bg-[var(--color-primary,#40CCF2)]" : "border-[var(--color-secondary-border,#339FB8)] bg-transparent"
+              ),
+              children: currentChecked && /* @__PURE__ */ jsx("span", { className: "h-[6px] w-[6px] rounded-full bg-white" })
+            }
+          ),
+          (label || helperText) && /* @__PURE__ */ jsxs("span", { className: "flex flex-col gap-0.5", children: [
+            label && /* @__PURE__ */ jsx("span", { className: "font-['Red_Hat_Text'] text-[14px] font-normal leading-tight text-[var(--color-text-primary,#000)]", children: label }),
+            helperText && /* @__PURE__ */ jsx("span", { className: "font-['Inter'] text-[12px] text-[var(--color-text-tertiary,#6B7280)]", children: helperText })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Radio.displayName = "Radio";
+function RadioGroup({
+  label,
+  name,
+  value,
+  onChange,
+  children,
+  className,
+  orientation = "vertical"
+}) {
+  const cloned = React4.Children.map(children, (child) => {
+    if (!React4.isValidElement(child)) return child;
+    const el = child;
+    return React4.cloneElement(el, {
+      name,
+      checked: value !== void 0 ? el.props.value === value : void 0,
+      onChange: (e) => {
+        if (e.target.checked) onChange?.(e.target.value);
+        el.props.onChange?.(e);
+      }
+    });
+  });
+  return /* @__PURE__ */ jsxs("fieldset", { className: cn("border-none p-0 m-0", className), children: [
+    label && /* @__PURE__ */ jsx("legend", { className: "mb-2 font-['Red_Hat_Text'] text-[18px] font-medium text-[var(--color-text-primary,#000)]", children: label }),
+    /* @__PURE__ */ jsx("div", { className: cn("flex gap-3", orientation === "vertical" ? "flex-col" : "flex-row flex-wrap"), children: cloned })
+  ] });
+}
+var Toggle = React4.forwardRef(
+  ({
+    checked,
+    defaultChecked = false,
+    disabled = false,
+    label,
+    labelPosition = "right",
+    helperText,
+    onChange,
+    className,
+    id: idProp
+  }, ref) => {
+    const generatedId = React4.useId();
+    const id = idProp ?? generatedId;
+    const [isOn, setIsOn] = React4.useState(defaultChecked);
+    const isControlled = checked !== void 0;
+    const currentOn = isControlled ? !!checked : isOn;
+    const handleClick = () => {
+      if (disabled) return;
+      const next = !currentOn;
+      if (!isControlled) setIsOn(next);
+      onChange?.(next);
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === " " || e.key === "Enter") {
+        e.preventDefault();
+        handleClick();
+      }
+    };
+    const track = /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        id,
+        role: "switch",
+        type: "button",
+        "aria-checked": currentOn,
+        disabled,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        className: cn(
+          // track
+          "relative inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer rounded-full",
+          "border-0 outline-none transition-colors duration-[180ms] ease-[cubic-bezier(0.2,0,0,1)]",
+          "focus-visible:ring-2 focus-visible:ring-[var(--color-ring,#40CCF2)] focus-visible:ring-offset-2",
+          "disabled:cursor-not-allowed",
+          currentOn ? "bg-[var(--color-primary,#40CCF2)]" : "bg-[var(--color-inactive,#DEDEDE)]"
+        ),
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "absolute top-[2px] h-[20px] w-[20px] rounded-full bg-white shadow-sm",
+              "transition-transform duration-[180ms] ease-[cubic-bezier(0.2,0,0,1)]",
+              currentOn ? "translate-x-[22px]" : "translate-x-[2px]"
+            )
+          }
+        )
+      }
+    );
+    if (!label && !helperText) {
+      return /* @__PURE__ */ jsx("span", { className: cn(disabled && "opacity-50", className), children: track });
+    }
+    const labelContent = /* @__PURE__ */ jsxs(
+      "label",
+      {
+        htmlFor: id,
+        className: cn(
+          "flex flex-col gap-0.5 cursor-pointer",
+          disabled && "cursor-not-allowed"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "font-['Red_Hat_Text'] text-[14px] font-normal leading-tight text-[var(--color-text-primary,#000)]", children: label }),
+          helperText && /* @__PURE__ */ jsx("span", { className: "font-['Inter'] text-[12px] text-[var(--color-text-tertiary,#6B7280)]", children: helperText })
+        ]
+      }
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "inline-flex items-center gap-2.5",
+          disabled && "opacity-50",
+          className
+        ),
+        children: [
+          labelPosition === "left" && labelContent,
+          track,
+          labelPosition === "right" && labelContent
+        ]
+      }
+    );
+  }
+);
+Toggle.displayName = "Toggle";
+var selectorVariants = cva(
+  [
+    "inline-flex items-center gap-1.5 rounded-full select-none cursor-pointer",
+    "py-2 pl-3.5 pr-2.5",
+    "font-['Red_Hat_Text'] text-[14px] font-medium leading-tight",
+    "border-[1.5px] transition-colors duration-[120ms]",
+    "outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring,#40CCF2)] focus-visible:ring-offset-1",
+    "disabled:pointer-events-none disabled:opacity-50"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: "",
+        secondary: ""
+      },
+      state: {
+        active: "",
+        inactive: "",
+        disabled: ""
+      }
+    },
+    compoundVariants: [
+      // Primary
+      {
+        variant: "primary",
+        state: "active",
+        class: "bg-[var(--color-primary,#40CCF2)] border-transparent text-[var(--color-text-primary,#000)]"
+      },
+      {
+        variant: "primary",
+        state: ["inactive", "disabled"],
+        class: "bg-[var(--color-inactive,#DEDEDE)] border-transparent text-[var(--color-text-primary,#000)]"
+      },
+      // Secondary
+      {
+        variant: "secondary",
+        state: "active",
+        class: "bg-transparent border-[var(--color-secondary-border,#339FB8)] text-[var(--color-secondary-foreground,#339FB8)]"
+      },
+      {
+        variant: "secondary",
+        state: ["inactive", "disabled"],
+        class: "bg-transparent border-[var(--color-border,#C9C9C9)] text-[var(--color-text-secondary,#6B7280)]"
+      }
+    ],
+    defaultVariants: {
+      variant: "primary",
+      state: "active"
+    }
+  }
+);
+var Selector = React4.forwardRef(
+  ({ label, variant = "primary", state = "active", open = false, icon, className, disabled, ...props }, ref) => {
+    const isDisabled = disabled || state === "disabled";
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        disabled: isDisabled,
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        className: cn(selectorVariants({ variant, state: isDisabled ? "disabled" : state }), className),
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 [&_svg]:size-4", children: icon }),
+          /* @__PURE__ */ jsx("span", { children: label }),
+          /* @__PURE__ */ jsx(
+            ChevronDownIcon,
+            {
+              className: cn(
+                "shrink-0 transition-transform duration-[120ms]",
+                open && "rotate-180"
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Selector.displayName = "Selector";
+function SelectorGroup({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap items-center gap-2", className), children });
+}
+function ChevronDownIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: /* @__PURE__ */ jsx("polyline", { points: "2,4 6,8 10,4" })
+    }
+  );
+}
+function TabBar({
+  tabs,
+  value,
+  defaultValue,
+  onValueChange,
+  className,
+  stretch = false
+}) {
+  const [selected, setSelected] = React4.useState(defaultValue ?? tabs[0]);
+  const isControlled = value !== void 0;
+  const current = isControlled ? value : selected;
+  const handleSelect = (tab) => {
+    if (!isControlled) setSelected(tab);
+    onValueChange?.(tab);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tablist",
+      "aria-label": "Tabs",
+      className: cn(
+        "inline-flex items-center gap-1 rounded-full p-1",
+        "bg-[var(--color-inactive,#DEDEDE)]",
+        stretch && "w-full",
+        className
+      ),
+      children: tabs.map((tab) => {
+        const isSelected = tab === current;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            role: "tab",
+            type: "button",
+            "aria-selected": isSelected,
+            onClick: () => handleSelect(tab),
+            className: cn(
+              "rounded-full px-4 py-[7px] cursor-pointer select-none",
+              "font-['Inter'] text-[14px] font-medium leading-tight",
+              "outline-none transition-colors duration-[120ms]",
+              "focus-visible:ring-2 focus-visible:ring-[var(--color-ring,#40CCF2)] focus-visible:ring-offset-1",
+              stretch && "flex-1 text-center",
+              isSelected ? "bg-[var(--color-foreground,#000)] text-white" : "bg-transparent text-[var(--color-text-primary,#000)] hover:bg-black/5"
+            ),
+            children: tab
+          },
+          tab
+        );
+      })
+    }
+  );
+}
+function TabPanels({ value, children, className }) {
+  return /* @__PURE__ */ jsx("div", { className, children: React4.Children.map(children, (child) => {
+    if (!React4.isValidElement(child)) return null;
+    const el = child;
+    return el.props.value === value ? el : null;
+  }) });
+}
+function TabPanel({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { role: "tabpanel", className, children });
+}
+function segmentValue(s) {
+  return typeof s === "string" ? s : s.value;
+}
+function segmentLabel(s) {
+  return typeof s === "string" ? s : s.label;
+}
+function segmentIcon(s) {
+  return typeof s === "string" ? void 0 : s.icon;
+}
+function Switcher({
+  segments,
+  value,
+  defaultValue,
+  onValueChange,
+  className,
+  stretch = false
+}) {
+  const [selected, setSelected] = React4.useState(
+    defaultValue ?? segmentValue(segments[0])
+  );
+  const isControlled = value !== void 0;
+  const current = isControlled ? value : selected;
+  const handleSelect = (val) => {
+    if (!isControlled) setSelected(val);
+    onValueChange?.(val);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      className: cn(
+        "inline-flex items-center gap-0.5 rounded-[8px] p-[3px]",
+        "bg-[var(--color-inactive,#DEDEDE)]",
+        stretch && "w-full",
+        className
+      ),
+      children: segments.map((seg) => {
+        const val = segmentValue(seg);
+        const label = segmentLabel(seg);
+        const icon = segmentIcon(seg);
+        const isSelected = val === current;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            "aria-checked": isSelected,
+            onClick: () => handleSelect(val),
+            className: cn(
+              "inline-flex items-center justify-center gap-1.5 rounded-[6px]",
+              "px-4 py-[7px] cursor-pointer select-none",
+              "font-['Inter'] text-[14px] font-medium leading-tight",
+              "outline-none transition-colors duration-[120ms]",
+              "focus-visible:ring-2 focus-visible:ring-[var(--color-ring,#40CCF2)] focus-visible:ring-offset-1",
+              stretch && "flex-1",
+              isSelected ? "bg-[var(--color-foreground,#000)] text-white" : "bg-transparent text-[var(--color-text-secondary,#6B7280)] hover:text-[var(--color-text-primary,#000)]"
+            ),
+            children: [
+              icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 [&_svg]:size-[14px]", children: icon }),
+              label
+            ]
+          },
+          val
+        );
+      })
+    }
+  );
+}
+function BottomNav({
+  items,
+  value,
+  defaultValue,
+  onValueChange,
+  className
+}) {
+  const [selected, setSelected] = React4.useState(
+    defaultValue ?? items[0]?.value
+  );
+  const isControlled = value !== void 0;
+  const current = isControlled ? value : selected;
+  const handleSelect = (val) => {
+    if (!isControlled) setSelected(val);
+    onValueChange?.(val);
+  };
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "aria-label": "Main navigation",
+      className: cn(
+        // Glass pill container
+        "flex items-center justify-between",
+        "w-full max-w-[360px] h-[72px] rounded-[60px]",
+        "px-3 py-2",
+        // Glass gradient
+        "bg-gradient-to-b from-[rgba(220,220,220,0.20)] to-[rgba(118,118,118,0.20)]",
+        "backdrop-blur-md",
+        // Shadow
+        "shadow-[0_4px_4px_rgba(0,0,0,0.14)]",
+        className
+      ),
+      children: items.map((item) => {
+        const isSelected = item.value === current;
+        return /* @__PURE__ */ jsx(
+          NavItemButton,
+          {
+            item,
+            isSelected,
+            onClick: () => handleSelect(item.value)
+          },
+          item.value
+        );
+      })
+    }
+  );
+}
+function NavItemButton({ item, isSelected, onClick }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      "aria-current": isSelected ? "page" : void 0,
+      className: cn(
+        "relative inline-flex flex-col items-center justify-center gap-[3px]",
+        "rounded-full py-2 px-4 cursor-pointer select-none",
+        "outline-none transition-colors duration-[120ms]",
+        "focus-visible:ring-2 focus-visible:ring-[var(--color-ring,#40CCF2)] focus-visible:ring-offset-1",
+        isSelected ? "bg-[var(--color-foreground,#000)] text-white" : "bg-transparent text-[var(--color-muted-foreground,#6B7280)]"
+      ),
+      children: [
+        item.badge && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-label": typeof item.badge === "number" ? `${item.badge} notifications` : "New notification",
+            className: cn(
+              "absolute right-2 top-2 flex items-center justify-center",
+              "rounded-full bg-[var(--color-destructive,#EF2149)] text-white",
+              typeof item.badge === "number" ? "h-4 min-w-4 px-1 font-['Inter'] text-[10px] font-semibold" : "h-2 w-2"
+            ),
+            children: typeof item.badge === "number" ? item.badge : null
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "[&_svg]:size-5", "aria-hidden": "true", children: item.icon }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "font-['Inter'] text-[10px] leading-tight",
+              isSelected ? "font-semibold" : "font-normal"
+            ),
+            children: item.label
+          }
+        )
+      ]
+    }
+  );
+}
+function BottomNavContainer({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "fixed bottom-6 left-1/2 z-50 flex w-full max-w-[402px] -translate-x-1/2 items-center justify-center px-4", children });
+}
+var badgeVariants = cva(
+  [
+    "inline-flex items-center gap-1 rounded-full font-['Inter'] font-medium whitespace-nowrap",
+    "select-none leading-tight"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "bg-[var(--color-inactive,#DEDEDE)] text-[var(--color-text-primary,#000)]",
+        success: "bg-[var(--color-success-soft,#B3F5D1)] text-[var(--color-success,#16A34A)]",
+        error: "bg-[var(--color-error-soft,#FFC9C9)] text-[var(--color-destructive,#EF2149)]",
+        warning: "bg-[var(--color-warning-soft,#FFF085)] text-[#92680E]",
+        alert: "bg-[var(--color-alert-soft,#EAC1C3)] text-[var(--color-alert,#FA6A0A)]",
+        info: "bg-[var(--color-info-soft,#BEDBFF)] text-[var(--color-info,#2F80ED)]",
+        neutral: "bg-transparent text-[var(--color-text-secondary,#6B7280)] border border-[var(--color-border,#C9C9C9)]",
+        // Brand accent fills — used for status tags in Kitchen Intelligence
+        brand: "bg-[var(--color-primary,#40CCF2)] text-[var(--color-text-primary,#000)]"
+      },
+      size: {
+        sm: "h-5 px-2 text-[11px]",
+        md: "h-6 px-2.5 text-[12px]"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+function Badge({ variant, size, icon, children, className, ...props }) {
+  return /* @__PURE__ */ jsxs("span", { className: cn(badgeVariants({ variant, size }), className), ...props, children: [
+    icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 [&_svg]:size-3", "aria-hidden": "true", children: icon }),
+    children
+  ] });
+}
+function TrendBadge({ value, decimals = 1, showArrow = true, ...props }) {
+  const variant = value > 0 ? "success" : value < 0 ? "error" : "neutral";
+  const formatted = `${value > 0 ? "+" : ""}${value.toFixed(decimals)}%`;
+  const arrow = showArrow ? value > 0 ? /* @__PURE__ */ jsx(ArrowUpIcon, {}) : value < 0 ? /* @__PURE__ */ jsx(ArrowDownIcon, {}) : null : null;
+  return /* @__PURE__ */ jsx(Badge, { variant, icon: arrow, ...props, children: formatted });
+}
+function ArrowUpIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "2,7 5,3 8,7" }) });
+}
+function ArrowDownIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "2,3 5,7 8,3" }) });
+}
+function MetricTile({
+  label,
+  value,
+  trend,
+  trendLabel,
+  icon,
+  valueColor,
+  size = "md",
+  loading = false,
+  onClick,
+  className,
+  as: Tag = "div"
+}) {
+  const valueSize = {
+    sm: "text-[18px]",
+    md: "text-[24px]",
+    lg: "text-[30px]"
+  }[size];
+  const padding = {
+    sm: "p-3",
+    md: "p-4",
+    lg: "p-5"
+  }[size];
+  return /* @__PURE__ */ jsxs(
+    Tag,
+    {
+      onClick,
+      role: onClick ? "button" : void 0,
+      tabIndex: onClick ? 0 : void 0,
+      onKeyDown: onClick ? (e) => {
+        if (e.key === "Enter" || e.key === " ") onClick();
+      } : void 0,
+      className: cn(
+        // Card shell
+        "flex flex-col gap-1 rounded-[16px] bg-white",
+        "shadow-[0_4px_4px_rgba(0,0,0,0.06)]",
+        padding,
+        // Interactive
+        onClick && "cursor-pointer outline-none hover:shadow-[0_4px_12px_rgba(0,0,0,0.10)] transition-shadow duration-[120ms]",
+        onClick && "focus-visible:ring-2 focus-visible:ring-[var(--color-ring,#40CCF2)] focus-visible:ring-offset-2",
+        // Loading
+        loading && "animate-pulse",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "font-['Inter'] text-[12px] font-normal leading-tight",
+                "text-[var(--color-text-tertiary,#6B7280)]",
+                loading && "h-3 w-24 rounded bg-gray-200"
+              ),
+              children: !loading && label
+            }
+          ),
+          icon && !loading && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--color-text-tertiary,#6B7280)] [&_svg]:size-4", "aria-hidden": "true", children: icon })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "font-['Inter'] font-semibold leading-tight tracking-tight",
+              valueSize,
+              loading && "mt-1 h-7 w-28 rounded bg-gray-200"
+            ),
+            style: valueColor && !loading ? { color: valueColor } : void 0,
+            children: !loading && value
+          }
+        ),
+        (trend !== void 0 || trendLabel) && !loading && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+          trend !== void 0 && /* @__PURE__ */ jsx(TrendBadge, { value: trend, size: "sm" }),
+          trendLabel && /* @__PURE__ */ jsx("span", { className: "font-['Inter'] text-[11px] text-[var(--color-text-tertiary,#6B7280)]", children: trendLabel })
+        ] }),
+        loading && trend !== void 0 && /* @__PURE__ */ jsx("div", { className: "mt-1 h-4 w-16 rounded bg-gray-200" })
+      ]
+    }
+  );
+}
+function MetricTileGrid({ cols = 2, children, className }) {
+  const colClass = {
+    1: "grid-cols-1",
+    2: "grid-cols-2",
+    3: "grid-cols-3",
+    4: "grid-cols-4"
+  }[cols];
+  return /* @__PURE__ */ jsx("div", { className: cn("grid gap-3", colClass, className), children });
+}
+
+export { Badge, BottomNav, BottomNavContainer, Button, Checkbox, IconButton, InputField, MetricTile, MetricTileGrid, Radio, RadioGroup, Selector, SelectorGroup, Switcher, TabBar, TabPanel, TabPanels, Toggle, TrendBadge, buttonVariants };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map