@ogcio/design-system-react 1.32.0 → 1.33.0

package/dist/accordion/accordion-item.js

@@ -1,61 +1,46 @@
 "use client";
-import { jsxs as r, Fragment as u, jsx as a } from "react/jsx-runtime";
-import { c as t } from "../clsx-OuTLNxxd.js";
-import { useState as y, useRef as b } from "react";
-import { c as h } from "../index-CB-zPpNk.js";
-import { Icon as w } from "../icon/icon.js";
-const I = h({
-  variants: {
-    variant: {
-      default: "gi-px-2 gi-py-4 gi-text-md gi-font-bold",
-      small: "gi-py-2 gi-px-2 gi-text-sm gi-font-bold"
-    }
-  }
-}), j = ({
-  defaultExpanded: s,
+import { jsxs as n, Fragment as y, jsx as a } from "react/jsx-runtime";
+import { c as s } from "../clsx-OuTLNxxd.js";
+import { useState as w, useRef as I } from "react";
+import { c as k } from "../index-CB-zPpNk.js";
+import { Icon as v } from "../icon/icon.js";
+const $ = ({
+  defaultExpanded: d,
   children: c,
-  label: i,
-  disabled: n,
+  label: o,
+  disabled: t,
   className: l,
-  variant: e = "default",
-  ...m
+  variant: i = "default",
+  ...g
 }) => {
-  const [o, d] = y(s), g = b(null), p = `${i}-button`, f = `${i}-panel`;
-  return /* @__PURE__ */ r(u, { children: [
+  const [e, r] = w(d), m = I(null), p = `${o}-button`, f = `${o}-panel`, u = (h) => {
+    h.key === "Enter" && !t && r(!e);
+  }, { base: x, header: b } = N({ variant: i, disabled: !!t });
+  return /* @__PURE__ */ n(y, { children: [
     /* @__PURE__ */ a(
       "div",
       {
-        ...m,
-        ref: g,
-        "data-disabled": !!n,
-        onClick: () => !n && d(!o),
-        onKeyDown: (x) => {
-          x.key === "Enter" && !n && d(!o);
-        },
+        ...g,
+        ref: m,
+        "data-testid": "accordion-item",
+        "data-disabled": !!t,
+        onClick: () => !t && r(!e),
+        onKeyDown: u,
         tabIndex: 0,
-        className: t("gi-accordion", l),
-        children: /* @__PURE__ */ r(
-          "div",
-          {
-            className: t(
-              "gi-accordion-header",
-              I({ variant: e })
-            ),
-            children: [
-              i,
-              /* @__PURE__ */ a(
-                w,
-                {
-                  icon: o ? "keyboard_arrow_up" : "keyboard_arrow_down",
-                  size: "md",
-                  className: t({
-                    "gi-pt-[1.5px]": e === "default"
-                  })
-                }
-              )
-            ]
-          }
-        )
+        className: s(x(), l),
+        children: /* @__PURE__ */ n("div", { "data-testid": "accordion-header", className: b(), children: [
+          o,
+          /* @__PURE__ */ a(
+            v,
+            {
+              icon: e ? "keyboard_arrow_up" : "keyboard_arrow_down",
+              size: "md",
+              className: s({
+                "gi-pt-[1.5px]": i === "default"
+              })
+            }
+          )
+        ] })
       }
     ),
     /* @__PURE__ */ a(
@@ -64,17 +49,37 @@ const I = h({
         id: f,
         role: "region",
         "aria-labelledby": p,
-        className: t("gi-px-2 gi-pb-4 gi-pt-2 gi-font-normal", {
-          "gi-block": o,
-          "gi-hidden": !o,
-          "gi-text-md": e === "default",
-          "gi-text-sm": e === "small"
+        className: s("gi-px-2 gi-pb-4 gi-pt-2 gi-font-normal", {
+          "gi-block": e,
+          "gi-hidden": !e,
+          "gi-text-md": i === "default",
+          "gi-text-sm": i === "small"
         }),
         children: c
       }
     )
   ] });
-};
+}, N = k({
+  slots: {
+    base: "gi-focus-visible-state-outline-inner-shadow-sm",
+    header: " gi-flex gi-items-start gi-justify-between"
+  },
+  variants: {
+    variant: {
+      default: { header: "gi-px-2 gi-py-4 gi-text-md gi-font-bold" },
+      small: { header: "gi-py-2 gi-px-2 gi-text-sm gi-font-bold" }
+    },
+    disabled: {
+      false: {
+        base: "hover:gi-bg-gray-200 gi-focus-state-outline-inner-shadow-sm",
+        header: "gi-cursor-pointer"
+      },
+      true: {
+        header: "gi-cursor-not-allowed gi-text-gray-600"
+      }
+    }
+  }
+});
 export {
-  j as AccordionItem
+  $ as AccordionItem
 };

package/dist/alert/alert.js

@@ -1,69 +1,67 @@
 "use client";
-import { jsx as i, jsxs as t } from "react/jsx-runtime";
-import { useState as k } from "react";
-import v from "../atoms/icons/Info.js";
-import D from "../atoms/icons/Error.js";
-import V from "../atoms/icons/Warning.js";
+import { jsx as i, jsxs as e } from "react/jsx-runtime";
+import { useState as I } from "react";
+import k from "../atoms/icons/Info.js";
+import v from "../atoms/icons/Error.js";
+import b from "../atoms/icons/Warning.js";
 import x from "../atoms/icons/CheckCircle.js";
-import { cn as n } from "../cn.js";
-import { translate as j } from "../i18n/utility.js";
-import { IconButton as E } from "../icon-button/icon-button.js";
-import { alertVariants as R } from "./variants.js";
-const S = {
-  warning: (r) => /* @__PURE__ */ i(V, { ...r }),
+import { cn as t } from "../cn.js";
+import { translate as D } from "../i18n/utility.js";
+import { IconButton as V } from "../icon-button/icon-button.js";
+import { alertVariants as j } from "./variants.js";
+const E = {
+  warning: (r) => /* @__PURE__ */ i(b, { ...r }),
   success: (r) => /* @__PURE__ */ i(x, { ...r }),
-  danger: (r) => /* @__PURE__ */ i(D, { ...r }),
-  info: (r) => /* @__PURE__ */ i(v, { ...r })
+  danger: (r) => /* @__PURE__ */ i(v, { ...r }),
+  info: (r) => /* @__PURE__ */ i(k, { ...r })
 };
-function C({
+function q({
   title: r,
-  children: o,
+  children: n,
   variant: a = "info",
-  showIcon: m = !0,
-  dismissible: e,
+  showIcon: o = !0,
+  dismissible: m,
   onClose: s,
-  className: c,
-  ...l
+  className: l,
+  ...c
 }) {
-  const [f, p] = k(!1), { base: u, heading: d, container: g, dismiss: N, baseDismissible: h } = R({
-    variant: a
-  }), A = e ? h : u;
+  const [f, d] = I(!1), { base: p, heading: u, container: g, dismiss: h } = j({ variant: a });
   if (f)
     return null;
-  const I = S[a ?? "info"];
-  return /* @__PURE__ */ t(
+  const N = E[a ?? "info"];
+  return /* @__PURE__ */ e(
     "div",
     {
-      className: n(A(), c, "gi-not-prose"),
+      className: t(p(), l, "gi-not-prose"),
       role: "alert",
       "aria-live": "assertive",
-      ...l,
+      ...c,
       children: [
-        m ? /* @__PURE__ */ i(I, { className: "gi-shrink-0 gi-block" }) : null,
-        /* @__PURE__ */ t(
+        o ? /* @__PURE__ */ i(N, { className: "gi-shrink-0 gi-block" }) : null,
+        /* @__PURE__ */ e(
           "div",
           {
-            className: n(g(), {
+            className: t(g(), {
               "gi-gap-1": r
             }),
             children: [
-              r && /* @__PURE__ */ i("p", { className: d(), children: r }),
-              o
+              r && /* @__PURE__ */ i("p", { className: u(), "data-testid": "alert-heading", children: r }),
+              n
             ]
           }
         ),
-        e && /* @__PURE__ */ i(
-          E,
+        m && /* @__PURE__ */ i(
+          V,
           {
-            onClick: (b) => {
-              p(!0), s == null || s(b);
+            onClick: (A) => {
+              d(!0), s == null || s(A);
             },
-            className: N(),
+            className: h(),
             size: "small",
             appearance: "dark",
             variant: "flat",
             icon: { icon: "close" },
-            "aria-label": j("alert.dismissAlert", {
+            "aria-label": D("alert.dismissAlert", {
               defaultValue: "Dismiss alert"
             })
           }
@@ -73,6 +71,6 @@ function C({
   );
 }
 export {
-  S as ALERT_VARIANT_ICONS,
-  C as Alert
+  E as ALERT_VARIANT_ICONS,
+  q as Alert
 };

package/dist/alert/variants.d.ts

@@ -2,24 +2,23 @@ export declare const alertVariants: import('tailwind-variants').TVReturnType<{
     variant: {
         info: {
             base: string;
-            baseDismissible: string;
-        };
-        danger: {
-            base: string;
-            baseDismissible: string;
+            icon: string;
         };
         success: {
             base: string;
-            baseDismissible: string;
+            icon: string;
         };
         warning: {
             base: string;
-            baseDismissible: string;
+            icon: string;
+        };
+        danger: {
+            base: string;
+            icon: string;
         };
     };
 }, {
     base: string;
-    baseDismissible: string;
     container: string;
     heading: string;
     dismiss: string;
@@ -27,62 +26,61 @@ export declare const alertVariants: import('tailwind-variants').TVReturnType<{
     variant: {
         info: {
             base: string;
-            baseDismissible: string;
-        };
-        danger: {
-            base: string;
-            baseDismissible: string;
+            icon: string;
         };
         success: {
             base: string;
-            baseDismissible: string;
+            icon: string;
         };
         warning: {
             base: string;
-            baseDismissible: string;
+            icon: string;
+        };
+        danger: {
+            base: string;
+            icon: string;
         };
     };
 }, {
     variant: {
         info: {
             base: string;
-            baseDismissible: string;
-        };
-        danger: {
-            base: string;
-            baseDismissible: string;
+            icon: string;
         };
         success: {
             base: string;
-            baseDismissible: string;
+            icon: string;
         };
         warning: {
             base: string;
-            baseDismissible: string;
+            icon: string;
+        };
+        danger: {
+            base: string;
+            icon: string;
         };
     };
 }>, {
     variant: {
         info: {
             base: string;
-            baseDismissible: string;
-        };
-        danger: {
-            base: string;
-            baseDismissible: string;
+            icon: string;
         };
         success: {
             base: string;
-            baseDismissible: string;
+            icon: string;
         };
         warning: {
             base: string;
-            baseDismissible: string;
+            icon: string;
+        };
+        danger: {
+            base: string;
+            icon: string;
         };
     };
 }, {
     base: string;
-    baseDismissible: string;
     container: string;
     heading: string;
     dismiss: string;
@@ -90,24 +88,23 @@ export declare const alertVariants: import('tailwind-variants').TVReturnType<{
     variant: {
         info: {
             base: string;
-            baseDismissible: string;
-        };
-        danger: {
-            base: string;
-            baseDismissible: string;
+            icon: string;
         };
         success: {
             base: string;
-            baseDismissible: string;
+            icon: string;
         };
         warning: {
             base: string;
-            baseDismissible: string;
+            icon: string;
+        };
+        danger: {
+            base: string;
+            icon: string;
         };
     };
 }, {
     base: string;
-    baseDismissible: string;
     container: string;
     heading: string;
     dismiss: string;
@@ -115,38 +112,38 @@ export declare const alertVariants: import('tailwind-variants').TVReturnType<{
     variant: {
         info: {
             base: string;
-            baseDismissible: string;
-        };
-        danger: {
-            base: string;
-            baseDismissible: string;
+            icon: string;
         };
         success: {
             base: string;
-            baseDismissible: string;
+            icon: string;
         };
         warning: {
             base: string;
-            baseDismissible: string;
+            icon: string;
+        };
+        danger: {
+            base: string;
+            icon: string;
         };
     };
 }, {
     variant: {
         info: {
             base: string;
-            baseDismissible: string;
-        };
-        danger: {
-            base: string;
-            baseDismissible: string;
+            icon: string;
         };
         success: {
             base: string;
-            baseDismissible: string;
+            icon: string;
         };
         warning: {
             base: string;
-            baseDismissible: string;
+            icon: string;
+        };
+        danger: {
+            base: string;
+            icon: string;
         };
     };
 }>, unknown, unknown, undefined>>;

package/dist/alert/variants.js

@@ -1,29 +1,28 @@
-import { c as i } from "../index-CB-zPpNk.js";
-const a = i({
+import { c as t } from "../index-CB-zPpNk.js";
+const i = t({
   slots: {
-    base: "gi-alert-base",
-    baseDismissible: "gi-alert-base-dismissible",
-    container: "gi-alert-container",
-    heading: "gi-alert-title",
-    dismiss: "gi-alert-dismiss"
+    base: "gi-relative gi-flex gi-flex-row gi-p-3 gi-border-xs gi-rounded-sm gi-gap-2 gi-max-w-[640px] [width:inherit]",
+    container: "gi-flex gi-flex-col gi-items-start gi-grow gi-pr-2",
+    heading: "gi-text-2md gi-font-bold",
+    dismiss: "gi-absolute gi-top-2 gi-right-2"
   },
   variants: {
     variant: {
       info: {
-        base: "gi-alert-info",
-        baseDismissible: "gi-alert-info"
-      },
-      danger: {
-        base: "gi-alert-danger",
-        baseDismissible: "gi-alert-danger"
+        base: "gi-bg-color-surface-intent-info-default gi-border-color-border-intent-info-subtle gi-text-color-text-intent-info-default",
+        icon: "gi-text-color-icon-intent-info-default"
       },
       success: {
-        base: "gi-alert-success",
-        baseDismissible: "gi-alert-success"
+        base: "gi-bg-color-surface-intent-success-default gi-border-color-border-intent-success-subtle gi-text-color-text-intent-success-default",
+        icon: "gi-text-color-icon-intent-success-default"
       },
       warning: {
-        base: "gi-alert-warning",
-        baseDismissible: "gi-alert-warning"
+        base: "gi-bg-color-surface-intent-warning-default gi-border-color-border-intent-warning-subtle gi-text-color-text-intent-warning-default",
+        icon: "gi-text-color-icon-intent-warning-default"
+      },
+      danger: {
+        base: "gi-bg-color-surface-intent-error-default gi-border-color-border-intent-error-subtle gi-text-color-text-intent-error-default",
+        icon: "gi-text-color-icon-intent-error-default"
       }
     }
   },
@@ -32,5 +31,5 @@ const a = i({
   }
 });
 export {
-  a as alertVariants
+  i as alertVariants
 };

package/dist/atoms/Button.d.ts

@@ -4,7 +4,7 @@
  * The file source is in `packages/core/atoms/Button.lite.tsx`
  */
 import * as React from 'react';
-type Props = {
+export type Props = {
     id?: string;
     variant?: (typeof Variant)[keyof typeof Variant];
     appearance?: (typeof Appearance)[keyof typeof Appearance];
@@ -20,6 +20,7 @@ type Props = {
     ariaLabel?: string;
     ariaLabelledBy?: string;
     ariaDescribedBy?: string;
+    ariaChecked?: boolean;
     ariaPressed?: boolean | 'mixed';
     ariaExpanded?: boolean;
     ariaControls?: string;
@@ -31,7 +32,6 @@ type Props = {
     value?: string;
     tabIndex?: number;
     dataTestId?: string;
-    dataTestid?: string;
     ref?: any;
 };
 export declare const Variant: {

package/dist/atoms/Button.js

@@ -291,6 +291,7 @@ const r = {
       "aria-label": e.ariaLabel,
       "aria-labelledby": e.ariaLabelledBy,
       "aria-describedby": e.ariaDescribedBy,
+      "aria-checked": e.ariaChecked,
       "aria-pressed": e.ariaPressed,
       "aria-expanded": e.ariaExpanded,
       "aria-controls": e.ariaControls,
@@ -301,7 +302,7 @@ const r = {
       form: e.form,
       value: e.value,
       tabIndex: e.tabIndex,
-      "data-testid": e.dataTestId ?? e.dataTestid,
+      "data-testid": e.dataTestId,
       children: e.children
     }
   );

package/dist/button/button.d.ts

@@ -1,9 +1,2 @@
-export declare const Button: import('react').ForwardRefExoticComponent<import('react').ButtonHTMLAttributes<HTMLButtonElement> & {
-    variant?: import('./types.js').ButtonVariant;
-    appearance?: import('./types.js').ButtonAppearance;
-    size?: import('./types.js').ButtonSize;
-    form?: string;
-    value?: string;
-    className?: string;
-    dataTestid?: string;
-} & import('react').RefAttributes<HTMLButtonElement>>;
+import { ButtonProps } from './types';
+export declare const Button: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/button/button.js

@@ -1,43 +1,76 @@
-"use client";
-import { jsx as l } from "react/jsx-runtime";
-import { forwardRef as p } from "react";
-import { cn as u } from "../cn.js";
-import { getSizeClass as c, isButtonDisabled as b, getVariantAppearanceClass as B } from "./helpers.js";
-const r = p(
+import { jsx as $ } from "react/jsx-runtime";
+import { forwardRef as g } from "react";
+import q from "../atoms/Button.js";
+const a = g(
   ({
-    variant: e,
-    appearance: o,
-    size: a,
-    disabled: t,
-    className: n,
-    children: s,
-    dataTestid: i,
-    ...m
-  }, f) => /* @__PURE__ */ l(
-    "button",
+    id: e,
+    variant: r,
+    appearance: t,
+    size: o,
+    children: i,
+    disabled: d,
+    className: p,
+    onClick: s,
+    onFocus: l,
+    onBlur: n,
+    onKeyDown: b,
+    onKeyUp: m,
+    role: u,
+    type: f,
+    form: c,
+    value: y,
+    tabIndex: B,
+    dataTestid: x,
+    "aria-label": h,
+    "aria-labelledby": j,
+    "aria-describedby": w,
+    "aria-checked": T,
+    "aria-pressed": k,
+    "aria-expanded": v,
+    "aria-controls": I,
+    "aria-haspopup": N,
+    "aria-busy": O,
+    "data-testid": P
+  }, R) => /* @__PURE__ */ $(
+    q,
     {
-      "data-testid": i,
-      ...m,
-      ref: f,
-      "aria-disabled": t,
-      disabled: t,
-      className: u(
-        "gi-btn",
-        B({ disabled: t, variant: e, appearance: o }),
-        b({ disabled: t, variant: e, appearance: o }),
-        c(a),
-        n
-      ),
-      children: s
+      ref: R,
+      id: e,
+      variant: r,
+      appearance: t,
+      size: o,
+      children: i,
+      disabled: d,
+      className: p,
+      onClick: s,
+      onFocus: l,
+      onBlur: n,
+      onKeyDown: b,
+      onKeyUp: m,
+      ariaLabel: h,
+      ariaLabelledBy: j,
+      ariaDescribedBy: w,
+      ariaChecked: T,
+      ariaPressed: k,
+      ariaExpanded: v,
+      ariaControls: I,
+      ariaHasPopup: N,
+      ariaBusy: O,
+      role: u,
+      type: f,
+      form: c,
+      value: y,
+      tabIndex: B,
+      dataTestId: P ?? x
     }
   )
 );
-r.displayName = "Button";
-Object.defineProperty(r, "componentType", {
+a.displayName = "Button";
+Object.defineProperty(a, "componentType", {
   value: "Button",
   writable: !1,
   enumerable: !1
 });
 export {
-  r as Button
+  a as Button
 };