@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/rich-popover/rich-popover.js

@@ -0,0 +1,157 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Popover, PopoverArrow, PopoverContent, PopoverTrigger } from "../popover/popover.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useId } from "react";
+//#region src/components/rich-popover/rich-popover.tsx
+const STYLES = `
+@keyframes dowel-rich-popover-in {
+  from { opacity: 0; scale: 0.95; filter: blur(8px); translate: 0 var(--rich-popover-rise, 5px); }
+  to { opacity: 1; scale: 1; filter: blur(0); translate: 0 0; }
+}
+@keyframes dowel-rich-popover-out {
+  to { opacity: 0; scale: 0.95; filter: blur(8px); translate: 0 var(--rich-popover-rise, 5px); }
+}
+[data-slot="rich-popover-content"][data-side="bottom"] { --rich-popover-rise: -5px; }
+[data-slot="rich-popover-content"][data-side="left"],
+[data-slot="rich-popover-content"][data-side="right"] { --rich-popover-rise: 0px; }
+[data-slot="rich-popover-content"][data-state="open"] {
+  animation: dowel-rich-popover-in calc(220ms * var(--motion-scale)) var(--ease-out-quint) both;
+}
+[data-slot="rich-popover-content"][data-state="closed"] {
+  animation: dowel-rich-popover-out calc(130ms * var(--motion-scale)) var(--ease-in-quint) both;
+}
+`;
+const richPopoverVariants = cva("w-auto max-w-xs origin-[var(--radix-popover-content-transform-origin)] rounded-2xl px-4 py-3 shadow-xl", {
+	variants: { tone: {
+		default: "border border-border bg-popover text-popover-foreground",
+		/** The source's black card. */
+		inverted: "border border-foreground bg-foreground text-background"
+	} },
+	defaultVariants: { tone: "default" }
+});
+const iconClass = "size-3.5 shrink-0";
+function ExternalIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		"aria-hidden": "true",
+		className: cn(iconClass, "opacity-70"),
+		children: /* @__PURE__ */ jsx("path", { d: "M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" })
+	});
+}
+function PlayIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "currentColor",
+		"aria-hidden": "true",
+		className: iconClass,
+		children: /* @__PURE__ */ jsx("path", { d: "M7 4v16l13-8z" })
+	});
+}
+function ClockIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		"aria-hidden": "true",
+		className: iconClass,
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "9"
+		}), /* @__PURE__ */ jsx("path", { d: "M12 7v5l3 2" })]
+	});
+}
+/** A popover card for an inline reference: heading, description, meta and an action. */
+function RichPopover({ className, trigger, heading, headingHref, icon, description, meta, actionLabel, actionHref, onActionClick, actionIcon = /* @__PURE__ */ jsx(PlayIcon, {}), open, defaultOpen, onOpenChange, tone, side = "top", ...props }) {
+	const headingId = useId();
+	const inverted = tone === "inverted";
+	const link = cn("inline-flex items-center gap-1 rounded-sm hover:underline", focusRing);
+	const action = cn("inline-flex items-center gap-2 rounded-full px-3 py-2 text-xs font-medium transition-colors duration-[var(--duration-fast)]", inverted ? "bg-background text-foreground hover:bg-background/90" : "bg-primary text-primary-foreground hover:bg-primary-hover", focusRing);
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		defaultOpen,
+		onOpenChange,
+		children: [
+			/* @__PURE__ */ jsx("style", {
+				href: "dowel-rich-popover",
+				precedence: "dowel",
+				children: STYLES
+			}),
+			/* @__PURE__ */ jsx(PopoverTrigger, {
+				asChild: true,
+				children: trigger
+			}),
+			/* @__PURE__ */ jsxs(PopoverContent, {
+				side,
+				"aria-labelledby": headingId,
+				...props,
+				"data-slot": "rich-popover-content",
+				className: cn(richPopoverVariants({ tone }), className),
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						id: headingId,
+						className: "flex items-center gap-2 text-sm font-medium",
+						children: [icon ? /* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: "flex shrink-0 [&_svg]:size-4",
+							children: icon
+						}) : null, headingHref ? /* @__PURE__ */ jsxs("a", {
+							href: headingHref,
+							target: "_blank",
+							rel: "noopener noreferrer",
+							className: link,
+							children: [/* @__PURE__ */ jsx("span", { children: heading }), /* @__PURE__ */ jsx(ExternalIcon, {})]
+						}) : /* @__PURE__ */ jsx("span", { children: heading })]
+					}),
+					description ? /* @__PURE__ */ jsx("p", {
+						className: "mt-3 text-base leading-relaxed text-balance opacity-90",
+						children: description
+					}) : null,
+					meta || actionLabel ? /* @__PURE__ */ jsxs("div", {
+						className: "mt-4 flex items-center justify-between gap-3",
+						children: [meta ? /* @__PURE__ */ jsxs("span", {
+							"data-slot": "rich-popover-meta",
+							className: cn("inline-flex items-center gap-1 rounded-full px-3 py-1 text-xs", inverted ? "bg-background/10" : "bg-muted text-muted-foreground"),
+							children: [
+								/* @__PURE__ */ jsx(ClockIcon, {}),
+								" ",
+								meta
+							]
+						}) : /* @__PURE__ */ jsx("span", {}), actionLabel ? actionHref ? /* @__PURE__ */ jsxs("a", {
+							href: actionHref,
+							target: "_blank",
+							rel: "noopener noreferrer",
+							className: action,
+							children: [
+								actionIcon,
+								" ",
+								actionLabel
+							]
+						}) : /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							className: action,
+							onClick: onActionClick,
+							children: [
+								actionIcon,
+								" ",
+								actionLabel
+							]
+						}) : null]
+					}) : null,
+					/* @__PURE__ */ jsx(PopoverArrow, { className: cn(inverted && "fill-foreground stroke-foreground") })
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { RichPopover, richPopoverVariants };
+
+//# sourceMappingURL=rich-popover.js.map

