@glyphui/ui 0.4.0 → 0.5.0

package/dist/components/table/table.d.ts

@@ -0,0 +1,78 @@
+import { ComponentProps } from "react";
+//#region src/components/table/table.d.ts
+export declare const tableStyles: import("tailwind-variants").TVReturnType<{
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      caption?: import("tailwind-variants").ClassValue;
+      table?: import("tailwind-variants").ClassValue;
+      header?: import("tailwind-variants").ClassValue;
+      body?: import("tailwind-variants").ClassValue;
+      wrapper?: import("tailwind-variants").ClassValue;
+      row?: import("tailwind-variants").ClassValue;
+      head?: import("tailwind-variants").ClassValue;
+      cell?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {
+  [x: string]: {
+    [x: string]: import("tailwind-variants").ClassValue | {
+      caption?: import("tailwind-variants").ClassValue;
+      table?: import("tailwind-variants").ClassValue;
+      header?: import("tailwind-variants").ClassValue;
+      body?: import("tailwind-variants").ClassValue;
+      wrapper?: import("tailwind-variants").ClassValue;
+      row?: import("tailwind-variants").ClassValue;
+      head?: import("tailwind-variants").ClassValue;
+      cell?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  wrapper: string;
+  table: string;
+  header: string;
+  body: string;
+  row: string;
+  head: string;
+  cell: string;
+  caption: string;
+}, undefined, {
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      caption?: import("tailwind-variants").ClassValue;
+      table?: import("tailwind-variants").ClassValue;
+      header?: import("tailwind-variants").ClassValue;
+      body?: import("tailwind-variants").ClassValue;
+      wrapper?: import("tailwind-variants").ClassValue;
+      row?: import("tailwind-variants").ClassValue;
+      head?: import("tailwind-variants").ClassValue;
+      cell?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  wrapper: string;
+  table: string;
+  header: string;
+  body: string;
+  row: string;
+  head: string;
+  cell: string;
+  caption: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+  wrapper: string;
+  table: string;
+  header: string;
+  body: string;
+  row: string;
+  head: string;
+  cell: string;
+  caption: string;
+}>>;
+/** Semantic table primitives styled by the theme. For sorting and pagination use DataTable. */
+export declare function Table({ className, ...props }: ComponentProps<'table'>): import("react").JSX.Element;
+export declare function TableHeader({ className, ...props }: ComponentProps<'thead'>): import("react").JSX.Element;
+export declare function TableBody({ className, ...props }: ComponentProps<'tbody'>): import("react").JSX.Element;
+export declare function TableRow({ className, ...props }: ComponentProps<'tr'>): import("react").JSX.Element;
+export declare function TableHead({ className, ...props }: ComponentProps<'th'>): import("react").JSX.Element;
+export declare function TableCell({ className, ...props }: ComponentProps<'td'>): import("react").JSX.Element;
+export declare function TableCaption({ className, ...props }: ComponentProps<'caption'>): import("react").JSX.Element;
+//#endregion

package/dist/components/table/table.js

@@ -0,0 +1,82 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { tv } from "../../utils/tv.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/table/table.tsx
+const tableStyles = /* @__PURE__ */ tv({ slots: {
+	wrapper: "relative w-full overflow-x-auto",
+	table: "w-full caption-bottom border-collapse text-small tabular-nums",
+	header: "[&_tr]:border-b [&_tr]:border-border",
+	body: "[&_tr:last-child]:border-0",
+	row: "border-b border-border transition-colors duration-(--glyph-duration-fast) hover:bg-muted/50 data-[state=selected]:bg-primary/6",
+	head: "h-10 whitespace-nowrap px-3 first:pl-4 last:pr-4 text-left align-middle text-caption font-medium text-muted-foreground [&:has([role=checkbox])]:w-10 [&:has([role=checkbox])]:pr-0",
+	cell: "px-3 py-2.5 align-middle first:pl-4 last:pr-4 [&:has([role=checkbox])]:pr-0",
+	caption: "mt-3 text-small text-faint-foreground"
+} });
+const s = tableStyles();
+function useSlots() {
+	return useComponentConfig("Table", {})[1];
+}
+/** Semantic table primitives styled by the theme. For sorting and pagination use DataTable. */
+function Table({ className, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "table-wrapper",
+		className: s.wrapper({ class: slots.wrapper }),
+		children: /* @__PURE__ */ jsx("table", {
+			"data-slot": "table",
+			className: s.table({ class: [slots.table, className] }),
+			...props
+		})
+	});
+}
+function TableHeader({ className, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx("thead", {
+		"data-slot": "table-header",
+		className: s.header({ class: [slots.header, className] }),
+		...props
+	});
+}
+function TableBody({ className, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx("tbody", {
+		"data-slot": "table-body",
+		className: s.body({ class: [slots.body, className] }),
+		...props
+	});
+}
+function TableRow({ className, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx("tr", {
+		"data-slot": "table-row",
+		className: s.row({ class: [slots.row, className] }),
+		...props
+	});
+}
+function TableHead({ className, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx("th", {
+		"data-slot": "table-head",
+		className: s.head({ class: [slots.head, className] }),
+		...props
+	});
+}
+function TableCell({ className, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx("td", {
+		"data-slot": "table-cell",
+		className: s.cell({ class: [slots.cell, className] }),
+		...props
+	});
+}
+function TableCaption({ className, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx("caption", {
+		"data-slot": "table-caption",
+		className: s.caption({ class: [slots.caption, className] }),
+		...props
+	});
+}
+//#endregion
+export { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, tableStyles };

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

@@ -0,0 +1,2 @@
+import { Tabs, TabsContent, TabsList, TabsProps, TabsTrigger, tabsStyles } from "./tabs.js";
+export { Tabs, TabsContent, TabsList, type TabsProps, TabsTrigger, tabsStyles };

package/dist/components/tabs/tabs.d.ts

@@ -0,0 +1,73 @@
+import { VariantProps } from "../../utils/tv.js";
+import { Tabs } from "radix-ui";
+import { ComponentProps } from "react";
+//#region src/components/tabs/tabs.d.ts
+export declare const tabsStyles: import("tailwind-variants").TVReturnType<{
+  variant: {
+    underline: {
+      list: string;
+      trigger: string;
+      indicator: string;
+    };
+    pill: {
+      list: string[];
+      trigger: string;
+      indicator: string;
+    };
+  };
+}, {
+  root: string;
+  list: string;
+  trigger: string[];
+  /** Slides to the active tab. Underline bar or pill background, by variant. */
+  indicator: string;
+  content: string;
+}, undefined, {
+  variant: {
+    underline: {
+      list: string;
+      trigger: string;
+      indicator: string;
+    };
+    pill: {
+      list: string[];
+      trigger: string;
+      indicator: string;
+    };
+  };
+}, {
+  root: string;
+  list: string;
+  trigger: string[];
+  /** Slides to the active tab. Underline bar or pill background, by variant. */
+  indicator: string;
+  content: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  variant: {
+    underline: {
+      list: string;
+      trigger: string;
+      indicator: string;
+    };
+    pill: {
+      list: string[];
+      trigger: string;
+      indicator: string;
+    };
+  };
+}, {
+  root: string;
+  list: string;
+  trigger: string[];
+  /** Slides to the active tab. Underline bar or pill background, by variant. */
+  indicator: string;
+  content: string;
+}>>;
+type TabsVariants = VariantProps<typeof tabsStyles>;
+export interface TabsProps extends ComponentProps<typeof Tabs.Root>, TabsVariants {}
+declare function Tabs$1(inProps: TabsProps): import("react").JSX.Element;
+export declare function TabsList({ className, ...props }: ComponentProps<typeof Tabs.List>): import("react").JSX.Element;
+export declare function TabsTrigger({ className, children, ...props }: ComponentProps<typeof Tabs.Trigger>): import("react").JSX.Element;
+export declare function TabsContent({ className, ...props }: ComponentProps<typeof Tabs.Content>): import("react").JSX.Element;
+//#endregion
+export { Tabs$1 as Tabs };

package/dist/components/tabs/tabs.js

@@ -0,0 +1,103 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { focusRing, themedBorder, transition } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { ActiveIndicator } from "../../motion/active-indicator.js";
+import { Tabs } from "radix-ui";
+import { createContext, useContext, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/tabs/tabs.tsx
+const tabsStyles = /* @__PURE__ */ tv({
+	slots: {
+		root: "flex flex-col gap-4",
+		list: "isolate flex items-center",
+		trigger: [
+			"relative inline-flex cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap text-small font-medium text-muted-foreground",
+			transition,
+			focusRing,
+			"hover:text-foreground data-[state=active]:text-foreground disabled:pointer-events-none disabled:opacity-50",
+			"[&>svg]:size-4"
+		],
+		/** Slides to the active tab. Underline bar or pill background, by variant. */
+		indicator: "pointer-events-none absolute",
+		content: "outline-none"
+	},
+	variants: { variant: {
+		underline: {
+			list: "gap-5 border-b border-border",
+			trigger: "h-9",
+			indicator: "inset-x-0 -bottom-px h-0.5 rounded-pill bg-foreground"
+		},
+		pill: {
+			list: ["inline-flex w-fit gap-0.5 rounded-md border-border bg-muted p-0.5", themedBorder],
+			trigger: "h-7 rounded-[calc(var(--radius-md)-2px)] px-3",
+			indicator: "inset-0 -z-10 rounded-[calc(var(--radius-md)-2px)] bg-raised shadow-xs"
+		}
+	} },
+	defaultVariants: { variant: "underline" }
+});
+const TabsContext = createContext({});
+function Tabs$1(inProps) {
+	const [props, slots] = useComponentConfig("Tabs", inProps);
+	const { variant, className, value: valueProp, defaultValue, onValueChange, ...rest } = props;
+	const [value, setValue] = useControllableState({
+		value: valueProp,
+		defaultValue: defaultValue ?? "",
+		onChange: onValueChange
+	});
+	const indicatorId = `${useId()}-tabs-indicator`;
+	return /* @__PURE__ */ jsx(TabsContext.Provider, {
+		value: {
+			variant,
+			value,
+			indicatorId
+		},
+		children: /* @__PURE__ */ jsx(Tabs.Root, {
+			"data-slot": "tabs",
+			className: tabsStyles({ variant }).root({ class: [slots.root, className] }),
+			value,
+			onValueChange: setValue,
+			...rest
+		})
+	});
+}
+function useTabsParts() {
+	const context = useContext(TabsContext);
+	const [, slots] = useComponentConfig("Tabs", {});
+	return {
+		s: tabsStyles({ variant: context.variant }),
+		slots,
+		context
+	};
+}
+function TabsList({ className, ...props }) {
+	const { s, slots } = useTabsParts();
+	return /* @__PURE__ */ jsx(Tabs.List, {
+		"data-slot": "tabs-list",
+		className: s.list({ class: [slots.list, className] }),
+		...props
+	});
+}
+function TabsTrigger({ className, children, ...props }) {
+	const { s, slots, context } = useTabsParts();
+	return /* @__PURE__ */ jsxs(Tabs.Trigger, {
+		"data-slot": "tabs-trigger",
+		className: s.trigger({ class: [slots.trigger, className] }),
+		...props,
+		children: [children, context.indicatorId && context.value === props.value && /* @__PURE__ */ jsx(ActiveIndicator, {
+			layoutId: context.indicatorId,
+			className: s.indicator({ class: slots.indicator })
+		})]
+	});
+}
+function TabsContent({ className, ...props }) {
+	const { s, slots } = useTabsParts();
+	return /* @__PURE__ */ jsx(Tabs.Content, {
+		"data-slot": "tabs-content",
+		className: s.content({ class: [slots.content, className] }),
+		...props
+	});
+}
+//#endregion
+export { Tabs$1 as Tabs, TabsContent, TabsList, TabsTrigger, tabsStyles };

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

@@ -0,0 +1,3 @@
+import { TagInputVariants, tagInputStyles } from "./tag-input.styles.js";
+import { TagInput, TagInputProps } from "./tag-input.js";
+export { TagInput, type TagInputProps, type TagInputVariants, tagInputStyles };

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

@@ -0,0 +1,30 @@
+import { TagInputVariants } from "./tag-input.styles.js";
+//#region src/components/tag-input/tag-input.d.ts
+export interface TagInputProps extends TagInputVariants {
+  value?: string[];
+  defaultValue?: string[];
+  onValueChange?: (tags: string[]) => void;
+  placeholder?: string;
+  /** Stop accepting tags after this many. */
+  maxTags?: number;
+  /** Return an error message to reject a tag, or `true` to accept it. */
+  validate?: (tag: string, tags: readonly string[]) => string | true;
+  /** Allow the same tag more than once. Default false. */
+  allowDuplicates?: boolean;
+  /** Keys (besides Enter) that turn the typed text into a tag. Default `[',']`. */
+  separators?: readonly string[];
+  disabled?: boolean;
+  /** Submits each tag as its own hidden input with this name. */
+  name?: string;
+  id?: string;
+  className?: string;
+  'aria-label'?: string;
+  'aria-describedby'?: string;
+  'aria-invalid'?: boolean;
+}
+/**
+ * Free-form multi-value input. Enter or a comma turns the text into a removable tag;
+ * Backspace on an empty input removes the last one. Pasting a comma-separated list adds them all.
+ */
+export declare function TagInput(inProps: TagInputProps): import("react").JSX.Element;
+//#endregion

package/dist/components/tag-input/tag-input.js

@@ -0,0 +1,149 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.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 { tagInputStyles } from "./tag-input.styles.js";
+import { useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/tag-input/tag-input.tsx
+function XIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2.5",
+		strokeLinecap: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+	});
+}
+/**
+* Free-form multi-value input. Enter or a comma turns the text into a removable tag;
+* Backspace on an empty input removes the last one. Pasting a comma-separated list adds them all.
+*/
+function TagInput(inProps) {
+	const [props, slots] = useComponentConfig("TagInput", useFieldControl(inProps));
+	const { value: valueProp, defaultValue = [], onValueChange, placeholder = "Add a tag…", maxTags, validate, allowDuplicates = false, separators = [","], disabled, name, id, size, className, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid } = props;
+	const [tags, setTags] = useControllableState({
+		value: valueProp,
+		defaultValue,
+		onChange: onValueChange
+	});
+	const [draft, setDraft] = useState("");
+	const [error, setError] = useState(null);
+	const inputRef = useRef(null);
+	const errorId = useId();
+	const s = tagInputStyles({ size });
+	const full = maxTags !== void 0 && tags.length >= maxTags;
+	const invalid = Boolean(error) || ariaInvalid === true;
+	const add = (raw) => {
+		let next = [...tags];
+		let problem = null;
+		for (const candidate of raw.map((t) => t.trim()).filter(Boolean)) {
+			if (maxTags !== void 0 && next.length >= maxTags) {
+				problem = `You can add up to ${maxTags} tags.`;
+				break;
+			}
+			if (!allowDuplicates && next.includes(candidate)) {
+				problem = `“${candidate}” is already added.`;
+				continue;
+			}
+			const verdict = validate?.(candidate, next) ?? true;
+			if (verdict !== true) {
+				problem = verdict;
+				continue;
+			}
+			next = [...next, candidate];
+		}
+		if (next.length !== tags.length) setTags(next);
+		setError(problem);
+		return problem === null;
+	};
+	const commitDraft = () => {
+		if (!draft.trim()) return;
+		if (add([draft])) setDraft("");
+	};
+	const remove = (index) => {
+		setTags(tags.filter((_, i) => i !== index));
+		setError(null);
+		inputRef.current?.focus();
+	};
+	const handleKeyDown = (event) => {
+		if (event.key === "Enter" || separators.includes(event.key)) {
+			if (event.key === "Enter" && !draft.trim()) return;
+			event.preventDefault();
+			commitDraft();
+		} else if (event.key === "Backspace" && draft === "" && tags.length > 0) {
+			event.preventDefault();
+			remove(tags.length - 1);
+		}
+	};
+	const handlePaste = (event) => {
+		const text = event.clipboardData.getData("text");
+		const pattern = new RegExp(`[${["\n", ...separators].map((s) => s.replace(/[-\\^\]]/g, "\\$&")).join("")}]`);
+		if (!pattern.test(text)) return;
+		event.preventDefault();
+		add(text.split(pattern));
+	};
+	const describedBy = [ariaDescribedBy, error ? errorId : void 0].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "tag-input",
+		className: s.root({ class: [slots.root, className] }),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				"data-invalid": invalid || void 0,
+				className: s.frame({ class: slots.frame }),
+				onClick: () => inputRef.current?.focus(),
+				children: [/* @__PURE__ */ jsx(PresenceList, { children: tags.map((tag, index) => /* @__PURE__ */ jsxs(PresenceItem, {
+					as: "span",
+					"data-slot": "tag",
+					className: s.tag({ class: slots.tag }),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: s.tagLabel({ class: slots.tagLabel }),
+						children: tag
+					}), !disabled && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": `Remove ${tag}`,
+						className: s.remove({ class: slots.remove }),
+						onClick: (event) => {
+							event.stopPropagation();
+							remove(index);
+						},
+						children: /* @__PURE__ */ jsx(XIcon, {})
+					})]
+				}, `${tag}-${tags.slice(0, index).filter((t) => t === tag).length}`)) }), /* @__PURE__ */ jsx("input", {
+					ref: inputRef,
+					id,
+					value: draft,
+					disabled: disabled || full,
+					placeholder: full ? void 0 : tags.length === 0 ? placeholder : void 0,
+					"aria-label": ariaLabel,
+					"aria-describedby": describedBy,
+					"aria-invalid": invalid || void 0,
+					className: s.input({ class: slots.input }),
+					onChange: (event) => {
+						setDraft(event.target.value);
+						if (error) setError(null);
+					},
+					onKeyDown: handleKeyDown,
+					onPaste: handlePaste,
+					onBlur: commitDraft
+				})]
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				id: errorId,
+				role: "alert",
+				className: s.message({ class: slots.message }),
+				children: error
+			}),
+			name && tags.map((tag, index) => /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name,
+				value: tag
+			}, `${tag}-${index}`))
+		]
+	});
+}
+//#endregion
+export { TagInput };

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

