@ashwa-io/ui 0.0.2 → 0.0.4

package/dist/components/atomic/TextArea/TextArea.js

@@ -0,0 +1,35 @@
+import { FormField } from "../../molecule/FormField/FormField.js";
+import { Textarea } from "../../ui/textarea.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/atomic/TextArea/TextArea.tsx
+const TextArea = (props) => {
+	const { label, hideLabel, description, error, required, disabled, id, "data-testid": testId, value, onChange, onBlur, name, placeholder, rows = 3, maxLength, readOnly = false, ref } = props;
+	return /* @__PURE__ */ jsx(FormField, {
+		label,
+		hideLabel,
+		description,
+		error,
+		required,
+		disabled,
+		id,
+		"data-testid": testId,
+		children: (control) => /* @__PURE__ */ jsx(Textarea, {
+			ref,
+			id: control.id,
+			"aria-describedby": control["aria-describedby"],
+			"aria-invalid": control["aria-invalid"],
+			"aria-required": control["aria-required"],
+			disabled: control.disabled,
+			name,
+			value,
+			placeholder,
+			rows,
+			maxLength,
+			readOnly,
+			onChange: (event) => onChange(event.target.value),
+			onBlur,
+			className: "field-sizing-fixed"
+		})
+	});
+};
+export { TextArea };

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

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

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

@@ -0,0 +1,18 @@
+import { FieldBaseProps, IconComponent } from "../../../lib/types.js";
+import React from "react";
+export type TextInputType = 'text' | 'email' | 'password' | 'search' | 'tel' | 'url';
+export interface TextInputProps extends FieldBaseProps {
+  value: string;
+  onChange: (value: string) => void;
+  onBlur?: () => void;
+  name?: string;
+  placeholder?: string;
+  type?: TextInputType;
+  /** Leading icon, decorative (aria-hidden). */
+  icon?: IconComponent;
+  readOnly?: boolean;
+  /** e.g. 'username', 'current-password' on login forms. */
+  autoComplete?: string;
+  ref?: React.Ref<HTMLInputElement>;
+}
+export declare const TextInput: React.FC<TextInputProps>;

package/dist/components/atomic/TextInput/TextInput.js

