@vkzstudio/muza-ui 1.0.16 → 1.0.18

package/dist/components/FileUpload/FileUpload.js

@@ -1,14 +1,15 @@
-import { jsxs as n, jsx as i } from "react/jsx-runtime";
-import * as y from "react";
-import { cva as P } from "class-variance-authority";
-import { useDropzone as D } from "react-dropzone";
-import { FileItem as H } from "./FileItem.js";
-import { useMuzaTranslations as E } from "../../translations/TranslationContext.js";
-import { Flex as j } from "../Flex/Flex.js";
-import { Typography as x } from "../Typography/Typography.js";
-import { cn as A } from "../../utils/cn.js";
-import { CloudUploadOutline as C } from "@solar-icons/react-perf";
-const ee = P(
+import { jsxs as u, jsx as i, Fragment as H } from "react/jsx-runtime";
+import * as M from "react";
+import { cva as T } from "class-variance-authority";
+import { useDropzone as E } from "react-dropzone";
+import { FileItem as C } from "./FileItem.js";
+import { useMuzaTranslations as ee } from "../../translations/TranslationContext.js";
+import { Flex as oe } from "../Flex/Flex.js";
+import { FormField as te } from "../FormField/FormField.js";
+import { cn as P } from "../../utils/cn.js";
+import { CloudUploadOutline as re } from "@solar-icons/react-perf";
+import { Typography as F } from "../Typography/Typography.js";
+const le = T(
   [
     "group relative cursor-pointer rounded-xl border-1 border-dashed transition-colors",
     "p-4xl pt-3xl pr-4xl pb-3xl",
@@ -44,7 +45,7 @@ const ee = P(
       }
     }
   }
-), te = P(
+), se = T(
   [
     "text-center transition-colors",
     "text-comp-file-upload-text-dark-secondary"
@@ -56,161 +57,166 @@ const ee = P(
       }
     }
   }
