@signalflare-ai/ui 0.5.0

package/dist/badge-D_eaA6wv.js

@@ -0,0 +1,128 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { n as useLinkComponent } from "./link-provider-BUZKXaNE.js";
+import { t as Loader } from "./loader-DAcc-Uag.js";
+import { t as Tooltip } from "./tooltip-Cb7QW-7H.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/badge/badge.tsx
+/** Base styles applied to all badge variants. */
+var SF_BADGE_BASE_STYLES = "inline-flex w-fit flex-none shrink-0 items-center gap-1 justify-self-start rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap select-none cursor-default";
+/** Badge variant definitions mapping variant names to their Tailwind classes and descriptions. */
+var SF_BADGE_VARIANTS = { variant: {
+	primary: {
+		classes: "bg-sf-contrast text-sf-inverse",
+		description: "Default high-emphasis badge for important labels"
+	},
+	secondary: {
+		classes: "bg-sf-fill text-sf-default",
+		description: "Subtle badge for secondary information"
+	},
+	destructive: {
+		classes: "bg-sf-danger text-sf-inverse",
+		description: "Error or danger state indicator"
+	},
+	outline: {
+		classes: "border border-sf-fill bg-transparent text-sf-default",
+		description: "Bordered badge with transparent background"
+	},
+	beta: {
+		classes: "border border-dashed border-sf-brand bg-transparent text-sf-link",
+		description: "Indicates beta or experimental features"
+	},
+	success: {
+		classes: "bg-sf-success/20 text-sf-success",
+		description: "Positive status indicator"
+	},
+	warning: {
+		classes: "bg-sf-warning/20 text-sf-warning",
+		description: "Caution or attention indicator"
+	},
+	info: {
+		classes: "bg-sf-info/20 text-sf-link",
+		description: "Informational badge"
+	},
+	ghost: {
+		classes: "bg-transparent text-sf-strong",
+		description: "Text-only badge with no background or border"
+	}
+} };
+var SF_BADGE_DEFAULT_VARIANTS = { variant: "primary" };
+function badgeVariants({ variant = SF_BADGE_DEFAULT_VARIANTS.variant } = {}) {
+	return cn(SF_BADGE_BASE_STYLES, SF_BADGE_VARIANTS.variant[variant].classes);
+}
+var DOT_COLORS = {
+	green: "bg-sf-success",
+	red: "bg-sf-danger",
+	yellow: "bg-sf-warning",
+	blue: "bg-sf-brand",
+	gray: "bg-sf-subtle"
+};
+/**
+* Small status label for categorizing or highlighting content.
+* Supports icons, loading state, status dots, dismiss, tooltip, and interactive (button/link) modes.
+*
+* @example
+* ```tsx
+* <Badge variant="primary">Active</Badge>
+* <Badge variant="success" dot="green">Online</Badge>
+* <Badge onClick={() => apply()}>Apply filter</Badge>
+* ```
+*/
+function Badge({ variant = SF_BADGE_DEFAULT_VARIANTS.variant, className, children, icon: Icon, iconPosition = "left", onDismiss, loading, dot, tooltip, ...interactiveProps }) {
+	const LinkComponent = useLinkComponent();
+	const isInteractive = "onClick" in interactiveProps ? !!interactiveProps.onClick : "href" in interactiveProps ? !!interactiveProps.href : false;
+	const combinedClasses = cn(badgeVariants({ variant }), isInteractive && "cursor-pointer transition-opacity hover:opacity-80", className);
+	const leftIcon = loading ? /* @__PURE__ */ jsx(Loader, { size: 12 }) : Icon && iconPosition === "left" ? /* @__PURE__ */ jsx(Icon, { className: "size-3" }) : null;
+	const rightIcon = !loading && Icon && iconPosition === "right" ? /* @__PURE__ */ jsx(Icon, { className: "size-3" }) : null;
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+		dot ? /* @__PURE__ */ jsx("span", { className: cn("size-1.5 rounded-full", DOT_COLORS[dot]) }) : null,
+		leftIcon,
+		children,
+		rightIcon,
+		onDismiss ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: (e) => {
+				e.stopPropagation();
+				onDismiss();
+			},
+			className: "-mr-0.5 ml-0.5 inline-flex size-3 cursor-pointer items-center justify-center rounded-full opacity-70 hover:opacity-100",
+			"aria-label": "Remove",
+			children: /* @__PURE__ */ jsx("svg", {
+				className: "size-2.5",
+				viewBox: "0 0 12 12",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				strokeLinecap: "round",
+				children: /* @__PURE__ */ jsx("path", { d: "M3 3l6 6M9 3l-6 6" })
+			})
+		}) : null
+	] });
+	let badge;
+	if ("href" in interactiveProps && interactiveProps.href) badge = /* @__PURE__ */ jsx(LinkComponent, {
+		href: interactiveProps.href,
+		className: combinedClasses,
+		children: content
+	});
+	else if ("onClick" in interactiveProps && interactiveProps.onClick) {
+		const handleClick = interactiveProps.onClick;
+		badge = /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: handleClick,
+			className: combinedClasses,
+			children: content
+		});
+	} else badge = /* @__PURE__ */ jsx("span", {
+		className: combinedClasses,
+		children: content
+	});
+	if (tooltip) return /* @__PURE__ */ jsx(Tooltip, {
+		content: tooltip,
+		children: badge
+	});
+	return badge;
+}
+//#endregion
+export { badgeVariants as a, SF_BADGE_VARIANTS as i, SF_BADGE_BASE_STYLES as n, SF_BADGE_DEFAULT_VARIANTS as r, Badge as t };
+
+//# sourceMappingURL=badge-D_eaA6wv.js.map