@@ -0,0 +1,42 @@
+import { FormField } from "../../molecule/FormField/FormField.js";
+import { Input } from "../../ui/input.js";
+import { cn } from "../../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/atomic/TextInput/TextInput.tsx
+const TextInput = (props) => {
+	const { label, hideLabel, description, error, required, disabled, id, "data-testid": testId, value, onChange, onBlur, name, placeholder, type = "text", icon: Icon, readOnly = false, autoComplete, ref } = props;
+	return /* @__PURE__ */ jsx(FormField, {
+		label,
+		hideLabel,
+		description,
+		error,
+		required,
+		disabled,
+		id,
+		"data-testid": testId,
+		children: (control) => /* @__PURE__ */ jsxs("div", {
+			className: "relative",
+			children: [Icon && /* @__PURE__ */ jsx(Icon, {
+				"aria-hidden": true,
+				className: "text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2"
+			}), /* @__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,
+				type,
+				name,
+				value,
+				placeholder,
+				readOnly,
+				autoComplete,
+				onChange: (event) => onChange(event.target.value),
+				onBlur,
+				className: cn(Icon && "pl-8")
+			})]
+		})
+	});
+};
+export { TextInput };

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

@@ -0,0 +1,2 @@
+import { TextInput, TextInputProps, TextInputType } from "./TextInput.js";
+export { TextInput, type TextInputProps, type TextInputType };

package/dist/components/layout/FormLayout/FormLayout.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export type FormLayoutDirection = 'vertical' | 'horizontal';
+export interface FormLayoutProps {
+  children: React.ReactNode;
+  /** horizontal: fields side by side in equal columns from sm up, stacked on phones. */
+  direction?: FormLayoutDirection;
+  'data-testid'?: string;
+}
+export declare const FormLayout: React.FC<FormLayoutProps>;

package/dist/components/layout/FormLayout/FormLayout.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+// src/components/layout/FormLayout/FormLayout.tsx
+const DIRECTION = {
+	vertical: "flex flex-col gap-5",
+	horizontal: "grid gap-5 sm:auto-cols-fr sm:grid-flow-col"
+};
+const FormLayout = (props) => {
+	const { children, direction = "vertical", "data-testid": testId } = props;
+	return /* @__PURE__ */ jsx("div", {
+		"data-testid": testId,
+		className: DIRECTION[direction],
+		children
+	});
+};
+export { FormLayout };

package/dist/components/layout/FormLayout/index.d.ts

@@ -0,0 +1,2 @@
+import { FormLayout, FormLayoutDirection, FormLayoutProps } from "./FormLayout.js";
+export { FormLayout, type FormLayoutDirection, type FormLayoutProps };

package/dist/components/layout/Stack/Stack.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+export type StackGap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8;
+export type StackAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+export type StackJustify = 'start' | 'center' | 'end' | 'between';
+export interface StackProps {
+  children: React.ReactNode;
+  direction?: 'row' | 'column';
+  /** Tailwind spacing step (1 = 4px). */
+  gap?: StackGap;
+  /** Cross axis. */
+  align?: StackAlign;
+  /** Main axis. */
+  justify?: StackJustify;
+  wrap?: boolean;
+  id?: string;
+  'data-testid'?: string;
+}
+export type HStackProps = Omit<StackProps, 'direction'>;
+export type VStackProps = Omit<StackProps, 'direction'>;
+export declare const Stack: React.FC<StackProps>;
+export declare const HStack: React.FC<HStackProps>;
+export declare const VStack: React.FC<VStackProps>;

package/dist/components/layout/Stack/Stack.js

@@ -0,0 +1,62 @@
+import { cn } from "../../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/layout/Stack/Stack.tsx
+const GAP = {
+	0: "gap-0",
+	1: "gap-1",
+	2: "gap-2",
+	3: "gap-3",
+	4: "gap-4",
+	5: "gap-5",
+	6: "gap-6",
+	8: "gap-8"
+};
+const ALIGN = {
+	start: "items-start",
+	center: "items-center",
+	end: "items-end",
+	stretch: "items-stretch",
+	baseline: "items-baseline"
+};
+const JUSTIFY = {
+	start: "justify-start",
+	center: "justify-center",
+	end: "justify-end",
+	between: "justify-between"
+};
+const Stack = (props) => {
+	const { children, direction = "column", gap = 0, align, justify, wrap = false, id, "data-testid": testId } = props;
+	return /* @__PURE__ */ jsx("div", {
+		id,
+		"data-testid": testId,
+		className: cn("flex", direction === "row" ? "flex-row" : "flex-col", GAP[gap], align && ALIGN[align], justify && JUSTIFY[justify], wrap && "flex-wrap"),
+		children
+	});
+};
+const HStack = (props) => {
+	const { children, gap, align, justify, wrap, id, "data-testid": testId } = props;
+	return /* @__PURE__ */ jsx(Stack, {
+		direction: "row",
+		gap,
+		align,
+		justify,
+		wrap,
+		id,
+		"data-testid": testId,
+		children
+	});
+};
+const VStack = (props) => {
+	const { children, gap, align, justify, wrap, id, "data-testid": testId } = props;
+	return /* @__PURE__ */ jsx(Stack, {
+		direction: "column",
+		gap,
+		align,
+		justify,
+		wrap,
+		id,
+		"data-testid": testId,
+		children
+	});
+};
+export { HStack, Stack, VStack };

package/dist/components/layout/Stack/index.d.ts

@@ -0,0 +1,2 @@
+import { HStack, HStackProps, Stack, StackAlign, StackGap, StackJustify, StackProps, VStack, VStackProps } from "./Stack.js";
+export { HStack, type HStackProps, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, VStack, type VStackProps };

package/dist/components/molecule/FormField/FormField.d.ts

@@ -0,0 +1,16 @@
+import { FieldBaseProps } from "../../../lib/types.js";
+import React from "react";
+/** Wiring FormField hands to its control; pass each prop by name. */
+export interface FormFieldControlProps {
+  id: string;
+  'aria-describedby'?: string;
+  'aria-invalid'?: true;
+  'aria-required'?: true;
+  disabled?: boolean;
+}
+export interface FormFieldProps extends FieldBaseProps {
+  children: (control: FormFieldControlProps) => React.ReactNode;
+  /** horizontal puts the label beside the control (checkbox, switch). */
+  orientation?: 'vertical' | 'horizontal';
+}
+export declare const FormField: React.FC<FormFieldProps>;

package/dist/components/molecule/FormField/FormField.js

@@ -0,0 +1,47 @@
+import { Field, FieldContent, FieldDescription, FieldError, FieldLabel } from "../../ui/field.js";
+import { cn } from "../../../lib/utils.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+// src/components/molecule/FormField/FormField.tsx
+const FormField = (props) => {
+	const { children, label, hideLabel = false, description, error, required = false, disabled = false, orientation = "vertical", id: idProp, "data-testid": testId } = props;
+	const generatedId = useId();
+	const id = idProp ?? generatedId;
+	const descriptionId = description ? `${id}-description` : void 0;
+	const errorId = error ? `${id}-error` : void 0;
+	const control = children({
+		id,
+		"aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || void 0,
+		"aria-invalid": error ? true : void 0,
+		"aria-required": required ? true : void 0,
+		disabled
+	});
+	const labelNode = /* @__PURE__ */ jsxs(FieldLabel, {
+		htmlFor: id,
+		className: cn(hideLabel && "sr-only"),
+		children: [label, required && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "text-destructive",
+			children: "*"
+		})]
+	});
+	const helpNodes = /* @__PURE__ */ jsxs(Fragment, { children: [description && /* @__PURE__ */ jsx(FieldDescription, {
+		id: descriptionId,
+		children: description
+	}), error && /* @__PURE__ */ jsx(FieldError, {
+		id: errorId,
+		children: error
+	})] });
+	return /* @__PURE__ */ jsx(Field, {
+		orientation,
+		"data-invalid": error ? true : void 0,
+		"data-disabled": disabled || void 0,
+		"data-testid": testId,
+		children: orientation === "horizontal" ? /* @__PURE__ */ jsxs(Fragment, { children: [control, /* @__PURE__ */ jsxs(FieldContent, { children: [labelNode, helpNodes] })] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+			labelNode,
+			control,
+			helpNodes
+		] })
+	});
+};
+export { FormField };

package/dist/components/molecule/FormField/index.d.ts

@@ -0,0 +1,2 @@
+import { FormField, FormFieldControlProps, FormFieldProps } from "./FormField.js";
+export { FormField, type FormFieldControlProps, type FormFieldProps };

package/dist/components/ui/badge.js

@@ -0,0 +1,26 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+import { cn } from "cn";
+// src/components/ui/badge.tsx
+const badgeVariants = cva("group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", {
+	variants: { variant: {
+		default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+		secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+		destructive: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+		outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+		ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+		link: "text-primary underline-offset-4 hover:underline"
+	} },
+	defaultVariants: { variant: "default" }
+});
+const Badge = ({ className, variant = "default", render, ...props }) => useRender({
+	defaultTagName: "span",
+	props: mergeProps({ className: cn(badgeVariants({ variant }), className) }, props),
+	render,
+	state: {
+		slot: "badge",
+		variant
+	}
+});
+export { Badge, badgeVariants };

package/dist/components/ui/button.d.ts

@@ -0,0 +1,2 @@
+import "class-variance-authority";
+import "@base-ui/react/button";

package/dist/components/ui/button.js

@@ -1,7 +1,7 @@
-import { Button } from "@base-ui/react/button";
 import { cva } from "class-variance-authority";
 import { cn } from "cn";
 import { jsx } from "react/jsx-runtime";
+import { Button } from "@base-ui/react/button";
 // src/components/ui/button.tsx
 const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
 	variants: {

package/dist/components/ui/checkbox.js

@@ -0,0 +1,18 @@
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { CheckIcon } from "lucide-react";
+import { Checkbox } from "@base-ui/react/checkbox";
+// src/components/ui/checkbox.tsx
+const Checkbox$1 = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Checkbox.Root, {
+		"data-slot": "checkbox",
+		className: cn("peer border-input group-has-[:focus-visible]/field-label:not-data-checked:border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors outline-none group-has-disabled/field:opacity-50 group-has-[:focus-visible]/field-label:ring-0 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3", className),
+		...props,
+		children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
+			"data-slot": "checkbox-indicator",
+			className: "grid place-content-center text-current transition-none [&>svg]:size-3.5",
+			children: /* @__PURE__ */ jsx(CheckIcon, {})
+		})
+	});
+};
+export { Checkbox$1 as Checkbox };

