@glyphui/ui 0.4.0 → 0.5.0

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 };

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

@@ -0,0 +1,110 @@
+import { VariantProps } from "../../utils/tv.js";
+import { StylesEntry } from "../../utils/registry.js";
+//#region src/components/timeline/timeline.styles.d.ts
+export declare const timelineStyles: import("tailwind-variants").TVReturnType<{
+  tone: {
+    neutral: {
+      marker: string;
+    };
+    primary: {
+      marker: string;
+    };
+    info: {
+      marker: string;
+    };
+    success: {
+      marker: string;
+    };
+    warning: {
+      marker: string;
+    };
+    danger: {
+      marker: string;
+    };
+  };
+}, {
+  root: string;
+  item: string;
+  rail: string;
+  marker: string[];
+  dot: string;
+  connector: string;
+  content: string;
+  header: string;
+  title: string;
+  time: string;
+  description: string;
+}, undefined, {
+  tone: {
+    neutral: {
+      marker: string;
+    };
+    primary: {
+      marker: string;
+    };
+    info: {
+      marker: string;
+    };
+    success: {
+      marker: string;
+    };
+    warning: {
+      marker: string;
+    };
+    danger: {
+      marker: string;
+    };
+  };
+}, {
+  root: string;
+  item: string;
+  rail: string;
+  marker: string[];
+  dot: string;
+  connector: string;
+  content: string;
+  header: string;
+  title: string;
+  time: string;
+  description: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  tone: {
+    neutral: {
+      marker: string;
+    };
+    primary: {
+      marker: string;
+    };
+    info: {
+      marker: string;
+    };
+    success: {
+      marker: string;
+    };
+    warning: {
+      marker: string;
+    };
+    danger: {
+      marker: string;
+    };
+  };
+}, {
+  root: string;
+  item: string;
+  rail: string;
+  marker: string[];
+  dot: string;
+  connector: string;
+  content: string;
+  header: string;
+  title: string;
+  time: string;
+  description: string;
+}>>;
+export type TimelineVariants = VariantProps<typeof timelineStyles>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Timeline: StylesEntry<typeof timelineStyles>;
+  }
+}
+//#endregion

package/dist/components/timeline/timeline.styles.js

@@ -0,0 +1,30 @@
+"use client";
+import { themedBorder } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+//#region src/components/timeline/timeline.styles.ts
+const timelineStyles = /* @__PURE__ */ tv({
+	slots: {
+		root: "grid",
+		item: "group/item relative grid grid-cols-[auto_1fr] gap-x-3",
+		rail: "flex flex-col items-center",
+		marker: ["z-10 flex size-6 shrink-0 items-center justify-center rounded-pill bg-surface [&>svg]:size-3.5", themedBorder],
+		dot: "size-2 rounded-pill bg-current",
+		connector: "my-1 w-px flex-1 bg-border group-last/item:hidden",
+		content: "grid min-w-0 gap-0.5 pt-0.5 pb-6 group-last/item:pb-0",
+		header: "flex flex-wrap items-baseline justify-between gap-x-3 gap-y-0.5",
+		title: "text-small font-medium text-foreground",
+		time: "font-mono text-caption text-faint-foreground tabular-nums",
+		description: "text-small text-muted-foreground"
+	},
+	variants: { tone: {
+		neutral: { marker: "border-border text-muted-foreground" },
+		primary: { marker: "border-primary/40 text-[color-mix(in_oklab,var(--color-primary)_80%,var(--color-foreground))]" },
+		info: { marker: "border-info/40 text-[color-mix(in_oklab,var(--color-info)_80%,var(--color-foreground))]" },
+		success: { marker: "border-success/40 text-[color-mix(in_oklab,var(--color-success)_80%,var(--color-foreground))]" },
+		warning: { marker: "border-warning/50 text-[color-mix(in_oklab,var(--color-warning)_80%,var(--color-foreground))]" },
+		danger: { marker: "border-danger/40 text-[color-mix(in_oklab,var(--color-danger)_80%,var(--color-foreground))]" }
+	} },
+	defaultVariants: { tone: "neutral" }
+});
+//#endregion
+export { timelineStyles };

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

