@fanvue/ui 0.1.0-alpha.3 → 1.1.0

package/dist/components/SwitchToggle/SwitchToggle.mjs

@@ -0,0 +1,93 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const SwitchToggle = React.forwardRef(
+  ({
+    className,
+    size = "24",
+    options,
+    value: controlledValue,
+    defaultValue,
+    onChange,
+    disabled = false,
+    ...props
+  }, ref) => {
+    const groupName = React.useId();
+    const [internalValue, setInternalValue] = React.useState(defaultValue ?? options[0].value);
+    const isControlled = controlledValue !== void 0;
+    const currentValue = isControlled ? controlledValue : internalValue;
+    const isSecondSelected = currentValue === options[1].value;
+    const sizeClass = size === "24" ? "px-2 py-1 typography-caption-semibold" : size === "32" ? "px-3 py-1.75 typography-body-2-semibold" : "h-10 px-4 py-2.25 typography-button-small";
+    const handleSelect = (optionValue) => {
+      if (disabled) return;
+      if (!isControlled) {
+        setInternalValue(optionValue);
+      }
+      onChange?.(optionValue);
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "radiogroup",
+        className: cn(
+          "relative inline-grid grid-cols-2 rounded-full border border-neutral-200 p-1",
+          disabled && "cursor-not-allowed opacity-50",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "absolute inset-y-1 left-1 w-[calc(50%-4px)] rounded-full border border-brand-green-500 bg-brand-green-50",
+                "motion-safe:transition-transform motion-safe:duration-200 motion-safe:ease-in-out",
+                isSecondSelected && "translate-x-full"
+              )
+            }
+          ),
+          options.map((option) => {
+            const optionId = `${groupName}-${option.value}`;
+            return /* @__PURE__ */ jsxs(
+              "label",
+              {
+                htmlFor: optionId,
+                className: cn(
+                  "relative z-10 inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full border border-transparent text-body-100",
+                  "has-focus-visible:shadow-focus-ring has-focus-visible:outline-none",
+                  disabled && "pointer-events-none",
+                  sizeClass
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      id: optionId,
+                      type: "radio",
+                      name: groupName,
+                      value: option.value,
+                      checked: currentValue === option.value,
+                      disabled,
+                      onChange: () => handleSelect(option.value),
+                      className: "sr-only"
+                    }
+                  ),
+                  option.label
+                ]
+              },
+              option.value
+            );
+          })
+        ]
+      }
+    );
+  }
+);
+SwitchToggle.displayName = "SwitchToggle";
+export {
+  SwitchToggle
+};
+//# sourceMappingURL=SwitchToggle.mjs.map