package/dist/badge-D_eaA6wv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge-D_eaA6wv.js","names":[],"sources":["../src/components/badge/badge.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ElementType, MouseEvent, ReactNode } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { useLinkComponent } from \"../../utils/link-provider\";\nimport { Loader } from \"../loader/loader\";\nimport { Tooltip } from \"../tooltip/tooltip\";\n\n/** Base styles applied to all badge variants. */\nexport const SF_BADGE_BASE_STYLES =\n  \"inline-flex w-fit flex-none shrink-0 items-center gap-1 justify-self-start rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap select-none cursor-default\";\n\n/** Badge variant definitions mapping variant names to their Tailwind classes and descriptions. */\nexport const SF_BADGE_VARIANTS = {\n  variant: {\n    primary: {\n      classes: \"bg-sf-contrast text-sf-inverse\",\n      description: \"Default high-emphasis badge for important labels\",\n    },\n    secondary: {\n      classes: \"bg-sf-fill text-sf-default\",\n      description: \"Subtle badge for secondary information\",\n    },\n    destructive: {\n      classes: \"bg-sf-danger text-sf-inverse\",\n      description: \"Error or danger state indicator\",\n    },\n    outline: {\n      classes: \"border border-sf-fill bg-transparent text-sf-default\",\n      description: \"Bordered badge with transparent background\",\n    },\n    beta: {\n      classes:\n        \"border border-dashed border-sf-brand bg-transparent text-sf-link\",\n      description: \"Indicates beta or experimental features\",\n    },\n    success: {\n      classes: \"bg-sf-success/20 text-sf-success\",\n      description: \"Positive status indicator\",\n    },\n    warning: {\n      classes: \"bg-sf-warning/20 text-sf-warning\",\n      description: \"Caution or attention indicator\",\n    },\n    info: {\n      classes: \"bg-sf-info/20 text-sf-link\",\n      description: \"Informational badge\",\n    },\n    ghost: {\n      classes: \"bg-transparent text-sf-strong\",\n      description: \"Text-only badge with no background or border\",\n    },\n  },\n} as const;\n\nexport const SF_BADGE_DEFAULT_VARIANTS = {\n  variant: \"primary\",\n} as const;\n\n// Derived types from SF_BADGE_VARIANTS\nexport type SFBadgeVariant = keyof typeof SF_BADGE_VARIANTS.variant;\n\nexport interface SFBadgeVariantsProps {\n  variant?: SFBadgeVariant;\n}\n\nexport function badgeVariants({\n  variant = SF_BADGE_DEFAULT_VARIANTS.variant,\n}: SFBadgeVariantsProps = {}) {\n  return cn(\n    // Base styles (exported as SF_BADGE_BASE_STYLES for Figma plugin)\n    SF_BADGE_BASE_STYLES,\n    // Apply variant styles from SF_BADGE_VARIANTS\n    SF_BADGE_VARIANTS.variant[variant].classes\n  );\n}\n\n// Legacy type alias for backwards compatibility\nexport type BadgeVariant = SFBadgeVariant;\n\nconst DOT_COLORS = {\n  green: \"bg-sf-success\",\n  red: \"bg-sf-danger\",\n  yellow: \"bg-sf-warning\",\n  blue: \"bg-sf-brand\",\n  gray: \"bg-sf-subtle\",\n} as const;\n\nexport type BadgeDotColor = keyof typeof DOT_COLORS;\n\n/**\n * Badge component props.\n *\n * @example\n * ```tsx\n * <Badge variant=\"primary\">New</Badge>\n * <Badge variant=\"success\" icon={CheckCircle}>Deployed</Badge>\n * <Badge dot=\"green\">Online</Badge>\n * <Badge onDismiss={() => remove(id)}>typescript</Badge>\n * <Badge loading>Syncing</Badge>\n * <Badge onClick={() => filter(\"tag\")}>Filter</Badge>\n * ```\n */\nexport type BadgeProps = {\n  /**\n   * Visual style of the badge.\n   * - `\"primary\"` — High-emphasis badge for important labels\n   * - `\"secondary\"` — Subtle badge for secondary information\n   * - `\"destructive\"` — Error or danger state indicator\n   * - `\"outline\"` — Bordered badge with transparent background\n   * - `\"beta\"` — Dashed-border badge for beta/experimental features\n   * - `\"success\"` — Positive status indicator\n   * - `\"warning\"` — Caution or attention indicator\n   * - `\"info\"` — Informational badge\n   * - `\"ghost\"` — Text-only badge with no background or border\n   * @default \"primary\"\n   */\n  variant?: SFBadgeVariant;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** Content rendered inside the badge. */\n  children: ReactNode;\n  /** Icon component rendered alongside the text. */\n  icon?: ElementType;\n  /**\n   * Position of the icon relative to the text.\n   * @default \"left\"\n   */\n  iconPosition?: \"left\" | \"right\";\n  /** When provided, renders a dismiss button on the right. */\n  onDismiss?: () => void;\n  /** Shows a loading spinner, replacing the icon slot. */\n  loading?: boolean;\n  /** Renders a small colored status dot before the text. */\n  dot?: BadgeDotColor;\n  /** Wraps the badge in a Tooltip with this content. Requires a TooltipProvider ancestor. */\n  tooltip?: ReactNode;\n} & (\n  | { onClick?: (e: MouseEvent<HTMLButtonElement>) => void; href?: never }\n  | { href?: string; onClick?: never }\n);\n\n/**\n * Small status label for categorizing or highlighting content.\n * Supports icons, loading state, status dots, dismiss, tooltip, and interactive (button/link) modes.\n *\n * @example\n * ```tsx\n * <Badge variant=\"primary\">Active</Badge>\n * <Badge variant=\"success\" dot=\"green\">Online</Badge>\n * <Badge onClick={() => apply()}>Apply filter</Badge>\n * ```\n */\nexport function Badge({\n  variant = SF_BADGE_DEFAULT_VARIANTS.variant,\n  className,\n  children,\n  icon: Icon,\n  iconPosition = \"left\",\n  onDismiss,\n  loading,\n  dot,\n  tooltip,\n  ...interactiveProps\n}: BadgeProps) {\n  const LinkComponent = useLinkComponent();\n\n  const isInteractive =\n    \"onClick\" in interactiveProps\n      ? !!interactiveProps.onClick\n      : \"href\" in interactiveProps\n        ? !!interactiveProps.href\n        : false;\n\n  const variantClasses = badgeVariants({ variant });\n  const combinedClasses = cn(\n    variantClasses,\n    isInteractive && \"cursor-pointer transition-opacity hover:opacity-80\",\n    className\n  );\n\n  // Build inner content\n  const leftIcon = loading ? (\n    <Loader size={12} />\n  ) : Icon && iconPosition === \"left\" ? (\n    <Icon className=\"size-3\" />\n  ) : null;\n\n  const rightIcon =\n    !loading && Icon && iconPosition === \"right\" ? (\n      <Icon className=\"size-3\" />\n    ) : null;\n\n  const dotElement = dot ? (\n    <span className={cn(\"size-1.5 rounded-full\", DOT_COLORS[dot])} />\n  ) : null;\n\n  const dismissButton = onDismiss ? (\n    <button\n      type=\"button\"\n      onClick={(e) => {\n        e.stopPropagation();\n        onDismiss();\n      }}\n      className=\"-mr-0.5 ml-0.5 inline-flex size-3 cursor-pointer items-center justify-center rounded-full opacity-70 hover:opacity-100\"\n      aria-label=\"Remove\"\n    >\n      <svg\n        className=\"size-2.5\"\n        viewBox=\"0 0 12 12\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n      >\n        <path d=\"M3 3l6 6M9 3l-6 6\" />\n      </svg>\n    </button>\n  ) : null;\n\n  const content = (\n    <>\n      {dotElement}\n      {leftIcon}\n      {children}\n      {rightIcon}\n      {dismissButton}\n    </>\n  );\n\n  // Determine the element to render\n  let badge: ReactNode;\n\n  if (\"href\" in interactiveProps && interactiveProps.href) {\n    badge = (\n      <LinkComponent href={interactiveProps.href} className={combinedClasses}>\n        {content}\n      </LinkComponent>\n    );\n  } else if (\"onClick\" in interactiveProps && interactiveProps.onClick) {\n    const handleClick = interactiveProps.onClick;\n    badge = (\n      <button type=\"button\" onClick={handleClick} className={combinedClasses}>\n        {content}\n      </button>\n    );\n  } else {\n    badge = <span className={combinedClasses}>{content}</span>;\n  }\n\n  if (tooltip) {\n    return <Tooltip content={tooltip}>{badge}</Tooltip>;\n  }\n\n  return badge;\n}\n"],"mappings":";;;;;;;;AAUA,IAAa,uBACX;;AAGF,IAAa,oBAAoB,EAC/B,SAAS;CACP,SAAS;EACP,SAAS;EACT,aAAa;EACd;CACD,WAAW;EACT,SAAS;EACT,aAAa;EACd;CACD,aAAa;EACX,SAAS;EACT,aAAa;EACd;CACD,SAAS;EACP,SAAS;EACT,aAAa;EACd;CACD,MAAM;EACJ,SACE;EACF,aAAa;EACd;CACD,SAAS;EACP,SAAS;EACT,aAAa;EACd;CACD,SAAS;EACP,SAAS;EACT,aAAa;EACd;CACD,MAAM;EACJ,SAAS;EACT,aAAa;EACd;CACD,OAAO;EACL,SAAS;EACT,aAAa;EACd;CACF,EACF;AAED,IAAa,4BAA4B,EACvC,SAAS,WACV;AASD,SAAgB,cAAc,EAC5B,UAAU,0BAA0B,YACZ,EAAE,EAAE;AAC5B,QAAO,GAEL,sBAEA,kBAAkB,QAAQ,SAAS,QACpC;;AAMH,IAAM,aAAa;CACjB,OAAO;CACP,KAAK;CACL,QAAQ;CACR,MAAM;CACN,MAAM;CACP;;;;;;;;;;;;AAmED,SAAgB,MAAM,EACpB,UAAU,0BAA0B,SACpC,WACA,UACA,MAAM,MACN,eAAe,QACf,WACA,SACA,KACA,SACA,GAAG,oBACU;CACb,MAAM,gBAAgB,kBAAkB;CAExC,MAAM,gBACJ,aAAa,mBACT,CAAC,CAAC,iBAAiB,UACnB,UAAU,mBACR,CAAC,CAAC,iBAAiB,OACnB;CAGR,MAAM,kBAAkB,GADD,cAAc,EAAE,SAAS,CAAC,EAG/C,iBAAiB,sDACjB,UACD;CAGD,MAAM,WAAW,UACf,oBAAC,QAAD,EAAQ,MAAM,IAAM,CAAA,GAClB,QAAQ,iBAAiB,SAC3B,oBAAC,MAAD,EAAM,WAAU,UAAW,CAAA,GACzB;CAEJ,MAAM,YACJ,CAAC,WAAW,QAAQ,iBAAiB,UACnC,oBAAC,MAAD,EAAM,WAAU,UAAW,CAAA,GACzB;CA6BN,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA;EA5BiB,MACjB,oBAAC,QAAD,EAAM,WAAW,GAAG,yBAAyB,WAAW,KAAK,EAAI,CAAA,GAC/D;EA4BC;EACA;EACA;EA5BiB,YACpB,oBAAC,UAAD;GACE,MAAK;GACL,UAAU,MAAM;AACd,MAAE,iBAAiB;AACnB,eAAW;;GAEb,WAAU;GACV,cAAW;aAEX,oBAAC,OAAD;IACE,WAAU;IACV,SAAQ;IACR,MAAK;IACL,QAAO;IACP,aAAY;IACZ,eAAc;cAEd,oBAAC,QAAD,EAAM,GAAE,qBAAsB,CAAA;IAC1B,CAAA;GACC,CAAA,GACP;EASC,EAAA,CAAA;CAIL,IAAI;AAEJ,KAAI,UAAU,oBAAoB,iBAAiB,KACjD,SACE,oBAAC,eAAD;EAAe,MAAM,iBAAiB;EAAM,WAAW;YACpD;EACa,CAAA;UAET,aAAa,oBAAoB,iBAAiB,SAAS;EACpE,MAAM,cAAc,iBAAiB;AACrC,UACE,oBAAC,UAAD;GAAQ,MAAK;GAAS,SAAS;GAAa,WAAW;aACpD;GACM,CAAA;OAGX,SAAQ,oBAAC,QAAD;EAAM,WAAW;YAAkB;EAAe,CAAA;AAG5D,KAAI,QACF,QAAO,oBAAC,SAAD;EAAS,SAAS;YAAU;EAAgB,CAAA;AAGrD,QAAO"}