@@ -0,0 +1,2 @@
+import { Toaster, ToasterProps, toast, toastStyles } from "./toast.js";
+export { Toaster, type ToasterProps, toast, toastStyles };

package/dist/components/toast/toast.d.ts

@@ -0,0 +1,119 @@
+import { StylesEntry } from "../../utils/registry.js";
+import { ComponentProps } from "react";
+import { Toaster, toast } from "sonner";
+//#region src/components/toast/toast.d.ts
+export declare const toastStyles: import("tailwind-variants").TVReturnType<{
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      icon?: import("tailwind-variants").ClassValue;
+      title?: import("tailwind-variants").ClassValue;
+      description?: import("tailwind-variants").ClassValue;
+      loading?: import("tailwind-variants").ClassValue;
+      error?: import("tailwind-variants").ClassValue;
+      info?: import("tailwind-variants").ClassValue;
+      success?: import("tailwind-variants").ClassValue;
+      warning?: import("tailwind-variants").ClassValue;
+      content?: import("tailwind-variants").ClassValue;
+      toast?: import("tailwind-variants").ClassValue;
+      actionButton?: import("tailwind-variants").ClassValue;
+      cancelButton?: import("tailwind-variants").ClassValue;
+      closeButton?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {
+  [x: string]: {
+    [x: string]: import("tailwind-variants").ClassValue | {
+      icon?: import("tailwind-variants").ClassValue;
+      title?: import("tailwind-variants").ClassValue;
+      description?: import("tailwind-variants").ClassValue;
+      loading?: import("tailwind-variants").ClassValue;
+      error?: import("tailwind-variants").ClassValue;
+      info?: import("tailwind-variants").ClassValue;
+      success?: import("tailwind-variants").ClassValue;
+      warning?: import("tailwind-variants").ClassValue;
+      content?: import("tailwind-variants").ClassValue;
+      toast?: import("tailwind-variants").ClassValue;
+      actionButton?: import("tailwind-variants").ClassValue;
+      cancelButton?: import("tailwind-variants").ClassValue;
+      closeButton?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  toast: string[];
+  content: string;
+  title: string;
+  description: string;
+  icon: string;
+  actionButton: string[];
+  cancelButton: string[];
+  closeButton: string[];
+  success: string;
+  error: string;
+  warning: string;
+  info: string;
+  loading: string;
+}, undefined, {
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      icon?: import("tailwind-variants").ClassValue;
+      title?: import("tailwind-variants").ClassValue;
+      description?: import("tailwind-variants").ClassValue;
+      loading?: import("tailwind-variants").ClassValue;
+      error?: import("tailwind-variants").ClassValue;
+      info?: import("tailwind-variants").ClassValue;
+      success?: import("tailwind-variants").ClassValue;
+      warning?: import("tailwind-variants").ClassValue;
+      content?: import("tailwind-variants").ClassValue;
+      toast?: import("tailwind-variants").ClassValue;
+      actionButton?: import("tailwind-variants").ClassValue;
+      cancelButton?: import("tailwind-variants").ClassValue;
+      closeButton?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  toast: string[];
+  content: string;
+  title: string;
+  description: string;
+  icon: string;
+  actionButton: string[];
+  cancelButton: string[];
+  closeButton: string[];
+  success: string;
+  error: string;
+  warning: string;
+  info: string;
+  loading: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+  toast: string[];
+  content: string;
+  title: string;
+  description: string;
+  icon: string;
+  actionButton: string[];
+  cancelButton: string[];
+  closeButton: string[];
+  success: string;
+  error: string;
+  warning: string;
+  info: string;
+  loading: string;
+}>>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Toast: StylesEntry<typeof toastStyles>;
+  }
+}
+export type ToasterProps = ComponentProps<typeof Toaster>;
+/**
+ * Renders toasts sent with `toast()`. Mount once near the root. Styled entirely by the
+ * theme's tokens, so it follows the theme and color mode automatically.
+ *
+ * ```tsx
+ * toast.success('Saved')
+ * toast.promise(save(), { loading: 'Saving…', success: 'Saved', error: 'Couldn’t save' })
+ * ```
+ */
+declare function Toaster$1(inProps: ToasterProps): import("react").JSX.Element;
+//#endregion
+export { Toaster$1 as Toaster, toast };