@azmr/ui 0.1.0 → 0.2.0

package/dist/chunk-2TQSHVXA.js

@@ -0,0 +1,12 @@
+"use client";
+
+// src/lib/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export {
+  cn
+};

package/dist/chunk-7EOSDFS3.js

@@ -0,0 +1,10 @@
+// src/lib/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export {
+  cn
+};

package/dist/chunk-C2HKIPLQ.js

@@ -0,0 +1,118 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/spinner/spinner.tsx
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Spinner = forwardRef(function Spinner2({ label, className, ...props }, ref) {
+  return (
+    // biome-ignore lint/a11y/noSvgWithoutTitle: decorative (aria-hidden) by default, or role="status" with an aria-label when `label` is set; both paths are covered by axe tests
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ref,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        "data-motion": "essential",
+        className: cn("size-4 animate-spin", className),
+        ...label ? { role: "status", "aria-label": label } : { "aria-hidden": true },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeOpacity: "0.25", strokeWidth: "3" }),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M22 12a10 10 0 0 0-10-10",
+              stroke: "currentColor",
+              strokeWidth: "3",
+              strokeLinecap: "round"
+            }
+          )
+        ]
+      }
+    )
+  );
+});
+
+// src/components/button/variants.ts
+import { cva } from "class-variance-authority";
+var buttonVariants = cva(
+  [
+    "relative inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium",
+    "h-(--density-control-height) px-(--density-control-padding-x)",
+    "transition-colors duration-(--motion-duration-fast) ease-standard",
+    "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        success: "bg-success text-success-foreground hover:bg-success/90",
+        warning: "bg-warning text-warning-foreground hover:bg-warning/90",
+        info: "bg-info text-info-foreground hover:bg-info/90",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        sm: "h-8 px-3 text-xs",
+        md: "",
+        lg: "h-11 px-6",
+        icon: "size-(--density-control-height) p-0"
+      }
+    },
+    defaultVariants: { variant: "default", size: "md" }
+  }
+);
+
+// src/components/button/button.tsx
+import { forwardRef as forwardRef2 } from "react";
+
+// src/primitives/button.ts
+import { Button } from "@base-ui/react/button";
+
+// src/components/button/button.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var Button2 = forwardRef2(function Button3({
+  variant,
+  size,
+  className,
+  loading = false,
+  loadingText,
+  startIcon,
+  endIcon,
+  disabled,
+  focusableWhenDisabled,
+  children,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsxs2(
+    Button,
+    {
+      ref,
+      disabled: disabled || loading,
+      focusableWhenDisabled: loading || focusableWhenDisabled,
+      "aria-busy": loading || void 0,
+      "data-loading": loading ? "" : void 0,
+      className: cn(buttonVariants({ variant, size }), className),
+      ...props,
+      children: [
+        loading ? /* @__PURE__ */ jsx2(Spinner, {}) : startIcon,
+        loading && loadingText !== void 0 ? loadingText : children,
+        endIcon
+      ]
+    }
+  );
+});
+
+export {
+  Spinner,
+  buttonVariants,
+  Button2 as Button
+};

package/dist/chunk-CAJLW6K2.js

@@ -0,0 +1,16 @@
+"use client";
+
+// src/useSignal.ts
+import { useCallback, useSyncExternalStore } from "react";
+function useSignal(signal) {
+  const subscribe = useCallback(
+    (onStoreChange) => signal.subscribe(() => onStoreChange()),
+    [signal]
+  );
+  const getSnapshot = useCallback(() => signal.peek(), [signal]);
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+
+export {
+  useSignal
+};

package/dist/chunk-CZJZYN54.js

@@ -0,0 +1,36 @@
+"use client";
+import {
+  Button
+} from "./chunk-C2HKIPLQ.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/button/icon-button.tsx
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var SQUARE = { sm: "size-8", md: "", lg: "size-11" };
+var IconButton = forwardRef(function IconButton2({ icon, label, variant = "ghost", size = "md", loading = false, className, ...props }, ref) {
+  if (process.env.NODE_ENV !== "production" && (typeof label !== "string" || !label.trim())) {
+    throw new Error(
+      "IconButton: `label` must be a non-empty string; it is the button's accessible name."
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ref,
+      size: "icon",
+      variant,
+      "aria-label": label,
+      loading,
+      className: cn(SQUARE[size], className),
+      ...props,
+      children: loading ? null : icon
+    }
+  );
+});
+
+export {
+  IconButton
+};

package/dist/chunk-EE4V6XMB.js

@@ -0,0 +1,35 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/button/button-group.tsx
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+function joinedClasses(orientation, attached) {
+  if (!attached) return cn("inline-flex gap-2", orientation === "vertical" && "flex-col");
+  return cn(
+    "inline-flex [&>*]:relative [&>*:focus-visible]:z-10 [&>*:hover]:z-10",
+    orientation === "vertical" ? "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none [&>*:not(:first-child)]:-mt-px" : "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:rounded-r-none [&>*:not(:first-child)]:-ml-px"
+  );
+}
+var ButtonGroup = forwardRef(function ButtonGroup2({ orientation = "horizontal", attached = true, className, ...props }, ref) {
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: a fieldset brings a legend and default styling; a group of buttons is a plain role="group" container
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "group",
+        "data-orientation": orientation,
+        className: cn(joinedClasses(orientation, attached), className),
+        ...props
+      }
+    )
+  );
+});
+
+export {
+  joinedClasses,
+  ButtonGroup
+};