package/dist/components/SwitchToggle/SwitchToggle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchToggle.mjs","sources":["../../../src/components/SwitchToggle/SwitchToggle.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport type SwitchToggleSize = \"24\" | \"32\" | \"40\";\n\nexport interface SwitchToggleOption {\n  /** Display label for the option */\n  label: string;\n  /** Value identifier for the option */\n  value: string;\n}\n\nexport interface SwitchToggleProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** Size variant */\n  size?: SwitchToggleSize;\n  /** The two options to toggle between */\n  options: [SwitchToggleOption, SwitchToggleOption];\n  /** Currently selected value */\n  value?: string;\n  /** Default selected value (uncontrolled) */\n  defaultValue?: string;\n  /** Callback when the selected value changes */\n  onChange?: (value: string) => void;\n  /** Whether the toggle is disabled */\n  disabled?: boolean;\n}\n\nexport const SwitchToggle = React.forwardRef<HTMLDivElement, SwitchToggleProps>(\n  (\n    {\n      className,\n      size = \"24\",\n      options,\n      value: controlledValue,\n      defaultValue,\n      onChange,\n      disabled = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const groupName = React.useId();\n    // Tracks selection for uncontrolled usage; ignored when `value` prop is provided\n    const [internalValue, setInternalValue] = React.useState(defaultValue ?? options[0].value);\n    const isControlled = controlledValue !== undefined;\n    const currentValue = isControlled ? controlledValue : internalValue;\n    const isSecondSelected = currentValue === options[1].value;\n\n    const sizeClass =\n      size === \"24\"\n        ? \"px-2 py-1 typography-caption-semibold\"\n        : size === \"32\"\n          ? \"px-3 py-1.75 typography-body-2-semibold\"\n          : \"h-10 px-4 py-2.25 typography-button-small\";\n\n    const handleSelect = (optionValue: string) => {\n      if (disabled) return;\n      if (!isControlled) {\n        setInternalValue(optionValue);\n      }\n      onChange?.(optionValue);\n    };\n\n    return (\n      <div\n        ref={ref}\n        role=\"radiogroup\"\n        className={cn(\n          \"relative inline-grid grid-cols-2 rounded-full border border-neutral-200 p-1\",\n          disabled && \"cursor-not-allowed opacity-50\",\n          className,\n        )}\n        {...props}\n      >\n        <span\n          aria-hidden=\"true\"\n          className={cn(\n            \"absolute inset-y-1 left-1 w-[calc(50%-4px)] rounded-full border border-brand-green-500 bg-brand-green-50\",\n            \"motion-safe:transition-transform motion-safe:duration-200 motion-safe:ease-in-out\",\n            isSecondSelected && \"translate-x-full\",\n          )}\n        />\n        {options.map((option) => {\n          const optionId = `${groupName}-${option.value}`;\n          return (\n            <label\n              key={option.value}\n              htmlFor={optionId}\n              className={cn(\n                \"relative z-10 inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full border border-transparent text-body-100\",\n                \"has-focus-visible:shadow-focus-ring has-focus-visible:outline-none\",\n                disabled && \"pointer-events-none\",\n                sizeClass,\n              )}\n            >\n              <input\n                id={optionId}\n                type=\"radio\"\n                name={groupName}\n                value={option.value}\n                checked={currentValue === option.value}\n                disabled={disabled}\n                onChange={() => handleSelect(option.value)}\n                className=\"sr-only\"\n              />\n              {option.label}\n            </label>\n          );\n        })}\n      </div>\n    );\n  },\n);\n\nSwitchToggle.displayName = \"SwitchToggle\";\n"],"names":[],"mappings":";;;;AA2BO,MAAM,eAAe,MAAM;AAAA,EAChC,CACE;AAAA,IACE;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,YAAY,MAAM,MAAA;AAExB,UAAM,CAAC,eAAe,gBAAgB,IAAI,MAAM,SAAS,gBAAgB,QAAQ,CAAC,EAAE,KAAK;AACzF,UAAM,eAAe,oBAAoB;AACzC,UAAM,eAAe,eAAe,kBAAkB;AACtD,UAAM,mBAAmB,iBAAiB,QAAQ,CAAC,EAAE;AAErD,UAAM,YACJ,SAAS,OACL,0CACA,SAAS,OACP,4CACA;AAER,UAAM,eAAe,CAAC,gBAAwB;AAC5C,UAAI,SAAU;AACd,UAAI,CAAC,cAAc;AACjB,yBAAiB,WAAW;AAAA,MAC9B;AACA,iBAAW,WAAW;AAAA,IACxB;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,WAAW;AAAA,UACT;AAAA,UACA,YAAY;AAAA,UACZ;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,eAAY;AAAA,cACZ,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA,oBAAoB;AAAA,cAAA;AAAA,YACtB;AAAA,UAAA;AAAA,UAED,QAAQ,IAAI,CAAC,WAAW;AACvB,kBAAM,WAAW,GAAG,SAAS,IAAI,OAAO,KAAK;AAC7C,mBACE;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,SAAS;AAAA,gBACT,WAAW;AAAA,kBACT;AAAA,kBACA;AAAA,kBACA,YAAY;AAAA,kBACZ;AAAA,gBAAA;AAAA,gBAGF,UAAA;AAAA,kBAAA;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,IAAI;AAAA,sBACJ,MAAK;AAAA,sBACL,MAAM;AAAA,sBACN,OAAO,OAAO;AAAA,sBACd,SAAS,iBAAiB,OAAO;AAAA,sBACjC;AAAA,sBACA,UAAU,MAAM,aAAa,OAAO,KAAK;AAAA,sBACzC,WAAU;AAAA,oBAAA;AAAA,kBAAA;AAAA,kBAEX,OAAO;AAAA,gBAAA;AAAA,cAAA;AAAA,cAnBH,OAAO;AAAA,YAAA;AAAA,UAsBlB,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,aAAa,cAAc;"}

package/dist/components/Tabs/Tabs.mjs

@@ -0,0 +1,7 @@
+"use client";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+const Tabs = TabsPrimitive.Root;
+export {
+  Tabs
+};
+//# sourceMappingURL=Tabs.mjs.map

package/dist/components/Tabs/Tabs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.mjs","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport type * as React from \"react\";\n\nexport type TabsProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>;\n\nexport const Tabs = TabsPrimitive.Root;\n"],"names":[],"mappings":";;AAKO,MAAM,OAAO,cAAc;"}