package/dist/components/ui/field.js

@@ -0,0 +1,65 @@
+import { Label } from "./label.js";
+import { cva } from "class-variance-authority";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+// src/components/ui/field.tsx
+const fieldVariants = cva("group/field flex w-full gap-2 data-[invalid=true]:text-destructive", {
+	variants: { orientation: {
+		vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+		horizontal: "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+		responsive: "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+	} },
+	defaultVariants: { orientation: "vertical" }
+});
+const Field = ({ className, orientation = "vertical", ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"data-slot": "field",
+		"data-orientation": orientation,
+		className: cn(fieldVariants({ orientation }), className),
+		...props
+	});
+};
+const FieldContent = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "field-content",
+		className: cn("group/field-content flex flex-1 flex-col gap-0.5 leading-snug", className),
+		...props
+	});
+};
+const FieldLabel = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Label, {
+		"data-slot": "field-label",
+		className: cn("group/field-label peer/field-label has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-muted/50 has-[>[data-slot=field]]:has-[:focus-visible]:border-ring has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/50 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border has-[>[data-slot=field]]:has-[:focus-visible]:ring-3 *:data-[slot=field]:p-2.5", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col", className),
+		...props
+	});
+};
+const FieldDescription = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "field-description",
+		className: cn("text-muted-foreground text-left text-sm leading-normal font-normal group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5", "last:mt-0 nth-last-2:-mt-1", "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4", className),
+		...props
+	});
+};
+const FieldError = ({ className, children, errors, ...props }) => {
+	const content = useMemo(() => {
+		if (children) return children;
+		if (!errors?.length) return null;
+		const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];
+		if (uniqueErrors?.length == 1) return uniqueErrors[0]?.message;
+		return /* @__PURE__ */ jsx("ul", {
+			className: "ml-4 flex list-disc flex-col gap-1",
+			children: uniqueErrors.map((error, index) => error?.message && /* @__PURE__ */ jsx("li", { children: error.message }, index))
+		});
+	}, [children, errors]);
+	if (!content) return null;
+	return /* @__PURE__ */ jsx("div", {
+		role: "alert",
+		"data-slot": "field-error",
+		className: cn("text-destructive text-sm font-normal", className),
+		...props,
+		children: content
+	});
+};
+export { Field, FieldContent, FieldDescription, FieldError, FieldLabel };

