@pautena/react-design-system 2.0.0-alpha.1b → 2.0.0-alpha.4

package/dist/components/forms/checkbox-field/checkbox-field.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-field.mjs","sources":["../../../../src/components/forms/checkbox-field/checkbox-field.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from \"react\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/components/ui/field\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Props for the CheckboxField component.\n */\nexport interface CheckboxFieldProps\n  extends Omit<ComponentProps<typeof Checkbox>, \"id\" | \"className\"> {\n  /**\n   * Label shown next to the checkbox.\n   */\n  label: string;\n  /**\n   * Helper text rendered below the control.\n   */\n  helperText?: ReactNode;\n  /**\n   * Error text rendered below the control.\n   */\n  error?: ReactNode;\n  /**\n   * Makes the field span the container width.\n   * @default false\n   */\n  fullWidth?: boolean;\n  /**\n   * Field id used to connect label and checkbox.\n   */\n  id?: string;\n  /**\n   * Additional CSS classes for the field wrapper.\n   */\n  className?: string;\n}\n\n/**\n * Checkbox form wrapper with helper and error states.\n */\nexport function CheckboxField({\n  id,\n  label,\n  helperText,\n  error,\n  fullWidth = false,\n  className,\n  disabled,\n  ...props\n}: CheckboxFieldProps) {\n  const inputId = id ?? `${label}-checkbox`;\n  const hasError = Boolean(error);\n\n  return (\n    <Field\n      orientation=\"horizontal\"\n      data-disabled={disabled || undefined}\n      data-invalid={hasError || undefined}\n      className={cn(fullWidth && \"w-full\", className)}\n    >\n      <Checkbox\n        id={inputId}\n        disabled={disabled}\n        aria-label={label}\n        aria-invalid={hasError || undefined}\n        {...props}\n      />\n\n      <FieldContent>\n        <FieldLabel htmlFor={inputId} className=\"font-normal\">\n          {label}\n        </FieldLabel>\n\n        {helperText && !hasError ? (\n          <FieldDescription>{helperText}</FieldDescription>\n        ) : null}\n\n        {error ? <FieldError>{error}</FieldError> : null}\n      </FieldContent>\n    </Field>\n  );\n}\n\nexport default CheckboxField;\n"],"names":["CheckboxField","id","label","helperText","error","fullWidth","className","disabled","props","inputId","hasError","jsxs","Field","cn","jsx","Checkbox","FieldContent","FieldLabel","FieldDescription","FieldError"],"mappings":";;;;AA8CO,SAASA,EAAc;AAAA,EAC5B,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GAAuB;AACrB,QAAMC,IAAUR,KAAM,GAAGC,CAAK,aACxBQ,IAAW,EAAQN;AAEzB,SACE,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,aAAY;AAAA,MACZ,iBAAeL,KAAY;AAAA,MAC3B,gBAAcG,KAAY;AAAA,MAC1B,WAAWG,EAAGR,KAAa,UAAUC,CAAS;AAAA,MAE9C,UAAA;AAAA,QAAA,gBAAAQ;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,IAAIN;AAAA,YACJ,UAAAF;AAAA,YACA,cAAYL;AAAA,YACZ,gBAAcQ,KAAY;AAAA,YACzB,GAAGF;AAAA,UAAA;AAAA,QAAA;AAAA,0BAGLQ,GAAA,EACC,UAAA;AAAA,UAAA,gBAAAF,EAACG,GAAA,EAAW,SAASR,GAAS,WAAU,eACrC,UAAAP,GACH;AAAA,UAECC,KAAc,CAACO,IACd,gBAAAI,EAACI,GAAA,EAAkB,aAAW,IAC5B;AAAA,UAEHd,IAAQ,gBAAAU,EAACK,GAAA,EAAY,UAAAf,EAAA,CAAM,IAAgB;AAAA,QAAA,EAAA,CAC9C;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/forms/checkbox-field/index.d.ts

@@ -0,0 +1,2 @@
+export type { CheckboxFieldProps } from './checkbox-field';
+export { default, default as CheckboxField } from './checkbox-field';

package/dist/components/forms/select/index.d.ts

@@ -0,0 +1,2 @@
+export type { SelectOption, SelectProps, SelectSize } from './select';
+export { default, default as Select } from './select';

package/dist/components/forms/select/select.d.ts

@@ -0,0 +1,82 @@
+import { ChangeEvent, ReactNode, SelectHTMLAttributes } from 'react';
+/**
+ * Supported field sizes for Select.
+ */
+export type SelectSize = "small" | "medium";
+/**
+ * Option model accepted by Select.
+ */
+export interface SelectOption {
+    /**
+     * Visual label shown in the list.
+     */
+    label: string;
+    /**
+     * Submitted value.
+     */
+    value: string;
+}
+/**
+ * Props for the Select component.
+ */
+export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "size" | "color"> {
+    /**
+     * Label shown above the select.
+     */
+    label: string;
+    /**
+     * Selected value.
+     */
+    value: string;
+    /**
+     * Select options for native rendering.
+     */
+    options?: SelectOption[];
+    /**
+     * Helper text rendered below the select.
+     */
+    helperText?: ReactNode;
+    /**
+     * Error text rendered below the select.
+     */
+    error?: ReactNode;
+    /**
+     * Shows a spinner while value is loading.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Shows a progress state while options are being fetched.
+     * @default false
+     */
+    fetching?: boolean;
+    /**
+     * Input size variant.
+     * @default "medium"
+     */
+    size?: SelectSize;
+    /**
+     * Makes the select span the container width.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Optional accent color used for border and text.
+     */
+    color?: string;
+    /**
+     * Optional option children for compatibility.
+     */
+    children?: ReactNode;
+    /**
+     * Called when the select value changes.
+     * @param e - Native select change event.
+     * @param value - Trimmed selected value.
+     */
+    onChangeValue?: (e: ChangeEvent<HTMLSelectElement>, value: string) => void;
+}
+/**
+ * Native select wrapper with loading and fetching states.
+ */
+export declare function Select({ id, label, value, options, helperText, error, loading, fetching, size, fullWidth, className, color, children, onChange, onChangeValue, disabled, ...props }: SelectProps): import("react/jsx-runtime").JSX.Element;
+export default Select;

