@diwauhris/ui 1.0.0

package/lib/index13.cjs

@@ -0,0 +1,57 @@
+const require_FieldContext = require("./index12.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+//#region src/ui-library/gallery/field/Field.tsx
+/**
+* Field — Gallery-native form field wrapper.
+* Copied from shared/components/Field.tsx, updated to use gallery-local FieldContext.
+*/
+/**
+* Form field wrapper: label + control + inline error.
+*
+* Publishes a FieldContext so that Combobox, DatePicker, and any
+* FieldInput inside this wrapper automatically receive the correct id,
+* aria-required, aria-invalid, and aria-describedby — with no prop threading.
+*/
+function Field({ label, required = false, error, children, inputId }) {
+	const generatedId = (0, react.useId)();
+	const fieldId = inputId ?? generatedId;
+	const errorId = `${fieldId}-error`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FieldContext.FieldContext, {
+		value: {
+			inputId: fieldId,
+			errorId,
+			required,
+			invalid: !!error
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: `flex flex-col gap-1.5${error ? " shake" : ""}`,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+					htmlFor: fieldId,
+					className: "text-xs font-semibold text-slate-600 select-none",
+					children: [label, required && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-rose-500 ml-0.5",
+						"aria-hidden": "true",
+						children: " *"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "sr-only",
+						children: " (required)"
+					})] })]
+				}),
+				children,
+				error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					id: errorId,
+					role: "alert",
+					"aria-live": "polite",
+					className: "text-xs font-medium text-rose-500 leading-snug",
+					children: error
+				})
+			]
+		})
+	});
+}
+//#endregion
+exports.Field = Field;
+
+//# sourceMappingURL=index13.cjs.map

