@ashwa-io/ui 0.0.2 → 0.0.4

package/dist/components/atomic/Badge/Badge.d.ts

@@ -0,0 +1,11 @@
+import { IconComponent, Tone } from "../../../lib/types.js";
+import React from "react";
+export interface BadgeProps {
+  children: React.ReactNode;
+  tone?: Tone;
+  /** Leading icon, decorative (aria-hidden). */
+  icon?: IconComponent;
+  id?: string;
+  'data-testid'?: string;
+}
+export declare const Badge: React.FC<BadgeProps>;

package/dist/components/atomic/Badge/Badge.js

@@ -0,0 +1,31 @@
+import { Badge as Badge$1 } from "../../ui/badge.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/atomic/Badge/Badge.tsx
+const PRIMITIVE_VARIANT = {
+	neutral: "secondary",
+	brand: "secondary",
+	success: "secondary",
+	warning: "secondary",
+	danger: "destructive",
+	info: "secondary"
+};
+const TONE_CLASS = {
+	brand: "bg-brand-tint text-brand-tint-foreground",
+	success: "bg-success/10 text-success dark:bg-success/20",
+	warning: "bg-warning/10 text-warning dark:bg-warning/20",
+	info: "bg-info/10 text-info dark:bg-info/20"
+};
+const Badge = (props) => {
+	const { children, tone = "neutral", icon: Icon, id, "data-testid": testId } = props;
+	return /* @__PURE__ */ jsxs(Badge$1, {
+		id,
+		"data-testid": testId,
+		variant: PRIMITIVE_VARIANT[tone],
+		className: TONE_CLASS[tone],
+		children: [Icon && /* @__PURE__ */ jsx(Icon, {
+			"data-icon": "inline-start",
+			"aria-hidden": true
+		}), children]
+	});
+};
+export { Badge };

package/dist/components/atomic/Badge/index.d.ts

@@ -0,0 +1,2 @@
+import { Badge, BadgeProps } from "./Badge.js";
+export { Badge, type BadgeProps };

package/dist/components/atomic/Button/Button.d.ts

@@ -1,6 +1,6 @@
 import { IconComponent, Size } from "../../../lib/types.js";
+import { ButtonVariant } from "./buttonVariant.js";
 import React from "react";
