@dungle-scrubs/admin-ui-soft 0.0.0-stage → 0.0.0

package/dist/compositions/feedback.js

@@ -0,0 +1,49 @@
+import { Button } from "../components/ui/button.js";
+import "../components/ui/badge.js";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../components/ui/dialog.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, XIcon } from "lucide-react";
+//#region src/compositions/feedback.tsx
+function Banner({ children, className, dismissLabel = "Dismiss notification", onDismiss, title, tone = "info", ...props }) {
+	const Icon = tone === "success" ? CircleCheckIcon : tone === "critical" || tone === "warning" || tone === "caution" ? TriangleAlertIcon : InfoIcon;
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className: cn("soft-banner soft-tone", className),
+		"data-slot": "banner",
+		"data-tone": tone,
+		role: tone === "critical" ? "alert" : "status",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "soft-banner-header",
+			children: [
+				/* @__PURE__ */ jsx(Icon, {
+					"aria-hidden": "true",
+					size: 20
+				}),
+				/* @__PURE__ */ jsx("span", { children: title }),
+				onDismiss && /* @__PURE__ */ jsx(Button, {
+					"aria-label": dismissLabel,
+					onClick: onDismiss,
+					size: "icon-sm",
+					variant: "tertiary",
+					children: /* @__PURE__ */ jsx(XIcon, { "aria-hidden": "true" })
+				})
+			]
+		}), children && /* @__PURE__ */ jsx("div", {
+			className: "soft-banner-body",
+			children
+		})]
+	});
+}
+function Modal({ actions, children, description, title, trigger, ...props }) {
+	return /* @__PURE__ */ jsxs(Dialog, {
+		...props,
+		children: [trigger, /* @__PURE__ */ jsxs(DialogContent, { children: [
+			/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: title }), /* @__PURE__ */ jsx(DialogDescription, { children: description })] }),
+			children,
+			actions && /* @__PURE__ */ jsx(DialogFooter, { children: actions })
+		] })]
+	});
+}
+//#endregion
+export { Banner, Modal };

package/dist/compositions/fields.d.ts

@@ -0,0 +1,64 @@
+import { Input } from "../components/ui/input.js";
+import { Checkbox } from "../components/ui/checkbox.js";
+import { Switch } from "../components/ui/switch.js";
+import { Textarea } from "../components/ui/textarea.js";
+import { ComponentProps, ReactElement, ReactNode } from "react";
+import { Locale } from "react-day-picker";
+//#region src/compositions/fields.d.ts
+export interface FieldProps {
+  readonly className?: string;
+  readonly error?: string;
+  readonly hint?: ReactNode;
+  readonly id?: string;
+  readonly label: string;
+}
+type InputProps = Omit<ComponentProps<typeof Input>, "className" | "id" | "type">;
+export interface StandaloneTextFieldProps extends FieldProps, InputProps {
+  readonly type?: "text" | "email" | "password" | "search" | "tel" | "url";
+}
+export declare function StandaloneTextField({ className, error, hint, id, label, ...props }: StandaloneTextFieldProps): ReactElement;
+export interface NumberFieldProps extends FieldProps, InputProps {}
+export declare function NumberField({ className, error, hint, id, label, ...props }: NumberFieldProps): ReactElement;
+export interface MoneyFieldProps extends FieldProps, Omit<InputProps, "onChange" | "value" | "defaultValue" | "inputMode"> {
+  readonly currency?: string;
+  readonly currencyPosition?: "prefix" | "suffix";
+  readonly defaultValue?: string;
+  readonly onValueChange?: (value: string) => void;
+  readonly value?: string;
+}
+export declare function MoneyField({ className, currency, currencyPosition, defaultValue, error, hint, id, label, onValueChange, value, ...props }: MoneyFieldProps): ReactElement;
+export interface TextAreaProps extends FieldProps, Omit<ComponentProps<typeof Textarea>, "className" | "id"> {}
+export declare function TextArea({ className, error, hint, id, label, ...props }: TextAreaProps): ReactElement;
+export interface SelectOption {
+  readonly disabled?: boolean;
+  readonly label: string;
+  readonly value: string;
+}
+export interface StandaloneSelectFieldProps extends FieldProps {
+  readonly defaultValue?: string;
+  readonly disabled?: boolean;
+  readonly name?: string;
+  readonly onValueChange?: (value: string | null) => void;
+  readonly options: readonly SelectOption[];
+  readonly placeholder?: string;
+  readonly required?: boolean;
+  readonly value?: string | null;
+}
+export declare function StandaloneSelectField({ className, defaultValue, disabled, error, hint, id, label, name, onValueChange, options, placeholder, required, value }: StandaloneSelectFieldProps): ReactElement;
+export interface StandaloneCheckboxFieldProps extends FieldProps, Omit<ComponentProps<typeof Checkbox>, "className" | "id"> {}
+export declare function StandaloneCheckboxField({ className, error, hint, id, label, ...props }: StandaloneCheckboxFieldProps): ReactElement;
+export interface StandaloneSwitchFieldProps extends FieldProps, Omit<ComponentProps<typeof Switch>, "className" | "id"> {}
+export declare function StandaloneSwitchField({ className, error, hint, id, label, ...props }: StandaloneSwitchFieldProps): ReactElement;
+/** Parse local calendar parts, never UTC or an ISO timestamp. Invalid input is empty. */
+export declare function parseDateOnly(value: string | undefined): Date | undefined;
+export declare function formatDateOnly(date: Date): string;
+export interface DatePickerProps extends FieldProps {
+  readonly defaultMonth?: Date;
+  readonly disabled?: boolean;
+  readonly locale?: Locale;
+  readonly name?: string;
+  readonly onValueChange: (value: string) => void;
+  readonly value?: string;
+}
+export declare function DatePicker({ className, defaultMonth, disabled, error, hint, id, label, locale, name, onValueChange, value }: DatePickerProps): ReactElement;
+//#endregion

