@glyphui/ui 0.3.0 → 0.5.0

package/dist/components/field/field-context.d.ts

@@ -0,0 +1,25 @@
+//#region src/components/field/field-context.d.ts
+export interface FieldContextValue {
+  id: string;
+  /** Id of the visible label, for controls labelled by reference (aria-labelledby). */
+  labelId: string | undefined;
+  descriptionId: string | undefined;
+  errorId: string | undefined;
+  invalid: boolean;
+  required: boolean;
+  disabled: boolean;
+}
+export declare const FieldContext: import("react").Context<FieldContextValue | null>;
+interface ControlProps {
+  id?: string | undefined;
+  disabled?: boolean | undefined;
+  required?: boolean | undefined;
+  'aria-describedby'?: string | undefined;
+  'aria-invalid'?: boolean | 'true' | 'false' | 'grammar' | 'spelling' | undefined;
+}
+/**
+ * Connects a form control to the surrounding `Field`: id for the label, `aria-describedby`
+ * for description and error, `aria-invalid`, `required`, `disabled`. Props passed directly win.
+ */
+export declare function useFieldControl<P extends ControlProps>(props: P): P;
+//#endregion

package/dist/components/field/field-context.js

@@ -0,0 +1,27 @@
+"use client";
+import { createContext, useContext } from "react";
+//#region src/components/field/field-context.ts
+const FieldContext = createContext(null);
+/**
+* Connects a form control to the surrounding `Field`: id for the label, `aria-describedby`
+* for description and error, `aria-invalid`, `required`, `disabled`. Props passed directly win.
+*/
+function useFieldControl(props) {
+	const field = useContext(FieldContext);
+	if (!field) return props;
+	const describedBy = [
+		field.descriptionId,
+		field.errorId,
+		props["aria-describedby"]
+	].filter(Boolean).join(" ");
+	return {
+		...props,
+		id: props.id ?? field.id,
+		disabled: props.disabled ?? (field.disabled || void 0),
+		required: props.required ?? (field.required || void 0),
+		"aria-describedby": describedBy || void 0,
+		"aria-invalid": props["aria-invalid"] ?? (field.invalid || void 0)
+	};
+}
+//#endregion
+export { FieldContext, useFieldControl };

package/dist/components/field/field.d.ts

@@ -0,0 +1,28 @@
+import { FieldVariants } from "./field.styles.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/field/field.d.ts
+export interface FieldProps extends Omit<ComponentProps<'div'>, 'children'>, FieldVariants {
+  label?: ReactNode;
+  /**
+   * Shown at the end of the label row, outside the label, so it is not part of the
+   * control's accessible name. For example a "Forgot password?" link.
+   */
+  labelAction?: ReactNode;
+  description?: ReactNode;
+  /** Error message. Marks the control invalid and is announced to screen readers. */
+  error?: ReactNode;
+  required?: boolean;
+  disabled?: boolean;
+  /** Id for the control. Generated when omitted. */
+  controlId?: string;
+  children: ReactNode;
+}
+/**
+ * Wraps one form control with its label, description and error, and wires the ARIA
+ * attributes between them. Controls inside (Input, Select, Checkbox, ...) pick this up.
+ *
+ * `orientation="horizontal"` puts the control first with text beside it, for checkboxes
+ * and switches.
+ */
+export declare function Field(inProps: FieldProps): import("react").JSX.Element;
+//#endregion

package/dist/{field-CWZ_FdkD.js → components/field/field.js}

@@ -1,37 +1,10 @@
 "use client";
