@glyphui/ui 0.3.0 → 0.5.0

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);
@@ -39,7 +44,17 @@
   --color-danger-foreground: var(--glyph-danger-foreground);
   --color-info: var(--glyph-info);
   --color-info-foreground: var(--glyph-info-foreground);
+  --color-primary-text: var(--glyph-primary-text);
+  --color-success-text: var(--glyph-success-text);
+  --color-warning-text: var(--glyph-warning-text);
+  --color-danger-text: var(--glyph-danger-text);
+  --color-info-text: var(--glyph-info-text);
   --color-overlay: var(--glyph-overlay);
+  --color-chart-1: var(--glyph-chart-1);
+  --color-chart-2: var(--glyph-chart-2);
+  --color-chart-3: var(--glyph-chart-3);
+  --color-chart-4: var(--glyph-chart-4);
+  --color-chart-5: var(--glyph-chart-5);
 
   --radius-xs: var(--glyph-radius-xs);
   --radius-sm: var(--glyph-radius-sm);
@@ -97,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);
@@ -120,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 {
@@ -142,6 +230,108 @@
     transform: translateY(-8px);
   }
 }
+@keyframes glyph-fade-out {
+  to {
+    opacity: 0;
+  }
+}
+@keyframes glyph-sheet-in-right {
+  from {
+    transform: translateX(100%);
+  }
+}
+@keyframes glyph-sheet-out-right {
+  to {
+    transform: translateX(100%);
+  }
+}
+@keyframes glyph-sheet-in-left {
+  from {
+    transform: translateX(-100%);
+  }
+}
+@keyframes glyph-sheet-out-left {
+  to {
+    transform: translateX(-100%);
+  }
+}
+@keyframes glyph-sheet-in-top {
+  from {
+    transform: translateY(-100%);
+  }
+}
+@keyframes glyph-sheet-out-top {
+  to {
+    transform: translateY(-100%);
+  }
+}
+@keyframes glyph-sheet-in-bottom {
+  from {
+    transform: translateY(100%);
+  }
+}
+@keyframes glyph-sheet-out-bottom {
+  to {
+    transform: translateY(100%);
+  }
+}
+/* Radix sets the content height variable on Accordion and Collapsible content. */
+@keyframes glyph-collapse-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height, var(--radix-collapsible-content-height));
+  }
+}
+@keyframes glyph-collapse-up {
+  from {
+    height: var(--radix-accordion-content-height, var(--radix-collapsible-content-height));
+  }
+  to {
+    height: 0;
+  }
+}
+
+/*
+ * 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 {
   *,
@@ -182,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-anGPYXbW.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-DBAGlgXJ.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 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 };