@@ -0,0 +1,71 @@
+import { VariantProps } from "../../utils/tv.js";
+import { StylesEntry } from "../../utils/registry.js";
+//#region src/components/tag-input/tag-input.styles.d.ts
+export declare const tagInputStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      frame: string;
+    };
+    md: {
+      frame: string;
+    };
+    lg: {
+      frame: string;
+    };
+  };
+}, {
+  root: string;
+  frame: string[];
+  tag: string;
+  tagLabel: string;
+  remove: string;
+  input: string;
+  message: string;
+}, undefined, {
+  size: {
+    sm: {
+      frame: string;
+    };
+    md: {
+      frame: string;
+    };
+    lg: {
+      frame: string;
+    };
+  };
+}, {
+  root: string;
+  frame: string[];
+  tag: string;
+  tagLabel: string;
+  remove: string;
+  input: string;
+  message: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  size: {
+    sm: {
+      frame: string;
+    };
+    md: {
+      frame: string;
+    };
+    lg: {
+      frame: string;
+    };
+  };
+}, {
+  root: string;
+  frame: string[];
+  tag: string;
+  tagLabel: string;
+  remove: string;
+  input: string;
+  message: string;
+}>>;
+export type TagInputVariants = VariantProps<typeof tagInputStyles>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    TagInput: StylesEntry<typeof tagInputStyles>;
+  }
+}
+//#endregion

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

