@signalflare-ai/ui 0.5.0

package/dist/toast-Nw28a5Cx.js

@@ -0,0 +1,161 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { t as Button } from "./button-De0267YU.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Toast, Toast as Toast$1 } from "@base-ui/react/toast";
+import { WarningIcon, WarningOctagonIcon } from "@phosphor-icons/react/dist/ssr";
+//#region src/components/toast/toast.tsx
+/**
+* Toast styling configuration for Figma plugin consumption.
+* Toast has no user-facing variants but documents the styling structure.
+*/
+var SF_TOAST_VARIANTS = {
+	root: {
+		classes: "rounded-lg border border-sf-fill bg-sf-control p-4 shadow-lg text-sf-default",
+		description: "Toast container with background, border, and shadow"
+	},
+	title: {
+		classes: "text-[0.975rem] leading-5 font-medium text-sf-default",
+		description: "Toast title with primary text color"
+	},
+	description: {
+		classes: "text-[0.925rem] leading-5 text-sf-subtle",
+		description: "Toast description with muted text color"
+	},
+	close: {
+		classes: "absolute top-2 right-2 flex h-5 w-5 items-center justify-center rounded border-none bg-transparent text-sf-subtle hover:bg-sf-fill-hover hover:text-sf-strong",
+		description: "Close button with X icon"
+	},
+	variant: {
+		default: {
+			classes: "border-sf-fill bg-sf-control",
+			description: "Default toast style"
+		},
+		error: {
+			classes: "border-sf-fill bg-sf-control [&_[data-toast-icon]]:text-[light-dark(var(--color-red-600),var(--color-red-400))] [&_[data-toast-title]]:text-[light-dark(var(--color-red-600),var(--color-red-400))]",
+			description: "Error toast for critical issues",
+			icon: WarningOctagonIcon
+		},
+		warning: {
+			classes: "border-sf-fill bg-sf-control [&_[data-toast-icon]]:text-[light-dark(var(--color-amber-700),var(--color-amber-500))] [&_[data-toast-title]]:text-[light-dark(var(--color-amber-700),var(--color-amber-500))]",
+			description: "Warning toast for cautionary messages",
+			icon: WarningIcon
+		}
+	}
+};
+var SF_TOAST_DEFAULT_VARIANTS = { variant: "default" };
+function toastVariants({ variant = SF_TOAST_DEFAULT_VARIANTS.variant } = {}) {
+	return cn("rounded-xl border bg-clip-padding p-4 shadow-lg", SF_TOAST_VARIANTS.variant[variant].classes);
+}
+function wrapManagerMethods(manager) {
+	return {
+		...manager,
+		add: (options) => {
+			return manager.add({ ...options });
+		},
+		update: (id, options) => {
+			return manager.update(id, { ...options });
+		},
+		promise: (promise, options) => {
+			return manager.promise(promise, {
+				loading: { ...options.loading },
+				success: typeof options.success === "function" ? (data) => ({ ...options.success(data) }) : { ...options.success },
+				error: typeof options.error === "function" ? (error) => ({ ...options.error(error) }) : { ...options.error }
+			});
+		}
+	};
+}
+var useSFToastManager = () => {
+	const manager = Toast.useToastManager();
+	return {
+		...wrapManagerMethods(manager),
+		toasts: manager.toasts
+	};
+};
+var createSFToastManager = () => {
+	return wrapManagerMethods(Toast.createToastManager());
+};
+/**
+* Toasty — toast notification provider and viewport.
+*
+* Renders a `Toast.Provider` with a fixed-position viewport in the bottom-right corner.
+* Toasts stack with smooth enter/exit animations, swipe-to-dismiss, and expand-on-hover.
+*
+* Built on `@base-ui/react/toast`.
+*
+* @example
+* ```tsx
+* <Toasty>
+*   <App />
+* </Toasty>
+* ```
+*/
+function Toasty({ children }) {
+	return /* @__PURE__ */ jsxs(Toast.Provider, { children: [children, /* @__PURE__ */ jsx(Toast.Portal, { children: /* @__PURE__ */ jsx(Toast.Viewport, {
+		className: "fixed top-auto right-4 bottom-4 z-10 mx-auto flex w-[calc(100%-2rem)] sm:right-8 sm:bottom-8 sm:w-[340px]",
+		children: /* @__PURE__ */ jsx(ToastList, {})
+	}) })] });
+}
+/** Alias for Toasty — provided for discoverability when migrating from other libraries */
+var ToastProvider = Toasty;
+function ToastList() {
+	const { toasts } = useSFToastManager();
+	return toasts.map((toast) => /* @__PURE__ */ jsxs(Toast.Root, {
+		toast,
+		className: cn("absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 h-[var(--height)] w-full origin-bottom select-none", toastVariants({ variant: toast.variant }), "[--gap:0.75rem] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))]", "[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]", "after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']", "data-[ending-style]:opacity-0 data-[expanded]:h-[var(--toast-height)] data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(150%)]", "data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]", "data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]", "data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]", "data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]", "[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)]"),
+		children: [/* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-[11px] bg-sf-control/90" }), /* @__PURE__ */ jsxs(Toast.Content, {
+			className: "isolate flex flex-col gap-1 transition-opacity [transition-duration:250ms] data-[behind]:pointer-events-none data-[behind]:opacity-0 data-[expanded]:pointer-events-auto data-[expanded]:opacity-100",
+			children: [toast.content ?? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", {
+				className: "flex items-start gap-2",
+				children: [/* @__PURE__ */ jsx(ToastIcon, { variant: toast.variant }), /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-1 overflow-hidden",
+					children: [
+						/* @__PURE__ */ jsx(Toast.Title, {
+							"data-toast-title": true,
+							className: "text-[0.975rem] leading-5 font-medium text-sf-default"
+						}),
+						/* @__PURE__ */ jsx(Toast.Description, { className: "text-[0.925rem] leading-5 text-sf-subtle" }),
+						!!toast.actions && /* @__PURE__ */ jsx("div", {
+							className: "mt-2 flex min-w-0 flex-nowrap gap-2 overflow-x-auto p-px",
+							children: toast.actions.map((actionProps, idx) => /* @__PURE__ */ jsx(Button, { ...actionProps }, idx))
+						})
+					]
+				})]
+			}) }), /* @__PURE__ */ jsx(Toast.Close, {
+				className: "absolute top-2 right-2 flex h-4 w-4 items-center justify-center rounded border-none bg-transparent text-current/50 hover:bg-sf-contrast/10 hover:text-current",
+				"aria-label": "Close",
+				children: /* @__PURE__ */ jsx(XIcon, { className: "h-3 w-3" })
+			})]
+		})]
+	}, toast.id));
+}
+function ToastIcon({ variant }) {
+	if (!variant || variant === "default") return null;
+	const variantConfig = SF_TOAST_VARIANTS.variant[variant];
+	if (!("icon" in variantConfig)) return null;
+	const Icon = variantConfig.icon;
+	return /* @__PURE__ */ jsx(Icon, {
+		"data-toast-icon": true,
+		className: "mt-0.5 h-4 w-4 shrink-0",
+		weight: "fill"
+	});
+}
+function XIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "24",
+		height: "24",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		children: [/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }), /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })]
+	});
+}
+//#endregion
+export { useSFToastManager as a, createSFToastManager as i, ToastProvider as n, Toasty as r, Toast$1 as t };
+
+//# sourceMappingURL=toast-Nw28a5Cx.js.map

