@warmio/ui 1.4.0 → 2.0.0

package/dist/chunks/chunk-K36HD5J5.js

@@ -0,0 +1,133 @@
+// ../ui/src/lib/fluid-overlay.tsx
+import * as React from "react";
+import { useRender } from "@base-ui/react/use-render";
+
+// ../ui/src/hooks/use-reduced-motion.ts
+import { useSyncExternalStore } from "react";
+var mediaWindow;
+var mediaQuery;
+function getMediaQuery() {
+  const currentWindow = globalThis.window;
+  if (!currentWindow?.matchMedia) return void 0;
+  if (currentWindow !== mediaWindow) {
+    mediaWindow = currentWindow;
+    mediaQuery = currentWindow.matchMedia("(prefers-reduced-motion: reduce)");
+  }
+  return mediaQuery;
+}
+function subscribe(onChange) {
+  const query = getMediaQuery();
+  query?.addEventListener("change", onChange);
+  return () => query?.removeEventListener("change", onChange);
+}
+function getSnapshot() {
+  return getMediaQuery()?.matches ?? true;
+}
+function getServerSnapshot() {
+  return true;
+}
+function useReducedMotion() {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+
+// ../ui/src/lib/motion.ts
+var MOTION_DURATION_MS = 240;
+var MOTION_DURATION_S = MOTION_DURATION_MS / 1e3;
+var MOTION_ENTRANCE_DURATION_MS = 240;
+var MOTION_ENTRANCE_DURATION_S = MOTION_ENTRANCE_DURATION_MS / 1e3;
+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 },
+  moderate: { type: "spring", duration: 0.16, bounce: 0 },
+  slow: { type: "spring", duration: 0.24, bounce: 0 }
+};
+var FLUID_EASING = "cubic-bezier(0.23, 1, 0.32, 1)";
+var FLUID_EXIT = {
+  fast: { duration: 0.06 },
+  moderate: { duration: 0.12 },
+  slow: { duration: 0.16 }
+};
+
+// ../ui/src/lib/fluid-overlay.tsx
+var RESPONSIVE_SHEET_QUERY = "(min-width: 64rem)";
+function resolvePhysicalSide(side, element) {
+  if (side === "responsive") {
+    return globalThis.matchMedia?.(RESPONSIVE_SHEET_QUERY)?.matches ? "right" : "bottom";
+  }
+  if (side !== "inline-start" && side !== "inline-end") return side;
+  const rtl = getComputedStyle(element).direction === "rtl";
+  return side === "inline-start" !== rtl ? "left" : "right";
+}
+function getClosedTransform(motion, side, element) {
+  if (motion === "backdrop" || motion === "fade") return void 0;
+  if (motion === "menu") return "scaleY(0.96)";
+  if (motion === "dialog") return "scale(0.97)";
+  if (motion === "ios-dialog") return "translateY(16px)";
+  const physicalSide = resolvePhysicalSide(side, element);
+  const distance = motion === "sheet" ? "2.5rem" : "4px";
+  const negative = motion === "sheet" ? physicalSide === "top" || physicalSide === "left" : physicalSide === "bottom" || physicalSide === "right";
+  const axis = physicalSide === "top" || physicalSide === "bottom" ? "Y" : "X";
+  const scale = motion === "popover" ? " scale(0.97)" : "";
+  return `translate${axis}(${negative ? "-" : ""}${distance})${scale}`;
+}
+function hasNativeAnimation(element) {
+  return typeof element.animate === "function";
+}
+function FluidOverlay({
+  props,
+  state,
+  render,
+  motion,
+  side = "bottom",
+  tier
+}) {
+  const elementRef = React.useRef(null);
+  const reducedMotion = useReducedMotion();
+  const open = state.open && state.transitionStatus !== "ending";
+  const instant = Boolean(state.instant) || motion === "tooltip" && !open;
+  React.useLayoutEffect(() => {
+    const element = elementRef.current;
+    if (!element) return;
+    const closedTransform = getClosedTransform(motion, side, element);
+    const opacity = open ? 1 : 0;
+    const settle = () => {
+      element.style.opacity = String(opacity);
+      if (closedTransform) element.style.transform = open ? "none" : closedTransform;
+    };
+    if (reducedMotion || instant || !hasNativeAnimation(element) || element.getClientRects().length === 0) {
+      settle();
+      return;
+    }
+    const openFrame = closedTransform ? { opacity: 1, transform: "none" } : { opacity: 1 };
+    const closedFrame = closedTransform ? { opacity: 0, transform: closedTransform } : { opacity: 0 };
+    const animation = element.animate(open ? [closedFrame, openFrame] : [openFrame, closedFrame], {
+      duration: (open ? FLUID_SPRING[tier].duration : FLUID_EXIT[tier].duration) * 1e3,
+      easing: FLUID_EASING,
+      fill: "both"
+    });
+    const handleFinish = () => {
+      settle();
+      animation.cancel();
+    };
+    animation.addEventListener("finish", handleFinish);
+    return () => {
+      animation.removeEventListener("finish", handleFinish);
+      settle();
+      animation.cancel();
+    };
+  }, [instant, motion, open, reducedMotion, side, tier]);
+  return useRender({
+    defaultTagName: "div",
+    ref: elementRef,
+    // oxlint-disable-next-line anti-slop/no-runtime-typeof -- Base UI render is documented as an element-or-function union.
+    render: typeof render === "function" ? (renderProps) => render(renderProps, state) : render,
+    props: { ...props }
+  });
+}
+
+export {
+  useReducedMotion,
+  FLUID_SPRING,
+  FluidOverlay
+};

