@ogcio/design-system-react 1.32.0 → 1.33.0

package/dist/tabs/tab-item.js

@@ -1,112 +1,94 @@
 "use client";
-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: {
-      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-justify-start",
-      center: "gi-justify-center",
-      end: "gi-justify-end"
-    }
-  },
-  defaultVariants: {
-    size: "md"
-  }
-}), F = () => null, R = k((b, n) => {
+import { jsxs as j, Fragment as A, jsx as a } from "react/jsx-runtime";
+import { forwardRef as $ } from "react";
+import { cn as g } from "../cn.js";
+import { Icon as z } from "../icon/icon.js";
+import { Button as B } from "../primitives/button.js";
+import { slugify as F } from "../utilities.js";
+import { tabItemVariants as R } from "./variants.js";
+const S = () => null, V = $((u, n) => {
   const {
     value: h,
-    href: c,
-    checked: r = !1,
-    children: x,
+    href: s,
+    checked: i = !1,
+    children: I,
     onTabClick: t,
-    onTabKeyDown: i,
-    size: y = "md",
-    appearance: l = "default",
-    labelAlignment: I = "center",
-    stretch: N,
-    icon: m,
-    className: o,
-    ...d
-  } = b, g = $(h), f = {
+    onTabKeyDown: r,
+    size: b = "md",
+    appearance: x = "default",
+    labelAlignment: N = "center",
+    stretch: v,
+    icon: l,
+    className: m,
+    ...o
+  } = u, c = F(h), d = {
     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,
+    "aria-selected": i,
+    "aria-controls": `tab-panel-${c}`,
+    id: `tab-${c}`,
+    tabIndex: i ? 0 : -1
+  }, { base: f, border: y } = R({
+    size: b,
+    checked: i,
+    stretch: v,
+    labelAlignment: N,
+    appearance: x
+  }), p = /* @__PURE__ */ j(A, { children: [
+    l && /* @__PURE__ */ a(z, { icon: l }),
+    I,
     /* @__PURE__ */ a(
       "div",
       {
-        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"
+        className: y(),
+        "aria-hidden": "true",
+        "data-testid": "tab-item-border"
       }
     )
   ] });
-  return c ? /* @__PURE__ */ a(
+  return s ? /* @__PURE__ */ a(
     "a",
     {
-      href: c,
-      ...f,
+      href: s,
       ...d,
-      className: s(
-        u,
+      ...o,
+      className: g(
+        f(),
         "gi-inline-flex gi-items-center gi-gap-2 gi-decoration-xs",
-        o
+        m
       ),
       onClick: (e) => {
         t == null || t(e);
       },
       onKeyDown: (e) => {
-        i == null || i(e);
+        r == null || r(e);
       },
       ref: n,
       children: p
     }
   ) : /* @__PURE__ */ a(
-    V,
+    B,
     {
-      ...f,
       ...d,
+      ...o,
       ref: n,
-      className: s(
-        u,
+      className: g(
+        f(),
         "gi-inline-flex gi-items-center gi-gap-2",
-        o
+        m
       ),
       onClick: (e) => {
         t == null || t(e);
       },
       onKeyDown: (e) => {
-        i == null || i(e);
+        r == null || r(e);
       },
       children: p
     }
   );
 });
-R.displayName = "InternalTabItem";
-F.displayName = "TabItem";
+V.displayName = "InternalTabItem";
+S.displayName = "TabItem";
 export {
-  R as InternalTabItem,
-  F as TabItem
+  V as InternalTabItem,
+  S as TabItem
 };

package/dist/tabs/variants.d.ts

@@ -0,0 +1,269 @@
+export declare const tabItemVariants: import('tailwind-variants').TVReturnType<{
+    size: {
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+    checked: {
+        false: {
+            base: string;
+        };
+        true: {
+            base: string[];
+        };
+    };
+    stretch: {
+        true: {
+            base: string;
+        };
+    };
+    labelAlignment: {
+        start: {
+            base: string;
+        };
+        center: {
+            base: string;
+        };
+        end: {
+            base: string;
+        };
+    };
+    appearance: {
+        default: {};
+        dark: {};
+    };
+}, {
+    base: string[];
+    border: string[];
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    size: {
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+    checked: {
+        false: {
+            base: string;
+        };
+        true: {
+            base: string[];
+        };
+    };
+    stretch: {
+        true: {
+            base: string;
+        };
+    };
+    labelAlignment: {
+        start: {
+            base: string;
+        };
+        center: {
+            base: string;
+        };
+        end: {
+            base: string;
+        };
+    };
+    appearance: {
+        default: {};
+        dark: {};
+    };
+}, {
+    size: {
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+    checked: {
+        false: {
+            base: string;
+        };
+        true: {
+            base: string[];
+        };
+    };
+    stretch: {
+        true: {
+            base: string;
+        };
+    };
+    labelAlignment: {
+        start: {
+            base: string;
+        };
+        center: {
+            base: string;
+        };
+        end: {
+            base: string;
+        };
+    };
+    appearance: {
+        default: {};
+        dark: {};
+    };
+}>, {
+    size: {
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+    checked: {
+        false: {
+            base: string;
+        };
+        true: {
+            base: string[];
+        };
+    };
+    stretch: {
+        true: {
+            base: string;
+        };
+    };
+    labelAlignment: {
+        start: {
+            base: string;
+        };
+        center: {
+            base: string;
+        };
+        end: {
+            base: string;
+        };
+    };
+    appearance: {
+        default: {};
+        dark: {};
+    };
+}, {
+    base: string[];
+    border: string[];
+}, import('tailwind-variants').TVReturnType<{
+    size: {
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+    checked: {
+        false: {
+            base: string;
+        };
+        true: {
+            base: string[];
+        };
+    };
+    stretch: {
+        true: {
+            base: string;
+        };
+    };
+    labelAlignment: {
+        start: {
+            base: string;
+        };
+        center: {
+            base: string;
+        };
+        end: {
+            base: string;
+        };
+    };
+    appearance: {
+        default: {};
+        dark: {};
+    };
+}, {
+    base: string[];
+    border: string[];
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    size: {
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+    checked: {
+        false: {
+            base: string;
+        };
+        true: {
+            base: string[];
+        };
+    };
+    stretch: {
+        true: {
+            base: string;
+        };
+    };
+    labelAlignment: {
+        start: {
+            base: string;
+        };
+        center: {
+            base: string;
+        };
+        end: {
+            base: string;
+        };
+    };
+    appearance: {
+        default: {};
+        dark: {};
+    };
+}, {
+    size: {
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+    checked: {
+        false: {
+            base: string;
+        };
+        true: {
+            base: string[];
+        };
+    };
+    stretch: {
+        true: {
+            base: string;
+        };
+    };
+    labelAlignment: {
+        start: {
+            base: string;
+        };
+        center: {
+            base: string;
+        };
+        end: {
+            base: string;
+        };
+    };
+    appearance: {
+        default: {};
+        dark: {};
+    };
+}>, unknown, unknown, undefined>>;

package/dist/tabs/variants.js

@@ -0,0 +1,87 @@
+import { c as e } from "../index-CB-zPpNk.js";
+const r = e({
+  slots: {
+    base: [
+      "group",
+      "gi-cursor-pointer gi-relative gi-px-1 gi-leading-6",
+      "gi-flex gi-gap-2",
+      "hover:gi-text-color-icon-system-neutral-interactive-hover hover:gi-bg-color-surface-system-neutral-interactive-hover hover:gi-fill-color-text-system-neutral-interactive-default",
+      "gi-focus-state-outline focus:gi-shadow-[inset_0_0_0_2px] focus:gi-border-none focus:gi-border-transparent focus:gi-bg-color-surface-system-neutral-interactive-hover focus:gi-text-color-text-system-neutral-interactive-default focus:gi-rounded-sm focus:gi-z-1"
+    ],
+    border: [
+      "gi-h-[2px] gi-absolute gi-bottom-0 gi-left-0 gi-w-full",
+      "group-focus:!gi-bg-transparent"
+    ]
+  },
+  variants: {
+    size: {
+      md: {
+        base: "gi-text-md gi-py-4"
+      },
+      sm: {
+        base: "gi-text-sm gi-py-2"
+      }
+    },
+    checked: {
+      false: {
+        base: "gi-text-color-text-system-neutral-interactive-muted gi-fill-color-text-system-neutral-interactive-muted"
+      },
+      true: {
+        base: [
+          "gi-bg-white gi-no-underline gi-font-bold",
+          "gi-text-color-text-system-neutral-interactive-default gi-fill-color-text-system-neutral-interactive-default"
+        ]
+      }
+    },
+    stretch: {
+      true: {
+        base: "gi-flex-1"
+      }
+    },
+    labelAlignment: {
+      start: {
+        base: "gi-justify-start"
+      },
+      center: {
+        base: "gi-justify-center"
+      },
+      end: {
+        base: "gi-justify-end"
+      }
+    },
+    appearance: {
+      default: {},
+      dark: {}
+    }
+  },
+  compoundVariants: [
+    {
+      checked: !0,
+      appearance: "default",
+      class: {
+        border: "gi-bg-color-border-tone-primary-accent-selected"
+      }
+    },
+    {
+      checked: !0,
+      appearance: "dark",
+      class: {
+        border: "gi-bg-color-text-system-neutral-interactive-default"
+      }
+    },
+    {
+      checked: !1,
+      class: {
+        border: "group-hover:gi-bg-color-surface-system-neutral-interactive-hover"
+      }
+    }
+  ],
+  defaultVariants: {
+    size: "md",
+    checked: !1,
+    appearance: "default"
+  }
+});
+export {
+  r as tabItemVariants
+};

package/dist/tooltip/tooltip.js

@@ -1,60 +1,52 @@
 "use client";
-import { jsxs as b, jsx as g } from "react/jsx-runtime";
-import { useState as c, useId as h, useCallback as d, useEffect as v } from "react";
-import { c as y } from "../index-CB-zPpNk.js";
-const T = ["top", "bottom", "left", "right"], E = y({
-  base: "gi-tooltip",
-  variants: {
-    position: {
-      left: "gi-tooltip-left",
-      right: "gi-tooltip-right",
-      top: "gi-tooltip-top",
-      bottom: "gi-tooltip-bottom"
-    }
-  }
-}), F = ({
-  text: o,
+import { jsxs as y, jsx as E } from "react/jsx-runtime";
+import { useState as d, useId as v, useCallback as l, useEffect as k } from "react";
+import { tooltipVariants as w } from "./variants.js";
+const L = ["top", "bottom", "left", "right"], T = ({
+  text: t,
   position: i = "top",
   dataTestid: p,
   children: u
 }) => {
-  const [e, n] = c(!1), [f, a] = c(!1), l = h(), r = () => n(!0), t = d(() => {
+  const [o, n] = d(!1), [f, a] = d(!1), r = v(), c = () => n(!0), e = l(() => {
     n(!1), a(!1);
-  }, []), s = d(
-    (m) => {
-      m.key === "Escape" && t();
+  }, []), s = l(
+    (b) => {
+      b.key === "Escape" && e();
     },
-    [t]
+    [e]
   );
-  return v(() => (document.addEventListener("keydown", s), () => {
+  k(() => (document.addEventListener("keydown", s), () => {
     document.removeEventListener("keydown", s);
-  }), [s]), /* @__PURE__ */ b(
+  }), [s]);
+  const { wrapper: m, tooltip: h } = w({ position: i });
+  return /* @__PURE__ */ y(
     "span",
     {
-      className: "gi-tooltip-wrapper",
-      onMouseEnter: r,
+      className: m(),
+      onMouseEnter: c,
       onMouseLeave: () => {
-        f || t();
+        f || e();
       },
       onFocus: () => {
-        a(!0), r();
+        a(!0), c();
       },
       onBlur: () => {
-        t();
+        e();
       },
-      "aria-describedby": e ? l : void 0,
+      "aria-describedby": o ? r : void 0,
       "data-testid": p,
       children: [
         u,
-        e && /* @__PURE__ */ g(
+        o && /* @__PURE__ */ E(
           "span",
           {
-            id: l,
+            id: r,
             role: "tooltip",
-            className: E({ position: i }),
-            "aria-hidden": !e,
+            className: h(),
+            "aria-hidden": !o,
             "data-testid": `dti-tooltip-content-${i}`,
-            children: o.length > 100 ? o.slice(0, 100) + "..." : o
+            children: t.length > 100 ? t.slice(0, 100) + "..." : t
           }
         )
       ]
@@ -62,6 +54,6 @@ const T = ["top", "bottom", "left", "right"], E = y({
   );
 };
 export {
-  F as Tooltip,
-  T as positionVariants
+  T as Tooltip,
+  L as positionVariants
 };