@glyphui/ui 0.4.0 → 0.5.0

package/dist/components/progress/progress.js

@@ -0,0 +1,108 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { progressCircleStyles, progressStyles } from "./progress.styles.js";
+import { Progress } from "radix-ui";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/progress/progress.tsx
+function clampPercent(value, max) {
+	if (max <= 0) return 0;
+	return Math.min(100, Math.max(0, value / max * 100));
+}
+const defaultFormat = (value, max) => `${Math.round(clampPercent(value, max))}%`;
+/** A horizontal bar showing how far a task has progressed. */
+function Progress$1(inProps) {
+	const [props, slots] = useComponentConfig("Progress", inProps);
+	const { value = null, max = 100, label, showValue = false, formatValue = defaultFormat, size, tone, className, "aria-label": ariaLabel, ...rest } = props;
+	const labelId = useId();
+	const s = progressStyles({
+		size,
+		tone
+	});
+	const determinate = typeof value === "number";
+	const percent = determinate ? clampPercent(value, max) : 0;
+	const valueText = determinate ? formatValue(value, max) : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "progress",
+		className: s.root({ class: [slots.root, className] }),
+		...rest,
+		children: [(label || showValue && valueText) && /* @__PURE__ */ jsxs("div", {
+			"data-slot": "progress-header",
+			className: s.header({ class: slots.header }),
+			children: [label && /* @__PURE__ */ jsx("span", {
+				id: labelId,
+				className: s.label({ class: slots.label }),
+				children: label
+			}), showValue && valueText && /* @__PURE__ */ jsx("span", {
+				className: s.value({ class: slots.value }),
+				"aria-hidden": "true",
+				children: valueText
+			})]
+		}), /* @__PURE__ */ jsx(Progress.Root, {
+			"data-slot": "progress-track",
+			value: determinate ? Math.min(Math.max(value, 0), max) : null,
+			max,
+			getValueLabel: (v, m) => formatValue(v, m),
+			"aria-labelledby": label ? labelId : void 0,
+			"aria-label": label ? void 0 : ariaLabel,
+			className: s.track({ class: slots.track }),
+			children: /* @__PURE__ */ jsx(Progress.Indicator, {
+				"data-slot": "progress-indicator",
+				className: s.indicator({ class: slots.indicator }),
+				style: determinate ? { transform: `translateX(-${100 - percent}%)` } : void 0
+			})
+		})]
+	});
+}
+const RADIUS = 16;
+const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+/** A compact ring for progress or a share of a total. */
+function ProgressCircle(inProps) {
+	const [props, slots] = useComponentConfig("ProgressCircle", inProps);
+	const { value, max = 100, showValue = false, formatValue = defaultFormat, size, tone, className, ...rest } = props;
+	const s = progressCircleStyles({
+		size,
+		tone
+	});
+	const percent = clampPercent(value, max);
+	const valueText = formatValue(value, max);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "progress-circle",
+		role: "progressbar",
+		"aria-valuemin": 0,
+		"aria-valuemax": max,
+		"aria-valuenow": Math.min(Math.max(value, 0), max),
+		"aria-valuetext": valueText,
+		className: s.root({ class: [slots.root, className] }),
+		...rest,
+		children: [/* @__PURE__ */ jsxs("svg", {
+			viewBox: "0 0 40 40",
+			className: s.svg({ class: slots.svg }),
+			"aria-hidden": "true",
+			children: [/* @__PURE__ */ jsx("circle", {
+				cx: "20",
+				cy: "20",
+				r: RADIUS,
+				fill: "none",
+				strokeWidth: "4",
+				className: s.track({ class: slots.track })
+			}), /* @__PURE__ */ jsx("circle", {
+				cx: "20",
+				cy: "20",
+				r: RADIUS,
+				fill: "none",
+				strokeWidth: "4",
+				strokeLinecap: "round",
+				strokeDasharray: CIRCUMFERENCE,
+				strokeDashoffset: CIRCUMFERENCE * (1 - percent / 100),
+				className: s.indicator({ class: slots.indicator })
+			})]
+		}), showValue && /* @__PURE__ */ jsx("span", {
+			className: s.value({ class: slots.value }),
+			"aria-hidden": "true",
+			children: valueText
+		})]
+	});
+}
+//#endregion
+export { Progress$1 as Progress, ProgressCircle };

