@glyphui/ui 0.3.0 → 0.5.0

package/dist/components/tag-input/tag-input.js

@@ -0,0 +1,149 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { useFieldControl } from "../field/field-context.js";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { PresenceItem, PresenceList } from "../../motion/presence-list.js";
+import { tagInputStyles } from "./tag-input.styles.js";
+import { useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/tag-input/tag-input.tsx
+function XIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2.5",
+		strokeLinecap: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+	});
+}
+/**
+* Free-form multi-value input. Enter or a comma turns the text into a removable tag;
+* Backspace on an empty input removes the last one. Pasting a comma-separated list adds them all.
+*/
+function TagInput(inProps) {
+	const [props, slots] = useComponentConfig("TagInput", useFieldControl(inProps));
+	const { value: valueProp, defaultValue = [], onValueChange, placeholder = "Add a tag…", maxTags, validate, allowDuplicates = false, separators = [","], disabled, name, id, size, className, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid } = props;
+	const [tags, setTags] = useControllableState({
+		value: valueProp,
+		defaultValue,
+		onChange: onValueChange
+	});
+	const [draft, setDraft] = useState("");
+	const [error, setError] = useState(null);
+	const inputRef = useRef(null);
+	const errorId = useId();
+	const s = tagInputStyles({ size });
+	const full = maxTags !== void 0 && tags.length >= maxTags;
+	const invalid = Boolean(error) || ariaInvalid === true;
+	const add = (raw) => {
+		let next = [...tags];
+		let problem = null;
+		for (const candidate of raw.map((t) => t.trim()).filter(Boolean)) {
+			if (maxTags !== void 0 && next.length >= maxTags) {
+				problem = `You can add up to ${maxTags} tags.`;
+				break;
+			}
+			if (!allowDuplicates && next.includes(candidate)) {
+				problem = `“${candidate}” is already added.`;
+				continue;
+			}
+			const verdict = validate?.(candidate, next) ?? true;
+			if (verdict !== true) {
+				problem = verdict;
+				continue;
+			}
+			next = [...next, candidate];
+		}
+		if (next.length !== tags.length) setTags(next);
+		setError(problem);
+		return problem === null;
+	};
+	const commitDraft = () => {
+		if (!draft.trim()) return;
+		if (add([draft])) setDraft("");
+	};
+	const remove = (index) => {
+		setTags(tags.filter((_, i) => i !== index));
+		setError(null);
+		inputRef.current?.focus();
+	};
+	const handleKeyDown = (event) => {
+		if (event.key === "Enter" || separators.includes(event.key)) {
+			if (event.key === "Enter" && !draft.trim()) return;
+			event.preventDefault();
+			commitDraft();
+		} else if (event.key === "Backspace" && draft === "" && tags.length > 0) {
+			event.preventDefault();
+			remove(tags.length - 1);
+		}
+	};
+	const handlePaste = (event) => {
+		const text = event.clipboardData.getData("text");
+		const pattern = new RegExp(`[${["\n", ...separators].map((s) => s.replace(/[-\\^\]]/g, "\\$&")).join("")}]`);
+		if (!pattern.test(text)) return;
+		event.preventDefault();
+		add(text.split(pattern));
+	};
+	const describedBy = [ariaDescribedBy, error ? errorId : void 0].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "tag-input",
+		className: s.root({ class: [slots.root, className] }),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				"data-invalid": invalid || void 0,
+				className: s.frame({ class: slots.frame }),
+				onClick: () => inputRef.current?.focus(),
+				children: [/* @__PURE__ */ jsx(PresenceList, { children: tags.map((tag, index) => /* @__PURE__ */ jsxs(PresenceItem, {
+					as: "span",
+					"data-slot": "tag",
+					className: s.tag({ class: slots.tag }),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: s.tagLabel({ class: slots.tagLabel }),
+						children: tag
+					}), !disabled && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": `Remove ${tag}`,
+						className: s.remove({ class: slots.remove }),
+						onClick: (event) => {
+							event.stopPropagation();
+							remove(index);
+						},
+						children: /* @__PURE__ */ jsx(XIcon, {})
+					})]
+				}, `${tag}-${tags.slice(0, index).filter((t) => t === tag).length}`)) }), /* @__PURE__ */ jsx("input", {
+					ref: inputRef,
+					id,
+					value: draft,
+					disabled: disabled || full,
+					placeholder: full ? void 0 : tags.length === 0 ? placeholder : void 0,
+					"aria-label": ariaLabel,
+					"aria-describedby": describedBy,
+					"aria-invalid": invalid || void 0,
+					className: s.input({ class: slots.input }),
+					onChange: (event) => {
+						setDraft(event.target.value);
+						if (error) setError(null);
+					},
+					onKeyDown: handleKeyDown,
+					onPaste: handlePaste,
+					onBlur: commitDraft
+				})]
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				id: errorId,
+				role: "alert",
+				className: s.message({ class: slots.message }),
+				children: error
+			}),
+			name && tags.map((tag, index) => /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name,
+				value: tag
+			}, `${tag}-${index}`))
+		]
+	});
+}
+//#endregion
+export { TagInput };

