@warmio/ui 1.5.2 → 2.0.0

package/dist/chunks/{chunk-JXSJTIX7.js → chunk-K36HD5J5.js}

@@ -31,11 +31,11 @@ function useReducedMotion() {
 }
 
 // ../ui/src/lib/motion.ts
-var MOTION_DURATION_MS = 400;
+var MOTION_DURATION_MS = 240;
 var MOTION_DURATION_S = MOTION_DURATION_MS / 1e3;
-var MOTION_ENTRANCE_DURATION_MS = 800;
+var MOTION_ENTRANCE_DURATION_MS = 240;
 var MOTION_ENTRANCE_DURATION_S = MOTION_ENTRANCE_DURATION_MS / 1e3;
-var MOTION_HOVER_DURATION_MS = 100;
+var MOTION_HOVER_DURATION_MS = 80;
 var MOTION_HOVER_DURATION_S = MOTION_HOVER_DURATION_MS / 1e3;
 var FLUID_SPRING = {
   fast: { type: "spring", duration: 0.08, bounce: 0 },
@@ -85,7 +85,7 @@ function FluidOverlay({
   const elementRef = React.useRef(null);
   const reducedMotion = useReducedMotion();
   const open = state.open && state.transitionStatus !== "ending";
-  const instant = Boolean(state.instant);
+  const instant = Boolean(state.instant) || motion === "tooltip" && !open;
   React.useLayoutEffect(() => {
     const element = elementRef.current;
     if (!element) return;

package/dist/chunks/{chunk-GY4XJ6EX.js → chunk-L6L3GVGM.js}

@@ -1,9 +1,10 @@
-// ../design/src/button.tsx
+// ../ui/src/warmio/button/button.tsx
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var presentationToPrivateSize = {
   assistantIcon: "icon-xs",
   assistantRoundIcon: "icon-round",
+  cardTitle: "default",
   composerIcon: "icon-sm",
   default: "default",
   headerAction: "icon-xs",

package/dist/chunks/{chunk-2CO2BZLI.js → chunk-MGX6ZL6Q.js}

@@ -1,14 +1,11 @@
 import {
   FluidMenuHighlights
-} from "./chunk-F74Y4WRX.js";
+} from "./chunk-DHV2A22F.js";
 import {
   FluidOverlay
-} from "./chunk-JXSJTIX7.js";
-import {
-  cn
-} from "./chunk-VIB7OX7D.js";
+} from "./chunk-K36HD5J5.js";
 
-// ../ui/src/warmio/dropdown-menu.tsx
+// ../ui/src/warmio/dropdown-menu/dropdown-menu.tsx
 import * as React from "react";
 import { Menu as MenuPrimitive } from "@base-ui/react/menu";
 import { CheckIcon } from "lucide-react";
@@ -27,15 +24,6 @@ function DropdownMenuTrigger({
   const resolvedRender = render ?? (asChild && React.isValidElement(children) ? children : void 0);
   return /* @__PURE__ */ jsx(MenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", render: resolvedRender, ...props, children: resolvedRender ? void 0 : children });
 }
-var dropdownMenuContentSizeClasses = {
-  default: "w-(--anchor-width) min-w-32",
-  auto: "w-auto min-w-[14rem]",
-  sidebar: "w-(--sidebar-width)"
-};
-var dropdownMenuContentSpacingClasses = {
-  default: "",
-  roomy: "flex flex-col gap-2"
-};
 function DropdownMenuContent({
   align = "start",
   alignOffset = 0,
@@ -57,19 +45,16 @@ function DropdownMenuContent({
       alignOffset,
       side,
       sideOffset,
-      className: "isolate z-50 outline-none",
+      "data-slot": "dropdown-menu-positioner",
       children: /* @__PURE__ */ jsxs(
         MenuPrimitive.Popup,
         {
           ref,
           "data-slot": "dropdown-menu-content",
           "data-fluid-menu": "menu",
+          "data-size": size,
+          "data-spacing": spacing,
           render: (popupProps, state) => /* @__PURE__ */ jsx(FluidOverlay, { props: popupProps, state, motion: "menu", tier: "fast" }),
-          className: cn(
-            "relative isolate z-[var(--z-popover)] max-h-(--available-height) origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-2 text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-none data-closed:overflow-hidden [&_[data-fluid-menu-item]:is(:focus,[data-highlighted],[data-popup-open],[data-open],[aria-checked=true])]:bg-transparent!",
-            dropdownMenuContentSizeClasses[size],
-            dropdownMenuContentSpacingClasses[spacing]
-          ),
           ...props,
           children: [
             children,
@@ -103,7 +88,6 @@ function DropdownMenuItem({
       "data-slot": "dropdown-menu-item",
       "data-inset": inset,
       "data-variant": variant,
-      className: "group/dropdown-menu-item relative flex w-full cursor-default items-center gap-2 rounded-lg px-2 py-2 outline-hidden select-none not-data-[variant=destructive]:focus:bg-sidebar-accent not-data-[variant=destructive]:focus:text-sidebar-accent-foreground not-data-[variant=destructive]:focus:**:text-sidebar-accent-foreground data-inset:pl-4 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
       ...props
     }
   );
@@ -125,7 +109,6 @@ function DropdownMenuLinkItem({
       "data-slot": "dropdown-menu-item",
       "data-inset": inset,
       "data-variant": variant,
-      className: "group/dropdown-menu-item relative flex w-full cursor-default items-center gap-2 rounded-lg px-2 py-2 outline-hidden select-none not-data-[variant=destructive]:focus:bg-sidebar-accent not-data-[variant=destructive]:focus:text-sidebar-accent-foreground not-data-[variant=destructive]:focus:**:text-sidebar-accent-foreground data-inset:pl-4 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
       render: /* @__PURE__ */ jsx("a", { href, children }),
       ...props
     }
@@ -150,19 +133,11 @@ function DropdownMenuCheckboxItem({
       ref,
       "data-slot": "dropdown-menu-checkbox-item",
       "data-inset": inset,
-      className: "relative flex cursor-default items-center gap-2 rounded-lg py-2 pr-4 pl-2 outline-hidden select-none focus:bg-sidebar-accent focus:text-sidebar-accent-foreground focus:**:text-sidebar-accent-foreground data-inset:pl-4 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
       checked,
       onCheckedChange: handleCheckedChange,
       ...props,
       children: [
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: "pointer-events-none absolute right-2 flex items-center justify-center",
-            "data-slot": "dropdown-menu-checkbox-item-indicator",
-            children: /* @__PURE__ */ jsx(MenuPrimitive.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
-          }
-        ),
+        /* @__PURE__ */ jsx("span", { "data-slot": "dropdown-menu-checkbox-item-indicator", children: /* @__PURE__ */ jsx(MenuPrimitive.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) }) }),
         children
       ]
     }
@@ -200,19 +175,9 @@ function DropdownMenuRadioItem({
       ref,
       "data-slot": "dropdown-menu-radio-item",
       "data-inset": inset,
-      className: cn(
-        "relative flex cursor-default items-center gap-2 rounded-lg py-2 pr-4 pl-2 outline-hidden select-none focus:bg-sidebar-accent focus:text-sidebar-accent-foreground focus:**:text-sidebar-accent-foreground data-inset:pl-4 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-      ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: "pointer-events-none absolute right-2 flex items-center justify-center",
-            "data-slot": "dropdown-menu-radio-item-indicator",
-            children: /* @__PURE__ */ jsx(MenuPrimitive.RadioItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
-          }
-        ),
+        /* @__PURE__ */ jsx("span", { "data-slot": "dropdown-menu-radio-item-indicator", children: /* @__PURE__ */ jsx(MenuPrimitive.RadioItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) }) }),
         children
       ]
     }
@@ -231,7 +196,6 @@ function DropdownMenuLabel({
       ref,
       "data-slot": "dropdown-menu-label",
       "data-inset": inset,
-      className: "px-2 py-2 data-inset:pl-4",
       ...props
     }
   );
@@ -242,15 +206,7 @@ function DropdownMenuSeparator({
   style: _style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(
-    MenuPrimitive.Separator,
-    {
-      ref,
-      "data-slot": "dropdown-menu-separator",
-      className: "mx-0 my-0 h-px bg-border",
-      ...props
-    }
-  );
+  return /* @__PURE__ */ jsx(MenuPrimitive.Separator, { ref, "data-slot": "dropdown-menu-separator", ...props });
 }
 
 export {

package/dist/chunks/{chunk-B47G2BJV.js → chunk-MVUHHKBL.js}

@@ -1,8 +1,4 @@
-import {
-  cn
-} from "./chunk-VIB7OX7D.js";
-
-// ../ui/src/warmio/mascot.tsx
+// ../ui/src/warmio/mascot/mascot.tsx
 import { useEffect, useEffectEvent, useRef, useState } from "react";
 
 // ../ui/src/warmio/mascot-pupils.ts
@@ -106,7 +102,7 @@ function startWarmMascotPupilDrift(host) {
   };
 }
 
-// ../ui/src/warmio/mascot-assets.ts
+// ../ui/src/warmio/mascot/mascot-assets.ts
 var WARM_MASCOT_IDS = ["NORMAL", "CLOSED", "SAD", "HYPE", "CONFUSED"];
 var WARM_MASCOT_MOOD_TO_EXPRESSION = {
   calm: "NORMAL",
@@ -163,7 +159,7 @@ function resolveWarmMascotId(expression) {
   return "NORMAL";
 }
 
-// ../ui/src/warmio/mascot.tsx
+// ../ui/src/warmio/mascot/mascot.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var HYPE_CTA_SELECTOR = "[data-auth-cta], [data-auth-guest], [data-waitlist-cta], [data-home-marketing-nav-login], [data-home-marketing-nav-signup]";
 function isWarmMascotHypeCta(node) {
@@ -243,7 +239,7 @@ function WarmMascotMedia({
       "div",
       {
         ref: liveHostRef,
-        className: "warm-mascot__frame",
+        "data-slot": "warm-mascot-frame",
         dangerouslySetInnerHTML: { __html: liveMarkup }
       }
     );
@@ -253,7 +249,7 @@ function WarmMascotMedia({
     /* @__PURE__ */ jsx(
       "img",
       {
-        className: "warm-mascot__frame",
+        "data-slot": "warm-mascot-frame",
         src: source,
         alt: "",
         draggable: false,
@@ -287,19 +283,14 @@ function WarmMascotFrame({
   clickedHype,
   onToggleHype
 }) {
-  const className = cn(
-    "warm-mascot",
-    clickHype ? "pointer-events-auto cursor-pointer" : "pointer-events-none",
-    "inline-flex shrink-0 select-none"
-  );
   const commonProps = {
-    className,
     "data-slot": "warm-mascot",
     "data-size": size,
     "data-expression": expression,
     "data-flame-peek-eyes": peekEyes,
     "data-flame-theme": theme,
-    "data-flame-vector": source.endsWith(".svg") ? "" : void 0
+    "data-flame-vector": source.endsWith(".svg") ? "" : void 0,
+    "data-click-hype": clickHype ? "" : void 0
   };
   const media = /* @__PURE__ */ jsx(WarmMascotMedia, { source, stillSrc, fallbackSrc });
   if (clickHype) {
@@ -335,7 +326,9 @@ function WarmMascot({
   theme: themeProp,
   peekEyes,
   ctaHype = true,
-  clickHype = false
+  clickHype = false,
+  className: _className,
+  style: _style
 }) {
   const [clickedHype, setClickedHype] = useState(false);
   const activePeekEyes = clickHype && clickedHype ? void 0 : peekEyes;
@@ -415,18 +408,8 @@ var Logo = React.forwardRef(function Logo2({
   ] });
 });
 
-// ../ui/src/warmio/logo.tsx
+// ../ui/src/warmio/logo/logo.tsx
 import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var brandedLogoShellClassNameBySize = {
-  sm: "size-8",
-  md: "size-10",
-  lg: "size-14"
-};
-var brandedLogoIconClassNameBySize = {
-  sm: "size-5",
-  md: "size-6",
-  lg: "size-8"
-};
 var _WarmLogoGlyph = /* @__PURE__ */ jsxs3(Fragment, { children: [
   /* @__PURE__ */ jsx3(
     "path",
@@ -452,72 +435,47 @@ var _WarmLogoGlyph = /* @__PURE__ */ jsxs3(Fragment, { children: [
 ] });
 function WarmBrandedLogoMark({
   size = "md",
-  className,
-  logoClassName
+  className: _className,
+  logoClassName: _logoClassName
 }) {
-  return /* @__PURE__ */ jsxs3(
-    "span",
-    {
-      className: cn(
-        "relative inline-flex shrink-0 items-center justify-center",
-        brandedLogoShellClassNameBySize[size],
-        className
-      ),
-      "aria-hidden": "true",
-      children: [
-        /* @__PURE__ */ jsx3("span", { className: "pointer-events-none absolute inset-0 scale-[1.35] opacity-90", children: /* @__PURE__ */ jsx3(WarmMascot, { expression: "calm", label: null }) }),
-        /* @__PURE__ */ jsx3(
-          "svg",
-          {
-            xmlns: "http://www.w3.org/2000/svg",
-            viewBox: "0 0 600 600",
-            className: cn(
-              "relative z-10 drop-shadow-sm",
-              brandedLogoIconClassNameBySize[size],
-              logoClassName
-            ),
-            "aria-hidden": "true",
-            children: /* @__PURE__ */ jsx3("g", { transform: "translate(0 108)", children: _WarmLogoGlyph })
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs3("span", { "data-slot": "warm-branded-logo", "data-size": size, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx3("span", { "data-slot": "warm-branded-logo-mascot", children: /* @__PURE__ */ jsx3(WarmMascot, { expression: "calm", label: null }) }),
+    /* @__PURE__ */ jsx3(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 600 600",
+        "data-slot": "warm-branded-logo-icon",
+        "data-size": size,
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsx3("g", { transform: "translate(0 108)", children: _WarmLogoGlyph })
+      }
+    )
+  ] });
 }
 function WarmBrandedLogoLink({
   href,
   ariaLabel = "Warm home",
   size = "md",
-  className,
-  logoClassName
+  className: _className,
+  logoClassName: _logoClassName
 }) {
-  return /* @__PURE__ */ jsx3("a", { href, "aria-label": ariaLabel, className: "inline-flex shrink-0 items-center", children: /* @__PURE__ */ jsx3(
-    WarmBrandedLogoMark,
-    {
-      size,
-      ...className !== void 0 ? { className } : {},
-      ...logoClassName !== void 0 ? { logoClassName } : {}
-    }
-  ) });
+  return /* @__PURE__ */ jsx3("a", { href, "aria-label": ariaLabel, "data-slot": "warm-branded-logo-link", children: /* @__PURE__ */ jsx3(WarmBrandedLogoMark, { size }) });
 }
 function WarmBrandedLogoMarkStatic({
-  className,
-  logoClassName
+  className: _className,
+  style: _style,
+  logoClassName: _logoClassName
 }) {
-  return /* @__PURE__ */ jsxs3("span", { className: cn("relative inline-flex size-8 items-center justify-center", className), children: [
-    /* @__PURE__ */ jsx3(
-      "span",
-      {
-        "aria-hidden": "true",
-        className: "absolute inset-0 rounded-full bg-gradient-to-br from-primary/90 via-warning/80 to-primary/70"
-      }
-    ),
+  return /* @__PURE__ */ jsxs3("span", { "data-slot": "warm-branded-logo-static", children: [
+    /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", "data-slot": "warm-branded-logo-static-fill" }),
     /* @__PURE__ */ jsx3(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 600 600",
-        className: cn("relative z-10 size-5 drop-shadow-sm", logoClassName),
+        "data-slot": "warm-branded-logo-icon",
+        "data-size": "sm",
         "aria-hidden": "true",
         children: /* @__PURE__ */ jsx3("g", { transform: "translate(0 108)", children: _WarmLogoGlyph })
       }

package/dist/chunks/chunk-PJUNSOJK.js

@@ -0,0 +1,116 @@
+import {
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger
+} from "./chunk-EIEA5RJJ.js";
+
+// ../ui/src/warmio/close-button/close-button.tsx
+import * as React from "react";
+import { XIcon } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+var WarmCloseButton = React.forwardRef(
+  function WarmCloseButton2({
+    size = "default",
+    type,
+    "aria-label": ariaLabel = "Close",
+    children: _children,
+    className: _className,
+    style: _style,
+    ...props
+  }, ref) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        "data-slot": "close-button",
+        "data-warm-close-button": "",
+        "data-size": size,
+        ...props,
+        "data-warm-button": "",
+        "data-variant": "ghost",
+        ref,
+        type: type ?? "button",
+        "aria-label": ariaLabel,
+        children: /* @__PURE__ */ jsx(XIcon, { "data-slot": "close-button-icon", "aria-hidden": "true" })
+      }
+    );
+  }
+);
+
+// ../ui/src/warmio/sheet/sheet.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function SheetTrigger2({
+  className: _className,
+  style: _style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(SheetTrigger, { ...props });
+}
+function SheetClose2({ className: _className, style: _style, ...props }) {
+  return /* @__PURE__ */ jsx2(SheetClose, { ...props });
+}
+function SheetContent2({
+  className: _className,
+  overlayClassName: _overlayClassName,
+  presentation,
+  responsive = "always",
+  style: _style,
+  width = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    SheetContent,
+    {
+      ...props,
+      closeButton: /* @__PURE__ */ jsx2(WarmCloseButton, { size: "default" }),
+      "data-presentation": presentation,
+      "data-responsive": responsive === "mobileOnly" ? "mobileOnly" : void 0,
+      "data-width": presentation === "navigation" || width === "default" ? void 0 : width
+    }
+  );
+}
+function SheetFooter2({ className: _className, style: _style, ...props }) {
+  return /* @__PURE__ */ jsx2(SheetFooter, { ...props });
+}
+function SheetHeader2({
+  className: _className,
+  presentation,
+  style: _style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    SheetHeader,
+    {
+      ...props,
+      "data-presentation": presentation === "navigation" ? "navigation" : void 0
+    }
+  );
+}
+function SheetTitle2({
+  className: _className,
+  presentation,
+  style: _style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(SheetTitle, { ...props, "data-presentation": presentation });
+}
+function SheetDescription2({
+  className: _className,
+  style: _style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(SheetDescription, { ...props });
+}
+
+export {
+  SheetTrigger2 as SheetTrigger,
+  SheetClose2 as SheetClose,
+  SheetContent2 as SheetContent,
+  SheetFooter2 as SheetFooter,
+  SheetHeader2 as SheetHeader,
+  SheetTitle2 as SheetTitle,
+  SheetDescription2 as SheetDescription
+};

package/dist/chunks/chunk-W24JGQWM.js

@@ -0,0 +1,65 @@
+// ../ui/src/warmio/text/text.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var defaultTextElementByVariant = {
+  heading: "h3",
+  metric: "span",
+  body: "p",
+  caption: "span"
+};
+function Text({
+  as,
+  variant = "caption",
+  tone = "default",
+  align,
+  numeric = false,
+  mono = false,
+  size = "default",
+  truncate = false,
+  animateNumber = false,
+  className: _className,
+  style: _style,
+  ...props
+}) {
+  const Component = as ?? defaultTextElementByVariant[variant];
+  return React.createElement(Component, {
+    ...props,
+    "data-animate-number": animateNumber || void 0,
+    "data-text-variant": variant,
+    "data-text-element": Component,
+    "data-text-size": size === "default" ? void 0 : size,
+    "data-text-tone": tone,
+    "data-text-align": align,
+    "data-mono": mono || void 0,
+    "data-text-numeric": numeric || void 0,
+    "data-text-truncate": truncate || void 0
+  });
+}
+Text.displayName = "WarmText";
+function StackedDisplay({
+  align = "start",
+  firstLine,
+  presentation = "dashboard",
+  secondLine
+}) {
+  return /* @__PURE__ */ jsxs(
+    Text,
+    {
+      as: "h2",
+      variant: "heading",
+      align,
+      "data-slot": "stacked-display",
+      "data-presentation": presentation,
+      children: [
+        /* @__PURE__ */ jsx("span", { "data-presentation": presentation, "data-text-line": "first", children: firstLine }),
+        /* @__PURE__ */ jsx("span", { "data-presentation": presentation, "data-text-line": "second", children: secondLine })
+      ]
+    }
+  );
+}
+StackedDisplay.displayName = "WarmStackedDisplay";
+
+export {
+  Text,
+  StackedDisplay
+};

package/dist/dropdown-menu.js

@@ -1,4 +1,4 @@
-"use client";
+import "./entries/dropdown-menu.css";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -11,10 +11,9 @@ import {
   DropdownMenuRadioItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger
-} from "./chunks/chunk-2CO2BZLI.js";
-import "./chunks/chunk-F74Y4WRX.js";
-import "./chunks/chunk-JXSJTIX7.js";
-import "./chunks/chunk-VIB7OX7D.js";
+} from "./chunks/chunk-MGX6ZL6Q.js";
+import "./chunks/chunk-DHV2A22F.js";
+import "./chunks/chunk-K36HD5J5.js";
 export {
   DropdownMenu,
   DropdownMenuCheckboxItem,