@signalflare-ai/ui 0.5.0

package/dist/primitives/toggle-group.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "@base-ui/react/toggle-group";

package/dist/primitives/toggle.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "@base-ui/react/toggle";

package/dist/primitives/toolbar.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "@base-ui/react/toolbar";

package/dist/primitives/tooltip.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "@base-ui/react/tooltip";

package/dist/primitives.js

@@ -0,0 +1,40 @@
+"use client";
+export * from "@base-ui/react/tooltip";
+export * from "@base-ui/react/checkbox";
+export * from "@base-ui/react/checkbox-group";
+export * from "@base-ui/react/field";
+export * from "@base-ui/react/fieldset";
+export * from "@base-ui/react/toast";
+export * from "@base-ui/react/input";
+export * from "@base-ui/react/combobox";
+export * from "@base-ui/react/dialog";
+export * from "@base-ui/react/menu";
+export * from "@base-ui/react/meter";
+export * from "@base-ui/react/select";
+export * from "@base-ui/react/switch";
+export * from "@base-ui/react/tabs";
+export * from "@base-ui/react/popover";
+export * from "@base-ui/react/radio";
+export * from "@base-ui/react/radio-group";
+export * from "@base-ui/react/autocomplete";
+export * from "@base-ui/react/collapsible";
+export * from "@base-ui/react/accordion";
+export * from "@base-ui/react/alert-dialog";
+export * from "@base-ui/react/avatar";
+export * from "@base-ui/react/button";
+export * from "@base-ui/react/context-menu";
+export * from "@base-ui/react/csp-provider";
+export * from "@base-ui/react/direction-provider";
+export * from "@base-ui/react/drawer";
+export * from "@base-ui/react/form";
+export * from "@base-ui/react/menubar";
+export * from "@base-ui/react/navigation-menu";
+export * from "@base-ui/react/number-field";
+export * from "@base-ui/react/preview-card";
+export * from "@base-ui/react/progress";
+export * from "@base-ui/react/scroll-area";
+export * from "@base-ui/react/separator";
+export * from "@base-ui/react/slider";
+export * from "@base-ui/react/toggle-group";
+export * from "@base-ui/react/toggle";
+export * from "@base-ui/react/toolbar";

package/dist/radio-B7zg1wUI.js