package/dist/toast-Nw28a5Cx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-Nw28a5Cx.js","names":[],"sources":["../src/components/toast/toast.tsx"],"sourcesContent":["import {\n  Toast,\n  ToastManagerAddOptions,\n  ToastObject,\n} from \"@base-ui/react/toast\";\nimport {\n  WarningIcon,\n  WarningOctagonIcon,\n} from \"@phosphor-icons/react/dist/ssr\";\nimport type React from \"react\";\n\nimport { Button, ButtonProps } from \"../../components/button\";\nimport { cn } from \"../../utils/cn\";\n\n/**\n * Toast styling configuration for Figma plugin consumption.\n * Toast has no user-facing variants but documents the styling structure.\n */\nexport const SF_TOAST_VARIANTS = {\n  root: {\n    classes:\n      \"rounded-lg border border-sf-fill bg-sf-control p-4 shadow-lg text-sf-default\",\n    description: \"Toast container with background, border, and shadow\",\n  },\n  title: {\n    classes: \"text-[0.975rem] leading-5 font-medium text-sf-default\",\n    description: \"Toast title with primary text color\",\n  },\n  description: {\n    classes: \"text-[0.925rem] leading-5 text-sf-subtle\",\n    description: \"Toast description with muted text color\",\n  },\n  close: {\n    classes:\n      \"absolute top-2 right-2 flex h-5 w-5 items-center justify-center rounded border-none bg-transparent text-sf-subtle hover:bg-sf-fill-hover hover:text-sf-strong\",\n    description: \"Close button with X icon\",\n  },\n  variant: {\n    default: {\n      classes: \"border-sf-fill bg-sf-control\",\n      description: \"Default toast style\",\n    },\n    error: {\n      classes:\n        \"border-sf-fill bg-sf-control [&_[data-toast-icon]]:text-[light-dark(var(--color-red-600),var(--color-red-400))] [&_[data-toast-title]]:text-[light-dark(var(--color-red-600),var(--color-red-400))]\",\n      description: \"Error toast for critical issues\",\n      icon: WarningOctagonIcon,\n    },\n    warning: {\n      classes:\n        \"border-sf-fill bg-sf-control [&_[data-toast-icon]]:text-[light-dark(var(--color-amber-700),var(--color-amber-500))] [&_[data-toast-title]]:text-[light-dark(var(--color-amber-700),var(--color-amber-500))]\",\n      description: \"Warning toast for cautionary messages\",\n      icon: WarningIcon,\n    },\n  },\n} as const;\n\nexport const SF_TOAST_DEFAULT_VARIANTS = {\n  variant: \"default\",\n} as const;\n\n/**\n * Toast styling configuration for Figma plugin consumption.\n * Provides structured metadata for generating Toast components in Figma.\n */\nexport const SF_TOAST_STYLING = {\n  container: {\n    width: 300,\n    padding: 16,\n    borderRadius: 8,\n    background: \"color-secondary\",\n    border: \"color-color\",\n    shadow: \"shadow-lg\",\n    gap: 4,\n  },\n  title: {\n    fontSize: 16,\n    fontWeight: 500,\n    color: \"text-color-surface\",\n  },\n  description: {\n    fontSize: 15,\n    fontWeight: 400,\n    color: \"text-color-muted\",\n  },\n  closeButton: {\n    size: 20,\n    iconSize: 16,\n    iconName: \"ph-x\",\n    iconColor: \"text-color-muted\",\n    hoverBackground: \"color-color-2\",\n    hoverColor: \"text-color-label\",\n    borderRadius: 4,\n  },\n} as const;\n\n// Derived types from SF_TOAST_VARIANTS\nexport type SFToastVariant = keyof typeof SF_TOAST_VARIANTS.variant;\n\nexport interface SFToastVariantsProps {\n  variant?: SFToastVariant;\n}\n\nexport function toastVariants({\n  variant = SF_TOAST_DEFAULT_VARIANTS.variant,\n}: SFToastVariantsProps = {}) {\n  return cn(\n    // Base styles for toast root\n    \"rounded-xl border bg-clip-padding p-4 shadow-lg\",\n    // Apply variant styles from SF_TOAST_VARIANTS\n    SF_TOAST_VARIANTS.variant[variant].classes\n  );\n}\n\n/**\n * Toasty component props.\n *\n * Wrap your app with `<Toasty>` to enable toast notifications.\n * Use `Toast.useToastManager().notify(…)` to create toasts.\n *\n * @example\n * ```tsx\n * // 1. Wrap your app\n * <Toasty>\n *   <App />\n * </Toasty>\n *\n * // 2. Show a toast from any child component\n * const toasts = Toast.useToastManager();\n * toasts.notify({ title: \"Saved\", description: \"Changes saved successfully.\" });\n * ```\n */\nexport interface ToastyProps extends SFToastVariantsProps {\n  /** Application content. Toasts render via a portal above this. */\n  children: React.ReactNode;\n}\n\ntype SFToastOptionsBase = {\n  variant?: SFToastVariant;\n  content?: React.ReactNode;\n  actions?: Array<ButtonProps>;\n};\n\nexport type SFToastOptions<Data extends object> = ToastObject<Data> &\n  SFToastOptionsBase;\n\nexport type SFToastManagerAddOptions<Data extends object> =\n  ToastManagerAddOptions<Data> & SFToastOptionsBase;\n\nfunction wrapManagerMethods<\n  T extends { add: Function; update: Function; promise: Function },\n>(manager: T) {\n  return {\n    ...manager,\n\n    add: (options: SFToastManagerAddOptions<any>) => {\n      return manager.add({\n        ...options,\n      });\n    },\n\n    update: (id: string, options: Partial<SFToastManagerAddOptions<any>>) => {\n      return manager.update(id, {\n        ...options,\n      });\n    },\n\n    promise: <T,>(\n      promise: Promise<T>,\n      options: {\n        loading: SFToastManagerAddOptions<any>;\n        success:\n          | SFToastManagerAddOptions<any>\n          | ((data: T) => SFToastManagerAddOptions<any>);\n        error:\n          | SFToastManagerAddOptions<any>\n          | ((error: Error) => SFToastManagerAddOptions<any>);\n      }\n    ) => {\n      return manager.promise(promise, {\n        loading: { ...options.loading },\n        success:\n          typeof options.success === \"function\"\n            ? (data: T) => ({\n                ...(\n                  options.success as (data: T) => SFToastManagerAddOptions<any>\n                )(data),\n              })\n            : { ...options.success },\n        error:\n          typeof options.error === \"function\"\n            ? (error: Error) => ({\n                ...(\n                  options.error as (\n                    error: Error\n                  ) => SFToastManagerAddOptions<any>\n                )(error),\n              })\n            : { ...options.error },\n      });\n    },\n  };\n}\n\nexport const useSFToastManager = () => {\n  const manager = Toast.useToastManager();\n  return {\n    ...wrapManagerMethods(manager),\n    toasts: manager.toasts as Array<SFToastOptions<any>>,\n  };\n};\n\nexport const createSFToastManager = () => {\n  return wrapManagerMethods(Toast.createToastManager());\n};\n\n/**\n * Toasty — toast notification provider and viewport.\n *\n * Renders a `Toast.Provider` with a fixed-position viewport in the bottom-right corner.\n * Toasts stack with smooth enter/exit animations, swipe-to-dismiss, and expand-on-hover.\n *\n * Built on `@base-ui/react/toast`.\n *\n * @example\n * ```tsx\n * <Toasty>\n *   <App />\n * </Toasty>\n * ```\n */\nexport function Toasty({ children }: ToastyProps) {\n  return (\n    <Toast.Provider>\n      {children}\n      <Toast.Portal>\n        <Toast.Viewport className=\"fixed top-auto right-4 bottom-4 z-10 mx-auto flex w-[calc(100%-2rem)] sm:right-8 sm:bottom-8 sm:w-[340px]\">\n          <ToastList />\n        </Toast.Viewport>\n      </Toast.Portal>\n    </Toast.Provider>\n  );\n}\n\n/** Alias for Toasty — provided for discoverability when migrating from other libraries */\nexport const ToastProvider = Toasty;\n\nfunction ToastList() {\n  const { toasts } = useSFToastManager();\n  return toasts.map((toast) => (\n    <Toast.Root\n      key={toast.id}\n      toast={toast}\n      className={cn(\n        \"absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 h-[var(--height)] w-full origin-bottom select-none\",\n        toastVariants({ variant: toast.variant }),\n        \"[--gap:0.75rem] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))]\",\n        \"[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]\",\n        \"after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']\",\n        \"data-[ending-style]:opacity-0 data-[expanded]:h-[var(--toast-height)] data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(150%)]\",\n        \"data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]\",\n        \"data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]\",\n        \"data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]\",\n        \"data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]\",\n        \"[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)]\"\n      )}\n    >\n      <div className=\"absolute inset-0 rounded-[11px] bg-sf-control/90\"></div>\n      <Toast.Content className=\"isolate flex flex-col gap-1 transition-opacity [transition-duration:250ms] data-[behind]:pointer-events-none data-[behind]:opacity-0 data-[expanded]:pointer-events-auto data-[expanded]:opacity-100\">\n        {toast.content ?? (\n          <>\n            <div className=\"flex items-start gap-2\">\n              <ToastIcon variant={toast.variant} />\n              <div className=\"flex flex-col gap-1 overflow-hidden\">\n                <Toast.Title\n                  data-toast-title\n                  className=\"text-[0.975rem] leading-5 font-medium text-sf-default\"\n                />\n                <Toast.Description className=\"text-[0.925rem] leading-5 text-sf-subtle\" />\n\n                {!!toast.actions && (\n                  <div className=\"mt-2 flex min-w-0 flex-nowrap gap-2 overflow-x-auto p-px\">\n                    {toast.actions.map((actionProps, idx) => (\n                      <Button key={idx} {...actionProps} />\n                    ))}\n                  </div>\n                )}\n              </div>\n            </div>\n          </>\n        )}\n        <Toast.Close\n          className=\"absolute top-2 right-2 flex h-4 w-4 items-center justify-center rounded border-none bg-transparent text-current/50 hover:bg-sf-contrast/10 hover:text-current\"\n          aria-label=\"Close\"\n        >\n          <XIcon className=\"h-3 w-3\" />\n        </Toast.Close>\n      </Toast.Content>\n    </Toast.Root>\n  ));\n}\n\nfunction ToastIcon({ variant }: { variant?: SFToastVariant }) {\n  if (!variant || variant === \"default\") return null;\n  const variantConfig = SF_TOAST_VARIANTS.variant[variant];\n  if (!(\"icon\" in variantConfig)) return null;\n  const Icon = variantConfig.icon;\n  return (\n    <Icon data-toast-icon className=\"mt-0.5 h-4 w-4 shrink-0\" weight=\"fill\" />\n  );\n}\n\nfunction XIcon(props: React.ComponentProps<\"svg\">) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <path d=\"M18 6 6 18\" />\n      <path d=\"m6 6 12 12\" />\n    </svg>\n  );\n}\n"],"mappings":"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"}

