@ogcio/design-system-react 1.31.1 → 1.33.0

package/dist/index.d.ts

@@ -11,7 +11,7 @@ export { type BreadcrumbLinkProps, type BreadcrumbProps, } from './breadcrumbs/t
 export { ButtonGroup, ButtonGroupItem } from './button-group/button-group.js';
 export * from './button-group/types.js';
 export { Button } from './button/button.js';
-export { type ButtonProps } from './button/types.js';
+export type { ButtonProps } from './button/types';
 export { CardAction, CardContainer, CardDescription, CardHeader, CardMedia, CardSubtitle, CardTag, CardTitle, } from './card/card-next.js';
 export { Card } from './card/card.js';
 export type { CardActionProps, CardContainerProps, CardDescriptionProps, CardHeaderProps, CardMediaProps, CardProps, } from './card/types.js';
@@ -40,7 +40,7 @@ export { HeaderSearch, type HeaderSearchProps, } from './header/components/heade
 export { Header } from './header/header.js';
 export * from './header/header-next/index.js';
 export type { HeaderItem, HeaderProps } from './header/types.js';
-export { Heading, type HeadingProps } from './heading/heading.js';
+export { default as Heading, type Props as HeadingProps } from './Heading.js';
 export type { HintTextProps } from './hint-text/types.js';
 export * from './i18n/config.js';
 export { IconButton, type IconButtonProps } from './icon-button/icon-button.js';

package/dist/index.js

@@ -37,7 +37,7 @@ import { HeaderMenuItemButton as We } from "./header/header-next/components/menu
 import { HeaderMenuItemLink as Ue } from "./header/header-next/components/menu/components/header-menu-item-link.js";
 import { HeaderMenuItemSeparator as qe } from "./header/header-next/components/menu/components/header-menu-item-separator.js";
 import { HeaderMenuItemSlot as Je } from "./header/header-next/components/menu/components/header-menu-item-slot.js";
-import { Heading as Oe } from "./heading/heading.js";
+import { default as Oe } from "./Heading.js";
 import { initI18n as Xe } from "./i18n/config.js";
 import { IconButton as Ze } from "./icon-button/icon-button.js";
 import { Icon as $e } from "./icon/icon.js";

package/dist/input-text/input-text.js

@@ -142,7 +142,7 @@ const H = d(
       icon: r
     },
     "data-testid": t,
-    "aria-label": e || "",
+    "aria-label": e || void 0,
     onClick: a,
     variant: "flat",
     size: "small",

package/dist/input-text/type.d.ts

@@ -4,7 +4,7 @@ export type InputActionButtonProps = {
     icon: IconId;
     onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
     disabled?: boolean;
-    ariaLabel?: string;
+    ariaLabel: string;
     dataTestId?: string;
     ref?: React.Ref<HTMLButtonElement>;
 };

package/dist/label/label.d.ts

@@ -3,52 +3,100 @@ export declare const LabelSize: {
     readonly Medium: "md";
     readonly Large: "lg";
 };
+export declare const Label: import('react').ForwardRefExoticComponent<import('react').LabelHTMLAttributes<HTMLLabelElement> & {
+    text?: string | React.ReactElement;
+    size?: import('./types.js').LabelSizeType;
+} & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLLabelElement>>;
 export declare const styles: import('tailwind-variants').TVReturnType<{
     size: {
-        sm: string;
-        md: string;
-        lg: string;
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
     };
-}, undefined, "gi-label", import('tailwind-variants/dist/config.js').TVConfig<{
+}, {
+    base: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
     size: {
-        sm: string;
-        md: string;
-        lg: string;
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
     };
 }, {
     size: {
-        sm: string;
-        md: string;
-        lg: string;
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
     };
 }>, {
     size: {
-        sm: string;
-        md: string;
-        lg: string;
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
     };
-}, undefined, import('tailwind-variants').TVReturnType<{
+}, {
+    base: string;
+}, import('tailwind-variants').TVReturnType<{
     size: {
-        sm: string;
-        md: string;
-        lg: string;
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
     };
-}, undefined, "gi-label", import('tailwind-variants/dist/config.js').TVConfig<{
+}, {
+    base: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
     size: {
-        sm: string;
-        md: string;
-        lg: string;
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
     };
 }, {
     size: {
-        sm: string;
-        md: string;
-        lg: string;
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
     };
 }>, unknown, unknown, undefined>>;
