@fanvue/ui 0.1.0-alpha.2 → 1.0.0

package/dist/components/Snackbar/Snackbar.mjs

@@ -0,0 +1,198 @@
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+import { Button } from "../Button/Button.mjs";
+import { CrossIcon } from "../Icons/CrossIcon.mjs";
+function CloseButton({ onClose, className }) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "tertiary",
+      size: "24",
+      onClick: onClose,
+      className: cn("h-auto shrink-0", className),
+      "aria-label": "Close snackbar",
+      children: /* @__PURE__ */ jsx(CrossIcon, {})
+    }
+  );
+}
+function resolveCtaSlot(slot, label, onClick, buttonProps) {
+  if (slot) return slot;
+  if (label) {
+    return /* @__PURE__ */ jsx(Button, { onClick, ...buttonProps, children: label });
+  }
+  return null;
+}
+function VipEarnContent({
+  icon,
+  title,
+  description,
+  showActions,
+  primarySlot,
+  primaryLabel,
+  primaryOnClick
+}) {
+  const primary = resolveCtaSlot(primarySlot, primaryLabel, primaryOnClick, {
+    variant: "text",
+    size: "24"
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon && /* @__PURE__ */ jsx("span", { className: "flex shrink-0", "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+        title && /* @__PURE__ */ jsx("p", { className: "typography-body-1-semibold text-body-100 leading-6", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "typography-body-2-regular text-body-200", children: description })
+      ] }),
+      showActions && primary && /* @__PURE__ */ jsx("div", { className: "self-start", children: primary })
+    ] })
+  ] });
+}
+function WelcomeContent({
+  title,
+  description,
+  showActions,
+  primarySlot,
+  primaryLabel,
+  primaryOnClick,
+  secondarySlot,
+  secondaryLabel,
+  secondaryOnClick
+}) {
+  const primary = resolveCtaSlot(primarySlot, primaryLabel, primaryOnClick, {
+    variant: "primary"
+  });
+  const secondary = resolveCtaSlot(secondarySlot, secondaryLabel, secondaryOnClick, {
+    variant: "secondary"
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 px-8 text-center text-body-100", children: [
+      title && /* @__PURE__ */ jsx("p", { className: "typography-heading-4 text-body-100", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "typography-body-2-regular text-body-200", children: description })
+    ] }),
+    showActions && (primary || secondary) && /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-4 px-8 sm:flex-row sm:*:flex-1", children: [
+      secondary,
+      primary
+    ] })
+  ] });
+}
+function DefaultContent({
+  children,
+  showActions,
+  primarySlot,
+  primaryLabel,
+  primaryOnClick,
+  secondarySlot,
+  secondaryLabel,
+  secondaryOnClick
+}) {
+  const primary = resolveCtaSlot(primarySlot, primaryLabel, primaryOnClick, {
+    variant: "primary",
+    size: "40"
+  });
+  const secondary = resolveCtaSlot(secondarySlot, secondaryLabel, secondaryOnClick, {
+    variant: "tertiary",
+    size: "40"
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "typography-body-1-medium flex min-w-0 flex-1 items-center self-stretch text-body-100", children }),
+    showActions && (primary || secondary) && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-start gap-2", children: [
+      primary,
+      secondary
+    ] })
+  ] });
+}
+const Snackbar = React.forwardRef(
+  ({
+    className,
+    variant = "default",
+    icon,
+    title,
+    description,
+    showActions = true,
+    primaryLabel,
+    primaryOnClick,
+    primarySlot,
+    secondaryLabel,
+    secondaryOnClick,
+    secondarySlot,
+    closable = false,
+    onClose,
+    children,
+    ...props
+  }, ref) => {
+    return (
+      /* biome-ignore lint/a11y/useSemanticElements: output cannot contain div children; browsers would break the wrapper. */
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          role: "status",
+          "data-testid": "snackbar",
+          className: cn(
+            "flex gap-4 rounded-2xl",
+            (variant === "default" || variant === "vipEarn") && "border border-neutral-50 bg-background-200 p-4 backdrop-blur-md",
+            variant === "default" && "flex-wrap items-start",
+            variant === "vipEarn" && "items-start",
+            variant === "welcome" && "relative flex-col items-center bg-background-inverse-solid py-6",
+            className
+          ),
+          ...props,
+          children: [
+            variant === "vipEarn" && /* @__PURE__ */ jsx(
+              VipEarnContent,
+              {
+                icon,
+                title,
+                description,
+                showActions,
+                primarySlot,
+                primaryLabel,
+                primaryOnClick
+              }
+            ),
+            variant === "welcome" && /* @__PURE__ */ jsx(
+              WelcomeContent,
+              {
+                title,
+                description,
+                showActions,
+                primarySlot,
+                primaryLabel,
+                primaryOnClick,
+                secondarySlot,
+                secondaryLabel,
+                secondaryOnClick
+              }
+            ),
+            variant === "default" && /* @__PURE__ */ jsx(
+              DefaultContent,
+              {
+                showActions,
+                primarySlot,
+                primaryLabel,
+                primaryOnClick,
+                secondarySlot,
+                secondaryLabel,
+                secondaryOnClick,
+                children
+              }
+            ),
+            closable && /* @__PURE__ */ jsx(
+              CloseButton,
+              {
+                onClose,
+                className: variant === "welcome" ? "absolute top-2 right-2" : void 0
+              }
+            )
+          ]
+        }
+      )
+    );
+  }
+);
+Snackbar.displayName = "Snackbar";
+export {
+  Snackbar
+};
+//# sourceMappingURL=Snackbar.mjs.map