package/dist/components/ui/input.js

@@ -0,0 +1,14 @@
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Input } from "@base-ui/react/input";
+// src/components/ui/input.tsx
+const Input$1 = ({ className, type, ...props }) => {
+	return /* @__PURE__ */ jsx(Input, {
+		type,
+		"data-slot": "input",
+		className: cn("border-input file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 disabled:bg-input/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 h-8 w-full min-w-0 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm", className),
+		...props
+	});
+};
+export { Input$1 as Input };

package/dist/components/ui/label.js

@@ -0,0 +1,12 @@
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import "react";
+// src/components/ui/label.tsx
+const Label = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("label", {
+		"data-slot": "label",
+		className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className),
+		...props
+	});
+};
+export { Label };

package/dist/components/ui/select.js

@@ -0,0 +1,75 @@
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import "react";
+import { Select } from "@base-ui/react/select";
+// src/components/ui/select.tsx
+const Select$1 = Select.Root;
+const SelectValue = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Select.Value, {
+		"data-slot": "select-value",
+		className: cn("flex flex-1 text-left", className),
+		...props
+	});
+};
+const SelectTrigger = ({ className, size = "default", children, ...props }) => {
+	return /* @__PURE__ */ jsxs(Select.Trigger, {
+		"data-slot": "select-trigger",
+		"data-size": size,
+		className: cn("border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 flex w-fit items-center justify-between gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(Select.Icon, { render: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "text-muted-foreground pointer-events-none size-4" }) })]
+	});
+};
+const SelectContent = ({ className, children, side = "bottom", sideOffset = 4, align = "center", alignOffset = 0, alignItemWithTrigger = true, ...props }) => {
+	return /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, {
+		side,
+		sideOffset,
+		align,
+		alignOffset,
+		alignItemWithTrigger,
+		className: "isolate z-50",
+		children: /* @__PURE__ */ jsxs(Select.Popup, {
+			"data-slot": "select-content",
+			"data-align-trigger": alignItemWithTrigger,
+			className: cn("bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg shadow-md ring-1 duration-100 data-[align-trigger=true]:animate-none", className),
+			...props,
+			children: [
+				/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+				/* @__PURE__ */ jsx(Select.List, { children }),
+				/* @__PURE__ */ jsx(SelectScrollDownButton, {})
+			]
+		})
+	}) });
+};
+const SelectItem = ({ className, children, ...props }) => {
+	return /* @__PURE__ */ jsxs(Select.Item, {
+		"data-slot": "select-item",
+		className: cn("focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(Select.ItemText, {
+			className: "flex flex-1 shrink-0 gap-2 whitespace-nowrap",
+			children
+		}), /* @__PURE__ */ jsx(Select.ItemIndicator, {
+			render: /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }),
+			children: /* @__PURE__ */ jsx(CheckIcon, { className: "pointer-events-none" })
+		})]
+	});
+};
+const SelectScrollUpButton = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Select.ScrollUpArrow, {
+		"data-slot": "select-scroll-up-button",
+		className: cn("bg-popover top-0 z-10 flex w-full cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ChevronUpIcon, {})
+	});
+};
+const SelectScrollDownButton = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Select.ScrollDownArrow, {
+		"data-slot": "select-scroll-down-button",
+		className: cn("bg-popover bottom-0 z-10 flex w-full cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+	});
+};
+export { Select$1 as Select, SelectContent, SelectItem, SelectScrollDownButton, SelectScrollUpButton, SelectTrigger, SelectValue };

package/dist/components/ui/separator.js

@@ -0,0 +1,13 @@
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { Separator } from "@base-ui/react/separator";
+// src/components/ui/separator.tsx
+const Separator$1 = ({ className, orientation = "horizontal", ...props }) => {
+	return /* @__PURE__ */ jsx(Separator, {
+		"data-slot": "separator",
+		orientation,
+		className: cn("bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch", className),
+		...props
+	});
+};
+export { Separator$1 as Separator };

package/dist/components/ui/skeleton.js

@@ -0,0 +1,11 @@
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+// src/components/ui/skeleton.tsx
+const Skeleton = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "skeleton",
+		className: cn("bg-muted animate-pulse rounded-md", className),
+		...props
+	});
+};
+export { Skeleton };

