@warmio/ui 1.0.0 → 1.2.0

package/dist/chunks/chunk-SK7IZUFC.js

@@ -0,0 +1,333 @@
+import {
+  cn
+} from "./chunk-VIB7OX7D.js";
+
+// ../ui/src/warmio/dropdown-menu.tsx
+import * as React from "react";
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import { CheckIcon } from "lucide-react";
+
+// ../ui/src/lib/interaction-feedback.ts
+import { play, setEnabled } from "cuelume";
+
+// ../ui/src/lib/haptic.ts
+var supportsHaptic = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(pointer: coarse)").matches : false;
+function getWarmCapacitor(win) {
+  return win?.Capacitor;
+}
+function isIosCapacitorApp(win = typeof window === "undefined" ? void 0 : window) {
+  const capacitor = getWarmCapacitor(win);
+  return capacitor?.getPlatform?.() === "ios" && capacitor?.isNativePlatform?.() === true;
+}
+function hasVibrate(nav) {
+  return "vibrate" in nav && typeof nav.vibrate === "function";
+}
+function triggerIosCapacitorHaptic() {
+  const haptics = getWarmCapacitor(typeof window === "undefined" ? void 0 : window)?.Plugins?.Haptics;
+  void haptics?.impact?.({ style: "LIGHT" }).catch(() => {
+  });
+}
+function haptic(pattern = 50) {
+  try {
+    if (isIosCapacitorApp()) {
+      triggerIosCapacitorHaptic();
+      return;
+    }
+    if (!supportsHaptic) return;
+    if (hasVibrate(navigator)) {
+      navigator.vibrate(pattern);
+      return;
+    }
+    const label = document.createElement("label");
+    label.ariaHidden = "true";
+    label.style.display = "none";
+    const input = document.createElement("input");
+    input.type = "checkbox";
+    input.setAttribute("switch", "");
+    label.appendChild(input);
+    try {
+      document.head.appendChild(label);
+      label.click();
+    } finally {
+      document.head.removeChild(label);
+    }
+  } catch {
+  }
+}
+
+// ../ui/src/lib/interaction-feedback.ts
+var soundByIntent = {
+  press: "press",
+  selection: "tick",
+  toggle: "toggle"
+};
+var soundsEnabled = false;
+setEnabled(false);
+function triggerInteractionFeedback(intent, options = {}) {
+  if (options.haptic) {
+    haptic();
+  }
+  if (!soundsEnabled) return;
+  if (typeof document !== "undefined" && document.hidden) return;
+  try {
+    play(soundByIntent[intent]);
+  } catch {
+  }
+}
+
+// ../ui/src/warmio/dropdown-menu.tsx
+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 });
+}
+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,
+  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,
+      className: "isolate z-50 outline-none",
+      children: /* @__PURE__ */ jsx(
+        MenuPrimitive.Popup,
+        {
+          ref,
+          "data-slot": "dropdown-menu-content",
+          className: cn(
+            "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 duration-100 outline-none",
+            dropdownMenuContentSizeClasses[size],
+            dropdownMenuContentSpacingClasses[spacing],
+            "data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+            "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95 motion-reduce:animate-none"
+          ),
+          ...props,
+          children
+        }
+      )
+    }
+  );
+  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,
+      className: "group/dropdown-menu-item relative flex w-full cursor-default items-center gap-2 rounded-lg px-2 py-2 text-sm 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-6 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
+    }
+  );
+}
+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,
+      className: "group/dropdown-menu-item relative flex w-full cursor-default items-center gap-2 rounded-lg px-2 py-2 text-sm 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-6 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
+    }
+  );
+}
+function DropdownMenuCheckboxItem({
+  children,
+  checked,
+  inset,
+  className: _className,
+  ref,
+  style: _style,
+  onCheckedChange,
+  ...props
+}) {
+  const handleCheckedChange = (nextChecked, eventDetails) => {
+    triggerInteractionFeedback("toggle");
+    onCheckedChange?.(nextChecked, eventDetails);
+  };
+  return /* @__PURE__ */ jsxs(
+    MenuPrimitive.CheckboxItem,
+    {
+      ref,
+      "data-slot": "dropdown-menu-checkbox-item",
+      "data-inset": inset,
+      className: "relative flex cursor-default items-center gap-2 rounded-lg py-2 pr-6 pl-2 text-sm outline-hidden select-none focus:bg-sidebar-accent focus:text-sidebar-accent-foreground focus:**:text-sidebar-accent-foreground data-inset:pl-6 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, {}) })
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+function DropdownMenuRadioGroup({
+  className: _className,
+  onValueChange,
+  style: _style,
+  ...props
+}) {
+  const handleValueChange = (value, eventDetails) => {
+    triggerInteractionFeedback("selection");
+    onValueChange?.(value, eventDetails);
+  };
+  return /* @__PURE__ */ jsx(
+    MenuPrimitive.RadioGroup,
+    {
+      "data-slot": "dropdown-menu-radio-group",
+      onValueChange: handleValueChange,
+      ...props
+    }
+  );
+}
+function DropdownMenuRadioItem({
+  children,
+  inset,
+  className: _className,
+  presentation,
+  ref,
+  style: _style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    MenuPrimitive.RadioItem,
+    {
+      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-6 pl-2 text-sm outline-hidden select-none focus:bg-sidebar-accent focus:text-sidebar-accent-foreground focus:**:text-sidebar-accent-foreground data-inset:pl-6 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        presentation === "selectMenu" && "min-h-12 text-base"
+      ),
+      ...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, {}) })
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+function DropdownMenuLabel({
+  className: _className,
+  inset,
+  ref,
+  style: _style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    MenuPrimitive.GroupLabel,
+    {
+      ref,
+      "data-slot": "dropdown-menu-label",
+      "data-inset": inset,
+      className: "px-2 py-2 text-xs font-bold text-muted-foreground data-inset:pl-6",
+      ...props
+    }
+  );
+}
+function DropdownMenuSeparator({
+  className: _className,
+  ref,
+  style: _style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    MenuPrimitive.Separator,
+    {
+      ref,
+      "data-slot": "dropdown-menu-separator",
+      className: "mx-0 my-0 h-px bg-border",
+      ...props
+    }
+  );
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLinkItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator
+};

package/dist/chunks/chunk-T2TXMN3G.js

@@ -0,0 +1,74 @@
+import {
+  cn
+} from "./chunk-VIB7OX7D.js";
+
+// ../ui/src/components/button.variants.ts
+import { cva } from "class-variance-authority";
+var buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-inset focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-inset aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "border-[color:var(--button-primary-border)] bg-[var(--button-primary-bg)] bg-[image:var(--button-primary-gradient)] text-[color:var(--button-primary-foreground)] shadow-[var(--button-primary-shadow)] hover:bg-[var(--button-primary-hover)] active:bg-[var(--button-primary-active)]",
+        outline: "border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "underline-offset-4 decoration-current hover:underline"
+      },
+      size: {
+        default: "h-9 gap-2 rounded-lg px-3 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
+        md: "h-9 gap-2 rounded-lg px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
+        lg: "h-11 gap-2 rounded-xl px-5 text-base has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",
+        xl: "h-12 gap-2 rounded-xl px-6 text-base has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5",
+        option: "h-auto min-h-16 items-start justify-start gap-2 whitespace-normal rounded-xl px-3 py-3 text-sm",
+        icon: "size-9",
+        "icon-round": "size-9 rounded-full",
+        "icon-xs": "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md",
+        "icon-lg": "size-10",
+        "icon-xl": "size-11 rounded-lg",
+        "input-icon": "h-full w-10 rounded-l-none"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+
+// ../ui/src/components/button.tsx
+import * as React from "react";
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { jsx } from "react/jsx-runtime";
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  render,
+  children,
+  ...props
+}) {
+  const resolvedRender = render ?? (asChild && React.isValidElement(children) ? children : void 0);
+  return /* @__PURE__ */ jsx(
+    ButtonPrimitive,
+    {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size }), className),
+      ...props,
+      render: resolvedRender,
+      children: resolvedRender ? void 0 : children
+    }
+  );
+}
+
+export {
+  buttonVariants,
+  Button
+};