package/dist/components/Snackbar/Snackbar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Snackbar.mjs","sources":["../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button/Button\";\nimport { CrossIcon } from \"../Icons/CrossIcon\";\n\nexport type SnackbarVariant = \"default\" | \"vipEarn\" | \"welcome\";\n\nexport interface SnackbarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Snackbar layout variant */\n  variant?: SnackbarVariant;\n  /** Left icon element */\n  icon?: React.ReactNode;\n  /** Title text */\n  title?: React.ReactNode;\n  /** Description text */\n  description?: React.ReactNode;\n  /** Whether to show the actions section */\n  showActions?: boolean;\n  /** Primary CTA label (renders a default Button) */\n  primaryLabel?: string;\n  /** Primary CTA click handler (used with primaryLabel) */\n  primaryOnClick?: () => void;\n  /** Custom element to render as primary CTA (overrides primaryLabel/primaryOnClick) */\n  primarySlot?: React.ReactNode;\n  /** Secondary CTA label (renders a default Button) */\n  secondaryLabel?: string;\n  /** Secondary CTA click handler (used with secondaryLabel) */\n  secondaryOnClick?: () => void;\n  /** Custom element to render as secondary CTA (overrides secondaryLabel/secondaryOnClick) */\n  secondarySlot?: React.ReactNode;\n  /** Show close button */\n  closable?: boolean;\n  /** Close button click handler */\n  onClose?: () => void;\n}\n\nfunction CloseButton({ onClose, className }: { onClose?: () => void; className?: string }) {\n  return (\n    <Button\n      variant=\"tertiary\"\n      size=\"24\"\n      onClick={onClose}\n      className={cn(\"h-auto shrink-0\", className)}\n      aria-label=\"Close snackbar\"\n    >\n      <CrossIcon />\n    </Button>\n  );\n}\n\n/**\n * Resolves a CTA slot. If a custom slot is provided it takes precedence,\n * otherwise a default Button is rendered from label + onClick.\n */\nfunction resolveCtaSlot(\n  slot: React.ReactNode | undefined,\n  label: string | undefined,\n  onClick: (() => void) | undefined,\n  buttonProps: React.ComponentProps<typeof Button>,\n): React.ReactNode | null {\n  if (slot) return slot;\n  if (label) {\n    return (\n      <Button onClick={onClick} {...buttonProps}>\n        {label}\n      </Button>\n    );\n  }\n  return null;\n}\n\nfunction VipEarnContent({\n  icon,\n  title,\n  description,\n  showActions,\n  primarySlot,\n  primaryLabel,\n  primaryOnClick,\n}: Pick<\n  SnackbarProps,\n  | \"icon\"\n  | \"title\"\n  | \"description\"\n  | \"showActions\"\n  | \"primarySlot\"\n  | \"primaryLabel\"\n  | \"primaryOnClick\"\n>) {\n  const primary = resolveCtaSlot(primarySlot, primaryLabel, primaryOnClick, {\n    variant: \"text\",\n    size: \"24\",\n  });\n\n  return (\n    <>\n      {icon && (\n        <span className=\"flex shrink-0\" aria-hidden=\"true\">\n          {icon}\n        </span>\n      )}\n      <div className=\"flex min-w-0 flex-1 flex-col gap-4\">\n        <div className=\"flex flex-col\">\n          {title && <p className=\"typography-body-1-semibold text-body-100 leading-6\">{title}</p>}\n          {description && <p className=\"typography-body-2-regular text-body-200\">{description}</p>}\n        </div>\n        {showActions && primary && <div className=\"self-start\">{primary}</div>}\n      </div>\n    </>\n  );\n}\n\nfunction WelcomeContent({\n  title,\n  description,\n  showActions,\n  primarySlot,\n  primaryLabel,\n  primaryOnClick,\n  secondarySlot,\n  secondaryLabel,\n  secondaryOnClick,\n}: Pick<\n  SnackbarProps,\n  | \"title\"\n  | \"description\"\n  | \"showActions\"\n  | \"primarySlot\"\n  | \"primaryLabel\"\n  | \"primaryOnClick\"\n  | \"secondarySlot\"\n  | \"secondaryLabel\"\n  | \"secondaryOnClick\"\n>) {\n  const primary = resolveCtaSlot(primarySlot, primaryLabel, primaryOnClick, {\n    variant: \"primary\",\n  });\n  const secondary = resolveCtaSlot(secondarySlot, secondaryLabel, secondaryOnClick, {\n    variant: \"secondary\",\n  });\n\n  return (\n    <>\n      <div className=\"flex flex-col items-center gap-2 px-8 text-center text-body-100\">\n        {title && <p className=\"typography-heading-4 text-body-100\">{title}</p>}\n        {description && <p className=\"typography-body-2-regular text-body-200\">{description}</p>}\n      </div>\n      {showActions && (primary || secondary) && (\n        <div className=\"flex w-full flex-col gap-4 px-8 sm:flex-row sm:*:flex-1\">\n          {secondary}\n          {primary}\n        </div>\n      )}\n    </>\n  );\n}\n\nfunction DefaultContent({\n  children,\n  showActions,\n  primarySlot,\n  primaryLabel,\n  primaryOnClick,\n  secondarySlot,\n  secondaryLabel,\n  secondaryOnClick,\n}: Pick<\n  SnackbarProps,\n  | \"children\"\n  | \"showActions\"\n  | \"primarySlot\"\n  | \"primaryLabel\"\n  | \"primaryOnClick\"\n  | \"secondarySlot\"\n  | \"secondaryLabel\"\n  | \"secondaryOnClick\"\n>) {\n  const primary = resolveCtaSlot(primarySlot, primaryLabel, primaryOnClick, {\n    variant: \"primary\",\n    size: \"40\",\n  });\n  const secondary = resolveCtaSlot(secondarySlot, secondaryLabel, secondaryOnClick, {\n    variant: \"tertiary\",\n    size: \"40\",\n  });\n\n  return (\n    <>\n      <div className=\"typography-body-1-medium flex min-w-0 flex-1 items-center self-stretch text-body-100\">\n        {children}\n      </div>\n      {showActions && (primary || secondary) && (\n        <div className=\"flex shrink-0 items-start gap-2\">\n          {primary}\n          {secondary}\n        </div>\n      )}\n    </>\n  );\n}\n\nexport const Snackbar = React.forwardRef<HTMLDivElement, SnackbarProps>(\n  (\n    {\n      className,\n      variant = \"default\",\n      icon,\n      title,\n      description,\n      showActions = true,\n      primaryLabel,\n      primaryOnClick,\n      primarySlot,\n      secondaryLabel,\n      secondaryOnClick,\n      secondarySlot,\n      closable = false,\n      onClose,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      /* biome-ignore lint/a11y/useSemanticElements: output cannot contain div children; browsers would break the wrapper. */\n      <div\n        ref={ref}\n        role=\"status\"\n        data-testid=\"snackbar\"\n        className={cn(\n          \"flex gap-4 rounded-2xl\",\n          (variant === \"default\" || variant === \"vipEarn\") &&\n            \"border border-neutral-50 bg-background-200 p-4 backdrop-blur-md\",\n          variant === \"default\" && \"flex-wrap items-start\",\n          variant === \"vipEarn\" && \"items-start\",\n          variant === \"welcome\" &&\n            \"relative flex-col items-center bg-background-inverse-solid py-6\",\n          className,\n        )}\n        {...props}\n      >\n        {variant === \"vipEarn\" && (\n          <VipEarnContent\n            icon={icon}\n            title={title}\n            description={description}\n            showActions={showActions}\n            primarySlot={primarySlot}\n            primaryLabel={primaryLabel}\n            primaryOnClick={primaryOnClick}\n          />\n        )}\n        {variant === \"welcome\" && (\n          <WelcomeContent\n            title={title}\n            description={description}\n            showActions={showActions}\n            primarySlot={primarySlot}\n            primaryLabel={primaryLabel}\n            primaryOnClick={primaryOnClick}\n            secondarySlot={secondarySlot}\n            secondaryLabel={secondaryLabel}\n            secondaryOnClick={secondaryOnClick}\n          />\n        )}\n        {variant === \"default\" && (\n          <DefaultContent\n            showActions={showActions}\n            primarySlot={primarySlot}\n            primaryLabel={primaryLabel}\n            primaryOnClick={primaryOnClick}\n            secondarySlot={secondarySlot}\n            secondaryLabel={secondaryLabel}\n            secondaryOnClick={secondaryOnClick}\n          >\n            {children}\n          </DefaultContent>\n        )}\n        {closable && (\n          <CloseButton\n            onClose={onClose}\n            className={variant === \"welcome\" ? \"absolute top-2 right-2\" : undefined}\n          />\n        )}\n      </div>\n    );\n  },\n);\n\nSnackbar.displayName = \"Snackbar\";\n"],"names":[],"mappings":"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"}