package/dist/components/progress/progress.styles.d.ts

@@ -0,0 +1,236 @@
+import { VariantProps } from "../../utils/tv.js";
+import { StylesEntry } from "../../utils/registry.js";
+//#region src/components/progress/progress.styles.d.ts
+export declare const progressStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      track: string;
+    };
+    md: {
+      track: string;
+    };
+    lg: {
+      track: string;
+    };
+  };
+  tone: {
+    primary: {
+      indicator: string;
+    };
+    neutral: {
+      indicator: string;
+    };
+    success: {
+      indicator: string;
+    };
+    warning: {
+      indicator: string;
+    };
+    danger: {
+      indicator: string;
+    };
+  };
+}, {
+  root: string;
+  header: string;
+  label: string;
+  value: string;
+  track: string;
+  indicator: string[];
+}, undefined, {
+  size: {
+    sm: {
+      track: string;
+    };
+    md: {
+      track: string;
+    };
+    lg: {
+      track: string;
+    };
+  };
+  tone: {
+    primary: {
+      indicator: string;
+    };
+    neutral: {
+      indicator: string;
+    };
+    success: {
+      indicator: string;
+    };
+    warning: {
+      indicator: string;
+    };
+    danger: {
+      indicator: string;
+    };
+  };
+}, {
+  root: string;
+  header: string;
+  label: string;
+  value: string;
+  track: string;
+  indicator: string[];
+}, import("tailwind-variants").TVReturnTypeLike<{
+  size: {
+    sm: {
+      track: string;
+    };
+    md: {
+      track: string;
+    };
+    lg: {
+      track: string;
+    };
+  };
+  tone: {
+    primary: {
+      indicator: string;
+    };
+    neutral: {
+      indicator: string;
+    };
+    success: {
+      indicator: string;
+    };
+    warning: {
+      indicator: string;
+    };
+    danger: {
+      indicator: string;
+    };
+  };
+}, {
+  root: string;
+  header: string;
+  label: string;
+  value: string;
+  track: string;
+  indicator: string[];
+}>>;
+export type ProgressVariants = VariantProps<typeof progressStyles>;
+export declare const progressCircleStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      root: string;
+      value: string;
+    };
+    md: {
+      root: string;
+      value: string;
+    };
+    lg: {
+      root: string;
+      value: string;
+    };
+  };
+  tone: {
+    primary: {
+      indicator: string;
+    };
+    neutral: {
+      indicator: string;
+    };
+    success: {
+      indicator: string;
+    };
+    warning: {
+      indicator: string;
+    };
+    danger: {
+      indicator: string;
+    };
+  };
+}, {
+  root: string;
+  svg: string;
+  track: string;
+  indicator: string;
+  value: string;
+}, undefined, {
+  size: {
+    sm: {
+      root: string;
+      value: string;
+    };
+    md: {
+      root: string;
+      value: string;
+    };
+    lg: {
+      root: string;
+      value: string;
+    };
+  };
+  tone: {
+    primary: {
+      indicator: string;
+    };
+    neutral: {
+      indicator: string;
+    };
+    success: {
+      indicator: string;
+    };
+    warning: {
+      indicator: string;
+    };
+    danger: {
+      indicator: string;
+    };
+  };
+}, {
+  root: string;
+  svg: string;
+  track: string;
+  indicator: string;
+  value: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  size: {
+    sm: {
+      root: string;
+      value: string;
+    };
+    md: {
+      root: string;
+      value: string;
+    };
+    lg: {
+      root: string;
+      value: string;
+    };
+  };
+  tone: {
+    primary: {
+      indicator: string;
+    };
+    neutral: {
+      indicator: string;
+    };
+    success: {
+      indicator: string;
+    };
+    warning: {
+      indicator: string;
+    };
+    danger: {
+      indicator: string;
+    };
+  };
+}, {
+  root: string;
+  svg: string;
+  track: string;
+  indicator: string;
+  value: string;
+}>>;
+export type ProgressCircleVariants = VariantProps<typeof progressCircleStyles>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Progress: StylesEntry<typeof progressStyles>;
+    ProgressCircle: StylesEntry<typeof progressCircleStyles>;
+  }
+}
+//#endregion

