@glyphui/ui 0.4.0 → 0.5.0

package/dist/components/file-upload/file-upload.styles.js

@@ -0,0 +1,32 @@
+"use client";
+import { focusRing, themedBorder, transition } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+//#region src/components/file-upload/file-upload.styles.ts
+const fileUploadStyles = /* @__PURE__ */ tv({ slots: {
+	root: "grid gap-3",
+	dropzone: [
+		"flex w-full cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-dashed border-border-strong bg-subtle px-6 py-8 text-center",
+		themedBorder,
+		transition,
+		focusRing,
+		"hover:border-primary/60 hover:bg-primary/4",
+		"data-[dragging=true]:border-primary data-[dragging=true]:bg-primary/8",
+		"disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger"
+	],
+	icon: "flex size-10 items-center justify-center rounded-md border border-border bg-surface text-muted-foreground shadow-xs [&>svg]:size-5",
+	title: "text-small font-medium text-foreground",
+	highlight: "text-primary-text",
+	hint: "text-caption text-faint-foreground",
+	rejections: "grid gap-1 text-small font-medium text-danger-text",
+	list: "grid gap-2",
+	item: ["grid grid-cols-[auto_1fr_auto] items-center gap-3 rounded-md border-border bg-surface px-3 py-2.5", themedBorder],
+	fileIcon: "flex size-8 items-center justify-center rounded-sm bg-muted text-muted-foreground [&>svg]:size-4",
+	fileText: "grid min-w-0 gap-1",
+	fileName: "truncate text-small font-medium text-foreground",
+	fileMeta: "text-caption tabular-nums text-faint-foreground",
+	fileError: "text-caption font-medium text-danger-text",
+	progress: "h-1 overflow-hidden rounded-pill bg-muted",
+	progressBar: "h-full rounded-pill bg-primary transition-[width] duration-(--glyph-duration-base)"
+} });
+//#endregion
+export { fileUploadStyles };

package/dist/components/file-upload/index.d.ts

@@ -0,0 +1,3 @@
+import { FileItem, FileRejection, FileRejectionReason, FileUpload, FileUploadProps, formatBytes, matchesAccept } from "./file-upload.js";
+import { fileUploadStyles } from "./file-upload.styles.js";
+export { type FileItem, type FileRejection, type FileRejectionReason, FileUpload, type FileUploadProps, fileUploadStyles, formatBytes, matchesAccept };

package/dist/components/grid/grid.d.ts

@@ -0,0 +1,168 @@
+import { VariantProps } from "../../utils/tv.js";
+import { StylesEntry } from "../../utils/registry.js";
+import { ComponentProps } from "react";
+//#region src/components/grid/grid.d.ts
+type Cols = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+type Breakpoint = 'base' | 'sm' | 'md' | 'lg' | 'xl';
+export type GridCols = Cols | Partial<Record<Breakpoint, Cols>>;
+export declare const gridStyles: import("tailwind-variants").TVReturnType<{
+  gap: {
+    0: {
+      base: string;
+    };
+    1: {
+      base: string;
+    };
+    2: {
+      base: string;
+    };
+    3: {
+      base: string;
+    };
+    4: {
+      base: string;
+    };
+    5: {
+      base: string;
+    };
+    6: {
+      base: string;
+    };
+    8: {
+      base: string;
+    };
+    10: {
+      base: string;
+    };
+    12: {
+      base: string;
+    };
+  };
+  align: {
+    start: {
+      base: string;
+    };
+    center: {
+      base: string;
+    };
+    end: {
+      base: string;
+    };
+    stretch: {
+      base: string;
+    };
+  };
+}, {
+  base: string;
+}, undefined, {
+  gap: {
+    0: {
+      base: string;
+    };
+    1: {
+      base: string;
+    };
+    2: {
+      base: string;
+    };
+    3: {
+      base: string;
+    };
+    4: {
+      base: string;
+    };
+    5: {
+      base: string;
+    };
+    6: {
+      base: string;
+    };
+    8: {
+      base: string;
+    };
+    10: {
+      base: string;
+    };
+    12: {
+      base: string;
+    };
+  };
+  align: {
+    start: {
+      base: string;
+    };
+    center: {
+      base: string;
+    };
+    end: {
+      base: string;
+    };
+    stretch: {
+      base: string;
+    };
+  };
+}, {
+  base: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  gap: {
+    0: {
+      base: string;
+    };
+    1: {
+      base: string;
+    };
+    2: {
+      base: string;
+    };
+    3: {
+      base: string;
+    };
+    4: {
+      base: string;
+    };
+    5: {
+      base: string;
+    };
+    6: {
+      base: string;
+    };
+    8: {
+      base: string;
+    };
+    10: {
+      base: string;
+    };
+    12: {
+      base: string;
+    };
+  };
+  align: {
+    start: {
+      base: string;
+    };
+    center: {
+      base: string;
+    };
+    end: {
+      base: string;
+    };
+    stretch: {
+      base: string;
+    };
+  };
+}, {
+  base: string;
+}>>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Grid: StylesEntry<typeof gridStyles>;
+  }
+}
+export interface GridProps extends ComponentProps<'div'>, VariantProps<typeof gridStyles> {
+  /** Column count, or per breakpoint: `{ base: 1, sm: 2, lg: 4 }`. Default 1. */
+  cols?: GridCols;
+  asChild?: boolean;
+}
+/** Responsive equal-width columns with spacing from the scale. */
+export declare function Grid(inProps: GridProps): import("react").JSX.Element;
+//#endregion