package/dist/banner-B_6oBrsu.js

@@ -0,0 +1,54 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { isValidElement } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/banner/banner.tsx
+/** Base styles applied to all banner variants. */
+var SF_BANNER_BASE_STYLES = "flex w-full items-center gap-2 rounded-lg border px-4 py-1.5 text-base";
+/** Banner variant definitions mapping variant names to their Tailwind classes and descriptions. */
+var SF_BANNER_VARIANTS = { variant: {
+	default: {
+		classes: "bg-sf-info/20 border-sf-info text-sf-link selection:bg-sf-info-tint",
+		description: "Informational banner for general messages"
+	},
+	alert: {
+		classes: "bg-sf-warning/20 border-sf-warning text-sf-warning selection:bg-sf-warning-tint",
+		description: "Warning banner for cautionary messages"
+	},
+	error: {
+		classes: "bg-sf-danger/20 border-sf-danger text-sf-danger selection:bg-sf-danger-tint",
+		description: "Error banner for critical issues"
+	}
+} };
+var SF_BANNER_DEFAULT_VARIANTS = { variant: "default" };
+function bannerVariants({ variant = SF_BANNER_DEFAULT_VARIANTS.variant } = {}) {
+	return cn(SF_BANNER_BASE_STYLES, SF_BANNER_VARIANTS.variant[variant].classes);
+}
+var BannerVariant = /* @__PURE__ */ function(BannerVariant) {
+	BannerVariant[BannerVariant["DEFAULT"] = 0] = "DEFAULT";
+	BannerVariant[BannerVariant["ALERT"] = 1] = "ALERT";
+	BannerVariant[BannerVariant["ERROR"] = 2] = "ERROR";
+	return BannerVariant;
+}({});
+/**
+* Full-width message bar for informational, warning, or error notices.
+*
+* @example
+* ```tsx
+* <Banner variant="alert" icon={<WarningCircle />}>
+*   Review your billing information.
+* </Banner>
+* ```
+*/
+function Banner({ icon, children, text, variant = SF_BANNER_DEFAULT_VARIANTS.variant, className }) {
+	const value = children ?? text;
+	const content = isValidElement(value) ? value : /* @__PURE__ */ jsx("p", { children: value });
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(bannerVariants({ variant }), className),
+		children: [icon, content]
+	});
+}
+//#endregion
+export { BannerVariant as n, Banner as t };
+
+//# sourceMappingURL=banner-B_6oBrsu.js.map