package/dist/components/forms/select/select.mjs

@@ -0,0 +1,82 @@
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import { Field as w, FieldLabel as L, FieldDescription as j, FieldError as B } from "../../ui/field.mjs";
+import { cn as c } from "../../../lib/utils.mjs";
+import E from "../../../node_modules/lucide-react/dist/esm/icons/loader-circle.mjs";
+const S = (o) => (Array.isArray(o) ? o : [o]).filter(Boolean).map(
+  (a) => a
+).filter((a) => typeof a?.props?.value == "string").map((a) => ({
+  value: a.props.value,
+  label: String(a.props.children ?? a.props.value)
+}));
+function V({
+  id: o,
+  label: i,
+  value: a,
+  options: b,
+  helperText: d,
+  error: s,
+  loading: u = !1,
+  fetching: l = !1,
+  size: f = "medium",
+  fullWidth: y = !1,
+  className: h,
+  color: n,
+  children: x,
+  onChange: F,
+  onChangeValue: A,
+  disabled: p,
+  ...C
+}) {
+  const m = o ?? `${i}-select`, N = b ?? S(x), g = l ? "" : a, v = !!s;
+  return /* @__PURE__ */ t(
+    w,
+    {
+      "data-invalid": v || void 0,
+      className: c(y && "w-full", h),
+      children: [
+        /* @__PURE__ */ r(L, { htmlFor: m, children: i }),
+        /* @__PURE__ */ t("div", { className: "relative", children: [
+          /* @__PURE__ */ t(
+            "select",
+            {
+              id: m,
+              value: g,
+              disabled: p || l,
+              "aria-busy": u || l,
+              className: c(
+                "w-full rounded-md border border-input bg-background pr-9 text-sm outline-none aria-invalid:border-destructive",
+                f === "small" ? "h-9 px-2" : "h-10 px-3",
+                (p || l) && "opacity-70"
+              ),
+              "aria-invalid": v || void 0,
+              onChange: (e) => {
+                F?.(e), A?.(e, e.target.value.trim());
+              },
+              style: n ? { borderColor: n, color: n } : void 0,
+              ...C,
+              children: [
+                l ? /* @__PURE__ */ r("option", { value: "", children: "Loading options..." }) : null,
+                l ? null : N.map((e) => /* @__PURE__ */ r("option", { value: e.value, children: e.label }, e.value))
+              ]
+            }
+          ),
+          (u || l) && /* @__PURE__ */ r(
+            E,
+            {
+              role: "progressbar",
+              "aria-label": "loading",
+              className: "pointer-events-none absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 animate-spin"
+            }
+          )
+        ] }),
+        d ? /* @__PURE__ */ r(j, { children: d }) : null,
+        s ? /* @__PURE__ */ r(B, { children: s }) : null
+      ]
+    }
+  );
+}
+export {
+  V as Select,
+  V as default
+};
+//# sourceMappingURL=select.mjs.map