package/lib/index13.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index13.cjs","names":[],"sources":["../src/ui-library/gallery/field/Field.tsx"],"sourcesContent":["/**\n * Field — Gallery-native form field wrapper.\n * Copied from shared/components/Field.tsx, updated to use gallery-local FieldContext.\n */\nimport { type ReactNode, useId } from 'react';\nimport { FieldContext } from './FieldContext';\n\ninterface FieldProps {\n  label: string;\n  required?: boolean;\n  error?: string;\n  children: ReactNode;\n  inputId?: string;\n}\n\n/**\n * Form field wrapper: label + control + inline error.\n *\n * Publishes a FieldContext so that Combobox, DatePicker, and any\n * FieldInput inside this wrapper automatically receive the correct id,\n * aria-required, aria-invalid, and aria-describedby — with no prop threading.\n */\nexport function Field({ label, required = false, error, children, inputId }: FieldProps) {\n  const generatedId = useId();\n  const fieldId = inputId ?? generatedId;\n  const errorId = `${fieldId}-error`;\n\n  return (\n    <FieldContext value={{\n      inputId: fieldId,\n      errorId,\n      required,\n      invalid: !!error,\n    }}>\n      <div className={`flex flex-col gap-1.5${error ? ' shake' : ''}`}>\n        {/* Label — sentence case, medium weight, visible but not dominant */}\n        <label\n          htmlFor={fieldId}\n          className=\"text-xs font-semibold text-slate-600 select-none\"\n        >\n          {label}\n          {required && (\n            <>\n              <span className=\"text-rose-500 ml-0.5\" aria-hidden=\"true\"> *</span>\n              <span className=\"sr-only\"> (required)</span>\n            </>\n          )}\n        </label>\n\n        {/* Control slot */}\n        {children}\n\n        {/* Inline validation error */}\n        {error && (\n          <p\n            id={errorId}\n            role=\"alert\"\n            aria-live=\"polite\"\n            className=\"text-xs font-medium text-rose-500 leading-snug\"\n          >\n            {error}\n          </p>\n        )}\n      </div>\n    </FieldContext>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAsBA,SAAgB,MAAM,EAAE,OAAO,WAAW,OAAO,OAAO,UAAU,WAAuB;CACvF,MAAM,eAAA,GAAc,MAAA,MAAA,CAAM;CAC1B,MAAM,UAAU,WAAW;CAC3B,MAAM,UAAU,GAAG,QAAQ;CAE3B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,qBAAA,cAAD;EAAc,OAAO;GACnB,SAAS;GACT;GACA;GACA,SAAS,CAAC,CAAC;EACb;EACE,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GAAK,WAAW,wBAAwB,QAAQ,WAAW;GAA3D,UAAA;IAEE,iBAAA,GAAA,kBAAA,KAAA,CAAC,SAAD;KACE,SAAS;KACT,WAAU;KAFZ,UAAA,CAIG,OACA,YACC,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;MAAM,WAAU;MAAuB,eAAY;MAAO,UAAA;KAAQ,CAAA,GAClE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;MAAM,WAAU;MAAU,UAAA;KAAiB,CAAA,CAC3C,EAAA,CAAA,CAEC;;IAGN;IAGA,SACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;KACE,IAAI;KACJ,MAAK;KACL,aAAU;KACV,WAAU;KAET,UAAA;IACA,CAAA;GAEF;;CACO,CAAA;AAElB"}

package/lib/index13.mjs

@@ -0,0 +1,57 @@
+import { FieldContext } from "./index12.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+//#region src/ui-library/gallery/field/Field.tsx
+/**
+* Field — Gallery-native form field wrapper.
+* Copied from shared/components/Field.tsx, updated to use gallery-local FieldContext.
+*/
+/**
+* Form field wrapper: label + control + inline error.
+*
+* Publishes a FieldContext so that Combobox, DatePicker, and any
+* FieldInput inside this wrapper automatically receive the correct id,
+* aria-required, aria-invalid, and aria-describedby — with no prop threading.
+*/
+function Field({ label, required = false, error, children, inputId }) {
+	const generatedId = useId();
+	const fieldId = inputId ?? generatedId;
+	const errorId = `${fieldId}-error`;
+	return /* @__PURE__ */ jsx(FieldContext, {
+		value: {
+			inputId: fieldId,
+			errorId,
+			required,
+			invalid: !!error
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			className: `flex flex-col gap-1.5${error ? " shake" : ""}`,
+			children: [
+				/* @__PURE__ */ jsxs("label", {
+					htmlFor: fieldId,
+					className: "text-xs font-semibold text-slate-600 select-none",
+					children: [label, required && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						className: "text-rose-500 ml-0.5",
+						"aria-hidden": "true",
+						children: " *"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: " (required)"
+					})] })]
+				}),
+				children,
+				error && /* @__PURE__ */ jsx("p", {
+					id: errorId,
+					role: "alert",
+					"aria-live": "polite",
+					className: "text-xs font-medium text-rose-500 leading-snug",
+					children: error
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { Field };
+
+//# sourceMappingURL=index13.mjs.map

package/lib/index13.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index13.mjs","names":[],"sources":["../src/ui-library/gallery/field/Field.tsx"],"sourcesContent":["/**\n * Field — Gallery-native form field wrapper.\n * Copied from shared/components/Field.tsx, updated to use gallery-local FieldContext.\n */\nimport { type ReactNode, useId } from 'react';\nimport { FieldContext } from './FieldContext';\n\ninterface FieldProps {\n  label: string;\n  required?: boolean;\n  error?: string;\n  children: ReactNode;\n  inputId?: string;\n}\n\n/**\n * Form field wrapper: label + control + inline error.\n *\n * Publishes a FieldContext so that Combobox, DatePicker, and any\n * FieldInput inside this wrapper automatically receive the correct id,\n * aria-required, aria-invalid, and aria-describedby — with no prop threading.\n */\nexport function Field({ label, required = false, error, children, inputId }: FieldProps) {\n  const generatedId = useId();\n  const fieldId = inputId ?? generatedId;\n  const errorId = `${fieldId}-error`;\n\n  return (\n    <FieldContext value={{\n      inputId: fieldId,\n      errorId,\n      required,\n      invalid: !!error,\n    }}>\n      <div className={`flex flex-col gap-1.5${error ? ' shake' : ''}`}>\n        {/* Label — sentence case, medium weight, visible but not dominant */}\n        <label\n          htmlFor={fieldId}\n          className=\"text-xs font-semibold text-slate-600 select-none\"\n        >\n          {label}\n          {required && (\n            <>\n              <span className=\"text-rose-500 ml-0.5\" aria-hidden=\"true\"> *</span>\n              <span className=\"sr-only\"> (required)</span>\n            </>\n          )}\n        </label>\n\n        {/* Control slot */}\n        {children}\n\n        {/* Inline validation error */}\n        {error && (\n          <p\n            id={errorId}\n            role=\"alert\"\n            aria-live=\"polite\"\n            className=\"text-xs font-medium text-rose-500 leading-snug\"\n          >\n            {error}\n          </p>\n        )}\n      </div>\n    </FieldContext>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAsBA,SAAgB,MAAM,EAAE,OAAO,WAAW,OAAO,OAAO,UAAU,WAAuB;CACvF,MAAM,cAAc,MAAM;CAC1B,MAAM,UAAU,WAAW;CAC3B,MAAM,UAAU,GAAG,QAAQ;CAE3B,OACE,oBAAC,cAAD;EAAc,OAAO;GACnB,SAAS;GACT;GACA;GACA,SAAS,CAAC,CAAC;EACb;EACE,UAAA,qBAAC,OAAD;GAAK,WAAW,wBAAwB,QAAQ,WAAW;GAA3D,UAAA;IAEE,qBAAC,SAAD;KACE,SAAS;KACT,WAAU;KAFZ,UAAA,CAIG,OACA,YACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;MAAM,WAAU;MAAuB,eAAY;MAAO,UAAA;KAAQ,CAAA,GAClE,oBAAC,QAAD;MAAM,WAAU;MAAU,UAAA;KAAiB,CAAA,CAC3C,EAAA,CAAA,CAEC;;IAGN;IAGA,SACC,oBAAC,KAAD;KACE,IAAI;KACJ,MAAK;KACL,aAAU;KACV,WAAU;KAET,UAAA;IACA,CAAA;GAEF;;CACO,CAAA;AAElB"}

package/lib/index14.cjs

@@ -0,0 +1,10 @@
+let clsx = require("clsx");
+let tailwind_merge = require("tailwind-merge");
+//#region src/lib/utils.ts
+function cn(...inputs) {
+	return (0, tailwind_merge.twMerge)((0, clsx.clsx)(inputs));
+}
+//#endregion
+exports.cn = cn;
+
+//# sourceMappingURL=index14.cjs.map

package/lib/index14.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index14.cjs","names":[],"sources":["../src/lib/utils.ts"],"sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"],"mappings":";;;AAGA,SAAgB,GAAG,GAAG,QAAsB;CAC1C,QAAA,GAAO,eAAA,QAAA,EAAA,GAAQ,KAAA,KAAA,CAAK,MAAM,CAAC;AAC7B"}

package/lib/index14.mjs

@@ -0,0 +1,10 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+//#region src/lib/utils.ts
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+//#endregion
+export { cn };
+
+//# sourceMappingURL=index14.mjs.map

package/lib/index14.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index14.mjs","names":[],"sources":["../src/lib/utils.ts"],"sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"],"mappings":";;;AAGA,SAAgB,GAAG,GAAG,QAAsB;CAC1C,OAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B"}

package/lib/index15.cjs

@@ -0,0 +1,30 @@
+const require_FieldContext = require("./index12.cjs");
+const require_utils = require("./index14.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/ui-library/gallery/field-input/FieldInput.tsx
+/**
+* FieldInput — Gallery-native context-aware <input> wrapper.
+* Copied from shared/components/FieldInput.tsx.
+* Updated to import FieldContext from gallery-local field directory
+* and to carry full DIWA visual styling.
+*/
+function FieldInput({ id, "aria-required": ariaRequired, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy, className = "", disabled, ...rest }) {
+	const ctx = require_FieldContext.useFieldContext();
+	const resolvedId = id ?? ctx?.inputId;
+	const resolvedRequired = ariaRequired ?? (ctx?.required ? "true" : void 0);
+	const resolvedInvalid = ariaInvalid ?? (ctx?.invalid ? "true" : void 0);
+	const resolvedDescribedBy = ariaDescribedBy ?? (ctx?.invalid && ctx?.errorId ? ctx.errorId : void 0);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+		id: resolvedId,
+		"aria-required": resolvedRequired,
+		"aria-invalid": resolvedInvalid,
+		"aria-describedby": resolvedDescribedBy,
+		disabled,
+		className: require_utils.cn("h-10 w-full rounded-md border bg-white px-3.5 text-sm font-medium text-slate-900", "outline-none transition-all duration-150", "placeholder:text-slate-400", resolvedInvalid === "true" ? "border-rose-300 focus:border-rose-400 focus:ring-2 focus:ring-rose-100" : "border-slate-200 hover:border-slate-300 focus:border-brand-blue/50 focus:ring-2 focus:ring-brand-blue/15", disabled && "cursor-not-allowed bg-slate-50 text-slate-400 opacity-60", className),
+		...rest
+	});
+}
+//#endregion
+exports.FieldInput = FieldInput;
+
+//# sourceMappingURL=index15.cjs.map

package/lib/index15.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index15.cjs","names":[],"sources":["../src/ui-library/gallery/field-input/FieldInput.tsx"],"sourcesContent":["/**\n * FieldInput — Gallery-native context-aware <input> wrapper.\n * Copied from shared/components/FieldInput.tsx.\n * Updated to import FieldContext from gallery-local field directory\n * and to carry full DIWA visual styling.\n */\nimport { cn } from '../../../lib/utils';\nimport { useFieldContext } from '../field/FieldContext';\n\ntype FieldInputProps = React.ComponentProps<'input'>;\n\nexport function FieldInput({\n  id,\n  'aria-required': ariaRequired,\n  'aria-invalid': ariaInvalid,\n  'aria-describedby': ariaDescribedBy,\n  className = '',\n  disabled,\n  ...rest\n}: FieldInputProps) {\n  const ctx = useFieldContext();\n\n  const resolvedId          = id              ?? ctx?.inputId;\n  const resolvedRequired    = ariaRequired    ?? (ctx?.required ? 'true' : undefined);\n  const resolvedInvalid     = ariaInvalid     ?? (ctx?.invalid  ? 'true' : undefined);\n  const resolvedDescribedBy = ariaDescribedBy ?? (ctx?.invalid && ctx?.errorId ? ctx.errorId : undefined);\n\n  const isInvalid = resolvedInvalid === 'true';\n\n  return (\n    <input\n      id={resolvedId}\n      aria-required={resolvedRequired}\n      aria-invalid={resolvedInvalid}\n      aria-describedby={resolvedDescribedBy}\n      disabled={disabled}\n      className={cn(\n        // Layout + sizing\n        'h-10 w-full rounded-md border bg-white px-3.5 text-sm font-medium text-slate-900',\n        'outline-none transition-all duration-150',\n        'placeholder:text-slate-400',\n        // Default border + focus ring\n        isInvalid\n          ? 'border-rose-300 focus:border-rose-400 focus:ring-2 focus:ring-rose-100'\n          : 'border-slate-200 hover:border-slate-300 focus:border-brand-blue/50 focus:ring-2 focus:ring-brand-blue/15',\n        // Disabled\n        disabled && 'cursor-not-allowed bg-slate-50 text-slate-400 opacity-60',\n        className,\n      )}\n      {...rest}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;AAWA,SAAgB,WAAW,EACzB,IACA,iBAAiB,cACjB,gBAAgB,aAChB,oBAAoB,iBACpB,YAAY,IACZ,UACA,GAAG,QACe;CAClB,MAAM,MAAM,qBAAA,gBAAgB;CAE5B,MAAM,aAAsB,MAAmB,KAAK;CACpD,MAAM,mBAAsB,iBAAoB,KAAK,WAAW,SAAS,KAAA;CACzE,MAAM,kBAAsB,gBAAoB,KAAK,UAAW,SAAS,KAAA;CACzE,MAAM,sBAAsB,oBAAoB,KAAK,WAAW,KAAK,UAAU,IAAI,UAAU,KAAA;CAI7F,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;EACE,IAAI;EACJ,iBAAe;EACf,gBAAc;EACd,oBAAkB;EACR;EACV,WAAW,cAAA,GAET,oFACA,4CACA,8BAbY,oBAAoB,SAgB5B,2EACA,4GAEJ,YAAY,4DACZ,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/lib/index15.mjs

@@ -0,0 +1,30 @@
+import { useFieldContext } from "./index12.mjs";
+import { cn } from "./index14.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui-library/gallery/field-input/FieldInput.tsx
+/**
+* FieldInput — Gallery-native context-aware <input> wrapper.
+* Copied from shared/components/FieldInput.tsx.
+* Updated to import FieldContext from gallery-local field directory
+* and to carry full DIWA visual styling.
+*/
+function FieldInput({ id, "aria-required": ariaRequired, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy, className = "", disabled, ...rest }) {
+	const ctx = useFieldContext();
+	const resolvedId = id ?? ctx?.inputId;
+	const resolvedRequired = ariaRequired ?? (ctx?.required ? "true" : void 0);
+	const resolvedInvalid = ariaInvalid ?? (ctx?.invalid ? "true" : void 0);
+	const resolvedDescribedBy = ariaDescribedBy ?? (ctx?.invalid && ctx?.errorId ? ctx.errorId : void 0);
+	return /* @__PURE__ */ jsx("input", {
+		id: resolvedId,
+		"aria-required": resolvedRequired,
+		"aria-invalid": resolvedInvalid,
+		"aria-describedby": resolvedDescribedBy,
+		disabled,
+		className: cn("h-10 w-full rounded-md border bg-white px-3.5 text-sm font-medium text-slate-900", "outline-none transition-all duration-150", "placeholder:text-slate-400", resolvedInvalid === "true" ? "border-rose-300 focus:border-rose-400 focus:ring-2 focus:ring-rose-100" : "border-slate-200 hover:border-slate-300 focus:border-brand-blue/50 focus:ring-2 focus:ring-brand-blue/15", disabled && "cursor-not-allowed bg-slate-50 text-slate-400 opacity-60", className),
+		...rest
+	});
+}
+//#endregion
+export { FieldInput };
+
+//# sourceMappingURL=index15.mjs.map

package/lib/index15.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index15.mjs","names":[],"sources":["../src/ui-library/gallery/field-input/FieldInput.tsx"],"sourcesContent":["/**\n * FieldInput — Gallery-native context-aware <input> wrapper.\n * Copied from shared/components/FieldInput.tsx.\n * Updated to import FieldContext from gallery-local field directory\n * and to carry full DIWA visual styling.\n */\nimport { cn } from '../../../lib/utils';\nimport { useFieldContext } from '../field/FieldContext';\n\ntype FieldInputProps = React.ComponentProps<'input'>;\n\nexport function FieldInput({\n  id,\n  'aria-required': ariaRequired,\n  'aria-invalid': ariaInvalid,\n  'aria-describedby': ariaDescribedBy,\n  className = '',\n  disabled,\n  ...rest\n}: FieldInputProps) {\n  const ctx = useFieldContext();\n\n  const resolvedId          = id              ?? ctx?.inputId;\n  const resolvedRequired    = ariaRequired    ?? (ctx?.required ? 'true' : undefined);\n  const resolvedInvalid     = ariaInvalid     ?? (ctx?.invalid  ? 'true' : undefined);\n  const resolvedDescribedBy = ariaDescribedBy ?? (ctx?.invalid && ctx?.errorId ? ctx.errorId : undefined);\n\n  const isInvalid = resolvedInvalid === 'true';\n\n  return (\n    <input\n      id={resolvedId}\n      aria-required={resolvedRequired}\n      aria-invalid={resolvedInvalid}\n      aria-describedby={resolvedDescribedBy}\n      disabled={disabled}\n      className={cn(\n        // Layout + sizing\n        'h-10 w-full rounded-md border bg-white px-3.5 text-sm font-medium text-slate-900',\n        'outline-none transition-all duration-150',\n        'placeholder:text-slate-400',\n        // Default border + focus ring\n        isInvalid\n          ? 'border-rose-300 focus:border-rose-400 focus:ring-2 focus:ring-rose-100'\n          : 'border-slate-200 hover:border-slate-300 focus:border-brand-blue/50 focus:ring-2 focus:ring-brand-blue/15',\n        // Disabled\n        disabled && 'cursor-not-allowed bg-slate-50 text-slate-400 opacity-60',\n        className,\n      )}\n      {...rest}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;AAWA,SAAgB,WAAW,EACzB,IACA,iBAAiB,cACjB,gBAAgB,aAChB,oBAAoB,iBACpB,YAAY,IACZ,UACA,GAAG,QACe;CAClB,MAAM,MAAM,gBAAgB;CAE5B,MAAM,aAAsB,MAAmB,KAAK;CACpD,MAAM,mBAAsB,iBAAoB,KAAK,WAAW,SAAS,KAAA;CACzE,MAAM,kBAAsB,gBAAoB,KAAK,UAAW,SAAS,KAAA;CACzE,MAAM,sBAAsB,oBAAoB,KAAK,WAAW,KAAK,UAAU,IAAI,UAAU,KAAA;CAI7F,OACE,oBAAC,SAAD;EACE,IAAI;EACJ,iBAAe;EACf,gBAAc;EACd,oBAAkB;EACR;EACV,WAAW,GAET,oFACA,4CACA,8BAbY,oBAAoB,SAgB5B,2EACA,4GAEJ,YAAY,4DACZ,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/lib/index16.cjs

@@ -0,0 +1,28 @@
+//#region src/ui-library/gallery/shared/fieldStatus.ts
+/**
+* Border + focus-ring classes for the field wrapper/element.
+* Applied via focus: or focus-within: depending on component structure.
+* Interactive color uses brand-blue per the UHRIS brand identity.
+*/
+var FIELD_STATUS_RING_WITHIN = {
+	default: "border-slate-200 focus-within:border-brand-blue/50 focus-within:ring-2 focus-within:ring-brand-blue/15",
+	error: "border-rose-300  focus-within:border-rose-400   focus-within:ring-2 focus-within:ring-rose-100",
+	success: "border-emerald-300 focus-within:border-emerald-400 focus-within:ring-2 focus-within:ring-emerald-100"
+};
+var FIELD_STATUS_RING_DIRECT = {
+	default: "border-slate-200 focus:border-brand-blue/50 focus:ring-2 focus:ring-brand-blue/15",
+	error: "border-rose-300  focus:border-rose-400   focus:ring-2 focus:ring-rose-100",
+	success: "border-emerald-300 focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100"
+};
+/** Helper/error text color */
+var FIELD_HELPER_COLOR = {
+	default: "text-slate-400",
+	error: "text-rose-500",
+	success: "text-emerald-600"
+};
+//#endregion
+exports.FIELD_HELPER_COLOR = FIELD_HELPER_COLOR;
+exports.FIELD_STATUS_RING_DIRECT = FIELD_STATUS_RING_DIRECT;
+exports.FIELD_STATUS_RING_WITHIN = FIELD_STATUS_RING_WITHIN;
+
+//# sourceMappingURL=index16.cjs.map

package/lib/index16.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index16.cjs","names":[],"sources":["../src/ui-library/gallery/shared/fieldStatus.ts"],"sourcesContent":["/**\n * Shared field-status style constants.\n *\n * Used by Input, Textarea, and Select — the three form controls that share\n * an identical status → ring-color and status → helper-text-color mapping.\n *\n * This is an internal utility. It is NOT a public design-system API.\n * Do not import this outside the ui-library/gallery directory.\n */\n\nexport type FieldStatus = 'default' | 'error' | 'success';\n\n/**\n * Border + focus-ring classes for the field wrapper/element.\n * Applied via focus: or focus-within: depending on component structure.\n * Interactive color uses brand-blue per the UHRIS brand identity.\n */\nexport const FIELD_STATUS_RING_WITHIN: Record<FieldStatus, string> = {\n  default: 'border-slate-200 focus-within:border-brand-blue/50 focus-within:ring-2 focus-within:ring-brand-blue/15',\n  error:   'border-rose-300  focus-within:border-rose-400   focus-within:ring-2 focus-within:ring-rose-100',\n  success: 'border-emerald-300 focus-within:border-emerald-400 focus-within:ring-2 focus-within:ring-emerald-100',\n};\n\nexport const FIELD_STATUS_RING_DIRECT: Record<FieldStatus, string> = {\n  default: 'border-slate-200 focus:border-brand-blue/50 focus:ring-2 focus:ring-brand-blue/15',\n  error:   'border-rose-300  focus:border-rose-400   focus:ring-2 focus:ring-rose-100',\n  success: 'border-emerald-300 focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100',\n};\n\n/** Helper/error text color */\nexport const FIELD_HELPER_COLOR: Record<FieldStatus, string> = {\n  default: 'text-slate-400',\n  error:   'text-rose-500',\n  success: 'text-emerald-600',\n};\n"],"mappings":";;;;;;AAiBA,IAAa,2BAAwD;CACnE,SAAS;CACT,OAAS;CACT,SAAS;AACX;AAEA,IAAa,2BAAwD;CACnE,SAAS;CACT,OAAS;CACT,SAAS;AACX;;AAGA,IAAa,qBAAkD;CAC7D,SAAS;CACT,OAAS;CACT,SAAS;AACX"}

package/lib/index16.mjs

@@ -0,0 +1,26 @@
+//#region src/ui-library/gallery/shared/fieldStatus.ts
+/**
+* Border + focus-ring classes for the field wrapper/element.
+* Applied via focus: or focus-within: depending on component structure.
+* Interactive color uses brand-blue per the UHRIS brand identity.
+*/
+var FIELD_STATUS_RING_WITHIN = {
+	default: "border-slate-200 focus-within:border-brand-blue/50 focus-within:ring-2 focus-within:ring-brand-blue/15",
+	error: "border-rose-300  focus-within:border-rose-400   focus-within:ring-2 focus-within:ring-rose-100",
+	success: "border-emerald-300 focus-within:border-emerald-400 focus-within:ring-2 focus-within:ring-emerald-100"
+};
+var FIELD_STATUS_RING_DIRECT = {
+	default: "border-slate-200 focus:border-brand-blue/50 focus:ring-2 focus:ring-brand-blue/15",
+	error: "border-rose-300  focus:border-rose-400   focus:ring-2 focus:ring-rose-100",
+	success: "border-emerald-300 focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100"
+};
+/** Helper/error text color */
+var FIELD_HELPER_COLOR = {
+	default: "text-slate-400",
+	error: "text-rose-500",
+	success: "text-emerald-600"
+};
+//#endregion
+export { FIELD_HELPER_COLOR, FIELD_STATUS_RING_DIRECT, FIELD_STATUS_RING_WITHIN };
+
+//# sourceMappingURL=index16.mjs.map

package/lib/index16.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index16.mjs","names":[],"sources":["../src/ui-library/gallery/shared/fieldStatus.ts"],"sourcesContent":["/**\n * Shared field-status style constants.\n *\n * Used by Input, Textarea, and Select — the three form controls that share\n * an identical status → ring-color and status → helper-text-color mapping.\n *\n * This is an internal utility. It is NOT a public design-system API.\n * Do not import this outside the ui-library/gallery directory.\n */\n\nexport type FieldStatus = 'default' | 'error' | 'success';\n\n/**\n * Border + focus-ring classes for the field wrapper/element.\n * Applied via focus: or focus-within: depending on component structure.\n * Interactive color uses brand-blue per the UHRIS brand identity.\n */\nexport const FIELD_STATUS_RING_WITHIN: Record<FieldStatus, string> = {\n  default: 'border-slate-200 focus-within:border-brand-blue/50 focus-within:ring-2 focus-within:ring-brand-blue/15',\n  error:   'border-rose-300  focus-within:border-rose-400   focus-within:ring-2 focus-within:ring-rose-100',\n  success: 'border-emerald-300 focus-within:border-emerald-400 focus-within:ring-2 focus-within:ring-emerald-100',\n};\n\nexport const FIELD_STATUS_RING_DIRECT: Record<FieldStatus, string> = {\n  default: 'border-slate-200 focus:border-brand-blue/50 focus:ring-2 focus:ring-brand-blue/15',\n  error:   'border-rose-300  focus:border-rose-400   focus:ring-2 focus:ring-rose-100',\n  success: 'border-emerald-300 focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100',\n};\n\n/** Helper/error text color */\nexport const FIELD_HELPER_COLOR: Record<FieldStatus, string> = {\n  default: 'text-slate-400',\n  error:   'text-rose-500',\n  success: 'text-emerald-600',\n};\n"],"mappings":";;;;;;AAiBA,IAAa,2BAAwD;CACnE,SAAS;CACT,OAAS;CACT,SAAS;AACX;AAEA,IAAa,2BAAwD;CACnE,SAAS;CACT,OAAS;CACT,SAAS;AACX;;AAGA,IAAa,qBAAkD;CAC7D,SAAS;CACT,OAAS;CACT,SAAS;AACX"}

package/lib/index17.cjs

@@ -0,0 +1,43 @@
+const require_fieldStatus = require("./index16.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/ui-library/gallery/input/Input.tsx
+function Input({ status = "default", helper, prefix, suffix, disabled, className = "", ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "w-full",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: [
+				"flex w-full items-center rounded-md border bg-white transition",
+				require_fieldStatus.FIELD_STATUS_RING_WITHIN[status],
+				disabled ? "cursor-not-allowed bg-slate-50 opacity-60" : "",
+				className
+			].filter(Boolean).join(" "),
+			children: [
+				prefix && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "flex shrink-0 items-center pl-3.5 text-slate-400",
+					children: prefix
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					disabled,
+					className: [
+						"w-full bg-transparent py-2.5 text-sm font-medium text-slate-900 outline-none placeholder:text-slate-400",
+						prefix ? "pl-2" : "pl-4",
+						suffix ? "pr-2" : "pr-4",
+						disabled ? "cursor-not-allowed" : ""
+					].filter(Boolean).join(" "),
+					...props
+				}),
+				suffix && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "flex shrink-0 items-center pr-3.5 text-slate-400",
+					children: suffix
+				})
+			]
+		}), helper && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: `mt-1.5 text-xs font-medium ${require_fieldStatus.FIELD_HELPER_COLOR[status]}`,
+			children: helper
+		})]
+	});
+}
+//#endregion
+exports.Input = Input;
+
+//# sourceMappingURL=index17.cjs.map

package/lib/index17.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index17.cjs","names":[],"sources":["../src/ui-library/gallery/input/Input.tsx"],"sourcesContent":["/**\n * Input — Design System Component\n *\n * A single-line text entry field. Supports prefix/suffix slots,\n * helper text, validation states, and common input types.\n *\n * The label is NOT included in this component. Use a <label> element\n * or the companion <Field> wrapper from the consuming feature.\n * This keeps Input a pure primitive.\n */\n\nimport type { ReactNode } from 'react';\nimport {\n  type FieldStatus,\n  FIELD_STATUS_RING_WITHIN,\n  FIELD_HELPER_COLOR,\n} from '../shared/fieldStatus';\n\nexport type InputStatus = FieldStatus;\n\nexport interface InputProps extends Omit<React.ComponentProps<'input'>, 'prefix' | 'size'> {\n  /** Visual validation state */\n  status?: InputStatus;\n  /** Helper text shown below the input */\n  helper?: string;\n  /** Element rendered inside the input on the left (e.g. an icon) */\n  prefix?: ReactNode;\n  /** Element rendered inside the input on the right (e.g. a unit label or clear button) */\n  suffix?: ReactNode;\n}\n\n// ── Component ─────────────────────────────────────────────────────────────────\n\nexport function Input({\n  status = 'default',\n  helper,\n  prefix,\n  suffix,\n  disabled,\n  className = '',\n  ...props\n}: InputProps) {\n  return (\n    <div className=\"w-full\">\n      {/* Input wrapper — handles focus-ring as a unit so prefix/suffix are inside the ring */}\n      <div\n        className={[\n          'flex w-full items-center rounded-md border bg-white transition',\n          FIELD_STATUS_RING_WITHIN[status],\n          disabled ? 'cursor-not-allowed bg-slate-50 opacity-60' : '',\n          className,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n      >\n        {prefix && (\n          <span className=\"flex shrink-0 items-center pl-3.5 text-slate-400\">\n            {prefix}\n          </span>\n        )}\n        <input\n          disabled={disabled}\n          className={[\n            'w-full bg-transparent py-2.5 text-sm font-medium text-slate-900 outline-none placeholder:text-slate-400',\n            prefix  ? 'pl-2' : 'pl-4',\n            suffix  ? 'pr-2' : 'pr-4',\n            disabled ? 'cursor-not-allowed' : '',\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          {...props}\n        />\n        {suffix && (\n          <span className=\"flex shrink-0 items-center pr-3.5 text-slate-400\">\n            {suffix}\n          </span>\n        )}\n      </div>\n\n      {/* Helper text */}\n      {helper && (\n        <p className={`mt-1.5 text-xs font-medium ${FIELD_HELPER_COLOR[status]}`}>\n          {helper}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;AAiCA,SAAgB,MAAM,EACpB,SAAS,WACT,QACA,QACA,QACA,UACA,YAAY,IACZ,GAAG,SACU;CACb,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CAEE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GACE,WAAW;IACT;IACA,oBAAA,yBAAyB;IACzB,WAAW,8CAA8C;IACzD;GACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;GARb,UAAA;IAUG,UACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;KAAM,WAAU;KACb,UAAA;IACG,CAAA;IAER,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;KACY;KACV,WAAW;MACT;MACA,SAAU,SAAS;MACnB,SAAU,SAAS;MACnB,WAAW,uBAAuB;KACpC,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;KACX,GAAI;IACL,CAAA;IACA,UACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;KAAM,WAAU;KACb,UAAA;IACG,CAAA;GAEL;EAGJ,CAAA,GAAA,UACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;GAAG,WAAW,8BAA8B,oBAAA,mBAAmB;GAC5D,UAAA;EACA,CAAA,CAEF;;AAET"}

package/lib/index17.mjs

@@ -0,0 +1,43 @@
+import { FIELD_HELPER_COLOR, FIELD_STATUS_RING_WITHIN } from "./index16.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui-library/gallery/input/Input.tsx
+function Input({ status = "default", helper, prefix, suffix, disabled, className = "", ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "w-full",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: [
+				"flex w-full items-center rounded-md border bg-white transition",
+				FIELD_STATUS_RING_WITHIN[status],
+				disabled ? "cursor-not-allowed bg-slate-50 opacity-60" : "",
+				className
+			].filter(Boolean).join(" "),
+			children: [
+				prefix && /* @__PURE__ */ jsx("span", {
+					className: "flex shrink-0 items-center pl-3.5 text-slate-400",
+					children: prefix
+				}),
+				/* @__PURE__ */ jsx("input", {
+					disabled,
+					className: [
+						"w-full bg-transparent py-2.5 text-sm font-medium text-slate-900 outline-none placeholder:text-slate-400",
+						prefix ? "pl-2" : "pl-4",
+						suffix ? "pr-2" : "pr-4",
+						disabled ? "cursor-not-allowed" : ""
+					].filter(Boolean).join(" "),
+					...props
+				}),
+				suffix && /* @__PURE__ */ jsx("span", {
+					className: "flex shrink-0 items-center pr-3.5 text-slate-400",
+					children: suffix
+				})
+			]
+		}), helper && /* @__PURE__ */ jsx("p", {
+			className: `mt-1.5 text-xs font-medium ${FIELD_HELPER_COLOR[status]}`,
+			children: helper
+		})]
+	});
+}
+//#endregion
+export { Input };
+
+//# sourceMappingURL=index17.mjs.map