package/dist/components/tag-input/tag-input.styles.d.ts

@@ -0,0 +1,71 @@
+import { VariantProps } from "../../utils/tv.js";
+import { StylesEntry } from "../../utils/registry.js";
+//#region src/components/tag-input/tag-input.styles.d.ts
+export declare const tagInputStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      frame: string;
+    };
+    md: {
+      frame: string;
+    };
+    lg: {
+      frame: string;
+    };
+  };
+}, {
+  root: string;
+  frame: string[];
+  tag: string;
+  tagLabel: string;
+  remove: string;
+  input: string;
+  message: string;
+}, undefined, {
+  size: {
+    sm: {
+      frame: string;
+    };
+    md: {
+      frame: string;
+    };
+    lg: {
+      frame: string;
+    };
+  };
+}, {
+  root: string;
+  frame: string[];
+  tag: string;
+  tagLabel: string;
+  remove: string;
+  input: string;
+  message: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  size: {
+    sm: {
+      frame: string;
+    };
+    md: {
+      frame: string;
+    };
+    lg: {
+      frame: string;
+    };
+  };
+}, {
+  root: string;
+  frame: string[];
+  tag: string;
+  tagLabel: string;
+  remove: string;
+  input: string;
+  message: string;
+}>>;
+export type TagInputVariants = VariantProps<typeof tagInputStyles>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    TagInput: StylesEntry<typeof tagInputStyles>;
+  }
+}
+//#endregion

package/dist/components/tag-input/tag-input.styles.js