package/dist/components/Tabs/TabsContent.mjs

@@ -0,0 +1,18 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Content,
+  {
+    ref,
+    className: cn("focus-visible:outline-none", className),
+    ...props
+  }
+));
+TabsContent.displayName = "TabsContent";
+export {
+  TabsContent
+};
+//# sourceMappingURL=TabsContent.mjs.map

package/dist/components/Tabs/TabsContent.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsContent.mjs","sources":["../../../src/components/Tabs/TabsContent.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport type TabsContentProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>;\n\nexport const TabsContent = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Content>,\n  TabsContentProps\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Content\n    ref={ref}\n    className={cn(\"focus-visible:outline-none\", className)}\n    {...props}\n  />\n));\n\nTabsContent.displayName = \"TabsContent\";\n"],"names":[],"mappings":";;;;;AAMO,MAAM,cAAc,MAAM,WAG/B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC,cAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAW,GAAG,8BAA8B,SAAS;AAAA,IACpD,GAAG;AAAA,EAAA;AACN,CACD;AAED,YAAY,cAAc;"}

package/dist/components/Tabs/TabsList.mjs

@@ -0,0 +1,24 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const TabsList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.List,
+  {
+    ref,
+    className: cn(
+      "inline-flex",
+      // !TODO setup shadows tokens https://linear.app/fanvue/issue/ENG-7368/setup-shadow-tokens
+      "data-[orientation=horizontal]:items-center data-[orientation=horizontal]:shadow-[inset_0_-1px_0_0_var(--color-neutral-200)]",
+      "data-[orientation=vertical]:flex-col data-[orientation=vertical]:shadow-[inset_-1px_0_0_0_var(--color-neutral-200)]",
+      className
+    ),
+    ...props
+  }
+));
+TabsList.displayName = "TabsList";
+export {
+  TabsList
+};
+//# sourceMappingURL=TabsList.mjs.map

package/dist/components/Tabs/TabsList.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsList.mjs","sources":["../../../src/components/Tabs/TabsList.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport type TabsListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>;\n\nexport const TabsList = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.List>,\n  TabsListProps\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.List\n    ref={ref}\n    className={cn(\n      \"inline-flex\", // !TODO setup shadows tokens https://linear.app/fanvue/issue/ENG-7368/setup-shadow-tokens\n      \"data-[orientation=horizontal]:items-center data-[orientation=horizontal]:shadow-[inset_0_-1px_0_0_var(--color-neutral-200)]\",\n      \"data-[orientation=vertical]:flex-col data-[orientation=vertical]:shadow-[inset_-1px_0_0_0_var(--color-neutral-200)]\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nTabsList.displayName = \"TabsList\";\n"],"names":[],"mappings":";;;;;AAMO,MAAM,WAAW,MAAM,WAG5B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC,cAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,EAAA;AACN,CACD;AAED,SAAS,cAAc;"}

package/dist/components/Tabs/TabsTrigger.mjs

@@ -0,0 +1,32 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "inline-flex items-center justify-center",
+      "rounded-xs border-transparent",
+      "typography-body-1-semibold cursor-pointer text-body-100",
+      "data-[orientation=horizontal]:border-b-4 data-[orientation=horizontal]:px-3 data-[orientation=horizontal]:pb-4",
+      "data-[orientation=vertical]:justify-start data-[orientation=vertical]:border-r-4 data-[orientation=vertical]:px-4 data-[orientation=vertical]:py-3",
+      "data-[state=active]:border-brand-green-500",
+      "data-[state=active]:hover:text-hover-100",
+      "data-[state=inactive]:hover:text-hover-200",
+      "data-disabled:pointer-events-none",
+      "data-disabled:data-[state=active]:text-disabled-100",
+      "data-disabled:data-[state=inactive]:text-disabled-400",
+      "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",
+      className
+    ),
+    ...props
+  }
+));
+TabsTrigger.displayName = "TabsTrigger";
+export {
+  TabsTrigger
+};
+//# sourceMappingURL=TabsTrigger.mjs.map