package/dist/components/Switch/Switch.mjs

@@ -0,0 +1,39 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const Switch = React.forwardRef(({ className, size = "default", ...props }, ref) => {
+  const thumbSizeClass = size === "default" ? "size-4.5 translate-x-0.75 data-[state=checked]:translate-x-4.75" : "size-4 translate-x-0.5 data-[state=checked]:translate-x-4.25";
+  return /* @__PURE__ */ jsx(
+    SwitchPrimitive.Root,
+    {
+      ref,
+      className: cn(
+        "inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent transition-colors duration-150",
+        "focus-visible:shadow-focus-ring focus-visible:outline-none",
+        "data-[state=checked]:border-neutral-200 data-[state=checked]:bg-brand-green-500",
+        "data-[state=unchecked]:bg-neutral-400",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        size === "default" && "h-6 w-10.5",
+        size === "small" && "h-5 w-9",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        SwitchPrimitive.Thumb,
+        {
+          className: cn(
+            "pointer-events-none rounded-full bg-body-white-solid-constant shadow-sm transition-transform duration-150 dark:bg-body-black-solid-constant",
+            thumbSizeClass
+          )
+        }
+      )
+    }
+  );
+});
+Switch.displayName = "Switch";
+export {
+  Switch
+};
+//# sourceMappingURL=Switch.mjs.map

