@glyphui/ui 0.4.0 → 0.5.0

package/src/provider/glyph-provider.tsx

@@ -1,13 +1,19 @@
-import type { Theme } from '@glyphui/tokens'
+import type { MotionLevel, Theme } from '@glyphui/tokens'
 import { Tooltip } from 'radix-ui'
-import { type ReactNode, useMemo } from 'react'
+import { lazy, type ReactNode, Suspense, useMemo } from 'react'
 import { ConfirmProvider } from '../components/alert-dialog/confirm'
-import { Toaster, type ToasterProps } from '../components/toast/toast'
+import type { ToasterProps } from '../components/toast/toast'
+import { MotionRootAttribute, MotionScope } from '../motion/motion-root'
 import { glyph } from '../themes'
 import { type ColorModePreference, ColorModeProvider } from './color-mode'
 import { GlyphContext, type GlyphRouter, type LinkComponent, neverActive } from './glyph-context'
 import { ThemeStyle } from './theme-style'
 
+// Only apps that turn on `toaster` load the toast UI.
+const Toaster = lazy(() =>
+  import('../components/toast/toast').then((m) => ({ default: m.Toaster })),
+)
+
 export interface GlyphProviderProps {
   children: ReactNode
   /** The theme for the whole app. Defaults to the `glyph` preset. */
@@ -29,6 +35,11 @@ export interface GlyphProviderProps {
    * Toaster props (e.g. `{ position: 'top-center' }`). Off by default.
    */
   toaster?: boolean | ToasterProps
+  /**
+   * Overrides the theme's motion level everywhere, e.g. `"none"` in tests or for a user
+   * setting. Visitors who ask for reduced motion never get animation either way.
+   */
+  motion?: MotionLevel
 }
 
 /** Provides the theme, color mode, tooltips, `useConfirm()` and (optionally) toasts. Render once at the root. */
@@ -40,12 +51,13 @@ export function GlyphProvider({
   router,
   linkComponent,
   toaster = false,
+  motion,
 }: GlyphProviderProps) {
   const Link = router?.Link ?? linkComponent ?? 'a'
   const useIsActive = router?.useIsActive ?? neverActive
   const value = useMemo(
-    () => ({ theme, linkComponent: Link, useIsActive }),
-    [theme, Link, useIsActive],
+    () => ({ theme, linkComponent: Link, useIsActive, motion }),
+    [theme, Link, useIsActive, motion],
   )
   return (
     <ColorModeProvider
@@ -54,13 +66,20 @@ export function GlyphProvider({
     >
       <GlyphContext.Provider value={value}>
         <ThemeStyle theme={theme} />
-        <Tooltip.Provider delayDuration={300}>
-          {/* useConfirm() works anywhere without setup; the dialog only mounts while open. */}
-          <ConfirmProvider>
-            {children}
-            {toaster && <Toaster {...(toaster === true ? {} : toaster)} />}
-          </ConfirmProvider>
-        </Tooltip.Provider>
+        <MotionRootAttribute />
+        <MotionScope>
+          <Tooltip.Provider delayDuration={300}>
+            {/* useConfirm() works anywhere without setup; the dialog only mounts while open. */}
+            <ConfirmProvider>
+              {children}
+              {toaster && (
+                <Suspense fallback={null}>
+                  <Toaster {...(toaster === true ? {} : toaster)} />
+                </Suspense>
+              )}
+            </ConfirmProvider>
+          </Tooltip.Provider>
+        </MotionScope>
       </GlyphContext.Provider>
     </ColorModeProvider>
   )

package/src/provider/theme-scope.tsx

@@ -1,6 +1,7 @@
 import { type ColorMode, scopeSelector, type Theme } from '@glyphui/tokens'
 import { Slot } from 'radix-ui'
 import { type ComponentProps, useContext, useMemo } from 'react'
+import { ScopedMotionConfig } from '../motion/motion-root'
 import { cn } from '../utils/cn'
 import { GlyphContext, neverActive } from './glyph-context'
 import { ThemeStyle } from './theme-style'
@@ -20,21 +21,25 @@ export function ThemeScope({ theme, mode, asChild, children, ...props }: ThemeSc
       theme,
       linkComponent: parent?.linkComponent ?? 'a',
       useIsActive: parent?.useIsActive ?? neverActive,
+      motion: parent?.motion,
     }),
-    [theme, parent?.linkComponent, parent?.useIsActive],
+    [theme, parent?.linkComponent, parent?.useIsActive, parent?.motion],
   )
   const Comp = asChild ? Slot.Root : 'div'
   return (
     <GlyphContext.Provider value={value}>
       <ThemeStyle theme={theme} selector={scopeSelector(theme)} />
-      <Comp
-        data-glyph-theme={theme.name}
-        data-mode={mode}
-        {...props}
-        className={cn('bg-background font-sans text-foreground', props.className)}
-      >
-        {children}
-      </Comp>
+      <ScopedMotionConfig>
+        <Comp
+          data-glyph-theme={theme.name}
+          data-mode={mode}
+          data-motion={parent?.motion ?? theme.motion.level ?? 'subtle'}
+          {...props}
+          className={cn('bg-background font-sans text-foreground', props.className)}
+        >
+          {children}
+        </Comp>
+      </ScopedMotionConfig>
     </GlyphContext.Provider>
   )
 }

package/src/themes.ts

@@ -10,7 +10,7 @@ import { defineTheme, presets as tokenPresets } from '@glyphui/tokens'
 export const glyph = tokenPresets.glyph
 
 /** Zero radius, heavy borders, hard offset shadows, loud color. */
-export const brutalist = defineTheme({
+export const brutalist = /* @__PURE__ */ defineTheme({
   name: 'brutalist',
   extends: tokenPresets.brutalist,
   components: {
@@ -27,7 +27,7 @@ export const brutalist = defineTheme({
 })
 
 /** Serif display type, warm paper neutrals, deep green ink, hairlines instead of shadows. */
-export const editorial = defineTheme({
+export const editorial = /* @__PURE__ */ defineTheme({
   name: 'editorial',
   extends: tokenPresets.editorial,
   components: {
@@ -38,7 +38,7 @@ export const editorial = defineTheme({
 })
 
 /** Pill shapes, lavender and mint, chunky rounded type, springy motion. */
-export const playful = defineTheme({
+export const playful = /* @__PURE__ */ defineTheme({
   name: 'playful',
   extends: tokenPresets.playful,
   components: {

package/src/utils/styles.ts

@@ -6,8 +6,22 @@ export const focusRing =
 export const themedBorder = 'border-(length:--glyph-border-width)'
 
 export const transition =
-  'transition-[color,background-color,border-color,box-shadow,transform,opacity] duration-(--glyph-duration-base) ease-standard'
+  'transition-[color,background-color,border-color,box-shadow,transform,translate,scale,opacity] duration-(--glyph-duration-base) ease-standard'
+
+/**
+ * Enter and exit for anything Radix positions next to a trigger: springs out of the trigger
+ * (pair with the primitive's transform-origin class) and leaves quickly. Distance and scale
+ * follow the motion level; the side moves it toward the trigger.
+ */
+export const popoverMotion =
+  'animate-pop-in data-[state=closed]:animate-pop-out data-[side=bottom]:[--glyph-motion-y:calc(var(--glyph-motion-distance)*-1)] data-[side=top]:[--glyph-motion-y:var(--glyph-motion-distance)] data-[side=left]:[--glyph-motion-x:var(--glyph-motion-distance)] data-[side=right]:[--glyph-motion-x:calc(var(--glyph-motion-distance)*-1)]'
 
 /** Popover surfaces: Select, Tooltip-like menus. */
-export const popover =
-  'z-50 overflow-hidden rounded-[min(var(--radius-md),var(--radius-lg))] border-(length:--glyph-border-width) border-border bg-raised text-foreground shadow-lg animate-pop-in'
+export const popover = `z-50 overflow-hidden rounded-[min(var(--radius-md),var(--radius-lg))] border-(length:--glyph-border-width) border-border bg-raised text-foreground shadow-lg ${popoverMotion}`
+
+/** Dimmed backdrop behind dialogs and sheets. */
+export const overlayMotion =
+  'data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out'
+
+/** Centered dialogs: rise and scale in on the theme's spring, settle out quickly. */
+export const dialogMotion = 'animate-dialog-in data-[state=closed]:animate-dialog-out'

package/styles.css

@@ -13,6 +13,11 @@
 @source "./src";
 
 @custom-variant dark (&:where([data-mode="dark"], [data-mode="dark"] *));
+/* Motion level from the theme or GlyphProvider's `motion` prop, set as data-motion on <html>. */
+@custom-variant motion-none (&:where([data-motion="none"], [data-motion="none"] *));
+@custom-variant motion-expressive (
+  &:where([data-motion="expressive"], [data-motion="expressive"] *)
+);
 
 @theme inline {
   --color-background: var(--glyph-background);
@@ -107,8 +112,19 @@
 
   --ease-standard: var(--glyph-ease-standard);
   --ease-emphasized: var(--glyph-ease-emphasized);
+  /* The theme's spring as a CSS linear() curve. Pair with duration-(--glyph-duration-spring). */
+  --ease-spring: var(--glyph-ease-spring);
 
-  --animate-pop-in: glyph-pop-in var(--glyph-duration-fast) var(--glyph-ease-standard);
+  /* Menus, popovers, tooltips: scale and fade from the trigger, on the theme's spring. */
+  --animate-pop-in: glyph-pop-in var(--glyph-duration-spring) var(--glyph-ease-spring) both;
+  --animate-pop-out: glyph-pop-out var(--glyph-duration-fast) var(--glyph-ease-standard) both;
+  /* Dialogs and the command menu: rise and scale in, settle out quickly. */
+  --animate-dialog-in: glyph-dialog-in var(--glyph-duration-spring) var(--glyph-ease-spring) both;
+  --animate-dialog-out: glyph-dialog-out var(--glyph-duration-fast) var(--glyph-ease-standard) both;
+  /* Route changes (PageTransition) and newly inserted content. */
+  --animate-page-in: glyph-page-in var(--glyph-duration-slow) var(--glyph-ease-standard) both;
+  /* Strokes drawn on, e.g. the Checkbox tick. Set --glyph-draw-length to the path length. */
+  --animate-draw: glyph-draw var(--glyph-duration-base) var(--glyph-ease-standard) both;
   --animate-fade-in: glyph-fade-in var(--glyph-duration-base) var(--glyph-ease-standard);
   --animate-slide-in-left: glyph-slide-in-left var(--glyph-duration-slow) var(--glyph-ease-standard);
   --animate-slide-in-top: glyph-slide-in-top var(--glyph-duration-slow) var(--glyph-ease-standard);
@@ -130,10 +146,72 @@
   --animate-collapse-up: glyph-collapse-up var(--glyph-duration-base) var(--glyph-ease-standard);
 }
 
+/*
+ * Motion levels. `subtle` (the default) keeps distances short; `expressive` travels further
+ * and scales more; `none` collapses every Glyph duration so things appear instantly.
+ * Popovers set --glyph-motion-x/y from their side so they grow out of the trigger.
+ */
+:root,
+[data-motion="subtle"] {
+  --glyph-motion-scale: 0.96;
+  --glyph-motion-scale-out: 0.98;
+  --glyph-motion-distance: 4px;
+  --glyph-motion-rise: 8px;
+}
+[data-motion="expressive"] {
+  --glyph-motion-scale: 0.86;
+  --glyph-motion-scale-out: 0.94;
+  --glyph-motion-distance: 10px;
+  --glyph-motion-rise: 28px;
+}
+[data-motion="none"],
+[data-motion="none"] * {
+  --glyph-duration-fast: 1ms !important;
+  --glyph-duration-base: 1ms !important;
+  --glyph-duration-slow: 1ms !important;
+  --glyph-duration-spring: 1ms !important;
+}
+
 @keyframes glyph-pop-in {
   from {
     opacity: 0;
-    transform: translateY(-2px) scale(0.98);
+    transform: translate(var(--glyph-motion-x, 0), var(--glyph-motion-y, 0))
+      scale(var(--glyph-motion-scale));
+  }
+}
+@keyframes glyph-pop-out {
+  to {
+    opacity: 0;
+    transform: translate(var(--glyph-motion-x, 0), var(--glyph-motion-y, 0))
+      scale(var(--glyph-motion-scale-out));
+  }
+}
+@keyframes glyph-dialog-in {
+  from {
+    opacity: 0;
+    transform: translateY(var(--glyph-motion-rise)) scale(var(--glyph-motion-scale));
+  }
+}
+@keyframes glyph-dialog-out {
+  to {
+    opacity: 0;
+    transform: scale(var(--glyph-motion-scale-out));
+  }
+}
+@keyframes glyph-page-in {
+  from {
+    opacity: 0;
+    transform: translateY(var(--glyph-motion-distance));
+  }
+}
+@keyframes glyph-draw {
+  from {
+    stroke-dasharray: var(--glyph-draw-length, 1);
+    stroke-dashoffset: var(--glyph-draw-length, 1);
+  }
+  to {
+    stroke-dasharray: var(--glyph-draw-length, 1);
+    stroke-dashoffset: 0;
   }
 }
 @keyframes glyph-fade-in {
@@ -215,6 +293,46 @@
   }
 }
 
+/*
+ * Reveal and Stagger. The hidden state is set by JavaScript just before the element comes
+ * into view, so content without JavaScript, or with motion off, is never hidden. Revealing
+ * plays an animation with backwards fill only: once it ends, the element's own styles
+ * (hover transforms, transitions) apply untouched.
+ */
+@layer components {
+  :root,
+  [data-motion="subtle"] {
+    --glyph-stagger-step: 55ms;
+  }
+  [data-motion="expressive"] {
+    --glyph-stagger-step: 90ms;
+  }
+  [data-reveal="hidden"],
+  [data-stagger="hidden"] [data-stagger-item] {
+    opacity: 0;
+  }
+  [data-reveal="shown"],
+  [data-stagger="shown"] [data-stagger-item] {
+    animation: glyph-reveal var(--glyph-duration-spring) var(--glyph-ease-spring) backwards;
+    animation-delay: var(--glyph-reveal-delay, 0ms);
+  }
+  [data-stagger="shown"] [data-stagger-item] {
+    animation-delay: calc(
+      var(--glyph-stagger-delay, 0ms) +
+      var(--glyph-stagger-index, 0) *
+      var(--glyph-stagger-step)
+    );
+  }
+}
+
+@keyframes glyph-reveal {
+  from {
+    opacity: 0;
+    transform: translateY(var(--glyph-reveal-y, var(--glyph-motion-rise)))
+      scale(var(--glyph-reveal-scale, 1));
+  }
+}
+
 @layer base {
   *,
   ::before,
@@ -254,8 +372,9 @@
     background-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
   }
 
+  /* Loading spinners keep turning: they are essential feedback, not decoration. */
   @media (prefers-reduced-motion: reduce) {
-    *,
+    *:not([data-slot="spinner"], [data-slot="spinner"] *),
     ::before,
     ::after {
       animation-duration: 0.01ms !important;

package/dist/field-context-7I-cWvvS.js

@@ -1,267 +0,0 @@
-"use client";
-import { a as themedBorder, o as transition, r as focusRing, s as useComponentConfig, t as tv } from "./tv-DLbT66dC.js";
-import { Slot } from "radix-ui";
-import { Fragment, createContext, useContext } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/internal/icons.tsx
-function Icon({ children, ...props }) {
-	return /* @__PURE__ */ jsx("svg", {
-		xmlns: "http://www.w3.org/2000/svg",
-		width: "16",
-		height: "16",
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: "2",
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		"aria-hidden": "true",
-		...props,
-		children
-	});
-}
-const CheckIcon = (p) => /* @__PURE__ */ jsx(Icon, {
-	...p,
-	children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
-});
-const MinusIcon = (p) => /* @__PURE__ */ jsx(Icon, {
-	...p,
-	children: /* @__PURE__ */ jsx("path", { d: "M5 12h14" })
-});
-const ChevronDownIcon = (p) => /* @__PURE__ */ jsx(Icon, {
-	...p,
-	children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
-});
-const ChevronLeftIcon = (p) => /* @__PURE__ */ jsx(Icon, {
-	...p,
-	children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" })
-});
-const ChevronRightIcon = (p) => /* @__PURE__ */ jsx(Icon, {
-	...p,
-	children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
-});
-const ArrowUpIcon = (p) => /* @__PURE__ */ jsx(Icon, {
-	...p,
-	children: /* @__PURE__ */ jsx("path", { d: "m5 12 7-7 7 7M12 19V5" })
-});
-const ArrowDownIcon = (p) => /* @__PURE__ */ jsx(Icon, {
-	...p,
-	children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M19 12l-7 7-7-7" })
-});
-const ChevronsUpDownIcon = (p) => /* @__PURE__ */ jsx(Icon, {
-	...p,
-	children: /* @__PURE__ */ jsx("path", { d: "m7 15 5 5 5-5M7 9l5-5 5 5" })
-});
-const XIcon = (p) => /* @__PURE__ */ jsx(Icon, {
-	...p,
-	children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
-});
-const MenuIcon = (p) => /* @__PURE__ */ jsx(Icon, {
-	...p,
-	children: /* @__PURE__ */ jsx("path", { d: "M4 6h16M4 12h16M4 18h16" })
-});
-const PanelLeftIcon = (p) => /* @__PURE__ */ jsxs(Icon, {
-	...p,
-	children: [/* @__PURE__ */ jsx("rect", {
-		width: "18",
-		height: "18",
-		x: "3",
-		y: "3",
-		rx: "2"
-	}), /* @__PURE__ */ jsx("path", { d: "M9 3v18" })]
-});
-const SearchIcon = (p) => /* @__PURE__ */ jsxs(Icon, {
-	...p,
-	children: [/* @__PURE__ */ jsx("circle", {
-		cx: "11",
-		cy: "11",
-		r: "7"
-	}), /* @__PURE__ */ jsx("path", { d: "m20 20-3.5-3.5" })]
-});
-const InboxIcon = (p) => /* @__PURE__ */ jsxs(Icon, {
-	...p,
-	children: [/* @__PURE__ */ jsx("path", { d: "M22 12h-6l-2 3h-4l-2-3H2" }), /* @__PURE__ */ jsx("path", { d: "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" })]
-});
-const AlertIcon = (p) => /* @__PURE__ */ jsxs(Icon, {
-	...p,
-	children: [/* @__PURE__ */ jsx("circle", {
-		cx: "12",
-		cy: "12",
-		r: "10"
-	}), /* @__PURE__ */ jsx("path", { d: "M12 8v4M12 16h.01" })]
-});
-//#endregion
-//#region src/components/spinner/spinner.styles.ts
-const spinnerStyles = tv({
-	slots: {
-		base: "inline-block shrink-0 animate-spin",
-		track: "opacity-20",
-		arc: ""
-	},
-	variants: { size: {
-		sm: { base: "size-3.5" },
-		md: { base: "size-4" },
-		lg: { base: "size-6" }
-	} },
-	defaultVariants: { size: "md" }
-});
-//#endregion
-//#region src/components/spinner/spinner.tsx
-function Spinner(inProps) {
-	const [props, slots] = useComponentConfig("Spinner", inProps);
-	const { size, label, className, ...rest } = props;
-	const s = spinnerStyles({ size });
-	return /* @__PURE__ */ jsxs("svg", {
-		"data-slot": "spinner",
-		viewBox: "0 0 24 24",
-		fill: "none",
-		role: label ? "status" : void 0,
-		"aria-label": label,
-		"aria-hidden": label ? void 0 : true,
-		className: s.base({ class: [slots.base, className] }),
-		...rest,
-		children: [/* @__PURE__ */ jsx("circle", {
-			className: s.track({ class: slots.track }),
-			cx: "12",
-			cy: "12",
-			r: "9",
-			stroke: "currentColor",
-			strokeWidth: "3"
-		}), /* @__PURE__ */ jsx("path", {
-			className: s.arc({ class: slots.arc }),
-			d: "M21 12a9 9 0 0 0-9-9",
-			stroke: "currentColor",
-			strokeWidth: "3",
-			strokeLinecap: "round"
-		})]
-	});
-}
-//#endregion
-//#region src/components/button/button.styles.ts
-const buttonStyles = tv({
-	slots: {
-		base: [
-			"relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap",
-			"rounded-md border-transparent font-medium",
-			themedBorder,
-			transition,
-			focusRing,
-			"disabled:pointer-events-none disabled:opacity-50 aria-busy:cursor-progress"
-		],
-		icon: "inline-flex size-4 shrink-0 items-center justify-center [&>svg]:size-full"
-	},
-	variants: {
-		variant: {
-			primary: { base: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/88" },
-			secondary: { base: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/88" },
-			outline: { base: "border-border bg-surface text-foreground shadow-xs hover:border-border-strong hover:bg-muted" },
-			ghost: { base: "text-muted-foreground hover:bg-muted hover:text-foreground" },
-			danger: { base: "bg-danger text-danger-foreground shadow-sm hover:bg-danger/88" },
-			link: { base: "h-auto px-0 text-primary-text underline-offset-4 shadow-none hover:underline" }
-		},
-		size: {
-			sm: {
-				base: "h-(--glyph-control-sm) px-3 text-small",
-				icon: "size-3.5"
-			},
-			md: { base: "h-(--glyph-control-md) px-4 text-small" },
-			lg: {
-				base: "h-(--glyph-control-lg) px-5 text-body",
-				icon: "size-[1.125rem]"
-			}
-		},
-		iconOnly: { true: { base: "px-0" } },
-		fullWidth: { true: { base: "w-full" } }
-	},
-	compoundVariants: [
-		{
-			iconOnly: true,
-			size: "sm",
-			class: { base: "w-(--glyph-control-sm)" }
-		},
-		{
-			iconOnly: true,
-			size: "md",
-			class: { base: "w-(--glyph-control-md)" }
-		},
-		{
-			iconOnly: true,
-			size: "lg",
-			class: { base: "w-(--glyph-control-lg)" }
-		}
-	],
-	defaultVariants: {
-		variant: "primary",
-		size: "md"
-	}
-});
-//#endregion
-//#region src/components/button/button.tsx
-function Button(inProps) {
-	const [props, slots] = useComponentConfig("Button", inProps);
-	const { variant, size, iconOnly, fullWidth, asChild = false, loading = false, leftIcon, rightIcon, disabled, type, className, children, ...rest } = props;
-	const s = buttonStyles({
-		variant,
-		size,
-		iconOnly,
-		fullWidth
-	});
-	const Comp = asChild ? Slot.Root : "button";
-	const icon = (node) => node ? /* @__PURE__ */ jsx("span", {
-		"data-slot": "button-icon",
-		className: s.icon({ class: slots.icon }),
-		"aria-hidden": "true",
-		children: node
-	}) : null;
-	return /* @__PURE__ */ jsx(Comp, {
-		"data-slot": "button",
-		"data-variant": variant ?? "primary",
-		className: s.base({ class: [slots.base, className] }),
-		"aria-busy": loading || void 0,
-		...!asChild && {
-			type: type ?? "button",
-			disabled: disabled || loading
-		},
-		...rest,
-		children: iconOnly && asChild ? children : iconOnly ? icon(loading ? /* @__PURE__ */ jsx(Spinner, { size: size === "lg" ? "md" : "sm" }) : children) : [
-			/* @__PURE__ */ jsx(Fragment, { children: icon(loading ? /* @__PURE__ */ jsx(Spinner, { size: "sm" }) : leftIcon) }, "start"),
-			/* @__PURE__ */ jsx(Slot.Slottable, { children }, "content"),
-			/* @__PURE__ */ jsx(Fragment, { children: icon(rightIcon) }, "end")
-		]
-	});
-}
-/** A square button holding one icon. Shares Button's variants and theme overrides. */
-function IconButton({ icon, variant = "ghost", ...props }) {
-	return /* @__PURE__ */ jsx(Button, {
-		variant,
-		...props,
-		iconOnly: true,
-		children: icon
-	});
-}
-//#endregion
-//#region src/components/field/field-context.ts
-const FieldContext = createContext(null);
-/**
-* Connects a form control to the surrounding `Field`: id for the label, `aria-describedby`
-* for description and error, `aria-invalid`, `required`, `disabled`. Props passed directly win.
-*/
-function useFieldControl(props) {
-	const field = useContext(FieldContext);
-	if (!field) return props;
-	const describedBy = [
-		field.descriptionId,
-		field.errorId,
-		props["aria-describedby"]
-	].filter(Boolean).join(" ");
-	return {
-		...props,
-		id: props.id ?? field.id,
-		disabled: props.disabled ?? (field.disabled || void 0),
-		required: props.required ?? (field.required || void 0),
-		"aria-describedby": describedBy || void 0,
-		"aria-invalid": props["aria-invalid"] ?? (field.invalid || void 0)
-	};
-}
-//#endregion
-export { MenuIcon as _, buttonStyles as a, SearchIcon as b, AlertIcon as c, CheckIcon as d, ChevronDownIcon as f, InboxIcon as g, ChevronsUpDownIcon as h, IconButton as i, ArrowDownIcon as l, ChevronRightIcon as m, useFieldControl as n, Spinner as o, ChevronLeftIcon as p, Button as r, spinnerStyles as s, FieldContext as t, ArrowUpIcon as u, MinusIcon as v, XIcon as x, PanelLeftIcon as y };