package/lib/index17.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index17.mjs","names":[],"sources":["../src/ui-library/gallery/input/Input.tsx"],"sourcesContent":["/**\n * Input — Design System Component\n *\n * A single-line text entry field. Supports prefix/suffix slots,\n * helper text, validation states, and common input types.\n *\n * The label is NOT included in this component. Use a <label> element\n * or the companion <Field> wrapper from the consuming feature.\n * This keeps Input a pure primitive.\n */\n\nimport type { ReactNode } from 'react';\nimport {\n  type FieldStatus,\n  FIELD_STATUS_RING_WITHIN,\n  FIELD_HELPER_COLOR,\n} from '../shared/fieldStatus';\n\nexport type InputStatus = FieldStatus;\n\nexport interface InputProps extends Omit<React.ComponentProps<'input'>, 'prefix' | 'size'> {\n  /** Visual validation state */\n  status?: InputStatus;\n  /** Helper text shown below the input */\n  helper?: string;\n  /** Element rendered inside the input on the left (e.g. an icon) */\n  prefix?: ReactNode;\n  /** Element rendered inside the input on the right (e.g. a unit label or clear button) */\n  suffix?: ReactNode;\n}\n\n// ── Component ─────────────────────────────────────────────────────────────────\n\nexport function Input({\n  status = 'default',\n  helper,\n  prefix,\n  suffix,\n  disabled,\n  className = '',\n  ...props\n}: InputProps) {\n  return (\n    <div className=\"w-full\">\n      {/* Input wrapper — handles focus-ring as a unit so prefix/suffix are inside the ring */}\n      <div\n        className={[\n          'flex w-full items-center rounded-md border bg-white transition',\n          FIELD_STATUS_RING_WITHIN[status],\n          disabled ? 'cursor-not-allowed bg-slate-50 opacity-60' : '',\n          className,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n      >\n        {prefix && (\n          <span className=\"flex shrink-0 items-center pl-3.5 text-slate-400\">\n            {prefix}\n          </span>\n        )}\n        <input\n          disabled={disabled}\n          className={[\n            'w-full bg-transparent py-2.5 text-sm font-medium text-slate-900 outline-none placeholder:text-slate-400',\n            prefix  ? 'pl-2' : 'pl-4',\n            suffix  ? 'pr-2' : 'pr-4',\n            disabled ? 'cursor-not-allowed' : '',\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          {...props}\n        />\n        {suffix && (\n          <span className=\"flex shrink-0 items-center pr-3.5 text-slate-400\">\n            {suffix}\n          </span>\n        )}\n      </div>\n\n      {/* Helper text */}\n      {helper && (\n        <p className={`mt-1.5 text-xs font-medium ${FIELD_HELPER_COLOR[status]}`}>\n          {helper}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;AAiCA,SAAgB,MAAM,EACpB,SAAS,WACT,QACA,QACA,QACA,UACA,YAAY,IACZ,GAAG,SACU;CACb,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CAEE,qBAAC,OAAD;GACE,WAAW;IACT;IACA,yBAAyB;IACzB,WAAW,8CAA8C;IACzD;GACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;GARb,UAAA;IAUG,UACC,oBAAC,QAAD;KAAM,WAAU;KACb,UAAA;IACG,CAAA;IAER,oBAAC,SAAD;KACY;KACV,WAAW;MACT;MACA,SAAU,SAAS;MACnB,SAAU,SAAS;MACnB,WAAW,uBAAuB;KACpC,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;KACX,GAAI;IACL,CAAA;IACA,UACC,oBAAC,QAAD;KAAM,WAAU;KACb,UAAA;IACG,CAAA;GAEL;EAGJ,CAAA,GAAA,UACC,oBAAC,KAAD;GAAG,WAAW,8BAA8B,mBAAmB;GAC5D,UAAA;EACA,CAAA,CAEF;;AAET"}

