@glasshome/ui 1.0.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@glasshome/ui",
-	"version": "1.0.0",
+	"version": "1.0.1",
 	"description": "SolidJS component library for GlassHome, built on Kobalte",
 	"type": "module",
 	"homepage": "https://github.com/glasshome/ui#readme",
@@ -51,6 +51,7 @@
 	"files": [
 		"dist",
 		"src/astro",
+		"src/lib",
 		"src/styles",
 		"scripts"
 	],

package/src/lib/alert-tones.ts

@@ -0,0 +1,65 @@
+export type AlertTone = "info" | "warning" | "success" | "destructive";
+
+export type AlertToneStyle = {
+	color: string;
+	icon: string;
+	text: string;
+};
+
+/* Text mixes in oklab: no hue channel, a hued tone desaturates without swinging yellow. */
+export const ALERT_TONES: Record<AlertTone, AlertToneStyle> = {
+	info: {
+		color: "var(--primary)",
+		icon: "lucide:info",
+		text: "var(--primary-tint-foreground)",
+	},
+	warning: {
+		color: "var(--warning)",
+		icon: "lucide:alert-triangle",
+		text: "color-mix(in oklab, var(--warning) 55%, var(--foreground))",
+	},
+	success: {
+		color: "var(--success)",
+		icon: "lucide:check-circle-2",
+		text: "color-mix(in oklab, var(--success) 60%, var(--foreground))",
+	},
+	destructive: {
+		color: "var(--destructive)",
+		icon: "lucide:alert-octagon",
+		text: "color-mix(in oklab, var(--destructive) 65%, var(--foreground))",
+	},
+};
+
+/* Lucide glyph paths (viewBox 0 0 24 24), rendered by both the Solid and Astro <Alert>. */
+export const ALERT_ICON_PATHS: Record<AlertTone, string> = {
+	info: '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>',
+	warning:
+		'<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/>',
+	success: '<path d="M21.801 10A10 10 0 1 1 17 3.335"/><path d="m9 11 3 3L22 4"/>',
+	destructive:
+		'<path d="M12 16h.01"/><path d="M12 8v4"/><path d="M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688A2 2 0 0 1 15.312 22H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z"/>',
+};
+
+/* srgb, not oklch: oklch drags a tone mixed toward transparent down to mud. */
+export const alertBorder = (c: string) => `color-mix(in srgb, ${c} 28%, transparent)`;
+export const alertFill = (c: string) => `color-mix(in srgb, ${c} 9%, transparent)`;
+export const alertIconFill = (c: string) => `color-mix(in srgb, ${c} 16%, transparent)`;
+
+export const ALERT_CLASS =
+	"relative overflow-hidden flex items-start gap-3 rounded-lg border p-3 backdrop-blur-sm";
+export const ALERT_ICON_CLASS =
+	"flex size-8 shrink-0 items-center justify-center rounded-md [&>svg]:size-[18px]";
+export const ALERT_ICON_BG_CLASS =
+	"pointer-events-none absolute -right-3 -bottom-4 [&>svg]:size-28 [&>svg]:[stroke-width:2.5px]";
+export function alertIconBgStyle(color: string): Record<string, string> {
+	return {
+		color,
+		opacity: "0.32",
+		"-webkit-mask-image": "radial-gradient(140% 140% at 100% 100%, #000 45%, transparent 95%)",
+		"mask-image": "radial-gradient(140% 140% at 100% 100%, #000 45%, transparent 95%)",
+	};
+}
+export const ALERT_CONTENT_CLASS = "relative z-10 min-w-0 flex-1";
+export const ALERT_TITLE_CLASS = "font-semibold text-base leading-snug";
+export const ALERT_DESCRIPTION_CLASS =
+	"text-foreground/80 text-sm leading-snug [&:not(:first-child)]:mt-0.5";

package/src/lib/badge-tone.ts

@@ -0,0 +1,4 @@
+export const BADGE_DEFAULT_TONE = "var(--primary)";
+
+export const BADGE_TONE_CLASS =
+	"inline-flex w-fit shrink-0 cursor-default select-none items-center gap-1.5 whitespace-nowrap rounded-full border px-2.5 py-0.5 font-medium text-xs";