package/dist/chunks/chunk-L6L3GVGM.js

@@ -0,0 +1,130 @@
+// ../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",
+  compact: "sm",
+  controlPeer: "default",
+  editPill: "sm",
+  hero: "lg",
+  menuOption: "option",
+  promptCategory: "default",
+  promptOption: "option",
+  sidebarIcon: "icon",
+  tableHeader: "default",
+  tableHeaderLink: "default",
+  threadMore: "icon-xs",
+  threadNew: "sm",
+  touch: "default"
+};
+var presentationAliases = {
+  controlPeer: "default",
+  menuOption: "promptOption",
+  touch: "default"
+};
+function resolvePresentation(presentation) {
+  return presentationAliases[presentation] ?? presentation;
+}
+function resolveButton(presentation, size) {
+  const privateSize = presentationToPrivateSize[presentation];
+  const resolvedSize = size ?? (privateSize === "lg" ? "jumbo" : privateSize === "sm" ? "compact" : privateSize === "icon" || privateSize === "icon-round" || privateSize === "icon-sm" || privateSize === "icon-xs" ? "icon" : "default");
+  return { resolvedSize, explicitSize: size ? resolvedSize : void 0 };
+}
+function withArrow(variant, children) {
+  if (variant !== "arrow") return children;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    children,
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        "aria-hidden": "true",
+        "data-icon": "inline-end",
+        width: "16",
+        height: "16",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: [
+          /* @__PURE__ */ jsx("path", { d: "M7 7h10v10" }),
+          /* @__PURE__ */ jsx("path", { d: "M7 17L17 7" })
+        ]
+      }
+    )
+  ] });
+}
+var Button = React.forwardRef(function Button2({
+  children,
+  className: _className,
+  presentation = "default",
+  render: _render,
+  size,
+  style: _style,
+  type,
+  variant = "default",
+  width,
+  asChild: _asChild,
+  ...props
+}, ref) {
+  const { resolvedSize, explicitSize } = resolveButton(presentation, size);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...props,
+      ref,
+      type: type ?? "button",
+      "data-warm-button": "",
+      "data-slot": "button",
+      "data-presentation": resolvePresentation(presentation),
+      "data-variant": variant,
+      "data-size": resolvedSize,
+      "data-explicit-size": explicitSize,
+      "data-width": width,
+      children: withArrow(variant, children)
+    }
+  );
+});
+Button.displayName = "WarmButton";
+var ButtonLink = React.forwardRef(function ButtonLink2({
+  children,
+  className: _className,
+  disabled: _disabled,
+  presentation = "default",
+  render: _render,
+  size,
+  style: _style,
+  variant = "default",
+  width,
+  asChild: _asChild,
+  ...props
+}, ref) {
+  const { resolvedSize, explicitSize } = resolveButton(presentation, size);
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      ...props,
+      ref,
+      "data-warm-button": "",
+      "data-slot": "button",
+      "data-presentation": resolvePresentation(presentation),
+      "data-variant": variant,
+      "data-size": resolvedSize,
+      "data-explicit-size": explicitSize,
+      "data-width": width,
+      children: withArrow(variant, children)
+    }
+  );
+});
+ButtonLink.displayName = "WarmButtonLink";
+
+export {
+  Button,
+  ButtonLink
+};