@@ -0,0 +1,101 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { createContext, forwardRef, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fieldset } from "@base-ui/react/fieldset";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+//#region src/components/radio/radio.tsx
+/** Radio variant definitions mapping variant names to their Tailwind classes. */
+var SF_RADIO_VARIANTS = { variant: {
+	default: {
+		classes: "ring-sf-line",
+		description: "Default radio appearance"
+	},
+	error: {
+		classes: "ring-destructive",
+		description: "Error state for validation failures"
+	}
+} };
+var SF_RADIO_DEFAULT_VARIANTS = { variant: "default" };
+function radioVariants({ variant = SF_RADIO_DEFAULT_VARIANTS.variant } = {}) {
+	return cn(SF_RADIO_VARIANTS.variant[variant].classes);
+}
+var RadioGroupContext = createContext({ controlPosition: "start" });
+var RadioItem = forwardRef(({ className, disabled, variant = "default", label, value }, ref) => {
+	const { controlPosition } = useContext(RadioGroupContext);
+	return /* @__PURE__ */ jsxs("label", {
+		className: cn("group relative inline-flex items-center gap-2", controlPosition === "end" && "flex-row-reverse justify-end", disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer", className),
+		children: [/* @__PURE__ */ jsx(Radio.Root, {
+			ref,
+			value,
+			disabled,
+			className: cn("flex h-4 w-4 items-center justify-center rounded-full border-0 bg-sf-base ring", variant === "error" ? "ring-sf-danger" : "ring-sf-line", !disabled && "group-hover:ring-sf-ring focus-visible:ring-sf-ring focus-visible:outline-offset-3", "data-checked:bg-sf-contrast"),
+			children: /* @__PURE__ */ jsx(Radio.Indicator, {
+				className: "flex items-center justify-center",
+				children: /* @__PURE__ */ jsx("span", { className: "h-2 w-2 rounded-full bg-sf-base" })
+			})
+		}), /* @__PURE__ */ jsx("span", {
+			className: "text-base font-medium text-sf-default",
+			children: label
+		})]
+	});
+});
+RadioItem.displayName = "Radio.Item";
+function RadioGroup$1({ legend, children, orientation = "vertical", error, description, defaultValue, value, onValueChange, disabled, controlPosition = "start", name, className }) {
+	return /* @__PURE__ */ jsx(RadioGroupContext.Provider, {
+		value: { controlPosition },
+		children: /* @__PURE__ */ jsx(RadioGroup, {
+			defaultValue,
+			value,
+			onValueChange: (newValue) => onValueChange?.(newValue),
+			disabled,
+			name,
+			children: /* @__PURE__ */ jsxs(Fieldset.Root, {
+				className: cn("flex flex-col gap-4 rounded-lg border border-sf-line p-4", className),
+				children: [
+					/* @__PURE__ */ jsx(Fieldset.Legend, {
+						className: "text-lg font-medium text-sf-default",
+						children: legend
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: cn("flex gap-2", orientation === "vertical" ? "flex-col" : "flex-row flex-wrap"),
+						children
+					}),
+					error && /* @__PURE__ */ jsx("p", {
+						className: "text-sm text-sf-danger",
+						children: error
+					}),
+					description && /* @__PURE__ */ jsx("p", {
+						className: "text-sm text-sf-subtle",
+						children: description
+					})
+				]
+			})
+		})
+	});
+}
+RadioGroup$1.displayName = "Radio.Group";
+/**
+* Radio — radio button group for single-select choices.
+*
+* Compound component: `Radio.Group` (with built-in Fieldset) and `Radio.Item`.
+* Built on `@base-ui/react/radio-group` + `@base-ui/react/radio`.
+*
+* @example
+* ```tsx
+* <Radio.Group legend="Notification preference" defaultValue="email">
+*   <Radio.Item label="Email" value="email" />
+*   <Radio.Item label="SMS" value="sms" />
+*   <Radio.Item label="Push" value="push" />
+* </Radio.Group>
+* ```
+*/
+var Radio$1 = {
+	Item: RadioItem,
+	Group: RadioGroup$1
+};
+//#endregion
+export { radioVariants as a, SF_RADIO_VARIANTS as i, RadioGroup$1 as n, SF_RADIO_DEFAULT_VARIANTS as r, Radio$1 as t };
+
+//# sourceMappingURL=radio-B7zg1wUI.js.map

package/dist/radio-B7zg1wUI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-B7zg1wUI.js","names":[],"sources":["../src/components/radio/radio.tsx"],"sourcesContent":["import { Fieldset } from \"@base-ui/react/fieldset\";\nimport { Radio as BaseRadio } from \"@base-ui/react/radio\";\nimport { RadioGroup as BaseRadioGroup } from \"@base-ui/react/radio-group\";\nimport { forwardRef, createContext, useContext, type ReactNode } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\n\n/** Radio variant definitions mapping variant names to their Tailwind classes. */\nexport const SF_RADIO_VARIANTS = {\n  variant: {\n    default: {\n      classes: \"ring-sf-line\",\n      description: \"Default radio appearance\",\n    },\n    error: {\n      classes: \"ring-destructive\",\n      description: \"Error state for validation failures\",\n    },\n  },\n} as const;\n\nexport const SF_RADIO_DEFAULT_VARIANTS = {\n  variant: \"default\",\n} as const;\n\n// Derived types from SF_RADIO_VARIANTS\nexport type SFRadioVariant = keyof typeof SF_RADIO_VARIANTS.variant;\n\nexport interface SFRadioVariantsProps {\n  /**\n   * Visual variant.\n   * - `\"default\"` — Standard radio appearance\n   * - `\"error\"` — Error state for validation failures\n   * @default \"default\"\n   */\n  variant?: SFRadioVariant;\n}\n\nexport function radioVariants({\n  variant = SF_RADIO_DEFAULT_VARIANTS.variant,\n}: SFRadioVariantsProps = {}) {\n  return cn(SF_RADIO_VARIANTS.variant[variant].classes);\n}\n\n// Legacy type alias for backwards compatibility\nexport type RadioVariant = SFRadioVariant;\n\n/** Position of the radio control relative to its label */\nexport type RadioControlPosition = \"start\" | \"end\";\n\n// Context for passing controlPosition from Group to Items\nconst RadioGroupContext = createContext<{\n  controlPosition: RadioControlPosition;\n}>({\n  controlPosition: \"start\",\n});\n\n/**\n * Radio group component props (with built-in Fieldset and RadioGroup)\n *\n * @example\n * // Basic usage\n * ```tsx\n * <Radio.Group legend=\"Notification preference\" defaultValue=\"email\">\n *   <Radio.Item label=\"Email\" value=\"email\" />\n *   <Radio.Item label=\"SMS\" value=\"sms\" />\n *   <Radio.Item label=\"Push\" value=\"push\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // Horizontal layout\n * ```tsx\n * <Radio.Group legend=\"Size\" orientation=\"horizontal\" defaultValue=\"md\">\n *   <Radio.Item label=\"Small\" value=\"sm\" />\n *   <Radio.Item label=\"Medium\" value=\"md\" />\n *   <Radio.Item label=\"Large\" value=\"lg\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // With error and description\n * ```tsx\n * <Radio.Group\n *   legend=\"Payment method\"\n *   error=\"Please select a payment method\"\n *   description=\"Choose how you'd like to pay\"\n * >\n *   <Radio.Item label=\"Credit Card\" value=\"card\" />\n *   <Radio.Item label=\"PayPal\" value=\"paypal\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // Controlled\n * ```tsx\n * const [value, setValue] = useState(\"email\");\n * <Radio.Group legend=\"Contact\" value={value} onValueChange={setValue}>\n *   <Radio.Item label=\"Email\" value=\"email\" />\n *   <Radio.Item label=\"Phone\" value=\"phone\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // Label before radio (controlPosition=\"end\")\n * ```tsx\n * <Radio.Group legend=\"Options\" controlPosition=\"end\" defaultValue=\"a\">\n *   <Radio.Item label=\"Option A\" value=\"a\" />\n *   <Radio.Item label=\"Option B\" value=\"b\" />\n * </Radio.Group>\n * ```\n */\nexport interface RadioGroupProps {\n  /** Legend text for the group (required for accessibility) */\n  legend: string;\n  /** Child Radio.Item components */\n  children: ReactNode;\n  /** Layout direction of the radio items */\n  orientation?: \"vertical\" | \"horizontal\";\n  /** Error message for the group */\n  error?: string;\n  /** Helper text for the group */\n  description?: ReactNode;\n  /** Value of the radio that should be initially selected (uncontrolled) */\n  defaultValue?: string;\n  /** Value of the radio that should be selected (controlled) */\n  value?: string;\n  /** Event handler called when radio value changes */\n  onValueChange?: (value: string) => void;\n  /** Whether all radios in the group are disabled */\n  disabled?: boolean;\n  /** Position of radio control relative to label: \"start\" (default) puts radio before label, \"end\" puts label before radio */\n  controlPosition?: RadioControlPosition;\n  /** Form submission name for the radio group */\n  name?: string;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Individual radio item within a group\n *\n * @example\n * ```tsx\n * <Radio.Item label=\"Option A\" value=\"a\" />\n * ```\n *\n * @example\n * // Disabled item\n * ```tsx\n * <Radio.Item label=\"Unavailable\" value=\"unavailable\" disabled />\n * ```\n */\nexport type RadioItemProps = {\n  /** Visual variant: \"default\" or \"error\" for validation failures */\n  variant?: RadioVariant;\n  /** Label text displayed next to radio (required) */\n  label: string;\n  /** Value of the radio (required) */\n  value: string;\n  /** Additional CSS classes for the label wrapper */\n  className?: string;\n  /** Whether the radio is disabled */\n  disabled?: boolean;\n};\n\n// Radio.Item for use within Radio.Group\nconst RadioItem = forwardRef<HTMLButtonElement, RadioItemProps>(\n  ({ className, disabled, variant = \"default\", label, value }, ref) => {\n    const { controlPosition } = useContext(RadioGroupContext);\n\n    return (\n      <label\n        className={cn(\n          \"group relative inline-flex items-center gap-2\",\n          // \"start\" (default): radio before label\n          // \"end\": label before radio using flex-row-reverse\n          controlPosition === \"end\" && \"flex-row-reverse justify-end\",\n          disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer\",\n          className\n        )}\n      >\n        <BaseRadio.Root\n          ref={ref}\n          value={value}\n          disabled={disabled}\n          className={cn(\n            \"flex h-4 w-4 items-center justify-center rounded-full border-0 bg-sf-base ring\",\n            variant === \"error\" ? \"ring-sf-danger\" : \"ring-sf-line\",\n            !disabled &&\n              \"group-hover:ring-sf-ring focus-visible:ring-sf-ring focus-visible:outline-offset-3\",\n            \"data-checked:bg-sf-contrast\"\n          )}\n        >\n          <BaseRadio.Indicator className=\"flex items-center justify-center\">\n            <span className=\"h-2 w-2 rounded-full bg-sf-base\" />\n          </BaseRadio.Indicator>\n        </BaseRadio.Root>\n        <span className=\"text-base font-medium text-sf-default\">{label}</span>\n      </label>\n    );\n  }\n);\n\nRadioItem.displayName = \"Radio.Item\";\n\n// Radio.Group with built-in Fieldset and RadioGroup\nfunction RadioGroup({\n  legend,\n  children,\n  orientation = \"vertical\",\n  error,\n  description,\n  defaultValue,\n  value,\n  onValueChange,\n  disabled,\n  controlPosition = \"start\",\n  name,\n  className,\n}: RadioGroupProps) {\n  return (\n    <RadioGroupContext.Provider value={{ controlPosition }}>\n      <BaseRadioGroup\n        defaultValue={defaultValue}\n        value={value}\n        onValueChange={(newValue) => onValueChange?.(newValue as string)}\n        disabled={disabled}\n        name={name}\n      >\n        <Fieldset.Root\n          className={cn(\n            \"flex flex-col gap-4 rounded-lg border border-sf-line p-4\",\n            className\n          )}\n        >\n          <Fieldset.Legend className=\"text-lg font-medium text-sf-default\">\n            {legend}\n          </Fieldset.Legend>\n          <div\n            className={cn(\n              \"flex gap-2\",\n              orientation === \"vertical\" ? \"flex-col\" : \"flex-row flex-wrap\"\n            )}\n          >\n            {children}\n          </div>\n          {error && <p className=\"text-sm text-sf-danger\">{error}</p>}\n          {description && (\n            <p className=\"text-sm text-sf-subtle\">{description}</p>\n          )}\n        </Fieldset.Root>\n      </BaseRadioGroup>\n    </RadioGroupContext.Provider>\n  );\n}\n\nRadioGroup.displayName = \"Radio.Group\";\n\n// Export RadioGroup directly for external usage\nexport { RadioGroup };\n\n/**\n * Radio — radio button group for single-select choices.\n *\n * Compound component: `Radio.Group` (with built-in Fieldset) and `Radio.Item`.\n * Built on `@base-ui/react/radio-group` + `@base-ui/react/radio`.\n *\n * @example\n * ```tsx\n * <Radio.Group legend=\"Notification preference\" defaultValue=\"email\">\n *   <Radio.Item label=\"Email\" value=\"email\" />\n *   <Radio.Item label=\"SMS\" value=\"sms\" />\n *   <Radio.Item label=\"Push\" value=\"push\" />\n * </Radio.Group>\n * ```\n */\nexport const Radio = {\n  Item: RadioItem,\n  Group: RadioGroup,\n};\n"],"mappings":";;;;;;;;;AAQA,IAAa,oBAAoB,EAC/B,SAAS;CACP,SAAS;EACP,SAAS;EACT,aAAa;EACd;CACD,OAAO;EACL,SAAS;EACT,aAAa;EACd;CACF,EACF;AAED,IAAa,4BAA4B,EACvC,SAAS,WACV;AAeD,SAAgB,cAAc,EAC5B,UAAU,0BAA0B,YACZ,EAAE,EAAE;AAC5B,QAAO,GAAG,kBAAkB,QAAQ,SAAS,QAAQ;;AAUvD,IAAM,oBAAoB,cAEvB,EACD,iBAAiB,SAClB,CAAC;AAgHF,IAAM,YAAY,YACf,EAAE,WAAW,UAAU,UAAU,WAAW,OAAO,SAAS,QAAQ;CACnE,MAAM,EAAE,oBAAoB,WAAW,kBAAkB;AAEzD,QACE,qBAAC,SAAD;EACE,WAAW,GACT,iDAGA,oBAAoB,SAAS,gCAC7B,WAAW,kCAAkC,kBAC7C,UACD;YARH,CAUE,oBAAC,MAAU,MAAX;GACO;GACE;GACG;GACV,WAAW,GACT,kFACA,YAAY,UAAU,mBAAmB,gBACzC,CAAC,YACC,sFACF,8BACD;aAED,oBAAC,MAAU,WAAX;IAAqB,WAAU;cAC7B,oBAAC,QAAD,EAAM,WAAU,mCAAoC,CAAA;IAChC,CAAA;GACP,CAAA,EACjB,oBAAC,QAAD;GAAM,WAAU;aAAyC;GAAa,CAAA,CAChE;;EAGb;AAED,UAAU,cAAc;AAGxB,SAAS,aAAW,EAClB,QACA,UACA,cAAc,YACd,OACA,aACA,cACA,OACA,eACA,UACA,kBAAkB,SAClB,MACA,aACkB;AAClB,QACE,oBAAC,kBAAkB,UAAnB;EAA4B,OAAO,EAAE,iBAAiB;YACpD,oBAAC,YAAD;GACgB;GACP;GACP,gBAAgB,aAAa,gBAAgB,SAAmB;GACtD;GACJ;aAEN,qBAAC,SAAS,MAAV;IACE,WAAW,GACT,4DACA,UACD;cAJH;KAME,oBAAC,SAAS,QAAV;MAAiB,WAAU;gBACxB;MACe,CAAA;KAClB,oBAAC,OAAD;MACE,WAAW,GACT,cACA,gBAAgB,aAAa,aAAa,qBAC3C;MAEA;MACG,CAAA;KACL,SAAS,oBAAC,KAAD;MAAG,WAAU;gBAA0B;MAAU,CAAA;KAC1D,eACC,oBAAC,KAAD;MAAG,WAAU;gBAA0B;MAAgB,CAAA;KAE3C;;GACD,CAAA;EACU,CAAA;;AAIjC,aAAW,cAAc;;;;;;;;;;;;;;;;AAoBzB,IAAa,UAAQ;CACnB,MAAM;CACN,OAAO;CACR"}