package/dist/components/rich-popover/rich-popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rich-popover.js","names":[],"sources":["../../../src/components/rich-popover/rich-popover.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Rich Popover (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { useId, type ReactElement, type ReactNode } from \"react\";\n\nimport {\n  Popover,\n  PopoverArrow,\n  PopoverContent,\n  PopoverTrigger,\n  type PopoverContentProps,\n} from \"@/components/popover\";\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A popover card for a reference in running text — a video, an article, a\n * release — with a heading (optionally a link), a description, a meta chip and\n * one call to action. The source's spring (blur, scale, rise) is a hoisted\n * keyframe; placement, focus and dismissal are Dowel's Popover.\n */\n\nconst STYLES = `\n@keyframes dowel-rich-popover-in {\n  from { opacity: 0; scale: 0.95; filter: blur(8px); translate: 0 var(--rich-popover-rise, 5px); }\n  to { opacity: 1; scale: 1; filter: blur(0); translate: 0 0; }\n}\n@keyframes dowel-rich-popover-out {\n  to { opacity: 0; scale: 0.95; filter: blur(8px); translate: 0 var(--rich-popover-rise, 5px); }\n}\n[data-slot=\"rich-popover-content\"][data-side=\"bottom\"] { --rich-popover-rise: -5px; }\n[data-slot=\"rich-popover-content\"][data-side=\"left\"],\n[data-slot=\"rich-popover-content\"][data-side=\"right\"] { --rich-popover-rise: 0px; }\n[data-slot=\"rich-popover-content\"][data-state=\"open\"] {\n  animation: dowel-rich-popover-in calc(220ms * var(--motion-scale)) var(--ease-out-quint) both;\n}\n[data-slot=\"rich-popover-content\"][data-state=\"closed\"] {\n  animation: dowel-rich-popover-out calc(130ms * var(--motion-scale)) var(--ease-in-quint) both;\n}\n`;\n\nconst richPopoverVariants = cva(\n  \"w-auto max-w-xs origin-[var(--radix-popover-content-transform-origin)] rounded-2xl px-4 py-3 shadow-xl\",\n  {\n    variants: {\n      tone: {\n        default: \"border border-border bg-popover text-popover-foreground\",\n        /** The source's black card. */\n        inverted: \"border border-foreground bg-foreground text-background\",\n      },\n    },\n    defaultVariants: {\n      tone: \"default\",\n    },\n  },\n);\n\nconst iconClass = \"size-3.5 shrink-0\";\n\nfunction ExternalIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      aria-hidden=\"true\"\n      className={cn(iconClass, \"opacity-70\")}\n    >\n      <path d=\"M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\" />\n    </svg>\n  );\n}\n\nfunction PlayIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\" className={iconClass}>\n      <path d=\"M7 4v16l13-8z\" />\n    </svg>\n  );\n}\n\nfunction ClockIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      aria-hidden=\"true\"\n      className={iconClass}\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"9\" />\n      <path d=\"M12 7v5l3 2\" />\n    </svg>\n  );\n}\n\nexport interface RichPopoverProps\n  extends Omit<PopoverContentProps, \"children\">, VariantProps<typeof richPopoverVariants> {\n  /** The element that opens it. Must accept a ref — a button, or an inline span with a role. */\n  trigger: ReactElement;\n  /** The card's heading, which also names it. */\n  heading: ReactNode;\n  /** Makes the heading a link, opened in a new tab. */\n  headingHref?: string;\n  /** A leading mark beside the heading (a logo, a type icon). Decorative. */\n  icon?: ReactNode;\n  description?: ReactNode;\n  /** A small chip — a duration, a date. */\n  meta?: ReactNode;\n  /** The call to action's label. Without it there is no action. */\n  actionLabel?: ReactNode;\n  /** Makes the action a link, opened in a new tab. */\n  actionHref?: string;\n  onActionClick?: () => void;\n  /** The action's icon. A play glyph by default. */\n  actionIcon?: ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\n/** A popover card for an inline reference: heading, description, meta and an action. */\nexport function RichPopover({\n  className,\n  trigger,\n  heading,\n  headingHref,\n  icon,\n  description,\n  meta,\n  actionLabel,\n  actionHref,\n  onActionClick,\n  actionIcon = <PlayIcon />,\n  open,\n  defaultOpen,\n  onOpenChange,\n  tone,\n  side = \"top\",\n  ...props\n}: RichPopoverProps) {\n  const headingId = useId();\n  const inverted = tone === \"inverted\";\n  const link = cn(\"inline-flex items-center gap-1 rounded-sm hover:underline\", focusRing);\n  const action = cn(\n    \"inline-flex items-center gap-2 rounded-full px-3 py-2 text-xs font-medium transition-colors duration-[var(--duration-fast)]\",\n    inverted\n      ? \"bg-background text-foreground hover:bg-background/90\"\n      : \"bg-primary text-primary-foreground hover:bg-primary-hover\",\n    focusRing,\n  );\n\n  return (\n    <Popover open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n      <style href=\"dowel-rich-popover\" precedence=\"dowel\">\n        {STYLES}\n      </style>\n      <PopoverTrigger asChild>{trigger}</PopoverTrigger>\n      <PopoverContent\n        side={side}\n        aria-labelledby={headingId}\n        {...props}\n        data-slot=\"rich-popover-content\"\n        className={cn(richPopoverVariants({ tone }), className)}\n      >\n        <div id={headingId} className=\"flex items-center gap-2 text-sm font-medium\">\n          {icon ? (\n            <span aria-hidden=\"true\" className=\"flex shrink-0 [&_svg]:size-4\">\n              {icon}\n            </span>\n          ) : null}\n          {headingHref ? (\n            <a href={headingHref} target=\"_blank\" rel=\"noopener noreferrer\" className={link}>\n              <span>{heading}</span>\n              <ExternalIcon />\n            </a>\n          ) : (\n            <span>{heading}</span>\n          )}\n        </div>\n        {description ? (\n          <p className=\"mt-3 text-base leading-relaxed text-balance opacity-90\">\n            {description}\n          </p>\n        ) : null}\n        {meta || actionLabel ? (\n          <div className=\"mt-4 flex items-center justify-between gap-3\">\n            {meta ? (\n              <span\n                data-slot=\"rich-popover-meta\"\n                className={cn(\n                  \"inline-flex items-center gap-1 rounded-full px-3 py-1 text-xs\",\n                  inverted ? \"bg-background/10\" : \"bg-muted text-muted-foreground\",\n                )}\n              >\n                <ClockIcon /> {meta}\n              </span>\n            ) : (\n              <span />\n            )}\n            {actionLabel ? (\n              actionHref ? (\n                <a\n                  href={actionHref}\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                  className={action}\n                >\n                  {actionIcon} {actionLabel}\n                </a>\n              ) : (\n                <button type=\"button\" className={action} onClick={onActionClick}>\n                  {actionIcon} {actionLabel}\n                </button>\n              )\n            ) : null}\n          </div>\n        ) : null}\n        <PopoverArrow className={cn(inverted && \"fill-foreground stroke-foreground\")} />\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport { richPopoverVariants };\n"],"mappings":"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"}