package/dist/components/Tabs/TabsTrigger.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsTrigger.mjs","sources":["../../../src/components/Tabs/TabsTrigger.tsx"],"sourcesContent":["import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>;\n\nexport const TabsTrigger = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"inline-flex items-center justify-center\",\n      \"rounded-xs border-transparent\",\n      \"typography-body-1-semibold cursor-pointer text-body-100\",\n      \"data-[orientation=horizontal]:border-b-4 data-[orientation=horizontal]:px-3 data-[orientation=horizontal]:pb-4\",\n      \"data-[orientation=vertical]:justify-start data-[orientation=vertical]:border-r-4 data-[orientation=vertical]:px-4 data-[orientation=vertical]:py-3\",\n      \"data-[state=active]:border-brand-green-500\",\n      \"data-[state=active]:hover:text-hover-100\",\n      \"data-[state=inactive]:hover:text-hover-200\",\n      \"data-disabled:pointer-events-none\",\n      \"data-disabled:data-[state=active]:text-disabled-100\",\n      \"data-disabled:data-[state=inactive]:text-disabled-400\",\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      className,\n    )}\n    {...props}\n  />\n));\n\nTabsTrigger.displayName = \"TabsTrigger\";\n"],"names":[],"mappings":";;;;;AAMO,MAAM,cAAc,MAAM,WAG/B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC,cAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,EAAA;AACN,CACD;AAED,YAAY,cAAc;"}

package/dist/components/Toast/Toast.mjs