package/lib/index18.cjs

@@ -0,0 +1,59 @@
+const require_fieldStatus = require("./index16.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+//#region src/ui-library/gallery/textarea/Textarea.tsx
+/**
+* Textarea — Design System Component
+*
+* A multi-line text entry field. Supports validation states,
+* helper text, character count, and resize behavior.
+*/
+var RESIZE_CLASS = {
+	none: "resize-none",
+	vertical: "resize-y",
+	both: "resize"
+};
+function Textarea({ status = "default", helper, maxLength, resize = "vertical", disabled, value, defaultValue, onChange, className = "", ...props }) {
+	const isControlled = value !== void 0;
+	const [uncontrolledLength, setUncontrolledLength] = (0, react.useState)(typeof defaultValue === "string" ? defaultValue.length : 0);
+	const currentLength = isControlled ? typeof value === "string" ? value.length : 0 : uncontrolledLength;
+	const handleChange = (e) => {
+		if (!isControlled) setUncontrolledLength(e.target.value.length);
+		onChange?.(e);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "w-full",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
+			maxLength,
+			disabled,
+			value,
+			defaultValue,
+			onChange: handleChange,
+			className: [
+				"w-full rounded-xl border bg-white px-4 py-3 text-sm font-medium text-slate-900 outline-none transition placeholder:text-slate-400",
+				require_fieldStatus.FIELD_STATUS_RING_DIRECT[status],
+				RESIZE_CLASS[resize],
+				disabled ? "cursor-not-allowed bg-slate-50 opacity-60" : "",
+				className
+			].filter(Boolean).join(" "),
+			...props
+		}), (helper || maxLength !== void 0) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "mt-1.5 flex items-start justify-between gap-2",
+			children: [helper ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: `text-xs font-medium ${require_fieldStatus.FIELD_HELPER_COLOR[status]}`,
+				children: helper
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {}), maxLength !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+				className: "shrink-0 text-xs font-medium text-slate-400",
+				children: [
+					currentLength,
+					" / ",
+					maxLength
+				]
+			})]
+		})]
+	});
+}
+//#endregion
+exports.Textarea = Textarea;
+
+//# sourceMappingURL=index18.cjs.map

