@ogcio/design-system-react 1.29.0 → 1.30.0

package/dist/forms/form-field/form-field.js

@@ -1,19 +1,19 @@
 "use client";
-import { jsx as l, jsxs as a, Fragment as p } from "react/jsx-runtime";
-import { S as x } from "../../index-D_wwt4P0.js";
-import { createContext as v, useContext as N, Children as C } from "react";
-import { cn as c } from "../../cn.js";
+import { jsx as l, jsxs as m, Fragment as x } from "react/jsx-runtime";
+import { S as p } from "../../index-D_wwt4P0.js";
+import { createContext as N, useContext as v, Children as C } from "react";
+import { cn as d } from "../../cn.js";
 import { ErrorText as L } from "../../error-text/error-text.js";
 import { HintText as E } from "../../hint-text/hint-text.js";
-import { Label as H } from "../../label/label.js";
-import { getSpecialComponentType as F, isSpecialComponent as P } from "../../utils/utilities.js";
-const f = v(null);
+import { Label as H, styles as P } from "../../label/label.js";
+import { getSpecialComponentType as F, isSpecialComponent as w } from "../../utils/utilities.js";
+const f = N(null);
 function b(e) {
-  N(f) || console.error(`[${e}] must be used within a <FormField>.`);
+  v(f) || console.error(`[${e}] must be used within a <FormField>.`);
 }