package/dist/chunk-EFHRRLAW.js

@@ -0,0 +1,211 @@
+"use client";
+import {
+  FLOATING_MOTION,
+  POSITION_DEFAULTS
+} from "./chunk-LZMX27IZ.js";
+import {
+  Icon
+} from "./chunk-XRZHP6BD.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/menu/context-menu.tsx
+import { forwardRef as forwardRef2 } from "react";
+
+// src/primitives/context-menu.ts
+import { ContextMenu } from "@base-ui/react/context-menu";
+
+// src/components/menu/parts.tsx
+import { Check, ChevronRight, Circle } from "lucide-react";
+import { forwardRef } from "react";
+
+// src/primitives/menu.ts
+import { Menu } from "@base-ui/react/menu";
+
+// src/components/menu/parts.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var MENU_POSITIONER = "z-(--z-popover)";
+var MENU_POPUP = cn(
+  "min-w-40 max-h-(--available-height) overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-elevation-3 outline-none",
+  FLOATING_MOTION
+);
+var ITEM = cn(
+  "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors duration-(--motion-duration-fast)",
+  "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+  "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+  "[&_svg]:pointer-events-none [&_svg]:shrink-0"
+);
+var CHECKABLE = "pl-8";
+var INDICATOR = "absolute left-2 flex size-4 items-center justify-center";
+var DESTRUCTIVE = "text-destructive data-[highlighted]:bg-destructive/10 data-[highlighted]:text-destructive";
+var MenuItem = forwardRef(function MenuItem2({ variant = "default", className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Menu.Item,
+    {
+      ref,
+      className: cn(ITEM, variant === "destructive" && DESTRUCTIVE, className),
+      ...props
+    }
+  );
+});
+var MenuLinkItem = forwardRef(function MenuLinkItem2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(Menu.LinkItem, { ref, className: cn(ITEM, className), ...props });
+});
+var MenuCheckboxItem = forwardRef(function MenuCheckboxItem2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(Menu.CheckboxItem, { ref, className: cn(ITEM, CHECKABLE, className), ...props, children: [
+    /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, { className: INDICATOR, children: /* @__PURE__ */ jsx(Icon, { icon: Check }) }),
+    children
+  ] });
+});
+var MenuRadioGroup = Menu.RadioGroup;
+var MenuRadioItem = forwardRef(function MenuRadioItem2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(Menu.RadioItem, { ref, className: cn(ITEM, CHECKABLE, className), ...props, children: [
+    /* @__PURE__ */ jsx(Menu.RadioItemIndicator, { className: INDICATOR, children: /* @__PURE__ */ jsx(Icon, { icon: Circle, size: "xs", className: "fill-current" }) }),
+    children
+  ] });
+});
+var MenuGroup = Menu.Group;
+var MenuLabel = forwardRef(function MenuLabel2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Menu.GroupLabel,
+    {
+      ref,
+      className: cn("px-2 py-1.5 text-xs font-medium text-muted-foreground", className),
+      ...props
+    }
+  );
+});
+var MenuSeparator = forwardRef(function MenuSeparator2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Menu.Separator,
+    {
+      ref,
+      className: cn("-mx-1 my-1 h-px bg-border", className),
+      ...props
+    }
+  );
+});
+function MenuShortcut({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-azmr-shortcut": "",
+      className: cn("ml-auto pl-4 text-xs tracking-widest text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+var MenuSub = Menu.SubmenuRoot;
+var MenuSubTrigger = forwardRef(function MenuSubTrigger2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    Menu.SubmenuTrigger,
+    {
+      ref,
+      className: cn(ITEM, "data-[popup-open]:bg-accent", className),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(Icon, { icon: ChevronRight, className: "ml-auto" })
+      ]
+    }
+  );
+});
+var MenuSubContent = forwardRef(
+  function MenuSubContent2({
+    side = "inline-end",
+    align = "start",
+    sideOffset = 2,
+    collisionPadding = POSITION_DEFAULTS.collisionPadding,
+    className,
+    ...props
+  }, ref) {
+    return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(
+      Menu.Positioner,
+      {
+        side,
+        align,
+        sideOffset,
+        collisionPadding,
+        className: MENU_POSITIONER,
+        children: /* @__PURE__ */ jsx(Menu.Popup, { ref, className: cn(MENU_POPUP, className), ...props })
+      }
+    ) });
+  }
+);
+
+// src/components/menu/context-menu.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ContextMenu2 = ContextMenu.Root;
+var ContextMenuTrigger = ContextMenu.Trigger;
+var ContextMenuContent = forwardRef2(
+  function ContextMenuContent2({
+    side,
+    align,
+    sideOffset,
+    collisionPadding = POSITION_DEFAULTS.collisionPadding,
+    className,
+    ...props
+  }, ref) {
+    return /* @__PURE__ */ jsx2(ContextMenu.Portal, { children: /* @__PURE__ */ jsx2(
+      ContextMenu.Positioner,
+      {
+        side,
+        align,
+        sideOffset,
+        collisionPadding,
+        className: MENU_POSITIONER,
+        children: /* @__PURE__ */ jsx2(ContextMenu.Popup, { ref, className: cn(MENU_POPUP, className), ...props })
+      }
+    ) });
+  }
+);
+
+// src/components/menu/dropdown-menu.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var DropdownMenu = Menu.Root;
+var DropdownMenuTrigger = Menu.Trigger;
+var DropdownMenuContent = forwardRef3(
+  function DropdownMenuContent2({
+    side = "bottom",
+    align = "start",
+    sideOffset = POSITION_DEFAULTS.sideOffset - 2,
+    collisionPadding = POSITION_DEFAULTS.collisionPadding,
+    className,
+    ...props
+  }, ref) {
+    return /* @__PURE__ */ jsx3(Menu.Portal, { children: /* @__PURE__ */ jsx3(
+      Menu.Positioner,
+      {
+        side,
+        align,
+        sideOffset,
+        collisionPadding,
+        className: MENU_POSITIONER,
+        children: /* @__PURE__ */ jsx3(Menu.Popup, { ref, className: cn(MENU_POPUP, className), ...props })
+      }
+    ) });
+  }
+);
+
+export {
+  MenuItem,
+  MenuLinkItem,
+  MenuCheckboxItem,
+  MenuRadioGroup,
+  MenuRadioItem,
+  MenuGroup,
+  MenuLabel,
+  MenuSeparator,
+  MenuShortcut,
+  MenuSub,
+  MenuSubTrigger,
+  MenuSubContent,
+  ContextMenu2 as ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent
+};