@@ -0,0 +1,110 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as ToastPrimitive from "@radix-ui/react-toast";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+import { Avatar } from "../Avatar/Avatar.mjs";
+import { Button } from "../Button/Button.mjs";
+import { IconButton } from "../IconButton/IconButton.mjs";
+import { CloseIcon } from "../Icons/CloseIcon.mjs";
+import { ErrorIcon } from "../Icons/ErrorIcon.mjs";
+import { InfoIcon } from "../Icons/InfoIcon.mjs";
+import { SuccessIcon } from "../Icons/SuccessIcon.mjs";
+import { WarningIcon } from "../Icons/WarningIcon.mjs";
+const ToastProvider = ToastPrimitive.Provider;
+const ToastViewport = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToastPrimitive.Viewport,
+  {
+    ref,
+    className: cn(
+      "fixed top-0 right-0 z-100 flex max-h-screen w-full flex-col-reverse gap-3 p-4 sm:top-auto sm:right-0 sm:bottom-0 sm:flex-col md:max-w-[420px]",
+      className
+    ),
+    ...props
+  }
+));
+ToastViewport.displayName = "ToastViewport";
+const VariantIcon = ({ variant }) => {
+  switch (variant) {
+    case "info":
+      return /* @__PURE__ */ jsx(InfoIcon, { className: "size-5 text-info-500" });
+    case "warning":
+      return /* @__PURE__ */ jsx(WarningIcon, { className: "size-5 text-warning-500" });
+    case "success":
+      return /* @__PURE__ */ jsx(SuccessIcon, { className: "size-5 text-success-500" });
+    case "error":
+      return /* @__PURE__ */ jsx(ErrorIcon, { className: "size-5 text-error-500" });
+  }
+};
+const Toast = React.forwardRef(
+  ({
+    className,
+    variant = "info",
+    title,
+    description,
+    actionLabel,
+    onActionClick,
+    showClose = true,
+    avatarSrc,
+    avatarAlt,
+    avatarFallback,
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      ToastPrimitive.Root,
+      {
+        ref,
+        "data-testid": "toast",
+        className: cn(
+          // Base styles
+          "group pointer-events-auto relative flex w-full flex-col items-start gap-3 overflow-hidden rounded-lg border-none bg-background-solid p-4 text-background-inverse-solid shadow-lg transition-all",
+          // Dark mode
+          "dark:border-opacity-100",
+          // Animation
+          "data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-bottom-full data-[state=open]:sm:slide-in-from-top-full data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none",
+          // Manual CSS overrides
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-3", children: [
+            /* @__PURE__ */ jsx("div", { className: "self-start", children: variant === "messageToast" ? avatarSrc && /* @__PURE__ */ jsx(Avatar, { src: avatarSrc, alt: avatarAlt, fallback: avatarFallback }) : /* @__PURE__ */ jsx(VariantIcon, { variant }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col items-start", children: [
+              title && /* @__PURE__ */ jsx(ToastPrimitive.Title, { className: "typography-body-2-semibold", children: title }),
+              description && /* @__PURE__ */ jsx(ToastPrimitive.Description, { className: "typography-body-2-regular mt-1 opacity-90", children: description }),
+              children,
+              onActionClick && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "secondary",
+                  className: "mt-4 border-body-400 text-body-400",
+                  size: "32",
+                  onClick: onActionClick,
+                  children: actionLabel ?? "Action"
+                }
+              )
+            ] })
+          ] }),
+          showClose && /* @__PURE__ */ jsx(ToastPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              icon: /* @__PURE__ */ jsx(CloseIcon, {}),
+              "aria-label": "Close notification",
+              className: "absolute top-2 right-2 text-body-300",
+              variant: "tertiary",
+              size: "24"
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+Toast.displayName = "Toast";
+export {
+  Toast,
+  ToastProvider,
+  ToastViewport
+};
+//# sourceMappingURL=Toast.mjs.map

package/dist/components/Toast/Toast.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.mjs","sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import * as ToastPrimitive from \"@radix-ui/react-toast\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Avatar } from \"../Avatar/Avatar\";\nimport { Button } from \"../Button/Button\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\nimport { ErrorIcon } from \"../Icons/ErrorIcon\";\nimport { InfoIcon } from \"../Icons/InfoIcon\";\nimport { SuccessIcon } from \"../Icons/SuccessIcon\";\nimport { WarningIcon } from \"../Icons/WarningIcon\";\n\nexport type ToastVariant = \"info\" | \"warning\" | \"success\" | \"error\" | \"messageToast\";\n\n// Override \"title\" prop to allow React.ReactNode instead of string | undefined\nexport interface ToastProps\n  extends Omit<Omit<React.ComponentPropsWithoutRef<typeof ToastPrimitive.Root>, \"type\">, \"title\"> {\n  /** Variant of the toast */\n  variant?: ToastVariant;\n  /** Toast title */\n  title?: string;\n  /** Toast description/message */\n  description?: React.ReactNode;\n  /** Action button label */\n  actionLabel?: string;\n  /** Action button click handler */\n  onActionClick?: () => void;\n  /** Show close button */\n  showClose?: boolean;\n  /** Avatar image source */\n  avatarSrc?: string;\n  /** Avatar alt text */\n  avatarAlt?: string;\n  /** Avatar fallback text */\n  avatarFallback?: string;\n}\n\nexport interface ToastProviderProps extends ToastPrimitive.ToastProviderProps {}\nexport interface ToastViewportProps\n  extends React.ComponentPropsWithoutRef<typeof ToastPrimitive.Viewport> {}\n\nexport const ToastProvider: React.FC<ToastProviderProps> = ToastPrimitive.Provider;\n\nexport const ToastViewport = React.forwardRef<\n  React.ElementRef<typeof ToastPrimitive.Viewport>,\n  ToastViewportProps\n>(({ className, ...props }, ref) => (\n  <ToastPrimitive.Viewport\n    ref={ref}\n    className={cn(\n      \"fixed top-0 right-0 z-100 flex max-h-screen w-full flex-col-reverse gap-3 p-4 sm:top-auto sm:right-0 sm:bottom-0 sm:flex-col md:max-w-[420px]\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nToastViewport.displayName = \"ToastViewport\";\n\nconst VariantIcon = ({ variant }: { variant: ToastVariant }) => {\n  switch (variant) {\n    case \"info\":\n      return <InfoIcon className=\"size-5 text-info-500\" />;\n    case \"warning\":\n      return <WarningIcon className=\"size-5 text-warning-500\" />;\n    case \"success\":\n      return <SuccessIcon className=\"size-5 text-success-500\" />;\n    case \"error\":\n      return <ErrorIcon className=\"size-5 text-error-500\" />;\n  }\n};\n\nexport const Toast = React.forwardRef<React.ComponentRef<typeof ToastPrimitive.Root>, ToastProps>(\n  (\n    {\n      className,\n      variant = \"info\",\n      title,\n      description,\n      actionLabel,\n      onActionClick,\n      showClose = true,\n      avatarSrc,\n      avatarAlt,\n      avatarFallback,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <ToastPrimitive.Root\n        ref={ref}\n        data-testid=\"toast\"\n        className={cn(\n          // Base styles\n          \"group pointer-events-auto relative flex w-full flex-col items-start gap-3 overflow-hidden rounded-lg border-none bg-background-solid p-4 text-background-inverse-solid shadow-lg transition-all\",\n          // Dark mode\n          \"dark:border-opacity-100\",\n          // Animation\n          \"data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-bottom-full data-[state=open]:sm:slide-in-from-top-full data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none\",\n          // Manual CSS overrides\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"flex w-full items-center gap-3\">\n          <div className=\"self-start\">\n            {variant === \"messageToast\" ? (\n              avatarSrc && <Avatar src={avatarSrc} alt={avatarAlt} fallback={avatarFallback} />\n            ) : (\n              <VariantIcon variant={variant} />\n            )}\n          </div>\n          <div className=\"flex flex-1 flex-col items-start\">\n            {title && (\n              <ToastPrimitive.Title className=\"typography-body-2-semibold\">\n                {title}\n              </ToastPrimitive.Title>\n            )}\n            {description && (\n              <ToastPrimitive.Description className=\"typography-body-2-regular mt-1 opacity-90\">\n                {description}\n              </ToastPrimitive.Description>\n            )}\n            {children}\n            {onActionClick && (\n              <Button\n                variant=\"secondary\"\n                // These styles are basically inverted from the selected theme\n                className=\"mt-4 border-body-400 text-body-400\"\n                size=\"32\"\n                onClick={onActionClick}\n              >\n                {actionLabel ?? \"Action\"}\n              </Button>\n            )}\n          </div>\n        </div>\n        {showClose && (\n          <ToastPrimitive.Close asChild>\n            <IconButton\n              icon={<CloseIcon />}\n              aria-label=\"Close notification\"\n              // same as the button above\n              className=\"absolute top-2 right-2 text-body-300\"\n              variant=\"tertiary\"\n              size=\"24\"\n            />\n          </ToastPrimitive.Close>\n        )}\n      </ToastPrimitive.Root>\n    );\n  },\n);\n\nToast.displayName = \"Toast\";\n"],"names":[],"mappings":";;;;;;;;;;;;;AAyCO,MAAM,gBAA8C,eAAe;AAEnE,MAAM,gBAAgB,MAAM,WAGjC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC,eAAe;AAAA,EAAf;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,EAAA;AACN,CACD;AAED,cAAc,cAAc;AAE5B,MAAM,cAAc,CAAC,EAAE,cAAyC;AAC9D,UAAQ,SAAA;AAAA,IACN,KAAK;AACH,aAAO,oBAAC,UAAA,EAAS,WAAU,uBAAA,CAAuB;AAAA,IACpD,KAAK;AACH,aAAO,oBAAC,aAAA,EAAY,WAAU,0BAAA,CAA0B;AAAA,IAC1D,KAAK;AACH,aAAO,oBAAC,aAAA,EAAY,WAAU,0BAAA,CAA0B;AAAA,IAC1D,KAAK;AACH,aAAO,oBAAC,WAAA,EAAU,WAAU,wBAAA,CAAwB;AAAA,EAAA;AAE1D;AAEO,MAAM,QAAQ,MAAM;AAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,WACE;AAAA,MAAC,eAAe;AAAA,MAAf;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAW;AAAA;AAAA,UAET;AAAA;AAAA,UAEA;AAAA;AAAA,UAEA;AAAA;AAAA,UAEA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,qBAAC,OAAA,EAAI,WAAU,kCACb,UAAA;AAAA,YAAA,oBAAC,SAAI,WAAU,cACZ,sBAAY,iBACX,iCAAc,QAAA,EAAO,KAAK,WAAW,KAAK,WAAW,UAAU,eAAA,CAAgB,IAE/E,oBAAC,aAAA,EAAY,SAAkB,EAAA,CAEnC;AAAA,YACA,qBAAC,OAAA,EAAI,WAAU,oCACZ,UAAA;AAAA,cAAA,6BACE,eAAe,OAAf,EAAqB,WAAU,8BAC7B,UAAA,OACH;AAAA,cAED,eACC,oBAAC,eAAe,aAAf,EAA2B,WAAU,6CACnC,UAAA,aACH;AAAA,cAED;AAAA,cACA,iBACC;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,SAAQ;AAAA,kBAER,WAAU;AAAA,kBACV,MAAK;AAAA,kBACL,SAAS;AAAA,kBAER,UAAA,eAAe;AAAA,gBAAA;AAAA,cAAA;AAAA,YAClB,EAAA,CAEJ;AAAA,UAAA,GACF;AAAA,UACC,aACC,oBAAC,eAAe,OAAf,EAAqB,SAAO,MAC3B,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,0BAAO,WAAA,EAAU;AAAA,cACjB,cAAW;AAAA,cAEX,WAAU;AAAA,cACV,SAAQ;AAAA,cACR,MAAK;AAAA,YAAA;AAAA,UAAA,EACP,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,MAAM,cAAc;"}