package/dist/components/forms/select/select.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.mjs","sources":["../../../../src/components/forms/select/select.tsx"],"sourcesContent":["import { Loader2 } from \"lucide-react\";\nimport type {\n  ChangeEvent,\n  ReactElement,\n  ReactNode,\n  SelectHTMLAttributes,\n} from \"react\";\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/components/ui/field\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Supported field sizes for Select.\n */\nexport type SelectSize = \"small\" | \"medium\";\n\n/**\n * Option model accepted by Select.\n */\nexport interface SelectOption {\n  /**\n   * Visual label shown in the list.\n   */\n  label: string;\n  /**\n   * Submitted value.\n   */\n  value: string;\n}\n\n/**\n * Props for the Select component.\n */\nexport interface SelectProps\n  extends Omit<SelectHTMLAttributes<HTMLSelectElement>, \"size\" | \"color\"> {\n  /**\n   * Label shown above the select.\n   */\n  label: string;\n  /**\n   * Selected value.\n   */\n  value: string;\n  /**\n   * Select options for native rendering.\n   */\n  options?: SelectOption[];\n  /**\n   * Helper text rendered below the select.\n   */\n  helperText?: ReactNode;\n  /**\n   * Error text rendered below the select.\n   */\n  error?: ReactNode;\n  /**\n   * Shows a spinner while value is loading.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * Shows a progress state while options are being fetched.\n   * @default false\n   */\n  fetching?: boolean;\n  /**\n   * Input size variant.\n   * @default \"medium\"\n   */\n  size?: SelectSize;\n  /**\n   * Makes the select span the container width.\n   * @default false\n   */\n  fullWidth?: boolean;\n  /**\n   * Optional accent color used for border and text.\n   */\n  color?: string;\n  /**\n   * Optional option children for compatibility.\n   */\n  children?: ReactNode;\n  /**\n   * Called when the select value changes.\n   * @param e - Native select change event.\n   * @param value - Trimmed selected value.\n   */\n  onChangeValue?: (e: ChangeEvent<HTMLSelectElement>, value: string) => void;\n}\n\nconst fromChildren = (children: ReactNode): SelectOption[] => {\n  const asArray = Array.isArray(children) ? children : [children];\n\n  return asArray\n    .filter(Boolean)\n    .map(\n      (child) =>\n        child as ReactElement<{ value?: string; children?: ReactNode }>,\n    )\n    .filter((child) => typeof child?.props?.value === \"string\")\n    .map((child) => ({\n      value: child.props.value as string,\n      label: String(child.props.children ?? child.props.value),\n    }));\n};\n\n/**\n * Native select wrapper with loading and fetching states.\n */\nexport function Select({\n  id,\n  label,\n  value,\n  options,\n  helperText,\n  error,\n  loading = false,\n  fetching = false,\n  size = \"medium\",\n  fullWidth = false,\n  className,\n  color,\n  children,\n  onChange,\n  onChangeValue,\n  disabled,\n  ...props\n}: SelectProps) {\n  const selectId = id ?? `${label}-select`;\n  const allOptions = options ?? fromChildren(children);\n  const activeValue = fetching ? \"\" : value;\n  const hasError = Boolean(error);\n\n  return (\n    <Field\n      data-invalid={hasError || undefined}\n      className={cn(fullWidth && \"w-full\", className)}\n    >\n      <FieldLabel htmlFor={selectId}>{label}</FieldLabel>\n\n      <div className=\"relative\">\n        <select\n          id={selectId}\n          value={activeValue}\n          disabled={disabled || fetching}\n          aria-busy={loading || fetching}\n          className={cn(\n            \"w-full rounded-md border border-input bg-background pr-9 text-sm outline-none aria-invalid:border-destructive\",\n            size === \"small\" ? \"h-9 px-2\" : \"h-10 px-3\",\n            (disabled || fetching) && \"opacity-70\",\n          )}\n          aria-invalid={hasError || undefined}\n          onChange={(e) => {\n            onChange?.(e);\n            onChangeValue?.(e, e.target.value.trim());\n          }}\n          style={color ? { borderColor: color, color } : undefined}\n          {...props}\n        >\n          {fetching ? <option value=\"\">Loading options...</option> : null}\n          {!fetching\n            ? allOptions.map((option) => (\n                <option key={option.value} value={option.value}>\n                  {option.label}\n                </option>\n              ))\n            : null}\n        </select>\n\n        {(loading || fetching) && (\n          <Loader2\n            role=\"progressbar\"\n            aria-label=\"loading\"\n            className=\"pointer-events-none absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 animate-spin\"\n          />\n        )}\n      </div>\n\n      {helperText ? <FieldDescription>{helperText}</FieldDescription> : null}\n\n      {error ? <FieldError>{error}</FieldError> : null}\n    </Field>\n  );\n}\n\nexport default Select;\n"],"names":["fromChildren","children","child","Select","id","label","value","options","helperText","error","loading","fetching","size","fullWidth","className","color","onChange","onChangeValue","disabled","props","selectId","allOptions","activeValue","hasError","jsxs","Field","cn","jsx","FieldLabel","option","Loader2","FieldDescription","FieldError"],"mappings":";;;;AA+FA,MAAMA,IAAe,CAACC,OACJ,MAAM,QAAQA,CAAQ,IAAIA,IAAW,CAACA,CAAQ,GAG3D,OAAO,OAAO,EACd;AAAA,EACC,CAACC,MACCA;AAAA,EAEH,OAAO,CAACA,MAAU,OAAOA,GAAO,OAAO,SAAU,QAAQ,EACzD,IAAI,CAACA,OAAW;AAAA,EACf,OAAOA,EAAM,MAAM;AAAA,EACnB,OAAO,OAAOA,EAAM,MAAM,YAAYA,EAAM,MAAM,KAAK;AAAA,EACvD;AAMC,SAASC,EAAO;AAAA,EACrB,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAd;AAAA,EACA,UAAAe;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GAAgB;AACd,QAAMC,IAAWhB,KAAM,GAAGC,CAAK,WACzBgB,IAAad,KAAWP,EAAaC,CAAQ,GAC7CqB,IAAcX,IAAW,KAAKL,GAC9BiB,IAAW,EAAQd;AAEzB,SACE,gBAAAe;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,gBAAcF,KAAY;AAAA,MAC1B,WAAWG,EAAGb,KAAa,UAAUC,CAAS;AAAA,MAE9C,UAAA;AAAA,QAAA,gBAAAa,EAACC,GAAA,EAAW,SAASR,GAAW,UAAAf,GAAM;AAAA,QAEtC,gBAAAmB,EAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,UAAA,gBAAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAIJ;AAAA,cACJ,OAAOE;AAAA,cACP,UAAUJ,KAAYP;AAAA,cACtB,aAAWD,KAAWC;AAAA,cACtB,WAAWe;AAAA,gBACT;AAAA,gBACAd,MAAS,UAAU,aAAa;AAAA,iBAC/BM,KAAYP,MAAa;AAAA,cAAA;AAAA,cAE5B,gBAAcY,KAAY;AAAA,cAC1B,UAAU,CAAC,MAAM;AACf,gBAAAP,IAAW,CAAC,GACZC,IAAgB,GAAG,EAAE,OAAO,MAAM,MAAM;AAAA,cAC1C;AAAA,cACA,OAAOF,IAAQ,EAAE,aAAaA,GAAO,OAAAA,MAAU;AAAA,cAC9C,GAAGI;AAAA,cAEH,UAAA;AAAA,gBAAAR,IAAW,gBAAAgB,EAAC,UAAA,EAAO,OAAM,IAAG,gCAAkB,IAAY;AAAA,gBACzDhB,IAME,OALAU,EAAW,IAAI,CAACQ,MACd,gBAAAF,EAAC,UAAA,EAA0B,OAAOE,EAAO,OACtC,UAAAA,EAAO,MAAA,GADGA,EAAO,KAEpB,CACD;AAAA,cACD;AAAA,YAAA;AAAA,UAAA;AAAA,WAGJnB,KAAWC,MACX,gBAAAgB;AAAA,YAACG;AAAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAW;AAAA,cACX,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACZ,GAEJ;AAAA,QAECtB,IAAa,gBAAAmB,EAACI,GAAA,EAAkB,UAAAvB,EAAA,CAAW,IAAsB;AAAA,QAEjEC,IAAQ,gBAAAkB,EAACK,GAAA,EAAY,UAAAvB,EAAA,CAAM,IAAgB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGlD;"}

package/dist/components/forms/text-field/index.d.ts

@@ -0,0 +1,2 @@
+export type { TextFieldInputProps, TextFieldProps, TextFieldSize, } from './text-field';
+export { default, default as TextField } from './text-field';