package/dist/banner-B_6oBrsu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"banner-B_6oBrsu.js","names":[],"sources":["../src/components/banner/banner.tsx"],"sourcesContent":["import { type ReactNode, isValidElement } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\n\n/** Base styles applied to all banner variants. */\nexport const SF_BANNER_BASE_STYLES =\n  \"flex w-full items-center gap-2 rounded-lg border px-4 py-1.5 text-base\";\n\n/** Banner variant definitions mapping variant names to their Tailwind classes and descriptions. */\nexport const SF_BANNER_VARIANTS = {\n  variant: {\n    default: {\n      classes:\n        \"bg-sf-info/20 border-sf-info text-sf-link selection:bg-sf-info-tint\",\n      description: \"Informational banner for general messages\",\n    },\n    alert: {\n      classes:\n        \"bg-sf-warning/20 border-sf-warning text-sf-warning selection:bg-sf-warning-tint\",\n      description: \"Warning banner for cautionary messages\",\n    },\n    error: {\n      classes:\n        \"bg-sf-danger/20 border-sf-danger text-sf-danger selection:bg-sf-danger-tint\",\n      description: \"Error banner for critical issues\",\n    },\n  },\n} as const;\n\nexport const SF_BANNER_DEFAULT_VARIANTS = {\n  variant: \"default\",\n} as const;\n\n// Derived types from SF_BANNER_VARIANTS\nexport type SFBannerVariant = keyof typeof SF_BANNER_VARIANTS.variant;\n\nexport interface SFBannerVariantsProps {\n  /**\n   * Visual style of the banner.\n   * - `\"default\"` — Informational banner for general messages\n   * - `\"alert\"` — Warning banner for cautionary messages\n   * - `\"error\"` — Error banner for critical issues\n   * @default \"default\"\n   */\n  variant?: SFBannerVariant;\n}\n\nexport function bannerVariants({\n  variant = SF_BANNER_DEFAULT_VARIANTS.variant,\n}: SFBannerVariantsProps = {}) {\n  return cn(\n    // Base styles (exported as SF_BANNER_BASE_STYLES for Figma plugin)\n    SF_BANNER_BASE_STYLES,\n    // Apply variant styles from SF_BANNER_VARIANTS\n    SF_BANNER_VARIANTS.variant[variant].classes\n  );\n}\n\n// Legacy enum for backwards compatibility\nexport enum BannerVariant {\n  DEFAULT,\n  ALERT,\n  ERROR,\n}\n\n/**\n * Banner component props.\n *\n * @example\n * ```tsx\n * <Banner>This is an informational banner.</Banner>\n * <Banner variant=\"alert\">Your session will expire soon.</Banner>\n * <Banner variant=\"error\">We couldn't save your changes.</Banner>\n * ```\n */\nexport interface BannerProps {\n  /** Icon element rendered before the banner text (e.g. from `@phosphor-icons/react`). */\n  icon?: ReactNode;\n  /** @deprecated Use `children` instead. Will be removed in a future major version. */\n  text?: string;\n  /** Banner message content. Accepts strings or custom React elements. */\n  children?: ReactNode;\n  /**\n   * Visual style of the banner.\n   * - `\"default\"` — Informational blue banner for general messages\n   * - `\"alert\"` — Warning yellow banner for cautionary messages\n   * - `\"error\"` — Error red banner for critical issues\n   * @default \"default\"\n   */\n  variant?: SFBannerVariant;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n}\n\n/**\n * Full-width message bar for informational, warning, or error notices.\n *\n * @example\n * ```tsx\n * <Banner variant=\"alert\" icon={<WarningCircle />}>\n *   Review your billing information.\n * </Banner>\n * ```\n */\nexport function Banner({\n  icon,\n  children,\n  text,\n  variant = SF_BANNER_DEFAULT_VARIANTS.variant,\n  className,\n}: BannerProps) {\n  // Prefer children over deprecated text prop\n  const value = children ?? text;\n\n  const content = isValidElement(value) ? value : <p>{value}</p>;\n\n  return (\n    <div className={cn(bannerVariants({ variant }), className)}>\n      {icon}\n      {content}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAKA,IAAa,wBACX;;AAGF,IAAa,qBAAqB,EAChC,SAAS;CACP,SAAS;EACP,SACE;EACF,aAAa;EACd;CACD,OAAO;EACL,SACE;EACF,aAAa;EACd;CACD,OAAO;EACL,SACE;EACF,aAAa;EACd;CACF,EACF;AAED,IAAa,6BAA6B,EACxC,SAAS,WACV;AAgBD,SAAgB,eAAe,EAC7B,UAAU,2BAA2B,YACZ,EAAE,EAAE;AAC7B,QAAO,GAEL,uBAEA,mBAAmB,QAAQ,SAAS,QACrC;;AAIH,IAAY,gBAAL,yBAAA,eAAA;AACL,eAAA,cAAA,aAAA,KAAA;AACA,eAAA,cAAA,WAAA,KAAA;AACA,eAAA,cAAA,WAAA,KAAA;;KACD;;;;;;;;;;;AAyCD,SAAgB,OAAO,EACrB,MACA,UACA,MACA,UAAU,2BAA2B,SACrC,aACc;CAEd,MAAM,QAAQ,YAAY;CAE1B,MAAM,UAAU,eAAe,MAAM,GAAG,QAAQ,oBAAC,KAAD,EAAA,UAAI,OAAU,CAAA;AAE9D,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,eAAe,EAAE,SAAS,CAAC,EAAE,UAAU;YAA1D,CACG,MACA,QACG"}

package/dist/breadcrumbs-BlmeYfgq.js

@@ -0,0 +1,128 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { n as useLinkComponent } from "./link-provider-BUZKXaNE.js";
+import { t as Button } from "./button-De0267YU.js";
+import { t as SkeletonLine } from "./skeleton-line-Do3UmGk9.js";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, CopyIcon } from "@phosphor-icons/react";
+//#region src/components/breadcrumbs/breadcrumbs.tsx
+/** Breadcrumbs size variant definitions. */
+var SF_BREADCRUMBS_VARIANTS = { size: {
+	sm: {
+		classes: "text-sm h-10 gap-0.5",
+		description: "Compact breadcrumbs for dense UIs"
+	},
+	base: {
+		classes: "text-base h-12 gap-1",
+		description: "Default breadcrumbs size"
+	}
+} };
+var SF_BREADCRUMBS_DEFAULT_VARIANTS = { size: "base" };
+function breadcrumbsVariants({ size = SF_BREADCRUMBS_DEFAULT_VARIANTS.size } = {}) {
+	return cn("group mr-4 hidden min-w-0 grow items-center sm:flex", SF_BREADCRUMBS_VARIANTS.size[size].classes);
+}
+var Link = ({ href, icon, children }) => {
+	return /* @__PURE__ */ jsxs(useLinkComponent(), {
+		to: href,
+		className: "flex min-w-0 items-center gap-1 text-sf-subtle no-underline",
+		children: [!!icon && /* @__PURE__ */ jsx("span", {
+			className: "flex shrink-0 items-center",
+			children: icon
+		}), children]
+	});
+};
+function Current({ children, icon, loading }) {
+	if (loading) return /* @__PURE__ */ jsxs("div", {
+		className: "flex w-[125px] min-w-0 items-center gap-1",
+		children: [icon && /* @__PURE__ */ jsx("span", {
+			className: "flex shrink-0 items-center",
+			children: icon
+		}), /* @__PURE__ */ jsx(SkeletonLine, {})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-1 truncate font-medium",
+		"aria-current": "page",
+		children: [icon && /* @__PURE__ */ jsx("span", {
+			className: "flex shrink-0 items-center",
+			children: icon
+		}), children]
+	});
+}
+function Separator() {
+	return /* @__PURE__ */ jsx("span", {
+		className: "flex items-center text-sf-inactive",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("svg", {
+			width: "24",
+			height: "24",
+			fill: "none",
+			viewBox: "0 0 24 24",
+			children: /* @__PURE__ */ jsx("path", {
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: "1.5",
+				d: "M10.75 8.75L14.25 12L10.75 15.25"
+			})
+		})
+	});
+}
+function Clipboard({ text }) {
+	const [isCopied, setIsCopied] = useState(false);
+	useEffect(() => {
+		if (!isCopied) return;
+		const timeoutId = setTimeout(() => setIsCopied(false), 2e3);
+		return () => clearTimeout(timeoutId);
+	}, [isCopied]);
+	const handleCopyDeeplink = async () => {
+		if (!text) return;
+		try {
+			await navigator.clipboard.writeText(text);
+			setIsCopied(true);
+		} catch (err) {
+			console.error("Failed to copy deeplink:", err);
+		}
+	};
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		shape: "square",
+		size: "sm",
+		className: "opacity-0 transition-[opacity] group-hover:opacity-100",
+		onClick: handleCopyDeeplink,
+		title: "Click to copy",
+		"aria-label": "Copy",
+		children: isCopied ? /* @__PURE__ */ jsx(CheckIcon, {
+			weight: "bold",
+			className: "text-sf-success"
+		}) : /* @__PURE__ */ jsx(CopyIcon, { weight: "regular" })
+	});
+}
+/**
+* Navigation breadcrumb trail showing the current page's location in a hierarchy.
+* Compound component with `Breadcrumbs.Link`, `Breadcrumbs.Current`, `Breadcrumbs.Separator`, and `Breadcrumbs.Clipboard`.
+*
+* @example
+* ```tsx
+* <Breadcrumbs>
+*   <Breadcrumbs.Link href="/">Home</Breadcrumbs.Link>
+*   <Breadcrumbs.Separator />
+*   <Breadcrumbs.Current>Dashboard</Breadcrumbs.Current>
+* </Breadcrumbs>
+* ```
+*/
+function Breadcrumb({ children, size = "base", className }) {
+	return /* @__PURE__ */ jsx("nav", {
+		className: cn(breadcrumbsVariants({ size }), className),
+		"aria-label": "breadcrumb",
+		children
+	});
+}
+Breadcrumb.Link = Link;
+Breadcrumb.Current = Current;
+Breadcrumb.Separator = Separator;
+Breadcrumb.Clipboard = Clipboard;
+//#endregion
+export { breadcrumbsVariants as i, SF_BREADCRUMBS_DEFAULT_VARIANTS as n, SF_BREADCRUMBS_VARIANTS as r, Breadcrumb as t };
+
+//# sourceMappingURL=breadcrumbs-BlmeYfgq.js.map