package/lib/index18.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index18.cjs","names":[],"sources":["../src/ui-library/gallery/textarea/Textarea.tsx"],"sourcesContent":["/**\n * Textarea — Design System Component\n *\n * A multi-line text entry field. Supports validation states,\n * helper text, character count, and resize behavior.\n */\n\nimport { useState } from 'react';\nimport {\n  type FieldStatus,\n  FIELD_STATUS_RING_DIRECT,\n  FIELD_HELPER_COLOR,\n} from '../shared/fieldStatus';\n\nexport type TextareaStatus = FieldStatus;\nexport type TextareaResize = 'none' | 'vertical' | 'both';\n\nexport interface TextareaProps extends Omit<React.ComponentProps<'textarea'>, 'size'> {\n  status?: TextareaStatus;\n  helper?: string;\n  /** Show a character count: \"n / max\" */\n  maxLength?: number;\n  resize?: TextareaResize;\n}\n\nconst RESIZE_CLASS: Record<TextareaResize, string> = {\n  none:     'resize-none',\n  vertical: 'resize-y',\n  both:     'resize',\n};\n\nexport function Textarea({\n  status = 'default',\n  helper,\n  maxLength,\n  resize = 'vertical',\n  disabled,\n  value,\n  defaultValue,\n  onChange,\n  className = '',\n  ...props\n}: TextareaProps) {\n  // Track character count for both controlled and uncontrolled modes.\n  // For controlled, derive from value. For uncontrolled, maintain local state.\n  const isControlled = value !== undefined;\n  const [uncontrolledLength, setUncontrolledLength] = useState(\n    typeof defaultValue === 'string' ? defaultValue.length : 0,\n  );\n  const currentLength = isControlled\n    ? (typeof value === 'string' ? value.length : 0)\n    : uncontrolledLength;\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n    if (!isControlled) setUncontrolledLength(e.target.value.length);\n    onChange?.(e);\n  };\n\n  return (\n    <div className=\"w-full\">\n      <textarea\n        maxLength={maxLength}\n        disabled={disabled}\n        value={value}\n        defaultValue={defaultValue}\n        onChange={handleChange}\n        className={[\n          'w-full rounded-xl border bg-white px-4 py-3 text-sm font-medium text-slate-900 outline-none transition placeholder:text-slate-400',\n          FIELD_STATUS_RING_DIRECT[status],\n          RESIZE_CLASS[resize],\n          disabled ? 'cursor-not-allowed bg-slate-50 opacity-60' : '',\n          className,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        {...props}\n      />\n\n      {/* Footer row: helper text + char count */}\n      {(helper || maxLength !== undefined) && (\n        <div className=\"mt-1.5 flex items-start justify-between gap-2\">\n          {helper ? (\n            <p className={`text-xs font-medium ${FIELD_HELPER_COLOR[status]}`}>{helper}</p>\n          ) : (\n            <span />\n          )}\n          {maxLength !== undefined && (\n            <p className=\"shrink-0 text-xs font-medium text-slate-400\">\n              {currentLength} / {maxLength}\n            </p>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;AAyBA,IAAM,eAA+C;CACnD,MAAU;CACV,UAAU;CACV,MAAU;AACZ;AAEA,SAAgB,SAAS,EACvB,SAAS,WACT,QACA,WACA,SAAS,YACT,UACA,OACA,cACA,UACA,YAAY,IACZ,GAAG,SACa;CAGhB,MAAM,eAAe,UAAU,KAAA;CAC/B,MAAM,CAAC,oBAAoB,0BAAA,GAAyB,MAAA,SAAA,CAClD,OAAO,iBAAiB,WAAW,aAAa,SAAS,CAC3D;CACA,MAAM,gBAAgB,eACjB,OAAO,UAAU,WAAW,MAAM,SAAS,IAC5C;CAEJ,MAAM,gBAAgB,MAA8C;EAClE,IAAI,CAAC,cAAc,sBAAsB,EAAE,OAAO,MAAM,MAAM;EAC9D,WAAW,CAAC;CACd;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,YAAD;GACa;GACD;GACH;GACO;GACd,UAAU;GACV,WAAW;IACT;IACA,oBAAA,yBAAyB;IACzB,aAAa;IACb,WAAW,8CAA8C;IACzD;GACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;GACX,GAAI;EACL,CAAA,IAGC,UAAU,cAAc,KAAA,MACxB,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACG,SACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;IAAG,WAAW,uBAAuB,oBAAA,mBAAmB;IAAY,UAAA;GAAU,CAAA,IAE9E,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,CAAO,CAAA,GAER,cAAc,KAAA,KACb,iBAAA,GAAA,kBAAA,KAAA,CAAC,KAAD;IAAG,WAAU;IAAb,UAAA;KACG;KAAc;KAAI;IAClB;GAEF,CAAA,CAAA;EAEJ,CAAA,CAAA;;AAET"}

package/lib/index18.mjs

@@ -0,0 +1,59 @@
+import { FIELD_HELPER_COLOR, FIELD_STATUS_RING_DIRECT } from "./index16.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+//#region src/ui-library/gallery/textarea/Textarea.tsx
+/**
+* Textarea — Design System Component
+*
+* A multi-line text entry field. Supports validation states,
+* helper text, character count, and resize behavior.
+*/
+var RESIZE_CLASS = {
+	none: "resize-none",
+	vertical: "resize-y",
+	both: "resize"
+};
+function Textarea({ status = "default", helper, maxLength, resize = "vertical", disabled, value, defaultValue, onChange, className = "", ...props }) {
+	const isControlled = value !== void 0;
+	const [uncontrolledLength, setUncontrolledLength] = useState(typeof defaultValue === "string" ? defaultValue.length : 0);
+	const currentLength = isControlled ? typeof value === "string" ? value.length : 0 : uncontrolledLength;
+	const handleChange = (e) => {
+		if (!isControlled) setUncontrolledLength(e.target.value.length);
+		onChange?.(e);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "w-full",
+		children: [/* @__PURE__ */ jsx("textarea", {
+			maxLength,
+			disabled,
+			value,
+			defaultValue,
+			onChange: handleChange,
+			className: [
+				"w-full rounded-xl border bg-white px-4 py-3 text-sm font-medium text-slate-900 outline-none transition placeholder:text-slate-400",
+				FIELD_STATUS_RING_DIRECT[status],
+				RESIZE_CLASS[resize],
+				disabled ? "cursor-not-allowed bg-slate-50 opacity-60" : "",
+				className
+			].filter(Boolean).join(" "),
+			...props
+		}), (helper || maxLength !== void 0) && /* @__PURE__ */ jsxs("div", {
+			className: "mt-1.5 flex items-start justify-between gap-2",
+			children: [helper ? /* @__PURE__ */ jsx("p", {
+				className: `text-xs font-medium ${FIELD_HELPER_COLOR[status]}`,
+				children: helper
+			}) : /* @__PURE__ */ jsx("span", {}), maxLength !== void 0 && /* @__PURE__ */ jsxs("p", {
+				className: "shrink-0 text-xs font-medium text-slate-400",
+				children: [
+					currentLength,
+					" / ",
+					maxLength
+				]
+			})]
+		})]
+	});
+}
+//#endregion
+export { Textarea };
+
+//# sourceMappingURL=index18.mjs.map

