@cloudflare/kumo 1.0.0

package/dist/text-BEhqwMfe.js

@@ -0,0 +1,97 @@
+"use client";
+import { jsx as x } from "react/jsx-runtime";
+import { forwardRef as f, useMemo as p } from "react";
+import { c as g } from "./cn-Bhsu1vx2.js";
+const s = {
+  variant: {
+    heading1: {
+      classes: "text-3xl font-semibold",
+      description: "Large heading for page titles"
+    },
+    heading2: {
+      classes: "text-2xl font-semibold",
+      description: "Medium heading for section titles"
+    },
+    heading3: {
+      classes: "text-lg font-semibold",
+      description: "Small heading for subsections"
+    },
+    body: {
+      classes: "text-kumo-default",
+      description: "Default body text"
+    },
+    secondary: {
+      classes: "text-kumo-subtle",
+      description: "Muted text for secondary information"
+    },
+    success: {
+      classes: "text-kumo-link",
+      description: "Success state text"
+    },
+    error: {
+      classes: "text-kumo-danger",
+      description: "Error state text"
+    },
+    mono: {
+      classes: "font-mono",
+      description: "Monospace text for code"
+    },
+    "mono-secondary": {
+      classes: "font-mono text-kumo-subtle",
+      description: "Muted monospace text"
+    }
+  },
+  size: {
+    xs: {
+      classes: "text-xs",
+      description: "Extra small text"
+    },
+    sm: {
+      classes: "text-sm",
+      description: "Small text"
+    },
+    base: {
+      classes: "text-base",
+      description: "Default text size"
+    },
+    lg: {
+      classes: "text-lg",
+      description: "Large text"
+    }
+  }
+};
+function b({
+  variant: e = "body",
+  bold: i = !1,
+  size: o = "base",
+  children: c,
+  DANGEROUS_className: r,
+  DANGEROUS_style: a,
+  as: t,
+  ...l
+}, d) {
+  const n = ["body", "secondary", "success", "error"].includes(e), m = ["mono", "mono-secondary"].includes(e), u = p(() => t || (e === "heading1" ? "h1" : e === "heading2" ? "h2" : e === "heading3" ? "h3" : ["mono", "mono-secondary"].includes(e) ? "span" : "p"), [e, t]);
+  return /* @__PURE__ */ x(
+    u,
+    {
+      ref: d,
+      className: g(
+        "text-kumo-default",
+        s.variant[e].classes,
+        n ? s.size[o].classes : "",
+        n && i ? "font-medium" : "",
+        // Monospace fonts need to be 1pt smaller than body text to optically match
+        m && (o === "lg" ? s.size.base.classes : s.size.sm.classes),
+        r
+      ),
+      style: a,
+      ...l,
+      children: c
+    }
+  );
+}
+const M = f(b);
+export {
+  M as T
+};
+//# sourceMappingURL=text-BEhqwMfe.js.map

