@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/morph-surface/morph-surface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"morph-surface.js","names":[],"sources":["../../../src/components/morph-surface/morph-surface.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Morph Surface (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type FocusEvent,\n  type FormEvent,\n  type KeyboardEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A dock that grows into a panel in place — the control you pressed *becomes*\n * the form, rather than opening one somewhere else. The source animated\n * width, height and radius with a stiff, near-critically-damped spring; with\n * no gesture velocity to carry, that is a CSS transition on measured sizes.\n *\n * Behaviourally it is a non-modal popover: opening moves focus into the\n * panel, Escape collapses it and returns focus to the trigger, and clicking\n * or tabbing away collapses it without stealing focus back.\n */\n\ntype Size = number | string;\n\ninterface MorphSurfaceContextValue {\n  open: boolean;\n  close: (options?: { success?: boolean }) => void;\n  panelLabel: string;\n  icon: ReactNode;\n}\n\nconst MorphSurfaceContext = createContext<MorphSurfaceContextValue | null>(null);\n\n/** The surrounding surface, for custom panel content (a close button, say). */\nexport function useMorphSurface(): MorphSurfaceContextValue {\n  const context = useContext(MorphSurfaceContext);\n  if (!context) throw new Error(\"useMorphSurface must be used inside <MorphSurface>.\");\n  return context;\n}\n\nconst FOCUSABLE =\n  'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nexport interface MorphSurfaceProps extends ComponentPropsWithRef<\"div\"> {\n  /** The trigger's text in the dock, e.g. \"Ask AI\" or \"Feedback\". */\n  label: ReactNode;\n  /** The panel's accessible name, also shown by `MorphSurfaceForm`. Defaults to `label`. */\n  panelLabel?: string;\n  /** Decoration beside the label (an orb, a logo). Hidden from assistive technology. */\n  icon?: ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** The expanded panel's width. Numbers are pixels. */\n  panelWidth?: Size;\n  /** The expanded panel's height. Numbers are pixels. */\n  panelHeight?: Size;\n  /** Shown in the dock, and announced, after the panel closes successfully. */\n  successLabel?: string;\n  /** How long the success label stays, in milliseconds. */\n  successDuration?: number;\n}\n\n/** A dock that morphs into a panel — a feedback form, a quick prompt. */\nexport function MorphSurface({\n  ref,\n  className,\n  style,\n  children,\n  label,\n  panelLabel,\n  icon,\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  panelWidth = \"22.5rem\",\n  panelHeight = \"12.5rem\",\n  successLabel = \"Sent\",\n  successDuration = 1500,\n  ...props\n}: MorphSurfaceProps) {\n  const [uncontrolled, setUncontrolled] = useState(defaultOpen);\n  const open = openProp ?? uncontrolled;\n  const [success, setSuccess] = useState(false);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const dockRef = useRef<HTMLDivElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const restoreFocus = useRef(false);\n  const successTimer = useRef<ReturnType<typeof setTimeout>>(undefined);\n  const [dock, setDock] = useState<{ width: number; height: number } | null>(null);\n  const panelId = useId();\n  const name = panelLabel ?? (typeof label === \"string\" ? label : \"Panel\");\n\n  const setRootRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      rootRef.current = node;\n      if (typeof ref === \"function\") ref(node);\n      else if (ref) ref.current = node;\n    },\n    [ref],\n  );\n\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (openProp === undefined) setUncontrolled(next);\n      onOpenChange?.(next);\n    },\n    [openProp, onOpenChange],\n  );\n\n  const close = useCallback(\n    (options: { success?: boolean; restore?: boolean } = {}) => {\n      restoreFocus.current = options.restore ?? true;\n      setOpen(false);\n      if (options.success) {\n        clearTimeout(successTimer.current);\n        setSuccess(true);\n        successTimer.current = setTimeout(() => setSuccess(false), successDuration);\n      }\n    },\n    [setOpen, successDuration],\n  );\n\n  useEffect(() => () => clearTimeout(successTimer.current), []);\n\n  // Measure the dock so the collapse has a concrete size to transition to.\n  useLayoutEffect(() => {\n    const element = dockRef.current;\n    if (!element) return;\n    const measure = () => {\n      const width = element.offsetWidth;\n      const height = element.offsetHeight;\n      if (width && height)\n        setDock((d) => (d?.width === width && d.height === height ? d : { width, height }));\n    };\n    measure();\n    const observer = new ResizeObserver(measure);\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, []);\n\n  // Focus follows the surface: into the panel on open, back to the trigger on close.\n  useEffect(() => {\n    if (open) {\n      const panel = panelRef.current;\n      const target =\n        panel?.querySelector<HTMLElement>(\"[data-autofocus]\") ??\n        panel?.querySelector<HTMLElement>(FOCUSABLE) ??\n        panel;\n      target?.focus();\n    } else if (restoreFocus.current) {\n      restoreFocus.current = false;\n      triggerRef.current?.focus();\n    }\n  }, [open]);\n\n  // A press anywhere outside collapses it, leaving focus where the user put it.\n  useEffect(() => {\n    if (!open) return;\n    const onPointerDown = (event: PointerEvent) => {\n      if (!rootRef.current?.contains(event.target as Node)) close({ restore: false });\n    };\n    document.addEventListener(\"pointerdown\", onPointerDown);\n    return () => document.removeEventListener(\"pointerdown\", onPointerDown);\n  }, [open, close]);\n\n  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n    if (event.key !== \"Escape\") return;\n    event.preventDefault();\n    close();\n  }\n\n  function handleBlur(event: FocusEvent<HTMLDivElement>) {\n    const next = event.relatedTarget;\n    if (next && !rootRef.current?.contains(next)) close({ restore: false });\n  }\n\n  const state = open ? \"open\" : \"closed\";\n\n  return (\n    <div\n      ref={setRootRef}\n      data-slot=\"morph-surface\"\n      data-state={state}\n      className={cn(\n        \"relative flex flex-col items-start justify-end overflow-hidden bg-popover text-popover-foreground shadow-lg ring-1 ring-border\",\n        \"max-w-full transition-[width,height,border-radius] duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]\",\n        \"rounded-[1.25rem] data-[state=closed]:delay-[var(--duration-instant)] data-[state=open]:rounded-[0.875rem]\",\n        className,\n      )}\n      style={{\n        width: open ? panelWidth : dock?.width,\n        height: open ? panelHeight : dock?.height,\n        ...style,\n      }}\n      {...props}\n    >\n      <div\n        ref={dockRef}\n        data-slot=\"morph-surface-dock\"\n        data-state={state}\n        inert={open}\n        className={cn(\n          \"flex h-11 w-max shrink-0 items-center gap-2 px-3 whitespace-nowrap select-none\",\n          \"transition-[opacity,visibility] duration-[var(--duration-fast)]\",\n          \"data-[state=open]:invisible data-[state=open]:opacity-0\",\n        )}\n      >\n        {icon ? (\n          <span aria-hidden=\"true\" className=\"flex size-6 items-center justify-center\">\n            {icon}\n          </span>\n        ) : null}\n        <button\n          ref={triggerRef}\n          type=\"button\"\n          data-slot=\"morph-surface-trigger\"\n          aria-expanded={open}\n          aria-controls={panelId}\n          onClick={() => setOpen(true)}\n          className={cn(\n            \"rounded-full px-2 py-0.5 text-sm font-medium transition-colors duration-[var(--duration-fast)] hover:bg-accent\",\n            focusRing,\n          )}\n        >\n          {success ? successLabel : label}\n        </button>\n      </div>\n      {/* Escape and focus-out bubble up from the controls inside; the dialog itself is not a control. */}\n      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}\n      <div\n        ref={panelRef}\n        id={panelId}\n        role=\"dialog\"\n        aria-label={name}\n        tabIndex={-1}\n        data-slot=\"morph-surface-panel\"\n        data-state={state}\n        inert={!open}\n        onKeyDown={handleKeyDown}\n        onBlur={handleBlur}\n        className={cn(\n          \"absolute start-0 bottom-0 flex flex-col p-1 outline-none\",\n          \"transition-[opacity,visibility] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\",\n          \"data-[state=closed]:invisible data-[state=closed]:opacity-0 data-[state=closed]:duration-[var(--duration-instant)]\",\n        )}\n        style={{ width: panelWidth, height: panelHeight, maxWidth: \"100%\" }}\n      >\n        <MorphSurfaceContext.Provider value={{ open, close, panelLabel: name, icon }}>\n          {children}\n        </MorphSurfaceContext.Provider>\n      </div>\n      <span role=\"status\" className=\"sr-only\">\n        {success ? successLabel : \"\"}\n      </span>\n    </div>\n  );\n}\n\nfunction Kbd({ children }: { children: string }) {\n  return (\n    <kbd className=\"flex h-6 min-w-6 items-center justify-center rounded-sm border border-border bg-muted px-1.5 font-sans text-xs text-foreground\">\n      {children}\n    </kbd>\n  );\n}\n\nexport interface MorphSurfaceFormProps extends Omit<ComponentPropsWithRef<\"form\">, \"onSubmit\"> {\n  /**\n   * Called with the trimmed message. Return `false` to keep the panel open\n   * (a failed request, say); otherwise it closes and shows the success label.\n   */\n  onSubmit?: (value: string, event: FormEvent<HTMLFormElement>) => boolean | void;\n  placeholder?: string;\n  /** The submit button's accessible name. The visible text is the shortcut. */\n  submitLabel?: string;\n  /** The textarea's form field name. */\n  fieldName?: string;\n}\n\n/** The source's panel: a labelled message box, submitted with ⌘/Ctrl + Enter. */\nexport function MorphSurfaceForm({\n  className,\n  onSubmit,\n  placeholder = \"Ask me anything…\",\n  submitLabel = \"Send\",\n  fieldName = \"message\",\n  ...props\n}: MorphSurfaceFormProps) {\n  const { close, panelLabel, icon } = useMorphSurface();\n  const fieldId = useId();\n\n  function handleSubmit(event: FormEvent<HTMLFormElement>) {\n    event.preventDefault();\n    const form = event.currentTarget;\n    const field = form.elements.namedItem(fieldName) as HTMLTextAreaElement;\n    const value = field.value.trim();\n    if (!value) return;\n    if (onSubmit?.(value, event) === false) return;\n    field.value = \"\";\n    close({ success: true });\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLTextAreaElement>) {\n    if (event.key === \"Enter\" && (event.metaKey || event.ctrlKey)) {\n      event.preventDefault();\n      event.currentTarget.form?.requestSubmit();\n    }\n  }\n\n  return (\n    <form\n      data-slot=\"morph-surface-form\"\n      className={cn(\"flex h-full flex-col\", className)}\n      onSubmit={handleSubmit}\n      {...props}\n    >\n      <div className=\"flex items-center justify-between gap-2 py-1 ps-2 pe-1\">\n        <label htmlFor={fieldId} className=\"flex items-center gap-1.5 text-sm font-medium\">\n          {icon ? (\n            <span aria-hidden=\"true\" className=\"flex size-6 items-center justify-center\">\n              {icon}\n            </span>\n          ) : null}\n          {panelLabel}\n        </label>\n        <button\n          type=\"submit\"\n          data-slot=\"morph-surface-submit\"\n          className={cn(\"flex items-center gap-1 rounded-md p-0.5\", focusRing)}\n        >\n          <span className=\"sr-only\">{submitLabel}</span>\n          <span aria-hidden=\"true\" className=\"flex gap-1\">\n            <Kbd>⌘</Kbd>\n            <Kbd>Enter</Kbd>\n          </span>\n        </button>\n      </div>\n      <textarea\n        id={fieldId}\n        name={fieldName}\n        required\n        data-autofocus\n        spellCheck={false}\n        placeholder={placeholder}\n        aria-keyshortcuts=\"Meta+Enter Control+Enter\"\n        onKeyDown={handleKeyDown}\n        className={cn(\n          \"w-full flex-1 resize-none rounded-md bg-muted p-3 text-sm text-foreground placeholder:text-muted-foreground\",\n          focusRing,\n        )}\n      />\n    </form>\n  );\n}\n"],"mappings":"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"}