package/dist/chunks/chunk-MGX6ZL6Q.js

@@ -0,0 +1,224 @@
+import {
+  FluidMenuHighlights
+} from "./chunk-DHV2A22F.js";
+import {
+  FluidOverlay
+} from "./chunk-K36HD5J5.js";
+
+// ../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";
+import { jsx, jsxs } from "react/jsx-runtime";
+function DropdownMenu(props) {
+  return /* @__PURE__ */ jsx(MenuPrimitive.Root, { ...props });
+}
+function DropdownMenuTrigger({
+  asChild = false,
+  children,
+  render,
+  className: _className,
+  style: _style,
+  ...props
+}) {
+  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 });
+}
+function DropdownMenuContent({
+  align = "start",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  portal = true,
+  size = "default",
+  spacing = "default",
+  children,
+  ref,
+  className: _className,
+  style: _style,
+  ...props
+}) {
+  const content = /* @__PURE__ */ jsx(
+    MenuPrimitive.Positioner,
+    {
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      "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" }),
+          ...props,
+          children: [
+            children,
+            /* @__PURE__ */ jsx(FluidMenuHighlights, { kind: "menu" })
+          ]
+        }
+      )
+    }
+  );
+  return portal ? /* @__PURE__ */ jsx(MenuPrimitive.Portal, { children: content }) : content;
+}
+function DropdownMenuGroup({
+  className: _className,
+  style: _style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(MenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
+}
+function DropdownMenuItem({
+  className: _className,
+  inset,
+  variant = "default",
+  ref,
+  style: _style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    MenuPrimitive.Item,
+    {
+      ref,
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      ...props
+    }
+  );
+}
+function DropdownMenuLinkItem({
+  className: _className,
+  children,
+  href,
+  inset,
+  variant = "default",
+  ref,
+  style: _style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    MenuPrimitive.Item,
+    {
+      ref,
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      render: /* @__PURE__ */ jsx("a", { href, children }),
+      ...props
+    }
+  );
+}
+function DropdownMenuCheckboxItem({
+  children,
+  checked,
+  inset,
+  className: _className,
+  ref,
+  style: _style,
+  onCheckedChange,
+  ...props
+}) {
+  const handleCheckedChange = (nextChecked, eventDetails) => {
+    onCheckedChange?.(nextChecked, eventDetails);
+  };
+  return /* @__PURE__ */ jsxs(
+    MenuPrimitive.CheckboxItem,
+    {
+      ref,
+      "data-slot": "dropdown-menu-checkbox-item",
+      "data-inset": inset,
+      checked,
+      onCheckedChange: handleCheckedChange,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { "data-slot": "dropdown-menu-checkbox-item-indicator", children: /* @__PURE__ */ jsx(MenuPrimitive.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) }) }),
+        children
+      ]
+    }
+  );
+}
+function DropdownMenuRadioGroup({
+  className: _className,
+  onValueChange,
+  style: _style,
+  ...props
+}) {
+  const handleValueChange = (value, eventDetails) => {
+    onValueChange?.(value, eventDetails);
+  };
+  return /* @__PURE__ */ jsx(
+    MenuPrimitive.RadioGroup,
+    {
+      "data-slot": "dropdown-menu-radio-group",
+      onValueChange: handleValueChange,
+      ...props
+    }
+  );
+}
+function DropdownMenuRadioItem({
+  children,
+  inset,
+  className: _className,
+  ref,
+  style: _style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    MenuPrimitive.RadioItem,
+    {
+      ref,
+      "data-slot": "dropdown-menu-radio-item",
+      "data-inset": inset,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { "data-slot": "dropdown-menu-radio-item-indicator", children: /* @__PURE__ */ jsx(MenuPrimitive.RadioItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) }) }),
+        children
+      ]
+    }
+  );
+}
+function DropdownMenuLabel({
+  className: _className,
+  inset,
+  ref,
+  style: _style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    MenuPrimitive.GroupLabel,
+    {
+      ref,
+      "data-slot": "dropdown-menu-label",
+      "data-inset": inset,
+      ...props
+    }
+  );
+}
+function DropdownMenuSeparator({
+  className: _className,
+  ref,
+  style: _style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(MenuPrimitive.Separator, { ref, "data-slot": "dropdown-menu-separator", ...props });
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLinkItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator
+};