@fabio.caffarello/react-design-system 3.8.0 → 3.10.0

package/dist/granular/ui/components/Form/Form.js

@@ -0,0 +1,184 @@
+"use client";
+var _ = Object.defineProperty, q = Object.defineProperties;
+var A = Object.getOwnPropertyDescriptors;
+var g = Object.getOwnPropertySymbols;
+var R = Object.prototype.hasOwnProperty, j = Object.prototype.propertyIsEnumerable;
+var P = (r, o, e) => o in r ? _(r, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[o] = e, k = (r, o) => {
+  for (var e in o || (o = {}))
+    R.call(o, e) && P(r, e, o[e]);
+  if (g)
+    for (var e of g(o))
+      j.call(o, e) && P(r, e, o[e]);
+  return r;
+}, F = (r, o) => q(r, A(o));
+var h = (r, o) => {
+  var e = {};
+  for (var t in r)
+    R.call(r, t) && o.indexOf(t) < 0 && (e[t] = r[t]);
+  if (r != null && g)
+    for (var t of g(r))
+      o.indexOf(t) < 0 && j.call(r, t) && (e[t] = r[t]);
+  return e;
+};
+var z = (r, o, e) => new Promise((t, m) => {
+  var S = (s) => {
+    try {
+      f(e.next(s));
+    } catch (l) {
+      m(l);
+    }
+  }, a = (s) => {
+    try {
+      f(e.throw(s));
+    } catch (l) {
+      m(l);
+    }
+  }, f = (s) => s.done ? t(s.value) : Promise.resolve(s.value).then(S, a);
+  f((e = e.apply(r, o)).next());
+});
+import { jsx as c, jsxs as C } from "react/jsx-runtime";
+import { FormProvider as B } from "./FormProvider.js";
+import { cn as n } from "../../utils/cn.js";
+import { getSpacingClass as b } from "../../tokens/spacing.js";
+import { getRadiusClass as p } from "../../tokens/radius.js";
+import { getTypographySizeFromFontSize as x } from "../../tokens/typography.js";
+function X(f) {
+  var s = f, {
+    children: r,
+    onSubmit: o,
+    loading: e = !1,
+    error: t = null,
+    success: m = null,
+    className: S = ""
+  } = s, a = h(s, [
+    "children",
+    "onSubmit",
+    "loading",
+    "error",
+    "success",
+    "className"
+  ]);
+  const l = n(
+    b("lg", "gap"),
+    "flex",
+    "flex-col",
+    S
+  );
+  if ("form" in a && a.form !== void 0) {
+    const N = a, {
+      form: i,
+      onSubmit: H,
+      onSubmitError: d
+    } = N, V = h(N, [
+      "form",
+      "onSubmit",
+      "onSubmitError"
+    ]), w = i.handleSubmit(
+      (v) => z(null, null, function* () {
+        try {
+          yield H(v);
+        } catch (T) {
+          d == null || d(T);
+        }
+      }),
+      (v) => {
+        d == null || d(v);
+      }
+    );
+    return /* @__PURE__ */ c(B, { form: i, loading: e, children: /* @__PURE__ */ C(
+      "form",
+      F(k({
+        className: l,
+        onSubmit: w,
+        noValidate: !0
+      }, V), {
+        children: [
+          r,
+          t && /* @__PURE__ */ c(
+            "div",
+            {
+              role: "alert",
+              className: n(
+                b("md", "p"),
+                x("sm"),
+                "text-error-dark",
+                "bg-error-bg",
+                "border",
+                "border-error",
+                p("md")
+              ),
+              children: t
+            }
+          ),
+          m && /* @__PURE__ */ c(
+            "div",
+            {
+              role: "alert",
+              className: n(
+                b("md", "p"),
+                x("sm"),
+                "text-success-dark",
+                "bg-success-bg",
+                "border",
+                "border-success",
+                p("md")
+              ),
+              children: m
+            }
+          )
+        ]
+      })
+    ) });
+  }
+  const u = a.onSubmit || o, y = a, { onSubmit: I } = y, D = h(y, ["onSubmit"]);
+  return /* @__PURE__ */ C(
+    "form",
+    F(k({
+      className: l,
+      onSubmit: (i) => {
+        i.preventDefault(), u && !e && (u == null || u(i));
+      },
+      noValidate: !0
+    }, D), {
+      children: [
+        r,
+        t && /* @__PURE__ */ c(
+          "div",
+          {
+            role: "alert",
+            className: n(
+              b("md", "p"),
+              x("sm"),
+              "text-error-dark",
+              "bg-error-bg",
+              "border",
+              "border-error",
+              p("md")
+            ),
+            children: t
+          }
+        ),
+        m && /* @__PURE__ */ c(
+          "div",
+          {
+            role: "alert",
+            className: n(
+              b("md", "p"),
+              x("sm"),
+              "text-success-dark",
+              "bg-success-bg",
+              "border",
+              "border-success",
+              p("md")
+            ),
+            children: m
+          }
+        )
+      ]
+    })
+  );
+}
+export {
+  X as default
+};
+//# sourceMappingURL=Form.js.map

package/dist/granular/ui/components/Form/Form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","sources":["../../../../../src/ui/components/Form/Form.tsx"],"sourcesContent":["\"use client\";\n\nimport type { FormHTMLAttributes, ReactNode } from \"react\";\nimport { FormProvider } from \"./FormProvider\";\nimport type { FieldValues, UseFormReturn } from \"react-hook-form\";\nimport { cn } from \"../../utils\";\nimport {\n  getSpacingClass,\n  getRadiusClass,\n  getTypographySizeFromFontSize,\n} from \"../../tokens\";\n\n// Simple Form Props\ninterface SimpleFormProps extends FormHTMLAttributes<HTMLFormElement> {\n  children: ReactNode;\n  onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;\n  loading?: boolean;\n  error?: string | null;\n  success?: string | null;\n  form?: never; // Cannot use form prop in simple mode\n}\n\n// React Hook Form Props\ninterface ReactHookFormProps<\n  TFieldValues extends FieldValues = FieldValues,\n> extends Omit<FormHTMLAttributes<HTMLFormElement>, \"onSubmit\"> {\n  children: ReactNode;\n  form: UseFormReturn<TFieldValues>;\n  onSubmit: (data: TFieldValues) => void | Promise<void>;\n  loading?: boolean;\n  error?: string | null;\n  success?: string | null;\n  onSubmitError?: (errors: unknown) => void;\n}\n\ntype FormProps<TFieldValues extends FieldValues = FieldValues> =\n  | SimpleFormProps\n  | ReactHookFormProps<TFieldValues>;\n\n/**\n * Form Component\n *\n * A flexible form component that supports both simple forms and react-hook-form integration.\n *\n * @example\n * ```tsx\n * // Simple form\n * <Form onSubmit={handleSubmit} loading={isSubmitting}>\n *   <Input name=\"email\" />\n *   <Button type=\"submit\">Submit</Button>\n * </Form>\n *\n * // With react-hook-form\n * const form = useForm({ resolver: zodResolver(schema) });\n * <Form form={form} onSubmit={handleSubmit}>\n *   <FormField name=\"email\">\n *     {({ register, error }) => (\n *       <>\n *         <Input {...register('email')} />\n *         {error && <ErrorMessage>{error}</ErrorMessage>}\n *       </>\n *     )}\n *   </FormField>\n * </Form>\n * ```\n */\nexport default function Form<TFieldValues extends FieldValues = FieldValues>({\n  children,\n  onSubmit,\n  loading = false,\n  error = null,\n  success = null,\n  className = \"\",\n  ...props\n}: FormProps<TFieldValues>) {\n  const classes = cn(\n    getSpacingClass(\"lg\", \"gap\"),\n    \"flex\",\n    \"flex-col\",\n    className,\n  );\n\n  // Check if using react-hook-form\n  const isReactHookForm = \"form\" in props && props.form !== undefined;\n\n  if (isReactHookForm) {\n    const {\n      form,\n      onSubmit: onSubmitData,\n      onSubmitError,\n      ...formProps\n    } = props as ReactHookFormProps<TFieldValues>;\n\n    const handleSubmit = form.handleSubmit(\n      async (data) => {\n        try {\n          await onSubmitData(data);\n        } catch (err) {\n          onSubmitError?.(err);\n        }\n      },\n      (errors) => {\n        onSubmitError?.(errors);\n      },\n    );\n\n    return (\n      <FormProvider form={form} loading={loading}>\n        <form\n          className={classes}\n          onSubmit={handleSubmit}\n          noValidate\n          {...formProps}\n        >\n          {children}\n          {error && (\n            <div\n              role=\"alert\"\n              className={cn(\n                getSpacingClass(\"md\", \"p\"),\n                getTypographySizeFromFontSize(\"sm\"),\n                \"text-error-dark\",\n                \"bg-error-bg\",\n                \"border\",\n                \"border-error\",\n                getRadiusClass(\"md\"),\n              )}\n            >\n              {error}\n            </div>\n          )}\n          {success && (\n            <div\n              role=\"alert\"\n              className={cn(\n                getSpacingClass(\"md\", \"p\"),\n                getTypographySizeFromFontSize(\"sm\"),\n                \"text-success-dark\",\n                \"bg-success-bg\",\n                \"border\",\n                \"border-success\",\n                getRadiusClass(\"md\"),\n              )}\n            >\n              {success}\n            </div>\n          )}\n        </form>\n      </FormProvider>\n    );\n  }\n\n  // Simple form mode\n  // Use onSubmit from props or from direct prop\n  const onSubmitSimple = (props as SimpleFormProps).onSubmit || onSubmit;\n  const { onSubmit: _, ...simpleProps } = props as SimpleFormProps;\n\n  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    if (onSubmitSimple && !loading) {\n      // Narrow the union: we're in the !isReactHookForm branch, so\n      // onSubmit takes a FormEvent. TS sees the union member's intersected\n      // parameter type and can't prove it; the cast names the branch.\n      (onSubmitSimple as SimpleFormProps[\"onSubmit\"])?.(e);\n    }\n  };\n\n  return (\n    <form\n      className={classes}\n      onSubmit={handleSubmit}\n      noValidate\n      {...simpleProps}\n    >\n      {children}\n      {error && (\n        <div\n          role=\"alert\"\n          className={cn(\n            getSpacingClass(\"md\", \"p\"),\n            getTypographySizeFromFontSize(\"sm\"),\n            \"text-error-dark\",\n            \"bg-error-bg\",\n            \"border\",\n            \"border-error\",\n            getRadiusClass(\"md\"),\n          )}\n        >\n          {error}\n        </div>\n      )}\n      {success && (\n        <div\n          role=\"alert\"\n          className={cn(\n            getSpacingClass(\"md\", \"p\"),\n            getTypographySizeFromFontSize(\"sm\"),\n            \"text-success-dark\",\n            \"bg-success-bg\",\n            \"border\",\n            \"border-success\",\n            getRadiusClass(\"md\"),\n          )}\n        >\n          {success}\n        </div>\n      )}\n    </form>\n  );\n}\n"],"names":["Form","_a","_b","children","onSubmit","loading","error","success","className","props","__objRest","classes","cn","getSpacingClass","form","onSubmitData","onSubmitError","formProps","handleSubmit","data","__async","err","errors","jsx","FormProvider","jsxs","__spreadProps","__spreadValues","getTypographySizeFromFontSize","getRadiusClass","onSubmitSimple","_","simpleProps","e"],"mappings":"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"}