package/dist/text-BEhqwMfe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-BEhqwMfe.js","sources":["../src/components/text/text.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  type ForwardedRef,\n  forwardRef,\n  useMemo,\n  type ElementType,\n} from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport const KUMO_TEXT_VARIANTS = {\n  variant: {\n    heading1: {\n      classes: \"text-3xl font-semibold\",\n      description: \"Large heading for page titles\",\n    },\n    heading2: {\n      classes: \"text-2xl font-semibold\",\n      description: \"Medium heading for section titles\",\n    },\n    heading3: {\n      classes: \"text-lg font-semibold\",\n      description: \"Small heading for subsections\",\n    },\n    body: {\n      classes: \"text-kumo-default\",\n      description: \"Default body text\",\n    },\n    secondary: {\n      classes: \"text-kumo-subtle\",\n      description: \"Muted text for secondary information\",\n    },\n    success: {\n      classes: \"text-kumo-link\",\n      description: \"Success state text\",\n    },\n    error: {\n      classes: \"text-kumo-danger\",\n      description: \"Error state text\",\n    },\n    mono: {\n      classes: \"font-mono\",\n      description: \"Monospace text for code\",\n    },\n    \"mono-secondary\": {\n      classes: \"font-mono text-kumo-subtle\",\n      description: \"Muted monospace text\",\n    },\n  },\n  size: {\n    xs: {\n      classes: \"text-xs\",\n      description: \"Extra small text\",\n    },\n    sm: {\n      classes: \"text-sm\",\n      description: \"Small text\",\n    },\n    base: {\n      classes: \"text-base\",\n      description: \"Default text size\",\n    },\n    lg: {\n      classes: \"text-lg\",\n      description: \"Large text\",\n    },\n  },\n} as const;\n\nexport const KUMO_TEXT_DEFAULT_VARIANTS = {\n  variant: \"body\",\n  size: \"base\",\n} as const;\n\n/**\n * KUMO_TEXT_STYLING - Typography metadata for Figma generator\n *\n * This export provides structured styling information extracted from text.tsx\n * for use by the Figma plugin generator. It documents font sizes, weights,\n * colors, and font families used across all Text variants.\n *\n * Source of truth chain:\n * text.tsx (this file) → component-registry.json → text.ts (Figma generator)\n */\nexport const KUMO_TEXT_STYLING = {\n  fontSizes: {\n    xs: 12,\n    sm: 14,\n    base: 16,\n    lg: 18,\n    xl: 20,\n    \"2xl\": 24,\n    \"3xl\": 30,\n  },\n  fontWeights: {\n    normal: 400,\n    medium: 500,\n    semibold: 600,\n  },\n  baseColor: \"text-kumo-default\",\n  variantColors: {\n    body: \"text-kumo-default\",\n    secondary: \"text-kumo-subtle\",\n    success: \"text-kumo-link\",\n    error: \"text-kumo-danger\",\n    mono: \"text-kumo-default\",\n    \"mono-secondary\": \"text-kumo-subtle\",\n  },\n  fontFamilies: {\n    default: \"sans-serif\",\n    mono: \"monospace\",\n  },\n} as const;\n\n// Derived types from KUMO_TEXT_VARIANTS\nexport type KumoTextVariant = keyof typeof KUMO_TEXT_VARIANTS.variant;\nexport type KumoTextSize = keyof typeof KUMO_TEXT_VARIANTS.size;\n\nexport interface KumoTextVariantsProps {\n  variant?: KumoTextVariant;\n  size?: KumoTextSize;\n}\n\nexport function textVariants({\n  variant = KUMO_TEXT_DEFAULT_VARIANTS.variant,\n  size = KUMO_TEXT_DEFAULT_VARIANTS.size,\n}: KumoTextVariantsProps = {}) {\n  return cn(\n    KUMO_TEXT_VARIANTS.variant[variant].classes,\n    KUMO_TEXT_VARIANTS.size[size].classes,\n  );\n}\n\n// Legacy types for backwards compatibility\ntype Heading = \"heading1\" | \"heading2\" | \"heading3\";\ntype Copy = \"body\" | \"secondary\" | \"success\" | \"error\";\ntype Monospace = \"mono\" | \"mono-secondary\";\ntype TextSize = KumoTextSize;\ntype TextVariant = KumoTextVariant;\n\ntype BaseTextProps = Omit<\n  ComponentPropsWithoutRef<\"span\">,\n  \"className\" | \"style\"\n> & {\n  DANGEROUS_className?: string;\n  DANGEROUS_style?: CSSProperties;\n  as?: ElementType;\n};\n\ntype TextPropsInternal<Variant extends TextVariant = \"body\"> = BaseTextProps &\n  (Variant extends Copy\n    ? {\n        variant?: Variant;\n        bold?: boolean;\n        size?: TextSize;\n      }\n    : Variant extends Monospace\n      ? {\n          variant?: Variant;\n          bold?: never;\n          size?: \"lg\";\n        }\n      : Variant extends Heading\n        ? {\n            variant?: Variant;\n            bold?: never;\n            size?: never;\n          }\n        : never);\n\n/**\n * Props for the Text component.\n * @description A typography component for rendering text with consistent styling.\n */\nexport interface TextProps {\n  /** Text style variant */\n  variant?: KumoTextVariant;\n  /** Text size (only applies to body/secondary/success/error variants) */\n  size?: KumoTextSize;\n  /** Whether to use bold font weight (only applies to body variants) */\n  bold?: boolean;\n  /** The element type to render as */\n  as?: ElementType;\n  /** Child text content */\n  children?: React.ReactNode;\n}\n\nfunction _Text<Variant extends TextVariant = \"body\">(\n  {\n    variant = \"body\" as Variant,\n    bold = false,\n    size = \"base\",\n    children,\n    DANGEROUS_className,\n    DANGEROUS_style,\n    as,\n    ...props\n  }: TextPropsInternal<Variant>,\n  ref: ForwardedRef<HTMLHeadingElement>,\n) {\n  const isCopy = [\"body\", \"secondary\", \"success\", \"error\"].includes(variant);\n  const isMono = [\"mono\", \"mono-secondary\"].includes(variant);\n\n  const Component = useMemo(() => {\n    if (as) return as;\n    if (variant === \"heading1\") return \"h1\";\n    if (variant === \"heading2\") return \"h2\";\n    if (variant === \"heading3\") return \"h3\";\n    if ([\"mono\", \"mono-secondary\"].includes(variant)) return \"span\";\n    return \"p\";\n  }, [variant, as]);\n\n  return (\n    <Component\n      ref={ref}\n      className={cn(\n        \"text-kumo-default\",\n        KUMO_TEXT_VARIANTS.variant[variant].classes,\n        isCopy ? KUMO_TEXT_VARIANTS.size[size].classes : \"\",\n        isCopy && bold ? \"font-medium\" : \"\",\n        // Monospace fonts need to be 1pt smaller than body text to optically match\n        isMono &&\n          (size === \"lg\"\n            ? KUMO_TEXT_VARIANTS.size.base.classes\n            : KUMO_TEXT_VARIANTS.size.sm.classes),\n        DANGEROUS_className,\n      )}\n      style={DANGEROUS_style}\n      {...props}\n    >\n      {children}\n    </Component>\n  );\n}\n\nexport const Text = forwardRef(_Text) as <Variant extends TextVariant = \"body\">(\n  props: TextPropsInternal<Variant> & {\n    ref?: ForwardedRef<ElementRef<\"span\">>;\n  },\n) => React.ReactElement;\n"],"names":["KUMO_TEXT_VARIANTS","_Text","variant","bold","size","children","DANGEROUS_className","DANGEROUS_style","as","props","ref","isCopy","isMono","Component","useMemo","jsx","cn","Text","forwardRef"],"mappings":";;;;AAWO,MAAMA,IAAqB;AAAA,EAChC,SAAS;AAAA,IACP,UAAU;AAAA,MACR,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,UAAU;AAAA,MACR,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,UAAU;AAAA,MACR,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,WAAW;AAAA,MACT,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,kBAAkB;AAAA,MAChB,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAAA,EAEF,MAAM;AAAA,IACJ,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ;AAwHA,SAASC,EACP;AAAA,EACE,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,IAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAS,CAAC,QAAQ,aAAa,WAAW,OAAO,EAAE,SAAST,CAAO,GACnEU,IAAS,CAAC,QAAQ,gBAAgB,EAAE,SAASV,CAAO,GAEpDW,IAAYC,EAAQ,MACpBN,MACAN,MAAY,aAAmB,OAC/BA,MAAY,aAAmB,OAC/BA,MAAY,aAAmB,OAC/B,CAAC,QAAQ,gBAAgB,EAAE,SAASA,CAAO,IAAU,SAClD,MACN,CAACA,GAASM,CAAE,CAAC;AAEhB,SACE,gBAAAO;AAAA,IAACF;AAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,WAAWM;AAAA,QACT;AAAA,QACAhB,EAAmB,QAAQE,CAAO,EAAE;AAAA,QACpCS,IAASX,EAAmB,KAAKI,CAAI,EAAE,UAAU;AAAA,QACjDO,KAAUR,IAAO,gBAAgB;AAAA;AAAA,QAEjCS,MACGR,MAAS,OACNJ,EAAmB,KAAK,KAAK,UAC7BA,EAAmB,KAAK,GAAG;AAAA,QACjCM;AAAA,MAAA;AAAA,MAEF,OAAOC;AAAA,MACN,GAAGE;AAAA,MAEH,UAAAJ;AAAA,IAAA;AAAA,EAAA;AAGP;AAEO,MAAMY,IAAOC,EAAWjB,CAAK;"}

package/dist/toast-8YyyQuqZ.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsxs as e, jsx as t } from "react/jsx-runtime";
+import { c as r } from "./cn-Bhsu1vx2.js";
+import { aS as o, aT as n, aU as i, aV as d, aW as l, aX as c, aY as m, aZ as p, a_ as f } from "./vendor-base-ui-DWIDNgE1.js";
+function x({ children: a }) {
+  return /* @__PURE__ */ e(o, { children: [
+    a,
+    /* @__PURE__ */ t(n, { children: /* @__PURE__ */ t(i, { className: "fixed top-auto right-4 bottom-4 z-10 mx-auto flex w-[250px] sm:right-8 sm:bottom-8 sm:w-[300px]", children: /* @__PURE__ */ t(v, {}) }) })
+  ] });
+}
+function v() {
+  const { toasts: a } = d();
+  return a.map((s) => /* @__PURE__ */ t(
+    l,
+    {
+      toast: s,
+      className: r(
+        "absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 h-[var(--height)] w-full origin-bottom rounded-lg border border-kumo-fill bg-kumo-control bg-clip-padding p-4 shadow-lg select-none",
+        "[--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__ */ e(c, { className: "overflow-hidden transition-opacity [transition-duration:250ms] data-[behind]:pointer-events-none data-[behind]:opacity-0 data-[expanded]:pointer-events-auto data-[expanded]:opacity-100", children: [
+        /* @__PURE__ */ t(m, { className: "text-[0.975rem] leading-5 font-medium text-kumo-default" }),
+        /* @__PURE__ */ t(p, { className: "text-[0.925rem] leading-5 text-kumo-subtle" }),
+        /* @__PURE__ */ t(
+          f,
+          {
+            className: "absolute top-2 right-2 flex h-5 w-5 items-center justify-center rounded border-none bg-transparent text-kumo-subtle hover:bg-kumo-fill-hover hover:text-kumo-strong",
+            "aria-label": "Close",
+            children: /* @__PURE__ */ t(h, { className: "h-4 w-4" })
+          }
+        )
+      ] })
+    },
+    s.id
+  ));
+}
+function h(a) {
+  return /* @__PURE__ */ e(
+    "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",
+      ...a,
+      children: [
+        /* @__PURE__ */ t("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ t("path", { d: "m6 6 12 12" })
+      ]
+    }
+  );
+}
+export {
+  x as T
+};
+//# sourceMappingURL=toast-8YyyQuqZ.js.map