package/dist/components/Switch/Switch.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.mjs","sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as SwitchPrimitive from \"@radix-ui/react-switch\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport type SwitchSize = \"default\" | \"small\";\n\nexport interface SwitchProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>, \"asChild\"> {\n  /** Size variant of the switch */\n  size?: SwitchSize;\n}\n\nexport const Switch = React.forwardRef<\n  React.ComponentRef<typeof SwitchPrimitive.Root>,\n  SwitchProps\n>(({ className, size = \"default\", ...props }, ref) => {\n  const thumbSizeClass =\n    size === \"default\"\n      ? \"size-4.5 translate-x-0.75 data-[state=checked]:translate-x-4.75\"\n      : \"size-4 translate-x-0.5 data-[state=checked]:translate-x-4.25\";\n\n  return (\n    <SwitchPrimitive.Root\n      ref={ref}\n      className={cn(\n        \"inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent transition-colors duration-150\",\n        \"focus-visible:shadow-focus-ring focus-visible:outline-none\",\n        \"data-[state=checked]:border-neutral-200 data-[state=checked]:bg-brand-green-500\",\n        \"data-[state=unchecked]:bg-neutral-400\",\n        \"disabled:cursor-not-allowed disabled:opacity-50\",\n        size === \"default\" && \"h-6 w-10.5\",\n        size === \"small\" && \"h-5 w-9\",\n        className,\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        className={cn(\n          \"pointer-events-none rounded-full bg-body-white-solid-constant shadow-sm transition-transform duration-150 dark:bg-body-black-solid-constant\",\n          thumbSizeClass,\n        )}\n      />\n    </SwitchPrimitive.Root>\n  );\n});\n\nSwitch.displayName = \"Switch\";\n"],"names":[],"mappings":";;;;;AAYO,MAAM,SAAS,MAAM,WAG1B,CAAC,EAAE,WAAW,OAAO,WAAW,GAAG,MAAA,GAAS,QAAQ;AACpD,QAAM,iBACJ,SAAS,YACL,oEACA;AAEN,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,SAAS,aAAa;AAAA,QACtB,SAAS,WAAW;AAAA,QACpB;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC,gBAAgB;AAAA,QAAhB;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN,CAAC;AAED,OAAO,cAAc;"}