package/src/lib/button-variants.ts

@@ -0,0 +1,44 @@
+import { cva } from "cva";
+
+/* Buttons are glass pills on an OPAQUE --card base: a translucent fill goes
+ * muddy over dark heroes/sections. Every class is literal for Tailwind's
+ * scanner. `size: none` is sizeless for callers that own height/padding. */
+export const buttonVariants = cva({
+	base: "inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-full font-medium text-sm outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+	variants: {
+		variant: {
+			default:
+				"glass glass-tint [--glass-text:70%] [--glass-tone:var(--primary)] [--glass-wash:30%] hover:[--glass-edge:color-mix(in_srgb,var(--primary)_60%,transparent)] hover:[--glass-wash:40%]",
+			destructive:
+				"glass glass-tint [--glass-text:61%] [--glass-tone:var(--destructive)] [--glass-wash:30%] focus-visible:ring-destructive/30 hover:[--glass-edge:color-mix(in_srgb,var(--destructive)_60%,transparent)] hover:[--glass-wash:40%]",
+			secondary:
+				"glass glass-tint [--glass-tone:var(--accent)] [--glass-wash:30%] hover:[--glass-edge:color-mix(in_srgb,var(--accent)_60%,transparent)] hover:[--glass-wash:40%]",
+			outline:
+				"glass [--glass-edge:var(--border)] hover:[--glass-base:var(--muted)] dark:[--glass-base:var(--input)] dark:hover:[--glass-base:var(--muted)]",
+			ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50",
+			link: "text-primary underline-offset-4 hover:underline",
+		},
+		size: {
+			default: "h-9 px-4 py-2 has-[>svg]:px-3",
+			sm: "h-8 gap-1.5 px-3 has-[>svg]:px-2.5",
+			lg: "h-10 px-6 has-[>svg]:px-4",
+			icon: "size-9 p-2",
+			none: "",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default",
+	},
+});
+
+// Evaluated once for static/SSR call sites (marketing CTAs, .astro frontmatter)
+// that want a class string without hydrating <Button>. Sizeless: callers add
+// their own height and padding.
+export const BUTTON_DEFAULT_CLASS = buttonVariants({ variant: "default", size: "none" });
+export const BUTTON_OUTLINE_CLASS = buttonVariants({ variant: "outline", size: "none" });
+
+/* Round ghost icon button (copy buttons, small icon actions). Size and text
+ * color stay at the call site. */
+export const ICON_BUTTON_CLASS =
+	"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full transition-all duration-150 hover:bg-primary/10 active:scale-90";

package/src/lib/card-classes.ts

@@ -0,0 +1,37 @@
+const CARD_KNOBS =
+	"glass [--glass-wash:20%] [--glass-rim:0.3] [--glass-lift:0.45] [--glass-shade:0.05] dark:[--glass-shade:0]";
+
+export const CARD_SURFACE_BASE = `${CARD_KNOBS} [--glass-base:color-mix(in_srgb,var(--card)_60%,transparent)]`;
+
+/* Split from the surface so dash's performant-blur engine can gate it off and
+ * paint a precomputed frost instead. */
+export const CARD_BLUR = "backdrop-blur-[var(--glass-blur,24px)] backdrop-saturate-[1.8]";
+
+export const CARD_SURFACE = `${CARD_SURFACE_BASE} ${CARD_BLUR}`;
+
+/* Opaque fill, no blur: for busy/dark backgrounds and transform-animated
+ * contexts where backdrop-blur can't run. */
+export const CARD_SURFACE_OPAQUE = CARD_KNOBS;
+
+/* Recessed track frame (tabs, segmented controls). */
+export const TRACK_SURFACE = "border border-border/50 bg-card/40 backdrop-blur-sm";
+
+export const CARD_PADDING = {
+	slots: "flex flex-col gap-3 py-3 md:gap-4 md:py-4",
+	md: "p-4",
+	sm: "p-3",
+	none: "",
+} as const;
+
+export type CardPadding = keyof typeof CARD_PADDING;
+
+export const CARD_INTERACTIVE =
+	"cursor-pointer transition-colors duration-200 hover:border-border hover:bg-foreground/[0.03] focus-within:border-border";
+
+export const CARD_HEADER_CLASS =
+	"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] md:px-4";
+export const CARD_TITLE_CLASS = "font-semibold leading-none";
+export const CARD_DESCRIPTION_CLASS = "text-muted-foreground text-sm";
+export const CARD_ACTION_CLASS = "col-start-2 row-span-2 row-start-1 self-start justify-self-end";
+export const CARD_CONTENT_CLASS = "px-3 md:px-4";
+export const CARD_FOOTER_CLASS = "flex items-center px-3 md:px-4 [.border-t]:pt-6";