package/dist/components/notification-badge/index.d.ts

@@ -0,0 +1,2 @@
+import { NotificationBadge, NotificationBadgeProps, NotificationBadgeStatus, notificationBadgeVariants } from "./notification-badge.js";
+export { NotificationBadge, type NotificationBadgeProps, type NotificationBadgeStatus, notificationBadgeVariants };

package/dist/components/notification-badge/index.js

@@ -0,0 +1,2 @@
+import { NotificationBadge, notificationBadgeVariants } from "./notification-badge.js";
+export { NotificationBadge, notificationBadgeVariants };

package/dist/components/notification-badge/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/notification-badge/meta.ts
+const meta = defineMeta({
+	name: "notification-badge",
+	title: "Notification Badge",
+	description: "A dot, rolling count or presence badge pinned to the corner of an icon, button or avatar.",
+	category: "feedback",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: ["badge", "number-flow"],
+	files: ["notification-badge.tsx"],
+	a11y: "Colour never carries the meaning alone: every badge has screen-reader text (\"3 notifications\", \"More than 99 notifications\", \"New\", \"Online\"…), overridable with `label`, while the visible digits are aria-hidden. A hidden count badge (zero, without showZero) is aria-hidden and empty. Changes are only announced when `live` is set. The text follows the wrapped element in reading order, so a wrapped icon button should still have its own name. The ping ring is not rendered under reduced motion, and the pop-in snaps."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/notification-badge/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/notification-badge/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"notification-badge\",\n  title: \"Notification Badge\",\n  description:\n    \"A dot, rolling count or presence badge pinned to the corner of an icon, button or avatar.\",\n  category: \"feedback\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [\"badge\", \"number-flow\"],\n  files: [\"notification-badge.tsx\"],\n  a11y:\n    'Colour never carries the meaning alone: every badge has screen-reader text (\"3 notifications\", \"More than ' +\n    '99 notifications\", \"New\", \"Online\"…), overridable with `label`, while the visible digits are aria-hidden. ' +\n    \"A hidden count badge (zero, without showZero) is aria-hidden and empty. Changes are only announced when \" +\n    \"`live` is set. The text follows the wrapped element in reading order, so a wrapped icon button should still \" +\n    \"have its own name. The ping ring is not rendered under reduced motion, and the pop-in snaps.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC,SAAS,aAAa;CAC7C,OAAO,CAAC,wBAAwB;CAChC,MACE;AAKJ,CAAC"}

package/dist/components/notification-badge/notification-badge.d.ts

@@ -0,0 +1,40 @@
+import { BadgeProps } from "../badge/badge.js";
+import "../badge/index.js";
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/notification-badge/notification-badge.d.ts
+declare const notificationBadgeVariants: (props?: ({
+  variant?: "status" | "dot" | "count" | null | undefined;
+  position?: "inline" | "top-end" | "top-start" | "bottom-end" | "bottom-start" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type NotificationBadgeStatus = "online" | "offline" | "busy" | "away";
+interface NotificationBadgeProps extends Omit<ComponentPropsWithRef<"span">, "children">, VariantProps<typeof notificationBadgeVariants> {
+  /** The element the badge is pinned to. Without it the badge renders inline. */
+  children?: ReactNode;
+  /** The number shown by the `count` variant. */
+  count?: number;
+  /** Counts above this show as "max+". */
+  max?: number;
+  /** Show the `count` variant at zero instead of hiding it. */
+  showZero?: boolean;
+  /** Presence for the `status` variant. */
+  status?: NotificationBadgeStatus;
+  /** Badge colour for `dot` and `count`. `status` takes its colour from the status. */
+  tone?: BadgeProps["variant"];
+  /** A ring that pulses outward from the badge. Not rendered under reduced motion. */
+  ping?: boolean;
+  /**
+   * Screen-reader text for the badge. Defaults to "3 notifications", "More than
+   * 99 notifications", "New" for a dot and the status name for a status.
+   */
+  label?: string;
+  /** Announce changes politely. Off by default: most badges should not interrupt. */
+  live?: boolean;
+  /** Classes for the badge itself; `className` goes to the wrapper. */
+  badgeClassName?: string;
+}
+/** A dot, count or presence badge pinned to the corner of its child. */
+declare function NotificationBadge({ className, children, variant, count, max, showZero, status, tone, ping, position, label, live, badgeClassName, ...props }: NotificationBadgeProps): import("react").JSX.Element;
+//#endregion
+export { NotificationBadge, NotificationBadgeProps, NotificationBadgeStatus, notificationBadgeVariants };
+//# sourceMappingURL=notification-badge.d.ts.map

package/dist/components/notification-badge/notification-badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-badge.d.ts","names":[],"sources":["../../../src/components/notification-badge/notification-badge.tsx"],"mappings":";;;;;cA4BM,4BAAyB;;;6CA2B9B;KAEW;UAaK,+BAEb,KAAK,4CACL,oBAAoB;;EAEtB,WAAW;;EAEX;;EAEA;;EAEA;;EAEA,SAAS;;EAET,OAAO;;EAEP;;;;;EAKA;;EAEA;;EAEA;;;iBAgBc,oBACd,WACA,UACA,SACA,OACA,KACA,UACA,QACA,MACA,MACA,UACA,OACA,MACA,mBACG,SACF,yCAAsB,IAAA"}

package/dist/components/notification-badge/notification-badge.js

@@ -0,0 +1,107 @@
+import { cn } from "../../lib/utils.js";
+import { Badge } from "../badge/badge.js";
+import { NumberFlow } from "../number-flow/number-flow.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/notification-badge/notification-badge.tsx
+const PREFIX = "dowel-notification-badge";
+const STYLES = `@keyframes ${PREFIX}-ping{75%,100%{transform:scale(2);opacity:0}}
+[data-slot=notification-badge-ping]{animation:${PREFIX}-ping calc(1s * var(--motion-scale, 1)) cubic-bezier(0,0,.2,1) infinite}`;
+const notificationBadgeVariants = cva(cn("isolate transition-[scale,opacity] duration-[var(--duration-normal)] ease-[var(--ease-overshoot)]", "data-[state=hidden]:scale-0 data-[state=hidden]:opacity-0 starting:scale-0 starting:opacity-0"), {
+	variants: {
+		/** The shape: a bare dot, a number, or a presence indicator. */
+		variant: {
+			dot: "size-2.5 border-0 p-0",
+			count: "h-5 min-w-5 px-1 text-2xs tabular-nums",
+			status: "size-3 border-0 p-0 ring-2 ring-background"
+		},
+		/** Which corner of the wrapped element it sits on. Logical, so it mirrors in RTL. */
+		position: {
+			"top-end": "absolute -end-1 -top-1",
+			"top-start": "absolute -start-1 -top-1",
+			"bottom-end": "absolute -end-1 -bottom-1",
+			"bottom-start": "absolute -start-1 -bottom-1",
+			inline: "relative"
+		}
+	},
+	defaultVariants: {
+		variant: "dot",
+		position: "top-end"
+	}
+});
+/** Presence colours, from Badge's semantic variants. */
+const STATUS = {
+	online: {
+		tone: "success",
+		label: "Online"
+	},
+	away: {
+		tone: "warning",
+		label: "Away"
+	},
+	busy: {
+		tone: "destructive",
+		label: "Busy"
+	},
+	offline: {
+		tone: "secondary",
+		className: "bg-muted-foreground",
+		label: "Offline"
+	}
+};
+function defaultLabel(variant, count, max, status) {
+	if (variant === "status") return STATUS[status].label;
+	if (variant === "dot") return "New";
+	if (count > max) return `More than ${String(max)} notifications`;
+	return `${String(count)} ${count === 1 ? "notification" : "notifications"}`;
+}
+/** A dot, count or presence badge pinned to the corner of its child. */
+function NotificationBadge({ className, children, variant = "dot", count = 0, max = 99, showZero = false, status = "online", tone = "default", ping = false, position, label, live = false, badgeClassName, ...props }) {
+	const visible = variant !== "count" || count > 0 || showZero;
+	const presence = variant === "status" ? STATUS[status] : void 0;
+	const text = label ?? defaultLabel(variant ?? "dot", count, max, status);
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "notification-badge",
+		className: cn("relative inline-flex shrink-0", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsxs(Badge, {
+			"data-slot": "notification-badge-indicator",
+			"data-variant": variant,
+			"data-state": visible ? "visible" : "hidden",
+			"data-status": presence ? status : void 0,
+			"aria-hidden": visible ? void 0 : true,
+			"aria-live": live ? "polite" : void 0,
+			"aria-atomic": live ? true : void 0,
+			variant: presence?.tone ?? tone,
+			size: "sm",
+			className: cn(notificationBadgeVariants({
+				variant,
+				position: position ?? (children == null ? "inline" : "top-end")
+			}), presence?.className, badgeClassName),
+			children: [
+				ping && visible ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", {
+					href: PREFIX,
+					precedence: "dowel",
+					children: STYLES
+				}), /* @__PURE__ */ jsx("span", {
+					"data-slot": "notification-badge-ping",
+					"aria-hidden": "true",
+					className: "absolute inset-0 -z-10 rounded-full bg-inherit opacity-75 motion-reduce:hidden"
+				})] }) : null,
+				variant === "count" ? /* @__PURE__ */ jsxs("span", {
+					"aria-hidden": "true",
+					className: "inline-flex items-baseline leading-none",
+					children: [/* @__PURE__ */ jsx(NumberFlow, { value: Math.min(count, max) }), count > max ? "+" : null]
+				}) : null,
+				/* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: visible ? text : null
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { NotificationBadge, notificationBadgeVariants };
+
+//# sourceMappingURL=notification-badge.js.map

package/dist/components/notification-badge/notification-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-badge.js","names":[],"sources":["../../../src/components/notification-badge/notification-badge.tsx"],"sourcesContent":["// Ported from SmoothUI Notification Badge (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type { ComponentPropsWithRef, ReactNode } from \"react\";\n\nimport { Badge, type BadgeProps } from \"@/components/badge\";\nimport { NumberFlow } from \"@/components/number-flow\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A Badge pinned to the corner of whatever it wraps. The styling is Badge's —\n * this only adds placement, the dot/count/status shapes, and motion:\n *\n * - The count rolls digit by digit through NumberFlow, in the direction the\n *   number moved, where the source slid the whole value with a spring.\n * - Appearing and disappearing are CSS transitions: the badge stays mounted\n *   with data-state=\"hidden\" (so it can shrink away) and pops in from\n *   `starting:` styles, instead of AnimatePresence.\n * - The ping ring is a hoisted keyframe on the motion scale, and is not\n *   rendered at all under reduced motion.\n *\n * All of it is decoration; none of it is an indicator.\n */\n\nconst PREFIX = \"dowel-notification-badge\";\n\nconst STYLES = `@keyframes ${PREFIX}-ping{75%,100%{transform:scale(2);opacity:0}}\n[data-slot=notification-badge-ping]{animation:${PREFIX}-ping calc(1s * var(--motion-scale, 1)) cubic-bezier(0,0,.2,1) infinite}`;\n\nconst notificationBadgeVariants = cva(\n  cn(\n    \"isolate transition-[scale,opacity] duration-[var(--duration-normal)] ease-[var(--ease-overshoot)]\",\n    \"data-[state=hidden]:scale-0 data-[state=hidden]:opacity-0 starting:scale-0 starting:opacity-0\",\n  ),\n  {\n    variants: {\n      /** The shape: a bare dot, a number, or a presence indicator. */\n      variant: {\n        dot: \"size-2.5 border-0 p-0\",\n        count: \"h-5 min-w-5 px-1 text-2xs tabular-nums\",\n        status: \"size-3 border-0 p-0 ring-2 ring-background\",\n      },\n      /** Which corner of the wrapped element it sits on. Logical, so it mirrors in RTL. */\n      position: {\n        \"top-end\": \"absolute -end-1 -top-1\",\n        \"top-start\": \"absolute -start-1 -top-1\",\n        \"bottom-end\": \"absolute -end-1 -bottom-1\",\n        \"bottom-start\": \"absolute -start-1 -bottom-1\",\n        inline: \"relative\",\n      },\n    },\n    defaultVariants: {\n      variant: \"dot\",\n      position: \"top-end\",\n    },\n  },\n);\n\nexport type NotificationBadgeStatus = \"online\" | \"offline\" | \"busy\" | \"away\";\n\n/** Presence colours, from Badge's semantic variants. */\nconst STATUS: Record<\n  NotificationBadgeStatus,\n  { tone: NonNullable<BadgeProps[\"variant\"]>; className?: string; label: string }\n> = {\n  online: { tone: \"success\", label: \"Online\" },\n  away: { tone: \"warning\", label: \"Away\" },\n  busy: { tone: \"destructive\", label: \"Busy\" },\n  offline: { tone: \"secondary\", className: \"bg-muted-foreground\", label: \"Offline\" },\n};\n\nexport interface NotificationBadgeProps\n  extends\n    Omit<ComponentPropsWithRef<\"span\">, \"children\">,\n    VariantProps<typeof notificationBadgeVariants> {\n  /** The element the badge is pinned to. Without it the badge renders inline. */\n  children?: ReactNode;\n  /** The number shown by the `count` variant. */\n  count?: number;\n  /** Counts above this show as \"max+\". */\n  max?: number;\n  /** Show the `count` variant at zero instead of hiding it. */\n  showZero?: boolean;\n  /** Presence for the `status` variant. */\n  status?: NotificationBadgeStatus;\n  /** Badge colour for `dot` and `count`. `status` takes its colour from the status. */\n  tone?: BadgeProps[\"variant\"];\n  /** A ring that pulses outward from the badge. Not rendered under reduced motion. */\n  ping?: boolean;\n  /**\n   * Screen-reader text for the badge. Defaults to \"3 notifications\", \"More than\n   * 99 notifications\", \"New\" for a dot and the status name for a status.\n   */\n  label?: string;\n  /** Announce changes politely. Off by default: most badges should not interrupt. */\n  live?: boolean;\n  /** Classes for the badge itself; `className` goes to the wrapper. */\n  badgeClassName?: string;\n}\n\nfunction defaultLabel(\n  variant: NonNullable<NotificationBadgeProps[\"variant\"]>,\n  count: number,\n  max: number,\n  status: NotificationBadgeStatus,\n): string {\n  if (variant === \"status\") return STATUS[status].label;\n  if (variant === \"dot\") return \"New\";\n  if (count > max) return `More than ${String(max)} notifications`;\n  return `${String(count)} ${count === 1 ? \"notification\" : \"notifications\"}`;\n}\n\n/** A dot, count or presence badge pinned to the corner of its child. */\nexport function NotificationBadge({\n  className,\n  children,\n  variant = \"dot\",\n  count = 0,\n  max = 99,\n  showZero = false,\n  status = \"online\",\n  tone = \"default\",\n  ping = false,\n  position,\n  label,\n  live = false,\n  badgeClassName,\n  ...props\n}: NotificationBadgeProps) {\n  const visible = variant !== \"count\" || count > 0 || showZero;\n  const presence = variant === \"status\" ? STATUS[status] : undefined;\n  const text = label ?? defaultLabel(variant ?? \"dot\", count, max, status);\n\n  return (\n    <span\n      data-slot=\"notification-badge\"\n      className={cn(\"relative inline-flex shrink-0\", className)}\n      {...props}\n    >\n      {children}\n      <Badge\n        data-slot=\"notification-badge-indicator\"\n        data-variant={variant}\n        data-state={visible ? \"visible\" : \"hidden\"}\n        data-status={presence ? status : undefined}\n        aria-hidden={visible ? undefined : true}\n        aria-live={live ? \"polite\" : undefined}\n        aria-atomic={live ? true : undefined}\n        variant={presence?.tone ?? tone}\n        size=\"sm\"\n        className={cn(\n          notificationBadgeVariants({\n            variant,\n            position: position ?? (children == null ? \"inline\" : \"top-end\"),\n          }),\n          presence?.className,\n          badgeClassName,\n        )}\n      >\n        {ping && visible ? (\n          <>\n            <style href={PREFIX} precedence=\"dowel\">\n              {STYLES}\n            </style>\n            <span\n              data-slot=\"notification-badge-ping\"\n              aria-hidden=\"true\"\n              className=\"absolute inset-0 -z-10 rounded-full bg-inherit opacity-75 motion-reduce:hidden\"\n            />\n          </>\n        ) : null}\n        {variant === \"count\" ? (\n          <span aria-hidden=\"true\" className=\"inline-flex items-baseline leading-none\">\n            <NumberFlow value={Math.min(count, max)} />\n            {count > max ? \"+\" : null}\n          </span>\n        ) : null}\n        <span className=\"sr-only\">{visible ? text : null}</span>\n      </Badge>\n    </span>\n  );\n}\n\nexport { notificationBadgeVariants };\n"],"mappings":";;;;;;AAuBA,MAAM,SAAS;AAEf,MAAM,SAAS,cAAc,OAAO;gDACY,OAAO;AAEvD,MAAM,4BAA4B,IAChC,GACE,qGACA,+FACF,GACA;CACE,UAAU;;EAER,SAAS;GACP,KAAK;GACL,OAAO;GACP,QAAQ;EACV;;EAEA,UAAU;GACR,WAAW;GACX,aAAa;GACb,cAAc;GACd,gBAAgB;GAChB,QAAQ;EACV;CACF;CACA,iBAAiB;EACf,SAAS;EACT,UAAU;CACZ;AACF,CACF;;AAKA,MAAM,SAGF;CACF,QAAQ;EAAE,MAAM;EAAW,OAAO;CAAS;CAC3C,MAAM;EAAE,MAAM;EAAW,OAAO;CAAO;CACvC,MAAM;EAAE,MAAM;EAAe,OAAO;CAAO;CAC3C,SAAS;EAAE,MAAM;EAAa,WAAW;EAAuB,OAAO;CAAU;AACnF;AA+BA,SAAS,aACP,SACA,OACA,KACA,QACQ;CACR,IAAI,YAAY,UAAU,OAAO,OAAO,OAAO,CAAC;CAChD,IAAI,YAAY,OAAO,OAAO;CAC9B,IAAI,QAAQ,KAAK,OAAO,aAAa,OAAO,GAAG,EAAE;CACjD,OAAO,GAAG,OAAO,KAAK,EAAE,GAAG,UAAU,IAAI,iBAAiB;AAC5D;;AAGA,SAAgB,kBAAkB,EAChC,WACA,UACA,UAAU,OACV,QAAQ,GACR,MAAM,IACN,WAAW,OACX,SAAS,UACT,OAAO,WACP,OAAO,OACP,UACA,OACA,OAAO,OACP,gBACA,GAAG,SACsB;CACzB,MAAM,UAAU,YAAY,WAAW,QAAQ,KAAK;CACpD,MAAM,WAAW,YAAY,WAAW,OAAO,UAAU,KAAA;CACzD,MAAM,OAAO,SAAS,aAAa,WAAW,OAAO,OAAO,KAAK,MAAM;CAEvE,OACE,qBAAC,QAAD;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;EAHN,UAAA,CAKG,UACD,qBAAC,OAAD;GACE,aAAU;GACV,gBAAc;GACd,cAAY,UAAU,YAAY;GAClC,eAAa,WAAW,SAAS,KAAA;GACjC,eAAa,UAAU,KAAA,IAAY;GACnC,aAAW,OAAO,WAAW,KAAA;GAC7B,eAAa,OAAO,OAAO,KAAA;GAC3B,SAAS,UAAU,QAAQ;GAC3B,MAAK;GACL,WAAW,GACT,0BAA0B;IACxB;IACA,UAAU,aAAa,YAAY,OAAO,WAAW;GACvD,CAAC,GACD,UAAU,WACV,cACF;GAjBF,UAAA;IAmBG,QAAQ,UACP,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,SAAD;KAAO,MAAM;KAAQ,YAAW;KAC7B,UAAA;IACI,CAAA,GACP,oBAAC,QAAD;KACE,aAAU;KACV,eAAY;KACZ,WAAU;IACX,CAAA,CACD,EAAA,CAAA,IACA;IACH,YAAY,UACX,qBAAC,QAAD;KAAM,eAAY;KAAO,WAAU;KAAnC,UAAA,CACE,oBAAC,YAAD,EAAY,OAAO,KAAK,IAAI,OAAO,GAAG,EAAI,CAAA,GACzC,QAAQ,MAAM,MAAM,IACjB;IACJ,CAAA,IAAA;IACJ,oBAAC,QAAD;KAAM,WAAU;KAAW,UAAA,UAAU,OAAO;IAAW,CAAA;GAClD;EACH,CAAA,CAAA;;AAEV"}

package/dist/components/notify-button/index.d.ts

@@ -0,0 +1,2 @@
+import { NotifyButton, NotifyButtonProps, notifyButtonVariants } from "./notify-button.js";
+export { NotifyButton, type NotifyButtonProps, notifyButtonVariants };

package/dist/components/notify-button/index.js

@@ -0,0 +1,2 @@
+import { NotifyButton, notifyButtonVariants } from "./notify-button.js";
+export { NotifyButton, notifyButtonVariants };

package/dist/components/notify-button/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/notify-button/meta.ts
+const meta = defineMeta({
+	name: "notify-button",
+	title: "Notify Button",
+	description: "A “notify me” toggle: the bell rings and the label grows elastically into the confirmation.",
+	category: "form",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: ["button"],
+	files: ["notify-button.tsx"],
+	a11y: "A toggle button exposed with aria-pressed. Its accessible name stays the resting label — the confirmation label is aria-hidden — and the confirmation is announced once through a polite live region when it turns on. The bell is decorative; its ring and the width spring stop under reduced motion."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/notify-button/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/notify-button/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"notify-button\",\n  title: \"Notify Button\",\n  description:\n    \"A “notify me” toggle: the bell rings and the label grows elastically into the confirmation.\",\n  category: \"form\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [\"button\"],\n  files: [\"notify-button.tsx\"],\n  a11y:\n    \"A toggle button exposed with aria-pressed. Its accessible name stays the resting label — the \" +\n    \"confirmation label is aria-hidden — and the confirmation is announced once through a polite live \" +\n    \"region when it turns on. The bell is decorative; its ring and the width spring stop under reduced motion.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC,QAAQ;CAC/B,OAAO,CAAC,mBAAmB;CAC3B,MACE;AAGJ,CAAC"}

package/dist/components/notify-button/notify-button.d.ts

@@ -0,0 +1,28 @@
+import { ButtonProps } from "../button/button.js";
+import "../button/index.js";
+import { VariantProps } from "class-variance-authority";
+import { ReactNode } from "react";
+//#region src/components/notify-button/notify-button.d.ts
+declare const notifyButtonVariants: (props?: ({
+  stroke?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface NotifyButtonProps extends Omit<ButtonProps, "children" | "asChild" | "variant">, VariantProps<typeof notifyButtonVariants> {
+  /** Resting label, and the button's accessible name. */
+  label?: ReactNode;
+  /** Shown while on. */
+  activeLabel?: ReactNode;
+  /** The glyph that rings. Defaults to a bell. */
+  icon?: ReactNode;
+  /** Announced when turned on. Defaults to `activeLabel` when it is text. */
+  announcement?: string;
+  /** Controlled state. */
+  pressed?: boolean;
+  /** Initial state when uncontrolled. */
+  defaultPressed?: boolean;
+  onPressedChange?: (pressed: boolean) => void;
+}
+/** A "notify me" toggle whose bell rings and whose label grows into the confirmation. */
+declare function NotifyButton({ className, stroke, label, activeLabel, icon, announcement, pressed: pressedProp, defaultPressed, onPressedChange, onClick, size, ...props }: NotifyButtonProps): import("react").JSX.Element;
+//#endregion
+export { NotifyButton, NotifyButtonProps, notifyButtonVariants };
+//# sourceMappingURL=notify-button.d.ts.map

package/dist/components/notify-button/notify-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notify-button.d.ts","names":[],"sources":["../../../src/components/notify-button/notify-button.tsx"],"mappings":";;;;;cAgCM,uBAAoB;;6CAiBzB;UAQgB,0BAEb,KAAK,kDACL,oBAAoB;;EAEtB,QAAQ;;EAER,cAAc;;EAEd,OAAO;;EAEP;;EAEA;;EAEA;EACA,mBAAmB;;;iBAoBL,eACd,WACA,QACA,OACA,aACA,MACA,cACA,SAAS,aACT,gBACA,iBACA,SACA,SACG,SACF,oCAAiB,IAAA"}

package/dist/components/notify-button/notify-button.js

@@ -0,0 +1,114 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../button/button.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useLayoutEffect, useRef, useState } from "react";
+//#region src/components/notify-button/notify-button.tsx
+const PREFIX = "dowel-notify-button";
+const STYLES = `
+@keyframes ${PREFIX}-ring{0%{transform:rotate(0)}11%{transform:rotate(-17deg)}27%{transform:rotate(14deg)}44%{transform:rotate(-9deg)}61%{transform:rotate(6deg)}78%{transform:rotate(-3deg)}100%{transform:rotate(0)}}
+[data-slot=notify-button-bell]{transform-origin:50% 16%}
+[data-slot=notify-button-bell][data-ring]{animation:${PREFIX}-ring calc(820ms * var(--motion-scale,1)) ease-out}
+`;
+const notifyButtonVariants = cva(cn("h-11 gap-2.5 rounded-full bg-card px-5 text-[0.84375rem] font-normal text-card-foreground", "hover:bg-card data-[state=on]:bg-muted", "transition-[background-color,box-shadow,scale] duration-[var(--duration-normal)] ease-[var(--ease-overshoot)]", "motion-safe:active:scale-[0.96]"), {
+	variants: { 
+	/** A hairline ring — the source's Stroke switch. It hides when on. */
+stroke: {
+		true: "shadow-[inset_0_0_0_1px_var(--color-border)] data-[state=on]:shadow-none",
+		false: ""
+	} },
+	defaultVariants: { stroke: true }
+});
+const labelLayer = cn("col-start-1 row-start-1 w-max justify-self-start", "transition-opacity duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]", "data-[state=hidden]:opacity-0");
+function Bell() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" })
+	});
+}
+/** A "notify me" toggle whose bell rings and whose label grows into the confirmation. */
+function NotifyButton({ className, stroke, label = "Notify me", activeLabel = "You’ll be notified", icon, announcement, pressed: pressedProp, defaultPressed = false, onPressedChange, onClick, size = "md", ...props }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultPressed);
+	const pressed = pressedProp ?? uncontrolled;
+	const [rings, setRings] = useState(0);
+	const [announced, setAnnounced] = useState("");
+	const clipRef = useRef(null);
+	const restRef = useRef(null);
+	const activeRef = useRef(null);
+	useLayoutEffect(() => {
+		const width = (pressed ? activeRef.current : restRef.current)?.offsetWidth ?? 0;
+		if (clipRef.current && width > 0) clipRef.current.style.width = `${String(width)}px`;
+	}, [
+		pressed,
+		label,
+		activeLabel
+	]);
+	function handleClick(event) {
+		onClick?.(event);
+		if (event.defaultPrevented) return;
+		const next = !pressed;
+		if (pressedProp === void 0) setUncontrolled(next);
+		onPressedChange?.(next);
+		if (next) {
+			setRings((count) => count + 1);
+			setAnnounced(announcement ?? (typeof activeLabel === "string" ? activeLabel : "On"));
+		} else setAnnounced("");
+	}
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("style", {
+			href: PREFIX,
+			precedence: "dowel",
+			children: STYLES
+		}),
+		/* @__PURE__ */ jsxs(Button, {
+			"data-slot": "notify-button",
+			"data-state": pressed ? "on" : "off",
+			"aria-pressed": pressed,
+			variant: "secondary",
+			size,
+			className: cn(notifyButtonVariants({ stroke }), className),
+			onClick: handleClick,
+			...props,
+			children: [/* @__PURE__ */ jsx("span", {
+				"data-slot": "notify-button-bell",
+				"data-ring": pressed && rings > 0 ? "" : void 0,
+				"aria-hidden": "true",
+				className: "grid place-items-center",
+				children: icon ?? /* @__PURE__ */ jsx(Bell, {})
+			}, rings), /* @__PURE__ */ jsxs("span", {
+				ref: clipRef,
+				"data-slot": "notify-button-label",
+				className: cn("grid h-[1.125rem] items-center overflow-hidden", "transition-[width] duration-[var(--duration-slower)] ease-[var(--ease-overshoot)]"),
+				children: [/* @__PURE__ */ jsx("span", {
+					ref: restRef,
+					"data-state": pressed ? "hidden" : "visible",
+					className: labelLayer,
+					children: label
+				}), /* @__PURE__ */ jsx("span", {
+					ref: activeRef,
+					"aria-hidden": "true",
+					"data-state": pressed ? "visible" : "hidden",
+					className: labelLayer,
+					children: activeLabel
+				})]
+			})]
+		}),
+		/* @__PURE__ */ jsx("span", {
+			role: "status",
+			"aria-live": "polite",
+			className: "sr-only",
+			children: announced
+		})
+	] });
+}
+//#endregion
+export { NotifyButton, notifyButtonVariants };
+
+//# sourceMappingURL=notify-button.js.map