package/dist/toast-8YyyQuqZ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-8YyyQuqZ.js","sources":["../src/components/toast/toast.tsx"],"sourcesContent":["import { Toast } from \"@base-ui/react/toast\";\nimport type React from \"react\";\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 KUMO_TOAST_VARIANTS = {\n  root: {\n    classes: \"rounded-lg border border-kumo-fill bg-kumo-control p-4 shadow-lg\",\n    description: \"Toast container with background, border, and shadow\",\n  },\n  title: {\n    classes: \"text-[0.975rem] leading-5 font-medium text-kumo-default\",\n    description: \"Toast title with primary text color\",\n  },\n  description: {\n    classes: \"text-[0.925rem] leading-5 text-kumo-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-kumo-subtle hover:bg-kumo-fill-hover hover:text-kumo-strong\",\n    description: \"Close button with X icon\",\n  },\n} as const;\n\nexport const KUMO_TOAST_DEFAULT_VARIANTS = {} 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 KUMO_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 KUMO_TOAST_VARIANTS\nexport interface KumoToastVariantsProps {}\n\nexport function toastVariants(_props: KumoToastVariantsProps = {}) {\n  return cn(\n    // Base styles for toast root\n    \"absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 h-[var(--height)] w-full origin-bottom rounded-lg border border-kumo-fill bg-kumo-control bg-clip-padding p-4 shadow-lg select-none\",\n  );\n}\n\nexport interface ToastyProps extends KumoToastVariantsProps {\n  children: React.ReactNode;\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-[250px] sm:right-8 sm:bottom-8 sm:w-[300px]\">\n          <ToastList />\n        </Toast.Viewport>\n      </Toast.Portal>\n    </Toast.Provider>\n  );\n}\n\nfunction ToastList() {\n  const { toasts } = Toast.useToastManager();\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 rounded-lg border border-kumo-fill bg-kumo-control bg-clip-padding p-4 shadow-lg select-none\",\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      <Toast.Content className=\"overflow-hidden 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.Title className=\"text-[0.975rem] leading-5 font-medium text-kumo-default\" />\n        <Toast.Description className=\"text-[0.925rem] leading-5 text-kumo-subtle\" />\n        <Toast.Close\n          className=\"absolute top-2 right-2 flex h-5 w-5 items-center justify-center rounded border-none bg-transparent text-kumo-subtle hover:bg-kumo-fill-hover hover:text-kumo-strong\"\n          aria-label=\"Close\"\n        >\n          <XIcon className=\"h-4 w-4\" />\n        </Toast.Close>\n      </Toast.Content>\n    </Toast.Root>\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"],"names":["Toasty","children","jsxs","Toast.Provider","jsx","Toast.Portal","Toast.Viewport","ToastList","toasts","Toast.useToastManager","toast","Toast.Root","cn","Toast.Content","Toast.Title","Toast.Description","Toast.Close","XIcon","props"],"mappings":";;;;AA+EO,SAASA,EAAO,EAAE,UAAAC,KAAyB;AAChD,SACE,gBAAAC,EAACC,GAAA,EACE,UAAA;AAAA,IAAAF;AAAA,IACD,gBAAAG,EAACC,GAAA,EACC,UAAA,gBAAAD,EAACE,GAAA,EAAe,WAAU,mGACxB,UAAA,gBAAAF,EAACG,GAAA,CAAA,CAAU,GACb,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;AAEA,SAASA,IAAY;AACnB,QAAM,EAAE,QAAAC,EAAA,IAAWC,EAAM;AACzB,SAAOD,EAAO,IAAI,CAACE,MACjB,gBAAAN;AAAA,IAACO;AAAAA,IAAA;AAAA,MAEC,OAAAD;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAGF,UAAA,gBAAAV,EAACW,GAAA,EAAc,WAAU,4LACvB,UAAA;AAAA,QAAA,gBAAAT,EAACU,GAAA,EAAY,WAAU,0DAAA,CAA0D;AAAA,QACjF,gBAAAV,EAACW,GAAA,EAAkB,WAAU,6CAAA,CAA6C;AAAA,QAC1E,gBAAAX;AAAA,UAACY;AAAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,cAAW;AAAA,YAEX,UAAA,gBAAAZ,EAACa,GAAA,EAAM,WAAU,UAAA,CAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MAC7B,EAAA,CACF;AAAA,IAAA;AAAA,IAxBKP,EAAM;AAAA,EAAA,CA0Bd;AACH;AAEA,SAASO,EAAMC,GAAoC;AACjD,SACE,gBAAAhB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAY;AAAA,MACZ,eAAc;AAAA,MACd,gBAAe;AAAA,MACd,GAAGgB;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAd,EAAC,QAAA,EAAK,GAAE,aAAA,CAAa;AAAA,QACrB,gBAAAA,EAAC,QAAA,EAAK,GAAE,aAAA,CAAa;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG3B;"}