package/dist/components/grid/grid.js

@@ -0,0 +1,126 @@
+"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/grid/grid.tsx
+const colClasses = {
+	base: {
+		1: "grid-cols-1",
+		2: "grid-cols-2",
+		3: "grid-cols-3",
+		4: "grid-cols-4",
+		5: "grid-cols-5",
+		6: "grid-cols-6",
+		7: "grid-cols-7",
+		8: "grid-cols-8",
+		9: "grid-cols-9",
+		10: "grid-cols-10",
+		11: "grid-cols-11",
+		12: "grid-cols-12"
+	},
+	sm: {
+		1: "sm:grid-cols-1",
+		2: "sm:grid-cols-2",
+		3: "sm:grid-cols-3",
+		4: "sm:grid-cols-4",
+		5: "sm:grid-cols-5",
+		6: "sm:grid-cols-6",
+		7: "sm:grid-cols-7",
+		8: "sm:grid-cols-8",
+		9: "sm:grid-cols-9",
+		10: "sm:grid-cols-10",
+		11: "sm:grid-cols-11",
+		12: "sm:grid-cols-12"
+	},
+	md: {
+		1: "md:grid-cols-1",
+		2: "md:grid-cols-2",
+		3: "md:grid-cols-3",
+		4: "md:grid-cols-4",
+		5: "md:grid-cols-5",
+		6: "md:grid-cols-6",
+		7: "md:grid-cols-7",
+		8: "md:grid-cols-8",
+		9: "md:grid-cols-9",
+		10: "md:grid-cols-10",
+		11: "md:grid-cols-11",
+		12: "md:grid-cols-12"
+	},
+	lg: {
+		1: "lg:grid-cols-1",
+		2: "lg:grid-cols-2",
+		3: "lg:grid-cols-3",
+		4: "lg:grid-cols-4",
+		5: "lg:grid-cols-5",
+		6: "lg:grid-cols-6",
+		7: "lg:grid-cols-7",
+		8: "lg:grid-cols-8",
+		9: "lg:grid-cols-9",
+		10: "lg:grid-cols-10",
+		11: "lg:grid-cols-11",
+		12: "lg:grid-cols-12"
+	},
+	xl: {
+		1: "xl:grid-cols-1",
+		2: "xl:grid-cols-2",
+		3: "xl:grid-cols-3",
+		4: "xl:grid-cols-4",
+		5: "xl:grid-cols-5",
+		6: "xl:grid-cols-6",
+		7: "xl:grid-cols-7",
+		8: "xl:grid-cols-8",
+		9: "xl:grid-cols-9",
+		10: "xl:grid-cols-10",
+		11: "xl:grid-cols-11",
+		12: "xl:grid-cols-12"
+	}
+};
+function colsToClasses(cols) {
+	if (typeof cols === "number") return colClasses.base[cols];
+	return Object.entries(cols).map(([bp, n]) => colClasses[bp][n]).join(" ");
+}
+const gridStyles = /* @__PURE__ */ tv({
+	slots: { base: "grid" },
+	variants: {
+		gap: {
+			0: { base: "gap-0" },
+			1: { base: "gap-1" },
+			2: { base: "gap-2" },
+			3: { base: "gap-3" },
+			4: { base: "gap-4" },
+			5: { base: "gap-5" },
+			6: { base: "gap-6" },
+			8: { base: "gap-8" },
+			10: { base: "gap-10" },
+			12: { base: "gap-12" }
+		},
+		align: {
+			start: { base: "items-start" },
+			center: { base: "items-center" },
+			end: { base: "items-end" },
+			stretch: { base: "items-stretch" }
+		}
+	},
+	defaultVariants: { gap: 4 }
+});
+/** Responsive equal-width columns with spacing from the scale. */
+function Grid(inProps) {
+	const [props, slots] = useComponentConfig("Grid", inProps);
+	const { cols = 1, gap, align, asChild, className, ...rest } = props;
+	const Comp = asChild ? Slot.Root : "div";
+	return /* @__PURE__ */ jsx(Comp, {
+		"data-slot": "grid",
+		className: gridStyles({
+			gap,
+			align
+		}).base({ class: [
+			colsToClasses(cols),
+			slots.base,
+			className
+		] }),
+		...rest
+	});
+}
+//#endregion
+export { Grid, gridStyles };

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