package/dist/components/notify-button/notify-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notify-button.js","names":[],"sources":["../../../src/components/notify-button/notify-button.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from bencho Notify (MIT, © 2026 Lorenzo Cabra). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { useLayoutEffect, useRef, useState, type MouseEvent, type ReactNode } from \"react\";\n\nimport { Button, type ButtonProps } from \"@/components/button\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A subscribe toggle: the bell rings, and the label cross-fades to the\n * confirmation while the pill widens elastically to fit it.\n *\n * It is a toggle button (aria-pressed), so its accessible name stays the\n * resting label — \"Notify me, pressed\" — and the confirmation is announced\n * once through a polite live region instead. The label clip's width is the\n * measured width of whichever label is showing, transitioned with an\n * overshoot; the ring is a hoisted keyframe keyed to each press, so it plays on\n * turning on and never on first paint.\n *\n * Why not Toast: the bencho block is a single button whose label changes, not\n * a stack of notifications, so there is nothing for a toast to hold.\n */\n\nconst PREFIX = \"dowel-notify-button\";\n\nconst STYLES = `\n@keyframes ${PREFIX}-ring{0%{transform:rotate(0)}11%{transform:rotate(-17deg)}27%{transform:rotate(14deg)}44%{transform:rotate(-9deg)}61%{transform:rotate(6deg)}78%{transform:rotate(-3deg)}100%{transform:rotate(0)}}\n[data-slot=notify-button-bell]{transform-origin:50% 16%}\n[data-slot=notify-button-bell][data-ring]{animation:${PREFIX}-ring calc(820ms * var(--motion-scale,1)) ease-out}\n`;\n\nconst notifyButtonVariants = cva(\n  cn(\n    \"h-11 gap-2.5 rounded-full bg-card px-5 text-[0.84375rem] font-normal text-card-foreground\",\n    \"hover:bg-card data-[state=on]:bg-muted\",\n    \"transition-[background-color,box-shadow,scale] duration-[var(--duration-normal)] ease-[var(--ease-overshoot)]\",\n    \"motion-safe:active:scale-[0.96]\",\n  ),\n  {\n    variants: {\n      /** A hairline ring — the source's Stroke switch. It hides when on. */\n      stroke: {\n        true: \"shadow-[inset_0_0_0_1px_var(--color-border)] data-[state=on]:shadow-none\",\n        false: \"\",\n      },\n    },\n    defaultVariants: { stroke: true },\n  },\n);\n\nconst labelLayer = cn(\n  \"col-start-1 row-start-1 w-max justify-self-start\",\n  \"transition-opacity duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\",\n  \"data-[state=hidden]:opacity-0\",\n);\n\nexport interface NotifyButtonProps\n  extends\n    Omit<ButtonProps, \"children\" | \"asChild\" | \"variant\">,\n    VariantProps<typeof notifyButtonVariants> {\n  /** Resting label, and the button's accessible name. */\n  label?: ReactNode;\n  /** Shown while on. */\n  activeLabel?: ReactNode;\n  /** The glyph that rings. Defaults to a bell. */\n  icon?: ReactNode;\n  /** Announced when turned on. Defaults to `activeLabel` when it is text. */\n  announcement?: string;\n  /** Controlled state. */\n  pressed?: boolean;\n  /** Initial state when uncontrolled. */\n  defaultPressed?: boolean;\n  onPressedChange?: (pressed: boolean) => void;\n}\n\nfunction Bell() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M10.3 21a1.94 1.94 0 0 0 3.4 0M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9\" />\n    </svg>\n  );\n}\n\n/** A \"notify me\" toggle whose bell rings and whose label grows into the confirmation. */\nexport function NotifyButton({\n  className,\n  stroke,\n  label = \"Notify me\",\n  activeLabel = \"You’ll be notified\",\n  icon,\n  announcement,\n  pressed: pressedProp,\n  defaultPressed = false,\n  onPressedChange,\n  onClick,\n  size = \"md\",\n  ...props\n}: NotifyButtonProps) {\n  const [uncontrolled, setUncontrolled] = useState(defaultPressed);\n  const pressed = pressedProp ?? uncontrolled;\n  const [rings, setRings] = useState(0);\n  const [announced, setAnnounced] = useState(\"\");\n  const clipRef = useRef<HTMLSpanElement | null>(null);\n  const restRef = useRef<HTMLSpanElement | null>(null);\n  const activeRef = useRef<HTMLSpanElement | null>(null);\n\n  // The clip is exactly as wide as the label on show, so the pill grows and\n  // shrinks with it. Measured after layout, written straight to the DOM.\n  useLayoutEffect(() => {\n    const showing = pressed ? activeRef.current : restRef.current;\n    const width = showing?.offsetWidth ?? 0;\n    if (clipRef.current && width > 0) clipRef.current.style.width = `${String(width)}px`;\n  }, [pressed, label, activeLabel]);\n\n  function handleClick(event: MouseEvent<HTMLButtonElement>) {\n    onClick?.(event);\n    if (event.defaultPrevented) return;\n    const next = !pressed;\n    if (pressedProp === undefined) setUncontrolled(next);\n    onPressedChange?.(next);\n    if (next) {\n      setRings((count) => count + 1);\n      setAnnounced(announcement ?? (typeof activeLabel === \"string\" ? activeLabel : \"On\"));\n    } else {\n      setAnnounced(\"\");\n    }\n  }\n\n  return (\n    <>\n      <style href={PREFIX} precedence=\"dowel\">\n        {STYLES}\n      </style>\n      <Button\n        data-slot=\"notify-button\"\n        data-state={pressed ? \"on\" : \"off\"}\n        aria-pressed={pressed}\n        variant=\"secondary\"\n        size={size}\n        className={cn(notifyButtonVariants({ stroke }), className)}\n        onClick={handleClick}\n        {...props}\n      >\n        <span\n          key={rings}\n          data-slot=\"notify-button-bell\"\n          data-ring={pressed && rings > 0 ? \"\" : undefined}\n          aria-hidden=\"true\"\n          className=\"grid place-items-center\"\n        >\n          {icon ?? <Bell />}\n        </span>\n        <span\n          ref={clipRef}\n          data-slot=\"notify-button-label\"\n          className={cn(\n            \"grid h-[1.125rem] items-center overflow-hidden\",\n            \"transition-[width] duration-[var(--duration-slower)] ease-[var(--ease-overshoot)]\",\n          )}\n        >\n          <span\n            ref={restRef}\n            data-state={pressed ? \"hidden\" : \"visible\"}\n            className={labelLayer}\n          >\n            {label}\n          </span>\n          <span\n            ref={activeRef}\n            aria-hidden=\"true\"\n            data-state={pressed ? \"visible\" : \"hidden\"}\n            className={labelLayer}\n          >\n            {activeLabel}\n          </span>\n        </span>\n      </Button>\n      <span role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n        {announced}\n      </span>\n    </>\n  );\n}\n\nexport { notifyButtonVariants };\n"],"mappings":";;;;;;;AAwBA,MAAM,SAAS;AAEf,MAAM,SAAS;aACF,OAAO;;sDAEkC,OAAO;;AAG7D,MAAM,uBAAuB,IAC3B,GACE,6FACA,0CACA,iHACA,iCACF,GACA;CACE,UAAU;;AAER,QAAQ;EACN,MAAM;EACN,OAAO;CACT,EACF;CACA,iBAAiB,EAAE,QAAQ,KAAK;AAClC,CACF;AAEA,MAAM,aAAa,GACjB,oDACA,qFACA,+BACF;AAqBA,SAAS,OAAO;CACd,OACE,oBAAC,OAAD;EACE,SAAQ;EACR,MAAK;EACL,QAAO;EACP,aAAY;EACZ,eAAc;EACd,gBAAe;EACf,eAAY;EAEZ,UAAA,oBAAC,QAAD,EAAM,GAAE,0EAA2E,CAAA;CAChF,CAAA;AAET;;AAGA,SAAgB,aAAa,EAC3B,WACA,QACA,QAAQ,aACR,cAAc,sBACd,MACA,cACA,SAAS,aACT,iBAAiB,OACjB,iBACA,SACA,OAAO,MACP,GAAG,SACiB;CACpB,MAAM,CAAC,cAAc,mBAAmB,SAAS,cAAc;CAC/D,MAAM,UAAU,eAAe;CAC/B,MAAM,CAAC,OAAO,YAAY,SAAS,CAAC;CACpC,MAAM,CAAC,WAAW,gBAAgB,SAAS,EAAE;CAC7C,MAAM,UAAU,OAA+B,IAAI;CACnD,MAAM,UAAU,OAA+B,IAAI;CACnD,MAAM,YAAY,OAA+B,IAAI;CAIrD,sBAAsB;EAEpB,MAAM,SADU,UAAU,UAAU,UAAU,QAAQ,QAAA,EAC/B,eAAe;EACtC,IAAI,QAAQ,WAAW,QAAQ,GAAG,QAAQ,QAAQ,MAAM,QAAQ,GAAG,OAAO,KAAK,EAAE;CACnF,GAAG;EAAC;EAAS;EAAO;CAAW,CAAC;CAEhC,SAAS,YAAY,OAAsC;EACzD,UAAU,KAAK;EACf,IAAI,MAAM,kBAAkB;EAC5B,MAAM,OAAO,CAAC;EACd,IAAI,gBAAgB,KAAA,GAAW,gBAAgB,IAAI;EACnD,kBAAkB,IAAI;EACtB,IAAI,MAAM;GACR,UAAU,UAAU,QAAQ,CAAC;GAC7B,aAAa,iBAAiB,OAAO,gBAAgB,WAAW,cAAc,KAAK;EACrF,OACE,aAAa,EAAE;CAEnB;CAEA,OACE,qBAAA,UAAA,EAAA,UAAA;EACE,oBAAC,SAAD;GAAO,MAAM;GAAQ,YAAW;GAC7B,UAAA;EACI,CAAA;EACP,qBAAC,QAAD;GACE,aAAU;GACV,cAAY,UAAU,OAAO;GAC7B,gBAAc;GACd,SAAQ;GACF;GACN,WAAW,GAAG,qBAAqB,EAAE,OAAO,CAAC,GAAG,SAAS;GACzD,SAAS;GACT,GAAI;GARN,UAAA,CAUE,oBAAC,QAAD;IAEE,aAAU;IACV,aAAW,WAAW,QAAQ,IAAI,KAAK,KAAA;IACvC,eAAY;IACZ,WAAU;IAET,UAAA,QAAQ,oBAAC,MAAD,CAAO,CAAA;GACZ,GAPC,KAOD,GACN,qBAAC,QAAD;IACE,KAAK;IACL,aAAU;IACV,WAAW,GACT,kDACA,mFACF;IANF,UAAA,CAQE,oBAAC,QAAD;KACE,KAAK;KACL,cAAY,UAAU,WAAW;KACjC,WAAW;KAEV,UAAA;IACG,CAAA,GACN,oBAAC,QAAD;KACE,KAAK;KACL,eAAY;KACZ,cAAY,UAAU,YAAY;KAClC,WAAW;KAEV,UAAA;IACG,CAAA,CACF;GACA,CAAA,CAAA;;EACR,oBAAC,QAAD;GAAM,MAAK;GAAS,aAAU;GAAS,WAAU;GAC9C,UAAA;EACG,CAAA;CACN,EAAA,CAAA;AAEN"}