package/dist/components/SwitchField/SwitchField.mjs

@@ -0,0 +1,86 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+import { InfoCircleIcon } from "../Icons/InfoCircleIcon.mjs";
+import { Switch } from "../Switch/Switch.mjs";
+const SwitchField = React.forwardRef(
+  ({
+    className,
+    orientation = "right",
+    size = "default",
+    label,
+    helperText,
+    infoText,
+    disabled,
+    id: propId,
+    ...props
+  }, ref) => {
+    const generatedId = React.useId();
+    const id = propId ?? generatedId;
+    const helperTextId = helperText ? `${id}-helper` : void 0;
+    const switchElement = /* @__PURE__ */ jsx(
+      Switch,
+      {
+        ref,
+        id,
+        size,
+        disabled,
+        "aria-describedby": helperTextId,
+        ...props
+      }
+    );
+    const labelContent = (label || helperText) && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex min-w-0 flex-1 flex-col items-start",
+          size === "default" ? "gap-1" : "gap-0.5"
+        ),
+        children: [
+          label && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx(
+              "label",
+              {
+                htmlFor: id,
+                className: cn(
+                  "cursor-pointer select-none text-body-100",
+                  disabled && "cursor-not-allowed text-disabled-100",
+                  size === "default" ? "typography-body-1-semibold" : "typography-body-2-semibold"
+                ),
+                children: label
+              }
+            ),
+            infoText && /* @__PURE__ */ jsxs("span", { className: "group relative flex shrink-0 pt-0.5", children: [
+              /* @__PURE__ */ jsx(InfoCircleIcon, { className: "size-5 text-body-200" }),
+              /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute top-full left-1/2 mt-1 -translate-x-1/2 rounded-lg bg-neutral-400 px-3 py-1.5 text-body-white-solid-constant text-xs leading-none opacity-0 transition-opacity group-hover:opacity-100", children: infoText })
+            ] })
+          ] }),
+          helperText && /* @__PURE__ */ jsx(
+            "span",
+            {
+              id: helperTextId,
+              className: cn(
+                "text-body-200",
+                // !TODO https://linear.app/fanvue/issue/ENG-7301/swap-out-typography-tailwind-utility-classes
+                disabled && "text-disabled-100",
+                size === "default" ? "typography-body-2-regular" : "typography-caption-regular"
+              ),
+              children: helperText
+            }
+          )
+        ]
+      }
+    );
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex items-start gap-2", disabled && "cursor-not-allowed", className), children: [
+      orientation === "left" && switchElement,
+      labelContent,
+      orientation === "right" && switchElement
+    ] });
+  }
+);
+SwitchField.displayName = "SwitchField";
+export {
+  SwitchField
+};
+//# sourceMappingURL=SwitchField.mjs.map