package/dist/components/progress/progress.styles.js

@@ -0,0 +1,69 @@
+"use client";
+import { tv } from "../../utils/tv.js";
+//#region src/components/progress/progress.styles.ts
+const progressStyles = /* @__PURE__ */ tv({
+	slots: {
+		root: "grid w-full gap-1.5",
+		header: "flex items-baseline justify-between gap-3 text-small",
+		label: "font-medium text-foreground",
+		value: "tabular-nums text-muted-foreground",
+		track: "relative w-full overflow-hidden rounded-pill bg-muted",
+		indicator: ["h-full w-full rounded-pill transition-transform duration-(--glyph-duration-slow) ease-standard", "data-[state=indeterminate]:w-1/3 data-[state=indeterminate]:animate-pulse"]
+	},
+	variants: {
+		size: {
+			sm: { track: "h-1" },
+			md: { track: "h-2" },
+			lg: { track: "h-3" }
+		},
+		tone: {
+			primary: { indicator: "bg-primary" },
+			neutral: { indicator: "bg-foreground" },
+			success: { indicator: "bg-success" },
+			warning: { indicator: "bg-warning" },
+			danger: { indicator: "bg-danger" }
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		tone: "primary"
+	}
+});
+const progressCircleStyles = /* @__PURE__ */ tv({
+	slots: {
+		root: "relative inline-flex shrink-0 items-center justify-center",
+		svg: "size-full -rotate-90",
+		track: "stroke-muted",
+		indicator: "stroke-current transition-[stroke-dashoffset] duration-(--glyph-duration-slow) ease-standard",
+		value: "absolute font-medium tabular-nums text-foreground"
+	},
+	variants: {
+		size: {
+			sm: {
+				root: "size-6",
+				value: "hidden"
+			},
+			md: {
+				root: "size-10",
+				value: "text-[0.625rem]"
+			},
+			lg: {
+				root: "size-16",
+				value: "text-small"
+			}
+		},
+		tone: {
+			primary: { indicator: "text-primary" },
+			neutral: { indicator: "text-foreground" },
+			success: { indicator: "text-success" },
+			warning: { indicator: "text-warning" },
+			danger: { indicator: "text-danger" }
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		tone: "primary"
+	}
+});
+//#endregion
+export { progressCircleStyles, progressStyles };

package/dist/components/prose/index.d.ts

@@ -0,0 +1,2 @@
+import { Prose, ProseProps, proseStyles } from "./prose.js";
+export { Prose, type ProseProps, proseStyles };

package/dist/components/prose/prose.d.ts

@@ -0,0 +1,90 @@
+import { VariantProps } from "../../utils/tv.js";
+import { StylesEntry } from "../../utils/registry.js";
+import { ComponentProps } from "react";
+//#region src/components/prose/prose.d.ts
+/**
+ * Element styles for long-form content. Every value comes from theme tokens, so articles
+ * pick up the theme's display font, type scale, colors and radius.
+ */
+export declare const proseStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      base: string;
+    };
+    md: {
+      base: string;
+    };
+    lg: {
+      base: string;
+    };
+  };
+  fullWidth: {
+    true: {
+      base: string;
+    };
+    false: {
+      base: string;
+    };
+  };
+}, {
+  base: string[];
+}, undefined, {
+  size: {
+    sm: {
+      base: string;
+    };
+    md: {
+      base: string;
+    };
+    lg: {
+      base: string;
+    };
+  };
+  fullWidth: {
+    true: {
+      base: string;
+    };
+    false: {
+      base: string;
+    };
+  };
+}, {
+  base: string[];
+}, import("tailwind-variants").TVReturnTypeLike<{
+  size: {
+    sm: {
+      base: string;
+    };
+    md: {
+      base: string;
+    };
+    lg: {
+      base: string;
+    };
+  };
+  fullWidth: {
+    true: {
+      base: string;
+    };
+    false: {
+      base: string;
+    };
+  };
+}, {
+  base: string[];
+}>>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Prose: StylesEntry<typeof proseStyles>;
+  }
+}
+export interface ProseProps extends ComponentProps<'div'>, VariantProps<typeof proseStyles> {
+  /** Render the child element (e.g. `<article>`) instead of a `<div>`. */
+  asChild?: boolean;
+}
+/**
+ * Styles raw HTML or MDX (headings, lists, links, quotes, code, tables, images) from theme
+ * tokens. Wrap rendered Markdown or CMS content in it.
+ */
+export declare function Prose(inProps: ProseProps): import("react").JSX.Element;
+//#endregion