@@ -0,0 +1,2 @@
+import { Grid, GridCols, GridProps, gridStyles } from "./grid.js";
+export { Grid, type GridCols, type GridProps, gridStyles };

package/dist/components/heading/heading.d.ts

@@ -0,0 +1,12 @@
+import { HeadingVariants } from "./heading.styles.js";
+import { ComponentProps } from "react";
+//#region src/components/heading/heading.d.ts
+type Level = 1 | 2 | 3 | 4 | 5 | 6;
+export interface HeadingProps extends ComponentProps<'h2'>, HeadingVariants {
+  /** Document outline level (h1–h6). Visual size follows it unless `size` is set. */
+  level?: Level;
+  asChild?: boolean;
+}
+/** A heading whose semantic level and visual size are set independently. */
+export declare function Heading(inProps: HeadingProps): import("react").JSX.Element;
+//#endregion

package/dist/components/heading/heading.js

@@ -0,0 +1,28 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { headingStyles } from "./heading.styles.js";
+import { Slot } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/heading/heading.tsx
+const sizeForLevel = {
+	1: "h1",
+	2: "h2",
+	3: "h3",
+	4: "h4",
+	5: "h4",
+	6: "h4"
+};
+/** A heading whose semantic level and visual size are set independently. */
+function Heading(inProps) {
+	const [props, slots] = useComponentConfig("Heading", inProps);
+	const { level = 2, size, asChild, className, ...rest } = props;
+	const s = headingStyles({ size: size ?? sizeForLevel[level] });
+	const Comp = asChild ? Slot.Root : `h${level}`;
+	return /* @__PURE__ */ jsx(Comp, {
+		"data-slot": "heading",
+		className: s.base({ class: [slots.base, className] }),
+		...rest
+	});
+}
+//#endregion
+export { Heading };

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

@@ -0,0 +1,65 @@
+import { VariantProps } from "../../utils/tv.js";
+//#region src/components/heading/heading.styles.d.ts
+export declare const headingStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    display: {
+      base: string;
+    };
+    h1: {
+      base: string;
+    };
+    h2: {
+      base: string;
+    };
+    h3: {
+      base: string;
+    };
+    h4: {
+      base: string;
+    };
+  };
+}, {
+  base: string;
+}, undefined, {
+  size: {
+    display: {
+      base: string;
+    };
+    h1: {
+      base: string;
+    };
+    h2: {
+      base: string;
+    };
+    h3: {
+      base: string;
+    };
+    h4: {
+      base: string;
+    };
+  };
+}, {
+  base: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  size: {
+    display: {
+      base: string;
+    };
+    h1: {
+      base: string;
+    };
+    h2: {
+      base: string;
+    };
+    h3: {
+      base: string;
+    };
+    h4: {
+      base: string;
+    };
+  };
+}, {
+  base: string;
+}>>;
+export type HeadingVariants = VariantProps<typeof headingStyles>;
+//#endregion

package/dist/components/heading/heading.styles.js