package/dist/tooltip-Cb7QW-7H.js

@@ -0,0 +1,79 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tooltip } from "@base-ui/react/tooltip";
+//#region src/components/tooltip/tooltip.tsx
+var TooltipProvider = Tooltip.Provider;
+/**
+* Accessible popup that shows additional information on hover/focus.
+* Wrap your app or section with `<TooltipProvider>` to enable delay grouping.
+*
+* @example
+* ```tsx
+* <Tooltip content="Save changes">
+*   <Button variant="primary">Save</Button>
+* </Tooltip>
+* ```
+*/
+function Tooltip$1({ content, children, align, side, className, ...props }) {
+	return /* @__PURE__ */ jsxs(Tooltip.Root, {
+		...props,
+		children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
+			className,
+			render: children
+		}), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+			align,
+			side,
+			sideOffset: 10,
+			children: /* @__PURE__ */ jsxs(Tooltip.Popup, {
+				className: cn("flex origin-[var(--transform-origin)] flex-col rounded-md bg-sf-elevated px-2.5 py-1.5 text-sm text-sf-default", "shadow-lg shadow-sf-tip-shadow outline outline-sf-fill", "transition-[transform,opacity] duration-150", "data-[starting-style]:scale-90 data-[starting-style]:opacity-0", "data-[ending-style]:scale-90 data-[ending-style]:opacity-0", "data-[instant]:duration-0", "sf-tooltip-popup"),
+				children: [/* @__PURE__ */ jsx(Tooltip.Arrow, {
+					className: cn("flex", "data-[side=bottom]:top-[-8px]", "data-[side=left]:right-[-13px] data-[side=left]:rotate-90", "data-[side=right]:left-[-13px] data-[side=right]:-rotate-90", "data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180"),
+					children: /* @__PURE__ */ jsx(ArrowSvg, {})
+				}), content]
+			})
+		}) })]
+	});
+}
+/**
+* Arrow SVG with three paths for proper border rendering in both light and dark modes.
+* This approach matches Base UI's tooltip implementation.
+*
+* The three paths are:
+* 1. ArrowFill - The main arrow body, matches tooltip background
+* 2. ArrowOuterStroke - Border visible in light mode only (transparent in dark)
+* 3. ArrowInnerStroke - Border visible in dark mode only (transparent in light)
+*
+* This is necessary because the outer and inner stroke paths have different geometries,
+* and using both ensures the arrow border aligns perfectly with the tooltip's outline
+* in both color modes.
+*
+* @see https://base-ui.com/react/components/tooltip
+*/
+function ArrowSvg(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		width: "20",
+		height: "10",
+		viewBox: "0 0 20 10",
+		fill: "none",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
+				className: "fill-sf-elevated"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z",
+				className: "fill-sf-tip-shadow"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z",
+				className: "fill-sf-tip-stroke"
+			})
+		]
+	});
+}
+//#endregion
+export { TooltipProvider as n, Tooltip$1 as t };
+
+//# sourceMappingURL=tooltip-Cb7QW-7H.js.map