-export declare const Label: import('react').ForwardRefExoticComponent<import('react').LabelHTMLAttributes<HTMLLabelElement> & {
-    text?: string | React.ReactElement;
-    size?: import('./types.js').LabelSizeType;
-} & {
-    children?: import('react').ReactNode | undefined;
-} & import('react').RefAttributes<HTMLLabelElement>>;

package/dist/label/label.js

@@ -1,28 +1,43 @@
-import { jsx as i } from "react/jsx-runtime";
-import { forwardRef as r } from "react";
-import { c as o } from "../index-CB-zPpNk.js";
-const d = {
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as o } from "react";
+import { c as d } from "../index-CB-zPpNk.js";
+const b = {
   Small: "sm",
   Medium: "md",
   Large: "lg"
-}, g = o({
-  base: "gi-label",
+}, c = o(
+  ({ text: e, size: t = b.Medium, className: s, children: a, ...l }, m) => {
+    const { base: i } = g({ size: t });
+    return /* @__PURE__ */ r(
+      "label",
+      {
+        className: i({ className: s }),
+        "data-testid": "label",
+        ref: m,
+        ...l,
+        children: a ?? e
+      }
+    );
+  }
+);
+c.displayName = "Label";
+const g = d({
+  slots: {
+    base: "gi-block gi-text-color-text-system-neutral-default"
+  },
   variants: {
     size: {
-      sm: "gi-text-sm",
-      md: "gi-text-md",
-      lg: "gi-text-lg"
+      sm: { base: "gi-text-sm" },
+      md: { base: "gi-text-md" },
+      lg: { base: "gi-text-lg" }
     }
   },
   defaultVariants: {
     size: "md"
   }
-}), c = r(
-  ({ text: e, size: a = d.Medium, className: m, children: s, ...t }, l) => /* @__PURE__ */ i("label", { className: g({ size: a, className: m }), ref: l, ...t, children: s ?? e })
-);
-c.displayName = "Label";
+});
 export {
   c as Label,
-  d as LabelSize,
+  b as LabelSize,
   g as styles
 };

package/dist/modal/modal.content.js

@@ -1,5 +1,5 @@
 import { jsxs as i, jsx as t, Fragment as r } from "react/jsx-runtime";