-import { s as useComponentConfig, t as tv } from "./tv-DBAGlgXJ.js";
-import { t as FieldContext } from "./field-context-anGPYXbW.js";
-import { Label } from "radix-ui";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { FieldContext } from "./field-context.js";
+import { Label } from "../label/label.js";
+import { fieldStyles } from "./field.styles.js";
 import { useId, useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/label/label.tsx
-const labelStyles = tv({ slots: { base: "inline-flex select-none items-center gap-1 text-small font-medium text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-60" } });
-function Label$1(inProps) {
-	const [{ className, ...rest }, slots] = useComponentConfig("Label", inProps);
-	return /* @__PURE__ */ jsx(Label.Root, {
-		"data-slot": "label",
-		className: labelStyles().base({ class: [slots.base, className] }),
-		...rest
-	});
-}
-//#endregion
-//#region src/components/field/field.styles.ts
-const fieldStyles = tv({
-	slots: {
-		root: "grid gap-1.5",
-		label: "",
-		required: "text-danger",
-		text: "grid gap-0.5",
-		description: "text-small text-faint-foreground",
-		error: "text-small font-medium text-danger"
-	},
-	variants: { orientation: {
-		vertical: {},
-		horizontal: { root: "grid-cols-[auto_1fr] items-start gap-x-3 [&>[data-slot=field-text]]:col-start-2" }
-	} },
-	defaultVariants: { orientation: "vertical" }
-});
-//#endregion
 //#region src/components/field/field.tsx
 /**
 * Wraps one form control with its label, description and error, and wires the ARIA
@@ -42,15 +15,17 @@ const fieldStyles = tv({
 */
 function Field(inProps) {
 	const [props, slots] = useComponentConfig("Field", inProps);
-	const { label, description, error, required = false, disabled = false, controlId, orientation, className, children, ...rest } = props;
+	const { label, labelAction, description, error, required = false, disabled = false, controlId, orientation, className, children, ...rest } = props;
 	const generated = useId();
 	const id = controlId ?? generated;
 	const invalid = Boolean(error);
+	const labelId = label ? `${id}-label` : void 0;
 	const descriptionId = description ? `${id}-description` : void 0;
 	const errorId = invalid ? `${id}-error` : void 0;
 	const s = fieldStyles({ orientation });
 	const context = useMemo(() => ({
 		id,
+		labelId,
 		descriptionId,
 		errorId,
 		invalid,
@@ -58,13 +33,15 @@ function Field(inProps) {
 		disabled
 	}), [
 		id,
+		labelId,
 		descriptionId,
 		errorId,
 		invalid,
 		required,
 		disabled
 	]);
-	const labelNode = label ? /* @__PURE__ */ jsxs(Label$1, {
+	const labelElement = label ? /* @__PURE__ */ jsxs(Label, {
+		id: labelId,
 		htmlFor: id,
 		className: s.label({ class: slots.label }),
 		children: [label, required && /* @__PURE__ */ jsx("span", {
@@ -73,6 +50,15 @@ function Field(inProps) {
 			children: "*"
 		})]
 	}) : null;
+	const labelNode = labelElement && labelAction ? /* @__PURE__ */ jsxs("div", {
+		"data-slot": "field-label-row",
+		className: s.labelRow({ class: slots.labelRow }),
+		children: [labelElement, /* @__PURE__ */ jsx("span", {
+			"data-slot": "field-label-action",
+			className: s.labelAction({ class: slots.labelAction }),
+			children: labelAction
+		})]
+	}) : labelElement;
 	const messages = /* @__PURE__ */ jsxs(Fragment$1, { children: [description && /* @__PURE__ */ jsx("p", {
 		id: descriptionId,
 		"data-slot": "field-description",
@@ -105,4 +91,4 @@ function Field(inProps) {
 	});
 }
 //#endregion
-export { labelStyles as i, fieldStyles as n, Label$1 as r, Field as t };
+export { Field };

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

@@ -0,0 +1,53 @@
+import { VariantProps } from "../../utils/tv.js";
+//#region src/components/field/field.styles.d.ts
+export declare const fieldStyles: import("tailwind-variants").TVReturnType<{
+  orientation: {
+    vertical: {};
+    horizontal: {
+      root: string;
+    };
+  };
+}, {
+  root: string;
+  label: string;
+  labelRow: string;
+  labelAction: string;
+  required: string;
+  text: string;
+  description: string;
+  error: string;
+}, undefined, {
+  orientation: {
+    vertical: {};
+    horizontal: {
+      root: string;
+    };
+  };
+}, {
+  root: string;
+  label: string;
+  labelRow: string;
+  labelAction: string;
+  required: string;
+  text: string;
+  description: string;
+  error: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  orientation: {
+    vertical: {};
+    horizontal: {
+      root: string;
+    };
+  };
+}, {
+  root: string;
+  label: string;
+  labelRow: string;
+  labelAction: string;
+  required: string;
+  text: string;
+  description: string;
+  error: string;
+}>>;
+export type FieldVariants = VariantProps<typeof fieldStyles>;
+//#endregion

package/dist/components/field/field.styles.js

@@ -0,0 +1,22 @@
+"use client";
+import { tv } from "../../utils/tv.js";
+//#region src/components/field/field.styles.ts
+const fieldStyles = /* @__PURE__ */ tv({
+	slots: {
+		root: "grid gap-1.5",
+		label: "",
+		labelRow: "flex items-center justify-between gap-2",
+		labelAction: "text-small",
+		required: "text-danger-text",
+		text: "grid gap-0.5",
+		description: "text-small text-faint-foreground",
+		error: "text-small font-medium text-danger-text"
+	},
+	variants: { orientation: {
+		vertical: {},
+		horizontal: { root: "grid-cols-[auto_1fr] items-start gap-x-3 [&>[data-slot=field-text]]:col-start-2" }
+	} },
+	defaultVariants: { orientation: "vertical" }
+});
+//#endregion
+export { fieldStyles };

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

@@ -0,0 +1,4 @@
+import { FieldVariants, fieldStyles } from "./field.styles.js";
+import { Field, FieldProps } from "./field.js";
+import { FieldContext, FieldContextValue, useFieldControl } from "./field-context.js";
+export { Field, FieldContext, type FieldContextValue, type FieldProps, type FieldVariants, fieldStyles, useFieldControl };

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

@@ -0,0 +1,52 @@
+import { ReactNode } from "react";
+//#region src/components/file-upload/file-upload.d.ts
+export interface FileItem {
+  /** Stable id for keys and updates. Generated when files are added. */
+  id: string;
+  file: File;
+  /** Upload progress, 0–100. Shows a bar while below 100. */
+  progress?: number;
+  /** Shown under the file name, e.g. "Upload failed". */
+  error?: string;
+}
+export type FileRejectionReason = 'too-large' | 'wrong-type' | 'too-many';
+export interface FileRejection {
+  file: File;
+  reason: FileRejectionReason;
+  message: string;
+}
+/** Formats bytes for people: 1 KB = 1024 bytes. */
+export declare function formatBytes(bytes: number): string;
+/** Matches a file against an `accept` string like `"image/*,.pdf,application/zip"`. */
+export declare function matchesAccept(file: File, accept: string | undefined): boolean;
+export interface FileUploadProps {
+  files?: FileItem[];
+  defaultFiles?: FileItem[];
+  onFilesChange?: (files: FileItem[]) => void;
+  /** Called with files that were not added and why. */
+  onReject?: (rejections: FileRejection[]) => void;
+  /** Allowed types, as for `<input type="file" accept>`. */
+  accept?: string;
+  /** Maximum size per file, in bytes. */
+  maxSize?: number;
+  /** Maximum number of files in the list. */
+  maxFiles?: number;
+  /** Allow several files. Default true. */
+  multiple?: boolean;
+  disabled?: boolean;
+  /** Main dropzone text. */
+  label?: ReactNode;
+  /** Secondary dropzone text. Defaults to a summary of `accept` and `maxSize`. */
+  hint?: ReactNode;
+  id?: string;
+  className?: string;
+  'aria-describedby'?: string;
+  'aria-invalid'?: boolean;
+}
+/**
+ * Drag-and-drop or click to choose files, with type, size and count checks and a file
+ * list. It does no uploading: you get `File` objects and can set `progress` and `error`
+ * on each item while your own code uploads them.
+ */
+export declare function FileUpload(inProps: FileUploadProps): import("react").JSX.Element;
+//#endregion

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

@@ -0,0 +1,266 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { IconButton } from "../button/button.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 { fileUploadStyles } from "./file-upload.styles.js";
+import { useId, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/file-upload/file-upload.tsx
+/** Formats bytes for people: 1 KB = 1024 bytes. */
+function formatBytes(bytes) {
+	if (bytes < 1024) return `${bytes} B`;
+	const units = [
+		"KB",
+		"MB",
+		"GB",
+		"TB"
+	];
+	let value = bytes / 1024;
+	let unit = 0;
+	while (value >= 1024 && unit < units.length - 1) {
+		value /= 1024;
+		unit++;
+	}
+	return `${value >= 10 ? Math.round(value) : value.toFixed(1)} ${units[unit]}`;
+}
+/** Matches a file against an `accept` string like `"image/*,.pdf,application/zip"`. */
+function matchesAccept(file, accept) {
+	if (!accept) return true;
+	const name = file.name.toLowerCase();
+	const type = file.type.toLowerCase();
+	return accept.split(",").map((rule) => rule.trim().toLowerCase()).filter(Boolean).some((rule) => {
+		if (rule.startsWith(".")) return name.endsWith(rule);
+		if (rule.endsWith("/*")) return type.startsWith(rule.slice(0, -1));
+		return type === rule;
+	});
+}
+let counter = 0;
+const newId = () => `file-${Date.now().toString(36)}-${(counter++).toString(36)}`;
+function UploadIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ jsx("path", { d: "M12 16V4M7 9l5-5 5 5" }), /* @__PURE__ */ jsx("path", { d: "M20 16v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2" })]
+	});
+}
+function FileIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" }), /* @__PURE__ */ jsx("path", { d: "M14 2v6h6" })]
+	});
+}
+function XIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+	});
+}
+/**
+* Drag-and-drop or click to choose files, with type, size and count checks and a file
+* list. It does no uploading: you get `File` objects and can set `progress` and `error`
+* on each item while your own code uploads them.
+*/
+function FileUpload(inProps) {
+	const [props, slots] = useComponentConfig("FileUpload", useFieldControl(inProps));
+	const { files: filesProp, defaultFiles = [], onFilesChange, onReject, accept, maxSize, maxFiles, multiple = true, disabled, label, hint, id, className, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid } = props;
+	const [files, setFiles] = useControllableState({
+		value: filesProp,
+		defaultValue: defaultFiles,
+		onChange: onFilesChange
+	});
+	const [dragging, setDragging] = useState(false);
+	const [rejections, setRejections] = useState([]);
+	const inputRef = useRef(null);
+	const hintId = useId();
+	const rejectionsId = useId();
+	const s = fileUploadStyles();
+	const limit = multiple ? maxFiles ?? Number.POSITIVE_INFINITY : 1;
+	const full = files.length >= limit;
+	const addFiles = (incoming) => {
+		const accepted = [];
+		const rejected = [];
+		let room = limit - (multiple ? files.length : 0);
+		for (const file of incoming) if (!matchesAccept(file, accept)) rejected.push({
+			file,
+			reason: "wrong-type",
+			message: `${file.name} isn't an allowed file type.`
+		});
+		else if (maxSize !== void 0 && file.size > maxSize) rejected.push({
+			file,
+			reason: "too-large",
+			message: `${file.name} is too large (${formatBytes(file.size)}). The limit is ${formatBytes(maxSize)}.`
+		});
+		else if (room <= 0) rejected.push({
+			file,
+			reason: "too-many",
+			message: `${file.name} wasn't added: the limit is ${limit} file${limit === 1 ? "" : "s"}.`
+		});
+		else {
+			accepted.push({
+				id: newId(),
+				file
+			});
+			room--;
+		}
+		if (accepted.length > 0) setFiles(multiple ? [...files, ...accepted] : accepted);
+		setRejections(rejected);
+		if (rejected.length > 0) onReject?.(rejected);
+	};
+	const onDrop = (event) => {
+		event.preventDefault();
+		setDragging(false);
+		if (disabled) return;
+		addFiles(Array.from(event.dataTransfer.files));
+	};
+	const defaultHint = [
+		accept ? `Accepted: ${accept.split(",").map((a) => a.trim()).join(", ")}` : null,
+		maxSize !== void 0 ? `up to ${formatBytes(maxSize)} each` : null,
+		multiple && maxFiles !== void 0 ? `max ${maxFiles} files` : null
+	].filter(Boolean).join(" · ");
+	const describedBy = [
+		ariaDescribedBy,
+		hintId,
+		rejections.length > 0 ? rejectionsId : void 0
+	].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "file-upload",
+		className: s.root({ class: [slots.root, className] }),
+		children: [
+			/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				id,
+				"data-dragging": dragging,
+				disabled: disabled || full,
+				"aria-describedby": describedBy,
+				"aria-invalid": ariaInvalid,
+				className: s.dropzone({ class: slots.dropzone }),
+				onClick: () => inputRef.current?.click(),
+				onDragEnter: (event) => {
+					event.preventDefault();
+					if (!disabled) setDragging(true);
+				},
+				onDragOver: (event) => event.preventDefault(),
+				onDragLeave: (event) => {
+					if (!event.currentTarget.contains(event.relatedTarget)) setDragging(false);
+				},
+				onDrop,
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: s.icon({ class: slots.icon }),
+						children: /* @__PURE__ */ jsx(UploadIcon, {})
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: s.title({ class: slots.title }),
+						children: label ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+							"Drop ",
+							multiple ? "files" : "a file",
+							" here or",
+							" ",
+							/* @__PURE__ */ jsx("span", {
+								className: s.highlight({ class: slots.highlight }),
+								children: "browse"
+							})
+						] })
+					}),
+					/* @__PURE__ */ jsx("span", {
+						id: hintId,
+						className: s.hint({ class: slots.hint }),
+						children: full ? "File limit reached. Remove a file to add another." : hint ?? defaultHint
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("input", {
+				ref: inputRef,
+				type: "file",
+				tabIndex: -1,
+				"aria-hidden": "true",
+				className: "sr-only",
+				accept,
+				multiple,
+				disabled,
+				onChange: (event) => {
+					addFiles(Array.from(event.target.files ?? []));
+					event.target.value = "";
+				}
+			}),
+			rejections.length > 0 && /* @__PURE__ */ jsx("ul", {
+				id: rejectionsId,
+				role: "alert",
+				className: s.rejections({ class: slots.rejections }),
+				children: rejections.map((r) => /* @__PURE__ */ jsx("li", { children: r.message }, `${r.file.name}-${r.reason}`))
+			}),
+			files.length > 0 && /* @__PURE__ */ jsx("ul", {
+				className: s.list({ class: slots.list }),
+				"aria-label": "Selected files",
+				children: /* @__PURE__ */ jsx(PresenceList, { children: files.map((item) => /* @__PURE__ */ jsxs(PresenceItem, {
+					"data-slot": "file-upload-item",
+					className: s.item({ class: slots.item }),
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: s.fileIcon({ class: slots.fileIcon }),
+							children: /* @__PURE__ */ jsx(FileIcon, {})
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: s.fileText({ class: slots.fileText }),
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									className: s.fileName({ class: slots.fileName }),
+									children: item.file.name
+								}),
+								item.error ? /* @__PURE__ */ jsx("span", {
+									className: s.fileError({ class: slots.fileError }),
+									children: item.error
+								}) : /* @__PURE__ */ jsxs("span", {
+									className: s.fileMeta({ class: slots.fileMeta }),
+									children: [formatBytes(item.file.size), item.progress !== void 0 && item.progress < 100 && ` · ${Math.round(item.progress)}%`]
+								}),
+								item.progress !== void 0 && item.progress < 100 && !item.error && /* @__PURE__ */ jsx("span", {
+									role: "progressbar",
+									"aria-label": `Uploading ${item.file.name}`,
+									"aria-valuemin": 0,
+									"aria-valuemax": 100,
+									"aria-valuenow": Math.round(item.progress),
+									className: s.progress({ class: slots.progress }),
+									children: /* @__PURE__ */ jsx("span", {
+										className: s.progressBar({ class: slots.progressBar }),
+										style: { width: `${Math.max(0, Math.min(100, item.progress))}%` }
+									})
+								})
+							]
+						}),
+						/* @__PURE__ */ jsx(IconButton, {
+							size: "sm",
+							icon: /* @__PURE__ */ jsx(XIcon, {}),
+							"aria-label": `Remove ${item.file.name}`,
+							disabled,
+							onClick: () => {
+								setFiles(files.filter((f) => f.id !== item.id));
+								setRejections([]);
+							}
+						})
+					]
+				}, item.id)) })
+			})
+		]
+	});
+}
+//#endregion
+export { FileUpload, formatBytes, matchesAccept };