package/dist/registry.js

@@ -0,0 +1 @@
+"use client";

package/dist/select-9p721G00.js

@@ -0,0 +1,95 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { i as buttonVariants } from "./button-De0267YU.js";
+import { t as Field } from "./field-Y_UK1_Cg.js";
+import { t as SkeletonLine } from "./skeleton-line-Do3UmGk9.js";
+import { useId } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { CaretUpDownIcon, CheckIcon } from "@phosphor-icons/react";
+import { Select } from "@base-ui/react/select";
+//#region src/components/select/select.tsx
+/**
+* Dropdown for selecting a value from a list of options.
+* Wraps Base UI Select with SF styling and optional Field integration.
+*
+* @example
+* ```tsx
+* <Select label="Fruit" onValueChange={setFruit}>
+*   <Select.Option value="apple">Apple</Select.Option>
+*   <Select.Option value="banana">Banana</Select.Option>
+* </Select>
+* ```
+*/
+function Select$1({ children, className, renderValue, label, hideLabel = true, placeholder, loading, labelTooltip, description, error, required, ...props }) {
+	const labelId = useId();
+	const propLookup = props;
+	const ariaLabel = propLookup["aria-label"];
+	const ariaLabelledby = propLookup["aria-labelledby"];
+	const fallbackLabel = typeof label === "string" ? label : placeholder;
+	const useFieldWrapper = label && !hideLabel;
+	const triggerLabelledBy = useFieldWrapper ? void 0 : ariaLabelledby ?? (label ? labelId : void 0);
+	const triggerAriaLabel = ariaLabel ?? (!triggerLabelledBy ? fallbackLabel : void 0);
+	let items = props.items;
+	if (placeholder) {
+		if (!items) items = [{
+			value: null,
+			label: placeholder
+		}];
+		else if (typeof items === "object") items = [{
+			value: null,
+			label: placeholder
+		}, ...Object.entries(items).map(([key, value]) => ({
+			value: key,
+			label: value
+		}))];
+		else if (Array.isArray(items)) items = [{
+			value: null,
+			label: placeholder
+		}, ...items];
+	}
+	const selectControl = /* @__PURE__ */ jsxs(Select.Root, {
+		...props,
+		items,
+		disabled: loading || props.disabled,
+		children: [/* @__PURE__ */ jsxs(Select.Trigger, {
+			className: cn(buttonVariants(), "justify-between font-normal", "outline-none focus:opacity-100 focus-visible:ring-1 focus-visible:ring-sf-ring *:in-focus:opacity-100", props.disabled && "cursor-not-allowed opacity-50", className),
+			"aria-label": triggerAriaLabel,
+			"aria-labelledby": triggerLabelledBy,
+			children: [loading ? /* @__PURE__ */ jsx(SkeletonLine, { className: "w-32" }) : /* @__PURE__ */ jsx(Select.Value, { children: renderValue }), /* @__PURE__ */ jsx(Select.Icon, {
+				className: "flex items-center",
+				children: /* @__PURE__ */ jsx(CaretUpDownIcon, {})
+			})]
+		}), /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, { children: /* @__PURE__ */ jsx(Select.Popup, {
+			className: cn("overflow-hidden bg-sf-control text-sf-default", "rounded-lg shadow-lg ring ring-sf-line", "min-w-[calc(var(--anchor-width)+3px)] p-1.5"),
+			children
+		}) }) })]
+	});
+	if (useFieldWrapper) return /* @__PURE__ */ jsx(Field, {
+		label,
+		required,
+		labelTooltip,
+		description,
+		error: error ? typeof error === "string" ? {
+			message: error,
+			match: true
+		} : error : void 0,
+		children: selectControl
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [label && /* @__PURE__ */ jsx("span", {
+		id: labelId,
+		className: "sr-only",
+		children: label
+	}), selectControl] });
+}
+function Option({ children, value }) {
+	return /* @__PURE__ */ jsxs(Select.Item, {
+		value,
+		className: "group flex cursor-pointer items-center justify-between gap-2 rounded px-2 py-1.5 text-base data-highlighted:bg-sf-overlay",
+		children: [/* @__PURE__ */ jsx(Select.ItemText, { children }), /* @__PURE__ */ jsx(Select.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })]
+	});
+}
+Select$1.Option = Option;
+//#endregion
+export { Select$1 as t };
+
+//# sourceMappingURL=select-9p721G00.js.map