@@ -0,0 +1,29 @@
+"use client";
+import { tv } from "../../utils/tv.js";
+import { fieldControl } from "../input/input.styles.js";
+//#region src/components/tag-input/tag-input.styles.ts
+const tagInputStyles = /* @__PURE__ */ tv({
+	slots: {
+		root: "grid gap-1.5",
+		frame: [
+			...fieldControl,
+			"flex cursor-text flex-wrap items-center gap-1.5 px-2 py-1",
+			"focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/20",
+			"data-invalid:focus-within:ring-danger/20",
+			"has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50"
+		],
+		tag: "inline-flex h-6 max-w-full items-center gap-1 rounded-pill bg-muted pr-1 pl-2.5 text-caption text-foreground",
+		tagLabel: "truncate",
+		remove: "inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-pill text-muted-foreground hover:bg-border-strong/40 hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring [&>svg]:size-3",
+		input: "h-7 min-w-24 flex-1 bg-transparent px-1 text-foreground outline-none placeholder:text-faint-foreground disabled:cursor-not-allowed",
+		message: "text-small font-medium text-danger-text"
+	},
+	variants: { size: {
+		sm: { frame: "min-h-(--glyph-control-sm) text-small" },
+		md: { frame: "min-h-(--glyph-control-md) text-small" },
+		lg: { frame: "min-h-(--glyph-control-lg) text-body" }
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { tagInputStyles };

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

@@ -0,0 +1,3 @@
+import { TextVariants, textStyles } from "./text.styles.js";
+import { Text, TextProps } from "./text.js";
+export { Text, type TextProps, type TextVariants, textStyles };

package/dist/components/text/text.d.ts

@@ -0,0 +1,9 @@
+import { TextVariants } from "./text.styles.js";
+import { ComponentProps } from "react";
+//#region src/components/text/text.d.ts
+export interface TextProps extends ComponentProps<'p'>, TextVariants {
+  /** Render the child element (e.g. `<span>`, `<label>`) with text styles instead of a `<p>`. */
+  asChild?: boolean;
+}
+export declare function Text(inProps: TextProps): import("react").JSX.Element;
+//#endregion

package/dist/components/text/text.js

@@ -0,0 +1,25 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { textStyles } from "./text.styles.js";
+import { Slot } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/text/text.tsx
+function Text(inProps) {
+	const [props, slots] = useComponentConfig("Text", inProps);
+	const { size, tone, weight, mono, truncate, asChild, className, ...rest } = props;
+	const s = textStyles({
+		size,
+		tone,
+		weight,
+		mono,
+		truncate
+	});
+	const Comp = asChild ? Slot.Root : "p";
+	return /* @__PURE__ */ jsx(Comp, {
+		"data-slot": "text",
+		className: s.base({ class: [slots.base, className] }),
+		...rest
+	});
+}
+//#endregion
+export { Text };

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

@@ -0,0 +1,188 @@
+import { VariantProps } from "../../utils/tv.js";
+//#region src/components/text/text.styles.d.ts
+export declare const textStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    lead: {
+      base: string;
+    };
+    body: {
+      base: string;
+    };
+    small: {
+      base: string;
+    };
+    caption: {
+      base: string;
+    };
+  };
+  tone: {
+    default: {
+      base: string;
+    };
+    muted: {
+      base: string;
+    };
+    faint: {
+      base: string;
+    };
+    primary: {
+      base: string;
+    };
+    success: {
+      base: string;
+    };
+    warning: {
+      base: string;
+    };
+    danger: {
+      base: string;
+    };
+  };
+  weight: {
+    regular: {
+      base: string;
+    };
+    medium: {
+      base: string;
+    };
+    semibold: {
+      base: string;
+    };
+  };
+  mono: {
+    true: {
+      base: string;
+    };
+  };
+  truncate: {
+    true: {
+      base: string;
+    };
+  };
+}, {
+  base: string;
+}, undefined, {
+  size: {
+    lead: {
+      base: string;
+    };
+    body: {
+      base: string;
+    };
+    small: {
+      base: string;
+    };
+    caption: {
+      base: string;
+    };
+  };
+  tone: {
+    default: {
+      base: string;
+    };
+    muted: {
+      base: string;
+    };
+    faint: {
+      base: string;
+    };
+    primary: {
+      base: string;
+    };
+    success: {
+      base: string;
+    };
+    warning: {
+      base: string;
+    };
+    danger: {
+      base: string;
+    };
+  };
+  weight: {
+    regular: {
+      base: string;
+    };
+    medium: {
+      base: string;
+    };
+    semibold: {
+      base: string;
+    };
+  };
+  mono: {
+    true: {
+      base: string;
+    };
+  };
+  truncate: {
+    true: {
+      base: string;
+    };
+  };
+}, {
+  base: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  size: {
+    lead: {
+      base: string;
+    };
+    body: {
+      base: string;
+    };
+    small: {
+      base: string;
+    };
+    caption: {
+      base: string;
+    };
+  };
+  tone: {
+    default: {
+      base: string;
+    };
+    muted: {
+      base: string;
+    };
+    faint: {
+      base: string;
+    };
+    primary: {
+      base: string;
+    };
+    success: {
+      base: string;
+    };
+    warning: {
+      base: string;
+    };
+    danger: {
+      base: string;
+    };
+  };
+  weight: {
+    regular: {
+      base: string;
+    };
+    medium: {
+      base: string;
+    };
+    semibold: {
+      base: string;
+    };
+  };
+  mono: {
+    true: {
+      base: string;
+    };
+  };
+  truncate: {
+    true: {
+      base: string;
+    };
+  };
+}, {
+  base: string;
+}>>;
+export type TextVariants = VariantProps<typeof textStyles>;
+//#endregion

package/dist/components/text/text.styles.js

@@ -0,0 +1,36 @@
+"use client";
+import { tv } from "../../utils/tv.js";
+//#region src/components/text/text.styles.ts
+const textStyles = /* @__PURE__ */ tv({
+	slots: { base: "" },
+	variants: {
+		size: {
+			lead: { base: "text-lead" },
+			body: { base: "text-body" },
+			small: { base: "text-small" },
+			caption: { base: "text-caption" }
+		},
+		tone: {
+			default: { base: "text-foreground" },
+			muted: { base: "text-muted-foreground" },
+			faint: { base: "text-faint-foreground" },
+			primary: { base: "text-primary-text" },
+			success: { base: "text-success-text" },
+			warning: { base: "text-warning-text" },
+			danger: { base: "text-danger-text" }
+		},
+		weight: {
+			regular: { base: "font-normal" },
+			medium: { base: "font-medium" },
+			semibold: { base: "font-semibold" }
+		},
+		mono: { true: { base: "font-mono" } },
+		truncate: { true: { base: "truncate" } }
+	},
+	defaultVariants: {
+		size: "body",
+		tone: "default"
+	}
+});
+//#endregion
+export { textStyles };

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

@@ -0,0 +1,2 @@
+import { Textarea, textareaStyles } from "./textarea.js";
+export { Textarea, textareaStyles };

package/dist/components/textarea/textarea.d.ts

@@ -0,0 +1,29 @@
+import { ComponentProps } from "react";
+//#region src/components/textarea/textarea.d.ts
+export declare const textareaStyles: import("tailwind-variants").TVReturnType<{
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      base?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {
+  [x: string]: {
+    [x: string]: import("tailwind-variants").ClassValue | {
+      base?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  base: string[];
+}, undefined, {
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      base?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  base: string[];
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+  base: string[];
+}>>;
+export declare function Textarea(inProps: ComponentProps<'textarea'>): import("react").JSX.Element;
+//#endregion

package/dist/components/textarea/textarea.js

@@ -0,0 +1,23 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { tv } from "../../utils/tv.js";
+import { useFieldControl } from "../field/field-context.js";
+import { fieldControl } from "../input/input.styles.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/textarea/textarea.tsx
+const textareaStyles = /* @__PURE__ */ tv({ slots: { base: [
+	...fieldControl,
+	"field-sizing-content min-h-20 resize-y rounded-[min(var(--radius-md),var(--radius-lg))] px-3 py-2 text-small",
+	"outline-none placeholder:text-faint-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/20",
+	"disabled:cursor-not-allowed disabled:opacity-50"
+] } });
+function Textarea(inProps) {
+	const [{ className, ...rest }, slots] = useComponentConfig("Textarea", useFieldControl(inProps));
+	return /* @__PURE__ */ jsx("textarea", {
+		"data-slot": "textarea",
+		className: textareaStyles().base({ class: [slots.base, className] }),
+		...rest
+	});
+}
+//#endregion
+export { Textarea, textareaStyles };

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

@@ -0,0 +1,3 @@
+import { TimelineVariants, timelineStyles } from "./timeline.styles.js";
+import { Timeline, TimelineItem, TimelineItemData, TimelineItemProps, TimelineProps } from "./timeline.js";
+export { Timeline, TimelineItem, type TimelineItemData, type TimelineItemProps, type TimelineProps, type TimelineVariants, timelineStyles };

package/dist/components/timeline/timeline.d.ts

@@ -0,0 +1,28 @@
+import { TimelineVariants } from "./timeline.styles.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/timeline/timeline.d.ts
+export interface TimelineItemData extends TimelineVariants {
+  /** Stable key. Falls back to the index. */
+  id?: string;
+  title: ReactNode;
+  /** Display text for when it happened, e.g. "2h ago" or "Oct 12". */
+  time?: ReactNode;
+  /** Machine-readable date for the `<time>` element, e.g. "2026-10-12T09:41". */
+  dateTime?: string;
+  description?: ReactNode;
+  /** Replaces the dot in the marker. */
+  icon?: ReactNode;
+}
+export interface TimelineProps extends Omit<ComponentProps<'ol'>, 'children'> {
+  /** Data-driven items. Use `children` with TimelineItem for custom content. */
+  items?: readonly TimelineItemData[];
+  children?: ReactNode;
+}
+/** A vertical list of events in order, for activity feeds, changelogs and order tracking. */
+export declare function Timeline(inProps: TimelineProps): import("react").JSX.Element;
+export interface TimelineItemProps extends Omit<ComponentProps<'li'>, 'title'>, Omit<TimelineItemData, 'id' | 'description'> {
+  /** Description below the title. */
+  children?: ReactNode;
+}
+export declare function TimelineItem({ title, time, dateTime, icon, tone, className, children, ...props }: TimelineItemProps): import("react").JSX.Element;
+//#endregion

package/dist/components/timeline/timeline.js

@@ -0,0 +1,61 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { timelineStyles } from "./timeline.styles.js";
+import { createContext, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/timeline/timeline.tsx
+const TimelineContext = createContext({});
+/** A vertical list of events in order, for activity feeds, changelogs and order tracking. */
+function Timeline(inProps) {
+	const [props, slots] = useComponentConfig("Timeline", inProps);
+	const { items, className, children, ...rest } = props;
+	const s = timelineStyles();
+	return /* @__PURE__ */ jsx(TimelineContext.Provider, {
+		value: slots,
+		children: /* @__PURE__ */ jsx("ol", {
+			"data-slot": "timeline",
+			className: s.root({ class: [slots.root, className] }),
+			...rest,
+			children: items ? items.map(({ id, description, ...item }, index) => /* @__PURE__ */ jsx(TimelineItem, {
+				...item,
+				children: description
+			}, id ?? index)) : children
+		})
+	});
+}
+function TimelineItem({ title, time, dateTime, icon, tone, className, children, ...props }) {
+	const slots = useContext(TimelineContext);
+	const s = timelineStyles({ tone });
+	return /* @__PURE__ */ jsxs("li", {
+		"data-slot": "timeline-item",
+		"data-tone": tone ?? "neutral",
+		className: s.item({ class: [slots.item, className] }),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: s.rail({ class: slots.rail }),
+			"aria-hidden": "true",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: s.marker({ class: slots.marker }),
+				children: icon ?? /* @__PURE__ */ jsx("span", { className: s.dot({ class: slots.dot }) })
+			}), /* @__PURE__ */ jsx("span", { className: s.connector({ class: slots.connector }) })]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: s.content({ class: slots.content }),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: s.header({ class: slots.header }),
+				children: [/* @__PURE__ */ jsx("p", {
+					className: s.title({ class: slots.title }),
+					children: title
+				}), time && /* @__PURE__ */ jsx("time", {
+					dateTime,
+					className: s.time({ class: slots.time }),
+					children: time
+				})]
+			}), children && /* @__PURE__ */ jsx("div", {
+				className: s.description({ class: slots.description }),
+				children
+			})]
+		})]
+	});
+}
+//#endregion
+export { Timeline, TimelineItem };