@ogcio/design-system-react 1.21.0 → 1.22.1

package/dist/tabs/tab-item.d.ts

@@ -2,10 +2,11 @@ import { FC } from 'react';
 import { TabItemProps } from './types.js';
 export declare const TabItem: FC<TabItemProps>;
 export declare const InternalTabItem: import('react').ForwardRefExoticComponent<TabItemProps & {
-    onTabKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+    onTabKeyDown?: (event: import('./types.js').TabKeyboardEvent) => void;
     index: number;
     appearance?: "default" | "dark";
     size?: "md" | "sm";
     stretch?: boolean;
     labelAlignment?: "center" | "end" | "start";
-} & import('react').RefAttributes<HTMLButtonElement>>;
+    className?: string;
+} & import('react').RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;

package/dist/tabs/tab-item.js

@@ -1,12 +1,13 @@
 "use client";
 import "@ogcio/design-system-react/browser-check";
-import { jsx as i, jsxs as I, Fragment as N } from "react/jsx-runtime";
-import { forwardRef as v, useRef as d, useEffect as R } from "react";
-import { c as j } from "../index-CB-zPpNk.js";
-import { cn as z } from "../cn.js";
-import { Button as B } from "../primitives/button.js";
-import { slugify as T } from "../utilities.js";
-const V = j({
+import { jsxs as j, Fragment as v, jsx as a } from "react/jsx-runtime";
+import { forwardRef as k } from "react";
+import { c as z } from "../index-CB-zPpNk.js";
+import { cn as s } from "../cn.js";
+import { Icon as A } from "../icon/icon.js";
+import { Button as V } from "../primitives/button.js";
+import { slugify as $ } from "../utilities.js";
+const B = z({
   base: "gi-tab-item",
   variants: {
     size: {
@@ -20,71 +21,93 @@ const V = j({
       true: "gi-flex-1"
     },
     labelAlignment: {
-      start: "gi-text-start",
-      center: "gi-text-center",
-      end: "gi-text-end"
+      start: "gi-justify-start",
+      center: "gi-justify-center",
+      end: "gi-justify-end"
     }
   },
   defaultVariants: {
     size: "md"
   }
-}), $ = () => null, w = v(
-  ({
-    value: g,
-    href: s,
-    checked: e = !1,
-    children: n,
-    onTabClick: o,
-    onTabKeyDown: l,
-    size: b = "md",
-    appearance: m = "default",
-    labelAlignment: p = "center",
-    stretch: x,
-    ...y
-  }, r) => {
-    const c = T(g), a = d(null), u = d(!1);
-    return R(() => {
-      var t;
-      e && !u.current && ((t = a.current) == null || t.click());
-    }, [e]), /* @__PURE__ */ i(
-      B,
+}), F = () => null, R = k((b, n) => {
+  const {
+    value: h,
+    href: c,
+    checked: r = !1,
+    children: x,
+    onTabClick: t,
+    onTabKeyDown: i,
+    size: y = "md",
+    appearance: l = "default",
+    labelAlignment: I = "center",
+    stretch: N,
+    icon: m,
+    className: o,
+    ...d
+  } = b, g = $(h), f = {
+    role: "tab",
+    "aria-selected": r,
+    "aria-controls": `tab-panel-${g}`,
+    id: `tab-${g}`,
+    tabIndex: r ? 0 : -1
+  }, u = B({ size: y, checked: r, stretch: N, labelAlignment: I }), p = /* @__PURE__ */ j(v, { children: [
+    m && /* @__PURE__ */ a(A, { icon: m }),
+    x,
+    /* @__PURE__ */ a(
+      "div",
       {
-        id: `tab-${c}`,
-        ref: (t) => {
-          a.current = t, typeof r == "function" ? r(t) : r && (r.current = t);
-        },
-        ...y,
-        role: "tab",
-        "aria-roledescription": "tab",
-        "aria-selected": e ? "true" : "false",
-        "aria-controls": `tab-panel-${c}`,
-        className: V({ size: b, checked: e, stretch: x, labelAlignment: p }),
-        onClick: (t) => {
-          var f;
-          u.current = !0, o && o(t), (f = a.current) == null || f.blur();
-        },
-        onKeyDown: (t) => {
-          l && l(t);
-        },
-        children: s ? /* @__PURE__ */ i("a", { href: s, className: "gi-decoration-xs", children: n }) : /* @__PURE__ */ I(N, { children: [
-          n,
-          /* @__PURE__ */ i(
-            "div",
-            {
-              className: z("gi-tab-item-border", {
-                "gi-bg-color-text-system-neutral-interactive-default": e && m === "dark",
-                "gi-bg-color-border-tone-primary-accent-selected": e && m === "default"
-              })
-            }
-          )
-        ] })
+        className: s("gi-tab-item-border", {
+          "gi-bg-color-text-system-neutral-interactive-default": r && l === "dark",
+          "gi-bg-color-border-tone-primary-accent-selected": r && l === "default"
+        }),
+        "aria-hidden": "true"
       }
-    );
-  }
-);
-w.displayName = "InternalTabItem";
-$.displayName = "TabItem";
+    )
+  ] });
+  return c ? /* @__PURE__ */ a(
+    "a",
+    {
+      href: c,
+      ...f,
+      ...d,
+      className: s(
+        u,
+        "gi-inline-flex gi-items-center gi-gap-2 gi-decoration-xs",
+        o
+      ),
+      onClick: (e) => {
+        t == null || t(e);
+      },
+      onKeyDown: (e) => {
+        i == null || i(e);
+      },
+      ref: n,
+      children: p
+    }
+  ) : /* @__PURE__ */ a(
+    V,
+    {
+      ...f,
+      ...d,
+      ref: n,
+      className: s(
+        u,
+        "gi-inline-flex gi-items-center gi-gap-2",
+        o
+      ),
+      onClick: (e) => {
+        t == null || t(e);
+      },
+      onKeyDown: (e) => {
+        i == null || i(e);
+      },
+      children: p
+    }
+  );
+});
+R.displayName = "InternalTabItem";
+F.displayName = "TabItem";
 export {
-  w as InternalTabItem,
-  $ as TabItem
+  R as InternalTabItem,
+  F as TabItem
 };

package/dist/tabs/tab-list.js

@@ -1,94 +1,110 @@
 "use client";
 import "@ogcio/design-system-react/browser-check";
-import { jsx as g } from "react/jsx-runtime";
-import { useState as S, Children as s, useEffect as $, isValidElement as A } from "react";
-import { cn as q } from "../cn.js";
-import { InternalTabItem as D } from "./tab-item.js";
+import { jsx as A } from "react/jsx-runtime";
+import { useState as $, Children as b, useEffect as g, isValidElement as m } from "react";
+import { cn as D } from "../cn.js";
+import { InternalTabItem as K } from "./tab-item.js";
 const z = ({
-  children: c,
-  tabName: b,
+  children: l,
+  tabName: p,
   appearance: C,
-  size: m,
+  size: x,
   ariaLabelledBy: I,
-  stretch: p,
-  padding: f = !0,
-  labelAlignment: w
+  stretch: y,
+  padding: T = !0,
+  labelAlignment: S
 }) => {
-  const [d, l] = S(null), y = s.count(c);
-  $(() => {
+  const [u, f] = $(null), h = b.count(l);
+  g(() => {
     let t = !1, r = 0;
-    s.forEach(c, (e, o) => {
-      A(e) && "checked" in e.props && e.props.checked === !0 && (r = o, t = !0);
-    }), l(t ? r : 0);
+    b.forEach(l, (e, n) => {
+      m(e) && "checked" in e.props && e.props.checked === !0 && (r = n, t = !0);
+    }), f(t ? r : 0);
   }, []);
-  const k = (t, r) => (e) => {
-    l(t);
-    const T = [
-      ...document.querySelector(`#${b}`).querySelectorAll("[role=tabpanel]")
-    ];
-    for (const h of T)
-      h.style.display = "none";
-    const n = e.currentTarget.getAttribute("aria-controls");
-    if (!n)
+  const w = () => {
+    const t = document.querySelector(`#${p}`);
+    return t || null;
+  }, E = (t) => {
+    const r = w();
+    if (!r)
+      return;
+    const e = r.querySelectorAll('[role="tabpanel"]');
+    for (const i of e)
+      i.style.display = "none", i.setAttribute("aria-hidden", "true");
+    const d = [
+      ...r.querySelectorAll('[role="tab"]')
+    ].find((i) => {
+      const o = i.dataset.index ?? i.getAttribute("index");
+      if (o !== null)
+        return Number(o) === t;
+    });
+    if (!d)
       return;
-    const u = document.querySelector(
-      `#${n}`
-    );
-    u.style.display = "block", r && r(e);
-  }, x = (t) => {
+    const a = d.getAttribute("aria-controls");
+    if (!a)
+      return;
+    const s = r.querySelector(`#${a}`);
+    s && (s.style.display = "block", s.setAttribute("aria-hidden", "false"));
+  };
+  g(() => {
+    E(u ?? 0);
+  }, [u]);
+  const k = (t, r) => (e) => {
+    f(t), r && r(e);
+  }, P = (t) => {
     let r = 0;
     if (t.key === "ArrowLeft" ? r = -1 : t.key === "ArrowRight" && (r = 1), r === 0)
       return;
-    let o = (d ?? 0) + r;
-    o < 0 && (o = 0), o >= y && (o = y - 1);
-    const n = s.toArray(c)[o];
-    if (!n)
+    let n = (u ?? 0) + r;
+    n < 0 && (n = 0), n >= h && (n = h - 1);
+    const a = b.toArray(l)[n];
+    if (!a)
       return;
-    l(o);
-    const u = {
+    f(n);
+    const s = {
       currentTarget: {
-        getAttribute: (a) => {
-          var i;
-          return a === "aria-controls" ? `tab-panel-${(i = n == null ? void 0 : n.props) == null ? void 0 : i.value}` : null;
+        getAttribute: (o) => {
+          var c;
+          return o === "aria-controls" ? `tab-panel-${(c = a == null ? void 0 : a.props) == null ? void 0 : c.value}` : null;
         }
       },
       bubbles: !0,
       isTrusted: !0
     };
-    k(o, () => {
-      var a, i;
-      return r === -1 ? (i = (a = n.props) == null ? void 0 : a.onTabClick) == null ? void 0 : i.call(a, t) : t;
-    })(u), t.stopPropagation(), t.preventDefault();
-  }, E = s.map(c, (t, r) => {
+    k(n, () => {
+      var o, c;
+      return r === -1 ? (c = (o = a.props) == null ? void 0 : o.onTabClick) == null ? void 0 : c.call(o, t) : t;
+    })(s), t.stopPropagation(), t.preventDefault();
+  }, q = b.map(l, (t, r) => {
     var e;
-    return A(t) ? /* @__PURE__ */ g(
-      D,
+    return m(t) ? /* @__PURE__ */ A(
+      K,
       {
         ...t.props,
         appearance: C,
-        stretch: p,
-        labelAlignment: w,
-        size: m,
+        stretch: y,
+        labelAlignment: S,
+        size: x,
         index: r,
-        checked: d === r,
-        onTabKeyDown: x,
+        checked: u === r,
+        onTabKeyDown: P,
         onTabClick: k(r, (e = t == null ? void 0 : t.props) == null ? void 0 : e.onTabClick)
       }
     ) : null;
   });
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ A(
     "div",
     {
       role: "tablist",
       "aria-orientation": "horizontal",
-      className: q("gi-tab-list", {
-        "gi-tab-list-stretch": p,
-        "gi-gap-4": f,
-        "gi-gap-0": !f
+      className: D("gi-tab-list", {
+        "gi-tab-list-stretch": y,
+        "gi-gap-4": T,
+        "gi-gap-0": !T
       }),
       "aria-labelledby": I,
-      id: `${b}-list`,
-      children: E
+      id: `${p}-list`,
+      children: q
     }
   );
 };

package/dist/tabs/tabs.d.ts

@@ -1,2 +1,2 @@
 import { TabsProps } from './types.js';
-export declare function Tabs({ appearance, size, stretch, padding, labelAlignment, id, ariaLabelledBy, dataTestid, children, }: TabsProps): import("react/jsx-runtime").JSX.Element;
+export declare function Tabs({ appearance, size, stretch, padding, labelAlignment, id, ariaLabelledBy, children, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;

package/dist/tabs/tabs.js

@@ -2,26 +2,26 @@ import { jsx as c } from "react/jsx-runtime";
 import { Children as f, isValidElement as u, cloneElement as p } from "react";
 import { generateRandomId as h } from "../utilities.js";
 function x({
-  appearance: e = "default",
+  appearance: t = "default",
   size: a = "md",
-  stretch: i = !1,
-  padding: n = !0,
+  stretch: n = !1,
+  padding: i = !0,
   labelAlignment: m = "center",
-  id: t = h(),
+  id: e = h(),
   ariaLabelledBy: o,
-  dataTestid: d,
-  children: s
+  children: d,
+  ...l
 }) {
-  const l = f.map(s, (r) => u(r) ? p(r, {
-    tabName: t,
-    appearance: e,
+  const s = f.map(d, (r) => u(r) ? p(r, {
+    tabName: e,
+    appearance: t,
     size: a,
     ariaLabelledBy: o,
-    stretch: i,
-    padding: n,
+    stretch: n,
+    padding: i,
     labelAlignment: m
   }) : r);
-  return /* @__PURE__ */ c("div", { className: "gi-tabs", id: t, "data-testid": d, children: l });
+  return /* @__PURE__ */ c("div", { className: "gi-tabs", id: e, ...l, children: s });
 }
 export {
   x as Tabs

package/dist/tabs/types.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { IconId } from '../icon/icon.js';
 type TabAppearanceType = 'default' | 'dark';
 type TabLabelAlignmentType = 'start' | 'end' | 'center';
 export type TabsProps = {
@@ -21,6 +22,10 @@ export type TabsProps = {
     /** TabList, TabItem, and TabPanel components */
     children: React.ReactNode;
 };
+export type TabMouseClickHandler = React.MouseEventHandler<HTMLButtonElement> | React.MouseEventHandler<HTMLAnchorElement>;
+export type TabKeyboardClickHandler = React.KeyboardEventHandler<HTMLButtonElement> | React.KeyboardEventHandler<HTMLAnchorElement>;
+export type TabMouseClickEvent = React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>;
+export type TabKeyboardEvent = React.KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>;
 export type TabItemProps = {
     /** Optional href to render the tab as a link */
     href?: string;
@@ -35,7 +40,8 @@ export type TabItemProps = {
     /** Tab label text */
     children: string;
     /** Optional click event handler for the tab */
-    onTabClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    onTabClick?: (event: TabMouseClickEvent) => void;
+    icon?: IconId;
 };
 export type TabPanelProps = {
     /** The value used to associate the panel with its corresponding tab */
@@ -54,11 +60,12 @@ export type TabListProps = {
     labelAlignment?: TabLabelAlignmentType;
 };
 export type InternalTabItemProps = TabItemProps & {
-    onTabKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+    onTabKeyDown?: (event: TabKeyboardEvent) => void;
     index: number;
     appearance?: TabAppearanceType;
     size?: 'md' | 'sm';
     stretch?: boolean;
     labelAlignment?: TabLabelAlignmentType;
+    className?: string;
 };
 export {};

package/dist/toast/ds-toast.d.ts

@@ -78,5 +78,5 @@ declare const toastVariants: import('tailwind-variants').TVReturnType<{
     dismiss: string;
     innerContainer: string;
 }, undefined, TVConfig<V, EV>, unknown, unknown, undefined>>;
-declare function Toast({ title, description, action, variant, dismissible, onClose, dataTestid, slotAction, }: ToastProps): import("react/jsx-runtime").JSX.Element;
+declare function Toast({ title, description, action, variant, showIcon, dismissible, onClose, slotAction, }: ToastProps): import("react/jsx-runtime").JSX.Element;
 export { Toast, toastVariants };

package/dist/toast/ds-toast.js

@@ -63,53 +63,42 @@ function B({
   description: s,
   action: a,
   variant: r = "info",
+  showIcon: l = !0,
   dismissible: o,
-  onClose: l,
-  dataTestid: c,
+  onClose: c,
   slotAction: t
 }) {
-  const { base: m, heading: b, container: g, innerContainer: d, dismiss: f, baseDismissible: h } = N({
+  const { base: m, heading: g, container: b, innerContainer: d, dismiss: f, baseDismissible: h } = N({
     variant: r
   });
-  return /* @__PURE__ */ n(
-    "div",
-    {
-      className: (o ? h : m)(),
-      role: "alert",
-      "aria-live": "assertive",
-      "aria-atomic": "true",
-      "aria-label": e,
-      "data-testid": c,
-      children: [
-        /* @__PURE__ */ i(
-          p,
+  return /* @__PURE__ */ n("div", { className: (o ? h : m)(), children: [
+    l ? /* @__PURE__ */ i(
+      p,
+      {
+        icon: C({ variant: r }),
+        className: "gi-toast-icon",
+        "data-variant": r
+      }
+    ) : null,
+    /* @__PURE__ */ n("div", { className: b(), children: [
+      /* @__PURE__ */ n("div", { className: d(), children: [
+        /* @__PURE__ */ i("p", { className: g(), children: e }),
+        o && /* @__PURE__ */ i("div", { className: f(), children: /* @__PURE__ */ i(
+          v,
           {
-            icon: C({ variant: r }),
-            className: "gi-toast-icon",
-            "data-variant": r
+            onClick: c,
+            size: "small",
+            appearance: "dark",
+            variant: "flat",
+            icon: { icon: "close" },
+            "aria-label": "Close toast"
           }
-        ),
-        /* @__PURE__ */ n("div", { className: g(), children: [
-          /* @__PURE__ */ n("div", { className: d(), children: [
-            /* @__PURE__ */ i("p", { className: b(), children: e }),
-            o && /* @__PURE__ */ i("div", { className: f(), children: /* @__PURE__ */ i(
-              v,
-              {
-                onClick: l,
-                size: "small",
-                appearance: "dark",
-                variant: "flat",
-                icon: { icon: "close" },
-                "aria-label": "Close toast"
-              }
-            ) })
-          ] }),
-          /* @__PURE__ */ i(k, { ariaLabel: s, children: s }),
-          (a || t) && /* @__PURE__ */ i("div", { className: "gi-toast-action", children: /* @__PURE__ */ i(w, { href: a == null ? void 0 : a.href, noColor: !0, size: "md", asChild: !!t, children: t || (a == null ? void 0 : a.label) }) })
-        ] })
-      ]
-    }
-  );
+        ) })
+      ] }),
+      /* @__PURE__ */ i(k, { ariaLabel: s, children: s }),
+      (a || t) && /* @__PURE__ */ i("div", { className: "gi-toast-action", children: /* @__PURE__ */ i(w, { href: a == null ? void 0 : a.href, noColor: !0, size: "md", asChild: !!t, children: t || (a == null ? void 0 : a.label) }) })
+    ] })
+  ] });
 }
 export {
   B as Toast,

package/dist/toast/toast.d.ts

@@ -3,4 +3,4 @@ export declare const ToastProvider: () => import("react/jsx-runtime").JSX.Elemen
 export declare const toaster: {
     create: ({ position, ...props }: ToastProps) => void;
 };
-export declare const Toast: ({ variant, title, description, action, dismissible, duration, animation, slotAction, }: ToastProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Toast: ({ variant, title, description, action, dismissible, duration, animation, showIcon, slotAction, ...props }: ToastProps) => import("react/jsx-runtime").JSX.Element | null;