-export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link';
 export interface ButtonProps {
   variant?: ButtonVariant;
   size?: Size;
@@ -19,4 +19,5 @@ export interface ButtonProps {
   'aria-describedby'?: string;
   'data-testid'?: string;
 }
-export declare const Button: React.FC<ButtonProps>;
+export declare const Button: React.FC<ButtonProps>;
+export type { ButtonVariant };

package/dist/components/atomic/Button/Button.js

@@ -1,16 +1,9 @@
 import { Button as Button$1 } from "../../ui/button.js";
 import { cn } from "../../../lib/utils.js";
-import { LoaderCircleIcon } from "lucide-react";
+import { BUTTON_VARIANT } from "./buttonVariant.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { LoaderCircleIcon } from "lucide-react";
 // src/components/atomic/Button/Button.tsx
-const VARIANT = {
-	primary: "default",
-	secondary: "secondary",
-	outline: "outline",
-	ghost: "ghost",
-	destructive: "destructive",
-	link: "link"
-};
 const VARIANT_CLASS = { link: "text-brand-text" };
 const SIZE = {
 	sm: "sm",
@@ -24,7 +17,7 @@ const Button = (props) => {
 		ref,
 		id,
 		type,
-		variant: VARIANT[variant],
+		variant: BUTTON_VARIANT[variant],
 		size: SIZE[size],
 		className: cn(VARIANT_CLASS[variant], fullWidth && "w-full"),
 		disabled: disabled || loading,

package/dist/components/atomic/Button/buttonVariant.d.ts

@@ -0,0 +1,3 @@
+import "../../ui/button.js";
+import "react";
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link';

package/dist/components/atomic/Button/buttonVariant.js

@@ -0,0 +1,10 @@
+// src/components/atomic/Button/buttonVariant.ts
+const BUTTON_VARIANT = {
+	primary: "default",
+	secondary: "secondary",
+	outline: "outline",
+	ghost: "ghost",
+	destructive: "destructive",
+	link: "link"
+};
+export { BUTTON_VARIANT };

package/dist/components/atomic/Button/index.d.ts

@@ -1,2 +1,3 @@
-import { Button, ButtonProps, ButtonVariant } from "./Button.js";
+import { ButtonVariant } from "./buttonVariant.js";
+import { Button, ButtonProps } from "./Button.js";
 export { Button, type ButtonProps, type ButtonVariant };

package/dist/components/atomic/Checkbox/Checkbox.d.ts

@@ -0,0 +1,11 @@
+import { FieldBaseProps } from "../../../lib/types.js";
+import React from "react";
+export interface CheckboxProps extends FieldBaseProps {
+  value: boolean;
+  onChange: (value: boolean) => void;
+  onBlur?: () => void;
+  name?: string;
+  readOnly?: boolean;
+  ref?: React.Ref<HTMLElement>;
+}
+export declare const Checkbox: React.FC<CheckboxProps>;

package/dist/components/atomic/Checkbox/Checkbox.js

@@ -0,0 +1,32 @@
+import { FormField } from "../../molecule/FormField/FormField.js";
+import { Checkbox as Checkbox$1 } from "../../ui/checkbox.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/atomic/Checkbox/Checkbox.tsx
+const Checkbox = (props) => {
+	const { label, hideLabel, description, error, required, disabled, id, "data-testid": testId, value, onChange, onBlur, name, readOnly = false, ref } = props;
+	return /* @__PURE__ */ jsx(FormField, {
+		orientation: "horizontal",
+		label,
+		hideLabel,
+		description,
+		error,
+		required,
+		disabled,
+		id,
+		"data-testid": testId,
+		children: (control) => /* @__PURE__ */ jsx(Checkbox$1, {
+			ref,
+			id: control.id,
+			"aria-describedby": control["aria-describedby"],
+			"aria-invalid": control["aria-invalid"],
+			"aria-required": control["aria-required"],
+			disabled: control.disabled,
+			checked: value,
+			onCheckedChange: (checked) => onChange(checked),
+			onBlur,
+			name,
+			readOnly
+		})
+	});
+};
+export { Checkbox };

package/dist/components/atomic/Checkbox/index.d.ts

@@ -0,0 +1,2 @@
+import { Checkbox, CheckboxProps } from "./Checkbox.js";
+export { Checkbox, type CheckboxProps };

package/dist/components/atomic/ColorInput/ColorInput.d.ts

@@ -0,0 +1,15 @@
+import { FieldBaseProps } from "../../../lib/types.js";
+import React from "react";
+export interface ColorInputProps extends FieldBaseProps {
+  /** 6-digit hex, e.g. '#1a73e8' (orgs.primaryColor), or the text being typed. */
+  value: string;
+  /**
+   * A valid 6-digit hex arrives normalized ('#1a73e8'); anything else arrives as typed, so the
+   * form's validation can flag it (e.g. `validate: v => /^#[0-9a-f]{6}$/.test(v) || '…'`).
+   */
+  onChange: (value: string) => void;
+  onBlur?: () => void;
+  name?: string;
+  ref?: React.Ref<HTMLInputElement>;
+}
+export declare const ColorInput: React.FC<ColorInputProps>;

package/dist/components/atomic/ColorInput/ColorInput.js

@@ -0,0 +1,44 @@
+import { FormField } from "../../molecule/FormField/FormField.js";
+import { Input } from "../../ui/input.js";
+import { normalizeHex } from "./colorHex.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/atomic/ColorInput/ColorInput.tsx
+const ColorInput = (props) => {
+	const { label, hideLabel, description, error, required, disabled, id, "data-testid": testId, value, onChange, onBlur, name, ref } = props;
+	const handleText = (next) => onChange(normalizeHex(next) ?? next);
+	return /* @__PURE__ */ jsx(FormField, {
+		label,
+		hideLabel,
+		description,
+		error,
+		required,
+		disabled,
+		id,
+		"data-testid": testId,
+		children: (control) => /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx("input", {
+				type: "color",
+				"aria-label": `${label} picker`,
+				value: normalizeHex(value) ?? "#000000",
+				disabled: control.disabled,
+				onChange: (event) => handleText(event.target.value),
+				className: "border-input h-8 w-10 shrink-0 cursor-pointer rounded-lg border bg-transparent p-0.5 disabled:cursor-not-allowed disabled:opacity-50"
+			}), /* @__PURE__ */ jsx(Input, {
+				ref,
+				id: control.id,
+				"aria-describedby": control["aria-describedby"],
+				"aria-invalid": control["aria-invalid"],
+				"aria-required": control["aria-required"],
+				disabled: control.disabled,
+				name,
+				value,
+				spellCheck: false,
+				autoComplete: "off",
+				onChange: (event) => handleText(event.target.value),
+				onBlur
+			})]
+		})
+	});
+};
+export { ColorInput };