package/dist/components/forms/text-field/text-field.d.ts

@@ -0,0 +1,65 @@
+import { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';
+/**
+ * Supported field sizes for TextField.
+ */
+export type TextFieldSize = "small" | "medium";
+/**
+ * Props for input-specific composition.
+ */
+export interface TextFieldInputProps {
+    /**
+     * Content rendered at the end of the input.
+     */
+    endAdornment?: ReactNode;
+}
+/**
+ * Props for the TextField component.
+ */
+export interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "color"> {
+    /**
+     * Label shown above the input.
+     */
+    label?: string;
+    /**
+     * Helper text rendered below the input.
+     */
+    helperText?: ReactNode;
+    /**
+     * Error text rendered below the input.
+     */
+    error?: ReactNode;
+    /**
+     * Shows a spinner inside the field.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Input size variant.
+     * @default "medium"
+     */
+    size?: TextFieldSize;
+    /**
+     * Makes the field span the container width.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Optional accent color used for border and text.
+     */
+    hexColor?: string;
+    /**
+     * Additional props for the input content area.
+     */
+    InputProps?: TextFieldInputProps;
+    /**
+     * Called when the input value changes.
+     * @param e - Native input change event.
+     * @param value - Trimmed input value.
+     */
+    onChangeValue?: (e: ChangeEvent<HTMLInputElement>, value: string) => void;
+}
+/**
+ * Text input with loading state.
+ */
+export declare function TextField({ id, label, helperText, error, loading, size, fullWidth, className, hexColor, InputProps, onChange, onChangeValue, disabled, ...props }: TextFieldProps): import("react/jsx-runtime").JSX.Element;
+export default TextField;

package/dist/components/forms/text-field/text-field.mjs

@@ -0,0 +1,73 @@
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { Field as g, FieldLabel as y, FieldDescription as A, FieldError as b } from "../../ui/field.mjs";
+import { Input as j } from "../../ui/input.mjs";
+import { cn as f } from "../../../lib/utils.mjs";
+import w from "../../../node_modules/lucide-react/dist/esm/icons/loader-circle.mjs";
+function $({
+  id: u,
+  label: n,
+  helperText: s,
+  error: r,
+  loading: i = !1,
+  size: h = "medium",
+  fullWidth: p = !1,
+  className: v,
+  hexColor: a,
+  InputProps: l,
+  onChange: x,
+  onChangeValue: F,
+  disabled: o,
+  ...N
+}) {
+  const c = u ?? `${n ?? "textfield"}-input`, t = !!r;
+  return /* @__PURE__ */ m(
+    g,
+    {
+      "data-invalid": t || void 0,
+      className: f("gap-1.5", p && "w-full", v),
+      children: [
+        n ? /* @__PURE__ */ e(y, { htmlFor: c, children: n }) : null,
+        /* @__PURE__ */ m("div", { className: "relative", children: [
+          /* @__PURE__ */ e(
+            j,
+            {
+              id: c,
+              disabled: o,
+              "aria-busy": i,
+              "aria-invalid": t || void 0,
+              className: f(
+                "text-sm",
+                h === "small" ? "h-9 px-2" : "h-10 px-3",
+                (l?.endAdornment || i) && "pr-10",
+                o && "opacity-70"
+              ),
+              style: a ? { borderColor: a, color: a } : void 0,
+              onChange: (d) => {
+                x?.(d), F?.(d, d.target.value.trim());
+              },
+              ...N
+            }
+          ),
+          (l?.endAdornment || i) && /* @__PURE__ */ m("div", { className: "absolute inset-y-0 right-3 flex items-center gap-2", children: [
+            l?.endAdornment ? /* @__PURE__ */ e("div", { className: "inline-flex items-center", children: l.endAdornment }) : null,
+            i ? /* @__PURE__ */ e(
+              w,
+              {
+                role: "progressbar",
+                "aria-label": "loading",
+                className: "h-4 w-4 animate-spin"
+              }
+            ) : null
+          ] })
+        ] }),
+        s && !t ? /* @__PURE__ */ e(A, { children: s }) : null,
+        r ? /* @__PURE__ */ e(b, { children: r }) : null
+      ]
+    }
+  );
+}
+export {
+  $ as TextField,
+  $ as default
+};
+//# sourceMappingURL=text-field.mjs.map

package/dist/components/forms/text-field/text-field.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field.mjs","sources":["../../../../src/components/forms/text-field/text-field.tsx"],"sourcesContent":["import { Loader2 } from \"lucide-react\";\nimport type { ChangeEvent, InputHTMLAttributes, ReactNode } from \"react\";\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/components/ui/field\";\nimport { Input } from \"@/components/ui/input\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Supported field sizes for TextField.\n */\nexport type TextFieldSize = \"small\" | \"medium\";\n\n/**\n * Props for input-specific composition.\n */\nexport interface TextFieldInputProps {\n  /**\n   * Content rendered at the end of the input.\n   */\n  endAdornment?: ReactNode;\n}\n\n/**\n * Props for the TextField component.\n */\nexport interface TextFieldProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"size\" | \"color\"> {\n  /**\n   * Label shown above the input.\n   */\n  label?: string;\n  /**\n   * Helper text rendered below the input.\n   */\n  helperText?: ReactNode;\n  /**\n   * Error text rendered below the input.\n   */\n  error?: ReactNode;\n  /**\n   * Shows a spinner inside the field.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * Input size variant.\n   * @default \"medium\"\n   */\n  size?: TextFieldSize;\n  /**\n   * Makes the field span the container width.\n   * @default false\n   */\n  fullWidth?: boolean;\n  /**\n   * Optional accent color used for border and text.\n   */\n  hexColor?: string;\n  /**\n   * Additional props for the input content area.\n   */\n  InputProps?: TextFieldInputProps;\n  /**\n   * Called when the input value changes.\n   * @param e - Native input change event.\n   * @param value - Trimmed input value.\n   */\n  onChangeValue?: (e: ChangeEvent<HTMLInputElement>, value: string) => void;\n}\n\n/**\n * Text input with loading state.\n */\nexport function TextField({\n  id,\n  label,\n  helperText,\n  error,\n  loading = false,\n  size = \"medium\",\n  fullWidth = false,\n  className,\n  hexColor,\n  InputProps,\n  onChange,\n  onChangeValue,\n  disabled,\n  ...props\n}: TextFieldProps) {\n  const inputId = id ?? `${label ?? \"textfield\"}-input`;\n  const hasError = Boolean(error);\n\n  return (\n    <Field\n      data-invalid={hasError || undefined}\n      className={cn(\"gap-1.5\", fullWidth && \"w-full\", className)}\n    >\n      {label ? <FieldLabel htmlFor={inputId}>{label}</FieldLabel> : null}\n\n      <div className=\"relative\">\n        <Input\n          id={inputId}\n          disabled={disabled}\n          aria-busy={loading}\n          aria-invalid={hasError || undefined}\n          className={cn(\n            \"text-sm\",\n            size === \"small\" ? \"h-9 px-2\" : \"h-10 px-3\",\n            (InputProps?.endAdornment || loading) && \"pr-10\",\n            disabled && \"opacity-70\",\n          )}\n          style={\n            hexColor ? { borderColor: hexColor, color: hexColor } : undefined\n          }\n          onChange={(e) => {\n            onChange?.(e);\n            onChangeValue?.(e, e.target.value.trim());\n          }}\n          {...props}\n        />\n\n        {(InputProps?.endAdornment || loading) && (\n          <div className=\"absolute inset-y-0 right-3 flex items-center gap-2\">\n            {InputProps?.endAdornment ? (\n              <div className=\"inline-flex items-center\">\n                {InputProps.endAdornment}\n              </div>\n            ) : null}\n\n            {loading ? (\n              <Loader2\n                role=\"progressbar\"\n                aria-label=\"loading\"\n                className=\"h-4 w-4 animate-spin\"\n              />\n            ) : null}\n          </div>\n        )}\n      </div>\n\n      {helperText && !hasError ? (\n        <FieldDescription>{helperText}</FieldDescription>\n      ) : null}\n\n      {error ? <FieldError>{error}</FieldError> : null}\n    </Field>\n  );\n}\n\nexport default TextField;\n"],"names":["TextField","id","label","helperText","error","loading","size","fullWidth","className","hexColor","InputProps","onChange","onChangeValue","disabled","props","inputId","hasError","jsxs","Field","cn","jsx","FieldLabel","Input","e","Loader2","FieldDescription","FieldError"],"mappings":";;;;;AA6EO,SAASA,EAAU;AAAA,EACxB,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GAAmB;AACjB,QAAMC,IAAUd,KAAM,GAAGC,KAAS,WAAW,UACvCc,IAAW,EAAQZ;AAEzB,SACE,gBAAAa;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,gBAAcF,KAAY;AAAA,MAC1B,WAAWG,EAAG,WAAWZ,KAAa,UAAUC,CAAS;AAAA,MAExD,UAAA;AAAA,QAAAN,IAAQ,gBAAAkB,EAACC,GAAA,EAAW,SAASN,GAAU,aAAM,IAAgB;AAAA,QAE9D,gBAAAE,EAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,UAAA,gBAAAG;AAAA,YAACE;AAAA,YAAA;AAAA,cACC,IAAIP;AAAA,cACJ,UAAAF;AAAA,cACA,aAAWR;AAAA,cACX,gBAAcW,KAAY;AAAA,cAC1B,WAAWG;AAAA,gBACT;AAAA,gBACAb,MAAS,UAAU,aAAa;AAAA,iBAC/BI,GAAY,gBAAgBL,MAAY;AAAA,gBACzCQ,KAAY;AAAA,cAAA;AAAA,cAEd,OACEJ,IAAW,EAAE,aAAaA,GAAU,OAAOA,MAAa;AAAA,cAE1D,UAAU,CAACc,MAAM;AACf,gBAAAZ,IAAWY,CAAC,GACZX,IAAgBW,GAAGA,EAAE,OAAO,MAAM,MAAM;AAAA,cAC1C;AAAA,cACC,GAAGT;AAAA,YAAA;AAAA,UAAA;AAAA,WAGJJ,GAAY,gBAAgBL,MAC5B,gBAAAY,EAAC,OAAA,EAAI,WAAU,sDACZ,UAAA;AAAA,YAAAP,GAAY,eACX,gBAAAU,EAAC,OAAA,EAAI,WAAU,4BACZ,UAAAV,EAAW,cACd,IACE;AAAA,YAEHL,IACC,gBAAAe;AAAA,cAACI;AAAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,cAAW;AAAA,gBACX,WAAU;AAAA,cAAA;AAAA,YAAA,IAEV;AAAA,UAAA,EAAA,CACN;AAAA,QAAA,GAEJ;AAAA,QAECrB,KAAc,CAACa,IACd,gBAAAI,EAACK,GAAA,EAAkB,aAAW,IAC5B;AAAA,QAEHrB,IAAQ,gBAAAgB,EAACM,GAAA,EAAY,UAAAtB,EAAA,CAAM,IAAgB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGlD;"}

