@ogcio/design-system-react 1.28.0 → 1.30.0

package/dist/data-table/data-table-header.d.ts

@@ -7,13 +7,6 @@ interface DataTableHeaderProps extends HTMLAttributes<HTMLDivElement> {
     showHeader?: boolean;
     showFilter?: boolean;
 }
-export declare const DataTableHeader: React.FC<DataTableHeaderProps>;
-export declare const DataTableHeaderSearch: React.FC<DataTableHeaderTypeProps>;
-export declare const DataTableHeaderActions: React.FC<DataTableHeaderTypeProps>;
-export declare const DataTableHeaderFilter: React.FC<DataTableHeaderTypeProps>;
-export declare const DataTableHeaderFilterContent: React.FC<DataTableHeaderTypeProps>;
-export declare const DataTableHeaderFilterContentTitle: React.FC<DataTableHeaderTypeProps>;
-export declare const DataTableHeaderFilterActions: React.FC<DataTableHeaderTypeProps>;
 type DataTableHeaderFilterListProps = {
     filters: {
         id: string;
@@ -23,5 +16,12 @@ type DataTableHeaderFilterListProps = {
     onClear?: () => void;
     className?: string;
 };
+export declare const DataTableHeader: React.FC<DataTableHeaderProps>;
+export declare const DataTableHeaderSearch: React.FC<DataTableHeaderTypeProps>;
+export declare const DataTableHeaderActions: React.FC<DataTableHeaderTypeProps>;
+export declare const DataTableHeaderFilter: React.FC<DataTableHeaderTypeProps>;
+export declare const DataTableHeaderFilterContent: React.FC<DataTableHeaderTypeProps>;
+export declare const DataTableHeaderFilterContentTitle: React.FC<DataTableHeaderTypeProps>;
+export declare const DataTableHeaderFilterActions: React.FC<DataTableHeaderTypeProps>;
 export declare const DataTableHeaderFilterList: React.FC<DataTableHeaderFilterListProps>;
 export {};

package/dist/data-table/data-table-header.js

@@ -1,137 +1,124 @@
-import { jsxs as o, jsx as l } from "react/jsx-runtime";
-import { useMemo as O, Children as P, isValidElement as C } from "react";
-import { Button as x } from "../button/button.js";
-import { Chip as L } from "../chip/chip.js";
-import { cn as i } from "../cn.js";
-import { translate as g } from "../i18n/utility.js";
-const d = (e, a) => C(e) && e.type === a, h = ({
+import { jsxs as d, jsx as i } from "react/jsx-runtime";
+import { useMemo as A, Children as L, isValidElement as O } from "react";
+import { c as P } from "../index-CB-zPpNk.js";
+import { Button as w } from "../button/button.js";
+import { Chip as S } from "../chip/chip.js";
+import { cn as n } from "../cn.js";
+import { translate as x } from "../i18n/utility.js";
+const N = ({
   children: e,
-  className: a,
-  showHeader: t = !0,
-  showFilter: s = !0,
-  ...c
+  className: t,
+  showHeader: a = !0,
+  showFilter: c = !0,
+  ...p
 }) => {
-  const { search: n, filter: j, filterList: u, actions: A } = O(() => {
-    let f = null, H = null, y = null, D = null;
-    return P.forEach(e, (r) => {
-      d(r, p) ? f = r : d(r, m) ? H = r : d(r, T) ? y = r : d(r, b) && (D = r);
-    }), { search: f, filter: H, filterList: y, actions: D };
+  const { search: s, filter: j, filterList: T, actions: C } = A(() => {
+    let b = null, y = null, H = null, D = null;
+    return L.forEach(e, (r) => {
+      o(r, f) ? b = r : o(r, g) ? y = r : o(r, u) ? H = r : o(r, m) && (D = r);
+    }), { search: b, filter: y, filterList: H, actions: D };
   }, [e]);
-  return /* @__PURE__ */ o("div", { ...c, className: i("gi-data-table-header", a), children: [
-    t && /* @__PURE__ */ o("div", { className: "gi-flex gi-flex-1 gi-gap-4 gi-items-center", children: [
-      n,
+  return /* @__PURE__ */ d("div", { ...p, className: n(l.root(), t), children: [
+    a && /* @__PURE__ */ d("div", { className: l.headerRow(), children: [
+      s,
       j,
-      A
+      C
     ] }),
-    u && s && /* @__PURE__ */ l("div", { className: "gi-w-full", children: u })
+    T && c && /* @__PURE__ */ i("div", { className: l.filterListWrapper(), children: T })
   ] });
-}, p = ({
+}, f = ({
   children: e,
-  className: a,
-  ...t
-}) => /* @__PURE__ */ l("div", { className: i("gi-data-table-header-search", a), ...t, children: e }), b = ({
+  className: t,
+  ...a
+}) => /* @__PURE__ */ i("div", { className: n(l.search(), t), ...a, children: e }), m = ({
   children: e,
-  className: a,
-  ...t
-}) => /* @__PURE__ */ l("div", { className: i("gi-data-table-header-actions", a), ...t, children: e }), m = ({
+  className: t,
+  ...a
+}) => /* @__PURE__ */ i("div", { className: n(l.actions(), t), ...a, children: e }), g = ({
   children: e,
-  className: a,
-  ...t
-}) => /* @__PURE__ */ l("div", { className: i("gi-data-table-header-filter", a), ...t, children: e }), N = ({ children: e, className: a, ...t }) => /* @__PURE__ */ l(
-  "div",
-  {
-    className: i("gi-data-table-header-filter-content", a),
-    ...t,
-    children: e
-  }
-), F = ({ children: e, className: a, ...t }) => /* @__PURE__ */ l(
-  "div",
-  {
-    className: i("gi-data-table-header-filter-content-title", a),
-    ...t,
-    children: e
-  }
-), v = ({ children: e, className: a, ...t }) => /* @__PURE__ */ l(
-  "div",
-  {
-    className: i("gi-data-table-header-filter-actions", a),
-    ...t,
-    children: e
-  }
-), T = ({ filters: e, onRemove: a, onClear: t, className: s, ...c }) => !e || e.length === 0 ? null : /* @__PURE__ */ o(
-  "div",
-  {
-    className: i("gi-data-table-header-filter-list", s),
-    ...c,
-    children: [
-      /* @__PURE__ */ l("span", { className: "gi-text-sm", children: g("dataTableHeader.filtersApplied", {
-        length: e.length,
-        defaultValue: `Filters applied ${e.length}:`
-      }) }),
-      e.map((n) => /* @__PURE__ */ l(
-        L,
-        {
-          onClose: () => a == null ? void 0 : a(n.id),
-          label: n.label
-        },
-        n.id
-      )),
-      /* @__PURE__ */ l(
-        x,
-        {
-          appearance: "dark",
-          size: "medium",
-          variant: "flat",
-          onClick: () => {
-            t == null || t();
-          },
-          children: g("dataTableHeader.clearAllFilters", {
-            defaultValue: "Clear all filters"
-          })
-        }
-      )
-    ]
-  }
-);
-h.displayName = "DataTableHeader";
-p.displayName = "DataTableHeaderSearch";
-b.displayName = "DataTableHeaderActions";
-m.displayName = "DataTableHeaderFilter";
-T.displayName = "DataTableHeaderFilterList";
-N.displayName = "DataTableHeaderFilterContent";
-F.displayName = "DataTableHeaderFilterContentTitle";
-v.displayName = "DataTableHeaderFilterActions";
-Object.defineProperty(h, "componentType", {
+  className: t,
+  ...a
+}) => /* @__PURE__ */ i("div", { className: n(l.filter(), t), ...a, children: e }), F = ({ children: e, className: t, ...a }) => /* @__PURE__ */ i("div", { className: n(l.filterContent(), t), ...a, children: e }), v = ({ children: e, className: t, ...a }) => /* @__PURE__ */ i("div", { className: n(l.filterContentTitle(), t), ...a, children: e }), h = ({ children: e, className: t, ...a }) => /* @__PURE__ */ i("div", { className: n(l.filterActions(), t), ...a, children: e }), u = ({ filters: e, onRemove: t, onClear: a, className: c, ...p }) => !e || e.length === 0 ? null : /* @__PURE__ */ d("div", { className: n(l.filterList(), c), ...p, children: [
+  /* @__PURE__ */ i("span", { className: "gi-text-sm", children: x("dataTableHeader.filtersApplied", {
+    length: e.length,
+    defaultValue: `Filters applied ${e.length}:`
+  }) }),
+  e.map((s) => /* @__PURE__ */ i(
+    S,
+    {
+      onClose: () => t == null ? void 0 : t(s.id),
+      label: s.label
+    },
+    s.id
+  )),
+  /* @__PURE__ */ i(
+    w,
+    {
+      appearance: "dark",
+      size: "medium",
+      variant: "flat",
+      onClick: () => {
+        a == null || a();
+      },
+      children: x("dataTableHeader.clearAllFilters", {
+        defaultValue: "Clear all filters"
+      })
+    }
+  )
+] });
+N.displayName = "DataTableHeader";
+f.displayName = "DataTableHeaderSearch";
+m.displayName = "DataTableHeaderActions";
+g.displayName = "DataTableHeaderFilter";
+u.displayName = "DataTableHeaderFilterList";
+F.displayName = "DataTableHeaderFilterContent";
+v.displayName = "DataTableHeaderFilterContentTitle";
+h.displayName = "DataTableHeaderFilterActions";
+Object.defineProperty(N, "componentType", {
   value: "DataTableHeader"
 });
-Object.defineProperty(p, "componentType", {
+Object.defineProperty(f, "componentType", {
   value: "DataTableHeaderSearch"
 });
-Object.defineProperty(b, "componentType", {
+Object.defineProperty(m, "componentType", {
   value: "DataTableHeaderActions"
 });
-Object.defineProperty(m, "componentType", {
+Object.defineProperty(g, "componentType", {
   value: "DataTableHeaderFilter"
 });
-Object.defineProperty(T, "componentType", {
+Object.defineProperty(u, "componentType", {
   value: "DataTableHeaderFilterList"
 });
-Object.defineProperty(N, "componentType", {
+Object.defineProperty(F, "componentType", {
   value: "DataTableHeaderFilterContent"
 });
-Object.defineProperty(F, "componentType", {
+Object.defineProperty(v, "componentType", {
   value: "DataTableHeaderFilterContentTitle"
 });
-Object.defineProperty(v, "componentType", {
+Object.defineProperty(h, "componentType", {
   value: "DataTableHeaderFilterActions"
 });
+const l = P({
+  slots: {
+    root: "gi-flex gi-flex-wrap gi-items-center gi-w-full gi-gap-4 gi-mb-2",
+    headerRow: "gi-flex gi-flex-1 gi-gap-4 gi-items-center",
+    search: "gi-flex gi-flex-1",
+    filter: "gi-flex gi-items-center",
+    actions: "gi-flex gi-items-center gi-ml-auto gi-gap-4 gi-flex-shrink",
+    filterListWrapper: "gi-w-full",
+    filterList: "gi-flex gi-items-center gi-gap-2 gi-flex-wrap",
+    filterContentTitle: "gi-py-2 gi-font-medium",
+    filterContent: "gi-flex gi-flex-col gi-gap-2 gi-px-6 gi-py-4 gi-flex-1 gi-overflow-auto",
+    filterActions: "gi-flex gi-justify-end gi-gap-2 gi-p-6"
+  }
+})(), o = (e, t) => O(e) && e.type === t;
 export {
-  h as DataTableHeader,
-  b as DataTableHeaderActions,
-  m as DataTableHeaderFilter,
-  v as DataTableHeaderFilterActions,
-  N as DataTableHeaderFilterContent,
-  F as DataTableHeaderFilterContentTitle,
-  T as DataTableHeaderFilterList,
-  p as DataTableHeaderSearch
+  N as DataTableHeader,
+  m as DataTableHeaderActions,
+  g as DataTableHeaderFilter,
+  h as DataTableHeaderFilterActions,
+  F as DataTableHeaderFilterContent,
+  v as DataTableHeaderFilterContentTitle,
+  u as DataTableHeaderFilterList,
+  f as DataTableHeaderSearch
 };

package/dist/data-table/data-table-selected-rows.d.ts

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 export type DataTableSelectedRowsBannerProps = {
     selectedCount: number;
     actions?: React.ReactNode;

package/dist/data-table/data-table-selected-rows.js

@@ -1,23 +1,19 @@
-import { jsxs as r, jsx as i } from "react/jsx-runtime";
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import { c as o } from "../index-CB-zPpNk.js";
 import { cn as g } from "../cn.js";
-import { translate as l } from "../i18n/utility.js";
-const o = ({ selectedCount: e, actions: t, className: a, ...s }) => /* @__PURE__ */ r(
-  "div",
-  {
-    className: g(
-      "gi-w-full gi-flex gi-items-center gi-justify-between gi-px-3 gi-py-2 gi-bg-gray-900 gi-rounded-md",
-      a
-    ),
-    ...s,
-    children: [
-      /* @__PURE__ */ i("span", { className: "gi-text-sm gi-font-medium gi-text-white", children: l("dataTable.selectedRows", {
-        count: e,
-        defaultValue: ` (${e} Row${e === 1 ? "" : "s"} selected)`
-      }) }),
-      /* @__PURE__ */ i("div", { className: "gi-flex gi-gap-4", children: t })
-    ]
+import { translate as m } from "../i18n/utility.js";
+const p = ({ selectedCount: e, actions: s, className: a, ...l }) => /* @__PURE__ */ r("div", { className: g(i.root(), a), ...l, children: [
+  /* @__PURE__ */ t("span", { className: i.label(), children: m("dataTable.selectedRows", {
+    count: e,
+    defaultValue: ` (${e} Row${e === 1 ? "" : "s"} selected)`
+  }) }),
+  /* @__PURE__ */ t("div", { className: "gi-flex gi-gap-4", children: s })
+] }), i = o({
+  slots: {
+    root: "gi-w-full gi-flex gi-items-center gi-justify-between gi-px-3 gi-py-2 gi-bg-gray-900 gi-rounded-md",
+    label: "gi-text-sm gi-font-medium gi-text-white"
   }
-);
+})();
 export {
-  o as DataTableSelectedRowsBanner
+  p as DataTableSelectedRowsBanner
 };

package/dist/footer/footer.js

@@ -1,15 +1,15 @@
 "use client";
 import { jsxs as i, jsx as t, Fragment as u } from "react/jsx-runtime";
 import { renderToStaticMarkup as c } from "react-dom/server";
-import h from "../assets/logos/gov-of-ireland/harp-gold-text-green.js";
-import p from "../assets/logos/harp/harp-white.js";
+import { LogoGoldGreen as h } from "../assets/logos/LogoGoldGreen.js";
+import { LogoHarpWhite as g } from "../assets/logos/LogoHarpWhite.js";
 import { cn as v } from "../cn.js";
 import { Container as b } from "../container/container.js";
 import { translate as a } from "../i18n/utility.js";
-import g from "../primitives/anchor.js";
-import { SectionBreak as k } from "../section-break/section-break.js";
+import p from "../primitives/anchor.js";
+import { SectionBreak as L } from "../section-break/section-break.js";
 function l({ logo: e }) {
-  const n = `data:image/svg+xml;base64,${btoa(c(/* @__PURE__ */ t(p, {})))}`, s = `data:image/svg+xml;base64,${btoa(
+  const n = `data:image/svg+xml;base64,${btoa(c(/* @__PURE__ */ t(g, {})))}`, s = `data:image/svg+xml;base64,${btoa(
     c(/* @__PURE__ */ t(h, {}))
   )}`;
   return /* @__PURE__ */ i("picture", { children: [
@@ -24,7 +24,7 @@ function l({ logo: e }) {
     )
   ] });
 }
-function H({
+function M({
   primarySlot: e,
   secondarySlot: o,
   utilitySlot: n,
@@ -35,7 +35,7 @@ function H({
 }) {
   const f = () => /* @__PURE__ */ i(u, { children: [
     (r == null ? void 0 : r.href) && /* @__PURE__ */ t(
-      g,
+      p,
       {
         href: r.href,
         "aria-label": a("footer.goToHomePage", {
@@ -69,7 +69,7 @@ function H({
             }
           ),
           e && o && /* @__PURE__ */ t(
-            k,
+            L,
             {
               color: "gi-border-color-border-system-neutral-subtle",
               size: "lg"
@@ -104,5 +104,5 @@ function H({
   );
 }
 export {
-  H as Footer
+  M as Footer
 };

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

@@ -1,9 +1,9 @@
 import { ErrorTextProps } from '../../error-text/types.js';
 import { HintTextProps } from '../../hint-text/types.js';
-import { FormFieldProps, FormFiledLabelProps } from './types.js';
+import { FormFieldLabelProps, FormFieldProps } from './types.js';
 declare const FormField: (props: FormFieldProps) => import("react/jsx-runtime").JSX.Element;
 declare const FormFieldLabel: {
-    ({ children, text, size, htmlFor, className, secondaryLabel, ...props }: FormFiledLabelProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, text, size, htmlFor, className, secondaryLabel, ...props }: FormFieldLabelProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 declare const FormFieldHint: {

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;