package/dist/components/atomic/ColorInput/colorHex.js

@@ -0,0 +1,8 @@
+// src/components/atomic/ColorInput/colorHex.ts
+const HEX6 = /^#?([0-9a-f]{6})$/i;
+/** '#1A73E8' | '1a73e8' → '#1a73e8'; anything that is not 6 hex digits → null. */
+const normalizeHex = (input) => {
+	const match = HEX6.exec(input.trim());
+	return match ? `#${match[1].toLowerCase()}` : null;
+};
+export { normalizeHex };

package/dist/components/atomic/ColorInput/index.d.ts

@@ -0,0 +1,2 @@
+import { ColorInput, ColorInputProps } from "./ColorInput.js";
+export { ColorInput, type ColorInputProps };

package/dist/components/atomic/Divider/Divider.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export interface DividerProps {
+  /** A vertical divider stretches to its flex row's height. */
+  orientation?: 'horizontal' | 'vertical';
+  id?: string;
+  'data-testid'?: string;
+}
+export declare const Divider: React.FC<DividerProps>;

package/dist/components/atomic/Divider/Divider.js

@@ -0,0 +1,12 @@
+import { Separator } from "../../ui/separator.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/atomic/Divider/Divider.tsx
+const Divider = (props) => {
+	const { orientation = "horizontal", id, "data-testid": testId } = props;
+	return /* @__PURE__ */ jsx(Separator, {
+		orientation,
+		id,
+		"data-testid": testId
+	});
+};
+export { Divider };

package/dist/components/atomic/Divider/index.d.ts

@@ -0,0 +1,2 @@
+import { Divider, DividerProps } from "./Divider.js";
+export { Divider, type DividerProps };

package/dist/components/atomic/Heading/Heading.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export interface HeadingProps {
+  children: React.ReactNode;
+  /** Renders h1–h6; the visual size follows the level. */
+  level: HeadingLevel;
+  /** One line with an ellipsis; the parent must constrain the width. */
+  truncate?: boolean;
+  id?: string;
+  'data-testid'?: string;
+}
+export declare const Heading: React.FC<HeadingProps>;

package/dist/components/atomic/Heading/Heading.js

@@ -0,0 +1,30 @@
+import { cn } from "../../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/atomic/Heading/Heading.tsx
+const ELEMENT = {
+	1: "h1",
+	2: "h2",
+	3: "h3",
+	4: "h4",
+	5: "h5",
+	6: "h6"
+};
+const SIZE = {
+	1: "text-2xl tracking-tight",
+	2: "text-xl tracking-tight",
+	3: "text-lg",
+	4: "text-base",
+	5: "text-sm",
+	6: "text-xs"
+};
+const Heading = (props) => {
+	const { children, level, truncate = false, id, "data-testid": testId } = props;
+	const Element = ELEMENT[level];
+	return /* @__PURE__ */ jsx(Element, {
+		id,
+		"data-testid": testId,
+		className: cn("font-heading text-foreground font-semibold", SIZE[level], truncate && "truncate"),
+		children
+	});
+};
+export { Heading };

package/dist/components/atomic/Heading/index.d.ts

@@ -0,0 +1,2 @@
+import { Heading, HeadingLevel, HeadingProps } from "./Heading.js";
+export { Heading, type HeadingLevel, type HeadingProps };

package/dist/components/atomic/IconButton/IconButton.d.ts