package/dist/chunk-GLB75NT3.js

@@ -0,0 +1,21 @@
+// src/motion/presets/presets.ts
+var motionPresets = {
+  fade: { enter: "motion-fade-in", exit: "motion-fade-out" },
+  scale: { enter: "motion-scale-in", exit: "motion-scale-out" },
+  slideUp: { enter: "motion-slide-up-in", exit: "motion-slide-up-out" },
+  slideDown: { enter: "motion-slide-down-in", exit: "motion-slide-down-out" },
+  slideLeft: { enter: "motion-slide-left-in", exit: "motion-slide-left-out" },
+  slideRight: { enter: "motion-slide-right-in", exit: "motion-slide-right-out" },
+  /** A grid-template-rows collapse. Use `Collapse`. */
+  collapse: { root: "motion-collapse", inner: "motion-collapse-inner" },
+  /** A staggered list. Use `Stagger`. */
+  stagger: { container: "motion-stagger", item: "motion-stagger-item" },
+  /** A sweeping highlight for loading placeholders. Put it on a rounded, overflow-clipped box. */
+  shimmer: "motion-shimmer",
+  /** An SVG tick that draws itself. Use `AnimatedCheck`. */
+  checkDraw: "motion-check"
+};
+
+export {
+  motionPresets
+};

package/dist/chunk-GX2YEJ43.js

@@ -0,0 +1,36 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/input/input.tsx
+import { forwardRef } from "react";
+
+// src/primitives/input.ts
+import { Input } from "@base-ui/react/input";
+
+// src/components/input/input.tsx
+import { jsx } from "react/jsx-runtime";
+var Input2 = forwardRef(function Input3({ className, type = "text", ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      ref,
+      type,
+      className: cn(
+        "flex h-(--density-control-height) w-full min-w-0 rounded-md border border-input bg-background px-(--density-control-padding-x) py-1 text-sm text-foreground",
+        "transition-colors duration-(--motion-duration-fast) ease-standard",
+        "outline-none placeholder:text-muted-foreground",
+        "focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring",
+        "aria-invalid:border-destructive data-[invalid]:border-destructive",
+        "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 read-only:bg-muted",
+        className
+      ),
+      ...props
+    }
+  );
+});
+
+export {
+  Input2 as Input
+};

package/dist/chunk-LTOLV67A.js