package/dist/components/ui/spinner.js

@@ -0,0 +1,14 @@
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { Loader2Icon } from "lucide-react";
+// src/components/ui/spinner.tsx
+const Spinner = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Loader2Icon, {
+		"data-slot": "spinner",
+		role: "status",
+		"aria-label": "Loading",
+		className: cn("size-4 animate-spin", className),
+		...props
+	});
+};
+export { Spinner };

package/dist/components/ui/switch.js

@@ -0,0 +1,18 @@
+"use client";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { Switch } from "@base-ui/react/switch";
+// src/components/ui/switch.tsx
+const Switch$1 = ({ className, size = "default", ...props }) => {
+	return /* @__PURE__ */ jsx(Switch.Root, {
+		"data-slot": "switch",
+		"data-size": size,
+		className: cn("peer group/switch focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none group-has-[:focus-visible]/field-label:border-transparent group-has-[:focus-visible]/field-label:ring-0 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 aria-invalid:ring-3 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px]", className),
+		...props,
+		children: /* @__PURE__ */ jsx(Switch.Thumb, {
+			"data-slot": "switch-thumb",
+			className: "bg-background dark:data-checked:bg-primary-foreground dark:data-unchecked:bg-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0"
+		})
+	});
+};
+export { Switch$1 as Switch };

package/dist/components/ui/textarea.js

@@ -0,0 +1,12 @@
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import "react";
+// src/components/ui/textarea.tsx
+const Textarea = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("textarea", {
+		"data-slot": "textarea",
+		className: cn("border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 disabled:bg-input/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 flex field-sizing-content min-h-16 w-full rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm", className),
+		...props
+	});
+};
+export { Textarea };