package/dist/components/forms/textarea-field/index.d.ts

@@ -0,0 +1,2 @@
+export type { TextareaFieldInputProps, TextareaFieldProps, } from './textarea-field';
+export { default, default as TextareaField } from './textarea-field';

package/dist/components/forms/textarea-field/textarea-field.d.ts

@@ -0,0 +1,61 @@
+import { ChangeEvent, ReactNode, TextareaHTMLAttributes } from 'react';
+/**
+ * Props for textarea-specific composition.
+ */
+export interface TextareaFieldInputProps {
+    /**
+     * Content rendered at the end of the textarea.
+     */
+    endAdornment?: ReactNode;
+}
+/**
+ * Props for the TextareaField component.
+ */
+export interface TextareaFieldProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "size" | "color"> {
+    /**
+     * Label shown above the textarea.
+     */
+    label?: string;
+    /**
+     * Helper text rendered below the textarea.
+     */
+    helperText?: ReactNode;
+    /**
+     * Error text rendered below the textarea.
+     */
+    error?: ReactNode;
+    /**
+     * Shows a spinner inside the field.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Makes the field span the container width.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Number of visible text rows.
+     * @default 4
+     */
+    rowCount?: number;
+    /**
+     * Optional accent color used for border and text.
+     */
+    hexColor?: string;
+    /**
+     * Additional props for the textarea content area.
+     */
+    InputProps?: TextareaFieldInputProps;
+    /**
+     * Called when the textarea value changes.
+     * @param e - Native textarea change event.
+     * @param value - Trimmed textarea value.
+     */
+    onChangeValue?: (e: ChangeEvent<HTMLTextAreaElement>, value: string) => void;
+}
+/**
+ * Multiline text input with loading state.
+ */
+export declare function TextareaField({ id, label, helperText, error, loading, fullWidth, rowCount, className, hexColor, InputProps, onChange, onChangeValue, disabled, ...props }: TextareaFieldProps): import("react/jsx-runtime").JSX.Element;
+export default TextareaField;

