@glyphui/ui 0.3.0 → 0.5.0

package/dist/components/aspect-ratio/aspect-ratio.d.ts

@@ -0,0 +1,55 @@
+import { VariantProps } from "../../utils/tv.js";
+import { StylesEntry } from "../../utils/registry.js";
+import { AspectRatio } from "radix-ui";
+import { ComponentProps } from "react";
+//#region src/components/aspect-ratio/aspect-ratio.d.ts
+export declare const aspectRatioStyles: import("tailwind-variants").TVReturnType<{
+  rounded: {
+    true: {
+      base: string;
+    };
+  };
+  placeholder: {
+    true: {
+      base: string;
+    };
+  };
+}, {
+  base: string;
+}, undefined, {
+  rounded: {
+    true: {
+      base: string;
+    };
+  };
+  placeholder: {
+    true: {
+      base: string;
+    };
+  };
+}, {
+  base: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  rounded: {
+    true: {
+      base: string;
+    };
+  };
+  placeholder: {
+    true: {
+      base: string;
+    };
+  };
+}, {
+  base: string;
+}>>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    AspectRatio: StylesEntry<typeof aspectRatioStyles>;
+  }
+}
+export interface AspectRatioProps extends ComponentProps<typeof AspectRatio.Root>, VariantProps<typeof aspectRatioStyles> {}
+/** Keeps media at a fixed width-to-height ratio, e.g. `ratio={16 / 9}`. Images inside cover the box. */
+declare function AspectRatio$1(inProps: AspectRatioProps): import("react").JSX.Element;
+//#endregion
+export { AspectRatio$1 as AspectRatio };

package/dist/components/aspect-ratio/aspect-ratio.js

@@ -0,0 +1,28 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { tv } from "../../utils/tv.js";
+import { AspectRatio } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/aspect-ratio/aspect-ratio.tsx
+const aspectRatioStyles = /* @__PURE__ */ tv({
+	slots: { base: "overflow-hidden [&>img]:size-full [&>img]:object-cover [&>video]:size-full [&>video]:object-cover" },
+	variants: {
+		rounded: { true: { base: "rounded-lg" } },
+		placeholder: { true: { base: "bg-muted" } }
+	}
+});
+/** Keeps media at a fixed width-to-height ratio, e.g. `ratio={16 / 9}`. Images inside cover the box. */
+function AspectRatio$1(inProps) {
+	const [props, slots] = useComponentConfig("AspectRatio", inProps);
+	const { rounded, placeholder, className, ...rest } = props;
+	return /* @__PURE__ */ jsx(AspectRatio.Root, {
+		"data-slot": "aspect-ratio",
+		className: aspectRatioStyles({
+			rounded,
+			placeholder
+		}).base({ class: [slots.base, className] }),
+		...rest
+	});
+}
+//#endregion
+export { AspectRatio$1 as AspectRatio, aspectRatioStyles };

package/dist/components/aspect-ratio/index.d.ts

@@ -0,0 +1,2 @@
+import { AspectRatio, AspectRatioProps, aspectRatioStyles } from "./aspect-ratio.js";
+export { AspectRatio, type AspectRatioProps, aspectRatioStyles };

package/dist/components/avatar/avatar.d.ts