package/dist/select-9p721G00.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-9p721G00.js","names":[],"sources":["../src/components/select/select.tsx"],"sourcesContent":["import { Select as SelectBase } from \"@base-ui/react/select\";\nimport { CaretUpDownIcon, CheckIcon } from \"@phosphor-icons/react\";\nimport { useId } from \"react\";\nimport type { ReactNode } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { buttonVariants } from \"../button\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\nimport { SkeletonLine } from \"../loader\";\n\n/** Select variant definitions (currently empty, reserved for future additions). */\nexport const SF_SELECT_VARIANTS = {\n  // Select currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const SF_SELECT_DEFAULT_VARIANTS = {} as const;\n\n/**\n * Select component styling metadata for Figma plugin code generation\n * Extracted from select.tsx implementation (source of truth)\n */\nexport const SF_SELECT_STYLING = {\n  trigger: {\n    height: 36, // h-9\n    paddingX: 12, // px-3\n    borderRadius: 8, // rounded-lg\n    background: \"color-secondary\",\n    text: \"text-color-surface\",\n    ring: \"color-border\",\n    fontSize: 16, // text-base\n    fontWeight: 400, // font-normal\n  },\n  stateTokens: {\n    focus: { ring: \"color-active\" },\n    disabled: { opacity: 0.5 },\n  },\n  icons: {\n    caret: { name: \"ph-caret-up-down\", size: 20 },\n    check: { name: \"ph-check\", size: 20 },\n  },\n  popup: {\n    background: \"color-secondary\",\n    ring: \"color-border\",\n    borderRadius: 8, // rounded-lg\n    padding: 6, // p-1.5\n  },\n  option: {\n    paddingX: 8, // px-2\n    paddingY: 6, // py-1.5\n    borderRadius: 4, // rounded\n    fontSize: 16, // text-base\n    highlightBackground: \"color-surface-secondary\",\n  },\n} as const;\n\n// Derived types from SF_SELECT_VARIANTS\nexport interface SFSelectVariantsProps {}\n\nexport function selectVariants(_props: SFSelectVariantsProps = {}) {\n  return cn(\n    buttonVariants(),\n    \"justify-between font-normal\",\n    \"outline-none focus:opacity-100 focus-visible:ring-1 focus-visible:ring-sf-ring *:in-focus:opacity-100\"\n  );\n}\n\ntype SelectPropsGeneric<\n  T,\n  Multiple extends boolean | undefined = false,\n> = SelectBase.Root.Props<T, Multiple> &\n  SFSelectVariantsProps & {\n    multiple?: Multiple;\n    renderValue?: (value: Multiple extends true ? T[] : T) => ReactNode;\n    className?: string;\n    /** Label content for the select (enables Field wrapper) - can be a string or any React node */\n    label?: ReactNode;\n    /** Visually hide the label (sr-only). Set to `false` for a visible label. @default true */\n    hideLabel?: boolean;\n    placeholder?: string;\n    loading?: boolean;\n    /** Tooltip content to display next to the label via an info icon */\n    labelTooltip?: ReactNode;\n    /** Helper text displayed below the select */\n    description?: ReactNode;\n    /** Error message or validation error object */\n    error?: string | { message: ReactNode; match: FieldErrorMatch };\n  };\n\n/**\n * Select component props.\n *\n * @example\n * ```tsx\n * <Select label=\"Country\" onValueChange={setValue}>\n *   <Select.Option value=\"us\">United States</Select.Option>\n *   <Select.Option value=\"uk\">United Kingdom</Select.Option>\n * </Select>\n * ```\n */\nexport interface SelectProps {\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** Label content for the select (enables Field wrapper) — can be a string or any React node. */\n  label?: ReactNode;\n  /**\n   * Visually hide the label while keeping it accessible to screen readers.\n   * Set to `false` to show a visible label above the select via the Field wrapper.\n   * @default true\n   */\n  hideLabel?: boolean;\n  /** Placeholder text shown when no value is selected. */\n  placeholder?: string;\n  /** When `true`, shows a skeleton loader in place of the selected value. */\n  loading?: boolean;\n  /** Whether the select is disabled. */\n  disabled?: boolean;\n  /** Whether the select is required. When `false`, shows \"(optional)\" text. */\n  required?: boolean;\n  /** Tooltip content displayed next to the label via an info icon. */\n  labelTooltip?: ReactNode;\n  /** Currently selected value (controlled mode). */\n  value?: unknown;\n  /** Initial value for uncontrolled mode. */\n  defaultValue?: unknown;\n  /** Callback fired when the selected value changes. */\n  onValueChange?: (value: unknown) => void;\n  /** Enable multi-select mode. */\n  multiple?: boolean;\n  /** `Select.Option` elements to render in the dropdown. */\n  children?: ReactNode;\n  /** Helper text displayed below the select. */\n  description?: ReactNode;\n  /** Error message string or validation error object with `match` key. */\n  error?: string | { message: ReactNode; match: FieldErrorMatch };\n}\n\n/**\n * Dropdown for selecting a value from a list of options.\n * Wraps Base UI Select with SF styling and optional Field integration.\n *\n * @example\n * ```tsx\n * <Select label=\"Fruit\" onValueChange={setFruit}>\n *   <Select.Option value=\"apple\">Apple</Select.Option>\n *   <Select.Option value=\"banana\">Banana</Select.Option>\n * </Select>\n * ```\n */\nexport function Select<T, Multiple extends boolean | undefined = false>({\n  children,\n  className,\n  renderValue,\n  label,\n  hideLabel = true,\n  placeholder,\n  loading,\n  labelTooltip,\n  description,\n  error,\n  required,\n  ...props\n}: SelectPropsGeneric<T, Multiple> & { required?: boolean }) {\n  const labelId = useId();\n  const propLookup = props as Record<string, unknown>;\n  const ariaLabel = propLookup[\"aria-label\"] as string | undefined;\n  const ariaLabelledby = propLookup[\"aria-labelledby\"] as string | undefined;\n  // For aria-label, use string label or placeholder (ReactNode labels can't be used for aria-label)\n  const fallbackLabel = typeof label === \"string\" ? label : placeholder;\n\n  // Use Field wrapper when label is provided and not hidden\n  const useFieldWrapper = label && !hideLabel;\n  const triggerLabelledBy = useFieldWrapper\n    ? undefined\n    : (ariaLabelledby ?? (label ? labelId : undefined));\n  const triggerAriaLabel =\n    ariaLabel ?? (!triggerLabelledBy ? fallbackLabel : undefined);\n\n  // Placeholder must be provide via the items props\n  // We need to fake the items or do some transformation\n  let items = props.items;\n  if (placeholder) {\n    if (!items) {\n      items = [\n        {\n          value: null as T,\n          label: placeholder,\n        },\n      ];\n    } else if (typeof items === \"object\") {\n      items = [\n        {\n          value: null as T,\n          label: placeholder,\n        },\n        ...Object.entries(items).map(([key, value]) => ({\n          value: key as T,\n          label: value,\n        })),\n      ];\n    } else if (Array.isArray(items)) {\n      items = [\n        {\n          value: null as T,\n          label: placeholder,\n        },\n        ...items,\n      ];\n    }\n  }\n\n  const selectControl = (\n    <SelectBase.Root\n      {...props}\n      items={items}\n      disabled={loading || props.disabled}\n    >\n      <SelectBase.Trigger\n        className={cn(\n          buttonVariants(),\n          \"justify-between font-normal\",\n          \"outline-none focus:opacity-100 focus-visible:ring-1 focus-visible:ring-sf-ring *:in-focus:opacity-100\",\n          props.disabled && \"cursor-not-allowed opacity-50\",\n          className\n        )}\n        aria-label={triggerAriaLabel}\n        aria-labelledby={triggerLabelledBy}\n      >\n        {loading ? (\n          <SkeletonLine className=\"w-32\" />\n        ) : (\n          <SelectBase.Value>{renderValue}</SelectBase.Value>\n        )}\n        <SelectBase.Icon className=\"flex items-center\">\n          <CaretUpDownIcon />\n        </SelectBase.Icon>\n      </SelectBase.Trigger>\n      <SelectBase.Portal>\n        <SelectBase.Positioner>\n          <SelectBase.Popup\n            className={cn(\n              \"overflow-hidden bg-sf-control text-sf-default\", // background\n              \"rounded-lg shadow-lg ring ring-sf-line\", // border part\n              // 3px adjustment to account for padding + border differences\n              \"min-w-[calc(var(--anchor-width)+3px)] p-1.5\" // spacing\n            )}\n          >\n            {children}\n          </SelectBase.Popup>\n        </SelectBase.Positioner>\n      </SelectBase.Portal>\n    </SelectBase.Root>\n  );\n\n  // Use Field wrapper when label is provided and not hidden\n  if (useFieldWrapper) {\n    return (\n      <Field\n        label={label}\n        required={required}\n        labelTooltip={labelTooltip}\n        description={description}\n        error={\n          error\n            ? typeof error === \"string\"\n              ? { message: error, match: true }\n              : error\n            : undefined\n        }\n      >\n        {selectControl}\n      </Field>\n    );\n  }\n\n  // Render with standalone label when label is hidden (sr-only)\n  return (\n    <>\n      {label && (\n        <span id={labelId} className=\"sr-only\">\n          {label}\n        </span>\n      )}\n      {selectControl}\n    </>\n  );\n}\n\ntype OptionProps<T> = {\n  children: ReactNode;\n  value: T;\n};\n\nfunction Option<T>({ children, value }: OptionProps<T>) {\n  return (\n    <SelectBase.Item\n      value={value}\n      className=\"group flex cursor-pointer items-center justify-between gap-2 rounded px-2 py-1.5 text-base data-highlighted:bg-sf-overlay\"\n    >\n      <SelectBase.ItemText>{children}</SelectBase.ItemText>\n      <SelectBase.ItemIndicator>\n        <CheckIcon />\n      </SelectBase.ItemIndicator>\n    </SelectBase.Item>\n  );\n}\n\nSelect.Option = Option;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAoJA,SAAgB,SAAwD,EACtE,UACA,WACA,aACA,OACA,YAAY,MACZ,aACA,SACA,cACA,aACA,OACA,UACA,GAAG,SACwD;CAC3D,MAAM,UAAU,OAAO;CACvB,MAAM,aAAa;CACnB,MAAM,YAAY,WAAW;CAC7B,MAAM,iBAAiB,WAAW;CAElC,MAAM,gBAAgB,OAAO,UAAU,WAAW,QAAQ;CAG1D,MAAM,kBAAkB,SAAS,CAAC;CAClC,MAAM,oBAAoB,kBACtB,KAAA,IACC,mBAAmB,QAAQ,UAAU,KAAA;CAC1C,MAAM,mBACJ,cAAc,CAAC,oBAAoB,gBAAgB,KAAA;CAIrD,IAAI,QAAQ,MAAM;AAClB,KAAI;MACE,CAAC,MACH,SAAQ,CACN;GACE,OAAO;GACP,OAAO;GACR,CACF;WACQ,OAAO,UAAU,SAC1B,SAAQ,CACN;GACE,OAAO;GACP,OAAO;GACR,EACD,GAAG,OAAO,QAAQ,MAAM,CAAC,KAAK,CAAC,KAAK,YAAY;GAC9C,OAAO;GACP,OAAO;GACR,EAAE,CACJ;WACQ,MAAM,QAAQ,MAAM,CAC7B,SAAQ,CACN;GACE,OAAO;GACP,OAAO;GACR,EACD,GAAG,MACJ;;CAIL,MAAM,gBACJ,qBAAC,OAAW,MAAZ;EACE,GAAI;EACG;EACP,UAAU,WAAW,MAAM;YAH7B,CAKE,qBAAC,OAAW,SAAZ;GACE,WAAW,GACT,gBAAgB,EAChB,+BACA,yGACA,MAAM,YAAY,iCAClB,UACD;GACD,cAAY;GACZ,mBAAiB;aATnB,CAWG,UACC,oBAAC,cAAD,EAAc,WAAU,QAAS,CAAA,GAEjC,oBAAC,OAAW,OAAZ,EAAA,UAAmB,aAA+B,CAAA,EAEpD,oBAAC,OAAW,MAAZ;IAAiB,WAAU;cACzB,oBAAC,iBAAD,EAAmB,CAAA;IACH,CAAA,CACC;MACrB,oBAAC,OAAW,QAAZ,EAAA,UACE,oBAAC,OAAW,YAAZ,EAAA,UACE,oBAAC,OAAW,OAAZ;GACE,WAAW,GACT,iDACA,0CAEA,8CACD;GAEA;GACgB,CAAA,EACG,CAAA,EACN,CAAA,CACJ;;AAIpB,KAAI,gBACF,QACE,oBAAC,OAAD;EACS;EACG;EACI;EACD;EACb,OACE,QACI,OAAO,UAAU,WACf;GAAE,SAAS;GAAO,OAAO;GAAM,GAC/B,QACF,KAAA;YAGL;EACK,CAAA;AAKZ,QACE,qBAAA,YAAA,EAAA,UAAA,CACG,SACC,oBAAC,QAAD;EAAM,IAAI;EAAS,WAAU;YAC1B;EACI,CAAA,EAER,cACA,EAAA,CAAA;;AASP,SAAS,OAAU,EAAE,UAAU,SAAyB;AACtD,QACE,qBAAC,OAAW,MAAZ;EACS;EACP,WAAU;YAFZ,CAIE,oBAAC,OAAW,UAAZ,EAAsB,UAA+B,CAAA,EACrD,oBAAC,OAAW,eAAZ,EAAA,UACE,oBAAC,WAAD,EAAa,CAAA,EACY,CAAA,CACX;;;AAItB,SAAO,SAAS"}

