@ogcio/design-system-react 1.23.0 → 1.24.0

package/dist/accordion/accordion-item.d.ts

@@ -1,11 +1,9 @@
-import { default as React } from 'react';
+import { default as React, ComponentPropsWithRef } from 'react';
 export type AccordionItemProps = {
     children: React.ReactNode;
     label: string;
     defaultExpanded?: boolean;
     disabled?: boolean;
-    dataTestid?: string;
-    iconStart?: boolean;
     variant?: 'default' | 'small';
-};
-export declare const AccordionItem: ({ defaultExpanded, children, label, disabled, dataTestid, iconStart, variant, }: AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
+} & ComponentPropsWithRef<'div'>;
+export declare const AccordionItem: ({ defaultExpanded, children, label, disabled, className, variant, ...props }: AccordionItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/accordion/accordion-item.js

@@ -1,8 +1,8 @@
 "use client";
-import { jsxs as d, Fragment as u, jsx as i } from "react/jsx-runtime";
+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 { cn as r } from "../cn.js";
 import { Icon as w } from "../icon/icon.js";
 const I = h({
   variants: {
@@ -11,41 +11,46 @@ const I = h({
       small: "gi-py-2 gi-px-2 gi-text-sm gi-font-bold"
     }
   }
-}), N = ({
-  defaultExpanded: c,
-  children: s,
-  label: t,
-  disabled: e,
-  dataTestid: l,
-  iconStart: m,
-  variant: n = "default"
+}), j = ({
+  defaultExpanded: s,
+  children: c,
+  label: i,
+  disabled: n,
+  className: l,
+  variant: e = "default",
+  ...m
 }) => {
-  const [o, a] = y(c), g = b(null), p = `${t}-button`, f = `${t}-panel`;
-  return /* @__PURE__ */ d(u, { children: [
-    /* @__PURE__ */ i(
+  const [o, d] = y(s), g = b(null), p = `${i}-button`, f = `${i}-panel`;
+  return /* @__PURE__ */ r(u, { children: [
+    /* @__PURE__ */ a(
       "div",
       {
+        ...m,
         ref: g,
-        "data-testid": l,
-        "data-disabled": !!e,
-        "data-icon-start": !!m,
-        onClick: () => !e && a(!o),
+        "data-disabled": !!n,
+        onClick: () => !n && d(!o),
         onKeyDown: (x) => {
-          x.key === "Enter" && !e && a(!o);
+          x.key === "Enter" && !n && d(!o);
         },
         tabIndex: 0,
-        className: "gi-accordion",
-        children: /* @__PURE__ */ d(
+        className: t("gi-accordion", l),
+        children: /* @__PURE__ */ r(
           "div",
           {
-            className: r("gi-accordion-header", I({ variant: n })),
+            className: t(
+              "gi-accordion-header",
+              I({ variant: e })
+            ),
             children: [
-              t,
-              " ",
-              /* @__PURE__ */ i(
+              i,
+              /* @__PURE__ */ a(
                 w,
                 {
-                  icon: o ? "keyboard_arrow_up" : "keyboard_arrow_down"
+                  icon: o ? "keyboard_arrow_up" : "keyboard_arrow_down",
+                  size: "md",
+                  className: t({
+                    "gi-pt-[1.5px]": e === "default"
+                  })
                 }
               )
             ]
@@ -53,23 +58,23 @@ const I = h({
         )
       }
     ),
-    /* @__PURE__ */ i(
+    /* @__PURE__ */ a(
       "div",
       {
         id: f,
         role: "region",
         "aria-labelledby": p,
-        className: r("gi-px-2 gi-pb-4 gi-pt-2 gi-font-normal", {
+        className: t("gi-px-2 gi-pb-4 gi-pt-2 gi-font-normal", {
           "gi-block": o,
           "gi-hidden": !o,
-          "gi-text-md": n === "default",
-          "gi-text-sm": n === "small"
+          "gi-text-md": e === "default",
+          "gi-text-sm": e === "small"
         }),
-        children: s
+        children: c
       }
     )
   ] });
 };
 export {
-  N as AccordionItem
+  j as AccordionItem
 };

package/dist/accordion/accordion.d.ts

@@ -1,10 +1,8 @@
-import { ReactElement } from 'react';
+import { ComponentPropsWithRef, ReactElement } from 'react';
 import { AccordionItem } from './accordion-item.js';
 export type AccordionProps = {
     children: ReactElement<typeof AccordionItem>[];
-    iconStart?: boolean;
-    dataTestid?: string;
     className?: string;
     variant?: 'default' | 'small';
-};
-export declare const Accordion: ({ children, iconStart, dataTestid, className, variant, }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+} & ComponentPropsWithRef<'div'>;
+export declare const Accordion: ({ children, className, variant, ...props }: AccordionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/accordion/accordion.js

@@ -1,39 +1,28 @@
 import { jsx as o } from "react/jsx-runtime";
-import { Children as i, isValidElement as c, cloneElement as p } from "react";
-import { cn as n } from "../cn.js";
-const g = ({
+import { Children as t, isValidElement as c, cloneElement as d } from "react";
+import { cn as i } from "../cn.js";
+const b = ({
   children: r,
-  iconStart: t,
-  dataTestid: l,
-  className: a,
-  variant: s = "default"
-}) => /* @__PURE__ */ o(
-  "div",
-  {
-    "data-testid": l,
-    "data-icon-start": t,
-    role: "presentation",
-    className: n("gi-w-full", a),
-    children: i.map(r, (e, d) => {
-      const m = d === i.count(r) - 1;
-      return c(e) ? /* @__PURE__ */ o(
-        "div",
+  className: n,
+  variant: l = "default",
+  ...m
+}) => /* @__PURE__ */ o("div", { ...m, role: "presentation", className: i("gi-w-full", n), children: t.map(r, (e, s) => {
+  const a = s === t.count(r) - 1;
+  return c(e) ? /* @__PURE__ */ o(
+    "div",
+    {
+      className: i("gi-border-t", {
+        "gi-border-b": a
+      }),
+      children: d(
+        e,
         {
-          className: n("gi-border-t", {
-            "gi-border-b": m
-          }),
-          children: p(
-            e,
-            {
-              variant: s,
-              iconStart: t
-            }
-          )
+          variant: l
         }
-      ) : null;
-    })
-  }
-);
+      )
+    }
+  ) : null;
+}) });
 export {
-  g as Accordion
+  b as Accordion
 };

package/dist/clsx-OuTLNxxd.js

@@ -0,0 +1,16 @@
+function a(r) {
+  var f, n, t = "";
+  if (typeof r == "string" || typeof r == "number") t += r;
+  else if (typeof r == "object") if (Array.isArray(r)) {
+    var o = r.length;
+    for (f = 0; f < o; f++) r[f] && (n = a(r[f])) && (t && (t += " "), t += n);
+  } else for (n in r) r[n] && (t && (t += " "), t += n);
+  return t;
+}
+function i() {
+  for (var r, f, n = 0, t = "", o = arguments.length; n < o; n++) (r = arguments[n]) && (f = a(r)) && (t && (t += " "), t += f);
+  return t;
+}
+export {
+  i as c
+};

package/dist/cn.js

@@ -1,19 +1,7 @@
-function i(r) {
-  var f, n, t = "";
-  if (typeof r == "string" || typeof r == "number") t += r;
-  else if (typeof r == "object") if (Array.isArray(r)) {
-    var o = r.length;
-    for (f = 0; f < o; f++) r[f] && (n = i(r[f])) && (t && (t += " "), t += n);
-  } else for (n in r) r[n] && (t && (t += " "), t += n);
-  return t;
-}
-function u() {
-  for (var r, f, n = 0, t = "", o = arguments.length; n < o; n++) (r = arguments[n]) && (f = i(r)) && (t && (t += " "), t += f);
-  return t;
-}
-function a(...r) {
-  return u(r);
+import { c } from "./clsx-OuTLNxxd.js";
+function o(...r) {
+  return c(r);
 }
 export {
-  a as cn
+  o as cn
 };

package/dist/icon/icon.d.ts

@@ -1,7 +1,8 @@
+import { ComponentPropsWithoutRef, MouseEventHandler } from 'react';
 import { iconIds } from './icons.js';
 export type IconId = (typeof iconIds)[number];
 export type IconSize = 'sm' | 'md' | 'lg' | 'xl';
-export type IconProps = React.HTMLAttributes<HTMLSpanElement> & {
+export type IconProps = {
     icon: IconId;
     size?: IconSize;
     filled?: boolean;
@@ -10,6 +11,17 @@ export type IconProps = React.HTMLAttributes<HTMLSpanElement> & {
     ariaLabel?: string;
     inline?: boolean;
     className?: string;
-    onClick?: React.MouseEventHandler<HTMLSpanElement>;
-};
-export declare function Icon({ icon, size, filled, disabled, ariaHidden, ariaLabel, inline, className, onClick, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+    onClick?: MouseEventHandler<HTMLSpanElement>;
+} & Omit<ComponentPropsWithoutRef<'span'>, 'children'>;
+export declare const Icon: import('react').ForwardRefExoticComponent<{
+    icon: IconId;
+    size?: IconSize;
+    filled?: boolean;
+    disabled?: boolean;
+    ariaHidden?: boolean;
+    ariaLabel?: string;
+    inline?: boolean;
+    className?: string;
+    onClick?: MouseEventHandler<HTMLSpanElement>;
+} & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "children"> & import('react').RefAttributes<HTMLSpanElement>>;
+export default Icon;

package/dist/icon/icon.js

@@ -1,173 +1,86 @@
 "use client";
-import { jsx as e } from "react/jsx-runtime";
-import { cn as i } from "../cn.js";
-import b from "./svgs/bluesky.js";
-import u from "./svgs/facebook.js";
-import y from "./svgs/instagram.js";
-import z from "./svgs/linkedin.js";
-import N from "./svgs/placeholder.js";
-import h from "./svgs/threads.js";
-import x from "./svgs/tiktok.js";
-import _ from "./svgs/x.js";
-import n from "./svgs/youtube.js";
-function j({
-  icon: t,
-  size: g = "md",
-  filled: c,
-  disabled: s,
-  ariaHidden: l,
-  ariaLabel: a,
-  inline: r = !1,
-  className: k = "",
-  onClick: m,
-  ...f
-}) {
-  let o = "24px";
-  switch (g) {
-    case "sm": {
-      o = "16px";
-      break;
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import { cn as m } from "../cn.js";
+import _ from "./svgs/bluesky.js";
+import x from "./svgs/facebook.js";
+import h from "./svgs/instagram.js";
+import I from "./svgs/linkedin.js";
+import S from "./svgs/placeholder.js";
+import R from "./svgs/threads.js";
+import z from "./svgs/tiktok.js";
+import T from "./svgs/x.js";
+import v from "./svgs/youtube.js";
+const d = {
+  sm: "16px",
+  md: "24px",
+  lg: "32px",
+  xl: "48px"
+}, w = {
+  social_bluesky: { Component: _, disabledClass: "gi-stroke-gray-700" },
+  social_facebook: { Component: x, disabledClass: "gi-stroke-gray-700" },
+  social_instagram: {
+    Component: h,
+    disabledClass: "gi-stroke-gray-700"
+  },
+  social_linkedin: { Component: I, disabledClass: "gi-stroke-gray-700" },
+  social_threads: { Component: R, disabledClass: "gi-stroke-gray-700" },
+  social_tiktok: { Component: z, disabledClass: "gi-stroke-gray-700" },
+  social_x: { Component: T, disabledClass: "gi-stroke-gray-700" },
+  social_youtube: { Component: v, disabledClass: "gi-stroke-gray-700" },
+  placeholder: { Component: S, disabledClass: "gi-fill-gray-700" }
+}, M = u(
+  ({
+    icon: i,
+    size: g = "md",
+    filled: c,
+    disabled: e,
+    ariaHidden: k,
+    ariaLabel: a,
+    inline: o,
+    className: r,
+    onClick: C,
+    ...s
+  }, p) => {
+    const t = d[g] ?? d.md, l = w[String(i)];
+    if (l) {
+      const { Component: f, disabledClass: b } = l, y = m(
+        { "gi-block": !o, "gi-inline-block": o },
+        e && b,
+        r
+      );
+      return /* @__PURE__ */ n(f, { size: t, className: y });
     }
-    case "lg": {
-      o = "32px";
-      break;
-    }
-    case "xl": {
-      o = "48px";
-      break;
-    }
-  }
-  if (t === "social_bluesky")
-    return /* @__PURE__ */ e(
-      b,
-      {
-        size: o,
-        className: i({
-          "gi-block": !r,
-          "gi-inline-block": r,
-          "gi-stroke-gray-700": s
-        })
-      }
-    );
-  if (t === "social_facebook")
-    return /* @__PURE__ */ e(
-      u,
-      {
-        size: o,
-        className: i({
-          "gi-block": !r,
-          "gi-inline-block": r,
-          "gi-stroke-gray-700": s
-        })
-      }
-    );
-  if (t === "social_instagram")
-    return /* @__PURE__ */ e(
-      y,
-      {
-        size: o,
-        className: i({
-          "gi-block": !r,
-          "gi-inline-block": r,
-          "gi-stroke-gray-700": s
-        })
-      }
-    );
-  if (t === "social_linkedin")
-    return /* @__PURE__ */ e(
-      z,
-      {
-        size: o,
-        className: i({
-          "gi-block": !r,
-          "gi-inline-block": r,
-          "gi-stroke-gray-700": s
-        })
-      }
-    );
-  if (t === "social_threads")
-    return /* @__PURE__ */ e(
-      h,
+    return /* @__PURE__ */ n(
+      "span",
       {
-        size: o,
-        className: i({
-          "gi-block": !r,
-          "gi-inline-block": r,
-          "gi-stroke-gray-700": s
-        })
+        "aria-hidden": k,
+        "aria-label": a,
+        "data-testid": "govie-icon",
+        ...s,
+        ref: p,
+        onClick: C,
+        role: a ? "img" : "presentation",
+        className: m(
+          {
+            "gi-block": !o,
+            "gi-inline-block": o,
+            "gi-text-gray-700": e
+          },
+          "material-symbols-outlined",
+          r
+        ),
+        style: {
+          fontSize: t,
+          fontVariationSettings: `'FILL' ${c ? 1 : 0}, 'wght' 400, 'GRAD' 0, 'opsz' ${t}`,
+          ...s == null ? void 0 : s.style
+        },
+        children: i
       }
     );
-  if (t === "social_tiktok")
-    return /* @__PURE__ */ e(
-      x,
-      {
-        size: o,
-        className: i({
-          "gi-block": !r,
-          "gi-inline-block": r,
-          "gi-stroke-gray-700": s
-        })
-      }
-    );
-  if (t === "social_x")
-    return /* @__PURE__ */ e(
-      _,
-      {
-        size: o,
-        className: i({
-          "gi-block": !r,
-          "gi-inline-block": r,
-          "gi-stroke-gray-700": s
-        })
-      }
-    );
-  if (t === "social_youtube")
-    return /* @__PURE__ */ e(
-      n,
-      {
-        size: o,
-        className: i({
-          "gi-block": !r,
-          "gi-inline-block": r,
-          "gi-stroke-gray-700": s
-        })
-      }
-    );
-  if (t === "placeholder")
-    return /* @__PURE__ */ e(
-      N,
-      {
-        size: o,
-        className: i({
-          "gi-block": !r,
-          "gi-inline-block": r,
-          "gi-fill-gray-700": s
-        })
-      }
-    );
-  const p = c ? "'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' " + o : "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' " + o;
-  return /* @__PURE__ */ e(
-    "span",
-    {
-      "data-testid": "govie-icon",
-      ...f,
-      onClick: m,
-      "aria-hidden": l || void 0,
-      "aria-label": a,
-      role: a ? "img" : "presentation",
-      className: i(
-        { "gi-block": !r, "gi-text-gray-700": s },
-        "material-symbols-outlined",
-        k
-      ),
-      style: {
-        fontSize: o,
-        fontVariationSettings: p
-      },
-      children: t
-    }
-  );
-}
+  }
+);
 export {
-  j as Icon
+  M as Icon,
+  M as default
 };

package/dist/index.d.ts

@@ -102,7 +102,7 @@ export { TabPanel } from './tabs/tab-panel.js';
 export { Tabs } from './tabs/tabs.js';
 export type { TabItemProps, TabsProps, TabPanelProps } from './tabs/types.js';
 export * from './data-table/index.js';
-export { Tag, TagTypeEnum, type TagProps, type TagType } from './tag/tag.js';
+export { Tag, TagTypeEnum, type TagProps, type TagType, type TagSize, } from './tag/tag.js';
 export { TextInput, type TextInputProps } from './text-input/text-input.js';
 export { TextArea, type TextAreaProps } from './textarea/textarea.js';
 export { toaster, ToastProvider } from './toast/toast.js';