package/dist/compositions/fields.js

@@ -0,0 +1,293 @@
+import { Button } from "../components/ui/button.js";
+import { Calendar } from "../components/ui/calendar.js";
+import { Checkbox } from "../components/ui/checkbox.js";
+import { Input } from "../components/ui/input.js";
+import { Textarea } from "../components/ui/textarea.js";
+import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from "../components/ui/input-group.js";
+import { Label } from "../components/ui/label.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../components/ui/popover.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select.js";
+import { Switch } from "../components/ui/switch.js";
+import { useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CalendarIcon } from "lucide-react";
+import { enUS } from "date-fns/locale";
+//#region src/compositions/fields.tsx
+function FieldFrame({ children, className, disabled, error, hint, id, label }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: className ? `soft-field ${className}` : "soft-field",
+		"data-disabled": disabled || void 0,
+		children: [
+			/* @__PURE__ */ jsx(Label, {
+				"data-disabled": disabled ? "" : void 0,
+				htmlFor: id,
+				children: label
+			}),
+			children,
+			hint && /* @__PURE__ */ jsx("p", {
+				className: "soft-field-message",
+				id: `${id}-hint`,
+				children: hint
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				className: "soft-field-error",
+				id: `${id}-error`,
+				role: "alert",
+				children: error
+			})
+		]
+	});
+}
+function useFieldIds({ error, hint, id }) {
+	const generated = useId();
+	const controlId = id ?? generated;
+	return {
+		"aria-describedby": [hint ? `${controlId}-hint` : "", error ? `${controlId}-error` : ""].filter(Boolean).join(" ") || void 0,
+		"aria-invalid": Boolean(error),
+		id: controlId
+	};
+}
+function StandaloneTextField({ className, error, hint, id, label, ...props }) {
+	const field = {
+		className,
+		error,
+		hint,
+		id,
+		label
+	};
+	const ids = useFieldIds(field);
+	return /* @__PURE__ */ jsx(FieldFrame, {
+		...field,
+		id: ids.id,
+		disabled: props.disabled,
+		children: /* @__PURE__ */ jsx(Input, {
+			...props,
+			...ids
+		})
+	});
+}
+function NumberField({ className, error, hint, id, label, ...props }) {
+	const field = {
+		className,
+		error,
+		hint,
+		id,
+		label
+	};
+	const ids = useFieldIds(field);
+	return /* @__PURE__ */ jsx(FieldFrame, {
+		...field,
+		id: ids.id,
+		disabled: props.disabled,
+		children: /* @__PURE__ */ jsx(Input, {
+			...props,
+			...ids,
+			type: "number"
+		})
+	});
+}
+function MoneyField({ className, currency = "$", currencyPosition = "prefix", defaultValue = "", error, hint, id, label, onValueChange, value, ...props }) {
+	const [internalValue, setInternalValue] = useState(defaultValue);
+	const field = {
+		className,
+		error,
+		hint,
+		id,
+		label
+	};
+	const ids = useFieldIds(field);
+	return /* @__PURE__ */ jsx(FieldFrame, {
+		...field,
+		id: ids.id,
+		disabled: props.disabled,
+		children: /* @__PURE__ */ jsxs(InputGroup, {
+			"data-disabled": props.disabled || void 0,
+			children: [/* @__PURE__ */ jsx(InputGroupAddon, {
+				align: currencyPosition === "prefix" ? "inline-start" : "inline-end",
+				children: /* @__PURE__ */ jsx(InputGroupText, { children: currency })
+			}), /* @__PURE__ */ jsx(InputGroupInput, {
+				...props,
+				...ids,
+				inputMode: "decimal",
+				type: "text",
+				value: value ?? internalValue,
+				onChange: (event) => {
+					const next = event.target.value;
+					if (!/^\d*(?:\.\d*)?$/.test(next)) return;
+					setInternalValue(next);
+					onValueChange?.(next);
+				}
+			})]
+		})
+	});
+}
+function TextArea({ className, error, hint, id, label, ...props }) {
+	const field = {
+		className,
+		error,
+		hint,
+		id,
+		label
+	};
+	const ids = useFieldIds(field);
+	return /* @__PURE__ */ jsx(FieldFrame, {
+		...field,
+		id: ids.id,
+		disabled: props.disabled,
+		children: /* @__PURE__ */ jsx(Textarea, {
+			...props,
+			...ids
+		})
+	});
+}
+function StandaloneSelectField({ className, defaultValue, disabled, error, hint, id, label, name, onValueChange, options, placeholder = "Choose an option", required, value }) {
+	const field = {
+		className,
+		error,
+		hint,
+		id,
+		label
+	};
+	const ids = useFieldIds(field);
+	return /* @__PURE__ */ jsx(FieldFrame, {
+		...field,
+		id: ids.id,
+		disabled,
+		children: /* @__PURE__ */ jsxs(Select, {
+			defaultValue,
+			disabled,
+			items: options,
+			name,
+			onValueChange,
+			required,
+			value,
+			children: [/* @__PURE__ */ jsx(SelectTrigger, {
+				...ids,
+				className: "w-full",
+				children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
+			}), /* @__PURE__ */ jsx(SelectContent, {
+				alignItemWithTrigger: false,
+				children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+					disabled: option.disabled,
+					value: option.value,
+					children: option.label
+				}, option.value))
+			})]
+		})
+	});
+}
+function StandaloneCheckboxField({ className, error, hint, id, label, ...props }) {
+	const field = {
+		className,
+		error,
+		hint,
+		id,
+		label
+	};
+	const ids = useFieldIds(field);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "soft-choice",
+		children: [/* @__PURE__ */ jsx(Checkbox, {
+			...props,
+			...ids
+		}), /* @__PURE__ */ jsx(FieldFrame, {
+			...field,
+			id: ids.id,
+			disabled: props.disabled,
+			children: null
+		})]
+	});
+}
+function StandaloneSwitchField({ className, error, hint, id, label, ...props }) {
+	const field = {
+		className,
+		error,
+		hint,
+		id,
+		label
+	};
+	const ids = useFieldIds(field);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "soft-choice",
+		children: [/* @__PURE__ */ jsx(Switch, {
+			...props,
+			...ids
+		}), /* @__PURE__ */ jsx(FieldFrame, {
+			...field,
+			id: ids.id,
+			disabled: props.disabled,
+			children: null
+		})]
+	});
+}
+/** Parse local calendar parts, never UTC or an ISO timestamp. Invalid input is empty. */
+function parseDateOnly(value) {
+	if (!value || !/^\d{4}-\d{2}-\d{2}$/.test(value)) return void 0;
+	const [year, month, day] = value.split("-").map(Number);
+	if (year === void 0 || month === void 0 || day === void 0) return void 0;
+	const date = /* @__PURE__ */ new Date(0);
+	date.setFullYear(year, month - 1, day);
+	date.setHours(12, 0, 0, 0);
+	return date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day ? date : void 0;
+}
+function formatDateOnly(date) {
+	return `${String(date.getFullYear()).padStart(4, "0")}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+}
+function DatePicker({ className, defaultMonth, disabled, error, hint, id, label, locale = enUS, name, onValueChange, value }) {
+	const [open, setOpen] = useState(false);
+	const field = {
+		className,
+		error,
+		hint,
+		id,
+		label
+	};
+	const ids = useFieldIds(field);
+	const selected = parseDateOnly(value);
+	return /* @__PURE__ */ jsxs(FieldFrame, {
+		...field,
+		id: ids.id,
+		disabled,
+		children: [name && /* @__PURE__ */ jsx("input", {
+			disabled,
+			name,
+			type: "hidden",
+			value: value ?? ""
+		}), /* @__PURE__ */ jsxs(Popover, {
+			open,
+			onOpenChange: setOpen,
+			children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+				render: /* @__PURE__ */ jsx(Button, {
+					...ids,
+					disabled,
+					variant: "secondary",
+					className: "justify-between"
+				}),
+				children: [selected ? selected.toLocaleDateString(locale.code, {
+					day: "numeric",
+					month: "short",
+					year: "numeric"
+				}) : "Choose a date", /* @__PURE__ */ jsx(CalendarIcon, { "aria-hidden": "true" })]
+			}), /* @__PURE__ */ jsx(PopoverContent, {
+				"aria-label": `${label} calendar`,
+				className: "w-auto p-0",
+				align: "start",
+				children: /* @__PURE__ */ jsx(Calendar, {
+					autoFocus: true,
+					defaultMonth: selected ?? defaultMonth,
+					locale,
+					mode: "single",
+					onSelect: (date) => {
+						if (date) {
+							onValueChange(formatDateOnly(date));
+							setOpen(false);
+						}
+					},
+					selected
+				})
+			})]
+		})]
+	});
+}
+//#endregion
+export { DatePicker, MoneyField, NumberField, StandaloneCheckboxField, StandaloneSelectField, StandaloneSwitchField, StandaloneTextField, TextArea, formatDateOnly, parseDateOnly };

package/dist/compositions/form-kit/form-context.d.ts

@@ -0,0 +1,10 @@
+//#region src/compositions/form-kit/form-context.d.ts
+/**
+ * The React contexts the Form kit's field and form components read. They are
+ * exported so an app can build its own `createFormHook` with extra field
+ * components next to the kit's: pass these two contexts, spread the kit's
+ * components, and add yours. `@tanstack/react-form` is a peer dependency, so
+ * the app and the kit share one copy and therefore one set of contexts.
+ */
+export declare const fieldContext: import("react").Context<import("@tanstack/react-form").AnyFieldApi>, formContext: import("react").Context<import("@tanstack/react-form").AnyFormApi>, useFieldContext: <TData>() => import("@tanstack/react-form").FieldApi<any, string, TData, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>, useFormContext: () => import("@tanstack/react-form").ReactFormExtendedApi<Record<string, never>, any, any, any, any, any, any, any, any, any, any, any>;
+//#endregion

package/dist/compositions/form-kit/form-context.js

@@ -0,0 +1,12 @@
+import { createFormHookContexts } from "@tanstack/react-form";
+//#region src/compositions/form-kit/form-context.ts
+/**
+* The React contexts the Form kit's field and form components read. They are
+* exported so an app can build its own `createFormHook` with extra field
+* components next to the kit's: pass these two contexts, spread the kit's
+* components, and add yours. `@tanstack/react-form` is a peer dependency, so
+* the app and the kit share one copy and therefore one set of contexts.
+*/
+const { fieldContext, formContext, useFieldContext, useFormContext } = createFormHookContexts();
+//#endregion
+export { fieldContext, formContext, useFieldContext, useFormContext };

package/dist/compositions/form-kit/form-fields.d.ts

@@ -0,0 +1,95 @@
+import * as React from "react";
+//#region src/compositions/form-kit/form-fields.d.ts
+/** One validation message, in the shape shadcn's `FieldError` renders. */
+export interface FormFieldErrorMessage {
+  message: string;
+}
+/**
+ * Normalizes TanStack Form's `field.state.meta.errors` into the messages
+ * shadcn's `FieldError` renders. Validators return strings (function
+ * validators) or Standard Schema issues such as Zod's (`{ message }`);
+ * anything without a non-empty message is dropped.
+ */
+export declare function toFieldErrors(errors: readonly unknown[]): FormFieldErrorMessage[];
+/** Props the Form kit sets on a field's control element. */
+export interface FormFieldControlProps {
+  id: string;
+  name: string;
+  "aria-invalid": boolean;
+  "aria-describedby": string | undefined;
+}
+export interface UseFormFieldOptions {
+  /** Whether the field renders a description, so the control is described by it. */
+  hasDescription: boolean;
+}
+/**
+ * Binds the field in the surrounding `form.AppField` to shadcn's `field`
+ * markup: the control, description and error ids, the invalid state, and the
+ * control's ARIA wiring. The kit's field components use it; an app uses it to
+ * write a field component of its own with the same error association.
+ *
+ * A field is invalid once it is touched and has errors, as in shadcn's
+ * TanStack Form guide. Submitting touches every field.
+ */
+export declare function useFormField<TValue>({ hasDescription }: UseFormFieldOptions): {
+  field: import("@tanstack/react-form").FieldApi<any, string, TValue, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>;
+  value: TValue;
+  isInvalid: boolean;
+  errors: FormFieldErrorMessage[];
+  controlId: string;
+  descriptionId: string;
+  errorId: string;
+  controlProps: FormFieldControlProps;
+};
+/** Props every Form kit field takes besides its control's own props. */
+export interface FormFieldChromeProps {
+  /** The visible label, bound to the control. */
+  label: React.ReactNode;
+  /** Help text under the control; the control is described by it. */
+  description?: React.ReactNode;
+  /** Classes for the wrapping shadcn `Field` (layout, grid spans). */
+  className?: string;
+}
+/** Control props the kit owns and therefore does not accept from the app. */
+type BoundControlProp = "id" | "name" | "value" | "defaultValue" | "onChange" | "onBlur" | "aria-invalid" | "aria-describedby" | "children" | "className";
+export type TextFieldProps = FormFieldChromeProps & Omit<React.ComponentProps<"input">, BoundControlProp | "type"> & {
+  /** A text-like input type. Numbers, dates and files need their own fields. */
+  type?: "text" | "email" | "password" | "search" | "tel" | "url";
+};
+/** A string field rendered as a shadcn `Input`. Use inside `form.AppField`. */
+export declare function TextField({ label, description, className, type, ...inputProps }: TextFieldProps): React.JSX.Element;
+export type TextareaFieldProps = FormFieldChromeProps & Omit<React.ComponentProps<"textarea">, BoundControlProp>;
+/** A string field rendered as a shadcn `Textarea`. Use inside `form.AppField`. */
+export declare function TextareaField({ label, description, className, ...textareaProps }: TextareaFieldProps): React.JSX.Element;
+/** One choice of a `SelectField`. */
+export interface SelectFieldOption {
+  value: string;
+  label: React.ReactNode;
+  disabled?: boolean;
+}
+export interface SelectFieldProps extends FormFieldChromeProps {
+  options: readonly SelectFieldOption[];
+  /** Shown while the value is the empty string (no choice yet). */
+  placeholder?: React.ReactNode;
+  disabled?: boolean;
+}
+/**
+ * A string field rendered as a shadcn `Select`. The empty string means "no
+ * choice", so a schema rejects it to make the field required. The field
+ * counts as blurred when its popup closes. Use inside `form.AppField`.
+ */
+export declare function SelectField({ label, description, className, options, placeholder, disabled }: SelectFieldProps): React.JSX.Element;
+export interface ToggleFieldProps extends FormFieldChromeProps {
+  disabled?: boolean;
+}
+/**
+ * A boolean field rendered as a shadcn `Checkbox`, with the label, description
+ * and error beside it. Use inside `form.AppField`.
+ */
+export declare function CheckboxField({ label, description, className, disabled }: ToggleFieldProps): React.JSX.Element;
+/**
+ * A boolean field rendered as a shadcn `Switch`, with the label, description
+ * and error before it. Use inside `form.AppField`.
+ */
+export declare function SwitchField({ label, description, className, disabled }: ToggleFieldProps): React.JSX.Element;
+//#endregion