package/lib/index18.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index18.mjs","names":[],"sources":["../src/ui-library/gallery/textarea/Textarea.tsx"],"sourcesContent":["/**\n * Textarea — Design System Component\n *\n * A multi-line text entry field. Supports validation states,\n * helper text, character count, and resize behavior.\n */\n\nimport { useState } from 'react';\nimport {\n  type FieldStatus,\n  FIELD_STATUS_RING_DIRECT,\n  FIELD_HELPER_COLOR,\n} from '../shared/fieldStatus';\n\nexport type TextareaStatus = FieldStatus;\nexport type TextareaResize = 'none' | 'vertical' | 'both';\n\nexport interface TextareaProps extends Omit<React.ComponentProps<'textarea'>, 'size'> {\n  status?: TextareaStatus;\n  helper?: string;\n  /** Show a character count: \"n / max\" */\n  maxLength?: number;\n  resize?: TextareaResize;\n}\n\nconst RESIZE_CLASS: Record<TextareaResize, string> = {\n  none:     'resize-none',\n  vertical: 'resize-y',\n  both:     'resize',\n};\n\nexport function Textarea({\n  status = 'default',\n  helper,\n  maxLength,\n  resize = 'vertical',\n  disabled,\n  value,\n  defaultValue,\n  onChange,\n  className = '',\n  ...props\n}: TextareaProps) {\n  // Track character count for both controlled and uncontrolled modes.\n  // For controlled, derive from value. For uncontrolled, maintain local state.\n  const isControlled = value !== undefined;\n  const [uncontrolledLength, setUncontrolledLength] = useState(\n    typeof defaultValue === 'string' ? defaultValue.length : 0,\n  );\n  const currentLength = isControlled\n    ? (typeof value === 'string' ? value.length : 0)\n    : uncontrolledLength;\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n    if (!isControlled) setUncontrolledLength(e.target.value.length);\n    onChange?.(e);\n  };\n\n  return (\n    <div className=\"w-full\">\n      <textarea\n        maxLength={maxLength}\n        disabled={disabled}\n        value={value}\n        defaultValue={defaultValue}\n        onChange={handleChange}\n        className={[\n          'w-full rounded-xl border bg-white px-4 py-3 text-sm font-medium text-slate-900 outline-none transition placeholder:text-slate-400',\n          FIELD_STATUS_RING_DIRECT[status],\n          RESIZE_CLASS[resize],\n          disabled ? 'cursor-not-allowed bg-slate-50 opacity-60' : '',\n          className,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        {...props}\n      />\n\n      {/* Footer row: helper text + char count */}\n      {(helper || maxLength !== undefined) && (\n        <div className=\"mt-1.5 flex items-start justify-between gap-2\">\n          {helper ? (\n            <p className={`text-xs font-medium ${FIELD_HELPER_COLOR[status]}`}>{helper}</p>\n          ) : (\n            <span />\n          )}\n          {maxLength !== undefined && (\n            <p className=\"shrink-0 text-xs font-medium text-slate-400\">\n              {currentLength} / {maxLength}\n            </p>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;AAyBA,IAAM,eAA+C;CACnD,MAAU;CACV,UAAU;CACV,MAAU;AACZ;AAEA,SAAgB,SAAS,EACvB,SAAS,WACT,QACA,WACA,SAAS,YACT,UACA,OACA,cACA,UACA,YAAY,IACZ,GAAG,SACa;CAGhB,MAAM,eAAe,UAAU,KAAA;CAC/B,MAAM,CAAC,oBAAoB,yBAAyB,SAClD,OAAO,iBAAiB,WAAW,aAAa,SAAS,CAC3D;CACA,MAAM,gBAAgB,eACjB,OAAO,UAAU,WAAW,MAAM,SAAS,IAC5C;CAEJ,MAAM,gBAAgB,MAA8C;EAClE,IAAI,CAAC,cAAc,sBAAsB,EAAE,OAAO,MAAM,MAAM;EAC9D,WAAW,CAAC;CACd;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,oBAAC,YAAD;GACa;GACD;GACH;GACO;GACd,UAAU;GACV,WAAW;IACT;IACA,yBAAyB;IACzB,aAAa;IACb,WAAW,8CAA8C;IACzD;GACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;GACX,GAAI;EACL,CAAA,IAGC,UAAU,cAAc,KAAA,MACxB,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACG,SACC,oBAAC,KAAD;IAAG,WAAW,uBAAuB,mBAAmB;IAAY,UAAA;GAAU,CAAA,IAE9E,oBAAC,QAAD,CAAO,CAAA,GAER,cAAc,KAAA,KACb,qBAAC,KAAD;IAAG,WAAU;IAAb,UAAA;KACG;KAAc;KAAI;IAClB;GAEF,CAAA,CAAA;EAEJ,CAAA,CAAA;;AAET"}

package/lib/index19.cjs

@@ -0,0 +1,67 @@
+const require_fieldStatus = require("./index16.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+//#region src/ui-library/gallery/select/Select.tsx
+/**
+* Select — Design System Component
+*
+* A single-value selection control. Wraps the native <select> element
+* with design-system styling. Accessible by default — keyboard and
+* screen-reader behavior is inherited from the browser.
+*
+* A custom dropdown (non-native) is NOT used here because:
+*   - Native <select> provides full keyboard/AT support at zero cost.
+*   - Custom dropdowns require significant ARIA authoring to match
+*     native behavior, and frequently regress in edge cases.
+*   - For searchable/multi-select use cases, use Combobox (Phase 3).
+*
+* The label is NOT included. The consuming feature pairs a <label>.
+*/
+function isGroup(item) {
+	return "group" in item;
+}
+function Select({ items, placeholder, status = "default", helper, disabled, className = "", ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "w-full",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "relative",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+				disabled,
+				className: [
+					"w-full appearance-none rounded-md border bg-white py-2.5 pl-4 pr-10 text-sm font-medium text-slate-900 outline-none transition",
+					require_fieldStatus.FIELD_STATUS_RING_DIRECT[status],
+					disabled ? "cursor-not-allowed bg-slate-50 opacity-60" : "cursor-pointer",
+					className
+				].filter(Boolean).join(" "),
+				...props,
+				children: [placeholder && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+					value: "",
+					disabled: true,
+					children: placeholder
+				}), items.map((item) => isGroup(item) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("optgroup", {
+					label: item.group,
+					children: item.options.map((opt) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+						value: opt.value,
+						disabled: opt.disabled,
+						children: opt.label
+					}, opt.value))
+				}, item.group) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+					value: item.value,
+					disabled: item.disabled,
+					children: item.label
+				}, item.value))]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "pointer-events-none absolute right-3.5 top-1/2 -translate-y-1/2 text-slate-400",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { size: 14 })
+			})]
+		}), helper && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: `mt-1.5 text-xs font-medium ${require_fieldStatus.FIELD_HELPER_COLOR[status]}`,
+			children: helper
+		})]
+	});
+}
+//#endregion
+exports.Select = Select;
+
+//# sourceMappingURL=index19.cjs.map