package/dist/components/now-playing/index.d.ts

@@ -0,0 +1,2 @@
+import { NowPlaying, NowPlayingProps, nowPlayingVariants } from "./now-playing.js";
+export { NowPlaying, type NowPlayingProps, nowPlayingVariants };

package/dist/components/now-playing/index.js

@@ -0,0 +1,2 @@
+import { NowPlaying, nowPlayingVariants } from "./now-playing.js";
+export { NowPlaying, nowPlayingVariants };

package/dist/components/now-playing/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/now-playing/meta.ts
+const meta = defineMeta({
+	name: "now-playing",
+	title: "Now Playing",
+	description: "A compact music mini-player that expands in place, with a morphing play button, a like and a seek slider.",
+	category: "display",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: [],
+	files: ["now-playing.tsx"],
+	a11y: "The track itself is the expand control: a button named by track and artist with aria-expanded. Restart, Play/Pause (its name follows the state), Next and a Like toggle (aria-pressed) are real buttons. Progress is a role=\"slider\" with \"0:52 of 3:34\" value text: arrows seek 5 seconds (mirrored in right-to-left layouts), PageUp/PageDown 30, Home/End the ends, and Space plays or pauses while it has focus. Controls that are hidden while collapsed leave the tab order. Album art is decorative unless artworkAlt is given. Motion stops under reduced motion."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/now-playing/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/now-playing/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"now-playing\",\n  title: \"Now Playing\",\n  description:\n    \"A compact music mini-player that expands in place, with a morphing play button, a like and a seek slider.\",\n  category: \"display\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [],\n  files: [\"now-playing.tsx\"],\n  a11y:\n    \"The track itself is the expand control: a button named by track and artist with aria-expanded. Restart, \" +\n    'Play/Pause (its name follows the state), Next and a Like toggle (aria-pressed) are real buttons. Progress is a role=\"slider\" ' +\n    'with \"0:52 of 3:34\" value text: arrows seek 5 seconds (mirrored in right-to-left layouts), PageUp/PageDown 30, ' +\n    \"Home/End the ends, and Space plays or pauses while it has focus. Controls that are hidden while collapsed \" +\n    \"leave the tab order. Album art is decorative unless artworkAlt is given. Motion stops under reduced motion.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC;CACvB,OAAO,CAAC,iBAAiB;CACzB,MACE;AAKJ,CAAC"}

package/dist/components/now-playing/now-playing.d.ts

@@ -0,0 +1,39 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/now-playing/now-playing.d.ts
+declare const nowPlayingVariants: (props?: ({
+  stroke?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface NowPlayingProps extends Omit<ComponentPropsWithRef<"div">, "onChange">, VariantProps<typeof nowPlayingVariants> {
+  /** The track's title. */
+  track: string;
+  /** The artist, album or side. */
+  artist?: string;
+  /** Album art: an image URL, or any node. Decorative unless `artworkAlt` is set. */
+  artwork?: string | ReactNode;
+  artworkAlt?: string;
+  /** Track length in seconds. */
+  duration?: number;
+  position?: number;
+  defaultPosition?: number;
+  onPositionChange?: (seconds: number) => void;
+  playing?: boolean;
+  defaultPlaying?: boolean;
+  onPlayingChange?: (playing: boolean) => void;
+  liked?: boolean;
+  defaultLiked?: boolean;
+  onLikedChange?: (liked: boolean) => void;
+  expanded?: boolean;
+  defaultExpanded?: boolean;
+  onExpandedChange?: (expanded: boolean) => void;
+  /** Restart: called after the position returns to 0. */
+  onPrevious?: () => void;
+  /** Next track. The position returns to 0. */
+  onNext?: () => void;
+  labels?: Partial<Record<"play" | "pause" | "previous" | "next" | "like" | "seek", string>>;
+}
+/** A mini music player that expands in place, with a seek slider and a morphing play button. */
+declare function NowPlaying({ className, stroke, track, artist, artwork, artworkAlt, duration, position: positionProp, defaultPosition, onPositionChange, playing: playingProp, defaultPlaying, onPlayingChange, liked: likedProp, defaultLiked, onLikedChange, expanded: expandedProp, defaultExpanded, onExpandedChange, onPrevious, onNext, labels, style, ...props }: NowPlayingProps): import("react").JSX.Element;
+//#endregion
+export { NowPlaying, NowPlayingProps, nowPlayingVariants };
+//# sourceMappingURL=now-playing.d.ts.map

package/dist/components/now-playing/now-playing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"now-playing.d.ts","names":[],"sources":["../../../src/components/now-playing/now-playing.tsx"],"mappings":";;;cA2CM,qBAAkB;;6CAevB;UA6EgB,wBAEb,KAAK,2CACL,oBAAoB;;EAEtB;;EAEA;;EAEA,mBAAmB;EACnB;;EAEA;EACA;EACA;EACA,oBAAoB;EACpB;EACA;EACA,mBAAmB;EACnB;EACA;EACA,iBAAiB;EACjB;EACA;EACA,oBAAoB;;EAEpB;;EAEA;EACA,SAAS,QAAQ;;;iBAIH,aACd,WACA,QACA,OACA,QACA,SACA,YACA,UACA,UAAU,cACV,iBACA,kBACA,SAAS,aACT,gBACA,iBACA,OAAO,WACP,cACA,eACA,UAAU,cACV,iBACA,kBACA,YACA,QACA,QACA,UACG,SACF,kCAAe,IAAA"}