@glyphui/ui 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Mohak Gupta
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,138 @@
-# Temporary Holding Version
+# @glyphui/ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+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)
+
+## Install
+
+```sh
+npm install @glyphui/ui
+# optional: the form and data-table patterns
+npm install react-hook-form @hookform/resolvers zod @tanstack/react-table
+```
+
+Requires React 19 and Tailwind CSS 4.1 or later.
+
+## Set up
+
+```css
+/* index.css */
+@import "tailwindcss";
+@import "@glyphui/ui/styles.css";
+```
+
+```tsx
+// main.tsx
+import { GlyphProvider, presets } from '@glyphui/ui'
+
+createRoot(document.getElementById('root')!).render(
+  <GlyphProvider theme={presets.glyph} defaultMode="system">
+    <App />
+  </GlyphProvider>,
+)
+```
+
+To avoid a light flash for dark-mode visitors, run `getColorModeScript()` in `<head>`, or render `<ColorModeScript />` with an SSR framework.
+
+## Your theme, in one file
+
+```ts
+// glyph.theme.ts
+import { defineTheme, presets } from '@glyphui/ui'
+
+export default defineTheme({
+  name: 'acme',
+  extends: presets.glyph, // glyph · brutalist · editorial · playful
+  colors: {
+    light: { primary: 'oklch(55% 0.2 30)' },
+    dark: { primary: 'oklch(70% 0.19 45)' },
+  },
+  radius: { md: '6px', lg: '10px' },
+  font: { sans: '"Inter Variable", system-ui, sans-serif' },
+  components: {
+    Button: { defaultVariants: { size: 'lg' }, className: { base: 'tracking-tight' } },
+  },
+})
+```
+
+A theme controls:
+- colors, separately for light and dark
+- a nine-step type scale (size, line height, tracking, weight)
+- radius, shadows, border width, motion and control height
+- defaults and extra classes for each component
+
+Everything is type-checked. A Button size or Card part that doesn't exist is a compile error.
+
+The same tokens work in your own markup: `bg-primary`, `text-muted-foreground`, `rounded-lg`, `shadow-md`, `text-h2`, `font-display`.
+
+## Components
+
+`Button` · `IconButton` · `Badge` · `Card` · `Heading` · `Text` · `Eyebrow` · `Kbd` · `Avatar` · `Separator` · `Skeleton` · `Spinner` · `Label` · `Field` · `Input` · `Textarea` · `Checkbox` · `Switch` · `Select` · `SegmentedControl` · `Tabs` · `Tooltip` · `Table` · `Container` · `Section` · `Stack` · `ThemeScope`
+
+Accessible behavior comes from [Radix UI](https://www.radix-ui.com/). Every component accepts `className`, and most accept `asChild`.
+
+## Patterns
+
+### Layout
+
+```tsx
+import { AppShell, Sidebar, SidebarContent, SidebarItem, PageHeader } from '@glyphui/ui'
+
+<AppShell sidebar={<Sidebar><SidebarContent>
+  <SidebarItem href="/inbox" icon={<Inbox />} badge={3} active>Inbox</SidebarItem>
+</SidebarContent></Sidebar>}>
+  <PageHeader title="Inbox" actions={<Button>New</Button>} />
+</AppShell>
+```
+
+The sidebar collapses to an icon strip on desktop and opens as a focus-trapped drawer on mobile. `Navbar` builds a responsive site header from `links` data. To use your router's link component, pass it to `GlyphProvider`: `linkComponent={RouterLink}`.
+
+### Forms: `@glyphui/ui/form`
+
+```tsx
+import { Form, FormField, FormSubmit, useForm } from '@glyphui/ui/form'
+
+const form = useForm({ schema, defaultValues: { email: '' } }) // zod, valibot, arktype...
+
+<Form form={form} onSubmit={async (values) => {
+  const res = await api.signup(values)
+  if (res.taken) return { errors: { email: 'Already registered' } }
+}}>
+  <FormField control={form.control} name="email" label="Email">
+    {(field) => <Input {...field} />}
+  </FormField>
+  <FormSubmit>Sign up</FormSubmit>
+</Form>
+```
+
+Field names are checked against the schema. Server errors you return appear on their fields. If `onSubmit` throws, the error appears above the form in `<FormError />`.
+
+### Data tables: `@glyphui/ui/data-table`
+
+```tsx
+import { createColumnHelper, DataTable } from '@glyphui/ui/data-table'
+
+const col = createColumnHelper<Invoice>()
+const columns = [
+  col.accessor('number', { header: 'Invoice' }),
+  col.accessor('total', { header: 'Total', meta: { align: 'right' } }),
+]
+
+<DataTable data={invoices} columns={columns} loading={isLoading} error={error}
+  onRetry={refetch} search selectable pageSize={20} />
+```
+
+Includes sorting, search, row selection and pages, plus loading, empty, no-results and error states.
+
+### Async states
+
+```tsx
+<Async result={useQuery({ queryKey: ['projects'], queryFn })}>
+  {(projects) => <ProjectList projects={projects} />}
+</Async>
+```
+
+## License
+
+MIT

package/dist/data-table.d.ts

@@ -0,0 +1,110 @@
+import { t as VariantProps } from "./tv-DuMh7UH2.js";
+import { t as StylesEntry } from "./registry-BGSJoiLq.js";
+import { ReactNode } from "react";
+import { ColumnDef, ColumnDef as ColumnDef$1, RowData, SortingState, SortingState as SortingState$1, createColumnHelper } from "@tanstack/react-table";
+//#region src/patterns/data-table/data-table.d.ts
+declare module '@tanstack/react-table' {
+  interface ColumnMeta<TData extends RowData, TValue> {
+    /** Cell and header alignment. Use `right` for numbers. */
+    align?: 'left' | 'center' | 'right';
+    /** Extra classes for this column's cells. */
+    className?: string;
+  }
+}
+export declare const dataTableStyles: import("tailwind-variants").TVReturnType<{
+  variant: {
+    card: {
+      root: string[];
+      toolbar: string;
+      footer: string;
+    };
+    plain: {
+      root: string;
+    };
+  };
+}, {
+  root: string;
+  toolbar: string;
+  search: string;
+  actions: string;
+  sortButton: string[];
+  footer: string;
+  pager: string;
+}, undefined, {
+  variant: {
+    card: {
+      root: string[];
+      toolbar: string;
+      footer: string;
+    };
+    plain: {
+      root: string;
+    };
+  };
+}, {
+  root: string;
+  toolbar: string;
+  search: string;
+  actions: string;
+  sortButton: string[];
+  footer: string;
+  pager: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  variant: {
+    card: {
+      root: string[];
+      toolbar: string;
+      footer: string;
+    };
+    plain: {
+      root: string;
+    };
+  };
+}, {
+  root: string;
+  toolbar: string;
+  search: string;
+  actions: string;
+  sortButton: string[];
+  footer: string;
+  pager: string;
+}>>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    DataTable: StylesEntry<typeof dataTableStyles>;
+  }
+}
+interface DataTableProps<T> extends VariantProps<typeof dataTableStyles> {
+  data: T[] | undefined;
+  /** Build with `createColumnHelper<T>()` for typed accessors. */
+  columns: ColumnDef$1<T, any>[];
+  /** Shows skeleton rows. */
+  loading?: boolean;
+  /** Shows an error state with a retry button when `onRetry` is set. */
+  error?: unknown;
+  onRetry?: () => unknown;
+  getRowId?: (row: T, index: number) => string;
+  /** Rows per page, or `false` to show every row. Default 10. */
+  pageSize?: number | false;
+  /** Adds a checkbox column. */
+  selectable?: boolean;
+  onSelectionChange?: (rows: T[]) => void;
+  /** Adds a search box that filters across all columns. */
+  search?: boolean | {
+    placeholder?: string;
+  };
+  /** Extra controls at the end of the toolbar (filters, buttons). */
+  toolbar?: ReactNode;
+  /** Shown when there are no rows at all (not when a search matches nothing). */
+  empty?: ReactNode;
+  initialSorting?: SortingState$1;
+  'aria-label'?: string;
+  className?: string;
+}
+/**
+ * A table with sorting, search, pagination and row selection, plus built-in loading,
+ * empty, no-results and error states. Columns are typed from your row type.
+ */
+export declare function DataTable<T>(inProps: DataTableProps<T>): import("react").JSX.Element;
+//#endregion
+export { type ColumnDef, type DataTableProps, type SortingState, createColumnHelper };