@@ -0,0 +1,21 @@
+import { ButtonVariant } from "../Button/buttonVariant.js";
+import { IconComponent, Size } from "../../../lib/types.js";
+import React from "react";
+export type IconButtonVariant = Exclude<ButtonVariant, 'link'>;
+export interface IconButtonProps {
+  icon: IconComponent;
+  /** Required: an icon-only button has no other accessible name. */
+  'aria-label': string;
+  variant?: IconButtonVariant;
+  size?: Size;
+  /** Disables the button, sets aria-busy and swaps the icon for a spinner. */
+  loading?: boolean;
+  disabled?: boolean;
+  type?: 'button' | 'submit';
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  ref?: React.Ref<HTMLButtonElement>;
+  id?: string;
+  'aria-describedby'?: string;
+  'data-testid'?: string;
+}
+export declare const IconButton: React.FC<IconButtonProps>;

package/dist/components/atomic/IconButton/IconButton.js

@@ -0,0 +1,34 @@
+import { BUTTON_VARIANT } from "../Button/buttonVariant.js";
+import { Button } from "../../ui/button.js";
+import { cn } from "../../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { LoaderCircleIcon } from "lucide-react";
+// src/components/atomic/IconButton/IconButton.tsx
+const SIZE = {
+	sm: "icon-sm",
+	md: "icon",
+	lg: "icon-lg"
+};
+const IconButton = (props) => {
+	const { icon, "aria-label": ariaLabel, variant = "ghost", size = "md", loading = false, disabled = false, type = "button", onClick, ref, id, "aria-describedby": ariaDescribedBy, "data-testid": testId } = props;
+	const Icon = loading ? LoaderCircleIcon : icon;
+	return /* @__PURE__ */ jsx(Button, {
+		ref,
+		id,
+		type,
+		variant: BUTTON_VARIANT[variant],
+		size: SIZE[size],
+		disabled: disabled || loading,
+		focusableWhenDisabled: loading,
+		"aria-busy": loading || void 0,
+		"aria-label": ariaLabel,
+		"aria-describedby": ariaDescribedBy,
+		"data-testid": testId,
+		onClick,
+		children: /* @__PURE__ */ jsx(Icon, {
+			"aria-hidden": true,
+			className: cn(loading && "animate-spin")
+		})
+	});
+};
+export { IconButton };

package/dist/components/atomic/IconButton/index.d.ts

@@ -0,0 +1,2 @@
+import { IconButton, IconButtonProps, IconButtonVariant } from "./IconButton.js";
+export { IconButton, type IconButtonProps, type IconButtonVariant };

package/dist/components/atomic/Select/Select.d.ts

@@ -0,0 +1,18 @@
+import { FieldBaseProps } from "../../../lib/types.js";
+import React from "react";
+export interface SelectOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+export interface SelectProps extends FieldBaseProps {
+  options: SelectOption[];
+  /** null = nothing picked; the placeholder shows. */
+  value: string | null;
+  onChange: (value: string) => void;
+  onBlur?: () => void;
+  name?: string;
+  placeholder?: string;
+  ref?: React.Ref<HTMLButtonElement>;
+}
+export declare const Select: React.FC<SelectProps>;

package/dist/components/atomic/Select/Select.js

@@ -0,0 +1,47 @@
+import { FormField } from "../../molecule/FormField/FormField.js";
+import { Select as Select$1, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../ui/select.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/atomic/Select/Select.tsx
+const LEFT_FIELD_REASONS = /* @__PURE__ */ new Set(["outside-press", "focus-out"]);
+const Select = (props) => {
+	const { label, hideLabel, description, error, required, disabled, id, "data-testid": testId, options, value, onChange, onBlur, name, placeholder, ref } = props;
+	return /* @__PURE__ */ jsx(FormField, {
+		label,
+		hideLabel,
+		description,
+		error,
+		required,
+		disabled,
+		id,
+		"data-testid": testId,
+		children: (control) => /* @__PURE__ */ jsxs(Select$1, {
+			items: options,
+			value,
+			onValueChange: (next) => {
+				if (next !== null) onChange(next);
+			},
+			onOpenChange: (open, details) => {
+				if (!open && LEFT_FIELD_REASONS.has(details.reason)) onBlur?.();
+			},
+			name,
+			disabled: control.disabled,
+			children: [/* @__PURE__ */ jsx(SelectTrigger, {
+				ref,
+				id: control.id,
+				"aria-describedby": control["aria-describedby"],
+				"aria-invalid": control["aria-invalid"],
+				"aria-required": control["aria-required"],
+				onBlur: (event) => {
+					if (!event.relatedTarget?.closest("[data-slot=\"select-content\"]")) onBlur?.();
+				},
+				className: "w-full",
+				children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
+			}), /* @__PURE__ */ jsx(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+				value: option.value,
+				disabled: option.disabled,
+				children: option.label
+			}, option.value)) })]
+		})
+	});
+};
+export { Select };