package/dist/sensitive-input-D5je2NLl.js

@@ -0,0 +1,248 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { t as Field } from "./field-Y_UK1_Cg.js";
+import { n as SF_INPUT_VARIANTS, r as inputVariants } from "./input-BxQAnXki.js";
+import { forwardRef, useCallback, useEffect, useId, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Eye, EyeSlash } from "@phosphor-icons/react";
+import { Input } from "@base-ui/react/input";
+//#region src/components/sensitive-input/sensitive-input.tsx
+var SF_SENSITIVE_INPUT_VARIANTS = SF_INPUT_VARIANTS;
+var SF_SENSITIVE_INPUT_DEFAULT_VARIANTS = {
+	size: "base",
+	variant: "default"
+};
+/**
+* Password/secret input that masks its value by default and reveals on click.
+* Includes a built-in copy-to-clipboard button on hover.
+*
+* @example
+* ```tsx
+* <SensitiveInput label="API Key" defaultValue="sk_live_abc123xyz789" />
+* ```
+*/
+var SensitiveInput = forwardRef(({ value: controlledValue, defaultValue = "", onChange, onValueChange, onCopy, size = SF_SENSITIVE_INPUT_DEFAULT_VARIANTS.size, variant = SF_SENSITIVE_INPUT_DEFAULT_VARIANTS.variant, disabled = false, readOnly = false, id, autoComplete = "off", className, label, labelTooltip, description, error, required, ...inputProps }, ref) => {
+	const ariaLabelFallback = typeof label === "string" ? label : "Sensitive value";
+	const isControlled = controlledValue !== void 0;
+	const [internalValue, setInternalValue] = useState(defaultValue);
+	const value = isControlled ? controlledValue : internalValue;
+	const hasValue = value.length > 0;
+	const [mode, setMode] = useState(() => hasValue ? "masked" : "empty");
+	const [copied, setCopied] = useState(false);
+	const inputRef = useRef(null);
+	const containerRef = useRef(null);
+	const liveRegionId = useId();
+	const generatedId = useId();
+	const inputId = id ?? generatedId;
+	const maskedInstructionId = useId();
+	const mergedRef = useCallback((node) => {
+		inputRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	useEffect(() => {
+		if (copied) {
+			const timeoutId = setTimeout(() => setCopied(false), 2e3);
+			return () => clearTimeout(timeoutId);
+		}
+	}, [copied]);
+	const copyToClipboard = useCallback(async (e) => {
+		e.stopPropagation();
+		try {
+			if (typeof navigator !== "undefined" && navigator.clipboard && typeof navigator.clipboard.writeText === "function") {
+				await navigator.clipboard.writeText(value);
+				setCopied(true);
+				onCopy?.();
+				return;
+			}
+		} catch {}
+		if (typeof document !== "undefined") {
+			const textarea = document.createElement("textarea");
+			textarea.value = value;
+			textarea.setAttribute("readonly", "");
+			textarea.style.position = "absolute";
+			textarea.style.left = "-9999px";
+			document.body.appendChild(textarea);
+			const selection = document.getSelection();
+			const previousRange = selection?.rangeCount ? selection.getRangeAt(0) : null;
+			textarea.select();
+			try {
+				document.execCommand("copy");
+				setCopied(true);
+				onCopy?.();
+			} catch (error) {
+				console.warn("Clipboard copy failed", error);
+			} finally {
+				document.body.removeChild(textarea);
+				if (previousRange) {
+					selection?.removeAllRanges();
+					selection?.addRange(previousRange);
+				}
+			}
+		}
+	}, [value, onCopy]);
+	const prevHasValueRef = useRef(hasValue);
+	if (prevHasValueRef.current !== hasValue) {
+		prevHasValueRef.current = hasValue;
+		if (!hasValue && mode === "masked") setMode("empty");
+	}
+	const handleContainerClick = useCallback((e) => {
+		if (disabled) return;
+		if (containerRef.current) {
+			const rect = containerRef.current.getBoundingClientRect();
+			if (!(e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top && e.clientY <= rect.bottom)) return;
+		}
+		if (mode === "masked" && hasValue) {
+			setMode("revealed");
+			if (!readOnly) setTimeout(() => inputRef.current?.focus(), 0);
+		}
+	}, [
+		mode,
+		hasValue,
+		disabled,
+		readOnly
+	]);
+	const handleToggleVisibility = useCallback((e) => {
+		e.stopPropagation();
+		if (mode === "revealed") setMode("masked");
+		else if (mode === "empty" && hasValue) setMode("revealed");
+	}, [mode, hasValue]);
+	const handleChange = useCallback((e) => {
+		const newValue = e.target.value;
+		if (!isControlled) setInternalValue(newValue);
+		onChange?.(e);
+		onValueChange?.(newValue);
+	}, [
+		isControlled,
+		onChange,
+		onValueChange
+	]);
+	const handleBlur = useCallback((e) => {
+		if (containerRef.current && e.relatedTarget instanceof Node && containerRef.current.contains(e.relatedTarget)) return;
+		if (hasValue) setMode("masked");
+	}, [hasValue]);
+	const handleContainerKeyDown = useCallback((e) => {
+		if (disabled) return;
+		if (mode === "masked" && hasValue) {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				setMode("revealed");
+				if (!readOnly) setTimeout(() => inputRef.current?.focus(), 0);
+			}
+		}
+	}, [
+		mode,
+		hasValue,
+		disabled,
+		readOnly
+	]);
+	const handleInputKeyDown = useCallback((e) => {
+		if (mode === "revealed" && e.key === "Escape") {
+			setMode("masked");
+			setTimeout(() => containerRef.current?.focus(), 0);
+		}
+	}, [mode]);
+	const isMaskedWithValue = mode === "masked" && hasValue;
+	const showEyeButton = !disabled && (mode === "revealed" || mode === "empty" && hasValue);
+	const iconSize = size === "xs" || size === "sm" ? "size-3" : "size-4";
+	const containerClassName = cn(inputVariants({
+		size,
+		variant,
+		parentFocusIndicator: true
+	}), "group/container relative flex w-full items-center", isMaskedWithValue && !disabled && "cursor-pointer", disabled && "cursor-not-allowed", className);
+	const containerContent = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(Input, {
+			ref: mergedRef,
+			id: inputId,
+			type: mode === "revealed" ? "text" : "password",
+			value,
+			onChange: handleChange,
+			onBlur: handleBlur,
+			onKeyDown: handleInputKeyDown,
+			disabled,
+			readOnly: readOnly || isMaskedWithValue,
+			autoComplete,
+			tabIndex: isMaskedWithValue ? -1 : 0,
+			className: cn("w-full border-0 bg-transparent p-0 text-sf-default ring-0 outline-none placeholder:text-sf-subtle disabled:cursor-not-allowed disabled:text-sf-subtle", size === "xs" && "pr-5", size === "sm" && "pr-6", size === "base" && "pr-8", size === "lg" && "pr-10", isMaskedWithValue && "pointer-events-none text-transparent"),
+			"aria-hidden": isMaskedWithValue,
+			...inputProps
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: cn("pointer-events-none absolute inset-y-0 left-0 flex items-center overflow-hidden select-none", size === "xs" && "right-5", size === "sm" && "right-6", size === "base" && "right-8", size === "lg" && "right-10", size === "xs" && "px-1.5", size === "sm" && "px-2", size === "base" && "px-3", size === "lg" && "px-4", !isMaskedWithValue && "invisible", isMaskedWithValue && "pointer-events-auto", "text-sf-default", "group/mask"),
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsxs("span", {
+				className: "relative",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: cn(isMaskedWithValue && !disabled && "group-focus-within/container:invisible group-hover/mask:invisible"),
+					children: "••••••••"
+				}), isMaskedWithValue && !disabled && /* @__PURE__ */ jsx("span", {
+					className: "invisible absolute left-0 top-0 whitespace-nowrap text-sf-subtle group-focus-within/container:visible group-hover/mask:visible",
+					children: "Click to reveal"
+				})]
+			})
+		}),
+		/* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: handleToggleVisibility,
+			onKeyDown: (e) => e.stopPropagation(),
+			"aria-label": mode === "revealed" ? "Hide value" : "Reveal value",
+			tabIndex: showEyeButton ? 0 : -1,
+			className: cn("absolute top-1/2 right-0 -translate-y-1/2 cursor-pointer text-sf-subtle outline-none hover:text-sf-default focus:text-sf-default", size === "xs" && "right-1.5", size === "sm" && "right-2", size === "base" && "right-3", size === "lg" && "right-4", iconSize, !showEyeButton && "pointer-events-none opacity-0"),
+			children: mode === "revealed" ? /* @__PURE__ */ jsx(EyeSlash, { className: "size-full" }) : /* @__PURE__ */ jsx(Eye, { className: "size-full" })
+		}),
+		hasValue && !disabled && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: copyToClipboard,
+			onKeyDown: (e) => e.stopPropagation(),
+			"aria-label": copied ? "Copied" : "Copy to clipboard",
+			className: cn("absolute -top-px right-2 -translate-y-full cursor-pointer rounded-t-md bg-sf-brand px-2 py-0.5 text-xs text-white opacity-0 transition-opacity group-focus-within/container:opacity-100 group-hover/container:opacity-100 hover:brightness-120 focus-visible:outline focus-visible:outline-offset-1 focus-visible:outline-sf-ring"),
+			children: copied ? "Copied" : "Copy"
+		})
+	] });
+	const input = /* @__PURE__ */ jsxs("div", { children: [
+		isMaskedWithValue ? /* @__PURE__ */ jsx("div", {
+			ref: containerRef,
+			role: "button",
+			tabIndex: disabled ? -1 : 0,
+			className: containerClassName,
+			onClick: handleContainerClick,
+			onKeyDown: handleContainerKeyDown,
+			"aria-label": `${ariaLabelFallback}, masked.`,
+			"aria-describedby": `${maskedInstructionId} ${liveRegionId}`,
+			"aria-disabled": disabled,
+			children: containerContent
+		}) : /* @__PURE__ */ jsx("div", {
+			ref: containerRef,
+			className: containerClassName,
+			children: containerContent
+		}),
+		isMaskedWithValue && /* @__PURE__ */ jsx("span", {
+			id: maskedInstructionId,
+			className: "sr-only",
+			children: "Click or press Enter to reveal."
+		}),
+		/* @__PURE__ */ jsxs("span", {
+			id: liveRegionId,
+			className: "sr-only",
+			"aria-live": "polite",
+			children: [mode === "masked" && hasValue && "Value hidden", copied && "Copied to clipboard"]
+		})
+	] });
+	if (label) return /* @__PURE__ */ jsx(Field, {
+		label,
+		required,
+		labelTooltip,
+		description,
+		error: error ? typeof error === "string" ? {
+			message: error,
+			match: true
+		} : error : void 0,
+		children: input
+	});
+	return input;
+});
+SensitiveInput.displayName = "SensitiveInput";
+//#endregion
+export { SF_SENSITIVE_INPUT_VARIANTS as n, SensitiveInput as r, SF_SENSITIVE_INPUT_DEFAULT_VARIANTS as t };
+
+//# sourceMappingURL=sensitive-input-D5je2NLl.js.map