package/dist/components/SwitchField/SwitchField.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchField.mjs","sources":["../../../src/components/SwitchField/SwitchField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { InfoCircleIcon } from \"../Icons/InfoCircleIcon\";\nimport { Switch, type SwitchSize } from \"../Switch/Switch\";\n\nexport type SwitchFieldOrientation = \"right\" | \"left\";\n\nexport interface SwitchFieldProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof Switch>, \"size\" | \"className\"> {\n  /** Position of the switch relative to the label */\n  orientation?: SwitchFieldOrientation;\n  /** Size variant of the switch and text */\n  size?: SwitchSize;\n  /** Label text displayed next to the switch */\n  label?: string;\n  /** Helper text displayed below the label */\n  helperText?: string;\n  /** Info tooltip text displayed on hover of the info icon */\n  infoText?: string;\n  /** Additional className for the wrapper */\n  className?: string;\n}\n\nexport const SwitchField = React.forwardRef<React.ComponentRef<typeof Switch>, SwitchFieldProps>(\n  (\n    {\n      className,\n      orientation = \"right\",\n      size = \"default\",\n      label,\n      helperText,\n      infoText,\n      disabled,\n      id: propId,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const id = propId ?? generatedId;\n    const helperTextId = helperText ? `${id}-helper` : undefined;\n\n    const switchElement = (\n      <Switch\n        ref={ref}\n        id={id}\n        size={size}\n        disabled={disabled}\n        aria-describedby={helperTextId}\n        {...props}\n      />\n    );\n\n    const labelContent = (label || helperText) && (\n      <div\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start\",\n          size === \"default\" ? \"gap-1\" : \"gap-0.5\",\n        )}\n      >\n        {label && (\n          <div className=\"flex items-center gap-1\">\n            <label\n              htmlFor={id}\n              className={cn(\n                \"cursor-pointer select-none text-body-100\",\n                disabled && \"cursor-not-allowed text-disabled-100\",\n                size === \"default\" ? \"typography-body-1-semibold\" : \"typography-body-2-semibold\",\n              )}\n            >\n              {label}\n            </label>\n            {infoText && (\n              <span className=\"group relative flex shrink-0 pt-0.5\">\n                <InfoCircleIcon className=\"size-5 text-body-200\" />\n                <span className=\"pointer-events-none absolute top-full left-1/2 mt-1 -translate-x-1/2 rounded-lg bg-neutral-400 px-3 py-1.5 text-body-white-solid-constant text-xs leading-none opacity-0 transition-opacity group-hover:opacity-100\">\n                  {/*!TODO Replace with Tooltip once built\n                  https://linear.app/fanvue/issue/ENG-7226/component-library-tooltip-component */}\n                  {infoText}\n                </span>\n              </span>\n            )}\n          </div>\n        )}\n        {helperText && (\n          <span\n            id={helperTextId}\n            className={cn(\n              \"text-body-200\", // !TODO https://linear.app/fanvue/issue/ENG-7301/swap-out-typography-tailwind-utility-classes\n              disabled && \"text-disabled-100\",\n              size === \"default\" ? \"typography-body-2-regular\" : \"typography-caption-regular\",\n            )}\n          >\n            {helperText}\n          </span>\n        )}\n      </div>\n    );\n\n    return (\n      <div className={cn(\"flex items-start gap-2\", disabled && \"cursor-not-allowed\", className)}>\n        {orientation === \"left\" && switchElement}\n        {labelContent}\n        {orientation === \"right\" && switchElement}\n      </div>\n    );\n  },\n);\n\nSwitchField.displayName = \"SwitchField\";\n"],"names":[],"mappings":";;;;;;AAuBO,MAAM,cAAc,MAAM;AAAA,EAC/B,CACE;AAAA,IACE;AAAA,IACA,cAAc;AAAA,IACd,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,IAAI;AAAA,IACJ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,cAAc,MAAM,MAAA;AAC1B,UAAM,KAAK,UAAU;AACrB,UAAM,eAAe,aAAa,GAAG,EAAE,YAAY;AAEnD,UAAM,gBACJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,oBAAkB;AAAA,QACjB,GAAG;AAAA,MAAA;AAAA,IAAA;AAIR,UAAM,gBAAgB,SAAS,eAC7B;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,SAAS,YAAY,UAAU;AAAA,QAAA;AAAA,QAGhC,UAAA;AAAA,UAAA,SACC,qBAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAAS;AAAA,gBACT,WAAW;AAAA,kBACT;AAAA,kBACA,YAAY;AAAA,kBACZ,SAAS,YAAY,+BAA+B;AAAA,gBAAA;AAAA,gBAGrD,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,YAEF,YACC,qBAAC,QAAA,EAAK,WAAU,uCACd,UAAA;AAAA,cAAA,oBAAC,gBAAA,EAAe,WAAU,uBAAA,CAAuB;AAAA,cACjD,oBAAC,QAAA,EAAK,WAAU,uNAGb,UAAA,SAAA,CACH;AAAA,YAAA,EAAA,CACF;AAAA,UAAA,GAEJ;AAAA,UAED,cACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cACJ,WAAW;AAAA,gBACT;AAAA;AAAA,gBACA,YAAY;AAAA,gBACZ,SAAS,YAAY,8BAA8B;AAAA,cAAA;AAAA,cAGpD,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAKN,WACE,qBAAC,SAAI,WAAW,GAAG,0BAA0B,YAAY,sBAAsB,SAAS,GACrF,UAAA;AAAA,MAAA,gBAAgB,UAAU;AAAA,MAC1B;AAAA,MACA,gBAAgB,WAAW;AAAA,IAAA,GAC9B;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;"}

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;"}