@@ -0,0 +1,19 @@
+import {
+  cn
+} from "./chunk-7EOSDFS3.js";
+
+// src/components/shared/render-element.ts
+import { cloneElement, createElement } from "react";
+function renderElement(render, tag, props, children) {
+  if (!render) return createElement(tag, props, children);
+  const own = render.props;
+  return cloneElement(
+    render,
+    { ...props, ...own, className: cn(props.className, own.className) },
+    children
+  );
+}
+
+export {
+  renderElement
+};

package/dist/chunk-LZMX27IZ.js

@@ -0,0 +1,10 @@
+"use client";
+
+// src/components/floating/shared.ts
+var POSITION_DEFAULTS = { sideOffset: 6, collisionPadding: 8 };
+var FLOATING_MOTION = "origin-(--transform-origin) transition-[opacity,scale] duration-(--motion-duration-fast) ease-standard data-[starting-style]:scale-95 data-[starting-style]:opacity-0 data-[ending-style]:scale-95 data-[ending-style]:opacity-0";
+
+export {
+  POSITION_DEFAULTS,
+  FLOATING_MOTION
+};

package/dist/chunk-NIIDYIZA.js

@@ -0,0 +1 @@
+"use client";

package/dist/chunk-Q4PPM2SU.js

@@ -0,0 +1,97 @@
+import {
+  cn
+} from "./chunk-7EOSDFS3.js";
+
+// src/icons/registry.ts
+var ICON_NAME = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
+var registry = /* @__PURE__ */ new Map();
+var warned = /* @__PURE__ */ new Set();
+function isIconComponent(value) {
+  return typeof value === "function" || typeof value === "object" && value !== null && "$$typeof" in value;
+}
+function assertIconEntry(name, component) {
+  if (!ICON_NAME.test(name)) {
+    throw new TypeError(
+      `Invalid icon name "${name}": use lower-case kebab-case, e.g. "arrow-right"`
+    );
+  }
+  if (!isIconComponent(component)) {
+    throw new TypeError(`Icon "${name}" must be a React component that renders an <svg>`);
+  }
+}
+function registerIcons(icons) {
+  const entries = Object.entries(icons);
+  for (const [name, component] of entries) assertIconEntry(name, component);
+  for (const [name, component] of entries) registry.set(name, component);
+}
+function getIcon(name) {
+  return registry.get(name);
+}
+function registeredIconNames() {
+  return [...registry.keys()];
+}
+function warnMissingIcon(name) {
+  const isProduction = typeof process !== "undefined" && process.env?.NODE_ENV === "production";
+  const key = name ?? "(no icon or name)";
+  if (isProduction || warned.has(key)) return;
+  warned.add(key);
+  console.error(
+    name === void 0 ? "<Icon> needs an `icon` component or a registered `name`; rendering nothing." : `<Icon name="${name}"> is not registered (see registerIcons); rendering nothing.`
+  );
+}
+
+// src/icons/icon.tsx
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var iconSizes = {
+  xs: "size-3",
+  sm: "size-3.5",
+  md: "size-4",
+  lg: "size-5",
+  xl: "size-6"
+};
+var Icon = forwardRef(function Icon2({
+  icon,
+  name,
+  size = "md",
+  spin = false,
+  className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  ...props
+}, ref) {
+  const resolved = icon ?? (name === void 0 ? void 0 : getIcon(name));
+  if (!resolved) {
+    warnMissingIcon(name);
+    return null;
+  }
+  const Component = resolved;
+  const labelled = Boolean(ariaLabel || ariaLabelledBy);
+  const numeric = typeof size === "number";
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref,
+      className: cn(
+        numeric ? void 0 : iconSizes[size],
+        "shrink-0",
+        spin && "animate-spin",
+        className
+      ),
+      ...numeric ? { width: size, height: size } : {},
+      ...spin ? { "data-motion": "essential" } : {},
+      ...labelled ? { role: "img", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy } : { "aria-hidden": true },
+      ...props
+    }
+  );
+});
+
+export {
+  assertIconEntry,
+  registerIcons,
+  getIcon,
+  registeredIconNames,
+  warnMissingIcon,
+  iconSizes,
+  Icon
+};

package/dist/chunk-WVE2E37B.js

@@ -0,0 +1,20 @@
+"use client";
+
+// src/use-reduced-motion.ts
+import { useSyncExternalStore } from "react";
+var QUERY = "(prefers-reduced-motion: reduce)";
+function subscribe(onChange) {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => {
+  };
+  const media = window.matchMedia(QUERY);
+  media.addEventListener("change", onChange);
+  return () => media.removeEventListener("change", onChange);
+}
+var read = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(QUERY).matches;
+function useReducedMotion() {
+  return useSyncExternalStore(subscribe, read, () => false);
+}
+
+export {
+  useReducedMotion
+};