package/dist/granular/ui/components/Form/FormContext.js

@@ -0,0 +1,19 @@
+"use client";
+import { createGenericContext as e } from "../../hooks/createGenericContext.js";
+const t = e({
+  displayName: "FormContext",
+  errorMessage: "useFormContext must be used within a Form component with react-hook-form integration"
+}), n = t.Context, r = t.Provider;
+function i() {
+  return t.useContextRequired();
+}
+function m() {
+  return t.useContextOptional();
+}
+export {
+  n as FormContext,
+  r as FormContextProvider,
+  i as useFormContext,
+  m as useFormContextOptional
+};
+//# sourceMappingURL=FormContext.js.map

package/dist/granular/ui/components/Form/FormContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormContext.js","sources":["../../../../../src/ui/components/Form/FormContext.tsx"],"sourcesContent":["\"use client\";\n\n/* eslint-disable react-refresh/only-export-components */\nimport type { FieldValues, UseFormReturn } from \"react-hook-form\";\nimport { createGenericContext } from \"../../hooks/createGenericContext\";\n\nexport interface FormContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n> {\n  form?: UseFormReturn<TFieldValues>;\n  loading?: boolean;\n}\n\nconst formContext = createGenericContext<FormContextValue>({\n  displayName: \"FormContext\",\n  errorMessage:\n    \"useFormContext must be used within a Form component with react-hook-form integration\",\n});\n\n/**\n * Raw React Context object. Exposed so `useContextSelector(FormContext, …)`\n * keeps working. Prefer the typed hooks below for direct reads.\n */\nexport const FormContext = formContext.Context;\n\n/**\n * Internal Provider — consumed by `FormProvider.tsx` only. Not re-exported\n * from `Form/index.ts`; keeps the public surface unchanged.\n */\nexport const FormContextProvider = formContext.Provider;\n\n/**\n * Hook to access Form context.\n *\n * @throws Error if used outside of Form component with react-hook-form\n */\nexport function useFormContext<\n  TFieldValues extends FieldValues = FieldValues,\n>(): FormContextValue<TFieldValues> {\n  return formContext.useContextRequired<FormContextValue<TFieldValues>>();\n}\n\n/**\n * Hook to access Form context (optional, returns undefined if not in Form).\n */\nexport function useFormContextOptional<\n  TFieldValues extends FieldValues = FieldValues,\n>(): FormContextValue<TFieldValues> | undefined {\n  return formContext.useContextOptional<FormContextValue<TFieldValues>>();\n}\n"],"names":["formContext","createGenericContext","FormContext","FormContextProvider","useFormContext","useFormContextOptional"],"mappings":";;AAaA,MAAMA,IAAcC,EAAuC;AAAA,EACzD,aAAa;AAAA,EACb,cACE;AACJ,CAAC,GAMYC,IAAcF,EAAY,SAM1BG,IAAsBH,EAAY;AAOxC,SAASI,IAEoB;AAClC,SAAOJ,EAAY,mBAAA;AACrB;AAKO,SAASK,IAEgC;AAC9C,SAAOL,EAAY,mBAAA;AACrB;"}