package/dist/components/atomic/Select/index.d.ts

@@ -0,0 +1,2 @@
+import { Select, SelectOption, SelectProps } from "./Select.js";
+export { Select, type SelectOption, type SelectProps };

package/dist/components/atomic/Skeleton/Skeleton.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export type SkeletonShape = 'text' | 'circle' | 'block';
+export interface SkeletonProps {
+  /** Fills the wrapper's width; the app sizes it with a plain div. */
+  shape?: SkeletonShape;
+  'data-testid'?: string;
+}
+export declare const Skeleton: React.FC<SkeletonProps>;

package/dist/components/atomic/Skeleton/Skeleton.js

@@ -0,0 +1,17 @@
+import { Skeleton as Skeleton$1 } from "../../ui/skeleton.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/atomic/Skeleton/Skeleton.tsx
+const SHAPE = {
+	text: "h-4 w-full",
+	circle: "aspect-square w-full rounded-full",
+	block: "size-full"
+};
+const Skeleton = (props) => {
+	const { shape = "text", "data-testid": testId } = props;
+	return /* @__PURE__ */ jsx(Skeleton$1, {
+		"aria-hidden": true,
+		"data-testid": testId,
+		className: SHAPE[shape]
+	});
+};
+export { Skeleton };

package/dist/components/atomic/Skeleton/index.d.ts

@@ -0,0 +1,2 @@
+import { Skeleton, SkeletonProps, SkeletonShape } from "./Skeleton.js";
+export { Skeleton, type SkeletonProps, type SkeletonShape };

package/dist/components/atomic/Spinner/Spinner.d.ts

@@ -0,0 +1,10 @@
+import { Size } from "../../../lib/types.js";
+import React from "react";
+export interface SpinnerProps {
+  size?: Size;
+  /** Accessible name announced by screen readers. */
+  label?: string;
+  id?: string;
+  'data-testid'?: string;
+}
+export declare const Spinner: React.FC<SpinnerProps>;

package/dist/components/atomic/Spinner/Spinner.js

@@ -0,0 +1,18 @@
+import { Spinner as Spinner$1 } from "../../ui/spinner.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/atomic/Spinner/Spinner.tsx
+const SIZE = {
+	sm: "size-4",
+	md: "size-5",
+	lg: "size-8"
+};
+const Spinner = (props) => {
+	const { size = "md", label = "Loading", id, "data-testid": testId } = props;
+	return /* @__PURE__ */ jsx(Spinner$1, {
+		id,
+		"data-testid": testId,
+		"aria-label": label,
+		className: SIZE[size]
+	});
+};
+export { Spinner };

package/dist/components/atomic/Spinner/index.d.ts

@@ -0,0 +1,2 @@
+import { Spinner, SpinnerProps } from "./Spinner.js";
+export { Spinner, type SpinnerProps };

package/dist/components/atomic/Switch/Switch.d.ts

@@ -0,0 +1,11 @@
+import { FieldBaseProps } from "../../../lib/types.js";
+import React from "react";
+export interface SwitchProps extends FieldBaseProps {
+  value: boolean;
+  onChange: (value: boolean) => void;
+  onBlur?: () => void;
+  name?: string;
+  readOnly?: boolean;
+  ref?: React.Ref<HTMLElement>;
+}
+export declare const Switch: React.FC<SwitchProps>;

package/dist/components/atomic/Switch/Switch.js