package/src/lib/glass-tone.ts

@@ -0,0 +1,23 @@
+/* Per-tone label contrast: light tones (amber, lime) mix further toward
+ * --foreground so they read as strongly as dark ones. */
+const TONE_L: Record<string, number> = {
+	"var(--primary)": 0.48,
+	"var(--accent)": 0.6,
+	"var(--success)": 0.68,
+	"var(--warning)": 0.76,
+	"var(--destructive)": 0.66,
+	"var(--muted-foreground)": 0.55,
+};
+
+export function toneTextMix(color: string): number {
+	const known = TONE_L[color];
+	const raw = color.match(/oklch\(\s*([0-9.]+)/)?.[1];
+	const l = known ?? (raw ? Number.parseFloat(raw) : 0.6);
+	return Math.min(70, Math.max(46, Math.round(71 - (l - 0.5) * 60)));
+}
+
+/* oklab, not oklch: no hue channel, so a hued tone desaturates toward neutral
+ * instead of swinging toward yellow. */
+export function glassToneText(color: string): string {
+	return `color-mix(in oklab, ${color} ${toneTextMix(color)}%, var(--foreground))`;
+}

package/src/lib/input-classes.ts

@@ -0,0 +1,5 @@
+/* Recessed (concave) glass field. Opaque --input fill: a translucent field
+ * shows whatever sits behind it (worst inside the overlapping Select listbox). */
+export const INPUT_SURFACE = "glass glass-sink [--glass-base:var(--input)] [--glass-light:0.04]";
+
+export const INPUT_CLASS = `flex h-9 w-full min-w-0 rounded-md ${INPUT_SURFACE} px-3 py-1 text-base outline-none transition-[color,box-shadow] selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:font-medium file:text-foreground file:text-sm placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40`;

package/src/lib/logo-lockup.ts

@@ -0,0 +1,49 @@
+/**
+ * The GlassHome lockup spec, pure — shared by the Solid <Logo>, the Astro
+ * <Logo>, and any `.astro` consumer that needs the class strings without
+ * hydrating a component.
+ *
+ * One ratio everywhere (audit L2): the sub-brand line is the dominant element,
+ * the wordmark sits above it as a smaller eyebrow. Sub-line spec (audit L1):
+ * text-primary, uppercase, bold, tracking-[0.18em] — never restyled per
+ * surface, never recolored, and the mark is never stretched or used as an
+ * avatar.
+ */
+
+export type LogoSize = "sm" | "md" | "lg";
+
+export const LOGO_DEFAULT_SRC = "/assets/glasshome_logo.png";
+export const LOGO_DEFAULT_SUB = "Dash";
+export const LOGO_DEFAULT_SIZE: LogoSize = "md";
+
+/** Rendered pixel size of the mark per size, for width/height attrs (CLS). */
+export const LOGO_MARK_PX: Record<LogoSize, number> = {
+	sm: 32,
+	md: 48,
+	lg: 64,
+};
+
+export const LOGO_SIZES: Record<
+	LogoSize,
+	{ mark: string; name: string; sub: string; gap: string }
+> = {
+	sm: { mark: "h-8 w-8", name: "text-xs", sub: "text-base", gap: "gap-1.5" },
+	md: { mark: "h-12 w-12", name: "text-base", sub: "text-2xl", gap: "gap-2" },
+	lg: { mark: "h-16 w-16", name: "text-lg", sub: "text-3xl", gap: "gap-2" },
+};
+
+/**
+ * The stack sits on the mark's baseline (items-end), so the sub-brand line
+ * bottoms out level with the mark rather than floating centred against it.
+ */
+export const LOGO_ROOT_CLASS = "inline-flex items-end";
+/** The two lines are pinned by an explicit gap, never by line-height slack. */
+export const LOGO_STACK_CLASS = "flex flex-col gap-0.5";
+/**
+ * Compose as cn(SIZE, BASE), not cn(BASE, SIZE): tailwind-merge treats a
+ * font-size class as carrying a line-height, so a trailing `text-2xl` would
+ * strip the `leading-none` these rely on.
+ */
+export const LOGO_MARK_CLASS = "shrink-0";
+export const LOGO_NAME_CLASS = "whitespace-nowrap font-bold leading-none tracking-tight";
+export const LOGO_SUB_CLASS = "font-bold text-primary uppercase leading-none tracking-[0.18em]";

package/src/lib/overlay-classes.ts

@@ -0,0 +1,7 @@
+/* Floating-panel glass: opaque popover fill so menus stay legible over anything. */
+export const OVERLAY_SURFACE =
+	"glass [--glass-base:var(--popover)] [--glass-rim:0.3] [--glass-lift:0.55]";
+
+/* Modal scrim behind dialogs/sheets. BottomSheet keeps its own unblurred scrim
+ * (backdrop-blur is too slow on mobile). */
+export const SCRIM_CLASS = "bg-background/70 backdrop-blur-sm";

package/src/lib/section-tokens.ts

@@ -0,0 +1,8 @@
+/* Concentric radius: inner = outer - padding, clamped for tiny --radius themes. */
+export const SECTION_OUTER_RADIUS = "rounded-[var(--radius)]";
+export const SECTION_INNER_RADIUS = "rounded-[max(0px,calc(var(--radius)-0.75rem))]";
+export const SECTION_PADDING = "p-3";
+
+const SECTION_ROW_SURFACE = `${SECTION_INNER_RADIUS} border border-border/60 bg-card/60`;
+
+export const SECTION_ROW_CLASS = `${SECTION_ROW_SURFACE} ${SECTION_PADDING}`;

package/src/lib/tier-badge.ts

@@ -0,0 +1,31 @@
+/* Metallic tier chip: 135deg brushed sweep, bright ends, dip in the middle. */
+
+export const TIER_BADGE_CLASS =
+	"inline-flex cursor-default select-none items-center rounded-full px-2 py-0.5 font-black text-[10px] uppercase tracking-wider";
+
+/** Optional sweep shaping. Default is the symmetric brushed look (both ends
+ *  `hi`, dipping to `lo` at the midpoint). The collectible/license golds are a
+ *  lit bevel instead: they dip early and land on a darker `end`. */
+export interface TierSweep {
+	/** Far end of the sweep. Default: `hi` (symmetric). */
+	end?: string;
+	/** Where `lo` sits, in percent. Default: 50. */
+	stop?: number;
+}
+
+/** Inline style for the metallic pill body. Keys are CSS property names (works
+ *  as a Solid `style` object and, joined, as an Astro `style` string). */
+export function tierBadgeStyle(
+	hi: string,
+	lo: string,
+	text: string,
+	sweep: TierSweep = {},
+): Record<string, string> {
+	const end = sweep.end ?? hi;
+	const stop = sweep.stop ?? 50;
+	return {
+		background: `linear-gradient(135deg, ${hi}, ${lo} ${stop}%, ${end})`,
+		color: text,
+		"box-shadow": "inset 0 1px 0 oklch(1 0 0 / 0.45), 0 1px 2px oklch(0 0 0 / 0.25)",
+	};
+}

package/src/lib/use-is-mobile.ts

@@ -0,0 +1,17 @@
+import { createSignal, onCleanup, onMount } from "solid-js";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function createIsMobile() {
+	const [isMobile, setIsMobile] = createSignal<boolean | undefined>(undefined);
+
+	onMount(() => {
+		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+		const onChange = () => setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		mql.addEventListener("change", onChange);
+		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		onCleanup(() => mql.removeEventListener("change", onChange));
+	});
+
+	return isMobile;
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}