@@ -0,0 +1,13 @@
+import { AvatarVariants } from "./avatar.styles.js";
+import { Avatar } from "radix-ui";
+import { ComponentProps } from "react";
+//#region src/components/avatar/avatar.d.ts
+export interface AvatarProps extends ComponentProps<typeof Avatar.Root>, AvatarVariants {
+  /** Used for the image alt text and the initials fallback. */
+  name: string;
+  src?: string | undefined;
+}
+declare function Avatar$1(inProps: AvatarProps): import("react").JSX.Element;
+export declare function AvatarGroup({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+//#endregion
+export { Avatar$1 as Avatar };

package/dist/components/avatar/avatar.js

@@ -0,0 +1,50 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { avatarStyles } from "./avatar.styles.js";
+import { Avatar } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/avatar/avatar.tsx
+function initials(name) {
+	const parts = name.trim().split(/\s+/);
+	return ((parts[0]?.[0] ?? "") + (parts.length > 1 ? parts.at(-1)?.[0] ?? "" : "")).toUpperCase();
+}
+/** A stable hue per name, so fallback avatars are distinguishable but not random. */
+function hue(name) {
+	let h = 0;
+	for (const char of name) h = (h * 31 + char.charCodeAt(0)) % 360;
+	return h;
+}
+function Avatar$1(inProps) {
+	const [props, slots] = useComponentConfig("Avatar", inProps);
+	const { name, src, size, className, style, ...rest } = props;
+	const s = avatarStyles({ size });
+	const tint = {
+		"--avatar-hue": hue(name),
+		...style
+	};
+	return /* @__PURE__ */ jsxs(Avatar.Root, {
+		"data-slot": "avatar",
+		className: s.root({ class: [slots.root, className] }),
+		style: tint,
+		...rest,
+		children: [src && /* @__PURE__ */ jsx(Avatar.Image, {
+			src,
+			alt: name,
+			className: s.image({ class: slots.image })
+		}), /* @__PURE__ */ jsx(Avatar.Fallback, {
+			className: s.fallback({ class: ["bg-[oklch(68%_0.11_var(--avatar-hue)/0.22)] text-foreground", slots.fallback] }),
+			"aria-label": src ? void 0 : name,
+			children: initials(name)
+		})]
+	});
+}
+function AvatarGroup({ className, ...props }) {
+	const [, slots] = useComponentConfig("Avatar", {});
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "avatar-group",
+		className: avatarStyles().group({ class: [slots.group, className] }),
+		...props
+	});
+}
+//#endregion
+export { Avatar$1 as Avatar, AvatarGroup };

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

@@ -0,0 +1,77 @@
+import { VariantProps } from "../../utils/tv.js";
+//#region src/components/avatar/avatar.styles.d.ts
+export declare const avatarStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    xs: {
+      root: string;
+      fallback: string;
+    };
+    sm: {
+      root: string;
+      fallback: string;
+    };
+    md: {
+      root: string;
+      fallback: string;
+    };
+    lg: {
+      root: string;
+      fallback: string;
+    };
+  };
+}, {
+  root: string;
+  image: string;
+  fallback: string;
+  group: string;
+}, undefined, {
+  size: {
+    xs: {
+      root: string;
+      fallback: string;
+    };
+    sm: {
+      root: string;
+      fallback: string;
+    };
+    md: {
+      root: string;
+      fallback: string;
+    };
+    lg: {
+      root: string;
+      fallback: string;
+    };
+  };
+}, {
+  root: string;
+  image: string;
+  fallback: string;
+  group: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  size: {
+    xs: {
+      root: string;
+      fallback: string;
+    };
+    sm: {
+      root: string;
+      fallback: string;
+    };
+    md: {
+      root: string;
+      fallback: string;
+    };
+    lg: {
+      root: string;
+      fallback: string;
+    };
+  };
+}, {
+  root: string;
+  image: string;
+  fallback: string;
+  group: string;
+}>>;
+export type AvatarVariants = VariantProps<typeof avatarStyles>;
+//#endregion

package/dist/components/avatar/avatar.styles.js