package/dist/granular/ui/components/Form/FormField.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsxs as u, jsx as g } from "react/jsx-runtime";
+import { useFormContext as d } from "./FormContext.js";
+import x from "../../primitives/Label/Label.js";
+import { cn as c } from "../../utils/cn.js";
+import { getTypographyWeightFromFontWeight as w, getTypographySizeFromFontSize as y } from "../../tokens/typography.js";
+import C from "../../primitives/ErrorMessage/ErrorMessage.js";
+import { getSpacingClass as S } from "../../tokens/spacing.js";
+function N({
+  name: r,
+  label: e,
+  children: a,
+  rules: t,
+  className: f = ""
+}) {
+  var n;
+  const { form: i } = d();
+  if (!i)
+    throw new Error(
+      "FormField must be used within a Form component with react-hook-form integration"
+    );
+  const {
+    register: m,
+    formState: { errors: p },
+    watch: l
+  } = i, s = m(r, t), o = (n = p[r]) == null ? void 0 : n.message, h = l(r);
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      className: c(
+        "flex",
+        "flex-col",
+        S("sm", "gap"),
+        f
+      ),
+      children: [
+        e && /* @__PURE__ */ g(
+          x,
+          {
+            htmlFor: r,
+            className: c(
+              "block",
+              y("sm"),
+              w("medium"),
+              "text-fg-primary"
+            ),
+            children: e
+          }
+        ),
+        a({
+          name: r,
+          register: (F) => m(F, t),
+          error: o,
+          value: h,
+          onChange: s.onChange,
+          onBlur: s.onBlur
+        }),
+        o && /* @__PURE__ */ g(C, { message: o })
+      ]
+    }
+  );
+}
+export {
+  N as FormField
+};
+//# sourceMappingURL=FormField.js.map