package/dist/breadcrumbs-BlmeYfgq.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs-BlmeYfgq.js","names":[],"sources":["../src/components/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":["import { CheckIcon, CopyIcon } from \"@phosphor-icons/react\";\nimport { useEffect, useState, type PropsWithChildren } from \"react\";\n\nimport { Button } from \"../../components/button\";\nimport { SkeletonLine } from \"../../components/loader/skeleton-line\";\nimport { cn } from \"../../utils/cn\";\nimport { useLinkComponent } from \"../../utils/link-provider\";\n\n/** Breadcrumbs size variant definitions. */\nexport const SF_BREADCRUMBS_VARIANTS = {\n  size: {\n    sm: {\n      classes: \"text-sm h-10 gap-0.5\",\n      description: \"Compact breadcrumbs for dense UIs\",\n    },\n    base: {\n      classes: \"text-base h-12 gap-1\",\n      description: \"Default breadcrumbs size\",\n    },\n  },\n} as const;\n\nexport const SF_BREADCRUMBS_DEFAULT_VARIANTS = {\n  size: \"base\",\n} as const;\n\nexport type SFBreadcrumbsSize = keyof typeof SF_BREADCRUMBS_VARIANTS.size;\n\nexport interface SFBreadcrumbsVariantsProps {\n  /**\n   * Size of the breadcrumbs.\n   * - `\"sm\"` — Compact breadcrumbs for dense UIs\n   * - `\"base\"` — Default breadcrumbs size\n   * @default \"base\"\n   */\n  size?: SFBreadcrumbsSize;\n}\n\nexport function breadcrumbsVariants({\n  size = SF_BREADCRUMBS_DEFAULT_VARIANTS.size,\n}: SFBreadcrumbsVariantsProps = {}) {\n  return cn(\n    \"group mr-4 hidden min-w-0 grow items-center sm:flex\",\n    SF_BREADCRUMBS_VARIANTS.size[size].classes\n  );\n}\n\nexport interface BreadcrumbsItemProps {\n  href: string;\n  icon?: React.ReactNode;\n}\n\nconst Link = ({\n  href,\n  icon,\n  children,\n}: PropsWithChildren<BreadcrumbsItemProps>) => {\n  const LinkComponent = useLinkComponent();\n\n  return (\n    <LinkComponent\n      to={href}\n      className=\"flex min-w-0 items-center gap-1 text-sf-subtle no-underline\"\n    >\n      {!!icon && <span className=\"flex shrink-0 items-center\">{icon}</span>}\n      {children}\n    </LinkComponent>\n  );\n};\n\ninterface BreadcrumbsCurrentProps {\n  loading?: boolean;\n  icon?: React.ReactNode;\n}\n\nfunction Current({\n  children,\n  icon,\n  loading,\n}: PropsWithChildren<BreadcrumbsCurrentProps>) {\n  if (loading) {\n    return (\n      <div className=\"flex w-[125px] min-w-0 items-center gap-1\">\n        {icon && <span className=\"flex shrink-0 items-center\">{icon}</span>}\n        <SkeletonLine />\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className=\"flex items-center gap-1 truncate font-medium\"\n      aria-current=\"page\"\n    >\n      {icon && <span className=\"flex shrink-0 items-center\">{icon}</span>}\n      {children}\n    </div>\n  );\n}\n\nfunction Separator() {\n  return (\n    <span className=\"flex items-center text-sf-inactive\" aria-hidden=\"true\">\n      <svg width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\">\n        <path\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"1.5\"\n          d=\"M10.75 8.75L14.25 12L10.75 15.25\"\n        />\n      </svg>\n    </span>\n  );\n}\n\nfunction Clipboard({ text }: { text: string }) {\n  const [isCopied, setIsCopied] = useState(false);\n\n  useEffect(() => {\n    if (!isCopied) return;\n\n    const timeoutId = setTimeout(() => setIsCopied(false), 2000);\n    return () => clearTimeout(timeoutId);\n  }, [isCopied]);\n\n  const handleCopyDeeplink = async () => {\n    if (!text) return;\n\n    try {\n      await navigator.clipboard.writeText(text);\n      setIsCopied(true);\n    } catch (err) {\n      console.error(\"Failed to copy deeplink:\", err);\n    }\n  };\n\n  return (\n    <Button\n      variant=\"ghost\"\n      shape=\"square\"\n      size=\"sm\"\n      className=\"opacity-0 transition-[opacity] group-hover:opacity-100\"\n      onClick={handleCopyDeeplink}\n      title=\"Click to copy\"\n      aria-label=\"Copy\"\n    >\n      {isCopied ? (\n        <CheckIcon weight=\"bold\" className=\"text-sf-success\" />\n      ) : (\n        <CopyIcon weight=\"regular\" />\n      )}\n    </Button>\n  );\n}\n\n/**\n * Breadcrumbs component props.\n *\n * @example\n * ```tsx\n * <Breadcrumbs>\n *   <Breadcrumbs.Link href=\"/\">Home</Breadcrumbs.Link>\n *   <Breadcrumbs.Separator />\n *   <Breadcrumbs.Link href=\"/docs\">Docs</Breadcrumbs.Link>\n *   <Breadcrumbs.Separator />\n *   <Breadcrumbs.Current>Current Page</Breadcrumbs.Current>\n * </Breadcrumbs>\n * ```\n */\nexport interface BreadcrumbsProps\n  extends PropsWithChildren, SFBreadcrumbsVariantsProps {\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n}\n\n/**\n * Navigation breadcrumb trail showing the current page's location in a hierarchy.\n * Compound component with `Breadcrumbs.Link`, `Breadcrumbs.Current`, `Breadcrumbs.Separator`, and `Breadcrumbs.Clipboard`.\n *\n * @example\n * ```tsx\n * <Breadcrumbs>\n *   <Breadcrumbs.Link href=\"/\">Home</Breadcrumbs.Link>\n *   <Breadcrumbs.Separator />\n *   <Breadcrumbs.Current>Dashboard</Breadcrumbs.Current>\n * </Breadcrumbs>\n * ```\n */\nexport function Breadcrumb({\n  children,\n  size = \"base\",\n  className,\n}: BreadcrumbsProps) {\n  return (\n    <nav\n      className={cn(breadcrumbsVariants({ size }), className)}\n      aria-label=\"breadcrumb\"\n    >\n      {children}\n    </nav>\n  );\n}\n\nBreadcrumb.Link = Link;\nBreadcrumb.Current = Current;\nBreadcrumb.Separator = Separator;\nBreadcrumb.Clipboard = Clipboard;\n"],"mappings":";;;;;;;;;;AASA,IAAa,0BAA0B,EACrC,MAAM;CACJ,IAAI;EACF,SAAS;EACT,aAAa;EACd;CACD,MAAM;EACJ,SAAS;EACT,aAAa;EACd;CACF,EACF;AAED,IAAa,kCAAkC,EAC7C,MAAM,QACP;AAcD,SAAgB,oBAAoB,EAClC,OAAO,gCAAgC,SACT,EAAE,EAAE;AAClC,QAAO,GACL,uDACA,wBAAwB,KAAK,MAAM,QACpC;;AAQH,IAAM,QAAQ,EACZ,MACA,MACA,eAC6C;AAG7C,QACE,qBAHoB,kBAAkB,EAGtC;EACE,IAAI;EACJ,WAAU;YAFZ,CAIG,CAAC,CAAC,QAAQ,oBAAC,QAAD;GAAM,WAAU;aAA8B;GAAY,CAAA,EACpE,SACa;;;AASpB,SAAS,QAAQ,EACf,UACA,MACA,WAC6C;AAC7C,KAAI,QACF,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACG,QAAQ,oBAAC,QAAD;GAAM,WAAU;aAA8B;GAAY,CAAA,EACnE,oBAAC,cAAD,EAAgB,CAAA,CACZ;;AAIV,QACE,qBAAC,OAAD;EACE,WAAU;EACV,gBAAa;YAFf,CAIG,QAAQ,oBAAC,QAAD;GAAM,WAAU;aAA8B;GAAY,CAAA,EAClE,SACG;;;AAIV,SAAS,YAAY;AACnB,QACE,oBAAC,QAAD;EAAM,WAAU;EAAqC,eAAY;YAC/D,oBAAC,OAAD;GAAK,OAAM;GAAK,QAAO;GAAK,MAAK;GAAO,SAAQ;aAC9C,oBAAC,QAAD;IACE,QAAO;IACP,eAAc;IACd,gBAAe;IACf,aAAY;IACZ,GAAE;IACF,CAAA;GACE,CAAA;EACD,CAAA;;AAIX,SAAS,UAAU,EAAE,QAA0B;CAC7C,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;AAE/C,iBAAgB;AACd,MAAI,CAAC,SAAU;EAEf,MAAM,YAAY,iBAAiB,YAAY,MAAM,EAAE,IAAK;AAC5D,eAAa,aAAa,UAAU;IACnC,CAAC,SAAS,CAAC;CAEd,MAAM,qBAAqB,YAAY;AACrC,MAAI,CAAC,KAAM;AAEX,MAAI;AACF,SAAM,UAAU,UAAU,UAAU,KAAK;AACzC,eAAY,KAAK;WACV,KAAK;AACZ,WAAQ,MAAM,4BAA4B,IAAI;;;AAIlD,QACE,oBAAC,QAAD;EACE,SAAQ;EACR,OAAM;EACN,MAAK;EACL,WAAU;EACV,SAAS;EACT,OAAM;EACN,cAAW;YAEV,WACC,oBAAC,WAAD;GAAW,QAAO;GAAO,WAAU;GAAoB,CAAA,GAEvD,oBAAC,UAAD,EAAU,QAAO,WAAY,CAAA;EAExB,CAAA;;;;;;;;;;;;;;;AAqCb,SAAgB,WAAW,EACzB,UACA,OAAO,QACP,aACmB;AACnB,QACE,oBAAC,OAAD;EACE,WAAW,GAAG,oBAAoB,EAAE,MAAM,CAAC,EAAE,UAAU;EACvD,cAAW;EAEV;EACG,CAAA;;AAIV,WAAW,OAAO;AAClB,WAAW,UAAU;AACrB,WAAW,YAAY;AACvB,WAAW,YAAY"}

