@ogcio/design-system-react 1.13.0 → 1.14.0

package/dist/tabs/scrollable-tab-list.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+type ScrollableTabsProps = {
+    children: ReactNode;
+    tabName: string;
+    appearance?: 'default' | 'dark';
+    className?: string;
+};
+export declare const ScrollableTabs: React.FC<ScrollableTabsProps>;
+export {};

package/dist/tabs/scrollable-tab-list.js

@@ -0,0 +1,84 @@
+import { jsx as d, jsxs as E } from "react/jsx-runtime";
+import { useState as y, useRef as g, Children as l, useEffect as I, isValidElement as p, useLayoutEffect as L } from "react";
+import { cn as k } from "../cn.js";
+import { InternalTabItem as D } from "./tab-item.js";
+const K = ({
+  children: r,
+  tabName: w,
+  className: R = "",
+  appearance: i = "default"
+}) => {
+  const [n, a] = y(0), [f, T] = y({ left: 0, width: 0 }), u = g([]), m = g(null), b = l.count(r);
+  I(() => {
+    for (const t of l.toArray(r))
+      if (p(t)) {
+        if ((t == null ? void 0 : t.props).checked)
+          break;
+        continue;
+      }
+  }, [r]), L(() => {
+    const t = u.current[n], e = m.current;
+    if (!t || !e)
+      return;
+    const o = t.getBoundingClientRect(), s = e.getBoundingClientRect();
+    requestAnimationFrame(() => {
+      T({
+        left: o.left - s.left + e.scrollLeft,
+        width: o.width
+      }), t.scrollIntoView({ behavior: "smooth", inline: "center" });
+    });
+  }, [n]);
+  const A = (t, e) => (o) => {
+    a(t), e && e(o);
+    const s = o.currentTarget.getAttribute("aria-controls");
+    if (s)
+      for (const c of document.querySelectorAll('[role="tabpanel"]'))
+        c instanceof HTMLElement && (c.style.display = c.id === s ? "block" : "none");
+  }, C = (t) => {
+    if (t.key === "ArrowLeft" || t.key === "ArrowRight") {
+      let e = n + (t.key === "ArrowRight" ? 1 : -1);
+      e < 0 && (e = 0), e >= b && (e = b - 1), a(e), t.preventDefault();
+    }
+  }, h = l.map(r, (t, e) => p(t) ? /* @__PURE__ */ d(
+    D,
+    {
+      ...t == null ? void 0 : t.props,
+      appearance: i,
+      index: e,
+      checked: n === e,
+      onTabClick: A(e, t.props.onTabClick),
+      onTabKeyDown: C,
+      ref: (o) => {
+        u.current[e] = o;
+      }
+    }
+  ) : null), S = {
+    left: f.left,
+    width: f.width
+  };
+  return /* @__PURE__ */ E(
+    "div",
+    {
+      id: w,
+      ref: m,
+      role: "tablist",
+      className: k("gi-tab-list ", R),
+      children: [
+        h,
+        /* @__PURE__ */ d(
+          "span",
+          {
+            className: k("gi-tab-indicator", {
+              "gi-bg-color-border-system-neutral-interactive-default": i === "dark",
+              "gi-bg-color-border-tone-primary-accent-selected": i === "default"
+            }),
+            style: S
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  K as ScrollableTabs
+};

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

@@ -1,17 +1,11 @@
-import { default as React, FC } from 'react';
-export type TabItemProps = {
-    value: string;
-    children: React.ReactNode;
-    href?: string;
-    checked?: boolean;
-    ariaLabel?: string;
-    ariaLabelledby?: string;
-    onTabClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-};
-export type InternalTabItemProps = TabItemProps & {
-    onTabClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+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;
     index: number;
-};
-export declare const TabItem: FC<TabItemProps>;
-export declare const InternalTabItem: FC<InternalTabItemProps>;
+    appearance?: "default" | "dark";
+    size?: "md" | "sm";
+    stretch?: boolean;
+    labelAlignment?: "center" | "end" | "start";
+} & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/tabs/tab-item.js

@@ -1,42 +1,89 @@
 "use client";
-import { jsx as r } from "react/jsx-runtime";
-import { useRef as f, useEffect as b } from "react";
-import { slugify as p } from "../utilities.js";
-const g = () => null, N = ({
-  value: m,
-  href: s,
-  checked: e = !1,
-  children: i,
-  onTabClick: l,
-  onTabKeyDown: n
-}) => {
-  const o = p(m), a = f(null), c = f(!1);
-  return b(() => {
-    var t;
-    e && !c.current && ((t = a.current) == null || t.click());
-  }, [e]), /* @__PURE__ */ r(
-    "button",
-    {
-      ref: a,
-      id: `tab-${o}`,
-      role: "tab",
-      "aria-roledescription": "tab",
-      "aria-selected": e ? "true" : "false",
-      "aria-controls": `tab-panel-${o}`,
-      className: `gi-tab-item ${e ? "gi-tab-item-checked" : ""}`,
-      onClick: (t) => {
-        var u;
-        c.current = !0, l && l(t), (u = a.current) == null || u.blur();
-      },
-      onKeyDown: (t) => {
-        n && n(t);
-      },
-      children: s ? /* @__PURE__ */ r("a", { href: s, className: "gi-decoration-xs", children: i }) : /* @__PURE__ */ r("span", { className: "gi-decoration-xs", children: i })
+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({
+  base: "gi-tab-item",
+  variants: {
+    size: {
+      md: "gi-text-md gi-py-4",
+      sm: "gi-text-sm gi-py-2"
+    },
+    checked: {
+      true: "gi-tab-item-checked"
+    },
+    stretch: {
+      true: "gi-flex-1"
+    },
+    labelAlignment: {
+      start: "gi-text-start",
+      center: "gi-text-center",
+      end: "gi-text-end"
     }
-  );
-};
-g.displayName = "TabItem";
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}), $ = () => null, w = v(
+  ({
+    value: g,
+    href: s,
+    checked: e = !1,
+    children: n,
+    onTabClick: o,
+    onTabKeyDown: l,
+    size: b = "md",
+    appearance: c = "default",
+    labelAlignment: p = "center",
+    stretch: x,
+    ...y
+  }, r) => {
+    const m = 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,
+      {
+        id: `tab-${m}`,
+        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-${m}`,
+        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 && c === "dark",
+                "gi-bg-color-border-tone-primary-accent-selected": e && c === "default"
+              })
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+w.displayName = "InternalTabItem";
+$.displayName = "TabItem";
 export {
-  N as InternalTabItem,
-  g as TabItem
+  w as InternalTabItem,
+  $ as TabItem
 };

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

@@ -1,5 +1,2 @@
-import { ReactNode } from 'react';
-export declare const TabList: ({ children, tabName, }: {
-    tabName?: string;
-    children: ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
+import { TabListProps } from './types.js';
+export declare const TabList: ({ children, tabName, appearance, size, ariaLabelledBy, stretch, padding, labelAlignment, }: TabListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/tabs/tab-list.js

@@ -1,62 +1,96 @@
 "use client";
-import { jsx as b } from "react/jsx-runtime";
-import { useState as m, Children as s, useEffect as w, isValidElement as u } from "react";
-import { InternalTabItem as C } from "./tab-item.js";
-const q = ({
-  children: r,
-  tabName: f
+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";
+const j = ({
+  children: c,
+  tabName: b,
+  appearance: C,
+  size: m,
+  ariaLabelledBy: I,
+  stretch: p,
+  padding: f = !0,
+  labelAlignment: w
 }) => {
-  const [c, o] = m(null), n = s.count(r);
-  w(() => {
-    let e = !1, a = 0;
-    s.forEach(r, (t, l) => {
-      u(t) && "checked" in t.props && t.props.checked === !0 && (a = l, e = !0);
-    }), o(e ? a : 0);
+  const [d, l] = S(null), y = s.count(c);
+  $(() => {
+    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);
   }, []);
-  const p = (e, a) => (t) => {
-    o(e);
-    const d = [
-      ...document.querySelector(`#${f}`).querySelectorAll("[role=tabpanel]")
+  const k = (t, r) => (e) => {
+    l(t);
+    const T = [
+      ...document.querySelector(`#${b}`).querySelectorAll("[role=tabpanel]")
     ];
-    for (const y of d)
-      y.style.display = "none";
-    const i = t.currentTarget.getAttribute("aria-controls");
-    if (!i)
+    for (const h of T)
+      h.style.display = "none";
+    const n = e.currentTarget.getAttribute("aria-controls");
+    if (!n)
       return;
-    const h = document.querySelector(
-      `#${i}`
+    const u = document.querySelector(
+      `#${n}`
     );
-    h.style.display = "block", a && a(t);
-  }, T = (e) => {
-    let a = !1;
-    switch (e.key) {
-      case "ArrowLeft": {
-        let t = (c ?? 0) - 1;
-        t < 0 && (t = 0), o(t), a = !0;
-        break;
-      }
-      case "ArrowRight": {
-        let t = (c ?? 0) + 1;
-        t >= n && (t = n - 1), o(t), a = !0;
-        break;
-      }
-    }
-    a && (e.stopPropagation(), e.preventDefault());
-  }, k = s.map(r, (e, a) => {
-    var t;
-    return u(e) ? /* @__PURE__ */ b(
-      C,
+    u.style.display = "block", r && r(e);
+  }, x = (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)
+      return;
+    l(o);
+    const u = {
+      currentTarget: {
+        getAttribute: (a) => {
+          var i;
+          return a === "aria-controls" ? `tab-panel-${(i = n == null ? void 0 : n.props) == null ? void 0 : i.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) => {
+    var e;
+    return A(t) ? /* @__PURE__ */ g(
+      D,
       {
-        ...e.props,
-        index: a,
-        checked: c === a,
-        onTabKeyDown: T,
-        onTabClick: p(a, (t = e == null ? void 0 : e.props) == null ? void 0 : t.onTabClick)
+        ...t.props,
+        appearance: C,
+        stretch: p,
+        labelAlignment: w,
+        size: m,
+        index: r,
+        checked: d === r,
+        onTabKeyDown: x,
+        onTabClick: k(r, (e = t == null ? void 0 : t.props) == null ? void 0 : e.onTabClick)
       }
     ) : null;
   });
-  return /* @__PURE__ */ b("div", { role: "tablist", className: "gi--mb-[1px]", children: k });
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      role: "tablist",
+      "aria-orientation": "horizontal",
+      className: q("gi-tab-list", {
+        "gi-tab-list-stretch": p,
+        "gi-gap-4": f,
+        "gi-gap-0": !f
+      }),
+      "aria-labelledby": I,
+      id: `${b}-list`,
+      children: E
+    }
+  );
 };
 export {
-  q as TabList
+  j as TabList
 };

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

@@ -1,7 +1,2 @@
-import { default as React } from 'react';
-export declare function TabPanel({ value, children, }: {
-    value: string;
-    ariaLabel?: string;
-    ariaLabelledby?: string;
-    children: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+import { TabPanelProps } from './types.js';
+export declare function TabPanel({ value, children }: TabPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/tabs/tab-panel.js

@@ -1,15 +1,12 @@
 import { jsx as t } from "react/jsx-runtime";
 import { slugify as n } from "../utilities.js";
-function i({
-  value: e,
-  children: l
-}) {
+function i({ value: e, children: l }) {
   const a = n(e);
   return /* @__PURE__ */ t(
     "div",
     {
       role: "tabpanel",
-      "aria-labelledby": `tab-${a}`,
+      "aria-labelledby": `tab-panel-${a}`,
       id: `tab-panel-${a}`,
       tabIndex: 0,
       className: "gi-tab-panel",

package/dist/tabs/tabs.d.ts

@@ -1,7 +1,2 @@
-export type TabsProps = {
-    id?: string;
-    ariaLabelledBy: string;
-    dataTestid?: string;
-    children: React.ReactNode;
-};
-export declare function Tabs({ id, ariaLabelledBy, dataTestid, children, }: TabsProps): import("react/jsx-runtime").JSX.Element;
+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;

package/dist/tabs/tabs.js

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

package/dist/tabs/types.d.ts

@@ -0,0 +1,64 @@
+import { ReactNode } from 'react';
+type TabAppearanceType = 'default' | 'dark';
+type TabLabelAlignmentType = 'start' | 'end' | 'center';
+export type TabsProps = {
+    /** ID of the tabs container */
+    id?: string;
+    /** ID of the element that labels the tabs (required for accessibility) */
+    ariaLabelledBy: string;
+    /** Test ID for the tabs container */
+    dataTestid?: string;
+    /** Visual appearance of the tabs. */
+    appearance?: TabAppearanceType;
+    /** Size of the tabs. Default: md */
+    size?: 'sm' | 'md';
+    /** if true all the tabs will space equally covering full available width. Default: false */
+    stretch?: boolean;
+    /** if true all the tabs will space equally covering full available width. Default: true */
+    padding?: boolean;
+    /** Property to set the label alignment. Default: start */
+    labelAlignment?: TabLabelAlignmentType;
+    /** TabList, TabItem, and TabPanel components */
+    children: React.ReactNode;
+};
+export type TabItemProps = {
+    /** Optional href to render the tab as a link */
+    href?: string;
+    /** Whether the tab is currently selected */
+    checked?: boolean;
+    /** Accessible label for the tab */
+    ariaLabel?: string;
+    /** ID of the element that labels the tab */
+    ariaLabelledby?: string;
+    /** Unique identifier for the tab */
+    value: string;
+    /** Tab label text */
+    children: string;
+    /** Optional click event handler for the tab */
+    onTabClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+};
+export type TabPanelProps = {
+    /** The value used to associate the panel with its corresponding tab */
+    value: string;
+    /** Content to be rendered inside the tab panel */
+    children: React.ReactNode;
+};
+export type TabListProps = {
+    tabName?: string;
+    appearance?: TabAppearanceType;
+    size?: 'sm' | 'md';
+    ariaLabelledBy?: string;
+    stretch?: boolean;
+    padding?: boolean;
+    children: ReactNode;
+    labelAlignment?: TabLabelAlignmentType;
+};
+export type InternalTabItemProps = TabItemProps & {
+    onTabKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+    index: number;
+    appearance?: TabAppearanceType;
+    size?: 'md' | 'sm';
+    stretch?: boolean;
+    labelAlignment?: TabLabelAlignmentType;
+};
+export {};

package/dist/tabs/types.js

@@ -0,0 +1 @@
+

package/dist/textarea/textarea.d.ts

@@ -1,7 +1,6 @@
 import { default as React, TextareaHTMLAttributes } from 'react';
 import { IconId } from '../icon/icon.js';
 export type TextAreaProps = React.DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> & {
-    ref?: React.Ref<HTMLTextAreaElement>;
     rows?: number;
     cols?: number;
     autoComplete?: string;
@@ -10,4 +9,4 @@ export type TextAreaProps = React.DetailedHTMLProps<TextareaHTMLAttributes<HTMLT
     iconStart?: IconId;
     clearButtonEnabled?: boolean;
 };
-export declare const TextArea: React.ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & React.RefAttributes<unknown>>;
+export declare const TextArea: React.ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;