package/dist/components/forms/textarea-field/textarea-field.mjs

@@ -0,0 +1,74 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { Field as g, FieldLabel as y, FieldDescription as A, FieldError as b } from "../../ui/field.mjs";
+import { Textarea as w } from "../../ui/textarea.mjs";
+import { cn as f } from "../../../lib/utils.mjs";
+import j from "../../../node_modules/lucide-react/dist/esm/icons/loader-circle.mjs";
+function T({
+  id: h,
+  label: r,
+  helperText: s,
+  error: l,
+  loading: a = !1,
+  fullWidth: p = !1,
+  rowCount: u = 4,
+  className: v,
+  hexColor: n,
+  InputProps: i,
+  onChange: x,
+  onChangeValue: F,
+  disabled: m,
+  ...N
+}) {
+  const c = h ?? `${r ?? "textareafield"}-textarea`, t = !!l;
+  return /* @__PURE__ */ o(
+    g,
+    {
+      "data-invalid": t || void 0,
+      className: f("gap-1.5", p && "w-full", v),
+      children: [
+        r ? /* @__PURE__ */ e(y, { htmlFor: c, children: r }) : null,
+        /* @__PURE__ */ o("div", { className: "relative", children: [
+          /* @__PURE__ */ e(
+            w,
+            {
+              id: c,
+              rows: u,
+              disabled: m,
+              "aria-busy": a,
+              "aria-invalid": t || void 0,
+              className: f(
+                "text-sm",
+                "min-h-24 px-3 py-2",
+                (i?.endAdornment || a) && "pr-10",
+                m && "opacity-70"
+              ),
+              style: n ? { borderColor: n, color: n } : void 0,
+              onChange: (d) => {
+                x?.(d), F?.(d, d.target.value.trim());
+              },
+              ...N
+            }
+          ),
+          (i?.endAdornment || a) && /* @__PURE__ */ o("div", { className: "absolute right-3 top-3 flex items-center gap-2", children: [
+            i?.endAdornment ? /* @__PURE__ */ e("div", { className: "inline-flex items-center", children: i.endAdornment }) : null,
+            a ? /* @__PURE__ */ e(
+              j,
+              {
+                role: "progressbar",
+                "aria-label": "loading",
+                className: "h-4 w-4 animate-spin"
+              }
+            ) : null
+          ] })
+        ] }),
+        s && !t ? /* @__PURE__ */ e(A, { children: s }) : null,
+        l ? /* @__PURE__ */ e(b, { children: l }) : null
+      ]
+    }
+  );
+}
+export {
+  T as TextareaField,
+  T as default
+};
+//# sourceMappingURL=textarea-field.mjs.map

