@ogcio/design-system-react 1.22.0 → 1.23.0

package/dist/summary-list/summary-list-action.js

@@ -1,18 +1,17 @@
 "use client";
-import "@ogcio/design-system-react/browser-check";
 import { jsx as r } from "react/jsx-runtime";
 import { Link as i } from "../link/link.js";
 import { useSummaryListContext as o } from "./summary-list-context.js";
-const t = ({
-  children: e,
+const e = ({
+  children: t,
   ...m
-}) => (o(), /* @__PURE__ */ r(i, { ...m, children: e }));
-t.displayName = "SummaryListAction";
-Object.defineProperty(t, "componentType", {
+}) => (o(), /* @__PURE__ */ r(i, { ...m, children: t }));
+e.displayName = "SummaryListAction";
+Object.defineProperty(e, "componentType", {
   value: "SummaryListAction",
   writable: !1,
   enumerable: !1
 });
 export {
-  t as SummaryListAction
+  e as SummaryListAction
 };

package/dist/summary-list/summary-list-context.js

@@ -1,12 +1,11 @@
 "use client";
-import "@ogcio/design-system-react/browser-check";
 import { jsx as e } from "react/jsx-runtime";
 import { createContext as o, useContext as n } from "react";
 const r = o(null);
-function s({ children: t }) {
+function m({ children: t }) {
   return /* @__PURE__ */ e(r.Provider, { value: !0, children: t });
 }
-function x() {
+function s() {
   const t = n(r);
   if (!t)
     throw new Error(
@@ -15,6 +14,6 @@ function x() {
   return t;
 }
 export {
-  s as SummaryListProvider,
-  x as useSummaryListContext
+  m as SummaryListProvider,
+  s as useSummaryListContext
 };

package/dist/summary-list/summary-list-header.js

@@ -1,8 +1,7 @@
 "use client";
-import "@ogcio/design-system-react/browser-check";
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import { Children as S } from "react";
-import { cn as r } from "../cn.js";
+import { cn as s } from "../cn.js";
 import { useBreakpoint as A } from "../hooks/use-breakpoint.js";
 import { useDomId as C } from "../hooks/use-dom-id.js";
 import { translate as h } from "../i18n/utility.js";
@@ -20,23 +19,23 @@ const y = ({
 }) => {
   j();
   const { width: m } = A(), p = C(), t = S.toArray(g).filter(
-    (s) => b(s) === "SummaryListAction"
+    (r) => b(r) === "SummaryListAction"
   ), i = m != null && m <= 765, d = c ? { maxWidth: c } : void 0, u = {
     "gi-truncate gi-block": w === "truncate"
   };
-  return /* @__PURE__ */ l("tr", { ...L, className: r("gi-h-14", N), children: [
+  return /* @__PURE__ */ l("tr", { ...L, className: s("gi-h-14", N), children: [
     /* @__PURE__ */ l("th", { scope: "col", className: "gi-text-center gi-align-middle", children: [
-      !i && /* @__PURE__ */ e("span", { className: r(u), style: d, children: n }),
-      i ? /* @__PURE__ */ l("div", { className: r("gi-flex gi-justify-between"), children: [
-        /* @__PURE__ */ e("span", { className: r(u), style: d, children: n }),
+      !i && /* @__PURE__ */ e("span", { className: s(u), style: d, children: n }),
+      i ? /* @__PURE__ */ l("div", { className: s("gi-flex gi-justify-between"), children: [
+        /* @__PURE__ */ e("span", { className: s(u), style: d, children: n }),
         /* @__PURE__ */ e("span", { className: "gi-sr-only", children: h("header.actions", {
           defaultValue: "Actions"
         }) }),
-        /* @__PURE__ */ e(f, { id: o, children: t.map((s, a) => /* @__PURE__ */ e(
+        /* @__PURE__ */ e(f, { id: o, children: t.map((r, a) => /* @__PURE__ */ e(
           "span",
           {
-            className: r({ "gi-ml-4": a > 0 }),
-            children: s
+            className: s({ "gi-ml-4": a > 0 }),
+            children: r
           },
           `${p}-a${a}`
         )) })
@@ -46,11 +45,11 @@ const y = ({
       /* @__PURE__ */ e("span", { className: "gi-sr-only", children: h("header.actions", {
         defaultValue: "Actions"
       }) }),
-      /* @__PURE__ */ e(f, { id: o, children: t.map((s, a) => /* @__PURE__ */ e(
+      /* @__PURE__ */ e(f, { id: o, children: t.map((r, a) => /* @__PURE__ */ e(
         "span",
         {
-          className: r({ "gi-ml-4": a > 0 }),
-          children: s
+          className: s({ "gi-ml-4": a > 0 }),
+          children: r
         },
         `${p}-a${a}`
       )) })

package/dist/summary-list/summary-list-row.js

@@ -1,55 +1,54 @@
 "use client";
-import "@ogcio/design-system-react/browser-check";
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
 import { Children as g } from "react";
-import { cn as s } from "../cn.js";
+import { cn as i } from "../cn.js";
 import { useDomId as L } from "../hooks/use-dom-id.js";
 import { translate as y } from "../i18n/utility.js";
 import { getSpecialComponentType as p } from "../utilities.js";
 import { useSummaryListContext as $ } from "./summary-list-context.js";
 const f = ({
-  children: a,
-  label: l,
+  children: l,
+  label: t,
   withBorder: h,
   className: b,
   ...S
 }) => {
   $();
-  const n = g.toArray(a), m = n.filter(
-    (t) => p(t) === "SummaryListAction"
+  const n = g.toArray(l), m = n.filter(
+    (a) => p(a) === "SummaryListAction"
   ), o = n.find(
-    (t) => p(t) === "SummaryListValue"
+    (a) => p(a) === "SummaryListValue"
   ), r = L(), c = `${r}-value`, d = `${r}-actions`;
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ s(
     "tr",
     {
       ...S,
-      className: s(
+      className: i(
         {
           "gi-border-b gi-border-color-border-system-neutral-muted": h
         },
         b
       ),
       children: [
-        /* @__PURE__ */ e("th", { id: r, scope: "row", children: l }),
-        o ? /* @__PURE__ */ i("td", { ...o.props, "aria-labelledby": `${r} ${c}`, children: [
+        /* @__PURE__ */ e("th", { id: r, scope: "row", children: t }),
+        o ? /* @__PURE__ */ s("td", { ...o.props, "aria-labelledby": `${r} ${c}`, children: [
           /* @__PURE__ */ e("span", { id: c, className: "gi-sr-only", children: y("summaryList.col.value", { defaultValue: "Value" }) }),
           o.props.children
         ] }) : null,
-        m.length > 0 ? /* @__PURE__ */ e("td", { "aria-labelledby": `${r} ${d}`, children: /* @__PURE__ */ e(v, { id: d, children: m.map((t, u) => /* @__PURE__ */ e(
+        m.length > 0 ? /* @__PURE__ */ e("td", { "aria-labelledby": `${r} ${d}`, children: /* @__PURE__ */ e(v, { id: d, children: m.map((a, u) => /* @__PURE__ */ e(
           "span",
           {
-            className: s({ "gi-ml-4": u > 0 }),
-            children: t
+            className: i({ "gi-ml-4": u > 0 }),
+            children: a
           },
           `${r}-a${u}`
         )) }) }) : null
       ]
     }
   );
-}, v = ({ id: a, children: l }) => /* @__PURE__ */ i("div", { className: s("gi-summary-list-action"), children: [
-  /* @__PURE__ */ e("span", { id: a, className: "gi-sr-only", children: y("summaryList.col.actions", { defaultValue: "Actions" }) }),
-  l
+}, v = ({ id: l, children: t }) => /* @__PURE__ */ s("div", { className: i("gi-summary-list-action"), children: [
+  /* @__PURE__ */ e("span", { id: l, className: "gi-sr-only", children: y("summaryList.col.actions", { defaultValue: "Actions" }) }),
+  t
 ] });
 f.displayName = "SummaryRow";
 Object.defineProperty(f, "componentType", {

package/dist/summary-list/summary-list-value.js

@@ -1,5 +1,4 @@
 "use client";
-import "@ogcio/design-system-react/browser-check";
 import { jsx as r } from "react/jsx-runtime";
 import { useSummaryListContext as a } from "./summary-list-context.js";
 const e = ({

package/dist/summary-list/summary-list.js

@@ -1,10 +1,9 @@
 "use client";
-import "@ogcio/design-system-react/browser-check";
 import { jsx as r, jsxs as c } from "react/jsx-runtime";
 import { Children as u } from "react";
-import { cn as p } from "../cn.js";
+import { cn as y } from "../cn.js";
 import { getSpecialComponentType as o } from "../utilities.js";
-import { SummaryListProvider as y } from "./summary-list-context.js";
+import { SummaryListProvider as p } from "./summary-list-context.js";
 const l = ({
   children: a,
   className: s,
@@ -16,10 +15,10 @@ const l = ({
   ), m = t.filter(
     (e) => o(e) === "SummaryListRow"
   );
-  return /* @__PURE__ */ r(y, { children: /* @__PURE__ */ r(
+  return /* @__PURE__ */ r(p, { children: /* @__PURE__ */ r(
     "div",
     {
-      className: p("gi-summary-list", {
+      className: y("gi-summary-list", {
         "gi-border gi-border-color-border-system-neutral-muted": n
       }),
       children: /* @__PURE__ */ c("table", { className: s, role: "table", ...d, children: [

package/dist/table/table-data.js

@@ -1,10 +1,9 @@
 "use client";
-import "@ogcio/design-system-react/browser-check";
 import { jsx as n } from "react/jsx-runtime";
-import { useRef as g, useState as u, useEffect as p } from "react";
+import { useRef as g, useState as u, useEffect as f } from "react";
 import { cn as m } from "../cn.js";
 import { IconButton as v } from "../icon-button/icon-button.js";
-function k({
+function S({
   align: t = "left",
   valign: e = "middle",
   size: l,
@@ -21,8 +20,8 @@ function k({
     top: "gi-align-top",
     middle: "gi-align-middle",
     bottom: "gi-align-bottom"
-  }[e], f = l ? `gi-table-td-${l}` : void 0, c = g(null), [b, w] = u(!1);
-  return p(() => {
+  }[e], p = l ? `gi-table-td-${l}` : void 0, c = g(null), [b, w] = u(!1);
+  return f(() => {
     if (!c.current)
       return;
     const x = c.current.querySelectorAll("input, select, button");
@@ -33,7 +32,7 @@ function k({
       ref: c,
       className: m(
         "gi-table-td",
-        f,
+        p,
         r,
         i,
         s
@@ -43,12 +42,12 @@ function k({
     }
   );
 }
-const z = ({ children: t, className: e }) => /* @__PURE__ */ n("div", { className: m("gi-table-data-cell", e), children: t }), T = ({
+const z = ({ children: t, className: e }) => /* @__PURE__ */ n("div", { className: m("gi-table-data-cell", e), children: t }), k = ({
   expanded: t,
   onClick: e
 }) => {
   const [l, s] = u("md"), o = g(null);
-  return p(() => {
+  return f(() => {
     var i;
     const a = (i = o.current) == null ? void 0 : i.closest(".gi-table"), r = a == null ? void 0 : a.getAttribute("data-row-size");
     r && s(r);
@@ -72,14 +71,14 @@ const z = ({ children: t, className: e }) => /* @__PURE__ */ n("div", { classNam
       }
     }
   ) });
-}, _ = ({
+}, T = ({
   children: t,
   className: e,
   ...l
 }) => /* @__PURE__ */ n("td", { className: "gi-table-td", ...l, children: /* @__PURE__ */ n("div", { className: m("gi-table-data-slot-container", e), children: t }) });
 export {
   z as TableCell,
-  k as TableData,
-  _ as TableDataSlot,
-  T as TableExpandIcon
+  S as TableData,
+  T as TableDataSlot,
+  k as TableExpandIcon
 };

package/dist/table/table-header.js

@@ -1,5 +1,4 @@
 "use client";
-import "@ogcio/design-system-react/browser-check";
 import { jsx as o, jsxs as b } from "react/jsx-runtime";
 import { Children as C } from "react";
 import { cn as m } from "../cn.js";
@@ -12,7 +11,7 @@ const j = (e, r) => e ? r ? /* @__PURE__ */ o(
     size: "sm"
   }
 ) : /* @__PURE__ */ o(u, { inline: !0, icon: "swap_vert", size: "sm" }) : null;
-function k({
+function _({
   align: e = "left",
   valign: r = "middle",
   className: h,
@@ -74,5 +73,5 @@ function k({
   );
 }
 export {
-  k as TableHeader
+  _ as TableHeader
 };

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,12 @@
 "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 +20,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
 };