package/dist/components/prose/prose.js

@@ -0,0 +1,67 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { tv } from "../../utils/tv.js";
+import { Slot } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/prose/prose.tsx
+/**
+* Element styles for long-form content. Every value comes from theme tokens, so articles
+* pick up the theme's display font, type scale, colors and radius.
+*/
+const proseStyles = /* @__PURE__ */ tv({
+	slots: { base: [
+		"text-foreground [&>:first-child]:mt-0 [&>:last-child]:mb-0",
+		"[&_h1]:mt-[1.4em] [&_h1]:mb-[0.5em] [&_h1]:font-display [&_h1]:text-h1 [&_h1]:text-balance",
+		"[&_h2]:mt-[1.6em] [&_h2]:mb-[0.5em] [&_h2]:font-display [&_h2]:text-h2 [&_h2]:text-balance",
+		"[&_h3]:mt-[1.5em] [&_h3]:mb-[0.4em] [&_h3]:font-display [&_h3]:text-h3 [&_h3]:text-balance",
+		"[&_h4]:mt-[1.4em] [&_h4]:mb-[0.4em] [&_h4]:font-display [&_h4]:text-h4",
+		"[&_p]:my-[1em] [&_p]:text-pretty",
+		"[&_strong]:font-semibold [&_strong]:text-foreground",
+		"[&_a]:font-medium [&_a]:text-primary-text [&_a]:underline [&_a]:decoration-primary/40 [&_a]:underline-offset-4 [&_a:hover]:decoration-primary",
+		"[&_ul]:my-[1em] [&_ul]:list-disc [&_ul]:pl-[1.5em] [&_ol]:my-[1em] [&_ol]:list-decimal [&_ol]:pl-[1.5em]",
+		"[&_li]:my-[0.35em] [&_li]:pl-[0.25em] [&_li::marker]:text-faint-foreground",
+		"[&_blockquote]:my-[1.5em] [&_blockquote]:border-l-2 [&_blockquote]:border-primary [&_blockquote]:pl-[1em] [&_blockquote]:font-display [&_blockquote]:text-muted-foreground",
+		"[&_:not(pre)>code]:rounded-xs [&_:not(pre)>code]:bg-muted [&_:not(pre)>code]:px-[0.3em] [&_:not(pre)>code]:py-[0.15em] [&_:not(pre)>code]:font-mono [&_:not(pre)>code]:text-[0.875em]",
+		"[&_pre]:my-[1.5em] [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:border [&_pre]:border-border [&_pre]:bg-subtle [&_pre]:p-4 [&_pre]:font-mono [&_pre]:text-small [&_pre]:leading-relaxed",
+		"[&_hr]:my-[2em] [&_hr]:border-border",
+		"[&_img]:my-[1.5em] [&_img]:max-w-full [&_img]:rounded-lg",
+		"[&_figure]:my-[1.75em] [&_figure_img]:my-0 [&_figcaption]:mt-2 [&_figcaption]:text-small [&_figcaption]:text-faint-foreground",
+		"[&_table]:my-[1.5em] [&_table]:w-full [&_table]:border-collapse [&_table]:text-small [&_table]:tabular-nums",
+		"[&_th]:border-b [&_th]:border-border-strong [&_th]:px-3 [&_th]:py-2 [&_th]:text-left [&_th]:font-medium",
+		"[&_td]:border-b [&_td]:border-border [&_td]:px-3 [&_td]:py-2 [&_td]:align-top"
+	] },
+	variants: {
+		size: {
+			sm: { base: "text-small [&_blockquote]:text-body" },
+			md: { base: "text-body [&_blockquote]:text-lead" },
+			lg: { base: "text-lead [&_blockquote]:text-h4" }
+		},
+		fullWidth: {
+			true: { base: "max-w-none" },
+			false: { base: "max-w-prose" }
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		fullWidth: false
+	}
+});
+/**
+* Styles raw HTML or MDX (headings, lists, links, quotes, code, tables, images) from theme
+* tokens. Wrap rendered Markdown or CMS content in it.
+*/
+function Prose(inProps) {
+	const [props, slots] = useComponentConfig("Prose", inProps);
+	const { size, fullWidth, asChild, className, ...rest } = props;
+	const Comp = asChild ? Slot.Root : "div";
+	return /* @__PURE__ */ jsx(Comp, {
+		"data-slot": "prose",
+		className: proseStyles({
+			size,
+			fullWidth
+		}).base({ class: [slots.base, className] }),
+		...rest
+	});
+}
+//#endregion
+export { Prose, proseStyles };

package/dist/components/radio-group/index.d.ts

@@ -0,0 +1,3 @@
+import { RadioGroupVariants, radioGroupStyles } from "./radio-group.styles.js";
+import { RadioGroup, RadioGroupItem, RadioGroupItemProps, RadioGroupProps } from "./radio-group.js";
+export { RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, type RadioGroupVariants, radioGroupStyles };

package/dist/components/radio-group/radio-group.d.ts

@@ -0,0 +1,26 @@
+import { RadioGroupVariants } from "./radio-group.styles.js";
+import { RadioGroup } from "radix-ui";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/radio-group/radio-group.d.ts
+type RootProps = Omit<ComponentProps<typeof RadioGroup.Root>, 'value' | 'defaultValue' | 'onValueChange' | 'orientation'>;
+export interface RadioGroupProps<T extends string> extends RootProps, RadioGroupVariants {
+  value?: T;
+  defaultValue?: T;
+  /** Receives your value type, not `string`. */
+  onValueChange?: (value: T) => void;
+}
+/**
+ * Pick exactly one option from a short visible list. `variant="card"` turns each option
+ * into a bordered card with a title and description.
+ */
+declare function RadioGroup$1<T extends string>(inProps: RadioGroupProps<T>): import("react").JSX.Element;
+export interface RadioGroupItemProps extends Omit<ComponentProps<typeof RadioGroup.Item>, 'children'> {
+  /** Visible label. For card items this is the card title. */
+  label?: ReactNode;
+  description?: ReactNode;
+  /** Extra content inside a card item, below the description. */
+  children?: ReactNode;
+}
+export declare function RadioGroupItem({ label, description, children, className, id, ...props }: RadioGroupItemProps): import("react").JSX.Element;
+//#endregion
+export { RadioGroup$1 as RadioGroup };