-const I = (e) => ["error", "hint", "label"].some((r) => r in e) ? (console.warn(
+const U = (e) => ["error", "hint", "label"].some((r) => r in e) ? (console.warn(
   "[FormField] Using legacy props. Please migrate to the new composable API."
-), /* @__PURE__ */ l(f.Provider, { value: !0, children: /* @__PURE__ */ a(y, { ...e, children: [
+), /* @__PURE__ */ l(f.Provider, { value: !0, children: /* @__PURE__ */ m(y, { ...e, children: [
   e.label && /* @__PURE__ */ l(u, { ...e.label }),
   e.hint && /* @__PURE__ */ l(h, { ...e.hint }),
   e.error && /* @__PURE__ */ l(g, { ...e.error }),
@@ -25,31 +25,31 @@ const I = (e) => ["error", "hint", "label"].some((r) => r in e) ? (console.warn(
 }) => {
   const r = C.toArray(e), n = r.find(
     (t) => F(t) === "FormFieldLabel"
-  ), m = r.find(
+  ), c = r.find(
     (t) => F(t) === "FormFieldHint"
-  ), d = r.find(
+  ), a = r.find(
     (t) => F(t) === "FormFieldError"
   ), s = r.filter(
-    (t) => !P(t, [
+    (t) => !w(t, [
       "FormFieldLabel",
       "FormFieldHint",
       "FormFieldError"
     ])
   );
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ m(
     "fieldset",
     {
-      className: c({ "gi-error-state": !!d }, i),
+      className: d({ "gi-error-state": !!a }, i),
       ...o,
       children: [
-        /* @__PURE__ */ a("div", { className: "gi-pb-3 gi-flex gi-flex-col gi-gap-1", children: [
-          /* @__PURE__ */ a("div", { children: [
+        /* @__PURE__ */ m("div", { className: "gi-pb-3 gi-flex gi-flex-col gi-gap-1", children: [
+          /* @__PURE__ */ m("div", { children: [
             n,
-            m
+            c
           ] }),
-          d
+          a
         ] }),
-        /* @__PURE__ */ l(x, { children: s })
+        /* @__PURE__ */ l(p, { children: s })
       ]
     }
   );
@@ -59,21 +59,31 @@ const I = (e) => ["error", "hint", "label"].some((r) => r in e) ? (console.warn(
   size: o,
   htmlFor: r,
   className: n,
-  secondaryLabel: m,
-  ...d
+  secondaryLabel: c,
+  ...a
 }) => {
   b("FormFieldLabel");
-  const s = /* @__PURE__ */ a(p, { children: [
+  const s = /* @__PURE__ */ m(x, { children: [
     i ?? e,
-    m ? /* @__PURE__ */ l("span", { className: "gi-secondary-label", children: m }) : null
+    c ? /* @__PURE__ */ l("span", { className: "gi-secondary-label", children: c }) : null
   ] });
-  return /* @__PURE__ */ l(
+  return r ? /* @__PURE__ */ l(
     H,
     {
       size: o,
       htmlFor: r,
-      className: c("gi-font-bold", n),
-      ...d,
+      className: d("gi-font-bold", n),
+      ...a,
+      children: s
+    }
+  ) : /* @__PURE__ */ l(
+    "legend",
+    {
+      className: P({
+        size: o,
+        className: d("gi-font-bold", n)
+      }),
+      ...a,
       children: s
     }
   );
@@ -84,7 +94,7 @@ Object.defineProperty(u, "componentType", {
   enumerable: !1
 });
 u.displayName = "FormFieldLabel";
-const h = ({ children: e, text: i, size: o, className: r }) => (b("FormFieldHint"), /* @__PURE__ */ l(E, { text: i, size: o, className: c("gi-mb-1", r), children: e }));
+const h = ({ children: e, text: i, size: o, className: r }) => (b("FormFieldHint"), /* @__PURE__ */ l(E, { text: i, size: o, className: d("gi-mb-1", r), children: e }));
 Object.defineProperty(h, "componentType", {
   value: "FormFieldHint",
   writable: !1,
@@ -102,7 +112,7 @@ const g = ({
   {
     text: i,
     size: o,
-    className: c("gi-mb-1", r),
+    className: d("gi-mb-1", r),
     ...n,
     children: e
   }
@@ -114,7 +124,7 @@ Object.defineProperty(g, "componentType", {
 });
 g.displayName = "FormFieldError";
 export {
-  I as FormField,
+  U as FormField,
   g as FormFieldError,
   h as FormFieldHint,
   u as FormFieldLabel

package/dist/forms/form-field/types.d.ts

@@ -1,10 +1,17 @@
-import { FieldsetHTMLAttributes } from 'react';
+import { FieldsetHTMLAttributes, PropsWithChildren } from 'react';
 import { ErrorTextProps } from '../../error-text/types.js';
 import { HintTextProps } from '../../hint-text/types.js';
-import { LabelTextProps } from '../../label/types.js';
-export type FormFiledLabelProps = LabelTextProps & {
+import { LabelSizeType, LabelTextProps } from '../../label/types.js';
+export type LegendProps = PropsWithChildren<React.HTMLAttributes<HTMLLegendElement> & {
+    text?: string | React.ReactElement;
+    size?: LabelSizeType;
+    secondaryLabel?: React.ReactNode;
+    htmlFor?: never;
+}>;
+export type LabelProps = LabelTextProps & {
     secondaryLabel?: React.ReactNode;
 };
+export type FormFieldLabelProps = LabelProps | LegendProps;
 export type FormFieldProps = {
     /** @deprecated Use <FormFieldError> instead */
     error?: ErrorTextProps;

package/dist/header/components/header-slot.js

@@ -1,16 +1,16 @@
-import { jsx as a, jsxs as s, Fragment as $ } from "react/jsx-runtime";
+import { jsx as t, jsxs as n, Fragment as $ } from "react/jsx-runtime";
 import { useState as f } from "react";
-import { cn as n } from "../../cn.js";
+import { cn as s } from "../../cn.js";
 import { DrawerWrapper as T, DrawerBody as b } from "../../drawer/drawer.js";
 import { translate as c } from "../../i18n/utility.js";
 import { Icon as i } from "../../icon/icon.js";
 import { Input as h } from "../../primitives/input.js";
-import { headerSlotContainerVariants as C, headerToolItemVariants as p } from "../variants.js";
-const B = ({
+import { headerSlotContainerVariants as C, headerToolItemVariants as u } from "../variants.js";
+const y = ({
   index: e,
   slot: r,
-  appearance: t
-}) => /* @__PURE__ */ a(
+  appearance: a
+}) => /* @__PURE__ */ t(
   "div",
   {
     id: `SlotContainer-${e}`,
@@ -20,24 +20,24 @@ const B = ({
       index: e + 1,
       defaultValue: `Slot Container ${e + 1}`
     }),
-    className: n(C({ appearance: t }), "gi-hidden"),
+    className: s(C({ appearance: a }), "gi-hidden"),
     children: r
   }
 ), A = ({
   index: e,
-  item: { component: r, drawerPosition: t, icon: d, label: l, ariaLabel: m, closeLabel: u },
+  item: { component: r, drawerPosition: a, icon: d, label: l, ariaLabel: m, closeLabel: p },
   appearance: I
 }) => {
   const [o, g] = f(!1);
-  return /* @__PURE__ */ s($, { children: [
-    /* @__PURE__ */ s(
+  return /* @__PURE__ */ n($, { children: [
+    /* @__PURE__ */ n(
       "label",
       {
         htmlFor: `ItemActionDrawerTrigger-${e}`,
-        className: p({ appearance: I }),
+        className: u({ appearance: I }),
         onClick: () => g(!0),
         children: [
-          /* @__PURE__ */ a(
+          /* @__PURE__ */ t(
             h,
             {
               "data-testid": `ItemActionDrawerTrigger-${e}`,
@@ -48,7 +48,7 @@ const B = ({
               type: "checkbox"
             }
           ),
-          l && /* @__PURE__ */ a(
+          l && /* @__PURE__ */ t(
             "span",
             {
               id: `ItemActionDrawerTrigger-${e}-label`,
@@ -57,10 +57,10 @@ const B = ({
               children: l
             }
           ),
-          d && /* @__PURE__ */ a(
+          d && /* @__PURE__ */ t(
             i,
             {
-              className: n({
+              className: s({
                 "gi-hidden": o,
                 "gi-block": !o
               }),
@@ -69,10 +69,10 @@ const B = ({
               ariaHidden: !0
             }
           ),
-          /* @__PURE__ */ a(
+          /* @__PURE__ */ t(
             i,
             {
-              className: n({
+              className: s({
                 "gi-hidden": !o,
                 "gi-block": o
               }),
@@ -85,25 +85,25 @@ const B = ({
         ]
       }
     ),
-    /* @__PURE__ */ a(
+    /* @__PURE__ */ t(
       T,
       {
         isOpen: o,
         onClose: () => g(!1),
-        position: t || "right",
+        position: a || "right",
         closeButtonLabel: c("header.drawer.close", {
-          defaultValue: u || "Close"
+          defaultValue: p || "Close"
         }),
         closeButtonSize: "large",
-        children: /* @__PURE__ */ a(b, { children: r })
+        children: /* @__PURE__ */ t(b, { children: r })
       }
     )
   ] });
-}, F = ({
+}, B = ({
   item: e,
   index: r,
-  appearance: t
-}) => e.slotAppearance === "drawer" ? /* @__PURE__ */ a(A, { index: r, item: e, appearance: t }) : /* @__PURE__ */ s(
+  appearance: a
+}) => e.slotAppearance === "drawer" ? /* @__PURE__ */ t(A, { index: r, item: e, appearance: a }) : /* @__PURE__ */ n(
   "label",
   {
     htmlFor: `ItemActionTrigger-${r}`,
@@ -111,10 +111,10 @@ const B = ({
       item: e.label || `item ${r + 1}`,
       defaultValue: `Toggle item action for ${e.label || `item ${r + 1}`}`
     }),
-    className: p({ appearance: t }),
+    className: u({ appearance: a }),
     "data-label-index": r,
     children: [
-      /* @__PURE__ */ a(
+      /* @__PURE__ */ t(
         h,
         {
           "data-testid": `ItemActionTrigger-${r}`,
@@ -126,8 +126,8 @@ const B = ({
           type: "button"
         }
       ),
-      e.label && /* @__PURE__ */ a("span", { className: "label", children: e.label }),
-      e.icon && /* @__PURE__ */ a(
+      e.label && /* @__PURE__ */ t("span", { className: "label", children: e.label }),
+      e.icon && /* @__PURE__ */ t(
         i,
         {
           icon: e.icon,
@@ -135,20 +135,21 @@ const B = ({
           id: `ItemIconActionTrigger-${r}`
         }
       ),
-      /* @__PURE__ */ a(
+      /* @__PURE__ */ t(
         i,
         {
           className: "gi-hidden close-icon",
           ariaHidden: !0,
           id: `ItemCloseTrigger-${r}`,
           icon: "close",
-          "data-testid": `ItemCloseTrigger-${r}`
+          "data-testid": `ItemCloseTrigger-${r}`,
+          useFontIcon: !0
         }
       )
     ]
   }
 );
 export {
-  B as SlotContainer,
-  F as SlotItemAction
+  y as SlotContainer,
+  B as SlotItemAction
 };

package/dist/header/variants.d.ts

@@ -3,7 +3,17 @@ export declare const headerVariants: import('tailwind-variants').TVReturnType<{
         default: string;
         light: string;
     };
-}, undefined, "gi-header", TVConfig<V, EV>, {
+}, undefined, "gi-header", import('tailwind-variants/dist/config.js').TVConfig<{
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, {
+    appearance: {
+        default: string;
+        light: string;
+    };
+}>, {
     appearance: {
         default: string;
         light: string;
@@ -13,13 +23,33 @@ export declare const headerVariants: import('tailwind-variants').TVReturnType<{
         default: string;
         light: string;
     };
-}, undefined, "gi-header", TVConfig<V, EV>, unknown, unknown, undefined>>;
+}, undefined, "gi-header", import('tailwind-variants/dist/config.js').TVConfig<{
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, {
+    appearance: {
+        default: string;
+        light: string;
+    };
+}>, unknown, unknown, undefined>>;
 export declare const headerMenuVariants: import('tailwind-variants').TVReturnType<{
     appearance: {
         default: string;
         light: string;
     };
-}, undefined, "gi-header-menu", TVConfig<V, EV>, {
+}, undefined, "gi-header-menu", import('tailwind-variants/dist/config.js').TVConfig<{
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, {
+    appearance: {
+        default: string;
+        light: string;
+    };
+}>, {
     appearance: {
         default: string;
         light: string;
@@ -29,13 +59,33 @@ export declare const headerMenuVariants: import('tailwind-variants').TVReturnTyp
         default: string;
         light: string;
     };
-}, undefined, "gi-header-menu", TVConfig<V, EV>, unknown, unknown, undefined>>;
+}, undefined, "gi-header-menu", import('tailwind-variants/dist/config.js').TVConfig<{
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, {
+    appearance: {
+        default: string;
+        light: string;
+    };
+}>, unknown, unknown, undefined>>;
 export declare const headerToolItemVariants: import('tailwind-variants').TVReturnType<{
     appearance: {
         default: string;
         light: string;
     };
-}, undefined, "gi-header-tool-item", TVConfig<V, EV>, {
+}, undefined, "gi-header-tool-item", import('tailwind-variants/dist/config.js').TVConfig<{
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, {
+    appearance: {
+        default: string;
+        light: string;
+    };
+}>, {
     appearance: {
         default: string;
         light: string;
@@ -45,13 +95,33 @@ export declare const headerToolItemVariants: import('tailwind-variants').TVRetur
         default: string;
         light: string;
     };
-}, undefined, "gi-header-tool-item", TVConfig<V, EV>, unknown, unknown, undefined>>;
+}, undefined, "gi-header-tool-item", import('tailwind-variants/dist/config.js').TVConfig<{
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, {
+    appearance: {
+        default: string;
+        light: string;
+    };
+}>, unknown, unknown, undefined>>;
 export declare const headerSecondaryLinksVariants: import('tailwind-variants').TVReturnType<{
     appearance: {
         default: string;
         light: string;
     };
-}, undefined, "gi-header-secondary-bar gi-order-1", TVConfig<V, EV>, {
+}, undefined, "gi-header-secondary-bar gi-order-1", import('tailwind-variants/dist/config.js').TVConfig<{
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, {
+    appearance: {
+        default: string;
+        light: string;
+    };
+}>, {
     appearance: {
         default: string;
         light: string;
@@ -61,13 +131,33 @@ export declare const headerSecondaryLinksVariants: import('tailwind-variants').T
         default: string;
         light: string;
     };
-}, undefined, "gi-header-secondary-bar gi-order-1", TVConfig<V, EV>, unknown, unknown, undefined>>;
+}, undefined, "gi-header-secondary-bar gi-order-1", import('tailwind-variants/dist/config.js').TVConfig<{
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, {
+    appearance: {
+        default: string;
+        light: string;
+    };
+}>, unknown, unknown, undefined>>;
 export declare const headerSecondaryLinkItemVariants: import('tailwind-variants').TVReturnType<{
     appearance: {
         default: string;
         light: string;
     };
-}, undefined, "gi-header-secondary-item", TVConfig<V, EV>, {
+}, undefined, "gi-header-secondary-item", import('tailwind-variants/dist/config.js').TVConfig<{
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, {
+    appearance: {
+        default: string;
+        light: string;
+    };
+}>, {
     appearance: {
         default: string;
         light: string;
@@ -77,13 +167,33 @@ export declare const headerSecondaryLinkItemVariants: import('tailwind-variants'
         default: string;
         light: string;
     };
-}, undefined, "gi-header-secondary-item", TVConfig<V, EV>, unknown, unknown, undefined>>;
+}, undefined, "gi-header-secondary-item", import('tailwind-variants/dist/config.js').TVConfig<{
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, {
+    appearance: {
+        default: string;
+        light: string;
+    };
+}>, unknown, unknown, undefined>>;
 export declare const headerSecondaryLinkSlotItemVariants: import('tailwind-variants').TVReturnType<{
     appearance: {
         default: string;
         light: string;
     };
-}, undefined, "gi-header-secondary-item-slot", TVConfig<V, EV>, {
+}, undefined, "gi-header-secondary-item-slot", import('tailwind-variants/dist/config.js').TVConfig<{
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, {
+    appearance: {
+        default: string;
+        light: string;
+    };
+}>, {
     appearance: {
         default: string;
         light: string;
@@ -93,13 +203,33 @@ export declare const headerSecondaryLinkSlotItemVariants: import('tailwind-varia
         default: string;
         light: string;
     };
-}, undefined, "gi-header-secondary-item-slot", TVConfig<V, EV>, unknown, unknown, undefined>>;
+}, undefined, "gi-header-secondary-item-slot", import('tailwind-variants/dist/config.js').TVConfig<{
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, {
+    appearance: {
+        default: string;
+        light: string;
+    };
+}>, unknown, unknown, undefined>>;
 export declare const headerTitleVariants: import('tailwind-variants').TVReturnType<{
     appearance: {
         default: string;
         light: string;
     };
-}, undefined, "gi-header-title", TVConfig<V, EV>, {
+}, undefined, "gi-header-title", import('tailwind-variants/dist/config.js').TVConfig<{
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, {
+    appearance: {
+        default: string;
+        light: string;
+    };
+}>, {
     appearance: {
         default: string;
         light: string;
@@ -109,13 +239,33 @@ export declare const headerTitleVariants: import('tailwind-variants').TVReturnTy
         default: string;
         light: string;
     };
-}, undefined, "gi-header-title", TVConfig<V, EV>, unknown, unknown, undefined>>;
+}, undefined, "gi-header-title", import('tailwind-variants/dist/config.js').TVConfig<{
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, {
+    appearance: {
+        default: string;
+        light: string;
+    };
+}>, unknown, unknown, undefined>>;
 export declare const headerDividerVariants: import('tailwind-variants').TVReturnType<{
     appearance: {
         default: string;
         light: string;
     };
-}, undefined, "gi-header-divider", TVConfig<V, EV>, {
+}, undefined, "gi-header-divider", import('tailwind-variants/dist/config.js').TVConfig<{
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, {
+    appearance: {
+        default: string;
+        light: string;
+    };
+}>, {
     appearance: {
         default: string;
         light: string;
@@ -125,13 +275,33 @@ export declare const headerDividerVariants: import('tailwind-variants').TVReturn
         default: string;
         light: string;
     };
-}, undefined, "gi-header-divider", TVConfig<V, EV>, unknown, unknown, undefined>>;
+}, undefined, "gi-header-divider", import('tailwind-variants/dist/config.js').TVConfig<{
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, {
+    appearance: {
+        default: string;
+        light: string;
+    };
+}>, unknown, unknown, undefined>>;
 export declare const headerSlotContainerVariants: import('tailwind-variants').TVReturnType<{
     appearance: {
         default: string;
         light: string;
     };
-}, undefined, "gi-header-slot-container", TVConfig<V, EV>, {
+}, undefined, "gi-header-slot-container", import('tailwind-variants/dist/config.js').TVConfig<{
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, {
+    appearance: {
+        default: string;
+        light: string;
+    };
+}>, {
     appearance: {
         default: string;
         light: string;
@@ -141,13 +311,33 @@ export declare const headerSlotContainerVariants: import('tailwind-variants').TV
         default: string;
         light: string;
     };
-}, undefined, "gi-header-slot-container", TVConfig<V, EV>, unknown, unknown, undefined>>;
+}, undefined, "gi-header-slot-container", import('tailwind-variants/dist/config.js').TVConfig<{
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, {
+    appearance: {
+        default: string;
+        light: string;
+    };
+}>, unknown, unknown, undefined>>;
 export declare const headerLogoVariants: import('tailwind-variants').TVReturnType<{
     appearance: {
         default: string;
         light: string;
     };
-}, undefined, "gi-header-logo", TVConfig<V, EV>, {
+}, undefined, "gi-header-logo", import('tailwind-variants/dist/config.js').TVConfig<{
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, {
+    appearance: {
+        default: string;
+        light: string;
+    };
+}>, {
     appearance: {
         default: string;
         light: string;
@@ -157,4 +347,14 @@ export declare const headerLogoVariants: import('tailwind-variants').TVReturnTyp
         default: string;
         light: string;
     };
-}, undefined, "gi-header-logo", TVConfig<V, EV>, unknown, unknown, undefined>>;
+}, undefined, "gi-header-logo", import('tailwind-variants/dist/config.js').TVConfig<{
+    appearance: {
+        default: string;
+        light: string;
+    };
+}, {
+    appearance: {
+        default: string;
+        light: string;
+    };
+}>, unknown, unknown, undefined>>;