@glyphui/ui 0.1.1 → 0.2.0

package/README.md

@@ -2,7 +2,7 @@
 
 React components on Tailwind CSS v4 that take their whole look from **one typed theme file**, with the parts every app rebuilds already solved: forms, data tables, app layout, and loading / empty / error states.
 
-[Live showcase](https://khalmohak.github.io/glyph/) · [GitHub](https://github.com/khalmohak/glyph) · [Changelog](https://github.com/khalmohak/glyph/blob/main/packages/ui/CHANGELOG.md)
+[Docs](https://khalmohak.github.io/glyph/) · [Components](https://khalmohak.github.io/glyph/components) · [Showcase](https://khalmohak.github.io/glyph/showcase/) · [GitHub](https://github.com/khalmohak/glyph) · [Changelog](https://github.com/khalmohak/glyph/blob/main/packages/ui/CHANGELOG.md)
 
 ## Install
 

package/dist/data-table.js

@@ -1,6 +1,6 @@
 "use client";
-import { E as tv, O as useComponentConfig, S as focusRing, _ as Button, a as ArrowUpIcon, c as ChevronLeftIcon, h as SearchIcon, i as ArrowDownIcon, l as ChevronRightIcon, u as ChevronsUpDownIcon, v as IconButton, w as themedBorder } from "./field-context-B8cYheXz.js";
-import { a as Table, c as TableCell, d as TableRow, h as Input, l as TableHead, n as ErrorState, o as TableBody, p as Skeleton, t as EmptyState, u as TableHeader, v as Checkbox } from "./states-BxPjCUxz.js";
+import { E as SearchIcon, O as useComponentConfig, b as ChevronRightIcon, c as tv, f as themedBorder, g as ArrowUpIcon, h as ArrowDownIcon, i as IconButton, r as Button, u as focusRing, x as ChevronsUpDownIcon, y as ChevronLeftIcon } from "./field-context-B6WOcK5m.js";
+import { a as Table, c as TableCell, d as TableRow, h as Input, l as TableHead, n as ErrorState, o as TableBody, p as Skeleton, t as EmptyState, u as TableHeader, v as Checkbox } from "./states-Rp8wZ_jH.js";
 import { useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createColumnHelper, flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";

package/dist/{field-DXZD0l8w.js → field-CCecIzdq.js}

@@ -1,5 +1,5 @@
 "use client";
-import { E as tv, O as useComponentConfig, t as FieldContext } from "./field-context-B8cYheXz.js";
+import { O as useComponentConfig, c as tv, t as FieldContext } from "./field-context-B6WOcK5m.js";
 import { Label } from "radix-ui";
 import { useId, useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/{field-context-B8cYheXz.js → field-context-B6WOcK5m.js}

@@ -2,8 +2,8 @@
 import { textTokens } from "@glyphui/tokens";
 import { Slot } from "radix-ui";
 import { Fragment, createContext, useContext } from "react";
-import { createTV } from "tailwind-variants";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { createTV } from "tailwind-variants";
 //#region src/provider/glyph-context.ts
 const GlyphContext = createContext(null);
 /** The active theme and app-level settings. Must be used under `GlyphProvider`. */
@@ -35,6 +35,102 @@ function useComponentConfig(name, props) {
 	return [merged, override.className ?? {}];
 }
 //#endregion
+//#region src/internal/icons.tsx
+function Icon({ children, ...props }) {
+	return /* @__PURE__ */ jsx("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "16",
+		height: "16",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children
+	});
+}
+const CheckIcon = (p) => /* @__PURE__ */ jsx(Icon, {
+	...p,
+	children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+});
+const MinusIcon = (p) => /* @__PURE__ */ jsx(Icon, {
+	...p,
+	children: /* @__PURE__ */ jsx("path", { d: "M5 12h14" })
+});
+const ChevronDownIcon = (p) => /* @__PURE__ */ jsx(Icon, {
+	...p,
+	children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+});
+const ChevronLeftIcon = (p) => /* @__PURE__ */ jsx(Icon, {
+	...p,
+	children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" })
+});
+const ChevronRightIcon = (p) => /* @__PURE__ */ jsx(Icon, {
+	...p,
+	children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+});
+const ArrowUpIcon = (p) => /* @__PURE__ */ jsx(Icon, {
+	...p,
+	children: /* @__PURE__ */ jsx("path", { d: "m5 12 7-7 7 7M12 19V5" })
+});
+const ArrowDownIcon = (p) => /* @__PURE__ */ jsx(Icon, {
+	...p,
+	children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M19 12l-7 7-7-7" })
+});
+const ChevronsUpDownIcon = (p) => /* @__PURE__ */ jsx(Icon, {
+	...p,
+	children: /* @__PURE__ */ jsx("path", { d: "m7 15 5 5 5-5M7 9l5-5 5 5" })
+});
+const XIcon = (p) => /* @__PURE__ */ jsx(Icon, {
+	...p,
+	children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+});
+const MenuIcon = (p) => /* @__PURE__ */ jsx(Icon, {
+	...p,
+	children: /* @__PURE__ */ jsx("path", { d: "M4 6h16M4 12h16M4 18h16" })
+});
+const PanelLeftIcon = (p) => /* @__PURE__ */ jsxs(Icon, {
+	...p,
+	children: [/* @__PURE__ */ jsx("rect", {
+		width: "18",
+		height: "18",
+		x: "3",
+		y: "3",
+		rx: "2"
+	}), /* @__PURE__ */ jsx("path", { d: "M9 3v18" })]
+});
+const SearchIcon = (p) => /* @__PURE__ */ jsxs(Icon, {
+	...p,
+	children: [/* @__PURE__ */ jsx("circle", {
+		cx: "11",
+		cy: "11",
+		r: "7"
+	}), /* @__PURE__ */ jsx("path", { d: "m20 20-3.5-3.5" })]
+});
+const InboxIcon = (p) => /* @__PURE__ */ jsxs(Icon, {
+	...p,
+	children: [/* @__PURE__ */ jsx("path", { d: "M22 12h-6l-2 3h-4l-2-3H2" }), /* @__PURE__ */ jsx("path", { d: "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" })]
+});
+const AlertIcon = (p) => /* @__PURE__ */ jsxs(Icon, {
+	...p,
+	children: [/* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "12",
+		r: "10"
+	}), /* @__PURE__ */ jsx("path", { d: "M12 8v4M12 16h.01" })]
+});
+//#endregion
+//#region src/utils/styles.ts
+/** Shared class fragments. Kept as literals so Tailwind's scanner picks them up. */
+const focusRing = "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background";
+const themedBorder = "border-(length:--glyph-border-width)";
+const transition = "transition-[color,background-color,border-color,box-shadow,transform,opacity] duration-(--glyph-duration-base) ease-standard";
+/** Popover surfaces: Select, Tooltip-like menus. */
+const popover = "z-50 overflow-hidden rounded-[min(var(--radius-md),var(--radius-lg))] border-(length:--glyph-border-width) border-border bg-raised text-foreground shadow-lg animate-pop-in";
+//#endregion
 //#region src/utils/tw-merge-config.ts
 /**
 * Teaches tailwind-merge about Glyph's custom utilities so `cn('text-h1', 'text-small')`
@@ -49,14 +145,6 @@ const twMergeConfig = { extend: { theme: {
 /** `tailwind-variants` preconfigured with Glyph's merge rules. All component styles use this. */
 const tv = createTV({ twMergeConfig });
 //#endregion
-//#region src/utils/styles.ts
-/** Shared class fragments. Kept as literals so Tailwind's scanner picks them up. */
-const focusRing = "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background";
-const themedBorder = "border-(length:--glyph-border-width)";
-const transition = "transition-[color,background-color,border-color,box-shadow,transform,opacity] duration-(--glyph-duration-base) ease-standard";
-/** Popover surfaces: Select, Tooltip-like menus. */
-const popover = "z-50 overflow-hidden rounded-[min(var(--radius-md),var(--radius-lg))] border-(length:--glyph-border-width) border-border bg-raised text-foreground shadow-lg animate-pop-in";
-//#endregion
 //#region src/components/spinner/spinner.styles.ts
 const spinnerStyles = tv({
 	slots: {
@@ -189,7 +277,7 @@ function Button(inProps) {
 			disabled: disabled || loading
 		},
 		...rest,
-		children: iconOnly ? icon(loading ? /* @__PURE__ */ jsx(Spinner, { size: size === "lg" ? "md" : "sm" }) : children) : [
+		children: iconOnly && asChild ? children : iconOnly ? icon(loading ? /* @__PURE__ */ jsx(Spinner, { size: size === "lg" ? "md" : "sm" }) : children) : [
 			/* @__PURE__ */ jsx(Fragment, { children: icon(loading ? /* @__PURE__ */ jsx(Spinner, { size: "sm" }) : leftIcon) }, "start"),
 			/* @__PURE__ */ jsx(Slot.Slottable, { children }, "content"),
 			/* @__PURE__ */ jsx(Fragment, { children: icon(rightIcon) }, "end")
@@ -206,94 +294,6 @@ function IconButton({ icon, variant = "ghost", ...props }) {
 	});
 }
 //#endregion
-//#region src/internal/icons.tsx
-function Icon({ children, ...props }) {
-	return /* @__PURE__ */ jsx("svg", {
-		xmlns: "http://www.w3.org/2000/svg",
-		width: "16",
-		height: "16",
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: "2",
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		"aria-hidden": "true",
-		...props,
-		children
-	});
-}
-const CheckIcon = (p) => /* @__PURE__ */ jsx(Icon, {
-	...p,
-	children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
-});
-const MinusIcon = (p) => /* @__PURE__ */ jsx(Icon, {
-	...p,
-	children: /* @__PURE__ */ jsx("path", { d: "M5 12h14" })
-});
-const ChevronDownIcon = (p) => /* @__PURE__ */ jsx(Icon, {
-	...p,
-	children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
-});
-const ChevronLeftIcon = (p) => /* @__PURE__ */ jsx(Icon, {
-	...p,
-	children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" })
-});
-const ChevronRightIcon = (p) => /* @__PURE__ */ jsx(Icon, {
-	...p,
-	children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
-});
-const ArrowUpIcon = (p) => /* @__PURE__ */ jsx(Icon, {
-	...p,
-	children: /* @__PURE__ */ jsx("path", { d: "m5 12 7-7 7 7M12 19V5" })
-});
-const ArrowDownIcon = (p) => /* @__PURE__ */ jsx(Icon, {
-	...p,
-	children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M19 12l-7 7-7-7" })
-});
-const ChevronsUpDownIcon = (p) => /* @__PURE__ */ jsx(Icon, {
-	...p,
-	children: /* @__PURE__ */ jsx("path", { d: "m7 15 5 5 5-5M7 9l5-5 5 5" })
-});
-const XIcon = (p) => /* @__PURE__ */ jsx(Icon, {
-	...p,
-	children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
-});
-const MenuIcon = (p) => /* @__PURE__ */ jsx(Icon, {
-	...p,
-	children: /* @__PURE__ */ jsx("path", { d: "M4 6h16M4 12h16M4 18h16" })
-});
-const PanelLeftIcon = (p) => /* @__PURE__ */ jsxs(Icon, {
-	...p,
-	children: [/* @__PURE__ */ jsx("rect", {
-		width: "18",
-		height: "18",
-		x: "3",
-		y: "3",
-		rx: "2"
-	}), /* @__PURE__ */ jsx("path", { d: "M9 3v18" })]
-});
-const SearchIcon = (p) => /* @__PURE__ */ jsxs(Icon, {
-	...p,
-	children: [/* @__PURE__ */ jsx("circle", {
-		cx: "11",
-		cy: "11",
-		r: "7"
-	}), /* @__PURE__ */ jsx("path", { d: "m20 20-3.5-3.5" })]
-});
-const InboxIcon = (p) => /* @__PURE__ */ jsxs(Icon, {
-	...p,
-	children: [/* @__PURE__ */ jsx("path", { d: "M22 12h-6l-2 3h-4l-2-3H2" }), /* @__PURE__ */ jsx("path", { d: "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" })]
-});
-const AlertIcon = (p) => /* @__PURE__ */ jsxs(Icon, {
-	...p,
-	children: [/* @__PURE__ */ jsx("circle", {
-		cx: "12",
-		cy: "12",
-		r: "10"
-	}), /* @__PURE__ */ jsx("path", { d: "M12 8v4M12 16h.01" })]
-});
-//#endregion
 //#region src/components/field/field-context.ts
 const FieldContext = createContext(null);
 /**
@@ -318,4 +318,4 @@ function useFieldControl(props) {
 	};
 }
 //#endregion
-export { useGlyph as A, popover as C, twMergeConfig as D, tv as E, useComponentConfig as O, focusRing as S, transition as T, Button as _, ArrowUpIcon as a, Spinner as b, ChevronLeftIcon as c, InboxIcon as d, MenuIcon as f, XIcon as g, SearchIcon as h, ArrowDownIcon as i, useLinkComponent as j, GlyphContext as k, ChevronRightIcon as l, PanelLeftIcon as m, useFieldControl as n, CheckIcon as o, MinusIcon as p, AlertIcon as r, ChevronDownIcon as s, FieldContext as t, ChevronsUpDownIcon as u, IconButton as v, themedBorder as w, spinnerStyles as x, buttonStyles as y };
+export { useGlyph as A, MenuIcon as C, XIcon as D, SearchIcon as E, useComponentConfig as O, InboxIcon as S, PanelLeftIcon as T, CheckIcon as _, buttonStyles as a, ChevronRightIcon as b, tv as c, popover as d, themedBorder as f, ArrowUpIcon as g, ArrowDownIcon as h, IconButton as i, useLinkComponent as j, GlyphContext as k, twMergeConfig as l, AlertIcon as m, useFieldControl as n, Spinner as o, transition as p, Button as r, spinnerStyles as s, FieldContext as t, focusRing as u, ChevronDownIcon as v, MinusIcon as w, ChevronsUpDownIcon as x, ChevronLeftIcon as y };

package/dist/form.js

@@ -1,6 +1,6 @@
 "use client";
-import { E as tv, _ as Button, r as AlertIcon } from "./field-context-B8cYheXz.js";
-import { t as Field } from "./field-DXZD0l8w.js";
+import { c as tv, m as AlertIcon, r as Button } from "./field-context-B6WOcK5m.js";
+import { t as Field } from "./field-CCecIzdq.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
 import { Controller, FormProvider, useForm as useForm$1, useFormState } from "react-hook-form";