package/dist/granular/ui/components/Form/FormField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.js","sources":["../../../../../src/ui/components/Form/FormField.tsx"],"sourcesContent":["\"use client\";\n\nimport { useFormContext } from \"./FormContext\";\nimport { ErrorMessage, Label } from \"../../primitives\";\nimport { cn } from \"../../utils\";\nimport {\n  getSpacingClass,\n  getTypographySizeFromFontSize,\n  getTypographyWeightFromFontWeight,\n} from \"../../tokens\";\nimport type { FieldValues, Path, RegisterOptions } from \"react-hook-form\";\nimport type { ReactNode } from \"react\";\nimport type { UseFormReturn } from \"react-hook-form\";\n\nexport interface FormFieldProps<\n  TFieldValues extends FieldValues = FieldValues,\n> {\n  name: Path<TFieldValues>;\n  label?: string;\n  children: (props: {\n    name: string;\n    register: (\n      fieldName: Path<TFieldValues>,\n    ) => ReturnType<UseFormReturn<TFieldValues>[\"register\"]>;\n    error?: string;\n    value?: unknown;\n    onChange?: ReturnType<UseFormReturn<TFieldValues>[\"register\"]>[\"onChange\"];\n    onBlur?: ReturnType<UseFormReturn<TFieldValues>[\"register\"]>[\"onBlur\"];\n  }) => ReactNode;\n  rules?: RegisterOptions<TFieldValues>;\n  className?: string;\n}\n\n/**\n * FormField Component\n *\n * A wrapper component for form fields that integrates with react-hook-form.\n * Provides register, error, and validation state to children.\n *\n * @example\n * ```tsx\n * <FormField name=\"email\" label=\"Email\">\n *   {({ register, error }) => (\n *     <>\n *       <Label htmlFor=\"email\">Email</Label>\n *       <Input id=\"email\" {...register('email')} />\n *       {error && <ErrorMessage>{error}</ErrorMessage>}\n *     </>\n *   )}\n * </FormField>\n * ```\n */\nexport function FormField<TFieldValues extends FieldValues = FieldValues>({\n  name,\n  label,\n  children,\n  rules,\n  className = \"\",\n}: FormFieldProps<TFieldValues>) {\n  const { form } = useFormContext<TFieldValues>();\n\n  if (!form) {\n    throw new Error(\n      \"FormField must be used within a Form component with react-hook-form integration\",\n    );\n  }\n\n  const {\n    register,\n    formState: { errors },\n    watch,\n  } = form;\n\n  const fieldRegister = register(name, rules);\n  const error = errors[name]?.message as string | undefined;\n  const value = watch(name);\n\n  return (\n    <div\n      className={cn(\n        \"flex\",\n        \"flex-col\",\n        getSpacingClass(\"sm\", \"gap\"),\n        className,\n      )}\n    >\n      {label && (\n        <Label\n          htmlFor={name}\n          className={cn(\n            \"block\",\n            getTypographySizeFromFontSize(\"sm\"),\n            getTypographyWeightFromFontWeight(\"medium\"),\n            \"text-fg-primary\",\n          )}\n        >\n          {label}\n        </Label>\n      )}\n      {children({\n        name,\n        register: (fieldName: Path<TFieldValues>) => register(fieldName, rules),\n        error,\n        value,\n        onChange: fieldRegister.onChange,\n        onBlur: fieldRegister.onBlur,\n      })}\n      {error && <ErrorMessage message={error} />}\n    </div>\n  );\n}\n"],"names":["FormField","name","label","children","rules","className","form","useFormContext","register","errors","watch","fieldRegister","error","_a","value","jsxs","cn","getSpacingClass","jsx","Label","getTypographySizeFromFontSize","getTypographyWeightFromFontWeight","fieldName","ErrorMessage"],"mappings":";;;;;;;;AAoDO,SAASA,EAA0D;AAAA,EACxE,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAiC;;AAC/B,QAAM,EAAE,MAAAC,EAAA,IAASC,EAAA;AAEjB,MAAI,CAACD;AACH,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAIJ,QAAM;AAAA,IACJ,UAAAE;AAAA,IACA,WAAW,EAAE,QAAAC,EAAA;AAAA,IACb,OAAAC;AAAA,EAAA,IACEJ,GAEEK,IAAgBH,EAASP,GAAMG,CAAK,GACpCQ,KAAQC,IAAAJ,EAAOR,CAAI,MAAX,gBAAAY,EAAc,SACtBC,IAAQJ,EAAMT,CAAI;AAExB,SACE,gBAAAc;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACAC,EAAgB,MAAM,KAAK;AAAA,QAC3BZ;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAAH,KACC,gBAAAgB;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,SAASlB;AAAA,YACT,WAAWe;AAAA,cACT;AAAA,cACAI,EAA8B,IAAI;AAAA,cAClCC,EAAkC,QAAQ;AAAA,cAC1C;AAAA,YAAA;AAAA,YAGD,UAAAnB;AAAA,UAAA;AAAA,QAAA;AAAA,QAGJC,EAAS;AAAA,UACR,MAAAF;AAAA,UACA,UAAU,CAACqB,MAAkCd,EAASc,GAAWlB,CAAK;AAAA,UACtE,OAAAQ;AAAA,UACA,OAAAE;AAAA,UACA,UAAUH,EAAc;AAAA,UACxB,QAAQA,EAAc;AAAA,QAAA,CACvB;AAAA,QACAC,KAAS,gBAAAM,EAACK,GAAA,EAAa,SAASX,EAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG9C;"}

package/dist/granular/ui/components/Form/FormProvider.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as t } from "react/jsx-runtime";
+import { FormContextProvider as n } from "./FormContext.js";
+function c({
+  form: o,
+  loading: e = !1,
+  children: r
+}) {
+  return /* @__PURE__ */ t(n, { value: {
+    form: o,
+    loading: e
+  }, children: r });
+}
+export {
+  c as FormProvider
+};
+//# sourceMappingURL=FormProvider.js.map

package/dist/granular/ui/components/Form/FormProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormProvider.js","sources":["../../../../../src/ui/components/Form/FormProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport { FormContextProvider, type FormContextValue } from \"./FormContext\";\nimport type { ReactNode } from \"react\";\nimport type { FieldValues, UseFormReturn } from \"react-hook-form\";\n\nexport interface FormProviderProps<\n  TFieldValues extends FieldValues = FieldValues,\n> {\n  form?: UseFormReturn<TFieldValues>;\n  loading?: boolean;\n  children: ReactNode;\n}\n\n/**\n * FormProvider Component\n *\n * Provides react-hook-form context to form children.\n * Used internally by Form component when react-hook-form is integrated.\n */\nexport function FormProvider<TFieldValues extends FieldValues = FieldValues>({\n  form,\n  loading = false,\n  children,\n}: FormProviderProps<TFieldValues>) {\n  const contextValue: FormContextValue<TFieldValues> = {\n    form,\n    loading,\n  };\n\n  return (\n    <FormContextProvider value={contextValue}>{children}</FormContextProvider>\n  );\n}\n"],"names":["FormProvider","form","loading","children","jsx","FormContextProvider"],"mappings":";;;AAoBO,SAASA,EAA6D;AAAA,EAC3E,MAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,UAAAC;AACF,GAAoC;AAMlC,SACE,gBAAAC,EAACC,GAAA,EAAoB,OAN8B;AAAA,IACnD,MAAAJ;AAAA,IACA,SAAAC;AAAA,EAAA,GAI2C,UAAAC,EAAA,CAAS;AAExD;"}

package/dist/granular/ui/components/Form/useFormFieldArray.js