package/dist/data-table.js

@@ -0,0 +1,225 @@
+"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 { useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createColumnHelper, flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+//#region src/patterns/data-table/data-table.tsx
+const dataTableStyles = tv({
+	slots: {
+		root: "flex min-w-0 flex-col",
+		toolbar: "flex flex-wrap items-center gap-2",
+		search: "w-full sm:max-w-64",
+		actions: "ml-auto flex items-center gap-2",
+		sortButton: ["-ml-1.5 inline-flex cursor-pointer items-center gap-1 rounded-xs px-1.5 py-1 hover:text-foreground [&>svg]:size-3.5", focusRing],
+		footer: "flex flex-wrap items-center justify-between gap-3 text-small text-muted-foreground tabular-nums",
+		pager: "flex items-center gap-1"
+	},
+	variants: { variant: {
+		card: {
+			root: ["overflow-hidden rounded-lg border-border bg-surface shadow-sm", themedBorder],
+			toolbar: "border-b border-border p-3",
+			footer: "border-t border-border px-4 py-2.5"
+		},
+		plain: { root: "gap-3" }
+	} },
+	defaultVariants: { variant: "card" }
+});
+const alignClass = {
+	left: "text-left",
+	center: "text-center",
+	right: "text-right"
+};
+const NO_ROWS = [];
+function selectColumn() {
+	return {
+		id: "__select",
+		enableSorting: false,
+		enableGlobalFilter: false,
+		header: ({ table }) => /* @__PURE__ */ jsx(Checkbox, {
+			className: "mt-0",
+			"aria-label": "Select all rows on this page",
+			checked: table.getIsAllPageRowsSelected() ? true : table.getIsSomePageRowsSelected() ? "indeterminate" : false,
+			onCheckedChange: (value) => table.toggleAllPageRowsSelected(value === true)
+		}),
+		cell: ({ row }) => /* @__PURE__ */ jsx(Checkbox, {
+			className: "mt-0",
+			"aria-label": "Select row",
+			checked: row.getIsSelected(),
+			disabled: !row.getCanSelect(),
+			onCheckedChange: (value) => row.toggleSelected(value === true)
+		})
+	};
+}
+/**
+* A table with sorting, search, pagination and row selection, plus built-in loading,
+* empty, no-results and error states. Columns are typed from your row type.
+*/
+function DataTable(inProps) {
+	const [props, slots] = useComponentConfig("DataTable", inProps);
+	const { data, columns, loading = false, error, onRetry, getRowId, pageSize = 10, selectable = false, onSelectionChange, search = false, toolbar, empty, initialSorting = [], variant, className, "aria-label": ariaLabel } = props;
+	const [sorting, setSorting] = useState(initialSorting);
+	const [rowSelection, setRowSelection] = useState({});
+	const [globalFilter, setGlobalFilter] = useState("");
+	const allColumns = useMemo(() => selectable ? [selectColumn(), ...columns] : columns, [selectable, columns]);
+	const table = useReactTable({
+		data: data ?? NO_ROWS,
+		columns: allColumns,
+		state: {
+			sorting,
+			rowSelection,
+			globalFilter
+		},
+		onSortingChange: setSorting,
+		onRowSelectionChange: setRowSelection,
+		onGlobalFilterChange: setGlobalFilter,
+		enableRowSelection: selectable,
+		sortDescFirst: false,
+		getCoreRowModel: getCoreRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+		getFilteredRowModel: getFilteredRowModel(),
+		...getRowId && { getRowId },
+		...pageSize !== false && {
+			getPaginationRowModel: getPaginationRowModel(),
+			initialState: { pagination: {
+				pageIndex: 0,
+				pageSize
+			} }
+		}
+	});
+	useEffect(() => {
+		onSelectionChange?.(table.getSelectedRowModel().rows.map((row) => row.original));
+	}, [rowSelection]);
+	const s = dataTableStyles({ variant });
+	const columnCount = table.getVisibleLeafColumns().length;
+	const rows = table.getRowModel().rows;
+	const filteredTotal = table.getFilteredRowModel().rows.length;
+	const selectedCount = Object.keys(rowSelection).length;
+	const { pageIndex, pageSize: size } = table.getState().pagination;
+	const showFooter = pageSize !== false && !loading && !error && filteredTotal > 0;
+	const searchPlaceholder = typeof search === "object" ? search.placeholder : void 0;
+	const fullWidthRow = (content) => /* @__PURE__ */ jsx(TableRow, {
+		className: "hover:bg-transparent",
+		children: /* @__PURE__ */ jsx(TableCell, {
+			colSpan: columnCount,
+			className: "p-0",
+			children: content
+		})
+	});
+	let body;
+	if (loading) body = Array.from({ length: pageSize === false ? 5 : Math.min(pageSize, 8) }, (_, i) => /* @__PURE__ */ jsx(TableRow, {
+		className: "hover:bg-transparent",
+		children: table.getVisibleLeafColumns().map((column) => /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: column.id === "__select" ? "size-4" : "h-4 w-[70%]" }) }, column.id))
+	}, i));
+	else if (error) body = fullWidthRow(/* @__PURE__ */ jsx(ErrorState, {
+		error,
+		onRetry
+	}));
+	else if (rows.length === 0) body = fullWidthRow(globalFilter ? /* @__PURE__ */ jsx(EmptyState, {
+		icon: /* @__PURE__ */ jsx(SearchIcon, {}),
+		title: `No results for “${globalFilter}”`,
+		description: "Check the spelling or try a shorter search.",
+		action: /* @__PURE__ */ jsx(Button, {
+			variant: "outline",
+			size: "sm",
+			onClick: () => setGlobalFilter(""),
+			children: "Clear search"
+		})
+	}) : empty ?? /* @__PURE__ */ jsx(EmptyState, { title: "No rows yet" }));
+	else body = rows.map((row) => /* @__PURE__ */ jsx(TableRow, {
+		"data-state": row.getIsSelected() ? "selected" : void 0,
+		children: row.getVisibleCells().map((cell) => {
+			const meta = cell.column.columnDef.meta;
+			return /* @__PURE__ */ jsx(TableCell, {
+				className: [alignClass[meta?.align ?? "left"], meta?.className].join(" "),
+				children: flexRender(cell.column.columnDef.cell, cell.getContext())
+			}, cell.id);
+		})
+	}, row.id));
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "data-table",
+		className: s.root({ class: [slots.root, className] }),
+		children: [
+			(search || toolbar) && /* @__PURE__ */ jsxs("div", {
+				className: s.toolbar({ class: slots.toolbar }),
+				children: [search && /* @__PURE__ */ jsx(Input, {
+					size: "sm",
+					type: "search",
+					"aria-label": "Search rows",
+					placeholder: searchPlaceholder ?? "Search…",
+					prefix: /* @__PURE__ */ jsx(SearchIcon, {}),
+					value: globalFilter,
+					onChange: (event) => {
+						setGlobalFilter(event.target.value);
+						table.setPageIndex(0);
+					},
+					className: s.search({ class: slots.search })
+				}), toolbar && /* @__PURE__ */ jsx("div", {
+					className: s.actions({ class: slots.actions }),
+					children: toolbar
+				})]
+			}),
+			/* @__PURE__ */ jsxs(Table, {
+				"aria-label": ariaLabel,
+				"aria-busy": loading || void 0,
+				children: [/* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((group) => /* @__PURE__ */ jsx(TableRow, {
+					className: "hover:bg-transparent",
+					children: group.headers.map((header) => {
+						const column = header.column;
+						const sorted = column.getIsSorted();
+						const align = column.columnDef.meta?.align ?? "left";
+						const label = header.isPlaceholder ? null : flexRender(column.columnDef.header, header.getContext());
+						return /* @__PURE__ */ jsx(TableHead, {
+							className: alignClass[align],
+							"aria-sort": sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : void 0,
+							children: column.getCanSort() && !header.isPlaceholder ? /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								onClick: column.getToggleSortingHandler(),
+								className: s.sortButton({ class: [slots.sortButton, align === "right" && "flex-row-reverse"] }),
+								children: [label, sorted === "asc" ? /* @__PURE__ */ jsx(ArrowUpIcon, {}) : sorted === "desc" ? /* @__PURE__ */ jsx(ArrowDownIcon, {}) : /* @__PURE__ */ jsx(ChevronsUpDownIcon, { className: "opacity-40" })]
+							}) : label
+						}, header.id);
+					})
+				}, group.id)) }), /* @__PURE__ */ jsx(TableBody, { children: body })]
+			}),
+			showFooter && /* @__PURE__ */ jsxs("div", {
+				className: s.footer({ class: slots.footer }),
+				children: [/* @__PURE__ */ jsxs("p", { children: [
+					pageIndex * size + 1,
+					"–",
+					Math.min((pageIndex + 1) * size, filteredTotal),
+					" of",
+					" ",
+					filteredTotal,
+					selectedCount > 0 && /* @__PURE__ */ jsxs("span", {
+						className: "text-foreground",
+						children: [
+							" · ",
+							selectedCount,
+							" selected"
+						]
+					})
+				] }), /* @__PURE__ */ jsxs("div", {
+					className: s.pager({ class: slots.pager }),
+					children: [/* @__PURE__ */ jsx(IconButton, {
+						variant: "outline",
+						size: "sm",
+						icon: /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
+						"aria-label": "Previous page",
+						disabled: !table.getCanPreviousPage(),
+						onClick: () => table.previousPage()
+					}), /* @__PURE__ */ jsx(IconButton, {
+						variant: "outline",
+						size: "sm",
+						icon: /* @__PURE__ */ jsx(ChevronRightIcon, {}),
+						"aria-label": "Next page",
+						disabled: !table.getCanNextPage(),
+						onClick: () => table.nextPage()
+					})]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { DataTable, createColumnHelper, dataTableStyles };

package/dist/field-DXZD0l8w.js

@@ -0,0 +1,107 @@
+"use client";
+import { E as tv, O as useComponentConfig, t as FieldContext } from "./field-context-B8cYheXz.js";
+import { Label } from "radix-ui";
+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
+* 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.
+*/
+function Field(inProps) {
+	const [props, slots] = useComponentConfig("Field", inProps);
+	const { label, description, error, required = false, disabled = false, controlId, orientation, className, children, ...rest } = props;
+	const generated = useId();
+	const id = controlId ?? generated;
+	const invalid = Boolean(error);
+	const descriptionId = description ? `${id}-description` : void 0;
+	const errorId = invalid ? `${id}-error` : void 0;
+	const s = fieldStyles({ orientation });
+	const context = useMemo(() => ({
+		id,
+		descriptionId,
+		errorId,
+		invalid,
+		required,
+		disabled
+	}), [
+		id,
+		descriptionId,
+		errorId,
+		invalid,
+		required,
+		disabled
+	]);
+	const labelNode = label ? /* @__PURE__ */ jsxs(Label$1, {
+		htmlFor: id,
+		className: s.label({ class: slots.label }),
+		children: [label, required && /* @__PURE__ */ jsx("span", {
+			className: s.required({ class: slots.required }),
+			"aria-hidden": "true",
+			children: "*"
+		})]
+	}) : null;
+	const messages = /* @__PURE__ */ jsxs(Fragment$1, { children: [description && /* @__PURE__ */ jsx("p", {
+		id: descriptionId,
+		"data-slot": "field-description",
+		className: s.description({ class: slots.description }),
+		children: description
+	}), invalid && /* @__PURE__ */ jsx("p", {
+		id: errorId,
+		"data-slot": "field-error",
+		className: s.error({ class: slots.error }),
+		children: error
+	})] });
+	return /* @__PURE__ */ jsx(FieldContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "field",
+			"data-invalid": invalid || void 0,
+			"data-disabled": disabled || void 0,
+			className: s.root({ class: [slots.root, className] }),
+			...rest,
+			children: orientation === "horizontal" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [children, /* @__PURE__ */ jsxs("div", {
+				"data-slot": "field-text",
+				className: s.text({ class: slots.text }),
+				children: [labelNode, messages]
+			})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				labelNode,
+				children,
+				messages
+			] })
+		})
+	});
+}
+//#endregion
+export { labelStyles as i, fieldStyles as n, Label$1 as r, Field as t };