@@ -0,0 +1,15 @@
+"use client";
+import { tv } from "../../utils/tv.js";
+//#region src/components/heading/heading.styles.ts
+const headingStyles = /* @__PURE__ */ tv({
+	slots: { base: "font-display text-balance text-foreground" },
+	variants: { size: {
+		display: { base: "text-display" },
+		h1: { base: "text-h1" },
+		h2: { base: "text-h2" },
+		h3: { base: "text-h3" },
+		h4: { base: "text-h4" }
+	} }
+});
+//#endregion
+export { headingStyles };

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

@@ -0,0 +1,3 @@
+import { HeadingVariants, headingStyles } from "./heading.styles.js";
+import { Heading, HeadingProps } from "./heading.js";
+export { Heading, type HeadingProps, type HeadingVariants, headingStyles };

package/dist/components/hover-card/hover-card.d.ts

@@ -0,0 +1,43 @@
+import { StylesEntry } from "../../utils/registry.js";
+import { HoverCard } from "radix-ui";
+import { ComponentProps } from "react";
+//#region src/components/hover-card/hover-card.d.ts
+export declare const hoverCardStyles: import("tailwind-variants").TVReturnType<{
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      content?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {
+  [x: string]: {
+    [x: string]: import("tailwind-variants").ClassValue | {
+      content?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  content: string[];
+}, undefined, {
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      content?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  content: string[];
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+  content: string[];
+}>>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    HoverCard: StylesEntry<typeof hoverCardStyles>;
+  }
+}
+/**
+ * A rich preview shown while hovering or focusing a link, such as a user or repository card.
+ * Sighted mouse users only see it on hover; keep the same information reachable elsewhere.
+ */
+declare const HoverCard$1: import("react").FC<HoverCard.HoverCardProps>;
+export declare const HoverCardTrigger: import("react").ForwardRefExoticComponent<HoverCard.HoverCardTriggerProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export declare function HoverCardContent(inProps: ComponentProps<typeof HoverCard.Content>): import("react").JSX.Element;
+//#endregion
+export { HoverCard$1 as HoverCard };

package/dist/components/hover-card/hover-card.js

@@ -0,0 +1,27 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { popover } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+import { HoverCard } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/hover-card/hover-card.tsx
+const hoverCardStyles = /* @__PURE__ */ tv({ slots: { content: [popover, "origin-(--radix-hover-card-content-transform-origin) w-72 max-w-[calc(100vw-2rem)] p-4 text-small outline-none"] } });
+/**
+* A rich preview shown while hovering or focusing a link, such as a user or repository card.
+* Sighted mouse users only see it on hover; keep the same information reachable elsewhere.
+*/
+const HoverCard$1 = HoverCard.Root;
+const HoverCardTrigger = HoverCard.Trigger;
+function HoverCardContent(inProps) {
+	const [props, slots] = useComponentConfig("HoverCard", inProps);
+	const { sideOffset = 6, align = "center", className, ...rest } = props;
+	return /* @__PURE__ */ jsx(HoverCard.Portal, { children: /* @__PURE__ */ jsx(HoverCard.Content, {
+		"data-slot": "hover-card-content",
+		sideOffset,
+		align,
+		className: hoverCardStyles().content({ class: [slots.content, className] }),
+		...rest
+	}) });
+}
+//#endregion
+export { HoverCard$1 as HoverCard, HoverCardContent, HoverCardTrigger, hoverCardStyles };

package/dist/components/hover-card/index.d.ts

@@ -0,0 +1,2 @@
+import { HoverCard, HoverCardContent, HoverCardTrigger, hoverCardStyles } from "./hover-card.js";
+export { HoverCard, HoverCardContent, HoverCardTrigger, hoverCardStyles };

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

@@ -0,0 +1,3 @@
+import { InputVariants, fieldControl, inputStyles } from "./input.styles.js";
+import { Input, InputProps } from "./input.js";
+export { Input, type InputProps, type InputVariants, fieldControl, inputStyles };

package/dist/components/input/input.d.ts

@@ -0,0 +1,13 @@
+import { InputVariants } from "./input.styles.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/input/input.d.ts
+export interface InputProps extends Omit<ComponentProps<'input'>, 'size' | 'prefix'>, InputVariants {
+  /** Content before the text, e.g. an icon or `https://`. */
+  prefix?: ReactNode;
+  /** Content after the text, e.g. a unit or a Kbd hint. */
+  suffix?: ReactNode;
+  /** Classes for the `<input>` element itself. `className` styles the outer frame. */
+  inputClassName?: string;
+}
+export declare function Input(inProps: InputProps): import("react").JSX.Element;
+//#endregion

package/dist/components/input/input.js

@@ -0,0 +1,33 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { useFieldControl } from "../field/field-context.js";
+import { inputStyles } from "./input.styles.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/input/input.tsx
+function Input(inProps) {
+	const [props, slots] = useComponentConfig("Input", useFieldControl(inProps));
+	const { size, prefix, suffix, className, inputClassName, ...rest } = props;
+	const s = inputStyles({ size });
+	const invalid = rest["aria-invalid"] === true || rest["aria-invalid"] === "true";
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "input",
+		"data-invalid": invalid || void 0,
+		className: s.root({ class: [slots.root, className] }),
+		children: [
+			prefix && /* @__PURE__ */ jsx("span", {
+				className: s.adornment({ class: slots.adornment }),
+				children: prefix
+			}),
+			/* @__PURE__ */ jsx("input", {
+				className: s.input({ class: [slots.input, inputClassName] }),
+				...rest
+			}),
+			suffix && /* @__PURE__ */ jsx("span", {
+				className: s.adornment({ class: slots.adornment }),
+				children: suffix
+			})
+		]
+	});
+}
+//#endregion
+export { Input };

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