@@ -0,0 +1,32 @@
+import { FormField } from "../../molecule/FormField/FormField.js";
+import { Switch as Switch$1 } from "../../ui/switch.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/atomic/Switch/Switch.tsx
+const Switch = (props) => {
+	const { label, hideLabel, description, error, required, disabled, id, "data-testid": testId, value, onChange, onBlur, name, readOnly = false, ref } = props;
+	return /* @__PURE__ */ jsx(FormField, {
+		orientation: "horizontal",
+		label,
+		hideLabel,
+		description,
+		error,
+		required,
+		disabled,
+		id,
+		"data-testid": testId,
+		children: (control) => /* @__PURE__ */ jsx(Switch$1, {
+			ref,
+			id: control.id,
+			"aria-describedby": control["aria-describedby"],
+			"aria-invalid": control["aria-invalid"],
+			"aria-required": control["aria-required"],
+			disabled: control.disabled,
+			checked: value,
+			onCheckedChange: (checked) => onChange(checked),
+			onBlur,
+			name,
+			readOnly
+		})
+	});
+};
+export { Switch };

package/dist/components/atomic/Switch/index.d.ts

@@ -0,0 +1,2 @@
+import { Switch, SwitchProps } from "./Switch.js";
+export { Switch, type SwitchProps };

package/dist/components/atomic/Text/Text.d.ts

@@ -0,0 +1,20 @@
+import { Tone } from "../../../lib/types.js";
+import React from "react";
+export type TextSize = 'xs' | 'sm' | 'md' | 'lg';
+export type TextTone = Tone | 'muted';
+export type TextWeight = 'normal' | 'medium' | 'semibold';
+export interface TextProps {
+  children: React.ReactNode;
+  as?: 'p' | 'span' | 'div';
+  /** Leave unset to inherit the parent's size (the page default is md). */
+  size?: TextSize;
+  /** Leave unset to inherit the parent's colour. */
+  tone?: TextTone;
+  /** Leave unset to inherit the parent's weight. */
+  weight?: TextWeight;
+  /** One line with an ellipsis; the parent must constrain the width. */
+  truncate?: boolean;
+  id?: string;
+  'data-testid'?: string;
+}
+export declare const Text: React.FC<TextProps>;

package/dist/components/atomic/Text/Text.js

@@ -0,0 +1,33 @@
+import { cn } from "../../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/atomic/Text/Text.tsx
+const SIZE = {
+	xs: "text-xs",
+	sm: "text-sm",
+	md: "text-base",
+	lg: "text-lg"
+};
+const TONE = {
+	neutral: "text-foreground",
+	muted: "text-muted-foreground",
+	brand: "text-brand-text",
+	success: "text-success",
+	warning: "text-warning",
+	danger: "text-destructive",
+	info: "text-info"
+};
+const WEIGHT = {
+	normal: "font-normal",
+	medium: "font-medium",
+	semibold: "font-semibold"
+};
+const Text = (props) => {
+	const { children, as: Element = "p", size, tone, weight, truncate = false, id, "data-testid": testId } = props;
+	return /* @__PURE__ */ jsx(Element, {
+		id,
+		"data-testid": testId,
+		className: cn(size && SIZE[size], tone && TONE[tone], weight && WEIGHT[weight], truncate && "block truncate"),
+		children
+	});
+};
+export { Text };

package/dist/components/atomic/Text/index.d.ts

@@ -0,0 +1,2 @@
+import { Text, TextProps, TextSize, TextTone, TextWeight } from "./Text.js";
+export { Text, type TextProps, type TextSize, type TextTone, type TextWeight };

package/dist/components/atomic/TextArea/TextArea.d.ts

@@ -0,0 +1,14 @@
+import { FieldBaseProps } from "../../../lib/types.js";
+import React from "react";
+export interface TextAreaProps extends FieldBaseProps {
+  value: string;
+  onChange: (value: string) => void;
+  onBlur?: () => void;
+  name?: string;
+  placeholder?: string;
+  rows?: number;
+  maxLength?: number;
+  readOnly?: boolean;
+  ref?: React.Ref<HTMLTextAreaElement>;
+}
+export declare const TextArea: React.FC<TextAreaProps>;