package/dist/sensitive-input-D5je2NLl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sensitive-input-D5je2NLl.js","names":[],"sources":["../src/components/sensitive-input/sensitive-input.tsx"],"sourcesContent":["import { Input as BaseInput } from \"@base-ui/react/input\";\nimport { Eye, EyeSlash } from \"@phosphor-icons/react\";\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\nimport {\n  inputVariants,\n  SF_INPUT_VARIANTS,\n  type SFInputSize,\n  type SFInputVariant,\n} from \"../input/input\";\n\nexport const SF_SENSITIVE_INPUT_VARIANTS = SF_INPUT_VARIANTS;\n\nexport const SF_SENSITIVE_INPUT_DEFAULT_VARIANTS = {\n  size: \"base\",\n  variant: \"default\",\n} as const;\n\ntype Mode = \"masked\" | \"revealed\" | \"empty\";\n\n/**\n * SensitiveInput component props.\n *\n * @example\n * ```tsx\n * <SensitiveInput label=\"API Key\" defaultValue=\"sk_live_abc123xyz789\" />\n * <SensitiveInput label=\"Secret\" value={secret} onValueChange={setSecret} />\n * ```\n */\nexport interface SensitiveInputProps extends Omit<\n  ComponentPropsWithoutRef<\"input\">,\n  \"size\" | \"type\" | \"value\" | \"defaultValue\"\n> {\n  /** Controlled value */\n  value?: string;\n  /** Uncontrolled default value */\n  defaultValue?: string;\n  /** Simplified change handler receiving just the value */\n  onValueChange?: (value: string) => void;\n  /** Callback fired after value is copied to clipboard */\n  onCopy?: () => void;\n  /**\n   * Size of the input.\n   * - `\"xs\"` — Extra small for compact UIs\n   * - `\"sm\"` — Small for secondary fields\n   * - `\"base\"` — Default input size\n   * - `\"lg\"` — Large for prominent fields\n   * @default \"base\"\n   */\n  size?: SFInputSize;\n  /**\n   * Style variant of the input.\n   * - `\"default\"` — Default input appearance\n   * - `\"error\"` — Error state for validation failures\n   * @default \"default\"\n   */\n  variant?: SFInputVariant;\n  /** Label content for the input (enables Field wrapper and sets masked state label) - can be a string or any React node */\n  label?: ReactNode;\n  /** Tooltip content to display next to the label via an info icon */\n  labelTooltip?: ReactNode;\n  /** Helper text displayed below the input */\n  description?: ReactNode;\n  /** Error message or validation error object */\n  error?: string | { message: ReactNode; match: FieldErrorMatch };\n}\n\n/**\n * Password/secret input that masks its value by default and reveals on click.\n * Includes a built-in copy-to-clipboard button on hover.\n *\n * @example\n * ```tsx\n * <SensitiveInput label=\"API Key\" defaultValue=\"sk_live_abc123xyz789\" />\n * ```\n */\nexport const SensitiveInput = forwardRef<HTMLInputElement, SensitiveInputProps>(\n  (\n    {\n      value: controlledValue,\n      defaultValue = \"\",\n      onChange,\n      onValueChange,\n      onCopy,\n      size = SF_SENSITIVE_INPUT_DEFAULT_VARIANTS.size,\n      variant = SF_SENSITIVE_INPUT_DEFAULT_VARIANTS.variant,\n      disabled = false,\n      readOnly = false,\n      id,\n      autoComplete = \"off\",\n      className,\n      label,\n      labelTooltip,\n      description,\n      error,\n      required,\n      ...inputProps\n    },\n    ref\n  ) => {\n    // For aria-label, only use string labels (ReactNode labels can't be used for aria-label)\n    const ariaLabelFallback =\n      typeof label === \"string\" ? label : \"Sensitive value\";\n    const isControlled = controlledValue !== undefined;\n    const [internalValue, setInternalValue] = useState(defaultValue);\n    const value = isControlled ? controlledValue : internalValue;\n    const hasValue = value.length > 0;\n\n    const [mode, setMode] = useState<Mode>(() =>\n      hasValue ? \"masked\" : \"empty\"\n    );\n\n    const [copied, setCopied] = useState(false);\n\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const liveRegionId = useId();\n    const generatedId = useId();\n    const inputId = id ?? generatedId;\n    const maskedInstructionId = useId();\n\n    const mergedRef = useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node;\n        if (typeof ref === \"function\") {\n          ref(node);\n        } else if (ref) {\n          ref.current = node;\n        }\n      },\n      [ref]\n    );\n\n    // Reset copied state after 2 seconds\n    useEffect(() => {\n      if (copied) {\n        const timeoutId = setTimeout(() => setCopied(false), 2000);\n        return () => clearTimeout(timeoutId);\n      }\n    }, [copied]);\n\n    const copyToClipboard = useCallback(\n      async (e: React.MouseEvent<HTMLButtonElement>) => {\n        e.stopPropagation();\n        try {\n          if (\n            typeof navigator !== \"undefined\" &&\n            navigator.clipboard &&\n            typeof navigator.clipboard.writeText === \"function\"\n          ) {\n            await navigator.clipboard.writeText(value);\n            setCopied(true);\n            onCopy?.();\n            return;\n          }\n        } catch {\n          // Fall through to manual fallback\n        }\n\n        if (typeof document !== \"undefined\") {\n          const textarea = document.createElement(\"textarea\");\n          textarea.value = value;\n          textarea.setAttribute(\"readonly\", \"\");\n          textarea.style.position = \"absolute\";\n          textarea.style.left = \"-9999px\";\n          document.body.appendChild(textarea);\n          const selection = document.getSelection();\n          const previousRange = selection?.rangeCount\n            ? selection.getRangeAt(0)\n            : null;\n          textarea.select();\n          try {\n            document.execCommand(\"copy\");\n            setCopied(true);\n            onCopy?.();\n          } catch (error) {\n            console.warn(\"Clipboard copy failed\", error);\n          } finally {\n            document.body.removeChild(textarea);\n            if (previousRange) {\n              selection?.removeAllRanges();\n              selection?.addRange(previousRange);\n            }\n          }\n        }\n      },\n      [value, onCopy]\n    );\n\n    // Sync mode when value changes externally\n    const prevHasValueRef = useRef(hasValue);\n    if (prevHasValueRef.current !== hasValue) {\n      prevHasValueRef.current = hasValue;\n      if (!hasValue && mode === \"masked\") {\n        setMode(\"empty\");\n      }\n    }\n\n    const handleContainerClick = useCallback(\n      (e: React.MouseEvent) => {\n        if (disabled) return;\n        // Ignore clicks that originated from outside (e.g., label click focusing input)\n        // Label clicks trigger a click on the input, but the click coordinates are outside the container\n        if (containerRef.current) {\n          const rect = containerRef.current.getBoundingClientRect();\n          const isClickInsideContainer =\n            e.clientX >= rect.left &&\n            e.clientX <= rect.right &&\n            e.clientY >= rect.top &&\n            e.clientY <= rect.bottom;\n          if (!isClickInsideContainer) return;\n        }\n        if (mode === \"masked\" && hasValue) {\n          setMode(\"revealed\");\n          if (!readOnly) {\n            setTimeout(() => inputRef.current?.focus(), 0);\n          }\n        }\n      },\n      [mode, hasValue, disabled, readOnly]\n    );\n\n    const handleToggleVisibility = useCallback(\n      (e: React.MouseEvent<HTMLButtonElement>) => {\n        e.stopPropagation();\n        if (mode === \"revealed\") {\n          setMode(\"masked\");\n        } else if (mode === \"empty\" && hasValue) {\n          setMode(\"revealed\");\n        }\n      },\n      [mode, hasValue]\n    );\n\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const newValue = e.target.value;\n        if (!isControlled) {\n          setInternalValue(newValue);\n        }\n        onChange?.(e);\n        onValueChange?.(newValue);\n      },\n      [isControlled, onChange, onValueChange]\n    );\n\n    const handleBlur = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        // Don't mask if focus is moving to a button inside the container (copy/eye buttons)\n        if (\n          containerRef.current &&\n          e.relatedTarget instanceof Node &&\n          containerRef.current.contains(e.relatedTarget)\n        ) {\n          return;\n        }\n        if (hasValue) {\n          setMode(\"masked\");\n        }\n      },\n      [hasValue]\n    );\n\n    const handleContainerKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLDivElement>) => {\n        if (disabled) return;\n        if (mode === \"masked\" && hasValue) {\n          if (e.key === \"Enter\" || e.key === \" \") {\n            e.preventDefault();\n            setMode(\"revealed\");\n            if (!readOnly) {\n              setTimeout(() => inputRef.current?.focus(), 0);\n            }\n          }\n        }\n      },\n      [mode, hasValue, disabled, readOnly]\n    );\n\n    const handleInputKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (mode === \"revealed\" && e.key === \"Escape\") {\n          setMode(\"masked\");\n          // Move focus to container to avoid focus trap (input becomes tabIndex={-1})\n          setTimeout(() => containerRef.current?.focus(), 0);\n        }\n      },\n      [mode]\n    );\n\n    const isMaskedWithValue = mode === \"masked\" && hasValue;\n    const showEyeButton =\n      !disabled && (mode === \"revealed\" || (mode === \"empty\" && hasValue));\n\n    // Icon sizes matching input sizes\n    const iconSize = size === \"xs\" || size === \"sm\" ? \"size-3\" : \"size-4\";\n\n    const containerClassName = cn(\n      inputVariants({ size, variant, parentFocusIndicator: true }),\n      \"group/container relative flex w-full items-center\",\n      isMaskedWithValue && !disabled && \"cursor-pointer\",\n      disabled && \"cursor-not-allowed\",\n      className\n    );\n\n    const containerContent = (\n      <>\n        {/* Input - defines the width, always rendered */}\n        <BaseInput\n          ref={mergedRef}\n          id={inputId}\n          type={mode === \"revealed\" ? \"text\" : \"password\"}\n          value={value}\n          onChange={handleChange}\n          onBlur={handleBlur}\n          onKeyDown={handleInputKeyDown}\n          disabled={disabled}\n          readOnly={readOnly || isMaskedWithValue}\n          autoComplete={autoComplete}\n          tabIndex={isMaskedWithValue ? -1 : 0}\n          className={cn(\n            \"w-full border-0 bg-transparent p-0 text-sf-default ring-0 outline-none placeholder:text-sf-subtle disabled:cursor-not-allowed disabled:text-sf-subtle\",\n            size === \"xs\" && \"pr-5\",\n            size === \"sm\" && \"pr-6\",\n            size === \"base\" && \"pr-8\",\n            size === \"lg\" && \"pr-10\",\n            isMaskedWithValue && \"pointer-events-none text-transparent\"\n          )}\n          aria-hidden={isMaskedWithValue}\n          {...inputProps}\n        />\n\n        {/* Mask overlay - absolutely positioned, doesn't affect layout */}\n        <span\n          className={cn(\n            \"pointer-events-none absolute inset-y-0 left-0 flex items-center overflow-hidden select-none\",\n            // Match input pr padding (space for icon)\n            size === \"xs\" && \"right-5\",\n            size === \"sm\" && \"right-6\",\n            size === \"base\" && \"right-8\",\n            size === \"lg\" && \"right-10\",\n            // Match the padding from inputVariants\n            size === \"xs\" && \"px-1.5\",\n            size === \"sm\" && \"px-2\",\n            size === \"base\" && \"px-3\",\n            size === \"lg\" && \"px-4\",\n            // Hidden when not masked\n            !isMaskedWithValue && \"invisible\",\n            // When masked: enable pointer events\n            isMaskedWithValue && \"pointer-events-auto\",\n            // Text color - use text-sf-default to contrast with bg-sf-control input background\n            \"text-sf-default\",\n            // Hover state - pure CSS, no React state (group for children)\n            \"group/mask\"\n          )}\n          aria-hidden=\"true\"\n        >\n          {/* Both texts rendered, stacked. Visibility toggled on hover to prevent layout shift */}\n          <span className=\"relative\">\n            <span\n              className={cn(\n                isMaskedWithValue &&\n                  !disabled &&\n                  \"group-focus-within/container:invisible group-hover/mask:invisible\"\n              )}\n            >\n              ••••••••\n            </span>\n            {isMaskedWithValue && !disabled && (\n              <span className=\"invisible absolute left-0 top-0 whitespace-nowrap text-sf-subtle group-focus-within/container:visible group-hover/mask:visible\">\n                Click to reveal\n              </span>\n            )}\n          </span>\n        </span>\n\n        {/* Eye button - absolutely positioned to the right */}\n        <button\n          type=\"button\"\n          onClick={handleToggleVisibility}\n          onKeyDown={(e) => e.stopPropagation()}\n          aria-label={mode === \"revealed\" ? \"Hide value\" : \"Reveal value\"}\n          tabIndex={showEyeButton ? 0 : -1}\n          className={cn(\n            \"absolute top-1/2 right-0 -translate-y-1/2 cursor-pointer text-sf-subtle outline-none hover:text-sf-default focus:text-sf-default\",\n            // Match right padding from inputVariants\n            size === \"xs\" && \"right-1.5\",\n            size === \"sm\" && \"right-2\",\n            size === \"base\" && \"right-3\",\n            size === \"lg\" && \"right-4\",\n            iconSize,\n            !showEyeButton && \"pointer-events-none opacity-0\"\n          )}\n        >\n          {mode === \"revealed\" ? (\n            <EyeSlash className=\"size-full\" />\n          ) : (\n            <Eye className=\"size-full\" />\n          )}\n        </button>\n\n        {/* Copy tab - appears on hover/focus at top right (hidden when disabled) */}\n        {hasValue && !disabled && (\n          <button\n            type=\"button\"\n            onClick={copyToClipboard}\n            onKeyDown={(e) => e.stopPropagation()}\n            aria-label={copied ? \"Copied\" : \"Copy to clipboard\"}\n            className={cn(\n              \"absolute -top-px right-2 -translate-y-full cursor-pointer rounded-t-md bg-sf-brand px-2 py-0.5 text-xs text-white opacity-0 transition-opacity group-focus-within/container:opacity-100 group-hover/container:opacity-100 hover:brightness-120 focus-visible:outline focus-visible:outline-offset-1 focus-visible:outline-sf-ring\"\n            )}\n          >\n            {copied ? \"Copied\" : \"Copy\"}\n          </button>\n        )}\n      </>\n    );\n\n    const input = (\n      <div>\n        {isMaskedWithValue ? (\n          <div\n            ref={containerRef}\n            // Cannot use <button> here because containerContent contains interactive button elements (Copy, Reveal).\n            // Using role=\"button\" with proper keyboard handling instead.\n            // oxlint-disable-next-line prefer-tag-over-role\n            role=\"button\"\n            tabIndex={disabled ? -1 : 0}\n            className={containerClassName}\n            onClick={handleContainerClick}\n            onKeyDown={handleContainerKeyDown}\n            aria-label={`${ariaLabelFallback}, masked.`}\n            aria-describedby={`${maskedInstructionId} ${liveRegionId}`}\n            aria-disabled={disabled}\n          >\n            {containerContent}\n          </div>\n        ) : (\n          <div ref={containerRef} className={containerClassName}>\n            {containerContent}\n          </div>\n        )}\n        {isMaskedWithValue && (\n          <span id={maskedInstructionId} className=\"sr-only\">\n            Click or press Enter to reveal.\n          </span>\n        )}\n        <span id={liveRegionId} className=\"sr-only\" aria-live=\"polite\">\n          {mode === \"masked\" && hasValue && \"Value hidden\"}\n          {copied && \"Copied to clipboard\"}\n        </span>\n      </div>\n    );\n\n    // Render with Field wrapper if label is provided\n    if (label) {\n      return (\n        <Field\n          label={label}\n          required={required}\n          labelTooltip={labelTooltip}\n          description={description}\n          error={\n            error\n              ? typeof error === \"string\"\n                ? { message: error, match: true }\n                : error\n              : undefined\n          }\n        >\n          {input}\n        </Field>\n      );\n    }\n\n    // Render bare input without Field wrapper\n    return input;\n  }\n);\n\nSensitiveInput.displayName = \"SensitiveInput\";\n"],"mappings":"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"}