package/dist/components/forms/textarea-field/textarea-field.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea-field.mjs","sources":["../../../../src/components/forms/textarea-field/textarea-field.tsx"],"sourcesContent":["import { Loader2 } from \"lucide-react\";\nimport type { ChangeEvent, ReactNode, TextareaHTMLAttributes } from \"react\";\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/components/ui/field\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Props for textarea-specific composition.\n */\nexport interface TextareaFieldInputProps {\n  /**\n   * Content rendered at the end of the textarea.\n   */\n  endAdornment?: ReactNode;\n}\n\n/**\n * Props for the TextareaField component.\n */\nexport interface TextareaFieldProps\n  extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, \"size\" | \"color\"> {\n  /**\n   * Label shown above the textarea.\n   */\n  label?: string;\n  /**\n   * Helper text rendered below the textarea.\n   */\n  helperText?: ReactNode;\n  /**\n   * Error text rendered below the textarea.\n   */\n  error?: ReactNode;\n  /**\n   * Shows a spinner inside the field.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * Makes the field span the container width.\n   * @default false\n   */\n  fullWidth?: boolean;\n  /**\n   * Number of visible text rows.\n   * @default 4\n   */\n  rowCount?: number;\n  /**\n   * Optional accent color used for border and text.\n   */\n  hexColor?: string;\n  /**\n   * Additional props for the textarea content area.\n   */\n  InputProps?: TextareaFieldInputProps;\n  /**\n   * Called when the textarea value changes.\n   * @param e - Native textarea change event.\n   * @param value - Trimmed textarea value.\n   */\n  onChangeValue?: (e: ChangeEvent<HTMLTextAreaElement>, value: string) => void;\n}\n\n/**\n * Multiline text input with loading state.\n */\nexport function TextareaField({\n  id,\n  label,\n  helperText,\n  error,\n  loading = false,\n  fullWidth = false,\n  rowCount = 4,\n  className,\n  hexColor,\n  InputProps,\n  onChange,\n  onChangeValue,\n  disabled,\n  ...props\n}: TextareaFieldProps) {\n  const inputId = id ?? `${label ?? \"textareafield\"}-textarea`;\n  const hasError = Boolean(error);\n\n  return (\n    <Field\n      data-invalid={hasError || undefined}\n      className={cn(\"gap-1.5\", fullWidth && \"w-full\", className)}\n    >\n      {label ? <FieldLabel htmlFor={inputId}>{label}</FieldLabel> : null}\n\n      <div className=\"relative\">\n        <Textarea\n          id={inputId}\n          rows={rowCount}\n          disabled={disabled}\n          aria-busy={loading}\n          aria-invalid={hasError || undefined}\n          className={cn(\n            \"text-sm\",\n            \"min-h-24 px-3 py-2\",\n            (InputProps?.endAdornment || loading) && \"pr-10\",\n            disabled && \"opacity-70\",\n          )}\n          style={\n            hexColor ? { borderColor: hexColor, color: hexColor } : undefined\n          }\n          onChange={(e) => {\n            onChange?.(e);\n            onChangeValue?.(e, e.target.value.trim());\n          }}\n          {...props}\n        />\n\n        {(InputProps?.endAdornment || loading) && (\n          <div className=\"absolute right-3 top-3 flex items-center gap-2\">\n            {InputProps?.endAdornment ? (\n              <div className=\"inline-flex items-center\">\n                {InputProps.endAdornment}\n              </div>\n            ) : null}\n\n            {loading ? (\n              <Loader2\n                role=\"progressbar\"\n                aria-label=\"loading\"\n                className=\"h-4 w-4 animate-spin\"\n              />\n            ) : null}\n          </div>\n        )}\n      </div>\n\n      {helperText && !hasError ? (\n        <FieldDescription>{helperText}</FieldDescription>\n      ) : null}\n\n      {error ? <FieldError>{error}</FieldError> : null}\n    </Field>\n  );\n}\n\nexport default TextareaField;\n"],"names":["TextareaField","id","label","helperText","error","loading","fullWidth","rowCount","className","hexColor","InputProps","onChange","onChangeValue","disabled","props","inputId","hasError","jsxs","Field","cn","jsx","FieldLabel","Textarea","e","Loader2","FieldDescription","FieldError"],"mappings":";;;;;AAwEO,SAASA,EAAc;AAAA,EAC5B,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GAAuB;AACrB,QAAMC,IAAUd,KAAM,GAAGC,KAAS,eAAe,aAC3Cc,IAAW,EAAQZ;AAEzB,SACE,gBAAAa;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,gBAAcF,KAAY;AAAA,MAC1B,WAAWG,EAAG,WAAWb,KAAa,UAAUE,CAAS;AAAA,MAExD,UAAA;AAAA,QAAAN,IAAQ,gBAAAkB,EAACC,GAAA,EAAW,SAASN,GAAU,aAAM,IAAgB;AAAA,QAE9D,gBAAAE,EAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,UAAA,gBAAAG;AAAA,YAACE;AAAA,YAAA;AAAA,cACC,IAAIP;AAAA,cACJ,MAAMR;AAAA,cACN,UAAAM;AAAA,cACA,aAAWR;AAAA,cACX,gBAAcW,KAAY;AAAA,cAC1B,WAAWG;AAAA,gBACT;AAAA,gBACA;AAAA,iBACCT,GAAY,gBAAgBL,MAAY;AAAA,gBACzCQ,KAAY;AAAA,cAAA;AAAA,cAEd,OACEJ,IAAW,EAAE,aAAaA,GAAU,OAAOA,MAAa;AAAA,cAE1D,UAAU,CAACc,MAAM;AACf,gBAAAZ,IAAWY,CAAC,GACZX,IAAgBW,GAAGA,EAAE,OAAO,MAAM,MAAM;AAAA,cAC1C;AAAA,cACC,GAAGT;AAAA,YAAA;AAAA,UAAA;AAAA,WAGJJ,GAAY,gBAAgBL,MAC5B,gBAAAY,EAAC,OAAA,EAAI,WAAU,kDACZ,UAAA;AAAA,YAAAP,GAAY,eACX,gBAAAU,EAAC,OAAA,EAAI,WAAU,4BACZ,UAAAV,EAAW,cACd,IACE;AAAA,YAEHL,IACC,gBAAAe;AAAA,cAACI;AAAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,cAAW;AAAA,gBACX,WAAU;AAAA,cAAA;AAAA,YAAA,IAEV;AAAA,UAAA,EAAA,CACN;AAAA,QAAA,GAEJ;AAAA,QAECrB,KAAc,CAACa,IACd,gBAAAI,EAACK,GAAA,EAAkB,aAAW,IAC5B;AAAA,QAEHrB,IAAQ,gBAAAgB,EAACM,GAAA,EAAY,UAAAtB,EAAA,CAAM,IAAgB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGlD;"}

package/dist/components/group-value-card/group-value-card.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+import { ValueItemElement } from '../value-item';
+/**
+ * Props for the GroupValueCard component.
+ */
+export interface GroupValueCardProps {
+    /**
+     * Main title of the card.
+     */
+    title: string;
+    /**
+     * Optional subtitle shown below the title.
+     */
+    subtitle?: string;
+    /**
+     * Whether to center card content.
+     */
+    centered?: boolean;
+    /**
+     * Value item elements rendered in the content area.
+     */
+    children: ValueItemElement | ValueItemElement[] | ReactNode;
+    /**
+     * Compact style mode.
+     */
+    dense?: boolean;
+    /**
+     * Additional CSS classes for custom styling.
+     */
+    className?: string;
+}
+/**
+ * Card wrapper for grouped value display.
+ */
+export declare function GroupValueCard({ title, subtitle, centered, children, dense, className, }: GroupValueCardProps): import("react/jsx-runtime").JSX.Element;
+export default GroupValueCard;

