@azmr/ui 0.1.0 → 0.2.0

package/dist/chunk-XRZHP6BD.js

@@ -0,0 +1,92 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.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 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,
+  warnMissingIcon,
+  Icon
+};

package/dist/disclosure.d.ts

@@ -0,0 +1,72 @@
+import * as _base_ui_react_accordion from '@base-ui/react/accordion';
+import { Accordion as Accordion$1 } from '@base-ui/react/accordion';
+import * as react from 'react';
+import { ComponentPropsWithoutRef } from 'react';
+import * as _base_ui_react_collapsible from '@base-ui/react/collapsible';
+import * as _base_ui_react_tabs from '@base-ui/react/tabs';
+
+type WithClassName<T> = Omit<T, "className"> & {
+    className?: string;
+};
+/**
+ * A set of collapsible sections. One open at a time by default; `multiple` allows several. The
+ * keyboard map follows the WAI-ARIA accordion pattern: Tab to a trigger, Enter or Space to
+ * toggle, Up and Down to move between triggers, Home and End to jump.
+ */
+declare const Accordion: react.ForwardRefExoticComponent<Omit<Omit<Accordion$1.Root.Props<unknown>, "ref">, "className"> & {
+    className?: string;
+} & react.RefAttributes<HTMLDivElement>>;
+declare const AccordionItem: react.ForwardRefExoticComponent<Omit<Omit<Omit<_base_ui_react_accordion.AccordionItemProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
+    className?: string;
+} & react.RefAttributes<HTMLDivElement>>;
+interface AccordionTriggerProps extends WithClassName<ComponentPropsWithoutRef<typeof Accordion$1.Trigger>> {
+    /** The heading level wrapping the trigger, to fit the page outline. Default 3. */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+}
+declare const AccordionTrigger: react.ForwardRefExoticComponent<AccordionTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+/** The panel. Its height animates from the measured height with the motion tokens. */
+declare const AccordionContent: react.ForwardRefExoticComponent<Omit<Omit<Omit<_base_ui_react_accordion.AccordionPanelProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
+    className?: string;
+} & react.RefAttributes<HTMLDivElement>>;
+
+/** One show/hide region. The trigger is a real button with `aria-expanded` and `aria-controls`. */
+declare const Collapsible: react.ForwardRefExoticComponent<Omit<Omit<Omit<_base_ui_react_collapsible.CollapsibleRootProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
+    className?: string;
+} & react.RefAttributes<HTMLDivElement>>;
+/** The control that toggles the content. Style it, or render your own element with `render`. */
+declare const CollapsibleTrigger: react.ForwardRefExoticComponent<Omit<Omit<Omit<_base_ui_react_collapsible.CollapsibleTriggerProps, "ref"> & react.RefAttributes<HTMLButtonElement>, "ref">, "className"> & {
+    className?: string;
+} & react.RefAttributes<HTMLButtonElement>>;
+/**
+ * The content. Its height animates from the panel's measured height (Base UI measures it and
+ * exposes `--collapsible-panel-height`) using the motion tokens, so it is instant under
+ * `prefers-reduced-motion`. `className` styles an inner wrapper, so padding never fights the
+ * height animation.
+ */
+declare const CollapsibleContent: react.ForwardRefExoticComponent<Omit<Omit<Omit<_base_ui_react_collapsible.CollapsiblePanelProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
+    className?: string;
+} & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Tabs: a list of tabs and one visible panel each. Horizontal by default, or `orientation="vertical"`.
+ * Keyboard: Tab enters the list at the selected tab and then moves on to the panel; the arrow keys
+ * (Left and Right, or Up and Down when vertical) move focus between tabs and wrap at the ends;
+ * Home and End jump; Enter or Space selects the focused tab. Add `activateOnFocus` to the list to
+ * select as you arrow (best when switching is cheap). For a shareable tab, see `useUrlTab`.
+ */
+declare const Tabs: react.ForwardRefExoticComponent<Omit<Omit<Omit<_base_ui_react_tabs.TabsRootProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
+    className?: string;
+} & react.RefAttributes<HTMLDivElement>>;
+/** The row (or column) of tabs. Give it an accessible name with `aria-label`. */
+declare const TabsList: react.ForwardRefExoticComponent<Omit<Omit<Omit<_base_ui_react_tabs.TabsListProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
+    className?: string;
+} & react.RefAttributes<HTMLDivElement>>;
+declare const TabsTrigger: react.ForwardRefExoticComponent<Omit<Omit<Omit<_base_ui_react_tabs.TabsTabProps, "ref"> & react.RefAttributes<HTMLElement>, "ref">, "className"> & {
+    className?: string;
+} & react.RefAttributes<HTMLButtonElement>>;
+/** A panel. It is focusable, so a keyboard user can reach and scroll content that has no controls. */
+declare const TabsContent: react.ForwardRefExoticComponent<Omit<Omit<Omit<_base_ui_react_tabs.TabsPanelProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
+    className?: string;
+} & react.RefAttributes<HTMLDivElement>>;
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, type AccordionTriggerProps, Collapsible, CollapsibleContent, CollapsibleTrigger, Tabs, TabsContent, TabsList, TabsTrigger };