package/dist/index.d.ts

@@ -3,6 +3,7 @@ import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { ClassValue } from 'clsx';
 import { DateRange } from 'react-day-picker';
 import { DayPickerProps } from 'react-day-picker';
+import { default as default_2 } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as React_2 from 'react';
@@ -93,38 +94,7 @@ export declare interface BadgeProps extends React_2.HTMLAttributes<HTMLSpanEleme
     asChild?: boolean;
 }
 
-export declare type BadgeVariant = keyof typeof badgeVariants.variant;
-
-declare const badgeVariants: {
-    readonly variant: {
-        readonly default: "bg-neutral-100 text-neutral-400";
-        readonly dark: "bg-background-800 text-body-300 dark:text-body-white-solid-constant";
-        readonly success: "bg-neutral-100 text-neutral-400";
-        readonly warning: "bg-neutral-100 text-neutral-400";
-        readonly error: "bg-neutral-100 text-neutral-400";
-        readonly special: "bg-neutral-100 text-neutral-400";
-        readonly info: "bg-neutral-100 text-neutral-400";
-        readonly online: "bg-background-200 text-brand-green-500";
-        readonly brand: "bg-brand-green-500 text-body-black-solid-constant";
-        readonly pink: "bg-brand-pink-500 text-body-black-solid-constant";
-        readonly brandLight: "bg-brand-green-50 text-body-black-solid-constant";
-        readonly pinkLight: "bg-brand-pink-50 text-body-black-solid-constant";
-    };
-    readonly dotColor: {
-        readonly default: "bg-body-black-solid-constant";
-        readonly dark: "bg-body-300 dark:bg-body-white-solid-constant";
-        readonly success: "bg-success-500";
-        readonly warning: "bg-warning-500";
-        readonly error: "bg-error-500";
-        readonly special: "bg-special-500";
-        readonly info: "bg-info-500";
-        readonly online: "bg-brand-green-500";
-        readonly brand: "bg-body-black-solid-constant";
-        readonly pink: "bg-body-black-solid-constant";
-        readonly brandLight: "bg-body-black-solid-constant";
-        readonly pinkLight: "bg-body-black-solid-constant";
-    };
-};
+export declare type BadgeVariant = "default" | "dark" | "success" | "warning" | "error" | "special" | "info" | "online" | "brand" | "pink" | "brandLight" | "pinkLight";
 
 export declare const Button: React_2.ForwardRefExoticComponent<ButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
 