@@ -0,0 +1,32 @@
+"use client";
+import { tv } from "../../utils/tv.js";
+//#region src/components/avatar/avatar.styles.ts
+const avatarStyles = /* @__PURE__ */ tv({
+	slots: {
+		root: "relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-pill bg-muted align-middle",
+		image: "size-full object-cover",
+		fallback: "flex size-full items-center justify-center font-medium text-muted-foreground",
+		group: "flex items-center -space-x-2 [&>[data-slot=avatar]]:ring-2 [&>[data-slot=avatar]]:ring-background"
+	},
+	variants: { size: {
+		xs: {
+			root: "size-5",
+			fallback: "text-[0.5625rem]"
+		},
+		sm: {
+			root: "size-6",
+			fallback: "text-[0.625rem]"
+		},
+		md: {
+			root: "size-8",
+			fallback: "text-caption"
+		},
+		lg: {
+			root: "size-11",
+			fallback: "text-small"
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { avatarStyles };

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

@@ -0,0 +1,3 @@
+import { AvatarVariants, avatarStyles } from "./avatar.styles.js";
+import { Avatar, AvatarGroup, AvatarProps } from "./avatar.js";
+export { Avatar, AvatarGroup, type AvatarProps, type AvatarVariants, avatarStyles };

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

@@ -0,0 +1,10 @@
+import { BadgeVariants } from "./badge.styles.js";
+import { ComponentProps } from "react";
+//#region src/components/badge/badge.d.ts
+export interface BadgeProps extends ComponentProps<'span'>, BadgeVariants {
+  /** Leading status dot in the badge's color. */
+  dot?: boolean;
+  asChild?: boolean;
+}
+export declare function Badge(inProps: BadgeProps): import("react").JSX.Element;
+//#endregion

package/dist/components/badge/badge.js

@@ -0,0 +1,28 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { badgeStyles } from "./badge.styles.js";
+import { Slot } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/badge/badge.tsx
+function Badge(inProps) {
+	const [props, slots] = useComponentConfig("Badge", inProps);
+	const { tone, variant, dot, asChild, className, children, ...rest } = props;
+	const s = badgeStyles({
+		tone,
+		variant
+	});
+	const Comp = asChild ? Slot.Root : "span";
+	return /* @__PURE__ */ jsxs(Comp, {
+		"data-slot": "badge",
+		"data-tone": tone ?? "neutral",
+		className: s.base({ class: [slots.base, className] }),
+		...rest,
+		children: [dot && /* @__PURE__ */ jsx("span", {
+			"data-slot": "badge-dot",
+			className: s.dot({ class: slots.dot }),
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ jsx(Slot.Slottable, { children })]
+	});
+}
+//#endregion
+export { Badge };

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

@@ -0,0 +1,62 @@
+import { VariantProps } from "../../utils/tv.js";
+//#region src/components/badge/badge.styles.d.ts
+export declare const badgeStyles: import("tailwind-variants").TVReturnType<{
+  tone: {
+    neutral: {};
+    primary: {};
+    success: {};
+    warning: {};
+    danger: {};
+    info: {};
+  };
+  variant: {
+    soft: {};
+    solid: {};
+    outline: {
+      base: string;
+    };
+  };
+}, {
+  base: string[];
+  dot: string;
+}, undefined, {
+  tone: {
+    neutral: {};
+    primary: {};
+    success: {};
+    warning: {};
+    danger: {};
+    info: {};
+  };
+  variant: {
+    soft: {};
+    solid: {};
+    outline: {
+      base: string;
+    };
+  };
+}, {
+  base: string[];
+  dot: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  tone: {
+    neutral: {};
+    primary: {};
+    success: {};
+    warning: {};
+    danger: {};
+    info: {};
+  };
+  variant: {
+    soft: {};
+    solid: {};
+    outline: {
+      base: string;
+    };
+  };
+}, {
+  base: string[];
+  dot: string;
+}>>;
+export type BadgeVariants = VariantProps<typeof badgeStyles>;
+//#endregion

package/dist/components/badge/badge.styles.js

@@ -0,0 +1,72 @@
+"use client";
+import { themedBorder } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+//#region src/components/badge/badge.styles.ts
+const tones = {
+	neutral: {
+		soft: "bg-muted text-muted-foreground",
+		solid: "bg-secondary text-secondary-foreground",
+		outline: "border-border-strong text-foreground"
+	},
+	primary: {
+		soft: "bg-primary/14 text-primary-text",
+		solid: "bg-primary text-primary-foreground",
+		outline: "border-primary/50 text-primary-text"
+	},
+	success: {
+		soft: "bg-success/14 text-success-text",
+		solid: "bg-success text-success-foreground",
+		outline: "border-success/50 text-success-text"
+	},
+	warning: {
+		soft: "bg-warning/14 text-warning-text",
+		solid: "bg-warning text-warning-foreground",
+		outline: "border-warning/50 text-warning-text"
+	},
+	danger: {
+		soft: "bg-danger/14 text-danger-text",
+		solid: "bg-danger text-danger-foreground",
+		outline: "border-danger/50 text-danger-text"
+	},
+	info: {
+		soft: "bg-info/14 text-info-text",
+		solid: "bg-info text-info-foreground",
+		outline: "border-info/50 text-info-text"
+	}
+};
+const badgeStyles = /* @__PURE__ */ tv({
+	slots: {
+		base: [
+			"inline-flex h-5.5 w-fit shrink-0 items-center gap-1.5 whitespace-nowrap rounded-pill border-transparent px-2",
+			"text-caption tabular-nums",
+			themedBorder
+		],
+		dot: "size-1.5 shrink-0 rounded-pill bg-current"
+	},
+	variants: {
+		tone: {
+			neutral: {},
+			primary: {},
+			success: {},
+			warning: {},
+			danger: {},
+			info: {}
+		},
+		variant: {
+			soft: {},
+			solid: {},
+			outline: { base: "bg-transparent" }
+		}
+	},
+	compoundVariants: Object.keys(tones).flatMap((tone) => Object.keys(tones[tone]).map((variant) => ({
+		tone,
+		variant,
+		class: { base: tones[tone][variant] }
+	}))),
+	defaultVariants: {
+		tone: "neutral",
+		variant: "soft"
+	}
+});
+//#endregion
+export { badgeStyles };

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

@@ -0,0 +1,3 @@
+import { BadgeVariants, badgeStyles } from "./badge.styles.js";
+import { Badge, BadgeProps } from "./badge.js";
+export { Badge, type BadgeProps, type BadgeVariants, badgeStyles };

package/dist/components/banner/banner.d.ts

@@ -0,0 +1,17 @@
+import { BannerVariants } from "./banner.styles.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/banner/banner.d.ts
+export interface BannerProps extends ComponentProps<'section'>, BannerVariants {
+  /** Replaces the tone's default icon. `false` hides it. */
+  icon?: ReactNode | false;
+  action?: ReactNode;
+  /** Shows a close button. */
+  dismissible?: boolean;
+  /** Remembers the dismissal in localStorage under this key, so the banner stays hidden. */
+  storageKey?: string;
+  onDismiss?: () => void;
+  dismissLabel?: string;
+}
+/** A full-width announcement at the top of a page or section. */
+export declare function Banner(inProps: BannerProps): import("react").JSX.Element | null;
+//#endregion

package/dist/components/banner/banner.js

@@ -0,0 +1,71 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { XIcon } from "../../internal/icons.js";
+import { IconButton } from "../button/button.js";
+import { toneIcons } from "../alert/alert-icons.js";
+import { bannerStyles } from "./banner.styles.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/banner/banner.tsx
+function readDismissed(key) {
+	if (!key || typeof window === "undefined") return false;
+	try {
+		return window.localStorage.getItem(key) === "dismissed";
+	} catch {
+		return false;
+	}
+}
+/** A full-width announcement at the top of a page or section. */
+function Banner(inProps) {
+	const [props, slots] = useComponentConfig("Banner", inProps);
+	const { tone, icon, action, dismissible = false, storageKey, onDismiss, dismissLabel = "Dismiss", className, children, ...rest } = props;
+	const [dismissed, setDismissed] = useState(() => readDismissed(storageKey));
+	if (dismissed) return null;
+	const resolvedTone = tone ?? "neutral";
+	const s = bannerStyles({ tone });
+	const iconNode = icon === false ? null : icon ?? toneIcons[resolvedTone]();
+	const dismiss = () => {
+		setDismissed(true);
+		if (storageKey) try {
+			window.localStorage.setItem(storageKey, "dismissed");
+		} catch {}
+		onDismiss?.();
+	};
+	return /* @__PURE__ */ jsx("section", {
+		"data-slot": "banner",
+		"data-tone": resolvedTone,
+		"aria-label": "Announcement",
+		className: s.root({ class: [slots.root, className] }),
+		...rest,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: s.inner({ class: slots.inner }),
+			children: [
+				iconNode && /* @__PURE__ */ jsx("span", {
+					"data-slot": "banner-icon",
+					className: s.icon({ class: slots.icon }),
+					"aria-hidden": "true",
+					children: iconNode
+				}),
+				/* @__PURE__ */ jsx("div", {
+					"data-slot": "banner-content",
+					className: s.content({ class: slots.content }),
+					children
+				}),
+				action && /* @__PURE__ */ jsx("div", {
+					"data-slot": "banner-action",
+					className: s.action({ class: slots.action }),
+					children: action
+				}),
+				dismissible && /* @__PURE__ */ jsx(IconButton, {
+					size: "sm",
+					icon: /* @__PURE__ */ jsx(XIcon, {}),
+					"aria-label": dismissLabel,
+					onClick: dismiss,
+					className: s.dismiss({ class: slots.dismiss })
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { Banner };

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

@@ -0,0 +1,98 @@
+import { VariantProps } from "../../utils/tv.js";
+import { StylesEntry } from "../../utils/registry.js";
+//#region src/components/banner/banner.styles.d.ts
+export declare const bannerStyles: import("tailwind-variants").TVReturnType<{
+  tone: {
+    neutral: {
+      root: string;
+      icon: string;
+    };
+    primary: {
+      root: string;
+    };
+    info: {
+      root: string;
+    };
+    success: {
+      root: string;
+    };
+    warning: {
+      root: string;
+    };
+    danger: {
+      root: string;
+    };
+  };
+}, {
+  root: string[];
+  inner: string;
+  icon: string;
+  content: string;
+  action: string;
+  dismiss: string;
+}, undefined, {
+  tone: {
+    neutral: {
+      root: string;
+      icon: string;
+    };
+    primary: {
+      root: string;
+    };
+    info: {
+      root: string;
+    };
+    success: {
+      root: string;
+    };
+    warning: {
+      root: string;
+    };
+    danger: {
+      root: string;
+    };
+  };
+}, {
+  root: string[];
+  inner: string;
+  icon: string;
+  content: string;
+  action: string;
+  dismiss: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  tone: {
+    neutral: {
+      root: string;
+      icon: string;
+    };
+    primary: {
+      root: string;
+    };
+    info: {
+      root: string;
+    };
+    success: {
+      root: string;
+    };
+    warning: {
+      root: string;
+    };
+    danger: {
+      root: string;
+    };
+  };
+}, {
+  root: string[];
+  inner: string;
+  icon: string;
+  content: string;
+  action: string;
+  dismiss: string;
+}>>;
+export type BannerVariants = VariantProps<typeof bannerStyles>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Banner: StylesEntry<typeof bannerStyles>;
+  }
+}
+//#endregion

package/dist/components/banner/banner.styles.js

@@ -0,0 +1,27 @@
+"use client";
+import { tv } from "../../utils/tv.js";
+//#region src/components/banner/banner.styles.ts
+const bannerStyles = /* @__PURE__ */ tv({
+	slots: {
+		root: ["w-full border-b-(length:--glyph-border-width) text-small"],
+		inner: "mx-auto flex w-full max-w-7xl items-center gap-3 px-4 py-2.5 sm:px-6",
+		icon: "flex size-4 shrink-0 items-center justify-center [&>svg]:size-4",
+		content: "min-w-0 flex-1 [&_a]:font-medium [&_a]:underline [&_a]:underline-offset-2",
+		action: "flex shrink-0 items-center gap-2",
+		dismiss: "-my-1 -mr-2 shrink-0 text-current hover:bg-current/10 hover:text-current"
+	},
+	variants: { tone: {
+		neutral: {
+			root: "border-border bg-subtle text-foreground",
+			icon: "text-muted-foreground"
+		},
+		primary: { root: "border-primary bg-primary text-primary-foreground" },
+		info: { root: "border-info/25 bg-info/10 text-info-text" },
+		success: { root: "border-success/25 bg-success/10 text-success-text" },
+		warning: { root: "border-warning/30 bg-warning/14 text-warning-text" },
+		danger: { root: "border-danger/25 bg-danger/10 text-danger-text" }
+	} },
+	defaultVariants: { tone: "neutral" }
+});
+//#endregion
+export { bannerStyles };

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

@@ -0,0 +1,3 @@
+import { BannerVariants, bannerStyles } from "./banner.styles.js";
+import { Banner, BannerProps } from "./banner.js";
+export { Banner, type BannerProps, type BannerVariants, bannerStyles };