package/dist/disclosure.js

@@ -0,0 +1,221 @@
+"use client";
+import {
+  Icon
+} from "./chunk-XRZHP6BD.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/disclosure/accordion.tsx
+import { ChevronDown } from "lucide-react";
+import { createElement, forwardRef } from "react";
+
+// src/primitives/accordion.ts
+import { Accordion } from "@base-ui/react/accordion";
+
+// src/components/disclosure/accordion.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Accordion2 = forwardRef(function Accordion3({ className, onKeyDown, loopFocus = true, orientation, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Accordion.Root,
+    {
+      ref,
+      orientation,
+      loopFocus,
+      className: cn("w-full", className),
+      onKeyDown: (event) => {
+        onKeyDown?.(event);
+        if (!event.defaultPrevented) moveFocus(event, orientation ?? "vertical", loopFocus);
+      },
+      ...props
+    }
+  );
+});
+var PREVIOUS = { vertical: "ArrowUp", horizontal: "ArrowLeft" };
+var NEXT = { vertical: "ArrowDown", horizontal: "ArrowRight" };
+function moveFocus(event, orientation, loop) {
+  const root = event.currentTarget;
+  const target = event.target;
+  const ownTriggers = Array.from(
+    root.querySelectorAll("button[aria-expanded][data-index]")
+  );
+  const index = ownTriggers.indexOf(target);
+  if (index === -1) return;
+  const enabled = ownTriggers.filter(
+    (el) => !el.disabled && !el.hasAttribute("data-disabled")
+  );
+  const position = enabled.indexOf(target);
+  let next;
+  switch (event.key) {
+    case NEXT[orientation]:
+      next = enabled[position + 1] ?? (loop ? enabled[0] : void 0);
+      break;
+    case PREVIOUS[orientation]:
+      next = enabled[position - 1] ?? (loop ? enabled[enabled.length - 1] : void 0);
+      break;
+    case "Home":
+      next = enabled[0];
+      break;
+    case "End":
+      next = enabled[enabled.length - 1];
+      break;
+    default:
+      return;
+  }
+  event.preventDefault();
+  next?.focus();
+}
+var AccordionItem = forwardRef(function AccordionItem2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Accordion.Item,
+    {
+      ref,
+      className: cn("border-b border-border last:border-b-0", className),
+      ...props
+    }
+  );
+});
+var AccordionTrigger = forwardRef(
+  function AccordionTrigger2({ headingLevel = 3, className, children, ...props }, ref) {
+    return /* @__PURE__ */ jsx(Accordion.Header, { render: createElement(`h${headingLevel}`), className: "flex", children: /* @__PURE__ */ jsxs(
+      Accordion.Trigger,
+      {
+        ref,
+        className: cn(
+          "flex flex-1 items-center justify-between gap-4 rounded-sm py-4 text-left text-sm font-medium outline-none transition-colors duration-(--motion-duration-fast) hover:underline focus-visible:ring-2 focus-visible:ring-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[panel-open]:[&>svg]:rotate-180",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              icon: ChevronDown,
+              className: "transition-transform duration-(--motion-duration-fast) ease-standard"
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+var AccordionContent = forwardRef(function AccordionContent2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Accordion.Panel,
+    {
+      ref,
+      className: "h-(--accordion-panel-height) overflow-hidden text-sm transition-[height] duration-(--motion-duration-base) ease-standard data-[ending-style]:h-0 data-[starting-style]:h-0",
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: cn("pb-4", className), children })
+    }
+  );
+});
+
+// src/components/disclosure/collapsible.tsx
+import { forwardRef as forwardRef2 } from "react";
+
+// src/primitives/collapsible.ts
+import { Collapsible } from "@base-ui/react/collapsible";
+
+// src/components/disclosure/collapsible.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Collapsible2 = forwardRef2(function Collapsible3({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx2(Collapsible.Root, { ref, className: cn("w-full", className), ...props });
+});
+var CollapsibleTrigger = forwardRef2(function CollapsibleTrigger2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx2(
+    Collapsible.Trigger,
+    {
+      ref,
+      className: cn(
+        "rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        className
+      ),
+      ...props
+    }
+  );
+});
+var CollapsibleContent = forwardRef2(function CollapsibleContent2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx2(
+    Collapsible.Panel,
+    {
+      ref,
+      className: "h-(--collapsible-panel-height) overflow-hidden transition-[height] duration-(--motion-duration-base) ease-standard data-[ending-style]:h-0 data-[starting-style]:h-0",
+      ...props,
+      children: /* @__PURE__ */ jsx2("div", { className, children })
+    }
+  );
+});
+
+// src/components/disclosure/tabs.tsx
+import { forwardRef as forwardRef3 } from "react";
+
+// src/primitives/tabs.ts
+import { Tabs } from "@base-ui/react/tabs";
+
+// src/components/disclosure/tabs.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Tabs2 = forwardRef3(function Tabs3({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx3(
+    Tabs.Root,
+    {
+      ref,
+      className: cn("flex flex-col gap-2 data-[orientation=vertical]:flex-row", className),
+      ...props
+    }
+  );
+});
+var TabsList = forwardRef3(function TabsList2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx3(
+    Tabs.List,
+    {
+      ref,
+      className: cn(
+        "inline-flex items-center rounded-md bg-muted p-1 text-muted-foreground data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch",
+        className
+      ),
+      ...props
+    }
+  );
+});
+var TabsTrigger = forwardRef3(function TabsTrigger2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx3(
+    Tabs.Tab,
+    {
+      ref,
+      className: cn(
+        "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium outline-none transition-colors duration-(--motion-duration-fast) focus-visible:ring-2 focus-visible:ring-ring data-[active]:bg-background data-[active]:text-foreground data-[active]:shadow-elevation-1 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+});
+var TabsContent = forwardRef3(function TabsContent2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx3(
+    Tabs.Panel,
+    {
+      ref,
+      tabIndex: 0,
+      className: cn(
+        "rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        className
+      ),
+      ...props
+    }
+  );
+});
+export {
+  Accordion2 as Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Collapsible2 as Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  Tabs2 as Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger
+};

package/dist/display.d.ts

@@ -0,0 +1,111 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+declare const STATUS: {
+    readonly info: {
+        readonly token: "info";
+        readonly textToken: "info";
+        readonly alert: "border-info/30 bg-info/10";
+        readonly badge: "border-transparent bg-info/15 text-info";
+        readonly icon: "text-info";
+    };
+    readonly success: {
+        readonly token: "success";
+        readonly textToken: "success";
+        readonly alert: "border-success/30 bg-success/10";
+        readonly badge: "border-transparent bg-success/15 text-success";
+        readonly icon: "text-success";
+    };
+    readonly warning: {
+        readonly token: "warning";
+        readonly textToken: "warning-text";
+        readonly alert: "border-warning/40 bg-warning/10";
+        readonly badge: "border-transparent bg-warning/15 text-warning-text";
+        readonly icon: "text-warning-text";
+    };
+    readonly destructive: {
+        readonly token: "destructive";
+        readonly textToken: "destructive";
+        readonly alert: "border-destructive/30 bg-destructive/10";
+        readonly badge: "border-transparent bg-destructive/10 text-destructive";
+        readonly icon: "text-destructive";
+    };
+};
+type StatusVariant = keyof typeof STATUS;
+
+interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    variant?: StatusVariant;
+    /** Replaces the default icon; `null` removes it. */
+    icon?: ReactNode;
+    /** Adds a dismiss button that calls this. The Alert does not hide itself: you own that state. */
+    onDismiss?: () => void;
+    /** The accessible name of the dismiss button. Default "Dismiss". */
+    dismissLabel?: string;
+}
+/**
+ * A status message. Problems (`warning`, `destructive`) are announced assertively with
+ * `role="alert"`; `info` and `success` politely with `role="status"`. Server-safe: the dismiss
+ * handler works when the Alert is rendered from a Client Component.
+ */
+declare const Alert: react.ForwardRefExoticComponent<AlertProps & react.RefAttributes<HTMLDivElement>>;
+declare const AlertTitle: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+declare const AlertDescription: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+
+declare const badgeVariants: (props?: ({
+    variant?: "info" | "success" | "warning" | "destructive" | "default" | "secondary" | "outline" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
+}
+/** A small label for status or a count. Server-safe. */
+declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
+
+type DivProps = HTMLAttributes<HTMLDivElement>;
+/** A bordered surface for grouped content. Server-safe. */
+declare const Card: react.ForwardRefExoticComponent<DivProps & react.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: react.ForwardRefExoticComponent<DivProps & react.RefAttributes<HTMLDivElement>>;
+interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+    /** The heading level to render. Default `h3`; pick the one that fits the page outline. */
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "p";
+}
+declare const CardTitle: react.ForwardRefExoticComponent<CardTitleProps & react.RefAttributes<HTMLHeadingElement>>;
+declare const CardDescription: react.ForwardRefExoticComponent<DivProps & react.RefAttributes<HTMLDivElement>>;
+declare const CardContent: react.ForwardRefExoticComponent<DivProps & react.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: react.ForwardRefExoticComponent<DivProps & react.RefAttributes<HTMLDivElement>>;
+
+interface ChipProps extends BadgeProps {
+    /** Adds a remove button that calls this. The Chip does not hide itself: you own that state. */
+    onRemove?: () => void;
+    /** The accessible name of the remove button. Default `Remove <label>` for text labels. */
+    removeLabel?: string;
+}
+/** A Badge that can be removed, such as a selected filter or a tag. Server-safe. */
+declare const Chip: react.ForwardRefExoticComponent<ChipProps & react.RefAttributes<HTMLSpanElement>>;
+
+interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    title: ReactNode;
+    description?: ReactNode;
+    /** A decorative icon or illustration above the title. */
+    icon?: ReactNode;
+    /** What the user can do about it, usually a Button. */
+    action?: ReactNode;
+    /** The heading level of the title, to fit the page outline. Default 3. */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+}
+/** What to show when there is nothing to show yet, with a way forward. Server-safe. */
+declare const EmptyState: react.ForwardRefExoticComponent<EmptyStateProps & react.RefAttributes<HTMLDivElement>>;
+
+interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    /** Pulse while loading. Default true; the global reduced-motion rule stills it for users who ask. */
+    animate?: boolean;
+    /** Sweep a highlight across (needs `@azmr/ui/styles.css`) instead of pulsing. Stops with reduced motion. */
+    shimmer?: boolean;
+}
+/**
+ * A placeholder shaped like content that is loading. Decorative (`aria-hidden`): mark the loading
+ * container `aria-busy` and announce the result instead. Server-safe.
+ */
+declare const Skeleton: react.ForwardRefExoticComponent<SkeletonProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Alert, AlertDescription, type AlertProps, AlertTitle, Badge, type BadgeProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, Chip, type ChipProps, EmptyState, type EmptyStateProps, Skeleton, type SkeletonProps, type StatusVariant, badgeVariants };