@@ -0,0 +1,55 @@
+import { VariantProps } from "../../utils/tv.js";
+//#region src/components/input/input.styles.d.ts
+/** Shared by Input, Textarea and the Select trigger so all fields look alike. */
+export declare const fieldControl: string[];
+export declare const inputStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      root: string;
+    };
+    md: {
+      root: string;
+    };
+    lg: {
+      root: string;
+    };
+  };
+}, {
+  root: string[];
+  input: string;
+  adornment: string;
+}, undefined, {
+  size: {
+    sm: {
+      root: string;
+    };
+    md: {
+      root: string;
+    };
+    lg: {
+      root: string;
+    };
+  };
+}, {
+  root: string[];
+  input: string;
+  adornment: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  size: {
+    sm: {
+      root: string;
+    };
+    md: {
+      root: string;
+    };
+    lg: {
+      root: string;
+    };
+  };
+}, {
+  root: string[];
+  input: string;
+  adornment: string;
+}>>;
+export type InputVariants = VariantProps<typeof inputStyles>;
+//#endregion

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

@@ -0,0 +1,33 @@
+"use client";
+import { themedBorder, transition } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+//#region src/components/input/input.styles.ts
+/** Shared by Input, Textarea and the Select trigger so all fields look alike. */
+const fieldControl = [
+	"w-full rounded-md border-input bg-surface text-foreground shadow-xs",
+	themedBorder,
+	transition,
+	"hover:border-border-strong",
+	"data-invalid:border-danger aria-invalid:border-danger"
+];
+const inputStyles = /* @__PURE__ */ tv({
+	slots: {
+		root: [
+			...fieldControl,
+			"flex items-center gap-2 px-3",
+			"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"
+		],
+		input: "h-full w-full min-w-0 bg-transparent text-foreground outline-none placeholder:text-faint-foreground disabled:cursor-not-allowed",
+		adornment: "flex shrink-0 items-center text-faint-foreground [&>svg]:size-4"
+	},
+	variants: { size: {
+		sm: { root: "h-(--glyph-control-sm) text-small" },
+		md: { root: "h-(--glyph-control-md) text-small" },
+		lg: { root: "h-(--glyph-control-lg) text-body" }
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { fieldControl, inputStyles };

package/dist/components/input-otp/index.d.ts

@@ -0,0 +1,4 @@
+import { InputOTPVariants, inputOtpStyles } from "./input-otp.styles.js";
+import { InputOTP, InputOTPGroup, InputOTPProps, InputOTPSeparator, InputOTPSlot, InputOTPSlotProps } from "./input-otp.js";
+import { REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp";
+export { InputOTP, InputOTPGroup, type InputOTPProps, InputOTPSeparator, InputOTPSlot, type InputOTPSlotProps, type InputOTPVariants, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS, inputOtpStyles };