@@ -151,6 +121,11 @@ export declare type ButtonSize = "48" | "40" | "32" | "24";
 
 export declare type ButtonVariant = "primary" | "secondary" | "tertiary" | "link" | "brand" | "destructive" | "white" | "tertiaryDestructive" | "text";
 
+/**
+ * The ref type is intentionally `HTMLInputElement` (not `HTMLButtonElement`) for form library
+ * compatibility. Libraries like react-hook-form call `register()` which expects an `HTMLInputElement`
+ * ref. A hidden `<input>` is synced to the Radix checkbox state via `useImperativeHandle`.
+ */
 export declare const Checkbox: React_2.ForwardRefExoticComponent<CheckboxProps & React_2.RefAttributes<HTMLInputElement>>;
 
 export declare interface CheckboxProps extends Omit<React_2.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, "asChild"> {
@@ -210,6 +185,10 @@ export declare type ChipSize = "32" | "40";
 
 export declare type ChipVariant = "rounded" | "square" | "dark";
 
+export declare const CloseIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
+    className?: string;
+} & React_2.RefAttributes<SVGSVGElement>>;
+
 export declare function cn(...inputs: ClassValue[]): string;
 
 export declare const Count: React_2.ForwardRefExoticComponent<CountProps & React_2.RefAttributes<HTMLSpanElement>>;
@@ -225,7 +204,7 @@ export declare interface CountProps extends React_2.HTMLAttributes<HTMLSpanEleme
     asChild?: boolean;
 }
 
-export declare type CountVariant = "Default" | "Brand" | "Pink" | "Info" | "Success" | "Warning";
+export declare type CountVariant = "default" | "brand" | "pink" | "info" | "success" | "warning";
 
 export declare const CrossIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
@@ -271,6 +250,10 @@ export declare const ErrorCircleIcon: React_2.ForwardRefExoticComponent<React_2.
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+export declare const ErrorIcon: default_2.ForwardRefExoticComponent<default_2.SVGAttributes<SVGSVGElement> & {
+    className?: string;
+} & default_2.RefAttributes<SVGSVGElement>>;
+
 export declare const FireIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
@@ -281,7 +264,7 @@ export declare const HomeIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttr
 
 export declare const IconButton: React_2.ForwardRefExoticComponent<IconButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
 