-), oe = y.forwardRef(
+), ie = M.forwardRef(
   ({
     className: S,
-    onDrop: g,
+    onDrop: n,
     accept: f,
     multiple: U = !0,
-    maxSize: b,
-    maxSizeErrorMessage: T,
-    size: V = "base",
-    disabled: p = !1,
-    readOnly: h = !1,
-    dropzoneOptions: K,
-    label: m,
-    title: _,
-    subtitle: k,
-    preselectedFiles: q = [],
-    fileStatus: B = [],
-    itemErrors: v,
-    itemHints: z,
-    error: G,
-    onError: o,
-    onDelete: M,
-    onChange: c,
-    ...J
-  }, L) => {
-    const u = E(), [w, F] = y.useState(q), [N, $] = y.useState(!1), O = _ ?? u.fileUpload.title, I = b ? u.fileUpload.maxSizeError.replace(
+    maxSize: x,
+    maxSizeErrorMessage: V,
+    size: K = "base",
+    disabled: c = !1,
+    readOnly: g = !1,
+    dropzoneOptions: _,
+    label: k,
+    title: B,
+    subtitle: y,
+    preselectedFiles: G = [],
+    fileStatus: J = [],
+    itemErrors: b,
+    itemHints: h,
+    error: L,
+    required: v,
+    disableRequiredAsterisk: O,
+    onError: t,
+    onDelete: z,
+    onChange: p,
+    ...Q
+  }, W) => {
+    const m = ee(), [w, $] = M.useState(G), [N, I] = M.useState(!1), X = B ?? m.fileUpload.title, R = x ? m.fileUpload.maxSizeError.replace(
       "{size}",
-      (b / (1024 * 1024)).toFixed(0)
-    ) : "", R = T ?? I, { getRootProps: Q, getInputProps: W, isDragActive: X } = D({
-      onDrop: (t, a) => {
+      (x / (1024 * 1024)).toFixed(0)
+    ) : "", j = V ?? R, { getRootProps: Y, getInputProps: Z, isDragActive: q } = E({
+      onDrop: (o, a) => {
         try {
-          if ($(!1), a.length > 0 && a.some(
+          if (I(!1), a.length > 0 && a.some(
             (r) => r.errors.some((l) => l.code === "file-too-large")
           )) {
-            $(!0);
-            const r = R || I;
-            o == null || o(r, a[0].file);
+            I(!0);
+            const r = j || R;
+            t == null || t(r, a[0].file);
             return;
           }
-          F((e) => {
+          $((e) => {
             const r = new Set(
               e.map((s) => `${s.name}-${s.size}-${s.lastModified}`)
-            ), l = t.filter(
+            ), l = o.filter(
               (s) => !r.has(`${s.name}-${s.size}-${s.lastModified}`)
             ), d = [...e, ...l];
-            return c == null || c(d), d;
-          }), g == null || g(t);
+            return p == null || p(d), d;
+          }), n == null || n(o);
         } catch (e) {
-          const r = e instanceof Error ? e.message : u.fileUpload.processingError;
-          o == null || o(r);
+          const r = e instanceof Error ? e.message : m.fileUpload.processingError;
+          t == null || t(r);
         }
       },
-      accept: typeof f == "string" ? { [f]: [] } : f ? Object.fromEntries(f.map((t) => [t, []])) : void 0,
+      accept: typeof f == "string" ? { [f]: [] } : f ? Object.fromEntries(f.map((o) => [o, []])) : void 0,
       multiple: U,
-      maxSize: b,
-      disabled: p,
-      ...K
-    }), Y = h || !U && w.length > 0;
-    return /* @__PURE__ */ n(j, { direction: "column", gap: "lg", children: [
-      !Y && /* @__PURE__ */ n(j, { direction: "column", gap: "sm", children: [
-        m && (typeof m == "string" ? /* @__PURE__ */ i(
-          x,
-          {
-            size: "sm",
-            component: "label",
-            weight: "regular",
-            variant: "body",
-            className: "caret-comp-input-text-primary",
-            children: m
-          }
-        ) : m),
-        /* @__PURE__ */ n(
-          "div",
-          {
-            ref: L,
-            tabIndex: p ? void 0 : 0,
-            className: A(
-              ee({
-                error: G || N,
-                disabled: p,
-                className: S,
-                isDragActive: X
-              })
+      maxSize: x,
+      disabled: c,
+      ..._
+    }), A = g || !U && w.length > 0;
+    return /* @__PURE__ */ u(oe, { direction: "column", gap: "lg", children: [
+      (!A || k) && /* @__PURE__ */ i(
+        te,
+        {
+          label: k,
+          required: v,
+          disableRequiredAsterisk: O,
+          children: !A && /* @__PURE__ */ u(H, { children: [
+            /* @__PURE__ */ u(
+              "div",
+              {
+                ref: W,
+                tabIndex: c ? void 0 : 0,
+                className: P(
+                  le({
+                    error: L || N,
+                    disabled: c,
+                    className: S,
+                    isDragActive: q
+                  })
+                ),
+                ...Y(),
+                ...Q,
+                children: [
+                  /* @__PURE__ */ i(
+                    "input",
+                    {
+                      ...Z({ required: v }),
+                      "aria-required": v
+                    }
+                  ),
+                  /* @__PURE__ */ i(re, { className: "inline size-comp-file-upload-ico-size" }),
+                  /* @__PURE__ */ u("div", { children: [
+                    /* @__PURE__ */ i(F, { size: "base", component: "p", weight: "medium", children: X }),
+                    y && /* @__PURE__ */ i(
+                      F,
+                      {
+                        size: "sm",
+                        component: "p",
+                        weight: "regular",
+                        className: P(
+                          se({
+                            disabled: c,
+                            className: S
+                          })
+                        ),
+                        children: y
+                      }
+                    )
+                  ] })
+                ]
+              }
             ),
-            ...Q(),
-            ...J,
-            children: [
-              /* @__PURE__ */ i("input", { ...W() }),
-              /* @__PURE__ */ i(C, { className: "inline size-comp-file-upload-ico-size" }),
-              /* @__PURE__ */ n("div", { children: [
-                /* @__PURE__ */ i(x, { size: "base", component: "p", weight: "medium", children: O }),
-                k && /* @__PURE__ */ i(
-                  x,
-                  {
-                    size: "sm",
-                    component: "p",
-                    weight: "regular",
-                    className: A(
-                      te({
-                        disabled: p,
-                        className: S
-                      })
-                    ),
-                    children: k
-                  }
-                )
-              ] })
-            ]
-          }
-        ),
-        N && /* @__PURE__ */ i(
-          x,
-          {
-            size: "sm",
-            variant: "body",
-            component: "p",
-            weight: "regular",
-            className: "text-comp-file-upload-text-error-def",
-            children: R
-          }
-        )
-      ] }),
-      /* @__PURE__ */ i("ul", { className: "flex flex-col gap-md", children: w.map((t, a) => {
-        const e = B[a], r = e == null ? void 0 : e.uploaded;
-        return h && !r ? null : /* @__PURE__ */ i(
-          H,
+            N && /* @__PURE__ */ i(
+              F,
+              {
+                size: "sm",
+                variant: "body",
+                component: "p",
+                weight: "regular",
+                className: "text-comp-file-upload-text-error-def",
+                children: j
+              }
+            )
+          ] })
+        }
+      ),
+      /* @__PURE__ */ i("ul", { className: "flex flex-col gap-md", children: w.map((o, a) => {
+        const e = J[a], r = e == null ? void 0 : e.uploaded;
+        return g && !r ? null : /* @__PURE__ */ i(
+          C,
           {
-            file: t,
+            file: o,
             uploaded: r,
             progress: e == null ? void 0 : e.progress,
-            disabled: p,
-            readOnly: h,
-            error: v == null ? void 0 : v.get(t),
-            note: z == null ? void 0 : z.get(t),
-            onError: o,
-            size: V,
+            disabled: c,
+            readOnly: g,
+            error: b == null ? void 0 : b.get(o),
+            note: h == null ? void 0 : h.get(o),
+            onError: t,
+            size: K,
             onDelete: () => {
               try {
-                F((l) => {
-                  const d = l.filter((s, Z) => Z !== a);
-                  return c == null || c(d), d;
-                }), M == null || M(t, a);
+                $((l) => {
+                  const d = l.filter((s, D) => D !== a);
+                  return p == null || p(d), d;
+                }), z == null || z(o, a);
               } catch (l) {
-                const d = l instanceof Error ? l.message : u.fileUpload.deleteError;
-                o == null || o(d, t);
+                const d = l instanceof Error ? l.message : m.fileUpload.deleteError;
+                t == null || t(d, o);
               }
             }
           },
-          t.name
+          o.name
         );
       }) })
     ] });
   }
 );
-oe.displayName = "FileUpload";
+ie.displayName = "FileUpload";
 export {
-  oe as FileUpload
+  ie as FileUpload
 };

package/dist/components/FileUpload/FileUpload.stories.d.ts

@@ -4,11 +4,13 @@ declare const meta: Meta<typeof FileUpload>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const Required: Story;
 export declare const Error: Story;
 export declare const ErrorWithUploadedFiles: Story;
 export declare const UploadInProgress: Story;
 export declare const UploadedFiles: Story;
 export declare const SingleFile: Story;
+export declare const SingleFileWithLabel: Story;
 export declare const ImagesOnly: Story;
 export declare const WithSizeLimit: Story;
 export declare const Disabled: Story;

package/dist/components/FileUpload/FileUpload.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUpload.stories.d.ts","sourceRoot":"","sources":["../../../src/components/FileUpload/FileUpload.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAE3D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAsJjC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAerB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAmBnB,CAAA;AAED,eAAO,MAAM,sBAAsB,EAAE,KAoBpC,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAsB9B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAkB3B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAiBxB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAexB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAiB3B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAmBtB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KA0ChC,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAoBtB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KA0F9B,CAAA"}
+{"version":3,"file":"FileUpload.stories.d.ts","sourceRoot":"","sources":["../../../src/components/FileUpload/FileUpload.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAE3D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAkKjC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAerB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAgBtB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAmBnB,CAAA;AAED,eAAO,MAAM,sBAAsB,EAAE,KAoBpC,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAsB9B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAkB3B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAiBxB,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAqBjC,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAexB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAiB3B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAmBtB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KA0ChC,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAoBtB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KA0F9B,CAAA"}

package/dist/components/Flex/Flex.d.ts

@@ -37,6 +37,8 @@ export interface FlexProps extends Omit<VariantProps<typeof flexVariants>, 'gap'
     component?: HTMLElementTag;
     /** Additional CSS classes for custom styling. */
     className?: string;
+    /** Inline styles for escape-hatch customizations not covered by tokens. */
+    style?: React.CSSProperties;
     /** Sets the main axis direction for flex items. @default 'row' */
     direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
     /** Controls whether flex items wrap to multiple lines. @default 'nowrap' */
@@ -79,6 +81,6 @@ export interface FlexProps extends Omit<VariantProps<typeof flexVariants>, 'gap'
      */
     margin?: SpacingProps['margin'];
 }
-declare const Flex: ({ children, className, direction, wrap, justify, align, flex, gap, padding, margin, component, ...props }: FlexProps) => import("react/jsx-runtime").JSX.Element;
+declare const Flex: ({ children, className, style, direction, wrap, justify, align, flex, gap, padding, margin, component, ...props }: FlexProps) => import("react/jsx-runtime").JSX.Element;
 export { Flex, flexVariants };
 //# sourceMappingURL=Flex.d.ts.map

package/dist/components/Flex/Flex.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../src/components/Flex/Flex.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EACL,KAAK,YAAY,EAGlB,MAAM,iBAAiB,CAAA;AAExB,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;8EA+CjB,CAAA;AAED,KAAK,cAAc,GAAG,MAAM,KAAK,CAAC,GAAG,CAAC,iBAAiB,GACrD,MAAM,qBAAqB,CAAA;AAE7B;;;GAGG;AACH,MAAM,WAAW,SACf,SAAQ,IAAI,CACR,YAAY,CAAC,OAAO,YAAY,CAAC,EAC/B,KAAK,GACL,MAAM,GACN,MAAM,GACN,GAAG,GACH,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,GAAG,GACH,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,WAAW,GACX,MAAM,GACN,SAAS,GACT,OAAO,GACP,MAAM,CACT,EACD,YAAY;IACd,oDAAoD;IACpD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,iEAAiE;IACjE,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,kEAAkE;IAClE,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,aAAa,GAAG,gBAAgB,CAAA;IAC/D,4EAA4E;IAC5E,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,cAAc,CAAA;IACzC,yDAAyD;IACzD,OAAO,CAAC,EACJ,OAAO,GACP,KAAK,GACL,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,SAAS,CAAA;IACb,4DAA4D;IAC5D,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAA;IAC3D,0CAA0C;IAC1C,IAAI,CAAC,EAAE,CAAC,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAA;IACtC;;;;;;;OAOG;IACH,GAAG,CAAC,EAAE,YAAY,CAAC,KAAK,CAAC,CAAA;IACzB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAA;IACjC;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAA;CAChC;AAED,QAAA,MAAM,IAAI,GAAI,2GAaX,SAAS,4CAuBX,CAAA;AAED,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../src/components/Flex/Flex.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EACL,KAAK,YAAY,EAGlB,MAAM,iBAAiB,CAAA;AAExB,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;8EA+CjB,CAAA;AAED,KAAK,cAAc,GAAG,MAAM,KAAK,CAAC,GAAG,CAAC,iBAAiB,GACrD,MAAM,qBAAqB,CAAA;AAE7B;;;GAGG;AACH,MAAM,WAAW,SACf,SAAQ,IAAI,CACR,YAAY,CAAC,OAAO,YAAY,CAAC,EAC/B,KAAK,GACL,MAAM,GACN,MAAM,GACN,GAAG,GACH,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,GAAG,GACH,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,WAAW,GACX,MAAM,GACN,SAAS,GACT,OAAO,GACP,MAAM,CACT,EACD,YAAY;IACd,oDAAoD;IACpD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,iEAAiE;IACjE,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,kEAAkE;IAClE,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,aAAa,GAAG,gBAAgB,CAAA;IAC/D,4EAA4E;IAC5E,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,cAAc,CAAA;IACzC,yDAAyD;IACzD,OAAO,CAAC,EACJ,OAAO,GACP,KAAK,GACL,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,SAAS,CAAA;IACb,4DAA4D;IAC5D,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAA;IAC3D,0CAA0C;IAC1C,IAAI,CAAC,EAAE,CAAC,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAA;IACtC;;;;;;;OAOG;IACH,GAAG,CAAC,EAAE,YAAY,CAAC,KAAK,CAAC,CAAA;IACzB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAA;IACjC;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAA;CAChC;AAED,QAAA,MAAM,IAAI,GAAI,kHAcX,SAAS,4CAwBX,CAAA;AAED,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,CAAA"}

package/dist/components/Flex/Flex.js

@@ -1,9 +1,9 @@
-import { jsx as x } from "react/jsx-runtime";
+import { jsx as w } from "react/jsx-runtime";
 import "react";
-import { cva as w } from "class-variance-authority";
-import { getSpacingVariants as v, spacingVariantDefinitions as d } from "../../utils/spacing.js";
-import { cn as y } from "../../utils/cn.js";
-const j = w(
+import { cva as v } from "class-variance-authority";
+import { getSpacingVariants as d, spacingVariantDefinitions as y } from "../../utils/spacing.js";
+import { cn as j } from "../../utils/cn.js";
+const g = v(
   // Base classes
   "flex",
   {
@@ -41,7 +41,7 @@ const j = w(
         initial: "flex-initial",
         none: "flex-none"
       },
-      ...d
+      ...y
     },
     defaultVariants: {
       direction: "row",
@@ -50,41 +50,43 @@ const j = w(
       align: "stretch"
     }
   }
-), D = ({
+), F = ({
   children: e,
   className: t,
-  direction: r,
-  wrap: n,
-  justify: i,
-  align: s,
-  flex: a,
-  gap: o,
-  padding: f,
-  margin: l,
-  component: c = "div",
-  ...p
+  style: r,
+  direction: n,
+  wrap: i,
+  justify: s,
+  align: a,
+  flex: o,
+  gap: f,
+  padding: l,
+  margin: c,
+  component: p = "div",
+  ...m
 }) => {
-  const m = c ?? "div", u = v({ gap: o, padding: f, margin: l });
-  return /* @__PURE__ */ x(
-    m,
+  const u = p ?? "div", x = d({ gap: f, padding: l, margin: c });
+  return /* @__PURE__ */ w(
+    u,
     {
-      className: y(
-        j({
-          direction: r,
-          wrap: n,
-          justify: i,
-          align: s,
-          flex: a,
-          ...u
+      className: j(
+        g({
+          direction: n,
+          wrap: i,
+          justify: s,
+          align: a,
+          flex: o,
+          ...x
         }),
         t
       ),
-      ...p,
+      style: r,
+      ...m,
       children: e
     }
   );
 };
 export {
-  D as Flex,
-  j as flexVariants
+  F as Flex,
+  g as flexVariants
 };

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

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+export interface FormFieldProps {
+    /** The form control element (input, textarea, select trigger, etc.). */
+    children: ReactNode;
+    /** Label text displayed above the control. */
+    label?: string;
+    /** Helper or error text displayed below the control. */
+    hint?: string;
+    /** Renders the hint in an error color when true. */
+    error?: boolean;
+    /** Displays a red asterisk in the label when true. */
+    required?: boolean;
+    /**
+     * Hides the required asterisk (*) even when `required` is true.
+     * @default false
+     */
+    disableRequiredAsterisk?: boolean;
+    /** Associates the label with a form element by ID. */
+    htmlFor?: string;
+    /** ID for the label element (used with `aria-labelledby`). */
+    labelId?: string;
+    /** ID for the hint element (used with `aria-describedby`). */
+    hintId?: string;
+    /** Extra content rendered inline next to the label (e.g. a tooltip icon). */
+    labelExtra?: ReactNode;
+    /** Additional CSS classes for the outer wrapper. */
+    className?: string;
+}
+export declare const FormField: import('react').ForwardRefExoticComponent<FormFieldProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=FormField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAc,MAAM,OAAO,CAAA;AAKlD,MAAM,WAAW,cAAc;IAC7B,wEAAwE;IACxE,QAAQ,EAAE,SAAS,CAAA;IACnB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,wDAAwD;IACxD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,oDAAoD;IACpD,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,6EAA6E;IAC7E,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,SAAS,2GAoDrB,CAAA"}

package/dist/components/FormField/FormField.js

@@ -0,0 +1,56 @@
+import { jsxs as f, jsx as m } from "react/jsx-runtime";
+import { forwardRef as g } from "react";
+import { InputHint as h } from "./InputHint.js";
+import { InputLabel as e } from "./InputLabel.js";
+import { cn as F } from "../../utils/cn.js";
+const N = g(
+  ({
+    children: t,
+    label: i,
+    hint: o,
+    error: s,
+    required: r,
+    disableRequiredAsterisk: p,
+    htmlFor: c,
+    labelId: n,
+    hintId: x,
+    labelExtra: d,
+    className: a
+  }, l) => /* @__PURE__ */ f(
+    "div",
+    {
+      ref: l,
+      className: F("flex flex-col gap-comp-input-gap", a),
+      children: [
+        i && (d ? /* @__PURE__ */ f("div", { className: "flex items-center gap-2xs", children: [
+          /* @__PURE__ */ m(
+            e,
+            {
+              htmlFor: c,
+              id: n,
+              required: r,
+              disableRequiredAsterisk: p,
+              children: i
+            }
+          ),
+          d
+        ] }) : /* @__PURE__ */ m(
+          e,
+          {
+            htmlFor: c,
+            id: n,
+            required: r,
+            disableRequiredAsterisk: p,
+            children: i
+          }
+        )),
+        t,
+        o && /* @__PURE__ */ m(h, { error: s, id: x, children: o })
+      ]
+    }
+  )
+);
+N.displayName = "FormField";
+export {
+  N as FormField
+};

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

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export interface InputHintProps {
+    /** Hint or error message content. */
+    children: ReactNode;
+    /** When true, renders the hint in an error color. */
+    error?: boolean;
+    /** ID for the hint element (used with `aria-describedby`). */
+    id?: string;
+    /** Additional CSS classes for the hint element. */
+    className?: string;
+}
+export declare const InputHint: ({ children, error, id, className, }: InputHintProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=InputHint.d.ts.map

package/dist/components/FormField/InputHint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputHint.d.ts","sourceRoot":"","sources":["../../../src/components/FormField/InputHint.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,MAAM,WAAW,cAAc;IAC7B,qCAAqC;IACrC,QAAQ,EAAE,SAAS,CAAA;IACnB,qDAAqD;IACrD,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,8DAA8D;IAC9D,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,SAAS,GAAI,qCAKvB,cAAc,4CAchB,CAAA"}

package/dist/components/FormField/InputHint.js

@@ -0,0 +1,26 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Typography as m } from "../Typography/Typography.js";
+import { cn as n } from "../../utils/cn.js";
+const a = ({
+  children: t,
+  error: o,
+  id: r,
+  className: p
+}) => /* @__PURE__ */ e(
+  m,
+  {
+    component: "span",
+    size: "sm",
+    weight: "regular",
+    className: n(
+      "text-comp-input-text-secondary",
+      { "text-comp-input-text-error": o },
+      p
+    ),
+    id: r,
+    children: t
+  }
+);
+export {
+  a as InputHint
+};

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

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+export interface InputLabelProps {
+    /** Label text content. */
+    children: ReactNode;
+    /** Associates the label with a form element by ID. */
+    htmlFor?: string;
+    /** ID for the label element itself (used with `aria-labelledby`). */
+    id?: string;
+    /** When true, displays a red asterisk after the label text. */
+    required?: boolean;
+    /**
+     * Hides the required asterisk (*) even when `required` is true.
+     * @default false
+     */
+    disableRequiredAsterisk?: boolean;
+    /** Additional CSS classes for the label element. */
+    className?: string;
+}
+export declare const InputLabel: ({ children, htmlFor, id, required, disableRequiredAsterisk, className, }: InputLabelProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=InputLabel.d.ts.map

package/dist/components/FormField/InputLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputLabel.d.ts","sourceRoot":"","sources":["../../../src/components/FormField/InputLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,MAAM,WAAW,eAAe;IAC9B,0BAA0B;IAC1B,QAAQ,EAAE,SAAS,CAAA;IACnB,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,qEAAqE;IACrE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,UAAU,GAAI,0EAOxB,eAAe,4CAcjB,CAAA"}

package/dist/components/FormField/InputLabel.js

@@ -0,0 +1,27 @@
+import { jsxs as m, jsx as n } from "react/jsx-runtime";
+import { Typography as a } from "../Typography/Typography.js";
+const c = ({
+  children: e,
+  htmlFor: r,
+  id: t,
+  required: o,
+  disableRequiredAsterisk: p,
+  className: s
+}) => /* @__PURE__ */ m(
+  a,
+  {
+    component: "label",
+    weight: "regular",
+    size: "sm",
+    htmlFor: r,
+    id: t,
+    className: s,
+    children: [
+      e,
+      o && !p && /* @__PURE__ */ n("span", { className: "text-comp-input-text-error", children: " *" })
+    ]
+  }
+);
+export {
+  c as InputLabel
+};