package/dist/tooltip-DJWsDTWJ.js

@@ -0,0 +1,85 @@
+"use client";
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { c as s } from "./cn-Bhsu1vx2.js";
+import { a$ as p, b0 as m, b1 as c, b2 as f, b3 as u, b4 as h, b5 as g } from "./vendor-base-ui-DWIDNgE1.js";
+const T = p;
+function k({
+  content: o,
+  children: i,
+  align: r,
+  asChild: e,
+  side: l,
+  className: d,
+  ...n
+}) {
+  return /* @__PURE__ */ a(m, { ...n, children: [
+    /* @__PURE__ */ t(
+      c,
+      {
+        className: d,
+        render: e ? i : void 0,
+        children: e ? void 0 : i
+      }
+    ),
+    /* @__PURE__ */ t(f, { children: /* @__PURE__ */ t(u, { align: r, side: l, sideOffset: 10, children: /* @__PURE__ */ a(
+      h,
+      {
+        className: s(
+          "flex origin-[var(--transform-origin)] flex-col rounded-md bg-kumo-base px-2.5 py-1.5 text-sm text-kumo-default",
+          "shadow-lg shadow-kumo-tip-shadow outline outline-kumo-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",
+          "kumo-tooltip-popup"
+        ),
+        children: [
+          /* @__PURE__ */ t(
+            g,
+            {
+              className: s(
+                "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__ */ t(x, {})
+            }
+          ),
+          o
+        ]
+      }
+    ) }) })
+  ] });
+}
+function x(o) {
+  return /* @__PURE__ */ a("svg", { width: "20", height: "10", viewBox: "0 0 20 10", fill: "none", ...o, children: [
+    /* @__PURE__ */ t(
+      "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-kumo-base"
+      }
+    ),
+    /* @__PURE__ */ t(
+      "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-kumo-tip-shadow"
+      }
+    ),
+    /* @__PURE__ */ t(
+      "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-kumo-tip-stroke"
+      }
+    )
+  ] });
+}
+export {
+  k as T,
+  T as a
+};
+//# sourceMappingURL=tooltip-DJWsDTWJ.js.map