-export declare interface IconButtonProps extends Omit<React_2.ButtonHTMLAttributes<HTMLButtonElement>, "style"> {
+export declare interface IconButtonProps extends React_2.ButtonHTMLAttributes<HTMLButtonElement> {
     /** Visual style variant of the icon button */
     variant?: IconButtonVariant;
     /** Size of the button */
@@ -305,9 +288,13 @@ export declare const InfoCircleIcon: React_2.ForwardRefExoticComponent<React_2.S
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+export declare const InfoIcon: default_2.ForwardRefExoticComponent<default_2.SVGAttributes<SVGSVGElement> & {
+    className?: string;
+} & default_2.RefAttributes<SVGSVGElement>>;
+
 export declare const Logo: React_2.ForwardRefExoticComponent<LogoProps & React_2.RefAttributes<HTMLDivElement>>;
 
-export declare type LogoColor = "Full colour" | "Decolour" | "White Always" | "Black Always";
+export declare type LogoColor = "fullColour" | "decolour" | "whiteAlways" | "blackAlways";
 
 export declare interface LogoProps extends React_2.HTMLAttributes<HTMLDivElement> {
     /** Logo layout type (matches Figma "Type" property) */
@@ -322,7 +309,11 @@ export declare interface LogoProps extends React_2.HTMLAttributes<HTMLDivElement
     "aria-label"?: string;
 }
 
-export declare type LogoType = "Full" | "Icon" | "Wordmark" | "Portrait";
+export declare type LogoType = "full" | "icon" | "wordmark" | "portrait";
+
+export declare const MicrophoneIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
+    className?: string;
+} & React_2.RefAttributes<SVGSVGElement>>;
 
 /** Small minus/indeterminate icon for use in checkbox components (12x12 viewBox) */
 export declare const MinusIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
@@ -380,22 +371,7 @@ export declare interface PillProps extends React_2.HTMLAttributes<HTMLSpanElemen
     asChild?: boolean;
 }
 
-export declare type PillVariant = keyof typeof pillVariants.variant;
-
-declare const pillVariants: {
-    readonly variant: {
-        readonly green: "bg-success-50 text-success-500";
-        readonly grey: "bg-neutral-100 text-body-200";
-        readonly blue: "bg-info-50 text-info-500";
-        readonly gold: "bg-warning-50 text-warning-500";
-        readonly pinkLight: "bg-brand-pink-50 text-body-100";
-        readonly base: "bg-neutral-400 text-body-300";
-        readonly brand: "bg-brand-green-500 text-body-black-solid-constant";
-        readonly brandLight: "bg-brand-green-50 text-body-black-solid-constant";
-        readonly beta: "bg-brand-pink-500 text-body-black-solid-constant";
-        readonly error: "bg-error-500 text-error-50";
-    };
-};
+export declare type PillVariant = "green" | "grey" | "blue" | "gold" | "pinkLight" | "base" | "brand" | "brandLight" | "beta" | "error";
 
 export declare const PlusIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
@@ -501,6 +477,14 @@ export declare const SpinnerIcon: React_2.ForwardRefExoticComponent<React_2.SVGA
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+export declare const StopIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
+    className?: string;
+} & React_2.RefAttributes<SVGSVGElement>>;
+
+export declare const SuccessIcon: default_2.ForwardRefExoticComponent<default_2.SVGAttributes<SVGSVGElement> & {
+    className?: string;
+} & default_2.RefAttributes<SVGSVGElement>>;
+
 export declare const Switch: React_2.ForwardRefExoticComponent<SwitchProps & React_2.RefAttributes<HTMLButtonElement>>;
 
 export declare const SwitchField: React_2.ForwardRefExoticComponent<SwitchFieldProps & React_2.RefAttributes<HTMLButtonElement>>;
@@ -599,15 +583,7 @@ export declare const ToastProvider: React_2.FC<ToastProviderProps>;
 export declare interface ToastProviderProps extends ToastPrimitive.ToastProviderProps {
 }
 
-export declare type ToastVariant = keyof typeof toastVariants;
-
-declare enum toastVariants {
-    info = "info",
-    warning = "warning",
-    success = "success",
-    error = "error",
-    messageToast = "messageToast"
-}
+export declare type ToastVariant = "info" | "warning" | "success" | "error" | "messageToast";
 
 export declare const ToastViewport: React_2.ForwardRefExoticComponent<ToastViewportProps & React_2.RefAttributes<HTMLOListElement>>;
 
@@ -619,6 +595,10 @@ export declare const VipBadgeIcon: React_2.ForwardRefExoticComponent<React_2.SVG
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;
 
+export declare const WarningIcon: default_2.ForwardRefExoticComponent<default_2.SVGAttributes<SVGSVGElement> & {
+    className?: string;
+} & default_2.RefAttributes<SVGSVGElement>>;
+
 export declare const WarningTriangleIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
     className?: string;
 } & React_2.RefAttributes<SVGSVGElement>>;