@@ -0,0 +1,29 @@
+"use client";
+var u = Object.defineProperty, s = Object.defineProperties;
+var c = Object.getOwnPropertyDescriptors;
+var e = Object.getOwnPropertySymbols;
+var F = Object.prototype.hasOwnProperty, a = Object.prototype.propertyIsEnumerable;
+var n = (o, r, t) => r in o ? u(o, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[r] = t, i = (o, r) => {
+  for (var t in r || (r = {}))
+    F.call(r, t) && n(o, t, r[t]);
+  if (e)
+    for (var t of e(r))
+      a.call(r, t) && n(o, t, r[t]);
+  return o;
+}, m = (o, r) => s(o, c(r));
+import { useFormContext as f } from "./FormContext.js";
+import { useFieldArray as l } from "react-hook-form";
+function w(o) {
+  const { form: r } = f();
+  if (!r)
+    throw new Error(
+      "useFormFieldArray must be used within a Form component with react-hook-form integration"
+    );
+  return l(m(i({}, o), {
+    control: r.control
+  }));
+}
+export {
+  w as useFormFieldArray
+};
+//# sourceMappingURL=useFormFieldArray.js.map

package/dist/granular/ui/components/Form/useFormFieldArray.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFormFieldArray.js","sources":["../../../../../src/ui/components/Form/useFormFieldArray.ts"],"sourcesContent":["\"use client\";\n\nimport { useFormContext } from \"./FormContext\";\nimport { useFieldArray } from \"react-hook-form\";\nimport type {\n  ArrayPath,\n  FieldValues,\n  UseFieldArrayProps,\n} from \"react-hook-form\";\n\n/**\n * Hook for managing field arrays in forms\n *\n * Wrapper around react-hook-form's useFieldArray that integrates with Form context.\n *\n * @example\n * ```tsx\n * const { fields, append, remove } = useFormFieldArray({\n *   name: 'items',\n * });\n *\n * return (\n *   <>\n *     {fields.map((field, index) => (\n *       <div key={field.id}>\n *         <FormField name={`items.${index}.name`}>\n *           {({ register }) => <Input {...register(`items.${index}.name`)} />}\n *         </FormField>\n *         <Button onClick={() => remove(index)}>Remove</Button>\n *       </div>\n *     ))}\n *     <Button onClick={() => append({ name: '' })}>Add Item</Button>\n *   </>\n * );\n * ```\n */\nexport function useFormFieldArray<\n  TFieldValues extends FieldValues = FieldValues,\n  TFieldArrayName extends ArrayPath<TFieldValues> = ArrayPath<TFieldValues>,\n>(props: Omit<UseFieldArrayProps<TFieldValues, TFieldArrayName>, \"control\">) {\n  const { form } = useFormContext<TFieldValues>();\n\n  if (!form) {\n    throw new Error(\n      \"useFormFieldArray must be used within a Form component with react-hook-form integration\",\n    );\n  }\n\n  return useFieldArray<TFieldValues, TFieldArrayName>({\n    ...props,\n    control: form.control,\n  });\n}\n"],"names":["useFormFieldArray","props","form","useFormContext","useFieldArray","__spreadProps","__spreadValues"],"mappings":";;;;;;;;;;;;;;;AAoCO,SAASA,EAGdC,GAA2E;AAC3E,QAAM,EAAE,MAAAC,EAAA,IAASC,EAAA;AAEjB,MAAI,CAACD;AACH,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAIJ,SAAOE,EAA6CC,EAAAC,EAAA,IAC/CL,IAD+C;AAAA,IAElD,SAASC,EAAK;AAAA,EAAA,EACf;AACH;"}

package/dist/granular/ui/components/FormWizardPattern/FormWizardPattern.js