package/dist/button-De0267YU.js

@@ -0,0 +1,170 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { n as useLinkComponent } from "./link-provider-BUZKXaNE.js";
+import { t as Loader } from "./loader-DAcc-Uag.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowsClockwise } from "@phosphor-icons/react";
+//#region src/components/button/button.tsx
+/** Button variant definitions mapping shape, size, and variant names to their Tailwind classes. */
+var SF_BUTTON_VARIANTS = {
+	shape: {
+		base: {
+			classes: "",
+			description: "Default rectangular button shape"
+		},
+		square: {
+			classes: "items-center justify-center p-0",
+			description: "Square button for icon-only actions"
+		},
+		circle: {
+			classes: "items-center justify-center p-0 rounded-full",
+			description: "Circular button for icon-only actions"
+		}
+	},
+	size: {
+		xs: {
+			classes: "h-5 gap-1 rounded-sm px-1.5 text-xs",
+			description: "Extra small button for compact UIs"
+		},
+		sm: {
+			classes: "h-6.5 gap-1 rounded-md px-2 text-xs",
+			description: "Small button for secondary actions"
+		},
+		base: {
+			classes: "h-9 gap-1.5 rounded-lg px-3 text-base",
+			description: "Default button size"
+		},
+		lg: {
+			classes: "h-10 gap-2 rounded-lg px-4 text-base",
+			description: "Large button for primary CTAs"
+		}
+	},
+	compactSize: {
+		xs: { classes: "size-3.5" },
+		sm: { classes: "size-6.5" },
+		base: { classes: "size-9" },
+		lg: { classes: "size-10" }
+	},
+	variant: {
+		primary: {
+			classes: "bg-sf-brand !text-white hover:bg-sf-brand-hover focus:bg-sf-brand-hover disabled:bg-sf-brand/50",
+			description: "High-emphasis button for primary actions"
+		},
+		secondary: {
+			classes: "bg-sf-control !text-sf-default ring not-disabled:hover:border-secondary! not-disabled:hover:bg-sf-control disabled:bg-sf-control/50 disabled:!text-sf-default/70 ring-sf-line data-[state=open]:bg-sf-control",
+			description: "Default button style for most actions"
+		},
+		ghost: {
+			classes: "text-sf-default hover:bg-sf-tint shadow-none bg-inherit",
+			description: "Minimal button with no background"
+		},
+		destructive: {
+			classes: "bg-sf-danger !text-white hover:bg-sf-danger/70",
+			description: "Danger button for destructive actions like delete"
+		},
+		"secondary-destructive": {
+			classes: "bg-sf-control !text-sf-danger ring not-disabled:hover:border-secondary! not-disabled:hover:bg-sf-control disabled:bg-sf-control/50 disabled:!text-sf-danger/70 ring-sf-line data-[state=open]:bg-sf-control",
+			description: "Secondary button with destructive text for less prominent dangerous actions"
+		},
+		outline: {
+			classes: "bg-sf-base text-sf-default ring ring-sf-line",
+			description: "Bordered button with transparent background"
+		}
+	}
+};
+var SF_BUTTON_DEFAULT_VARIANTS = {
+	shape: "base",
+	size: "base",
+	variant: "secondary"
+};
+function buttonVariants({ variant = SF_BUTTON_DEFAULT_VARIANTS.variant, size = SF_BUTTON_DEFAULT_VARIANTS.size, shape = SF_BUTTON_DEFAULT_VARIANTS.shape } = {}) {
+	const isCompactShape = shape === "square" || shape === "circle";
+	return cn("group flex w-max shrink-0 items-center font-medium select-none", "border-0 shadow-xs", "cursor-pointer", "disabled:cursor-not-allowed disabled:text-sf-subtle", SF_BUTTON_VARIANTS.variant[variant].classes, SF_BUTTON_VARIANTS.size[size].classes, SF_BUTTON_VARIANTS.shape[shape].classes, isCompactShape && SF_BUTTON_VARIANTS.compactSize[size].classes);
+}
+var renderIconNode = (IconComponent) => {
+	if (!IconComponent) return null;
+	if (React.isValidElement(IconComponent)) return IconComponent;
+	return /* @__PURE__ */ jsx(IconComponent, {});
+};
+/**
+* Primary action trigger. Supports multiple variants, sizes, shapes, icons, and loading state.
+*
+* @example
+* ```tsx
+* <Button variant="primary">Save</Button>
+* <Button variant="secondary" icon={PlusIcon}>Create Worker</Button>
+* ```
+*/
+var Button = React.forwardRef(({ children, className, disabled, loading, shape = "base", size = "base", variant = "secondary", icon: IconComponent, ...props }, ref) => {
+	const { type, ...restProps } = props;
+	return /* @__PURE__ */ jsxs("button", {
+		ref,
+		className: cn(buttonVariants({
+			variant,
+			size,
+			shape
+		}), "outline-none focus:opacity-100 focus-visible:ring-1 focus-visible:ring-sf-ring *:in-focus:opacity-100", disabled && "cursor-not-allowed opacity-50", className),
+		disabled: loading || disabled,
+		type: type ?? "button",
+		...restProps,
+		children: [
+			loading && /* @__PURE__ */ jsx(Loader, { size: size === "lg" ? 16 : 14 }),
+			!loading && renderIconNode(IconComponent),
+			children
+		]
+	});
+});
+Button.displayName = "Button";
+/**
+* Square button with a rotating arrows icon, used to trigger data refresh actions.
+*
+* @example
+* ```tsx
+* <RefreshButton loading={isRefreshing} onClick={refresh} />
+* ```
+*/
+var RefreshButton = ({ "aria-label": ariaLabel = "Refresh", loading, ...props }) => /* @__PURE__ */ jsx(Button, {
+	shape: "square",
+	"aria-label": ariaLabel,
+	...props,
+	children: /* @__PURE__ */ jsx(ArrowsClockwise, { className: cn({
+		"animate-refresh": loading,
+		"size-4.5": props.size === "base" || !props.size,
+		"size-4": props.size === "sm",
+		"size-5": props.size === "lg"
+	}) })
+});
+/**
+* Anchor element styled as a button. Integrates with `LinkProvider` for framework routing.
+*
+* @example
+* ```tsx
+* <LinkButton href="/settings" variant="ghost">Settings</LinkButton>
+* ```
+*/
+var LinkButton = React.forwardRef(({ children, className, external, href, shape = "base", size = "base", variant = "ghost", icon: IconComponent, ...props }, ref) => {
+	const LinkComponent = useLinkComponent();
+	const externalProps = external ? {
+		target: "_blank",
+		rel: "noopener noreferrer"
+	} : {};
+	return /* @__PURE__ */ jsxs(LinkComponent, {
+		ref,
+		className: cn(buttonVariants({
+			variant,
+			size,
+			shape
+		}), "flex items-center no-underline!", className),
+		href,
+		to: typeof href === "string" ? href : void 0,
+		...externalProps,
+		...props,
+		children: [renderIconNode(IconComponent), children]
+	});
+});
+LinkButton.displayName = "LinkButton";
+//#endregion
+export { buttonVariants as i, LinkButton as n, RefreshButton as r, Button as t };
+
+//# sourceMappingURL=button-De0267YU.js.map