package/dist/tooltip-DJWsDTWJ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-DJWsDTWJ.js","sources":["../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipBase } from \"@base-ui/react/tooltip\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport const KUMO_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 KUMO_TOOLTIP_DEFAULT_VARIANTS = {\n  side: \"top\",\n} as const;\n\n// Derived types from KUMO_TOOLTIP_VARIANTS\nexport type KumoTooltipSide = keyof typeof KUMO_TOOLTIP_VARIANTS.side;\n\nexport interface KumoTooltipVariantsProps {\n  side?: KumoTooltipSide;\n}\n\nexport function tooltipVariants({\n  side = KUMO_TOOLTIP_DEFAULT_VARIANTS.side,\n}: KumoTooltipVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"flex origin-[var(--transform-origin)] flex-col rounded-md bg-kumo-base px-2.5 py-1.5 text-sm text-kumo-default\",\n    \"shadow-lg shadow-kumo-tip-shadow outline outline-1 outline-kumo-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    KUMO_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\nexport type TooltipProps = BaseTooltipProps &\n  KumoTooltipVariantsProps & {\n    align?: TooltipAlign;\n    asChild?: boolean;\n    className?: string;\n    content: ReactNode;\n  };\n\nexport function Tooltip({\n  content,\n  children,\n  align,\n  asChild,\n  side,\n  className,\n  ...props\n}: TooltipProps) {\n  return (\n    <TooltipBase.Root {...props}>\n      <TooltipBase.Trigger\n        className={className}\n        render={asChild ? (children as TriggerProps[\"render\"]) : undefined}\n      >\n        {asChild ? undefined : (children as ReactNode)}\n      </TooltipBase.Trigger>\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-kumo-base px-2.5 py-1.5 text-sm text-kumo-default\",\n              \"shadow-lg shadow-kumo-tip-shadow outline outline-kumo-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              \"kumo-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-kumo-base\"\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-kumo-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-kumo-tip-stroke\"\n      />\n    </svg>\n  );\n}\n"],"names":["TooltipProvider","TooltipBase.Provider","Tooltip","content","children","align","asChild","side","className","props","jsxs","TooltipBase.Root","jsx","TooltipBase.Trigger","TooltipBase.Portal","TooltipBase.Positioner","TooltipBase.Popup","cn","TooltipBase.Arrow","ArrowSvg"],"mappings":";;;;AAoDO,MAAMA,IAAkBC;AAiBxB,SAASC,EAAQ;AAAA,EACtB,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAAiB;AACf,SACE,gBAAAC,EAACC,GAAA,EAAkB,GAAGF,GACpB,UAAA;AAAA,IAAA,gBAAAG;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,WAAAL;AAAA,QACA,QAAQF,IAAWF,IAAsC;AAAA,QAExD,cAAU,SAAaA;AAAA,MAAA;AAAA,IAAA;AAAA,IAE1B,gBAAAQ,EAACE,GAAA,EACC,UAAA,gBAAAF,EAACG,GAAA,EAAuB,OAAAV,GAAc,MAAAE,GAAY,YAAY,IAC5D,UAAA,gBAAAG;AAAA,MAACM;AAAAA,MAAA;AAAA,QACC,WAAWC;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAGF,UAAA;AAAA,UAAA,gBAAAL;AAAA,YAACM;AAAAA,YAAA;AAAA,cACC,WAAWD;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,cAGF,4BAACE,GAAA,CAAA,CAAS;AAAA,YAAA;AAAA,UAAA;AAAA,UAEXhB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAEL,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;AAiBA,SAASgB,EAASV,GAAoC;AACpD,SACE,gBAAAC,EAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAQ,GAAGD,GAC9D,UAAA;AAAA,IAAA,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAE;AAAA,QACF,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAEZ,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAE;AAAA,QACF,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAEZ,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAE;AAAA,QACF,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACZ,GACF;AAEJ;"}

package/dist/utils.js

@@ -0,0 +1,10 @@
+"use client";
+import { c as s, s as n } from "./cn-Bhsu1vx2.js";
+import { L as r, u as i } from "./link-provider-DPBGo-0n.js";
+export {
+  r as LinkProvider,
+  s as cn,
+  n as safeRandomId,
+  i as useLinkComponent
+};
+//# sourceMappingURL=utils.js.map

package/dist/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}