-import { Button as o } from "../button/button.js";
+import o from "../atoms/Button.js";
 import { ModalTitle as e, ModalBody as a, ModalFooter as n } from "./modal.js";
 const c = /* @__PURE__ */ i(r, { children: [
   /* @__PURE__ */ t(e, { children: "Modal Title" }),

package/dist/modal/modal.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { HeadingProps } from '../heading/heading.js';
+import { Props as HeadingProps } from '../Heading.js';
 import { ModalFooterProps, ModalProps, ModalWrapperProps } from './types.js';
 export declare const ModalWrapper: ({ position, size, closeOnClick, closeOnOverlayClick, isOpen, onClose, closeButtonLabel, className, children, closeButtonSize, closeOnEscape, dataTestId, ...props }: ModalWrapperProps) => import("react/jsx-runtime").JSX.Element;
 export declare const ModalTitle: {

package/dist/modal/modal.js

@@ -1,16 +1,16 @@
 "use client";
-import { jsx as l, jsxs as y, Fragment as j } from "react/jsx-runtime";
-import { isValidElement as K, cloneElement as T, useState as A, useRef as U, useMemo as W, Children as _, useId as z, useEffect as C } from "react";
+import { jsx as l, jsxs as y, Fragment as P } from "react/jsx-runtime";
+import { isValidElement as K, cloneElement as T, useState as j, useRef as U, useMemo as W, Children as _, useId as z, useEffect as C } from "react";
 import { createPortal as G } from "react-dom";
-import { Button as E } from "../button/button.js";
+import J from "../Heading.js";
+import A from "../atoms/Button.js";
 import { cn as u } from "../cn.js";
-import { Heading as J } from "../heading/heading.js";
 import { useAriaHider as Q } from "../hooks/use-aria-hider.js";
 import { useFocusTrap as X } from "../hooks/use-focus-trap.js";
 import { Icon as Y } from "../icon/icon.js";
 import { IconButton as Z } from "../icon-button/icon-button.js";
 import { splitAriaProps as O, isSpecialComponent as ee, getSpecialComponentType as te } from "../utils/utilities.js";
-const I = {
+const B = {
   flat: 0,
   secondary: 1,
   primary: 2
@@ -21,16 +21,16 @@ const I = {
 }) => {
   let n = "sm";
   return (o === "large" || o === "medium") && (n = "md"), e ? /* @__PURE__ */ l(
-    E,
+    A,
     {
       onClick: t.onClick,
       variant: "flat",
       size: o,
       appearance: "dark",
       className: "gi-modal-icon",
-      "aria-label": e,
+      ariaLabel: e,
       ...t,
-      children: /* @__PURE__ */ y(j, { children: [
+      children: /* @__PURE__ */ y(P, { children: [
         e,
         /* @__PURE__ */ l(Y, { icon: "close", size: n })
       ] })
@@ -72,25 +72,25 @@ const I = {
   closeOnOverlayClick: n = !0,
   isOpen: a,
   onClose: d,
-  closeButtonLabel: h,
+  closeButtonLabel: v,
   className: s,
   children: f,
   closeButtonSize: r,
   closeOnEscape: i,
   dataTestId: c,
-  ...v
+  ...h
 }) => {
-  var w;
+  var I;
   const M = U(null);
   Q(M, a);
-  const [D, R] = W(
-    () => O(v),
-    [v]
+  const [D, L] = W(
+    () => O(h),
+    [h]
   ), F = _.toArray(f), N = (m) => F.find(
     (p) => te(p) === m
-  ), g = N("ModalTitle"), b = N("ModalFooter") || N("DrawerFooter"), S = z(), L = ((w = g == null ? void 0 : g.props) == null ? void 0 : w.id) || `gi-modal-title-${S}`, H = g ? T(g, {
+  ), g = N("ModalTitle"), b = N("ModalFooter") || N("DrawerFooter"), R = z(), S = ((I = g == null ? void 0 : g.props) == null ? void 0 : I.id) || `gi-modal-title-${R}`, H = g ? T(g, {
     as: o === "sm" ? "h5" : "h4",
-    id: L
+    id: S
   }) : null, $ = b ? T(b, {
     dataModalSize: o
   }) : null, V = F.filter(
@@ -109,18 +109,18 @@ const I = {
     if (!a || !t || !n)
       return;
     const m = (p) => {
-      var B;
-      const k = (B = M.current) == null ? void 0 : B.querySelector(
+      var k;
+      const w = (k = M.current) == null ? void 0 : k.querySelector(
         ".gi-modal-container-control"
       );
-      k && (k.contains(p.target) || d());
+      w && (w.contains(p.target) || d());
     };
     return document.addEventListener("pointerdown", m, !0), () => document.removeEventListener("pointerdown", m, !0);
   }, [a, t, n, d]);
   const q = /* @__PURE__ */ l(
     "div",
     {
-      ...R,
+      ...L,
       ref: M,
       className: u("gi-modal", {
         "gi-modal-open": a,
@@ -153,7 +153,7 @@ const I = {
             /* @__PURE__ */ l(
               ae,
               {
-                closeButtonLabel: h,
+                closeButtonLabel: v,
                 modalTitle: H,
                 closeOnClick: t,
                 onClose: d,
@@ -170,14 +170,14 @@ const I = {
     }
   );
   return /* @__PURE__ */ l(ne, { modalRef: M, isOpen: a, children: q });
-}, P = ({ children: e, as: o = "h4", ...t }) => /* @__PURE__ */ l("div", { className: "gi-flex-1", id: t.id, "aria-label": e == null ? void 0 : e.toString(), children: /* @__PURE__ */ l(J, { as: o, ...t, children: e }) });
-Object.defineProperty(P, "componentType", {
+}, E = ({ children: e, as: o = "h4", ...t }) => /* @__PURE__ */ l("div", { className: "gi-flex-1", id: t.id, "aria-label": e == null ? void 0 : e.toString(), children: /* @__PURE__ */ l(J, { as: o, ...t, children: e }) });
+Object.defineProperty(E, "componentType", {
   value: "ModalTitle",
   writable: !1,
   enumerable: !1
 });
-P.displayName = "ModalTitle";
-const he = ({
+E.displayName = "ModalTitle";
+const ve = ({
   children: e,
   className: o,
   includeModalClass: t = !0
@@ -199,10 +199,10 @@ const he = ({
 }) => {
   const s = (Array.isArray(o) ? o : [o]).filter((r) => {
     var i, c;
-    return K(r) && (r.type === E || ((i = r.type) == null ? void 0 : i.displayName) === "Button" || ((c = r.props) == null ? void 0 : c["data-button"]));
+    return K(r) && (r.type === A || ((i = r.type) == null ? void 0 : i.displayName) === "Button" || ((c = r.props) == null ? void 0 : c["data-button"]));
   }).sort((r, i) => {
-    const c = r.props.variant ?? "primary", v = i.props.variant ?? "primary";
-    return (I[c] || 0) - (I[v] || 0);
+    const c = r.props.variant ?? "primary", h = i.props.variant ?? "primary";
+    return (B[c] || 0) - (B[h] || 0);
   }), f = u({
     "gi-justify-center sm:gi-justify-start": !t && n !== "sm" && !a,
     "gi-justify-center": t === "vertical" || n === "sm" || a,
@@ -225,7 +225,7 @@ const he = ({
             (r, i) => {
               var c;
               return T(r, {
-                key: r.key || r.props.id || r.props.dataTestid || `modal-footer-button-${i}`,
+                key: r.key || r.props.id || r.props.dataTestId || `modal-footer-button-${i}`,
                 id: r.props.id || `modal-footer-button-${i}`,
                 className: u((c = r == null ? void 0 : r.props) == null ? void 0 : c.className, f)
               });
@@ -247,22 +247,22 @@ const ne = ({
   modalRef: o,
   isOpen: t
 }) => {
-  const [n, a] = A(!1);
+  const [n, a] = j(!1);
   return C(() => {
     a(!0);
   }, []), X(o, t && n), n ? G(e, document.body) : null;
-}, ve = ({
+}, he = ({
   children: e,
   triggerButton: o,
   startsOpen: t,
   ...n
 }) => {
-  const [a, d] = A(!!t), h = () => d(!0), s = () => d(!1), f = T(o, {
-    "data-testid": "modal-trigger-button-container",
-    "aria-haspopup": "dialog",
-    onClick: h
+  const [a, d] = j(!!t), v = () => d(!0), s = () => d(!1), f = T(o, {
+    dataTestId: "modal-trigger-button-container",
+    ariaHasPopup: "dialog",
+    onClick: v
   });
-  return /* @__PURE__ */ y(j, { children: [
+  return /* @__PURE__ */ y(P, { children: [
     f,
     /* @__PURE__ */ l(
       re,
@@ -277,9 +277,9 @@ const ne = ({
   ] });
 };
 export {
-  ve as Modal,
-  he as ModalBody,
+  he as Modal,
+  ve as ModalBody,
   x as ModalFooter,
-  P as ModalTitle,
+  E as ModalTitle,
   re as ModalWrapper
 };

package/dist/modal/types.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, ReactElement } from 'react';
-import { ButtonProps, ButtonSize, ButtonVariant } from '../button/types.js';
+import { Props as ButtonProps } from '../atoms/Button';
 import { IconButtonProps } from '../icon-button/icon-button.js';
 import { ModalBody, ModalFooter, ModalTitle } from './modal.js';
 export type ModalPositions = 'center' | 'left' | 'right' | 'bottom';
@@ -10,7 +10,7 @@ type ModalWrapperOwnProps = {
     isOpen: boolean;
     onClose: () => void;
     position?: ModalPositions;
-    closeButtonSize?: ButtonSize;
+    closeButtonSize?: ButtonProps['size'];
 };
 export type ModalWrapperProps = ModalWrapperOwnProps & Omit<ComponentPropsWithoutRef<'div'>, 'role'> & Omit<ModalProps, 'triggerButton'>;
 export type ModalSize = 'sm' | 'md' | 'lg';
@@ -27,10 +27,11 @@ export type ModalProps = React.AriaAttributes & {
 };
 export type ModalCloseButtonProps = {
     label?: string;
-} & Omit<IconButtonProps, 'className' | 'icon' | 'variant' | 'appearance'>;
+    size?: ButtonProps['size'];
+} & Omit<IconButtonProps, 'className' | 'icon' | 'variant' | 'appearance' | 'size'>;
 export type ModalFooterButton = {
     label: string;
-    variant: ButtonVariant;
+    variant: ButtonProps['variant'];
 } & ButtonProps;
 export type ModalFooterProps = {
     className?: string;