package/dist/tooltip-Cb7QW-7H.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-Cb7QW-7H.js","names":[],"sources":["../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipBase } from \"@base-ui/react/tooltip\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\n\n/** Tooltip side variant definitions mapping positions to their Tailwind classes. */\nexport const SF_TOOLTIP_VARIANTS = {\n  side: {\n    top: {\n      classes: \"\",\n      description: \"Tooltip appears above the trigger\",\n    },\n    bottom: {\n      classes: \"\",\n      description: \"Tooltip appears below the trigger\",\n    },\n    left: {\n      classes: \"\",\n      description: \"Tooltip appears to the left of the trigger\",\n    },\n    right: {\n      classes: \"\",\n      description: \"Tooltip appears to the right of the trigger\",\n    },\n  },\n} as const;\n\nexport const SF_TOOLTIP_DEFAULT_VARIANTS = {\n  side: \"top\",\n} as const;\n\n// Derived types from SF_TOOLTIP_VARIANTS\nexport type SFTooltipSide = keyof typeof SF_TOOLTIP_VARIANTS.side;\n\nexport interface SFTooltipVariantsProps {\n  /**\n   * Preferred side of the trigger to render the tooltip.\n   * - `\"top\"` — Tooltip appears above the trigger\n   * - `\"bottom\"` — Tooltip appears below the trigger\n   * - `\"left\"` — Tooltip appears to the left of the trigger\n   * - `\"right\"` — Tooltip appears to the right of the trigger\n   * @default \"top\"\n   */\n  side?: SFTooltipSide;\n}\n\nexport function tooltipVariants({\n  side = SF_TOOLTIP_DEFAULT_VARIANTS.side,\n}: SFTooltipVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"flex origin-[var(--transform-origin)] flex-col rounded-md bg-sf-elevated px-2.5 py-1.5 text-sm text-sf-default\",\n    \"shadow-lg shadow-sf-tip-shadow outline outline-1 outline-sf-fill\",\n    \"transition-[transform,opacity] duration-150\",\n    \"data-[starting-style]:scale-90 data-[starting-style]:opacity-0\",\n    \"data-[ending-style]:scale-90 data-[ending-style]:opacity-0\",\n    \"data-[instant]:duration-0\",\n    // Apply side-specific styles (currently none, but extensible)\n    SF_TOOLTIP_VARIANTS.side[side].classes\n  );\n}\n\nexport const TooltipProvider = TooltipBase.Provider;\n\ntype BaseTooltipProps = ComponentPropsWithoutRef<typeof TooltipBase.Root>;\n\ntype TriggerProps = ComponentPropsWithoutRef<typeof TooltipBase.Trigger>;\n\n/** Alignment options for tooltip positioning. Source: PositionerProps[\"align\"] */\ntype TooltipAlign = \"start\" | \"center\" | \"end\";\n\n/**\n * Tooltip component props.\n *\n * @example\n * ```tsx\n * <TooltipProvider>\n *   <Tooltip content=\"Add new item\">\n *     <Button shape=\"square\" icon={PlusIcon} />\n *   </Tooltip>\n * </TooltipProvider>\n * ```\n */\nexport type TooltipProps = BaseTooltipProps &\n  SFTooltipVariantsProps & {\n    /**\n     * Alignment on the axis perpendicular to `side`.\n     * - `\"start\"` — Align to the start edge\n     * - `\"center\"` — Center-aligned\n     * - `\"end\"` — Align to the end edge\n     */\n    align?: TooltipAlign;\n    /** Additional CSS classes merged via `cn()`. */\n    className?: string;\n    /** Content to display inside the tooltip popup. */\n    content: ReactNode;\n  };\n\n/**\n * Accessible popup that shows additional information on hover/focus.\n * Wrap your app or section with `<TooltipProvider>` to enable delay grouping.\n *\n * @example\n * ```tsx\n * <Tooltip content=\"Save changes\">\n *   <Button variant=\"primary\">Save</Button>\n * </Tooltip>\n * ```\n */\nexport function Tooltip({\n  content,\n  children,\n  align,\n  side,\n  className,\n  ...props\n}: TooltipProps) {\n  return (\n    <TooltipBase.Root {...props}>\n      <TooltipBase.Trigger\n        className={className}\n        render={children as TriggerProps[\"render\"]}\n      />\n      <TooltipBase.Portal>\n        <TooltipBase.Positioner align={align} side={side} sideOffset={10}>\n          <TooltipBase.Popup\n            className={cn(\n              \"flex origin-[var(--transform-origin)] flex-col rounded-md bg-sf-elevated px-2.5 py-1.5 text-sm text-sf-default\",\n              \"shadow-lg shadow-sf-tip-shadow outline outline-sf-fill\",\n              \"transition-[transform,opacity] duration-150\",\n              \"data-[starting-style]:scale-90 data-[starting-style]:opacity-0\",\n              \"data-[ending-style]:scale-90 data-[ending-style]:opacity-0\",\n              \"data-[instant]:duration-0\",\n              \"sf-tooltip-popup\"\n            )}\n          >\n            <TooltipBase.Arrow\n              className={cn(\n                \"flex\",\n                \"data-[side=bottom]:top-[-8px]\",\n                \"data-[side=left]:right-[-13px] data-[side=left]:rotate-90\",\n                \"data-[side=right]:left-[-13px] data-[side=right]:-rotate-90\",\n                \"data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180\"\n              )}\n            >\n              <ArrowSvg />\n            </TooltipBase.Arrow>\n            {content}\n          </TooltipBase.Popup>\n        </TooltipBase.Positioner>\n      </TooltipBase.Portal>\n    </TooltipBase.Root>\n  );\n}\n\n/**\n * Arrow SVG with three paths for proper border rendering in both light and dark modes.\n * This approach matches Base UI's tooltip implementation.\n *\n * The three paths are:\n * 1. ArrowFill - The main arrow body, matches tooltip background\n * 2. ArrowOuterStroke - Border visible in light mode only (transparent in dark)\n * 3. ArrowInnerStroke - Border visible in dark mode only (transparent in light)\n *\n * This is necessary because the outer and inner stroke paths have different geometries,\n * and using both ensures the arrow border aligns perfectly with the tooltip's outline\n * in both color modes.\n *\n * @see https://base-ui.com/react/components/tooltip\n */\nfunction ArrowSvg(props: React.ComponentProps<\"svg\">) {\n  return (\n    <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\" {...props}>\n      <path\n        d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n        className=\"fill-sf-elevated\"\n      />\n      <path\n        d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n        className=\"fill-sf-tip-shadow\"\n      />\n      <path\n        d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\"\n        className=\"fill-sf-tip-stroke\"\n      />\n    </svg>\n  );\n}\n"],"mappings":";;;;;AA8DA,IAAa,kBAAkB,QAAY;;;;;;;;;;;;AA+C3C,SAAgB,UAAQ,EACtB,SACA,UACA,OACA,MACA,WACA,GAAG,SACY;AACf,QACE,qBAAC,QAAY,MAAb;EAAkB,GAAI;YAAtB,CACE,oBAAC,QAAY,SAAb;GACa;GACX,QAAQ;GACR,CAAA,EACF,oBAAC,QAAY,QAAb,EAAA,UACE,oBAAC,QAAY,YAAb;GAA+B;GAAa;GAAM,YAAY;aAC5D,qBAAC,QAAY,OAAb;IACE,WAAW,GACT,kHACA,0DACA,+CACA,kEACA,8DACA,6BACA,mBACD;cATH,CAWE,oBAAC,QAAY,OAAb;KACE,WAAW,GACT,QACA,iCACA,6DACA,+DACA,2DACD;eAED,oBAAC,UAAD,EAAY,CAAA;KACM,CAAA,EACnB,QACiB;;GACG,CAAA,EACN,CAAA,CACJ;;;;;;;;;;;;;;;;;;AAmBvB,SAAS,SAAS,OAAoC;AACpD,QACE,qBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EAAO,GAAI;YAAhE;GACE,oBAAC,QAAD;IACE,GAAE;IACF,WAAU;IACV,CAAA;GACF,oBAAC,QAAD;IACE,GAAE;IACF,WAAU;IACV,CAAA;GACF,oBAAC,QAAD;IACE,GAAE;IACF,WAAU;IACV,CAAA;GACE"}