@@ -0,0 +1,121 @@
+"use client";
+var E = Object.defineProperty, F = Object.defineProperties;
+var P = Object.getOwnPropertyDescriptors;
+var N = Object.getOwnPropertySymbols;
+var V = Object.prototype.hasOwnProperty, W = Object.prototype.propertyIsEnumerable;
+var v = (t, i, e) => i in t ? E(t, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[i] = e, p = (t, i) => {
+  for (var e in i || (i = {}))
+    V.call(i, e) && v(t, e, i[e]);
+  if (N)
+    for (var e of N(i))
+      W.call(i, e) && v(t, e, i[e]);
+  return t;
+}, f = (t, i) => F(t, P(i));
+var C = (t, i, e) => new Promise((S, r) => {
+  var c = (n) => {
+    try {
+      l(e.next(n));
+    } catch (s) {
+      r(s);
+    }
+  }, d = (n) => {
+    try {
+      l(e.throw(n));
+    } catch (s) {
+      r(s);
+    }
+  }, l = (n) => n.done ? S(n.value) : Promise.resolve(n.value).then(c, d);
+  l((e = e.apply(t, i)).next());
+});
+import { jsx as o, jsxs as h } from "react/jsx-runtime";
+import { useState as b } from "react";
+import { Container as _ } from "../../layouts/Container/Container.js";
+import { Stack as $ } from "../../layouts/Stack/Stack.js";
+import { getRadiusClass as z } from "../../tokens/radius.js";
+import { getSpacingClass as u } from "../../tokens/spacing.js";
+import B from "../Stepper/Stepper.js";
+import { Button as k } from "../../primitives/Button/Button.js";
+function K({
+  steps: t,
+  onComplete: i,
+  allowBackNavigation: e = !0,
+  showStepNumbers: S = !0
+}) {
+  const [r, c] = b(0), [d, l] = b({}), [n, s] = b({}), w = () => C(null, null, function* () {
+    const a = t[r];
+    if (a.validate && !(yield a.validate())) {
+      s(f(p({}, n), { [r]: !0 }));
+      return;
+    }
+    s(f(p({}, n), { [r]: !1 })), a.onSubmit && (yield a.onSubmit(d)), r < t.length - 1 ? c(r + 1) : i && i(d);
+  }), y = () => {
+    r > 0 && e && (c(r - 1), s(f(p({}, n), { [r - 1]: !1 })));
+  }, j = (a) => {
+    e && a < r && c(a);
+  }, m = t[r], D = r === t.length - 1, x = n[r] === !0;
+  return /* @__PURE__ */ o(_, { maxWidth: "lg", paddingX: "base", paddingY: "lg", children: /* @__PURE__ */ h($, { spacing: "lg", children: [
+    /* @__PURE__ */ o(
+      B,
+      {
+        steps: t.map((a, g) => ({
+          id: a.id,
+          title: a.title,
+          content: a.content,
+          description: a.description,
+          status: g < r ? "completed" : g === r ? x ? "error" : "active" : "pending"
+        })),
+        currentStep: r,
+        onStepChange: j,
+        allowNavigation: e
+      }
+    ),
+    /* @__PURE__ */ o(
+      "div",
+      {
+        className: `bg-surface-base ${z("lg")} border ${u("lg", "p")}`,
+        children: /* @__PURE__ */ h($, { spacing: "md", children: [
+          /* @__PURE__ */ h("div", { children: [
+            /* @__PURE__ */ o("h2", { className: "text-2xl font-semibold", children: m.title }),
+            m.description && /* @__PURE__ */ o(
+              "p",
+              {
+                className: `text-fg-secondary ${u("xs", "mt")}`,
+                children: m.description
+              }
+            )
+          ] }),
+          x && /* @__PURE__ */ o(
+            "div",
+            {
+              className: `bg-error-bg border border-error-border rounded ${u("md", "p")}`,
+              children: /* @__PURE__ */ o("p", { className: "text-sm text-fg-error", children: "Please fix the errors before proceeding." })
+            }
+          ),
+          /* @__PURE__ */ o("div", { className: "min-h-48", children: m.fields }),
+          /* @__PURE__ */ h(
+            "div",
+            {
+              className: `flex justify-between ${u("base", "pt")} border-t`,
+              children: [
+                /* @__PURE__ */ o(
+                  k,
+                  {
+                    variant: "outline",
+                    onClick: y,
+                    disabled: r === 0,
+                    children: "Back"
+                  }
+                ),
+                /* @__PURE__ */ o(k, { variant: "primary", onClick: w, children: D ? "Complete" : "Next" })
+              ]
+            }
+          )
+        ] })
+      }
+    )
+  ] }) });
+}
+export {
+  K as FormWizardPattern
+};
+//# sourceMappingURL=FormWizardPattern.js.map

package/dist/granular/ui/components/FormWizardPattern/FormWizardPattern.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormWizardPattern.js","sources":["../../../../../src/ui/components/FormWizardPattern/FormWizardPattern.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { Stepper } from \"../../components\";\nimport { Container } from \"../../layouts/Container/Container\";\nimport { Stack } from \"../../layouts/Stack/Stack\";\nimport { Button } from \"../../primitives\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport type { StepperStep } from \"../../components\";\n\nexport interface FormWizardStep extends StepperStep {\n  /**\n   * Form fields for this step\n   */\n  fields: React.ReactNode;\n  /**\n   * Validation function for this step\n   */\n  validate?: () => boolean | Promise<boolean>;\n  /**\n   * Submit handler for this step\n   */\n  onSubmit?: (data: unknown) => void | Promise<void>;\n}\n\nexport interface FormWizardPatternProps {\n  /**\n   * Steps configuration\n   */\n  steps: FormWizardStep[];\n  /**\n   * Callback when wizard is completed\n   */\n  onComplete?: (data: Record<string, unknown>) => void;\n  /**\n   * Allow navigation to previous steps\n   * @default true\n   */\n  allowBackNavigation?: boolean;\n  /**\n   * Show step numbers\n   * @default true\n   */\n  showStepNumbers?: boolean;\n}\n\n/**\n * FormWizardPattern - A complete form wizard pattern combining Stepper and Form\n *\n * This pattern solves the common UX problem of multi-step forms with validation.\n * It combines Stepper for navigation and Form for data collection.\n *\n * @example\n * ```tsx\n * <FormWizardPattern\n *   steps={steps}\n *   onComplete={(data) => console.log(data)}\n * />\n * ```\n */\nexport function FormWizardPattern({\n  steps,\n  onComplete,\n  allowBackNavigation = true,\n  showStepNumbers: _showStepNumbers = true,\n}: FormWizardPatternProps) {\n  const [currentStep, setCurrentStep] = useState(0);\n  const [formData, _setFormData] = useState<Record<string, unknown>>({});\n  const [errors, setErrors] = useState<Record<number, boolean>>({});\n\n  const handleNext = async () => {\n    const step = steps[currentStep];\n\n    // Validate current step if validation function exists\n    if (step.validate) {\n      const isValid = await step.validate();\n      if (!isValid) {\n        setErrors({ ...errors, [currentStep]: true });\n        return;\n      }\n    }\n\n    // Clear error for current step\n    setErrors({ ...errors, [currentStep]: false });\n\n    // Submit current step if handler exists\n    if (step.onSubmit) {\n      await step.onSubmit(formData);\n    }\n\n    // Move to next step\n    if (currentStep < steps.length - 1) {\n      setCurrentStep(currentStep + 1);\n    } else {\n      // Wizard completed\n      if (onComplete) {\n        onComplete(formData);\n      }\n    }\n  };\n\n  const handleBack = () => {\n    if (currentStep > 0 && allowBackNavigation) {\n      setCurrentStep(currentStep - 1);\n      // Clear error when going back\n      setErrors({ ...errors, [currentStep - 1]: false });\n    }\n  };\n\n  const handleStepClick = (stepIndex: number) => {\n    if (allowBackNavigation && stepIndex < currentStep) {\n      setCurrentStep(stepIndex);\n    }\n  };\n\n  const currentStepData = steps[currentStep];\n  const isLastStep = currentStep === steps.length - 1;\n  const hasError = errors[currentStep] === true;\n\n  return (\n    <Container maxWidth=\"lg\" paddingX=\"base\" paddingY=\"lg\">\n      <Stack spacing=\"lg\">\n        {/* Stepper */}\n        <Stepper\n          steps={steps.map((step, index) => ({\n            id: step.id,\n            title: step.title,\n            content: step.content,\n            description: step.description,\n            status:\n              index < currentStep\n                ? \"completed\"\n                : index === currentStep\n                  ? hasError\n                    ? \"error\"\n                    : \"active\"\n                  : \"pending\",\n          }))}\n          currentStep={currentStep}\n          onStepChange={handleStepClick}\n          allowNavigation={allowBackNavigation}\n        />\n\n        {/* Form Content */}\n        <div\n          className={`bg-surface-base ${getRadiusClass(\"lg\")} border ${getSpacingClass(\"lg\", \"p\")}`}\n        >\n          <Stack spacing=\"md\">\n            <div>\n              <h2 className=\"text-2xl font-semibold\">\n                {currentStepData.title}\n              </h2>\n              {currentStepData.description && (\n                <p\n                  className={`text-fg-secondary ${getSpacingClass(\"xs\", \"mt\")}`}\n                >\n                  {currentStepData.description}\n                </p>\n              )}\n            </div>\n\n            {hasError && (\n              <div\n                className={`bg-error-bg border border-error-border rounded ${getSpacingClass(\"md\", \"p\")}`}\n              >\n                <p className=\"text-sm text-fg-error\">\n                  Please fix the errors before proceeding.\n                </p>\n              </div>\n            )}\n\n            <div className=\"min-h-48\">{currentStepData.fields}</div>\n\n            {/* Navigation Buttons */}\n            <div\n              className={`flex justify-between ${getSpacingClass(\"base\", \"pt\")} border-t`}\n            >\n              <Button\n                variant=\"outline\"\n                onClick={handleBack}\n                disabled={currentStep === 0}\n              >\n                Back\n              </Button>\n              <Button variant=\"primary\" onClick={handleNext}>\n                {isLastStep ? \"Complete\" : \"Next\"}\n              </Button>\n            </div>\n          </Stack>\n        </div>\n      </Stack>\n    </Container>\n  );\n}\n"],"names":["FormWizardPattern","steps","onComplete","allowBackNavigation","_showStepNumbers","currentStep","setCurrentStep","useState","formData","_setFormData","errors","setErrors","handleNext","__async","step","__spreadProps","__spreadValues","handleBack","handleStepClick","stepIndex","currentStepData","isLastStep","hasError","jsx","Container","jsxs","Stack","Stepper","index","getRadiusClass","getSpacingClass","Button"],"mappings":"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"}