package/dist/components/ring-loader/index.d.ts

@@ -0,0 +1,2 @@
+import { RingLoader, RingLoaderProps, RingLoaderVariant, ringLoaderVariantNames, ringLoaderVariants } from "./ring-loader.js";
+export { RingLoader, type RingLoaderProps, type RingLoaderVariant, ringLoaderVariantNames, ringLoaderVariants };

package/dist/components/ring-loader/index.js

@@ -0,0 +1,2 @@
+import { RingLoader, ringLoaderVariantNames, ringLoaderVariants } from "./ring-loader.js";
+export { RingLoader, ringLoaderVariantNames, ringLoaderVariants };

package/dist/components/ring-loader/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/ring-loader/meta.ts
+const meta = defineMeta({
+	name: "ring-loader",
+	title: "Ring Loader",
+	description: "Indeterminate loading indicators made of rings and spinners — classic, sweep, radar, gears and 26 more motions.",
+	category: "feedback",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: [],
+	files: ["ring-loader.tsx"],
+	a11y: "Renders aria-hidden by default so it does not announce inside controls that already expose a busy state. Pass `label` to announce it standalone via role=\"status\". Under reduced motion it slows rather than stopping, because a frozen loader reads as a hang."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/ring-loader/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/ring-loader/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"ring-loader\",\n  title: \"Ring Loader\",\n  description:\n    \"Indeterminate loading indicators made of rings and spinners — classic, sweep, radar, gears and 26 more motions.\",\n  category: \"feedback\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [],\n  files: [\"ring-loader.tsx\"],\n  a11y:\n    \"Renders aria-hidden by default so it does not announce inside controls that already \" +\n    'expose a busy state. Pass `label` to announce it standalone via role=\"status\". ' +\n    \"Under reduced motion it slows rather than stopping, because a frozen loader reads as a hang.\",\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;AAGJ,CAAC"}

package/dist/components/ring-loader/ring-loader.d.ts

@@ -0,0 +1,31 @@
+import { VariantProps } from "class-variance-authority";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/ring-loader/ring-loader.d.ts
+type Variant = {
+  /** Layout of the root, inline so it outranks the unlayered hoisted stylesheet. */
+  root: CSSProperties;
+  render: () => ReactNode;
+};
+declare const VARIANTS: Record<"line" | "gradient" | "square" | "expand" | "cross" | "breathe" | "orbit" | "sweep" | "offset" | "morph" | "classic" | "concentric" | "smooth" | "intersect" | "dot-ring" | "twin" | "comet" | "swirl" | "radar" | "orbit-pair" | "clock" | "gears" | "dual-arc" | "fade-arc" | "dash" | "tracer" | "petals" | "watch" | "spiral" | "haptic", Variant>;
+type RingLoaderVariant = keyof typeof VARIANTS;
+/** Every variant, in catalogue order. Stories and tests iterate this. */
+declare const ringLoaderVariantNames: RingLoaderVariant[];
+declare const ringLoaderVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface RingLoaderProps extends Omit<ComponentPropsWithRef<"span">, "children">, VariantProps<typeof ringLoaderVariants> {
+  /** Which animation to play. */
+  variant?: RingLoaderVariant;
+  /**
+   * Announced to assistive technology while the loader is visible.
+   *
+   * Omit it when the loader sits inside something that already reports its
+   * busy state — announcing twice is worse than not announcing at all.
+   */
+  label?: string;
+}
+/** An indeterminate loading indicator made of rings and spinners, in 30 motions. */
+declare function RingLoader({ className, size, variant, label, style, ...props }: RingLoaderProps): import("react").JSX.Element;
+//#endregion
+export { RingLoader, RingLoaderProps, RingLoaderVariant, ringLoaderVariantNames, ringLoaderVariants };
+//# sourceMappingURL=ring-loader.d.ts.map

package/dist/components/ring-loader/ring-loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ring-loader.d.ts","names":[],"sources":["../../../src/components/ring-loader/ring-loader.tsx"],"mappings":";;;KA4DK;;EAEH,MAAM;EACN,cAAc;;cA+GV,UAAQ,qVAAA;KAoiBF,iCAAiC;;cAGhC,wBAAkD;cAEzD,qBAAkB;;6CAYtB;UAEe,wBAEb,KAAK,4CACL,oBAAoB;;EAEtB,UAAU;;;;;;;EAOV;;;iBAIc,aACd,WACA,MACA,SACA,OACA,UACG,SACF,kCAAe,IAAA"}