package/dist/components/group-value-card/group-value-card.mjs

@@ -0,0 +1,54 @@
+import { jsxs as d, jsx as a } from "react/jsx-runtime";
+import { cn as e } from "../../lib/utils.mjs";
+function n({
+  title: t,
+  subtitle: l,
+  centered: i,
+  children: o,
+  dense: r,
+  className: s
+}) {
+  return /* @__PURE__ */ d("div", { className: e("overflow-hidden rounded-lg border bg-card", s), children: [
+    /* @__PURE__ */ d("div", { className: e("bg-muted", r ? "px-3 py-2" : "px-4 py-3"), children: [
+      /* @__PURE__ */ a(
+        "p",
+        {
+          role: "heading",
+          "aria-level": 1,
+          className: e(
+            r ? "text-base font-semibold" : "text-lg font-semibold"
+          ),
+          children: t
+        }
+      ),
+      l ? /* @__PURE__ */ a(
+        "p",
+        {
+          role: "heading",
+          "aria-level": 2,
+          className: e(
+            r ? "text-xs" : "text-sm",
+            "text-muted-foreground"
+          ),
+          children: l
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ a(
+      "div",
+      {
+        className: e(
+          "grid grid-cols-12 p-2",
+          r ? "gap-y-2" : "gap-y-3",
+          i && "justify-items-center"
+        ),
+        children: o
+      }
+    )
+  ] });
+}
+export {
+  n as GroupValueCard,
+  n as default
+};
+//# sourceMappingURL=group-value-card.mjs.map

package/dist/components/group-value-card/group-value-card.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"group-value-card.mjs","sources":["../../../src/components/group-value-card/group-value-card.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { ValueItemElement } from \"@/components/value-item\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Props for the GroupValueCard component.\n */\nexport interface GroupValueCardProps {\n  /**\n   * Main title of the card.\n   */\n  title: string;\n  /**\n   * Optional subtitle shown below the title.\n   */\n  subtitle?: string;\n  /**\n   * Whether to center card content.\n   */\n  centered?: boolean;\n  /**\n   * Value item elements rendered in the content area.\n   */\n  children: ValueItemElement | ValueItemElement[] | ReactNode;\n  /**\n   * Compact style mode.\n   */\n  dense?: boolean;\n  /**\n   * Additional CSS classes for custom styling.\n   */\n  className?: string;\n}\n\n/**\n * Card wrapper for grouped value display.\n */\nexport function GroupValueCard({\n  title,\n  subtitle,\n  centered,\n  children,\n  dense,\n  className,\n}: GroupValueCardProps) {\n  return (\n    <div className={cn(\"overflow-hidden rounded-lg border bg-card\", className)}>\n      <div className={cn(\"bg-muted\", dense ? \"px-3 py-2\" : \"px-4 py-3\")}>\n        <p\n          role=\"heading\"\n          aria-level={1}\n          className={cn(\n            dense ? \"text-base font-semibold\" : \"text-lg font-semibold\",\n          )}\n        >\n          {title}\n        </p>\n        {subtitle ? (\n          <p\n            role=\"heading\"\n            aria-level={2}\n            className={cn(\n              dense ? \"text-xs\" : \"text-sm\",\n              \"text-muted-foreground\",\n            )}\n          >\n            {subtitle}\n          </p>\n        ) : null}\n      </div>\n      <div\n        className={cn(\n          \"grid grid-cols-12 p-2\",\n          dense ? \"gap-y-2\" : \"gap-y-3\",\n          centered && \"justify-items-center\",\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\nexport default GroupValueCard;\n"],"names":["GroupValueCard","title","subtitle","centered","children","dense","className","cn","jsxs","jsx"],"mappings":";;AAqCO,SAASA,EAAe;AAAA,EAC7B,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AACF,GAAwB;AACtB,2BACG,OAAA,EAAI,WAAWC,EAAG,6CAA6CD,CAAS,GACvE,UAAA;AAAA,IAAA,gBAAAE,EAAC,SAAI,WAAWD,EAAG,YAAYF,IAAQ,cAAc,WAAW,GAC9D,UAAA;AAAA,MAAA,gBAAAI;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAY;AAAA,UACZ,WAAWF;AAAA,YACTF,IAAQ,4BAA4B;AAAA,UAAA;AAAA,UAGrC,UAAAJ;AAAA,QAAA;AAAA,MAAA;AAAA,MAEFC,IACC,gBAAAO;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAY;AAAA,UACZ,WAAWF;AAAA,YACTF,IAAQ,YAAY;AAAA,YACpB;AAAA,UAAA;AAAA,UAGD,UAAAH;AAAA,QAAA;AAAA,MAAA,IAED;AAAA,IAAA,GACN;AAAA,IACA,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWF;AAAA,UACT;AAAA,UACAF,IAAQ,YAAY;AAAA,UACpBF,KAAY;AAAA,QAAA;AAAA,QAGb,UAAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;"}

package/dist/components/group-value-card/index.d.ts

@@ -0,0 +1,2 @@
+export type { GroupValueCardProps } from './group-value-card';
+export { default, default as GroupValueCard } from './group-value-card';

package/dist/components/header/header-title.d.ts

@@ -0,0 +1,35 @@
+import { HTMLAttributes } from 'react';
+/**
+ * Props for the HeaderTitle component.
+ */
+export interface HeaderTitleProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Whether to show a loading indicator.
+     */
+    loading?: boolean;
+    /**
+     * The title content to display.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Header title component with optional loading state.
+ */
+export default function HeaderTitle({ loading, children, ...props }: HeaderTitleProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Props for the HeaderSubtitle component.
+ */
+export interface HeaderSubtitleProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Whether to show a loading indicator.
+     */
+    loading?: boolean;
+    /**
+     * The subtitle content to display.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Header subtitle component with optional loading state.
+ */
+export declare function HeaderSubtitle({ loading, children, ...props }: HeaderSubtitleProps): import("react/jsx-runtime").JSX.Element;