@@ -0,0 +1,29 @@
+"use client";
+import { tv } from "../../utils/tv.js";
+import { fieldControl } from "../input/input.styles.js";
+//#region src/components/tag-input/tag-input.styles.ts
+const tagInputStyles = /* @__PURE__ */ tv({
+	slots: {
+		root: "grid gap-1.5",
+		frame: [
+			...fieldControl,
+			"flex cursor-text flex-wrap items-center gap-1.5 px-2 py-1",
+			"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"
+		],
+		tag: "inline-flex h-6 max-w-full items-center gap-1 rounded-pill bg-muted pr-1 pl-2.5 text-caption text-foreground",
+		tagLabel: "truncate",
+		remove: "inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-pill text-muted-foreground hover:bg-border-strong/40 hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring [&>svg]:size-3",
+		input: "h-7 min-w-24 flex-1 bg-transparent px-1 text-foreground outline-none placeholder:text-faint-foreground disabled:cursor-not-allowed",
+		message: "text-small font-medium text-danger-text"
+	},
+	variants: { size: {
+		sm: { frame: "min-h-(--glyph-control-sm) text-small" },
+		md: { frame: "min-h-(--glyph-control-md) text-small" },
+		lg: { frame: "min-h-(--glyph-control-lg) text-body" }
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { tagInputStyles };

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

@@ -0,0 +1,3 @@
+import { TextVariants, textStyles } from "./text.styles.js";
+import { Text, TextProps } from "./text.js";
+export { Text, type TextProps, type TextVariants, textStyles };

package/dist/components/text/text.d.ts

@@ -0,0 +1,9 @@
+import { TextVariants } from "./text.styles.js";
+import { ComponentProps } from "react";
+//#region src/components/text/text.d.ts
+export interface TextProps extends ComponentProps<'p'>, TextVariants {
+  /** Render the child element (e.g. `<span>`, `<label>`) with text styles instead of a `<p>`. */
+  asChild?: boolean;
+}
+export declare function Text(inProps: TextProps): import("react").JSX.Element;
+//#endregion

package/dist/components/text/text.js

@@ -0,0 +1,25 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { textStyles } from "./text.styles.js";
+import { Slot } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/text/text.tsx
+function Text(inProps) {
+	const [props, slots] = useComponentConfig("Text", inProps);
+	const { size, tone, weight, mono, truncate, asChild, className, ...rest } = props;
+	const s = textStyles({
+		size,
+		tone,
+		weight,
+		mono,
+		truncate
+	});
+	const Comp = asChild ? Slot.Root : "p";
+	return /* @__PURE__ */ jsx(Comp, {
+		"data-slot": "text",
+		className: s.base({ class: [slots.base, className] }),
+		...rest
+	});
+}
+//#endregion
+export { Text };