package/dist/button-De0267YU.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-De0267YU.js","names":[],"sources":["../src/components/button/button.tsx"],"sourcesContent":["import { ArrowsClockwise, type Icon } from \"@phosphor-icons/react\";\nimport React from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { useLinkComponent } from \"../../utils/link-provider\";\nimport { Loader } from \"../loader/loader\";\n\n/** Button variant definitions mapping shape, size, and variant names to their Tailwind classes. */\nexport const SF_BUTTON_VARIANTS = {\n  shape: {\n    base: {\n      classes: \"\",\n      description: \"Default rectangular button shape\",\n    },\n    square: {\n      classes: \"items-center justify-center p-0\",\n      description: \"Square button for icon-only actions\",\n    },\n    circle: {\n      classes: \"items-center justify-center p-0 rounded-full\",\n      description: \"Circular button for icon-only actions\",\n    },\n  },\n  size: {\n    xs: {\n      classes: \"h-5 gap-1 rounded-sm px-1.5 text-xs\",\n      description: \"Extra small button for compact UIs\",\n    },\n    sm: {\n      classes: \"h-6.5 gap-1 rounded-md px-2 text-xs\",\n      description: \"Small button for secondary actions\",\n    },\n    base: {\n      classes: \"h-9 gap-1.5 rounded-lg px-3 text-base\",\n      description: \"Default button size\",\n    },\n    lg: {\n      classes: \"h-10 gap-2 rounded-lg px-4 text-base\",\n      description: \"Large button for primary CTAs\",\n    },\n  },\n  compactSize: {\n    xs: { classes: \"size-3.5\" },\n    sm: { classes: \"size-6.5\" },\n    base: { classes: \"size-9\" },\n    lg: { classes: \"size-10\" },\n  },\n  variant: {\n    primary: {\n      classes:\n        \"bg-sf-brand !text-white hover:bg-sf-brand-hover focus:bg-sf-brand-hover disabled:bg-sf-brand/50\",\n      description: \"High-emphasis button for primary actions\",\n    },\n    secondary: {\n      classes:\n        \"bg-sf-control !text-sf-default ring not-disabled:hover:border-secondary! not-disabled:hover:bg-sf-control disabled:bg-sf-control/50 disabled:!text-sf-default/70 ring-sf-line data-[state=open]:bg-sf-control\",\n      description: \"Default button style for most actions\",\n    },\n    ghost: {\n      classes: \"text-sf-default hover:bg-sf-tint shadow-none bg-inherit\",\n      description: \"Minimal button with no background\",\n    },\n    destructive: {\n      classes: \"bg-sf-danger !text-white hover:bg-sf-danger/70\",\n      description: \"Danger button for destructive actions like delete\",\n    },\n    \"secondary-destructive\": {\n      classes:\n        \"bg-sf-control !text-sf-danger ring not-disabled:hover:border-secondary! not-disabled:hover:bg-sf-control disabled:bg-sf-control/50 disabled:!text-sf-danger/70 ring-sf-line data-[state=open]:bg-sf-control\",\n      description:\n        \"Secondary button with destructive text for less prominent dangerous actions\",\n    },\n    outline: {\n      classes: \"bg-sf-base text-sf-default ring ring-sf-line\",\n      description: \"Bordered button with transparent background\",\n    },\n  },\n} as const;\n\nexport const SF_BUTTON_DEFAULT_VARIANTS = {\n  shape: \"base\",\n  size: \"base\",\n  variant: \"secondary\",\n} as const;\n\n// Derived types from SF_BUTTON_VARIANTS\nexport type SFButtonShape = keyof typeof SF_BUTTON_VARIANTS.shape;\nexport type SFButtonSize = keyof typeof SF_BUTTON_VARIANTS.size;\nexport type SFButtonVariant = keyof typeof SF_BUTTON_VARIANTS.variant;\n\nexport interface SFButtonVariantsProps {\n  /**\n   * Button shape.\n   * - `\"base\"` — Default rectangular button\n   * - `\"square\"` — Square button for icon-only actions\n   * - `\"circle\"` — Circular button for icon-only actions\n   * @default \"base\"\n   */\n  shape?: SFButtonShape;\n  /**\n   * Button size.\n   * - `\"xs\"` — Extra small for compact UIs\n   * - `\"sm\"` — Small for secondary actions\n   * - `\"base\"` — Default size\n   * - `\"lg\"` — Large for primary CTAs\n   * @default \"base\"\n   */\n  size?: SFButtonSize;\n  /**\n   * Visual style of the button.\n   * - `\"primary\"` — High-emphasis, brand-colored for primary actions\n   * - `\"secondary\"` — Default style with border for most actions\n   * - `\"ghost\"` — Minimal, no background for tertiary actions\n   * - `\"destructive\"` — Danger button for destructive actions\n   * - `\"secondary-destructive\"` — Secondary style with destructive text\n   * - `\"outline\"` — Bordered with transparent background\n   * @default \"secondary\"\n   */\n  variant?: SFButtonVariant;\n}\n\nexport function buttonVariants({\n  variant = SF_BUTTON_DEFAULT_VARIANTS.variant,\n  size = SF_BUTTON_DEFAULT_VARIANTS.size,\n  shape = SF_BUTTON_DEFAULT_VARIANTS.shape,\n}: SFButtonVariantsProps = {}) {\n  const isCompactShape = shape === \"square\" || shape === \"circle\";\n\n  return cn(\n    // Base styles\n    \"group flex w-max shrink-0 items-center font-medium select-none\",\n    \"border-0 shadow-xs\",\n    \"cursor-pointer\",\n    // Disabled state\n    \"disabled:cursor-not-allowed disabled:text-sf-subtle\",\n    // Apply variant, size, shape styles from SF_BUTTON_VARIANTS\n    SF_BUTTON_VARIANTS.variant[variant].classes,\n    SF_BUTTON_VARIANTS.size[size].classes,\n    SF_BUTTON_VARIANTS.shape[shape].classes,\n    isCompactShape && SF_BUTTON_VARIANTS.compactSize[size].classes\n  );\n}\n\n// Normalize icon prop to support both React elements and component types\nconst renderIconNode = (IconComponent?: Icon | React.ReactNode) => {\n  if (!IconComponent) return null;\n  if (React.isValidElement(IconComponent)) return IconComponent;\n  const Comp = IconComponent as React.ComponentType<Record<string, unknown>>;\n  return <Comp />;\n};\n\n/**\n * Button component props.\n *\n * Uses a discriminated union on `shape` so that icon-only buttons\n * (`shape=\"square\"` or `shape=\"circle\"`) require an `aria-label`.\n *\n * @example\n * ```tsx\n * <Button variant=\"primary\">Save</Button>\n * <Button variant=\"secondary\" shape=\"square\" icon={PlusIcon} aria-label=\"Add\" />\n * <Button variant=\"destructive\" loading>Deleting...</Button>\n * ```\n */\ntype ButtonBaseProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n  /** Content rendered inside the button. */\n  children?: React.ReactNode;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** Icon from `@phosphor-icons/react` or a React element. Rendered before children. */\n  icon?: Icon | React.ReactNode;\n  /** Shows a loading spinner and disables interaction. */\n  loading?: boolean;\n};\n\ntype ButtonWithTextProps = ButtonBaseProps & {\n  shape?: \"base\";\n  size?: SFButtonSize;\n  variant?: SFButtonVariant;\n};\n\ntype IconOnlyButtonProps = ButtonBaseProps & {\n  shape: \"square\" | \"circle\";\n  size?: SFButtonSize;\n  variant?: SFButtonVariant;\n  /** Required for icon-only buttons to provide accessible label for screen readers */\n  \"aria-label\": string;\n};\n\nexport type ButtonProps = ButtonWithTextProps | IconOnlyButtonProps;\n\n/**\n * LinkButton component props — renders an anchor styled as a button.\n *\n * @example\n * ```tsx\n * <LinkButton href=\"/docs\" variant=\"ghost\" icon={BookIcon}>Docs</LinkButton>\n * <LinkButton href=\"https://example.com\" external>Visit Site</LinkButton>\n * ```\n */\nexport type LinkButtonProps = React.AnchorHTMLAttributes<HTMLAnchorElement> &\n  SFButtonVariantsProps & {\n    /** Content rendered inside the link button. */\n    children?: React.ReactNode;\n    /** Additional CSS classes merged via `cn()`. */\n    className?: string;\n    /** Icon from `@phosphor-icons/react` or a React element. Rendered before children. */\n    icon?: Icon | React.ReactNode;\n    /** When `true`, opens in a new tab with `rel=\"noopener noreferrer\"`. */\n    external?: boolean;\n    linksExternal?: boolean;\n  };\n\n/**\n * Primary action trigger. Supports multiple variants, sizes, shapes, icons, and loading state.\n *\n * @example\n * ```tsx\n * <Button variant=\"primary\">Save</Button>\n * <Button variant=\"secondary\" icon={PlusIcon}>Create Worker</Button>\n * ```\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      children,\n      className,\n      disabled,\n      loading,\n      shape = \"base\",\n      size = \"base\",\n      variant = \"secondary\",\n      icon: IconComponent,\n      ...props\n    },\n    ref\n  ) => {\n    const { type, ...restProps } = props;\n    return (\n      <button\n        ref={ref}\n        className={cn(\n          buttonVariants({ variant, size, shape }),\n          \"outline-none focus:opacity-100 focus-visible:ring-1 focus-visible:ring-sf-ring *:in-focus:opacity-100\", // Focus styles\n          disabled && \"cursor-not-allowed opacity-50\",\n          className\n        )}\n        disabled={loading || disabled}\n        type={type ?? \"button\"}\n        {...restProps}\n      >\n        {loading && <Loader size={size === \"lg\" ? 16 : 14} />}\n        {!loading && renderIconNode(IconComponent)}\n\n        {children}\n      </button>\n    );\n  }\n);\n\nButton.displayName = \"Button\";\n\n/**\n * Square button with a rotating arrows icon, used to trigger data refresh actions.\n *\n * @example\n * ```tsx\n * <RefreshButton loading={isRefreshing} onClick={refresh} />\n * ```\n */\nexport const RefreshButton = ({\n  \"aria-label\": ariaLabel = \"Refresh\",\n  loading,\n  ...props\n}: ButtonProps) => (\n  <Button shape=\"square\" aria-label={ariaLabel} {...props}>\n    <ArrowsClockwise\n      className={cn({\n        \"animate-refresh\": loading,\n        \"size-4.5\": props.size === \"base\" || !props.size,\n        \"size-4\": props.size === \"sm\",\n        \"size-5\": props.size === \"lg\",\n      })}\n    />\n  </Button>\n);\n\n/**\n * Anchor element styled as a button. Integrates with `LinkProvider` for framework routing.\n *\n * @example\n * ```tsx\n * <LinkButton href=\"/settings\" variant=\"ghost\">Settings</LinkButton>\n * ```\n */\nexport const LinkButton = React.forwardRef<HTMLAnchorElement, LinkButtonProps>(\n  (\n    {\n      children,\n      className,\n      external,\n      href,\n      shape = \"base\",\n      size = \"base\",\n      variant = \"ghost\",\n      icon: IconComponent,\n      // linksExternal = false,\n      ...props\n    },\n    ref\n  ) => {\n    const LinkComponent = useLinkComponent();\n    const externalProps = external\n      ? { target: \"_blank\", rel: \"noopener noreferrer\" }\n      : {};\n\n    return (\n      <LinkComponent\n        ref={ref}\n        className={cn(\n          buttonVariants({ variant, size, shape }),\n          \"flex items-center no-underline!\",\n          className\n        )}\n        href={href}\n        to={typeof href === \"string\" ? href : undefined}\n        {...externalProps}\n        {...props}\n      >\n        {renderIconNode(IconComponent)}\n        {children}\n      </LinkComponent>\n    );\n  }\n);\n\nLinkButton.displayName = \"LinkButton\";\n"],"mappings":"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"}