package/dist/granular/ui/components/Header/Header.js

@@ -0,0 +1,98 @@
+"use client";
+var w = Object.defineProperty, x = Object.defineProperties;
+var C = Object.getOwnPropertyDescriptors;
+var n = Object.getOwnPropertySymbols;
+var b = Object.prototype.hasOwnProperty, g = Object.prototype.propertyIsEnumerable;
+var p = (e, r, a) => r in e ? w(e, r, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[r] = a, d = (e, r) => {
+  for (var a in r || (r = {}))
+    b.call(r, a) && p(e, a, r[a]);
+  if (n)
+    for (var a of n(r))
+      g.call(r, a) && p(e, a, r[a]);
+  return e;
+}, m = (e, r) => x(e, C(r));
+var v = (e, r) => {
+  var a = {};
+  for (var o in e)
+    b.call(e, o) && r.indexOf(o) < 0 && (a[o] = e[o]);
+  if (e != null && n)
+    for (var o of n(e))
+      r.indexOf(o) < 0 && g.call(e, o) && (a[o] = e[o]);
+  return a;
+};
+import { jsx as t } from "react/jsx-runtime";
+import { HeaderProvider as h } from "./contexts/HeaderContext.js";
+import { HeaderLogo as M } from "./components/HeaderLogo.js";
+import { HeaderNavigation as N } from "./components/HeaderNavigation.js";
+import { HeaderActions as j } from "./components/HeaderActions.js";
+import { HeaderHamburger as k } from "./components/HeaderHamburger.js";
+import { HeaderMobileMenu as y } from "./components/HeaderMobileMenu.js";
+import { getShadowClass as A } from "../../tokens/shadows.js";
+import { getSpacingClass as L } from "../../tokens/spacing.js";
+import { getZIndexClass as S } from "../../tokens/z-index.js";
+import { cn as s } from "../../utils/cn.js";
+import { Container as V } from "../../layouts/Container/Container.js";
+import { cva as $ } from "../../utils/cva.js";
+const I = $(
+  // Base classes
+  s("w-full", "bg-surface-base", "transition-shadow", "transition-colors"),
+  {
+    variants: {
+      variant: {
+        default: "",
+        elevated: A("sm"),
+        bordered: s("border-b", "border-line-muted")
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function i(P) {
+  var c = P, {
+    children: e,
+    variant: r = "default",
+    sticky: a = !1,
+    maxWidth: o = "full",
+    bare: H = !1,
+    className: l
+  } = c, f = v(c, [
+    "children",
+    "variant",
+    "sticky",
+    "maxWidth",
+    "bare",
+    "className"
+  ]);
+  const u = /* @__PURE__ */ t(
+    "div",
+    {
+      className: `flex items-center justify-between ${L("base", "gap")}`,
+      children: e
+    }
+  );
+  return H ? /* @__PURE__ */ t(h, { children: /* @__PURE__ */ t("div", m(d({ className: s(l) }, f), { children: u })) }) : /* @__PURE__ */ t(h, { children: /* @__PURE__ */ t(
+    "header",
+    m(d({
+      className: s(
+        I({ variant: r }),
+        a && `sticky top-0 ${S("sticky")}`,
+        a && "backdrop-blur-sm bg-surface-base/95",
+        l
+      )
+    }, f), {
+      children: /* @__PURE__ */ t(V, { maxWidth: o, paddingX: "base", paddingY: "sm", children: u })
+    })
+  ) });
+}
+i.Logo = M;
+i.Navigation = N;
+i.Actions = j;
+i.Hamburger = k;
+i.MobileMenu = y;
+export {
+  i as Header,
+  i as default
+};
+//# sourceMappingURL=Header.js.map

package/dist/granular/ui/components/Header/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sources":["../../../../../src/ui/components/Header/Header.tsx"],"sourcesContent":["/**\n * Header Component\n *\n * Horizontal header component with logo, navigation, and actions slots.\n * Uses compound components pattern for maximum flexibility.\n *\n * @see EPIC-002: Header Component (Molecule)\n * @see RFC-003: Header Composition Pattern (APPROVED)\n * @see ADR-002: Header + SideNavbar Compatibility (ACCEPTED)\n */\n\n\"use client\";\n\nimport { HeaderProvider } from \"./contexts/HeaderContext\";\nimport { HeaderLogo } from \"./components/HeaderLogo\";\nimport { HeaderNavigation } from \"./components/HeaderNavigation\";\nimport { HeaderActions } from \"./components/HeaderActions\";\nimport { HeaderHamburger } from \"./components/HeaderHamburger\";\nimport { HeaderMobileMenu } from \"./components/HeaderMobileMenu\";\nimport { getShadowClass } from \"../../tokens/shadows\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { getZIndexClass } from \"../../tokens/z-index\";\nimport type { HeaderProps } from \"./types\";\nimport { cn, cva } from \"../../utils\";\nimport { Container } from \"../../layouts\";\n\n/**\n * Header Variants using CVA\n * Type-safe variant system for Header component\n */\nconst headerVariants = cva(\n  // Base classes\n  cn(\"w-full\", \"bg-surface-base\", \"transition-shadow\", \"transition-colors\"),\n  {\n    variants: {\n      variant: {\n        default: \"\",\n        elevated: getShadowClass(\"sm\"),\n        bordered: cn(\"border-b\", \"border-line-muted\"),\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\n/**\n * Header Component\n *\n * Horizontal header with compound components pattern.\n *\n * @example\n * ```tsx\n * <Header>\n *   <Header.Logo href=\"/\">MyApp</Header.Logo>\n *   <Header.Navigation>\n *     <NavLink href=\"/home\">Home</NavLink>\n *     <NavLink href=\"/about\">About</NavLink>\n *   </Header.Navigation>\n *   <Header.Actions>\n *     <Button>Sign In</Button>\n *   </Header.Actions>\n * </Header>\n * ```\n */\nexport function Header({\n  children,\n  variant = \"default\",\n  sticky = false,\n  maxWidth = \"full\",\n  bare = false,\n  className,\n  ...props\n}: HeaderProps) {\n  const content = (\n    <div\n      className={`flex items-center justify-between ${getSpacingClass(\"base\", \"gap\")}`}\n    >\n      {/* Children are rendered here - compound components handle their own layout */}\n      {children}\n    </div>\n  );\n\n  // Bare mode: Just render content without header/Container wrapper\n  // Useful when used inside DashboardLayout which provides the wrapper\n  if (bare) {\n    return (\n      <HeaderProvider>\n        <div className={cn(className)} {...props}>\n          {content}\n        </div>\n      </HeaderProvider>\n    );\n  }\n\n  // Normal mode: Create header element with Container\n  return (\n    <HeaderProvider>\n      <header\n        className={cn(\n          headerVariants({ variant }),\n          sticky && `sticky top-0 ${getZIndexClass(\"sticky\")}`,\n          sticky && \"backdrop-blur-sm bg-surface-base/95\",\n          className,\n        )}\n        {...props}\n      >\n        <Container maxWidth={maxWidth} paddingX=\"base\" paddingY=\"sm\">\n          {content}\n        </Container>\n      </header>\n    </HeaderProvider>\n  );\n}\n\n// Compound Components\nHeader.Logo = HeaderLogo;\nHeader.Navigation = HeaderNavigation;\nHeader.Actions = HeaderActions;\nHeader.Hamburger = HeaderHamburger;\nHeader.MobileMenu = HeaderMobileMenu;\n\nexport default Header;\n"],"names":["headerVariants","cva","cn","getShadowClass","Header","_a","_b","children","variant","sticky","maxWidth","bare","className","props","__objRest","content","jsx","getSpacingClass","HeaderProvider","__spreadProps","__spreadValues","getZIndexClass","Container","HeaderLogo","HeaderNavigation","HeaderActions","HeaderHamburger","HeaderMobileMenu"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAMA,IAAiBC;AAAA;AAAA,EAErBC,EAAG,UAAU,mBAAmB,qBAAqB,mBAAmB;AAAA,EACxE;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,UAAUC,EAAe,IAAI;AAAA,QAC7B,UAAUD,EAAG,YAAY,mBAAmB;AAAA,MAAA;AAAA,IAC9C;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;AAqBO,SAASE,EAAOC,GAQP;AARO,MAAAC,IAAAD,GACrB;AAAA,cAAAE;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,QAAAC,IAAS;AAAA,IACT,UAAAC,IAAW;AAAA,IACX,MAAAC,IAAO;AAAA,IACP,WAAAC;AAAA,MANqBN,GAOlBO,IAAAC,EAPkBR,GAOlB;AAAA,IANH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAMS,IACJ,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,qCAAqCC,EAAgB,QAAQ,KAAK,CAAC;AAAA,MAG7E,UAAAV;AAAA,IAAA;AAAA,EAAA;AAML,SAAII,IAEA,gBAAAK,EAACE,GAAA,EACC,UAAA,gBAAAF,EAAC,OAAAG,EAAAC,EAAA,EAAI,WAAWlB,EAAGU,CAAS,KAAOC,IAAlC,EACE,UAAAE,EAAA,EACH,GACF,sBAMDG,GAAA,EACC,UAAA,gBAAAF;AAAA,IAAC;AAAA,IAAAG,EAAAC,EAAA;AAAA,MACC,WAAWlB;AAAA,QACTF,EAAe,EAAE,SAAAQ,GAAS;AAAA,QAC1BC,KAAU,gBAAgBY,EAAe,QAAQ,CAAC;AAAA,QAClDZ,KAAU;AAAA,QACVG;AAAA,MAAA;AAAA,OAEEC,IAPL;AAAA,MASC,4BAACS,GAAA,EAAU,UAAAZ,GAAoB,UAAS,QAAO,UAAS,MACrD,UAAAK,EAAA,CACH;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;AAGAX,EAAO,OAAOmB;AACdnB,EAAO,aAAaoB;AACpBpB,EAAO,UAAUqB;AACjBrB,EAAO,YAAYsB;AACnBtB,EAAO,aAAauB;"}

package/dist/granular/ui/components/Header/components/HeaderActions.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as t } from "react/jsx-runtime";
+import { getSpacingClass as i } from "../../../tokens/spacing.js";
+import { cn as s } from "../../../utils/cn.js";
+function c({ children: e, className: r }) {
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: s(
+        "flex-shrink-0 flex items-center",
+        i("sm", "gap"),
+        r
+      ),
+      children: e
+    }
+  );
+}
+export {
+  c as HeaderActions
+};
+//# sourceMappingURL=HeaderActions.js.map

package/dist/granular/ui/components/Header/components/HeaderActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderActions.js","sources":["../../../../../../src/ui/components/Header/components/HeaderActions.tsx"],"sourcesContent":["/**\n * HeaderActions Component\n *\n * Actions slot component for Header (typically buttons, user menu, etc.).\n *\n * @see EPIC-002: Header Component (Molecule)\n * @see RFC-003: Header Composition Pattern (APPROVED)\n */\n\n\"use client\";\n\nimport { type ReactNode } from \"react\";\nimport { cn } from \"../../../utils\";\nimport { getSpacingClass } from \"../../../tokens/spacing\";\n\nexport interface HeaderActionsProps {\n  /**\n   * Actions content (typically Button components)\n   */\n  children: ReactNode;\n\n  /**\n   * Additional CSS classes\n   */\n  className?: string;\n}\n\n/**\n * HeaderActions Component\n *\n * Actions slot for Header. Typically contains Button components or user menu.\n *\n * @example\n * ```tsx\n * <Header.Actions>\n *   <Button variant=\"outline\">Sign In</Button>\n *   <Button variant=\"primary\">Sign Up</Button>\n * </Header.Actions>\n * ```\n */\nexport function HeaderActions({ children, className }: HeaderActionsProps) {\n  return (\n    <div\n      className={cn(\n        \"flex-shrink-0 flex items-center\",\n        getSpacingClass(\"sm\", \"gap\"),\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["HeaderActions","children","className","jsx","cn","getSpacingClass"],"mappings":";;;;AAwCO,SAASA,EAAc,EAAE,UAAAC,GAAU,WAAAC,KAAiC;AACzE,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAC,EAAgB,MAAM,KAAK;AAAA,QAC3BH;AAAA,MAAA;AAAA,MAGD,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;"}