@ogcio/design-system-react 1.17.1 → 1.18.0

package/dist/button-group/button-group.d.ts

@@ -1,22 +1,4 @@
-import { FC, PropsWithChildren } from 'react';
-import { ButtonAppearance, ButtonSize } from '../button/types.js';
-type ButtonGroupItemProps = PropsWithChildren<{
-    value: string;
-    role?: string;
-    'aria-checked'?: boolean;
-    'aria-label'?: string;
-}>;
+import { FC } from 'react';
+import { ButtonGroupItemProps, ButtonGroupProps } from './types.js';
 export declare const ButtonGroupItem: FC<ButtonGroupItemProps>;
-type ButtonGroupProps = PropsWithChildren<{
-    name: string;
-    size?: ButtonSize;
-    appearance?: ButtonAppearance;
-    onChange?: (value: string) => void;
-    defaultValue?: string;
-    value?: string;
-    role?: string;
-    'aria-labelledby'?: string;
-    'aria-describedby'?: string;
-}>;
 export declare const ButtonGroup: FC<ButtonGroupProps>;
-export {};

package/dist/button-group/button-group.js

@@ -1,92 +1,98 @@
 "use client";
-import { jsx as f } from "react/jsx-runtime";
-import { createContext as x, useState as B, useEffect as G, useContext as V } from "react";
-import { Button as k } from "../button/button.js";
-import { useDomId as S } from "../hooks/use-dom-id.js";
-const I = x(
+import { jsx as y } from "react/jsx-runtime";
+import { createContext as G, useState as V, useEffect as k, useContext as S } from "react";
+import { Button as w } from "../button/button.js";
+import { cn as E } from "../cn.js";
+import { useDomId as $ } from "../hooks/use-dom-id.js";
+const x = G(
   void 0
-), v = ({
+), P = ({
   value: r,
   children: d,
   role: s,
   "aria-checked": e,
-  "aria-label": a
+  "aria-label": a,
+  ...t
 }) => {
-  const t = V(I);
-  if (!t)
+  const c = S(x);
+  if (!c)
     throw new Error("ButtonGroupItem must be used within a ButtonGroup");
   const {
     selectedValue: n,
     setSelectedValue: l,
     size: u,
     onChange: o,
-    groupId: p,
-    appearance: i
-  } = t, c = n === r, m = () => {
+    groupId: m,
+    appearance: p
+  } = c, i = n === r, b = () => {
     l(r), o == null || o(r);
-  }, b = `${p}-${r}`;
-  return /* @__PURE__ */ f(
-    k,
+  }, f = `${m}-${r}`;
+  return /* @__PURE__ */ y(
+    w,
     {
-      variant: c ? "primary" : "secondary",
+      variant: i ? "primary" : "secondary",
       size: u,
-      appearance: i,
-      onClick: m,
-      id: b,
+      appearance: p,
+      onClick: b,
+      id: f,
       role: s || "radio",
-      "aria-checked": e === void 0 ? c : e,
+      "aria-checked": e === void 0 ? i : e,
       "aria-label": a,
       type: "button",
+      ...t,
       children: d
     }
   );
-}, z = ({
+}, q = ({
   name: r,
   size: d = "medium",
   appearance: s = "dark",
   onChange: e,
   defaultValue: a,
   value: t,
-  children: n,
-  role: l,
-  "aria-labelledby": u,
-  "aria-describedby": o
+  children: c,
+  role: n,
+  "aria-labelledby": l,
+  "aria-describedby": u,
+  className: o,
+  ...m
 }) => {
-  const [p, i] = B(
+  const [p, i] = V(
     a
-  ), c = t === void 0 ? p : t;
-  G(() => {
+  ), b = t === void 0 ? p : t;
+  k(() => {
     t !== void 0 && i(t);
   }, [t]);
-  const m = (y) => {
-    t === void 0 && i(y), e == null || e(y);
-  }, b = S();
-  return /* @__PURE__ */ f(
-    I.Provider,
+  const f = (I) => {
+    t === void 0 && i(I), e == null || e(I);
+  }, B = $();
+  return /* @__PURE__ */ y(
+    x.Provider,
     {
       value: {
-        selectedValue: c,
-        setSelectedValue: m,
+        selectedValue: b,
+        setSelectedValue: f,
         name: r,
         size: d,
         onChange: e,
-        groupId: b,
-        appearance: s
+        groupId: B,
+        appearance: s,
+        ...m
       },
-      children: /* @__PURE__ */ f(
+      children: /* @__PURE__ */ y(
         "div",
         {
-          className: "gi-btn-group",
-          role: l || "radiogroup",
-          "aria-labelledby": u,
-          "aria-describedby": o,
-          children: n
+          className: E("gi-btn-group", o),
+          role: n || "radiogroup",
+          "aria-labelledby": l,
+          "aria-describedby": u,
+          children: c
         }
       )
     }
   );
 };
 export {
-  z as ButtonGroup,
-  v as ButtonGroupItem
+  q as ButtonGroup,
+  P as ButtonGroupItem
 };

package/dist/button-group/types.d.ts

@@ -0,0 +1,29 @@
+import { PropsWithChildren } from 'react';
+import { ButtonAppearance, ButtonSize } from '../button/types.js';
+export type ButtonGroupProps = PropsWithChildren<{
+    name: string;
+    size?: ButtonSize;
+    appearance?: ButtonAppearance;
+    onChange?: (value: string) => void;
+    defaultValue?: string;
+    value?: string;
+    role?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    className?: string;
+}>;
+export type ButtonGroupItemProps = PropsWithChildren<{
+    value: string;
+    role?: string;
+    'aria-checked'?: boolean;
+    'aria-label'?: string;
+}>;
+export type ButtonGroupContextType = {
+    selectedValue?: string;
+    setSelectedValue: (value: string) => void;
+    name: string;
+    size: ButtonSize;
+    appearance?: ButtonAppearance;
+    onChange?: (value: string) => void;
+    groupId: string;
+};

package/dist/button-group/types.js

@@ -0,0 +1 @@
+

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export { Blockquote, type BlockquoteProps } from './blockquote/blockquote.js';
 export { BreadcrumbCurrentLink, BreadcrumbEllipsis, BreadcrumbLink, Breadcrumbs, } from './breadcrumbs/breadcrumbs.js';
 export { type BreadcrumbLinkProps, type BreadcrumbProps, } from './breadcrumbs/types.js';
 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 { CardAction, CardContainer, CardDescription, CardHeader, CardMedia, CardSubtitle, CardTag, CardTitle, } from './card/card-next.js';
@@ -65,6 +66,7 @@ export { PhaseBanner, type PhaseBannerProps, } from './phase-banner/phase-banner
 export { Popover } from './popover/popover.js';
 export type { PopoverProps } from './popover/types.js';
 export { ProgressBar, type ProgressBarProps, } from './progress-bar/progress-bar.js';
+export { type ProgressStepperProps, StepFillLevel, StepStatus, } from './progress-stepper/types.js';
 export * from './progress-stepper/progress-stepper.js';
 export { RadioGroup } from './radio/radio-group.js';
 export { Radio } from './radio/radio.js';

package/dist/index.js

@@ -4,13 +4,13 @@ import { Alert as a } from "./alert/alert.js";
 import { Autocomplete as f, AutocompleteItem as l } from "./autocomplete/autocomplete.js";
 import { Blockquote as n } from "./blockquote/blockquote.js";
 import { BreadcrumbCurrentLink as u, BreadcrumbEllipsis as c, BreadcrumbLink as b, Breadcrumbs as T } from "./breadcrumbs/breadcrumbs.js";
-import { ButtonGroup as I, ButtonGroupItem as S } from "./button-group/button-group.js";
+import { ButtonGroup as S, ButtonGroupItem as I } from "./button-group/button-group.js";
 import { Button as F } from "./button/button.js";
-import { CardAction as k, CardContainer as D, CardDescription as h, CardHeader as L, CardMedia as g, CardSubtitle as G, CardTag as P, CardTitle as w } from "./card/card-next.js";
+import { CardAction as k, CardContainer as D, CardDescription as L, CardHeader as h, CardMedia as g, CardSubtitle as G, CardTag as P, CardTitle as w } from "./card/card-next.js";
 import { Card as A } from "./card/card.js";
 import { CheckboxGroup as H } from "./checkbox/checkbox-group.js";
 import { Checkbox as M } from "./checkbox/checkbox.js";
-import { Chip as v } from "./chip/chip.js";
+import { Chip as N } from "./chip/chip.js";
 import { Combobox as z } from "./combo-box/combo-box.js";
 import { DropdownItem as U } from "./combo-box/dropdown-item.js";
 import { Container as j } from "./container/container.js";
@@ -24,16 +24,16 @@ import { FormField as xo, FormFieldError as fo, FormFieldHint as lo, FormFieldLa
 import { Form as uo } from "./forms/form.js";
 import { HeaderSearch as bo } from "./header/components/header-search.js";
 import { Header as Co } from "./header/header.js";
-import { Heading as So } from "./heading/heading.js";
+import { Heading as Io } from "./heading/heading.js";
 import { initI18n as Fo } from "./i18n/config.js";
 import { IconButton as ko } from "./icon-button/icon-button.js";
-import { Icon as ho } from "./icon/icon.js";
+import { Icon as Lo } from "./icon/icon.js";
 import { Icons as go } from "./icon/icons.js";
 import { InputCheckboxGroup as Po } from "./input-checkbox-group/input-checkbox-group.js";
 import { InputCheckbox as yo, InputCheckboxTableCell as Ao } from "./input-checkbox/input-checkbox.js";
 import { InputCheckboxSizeEnum as Ho } from "./input-checkbox/types.js";
 import { InputFile as Mo } from "./input-file/input-file.js";
-import { InputPassword as vo } from "./input-password/input-password.js";
+import { InputPassword as No } from "./input-password/input-password.js";
 import { InputRadioGroup as zo } from "./input-radio-group/input-radio-group.js";
 import { InputRadio as Uo } from "./input-radio/input-radio.js";
 import { InputRadioSizeEnum as jo } from "./input-radio/types.js";
@@ -47,40 +47,41 @@ import { Paragraph as lr } from "./paragraph/paragraph.js";
 import { PhaseBanner as nr } from "./phase-banner/phase-banner.js";
 import { Popover as ur } from "./popover/popover.js";
 import { ProgressBar as br } from "./progress-bar/progress-bar.js";
-import { ProgressStepper as Cr, Step as Ir, StepItem as Sr } from "./progress-stepper/progress-stepper.js";
-import { RadioGroup as Fr } from "./radio/radio-group.js";
-import { Radio as kr } from "./radio/radio.js";
-import { ScoreSelect as hr } from "./score-select/score-select.js";
-import { SectionBreak as gr } from "./section-break/section-break.js";
-import { Select as Pr } from "./select/select.js";
-import { SelectGroupItemNext as yr, SelectItemNext as Ar, SelectNext as Er } from "./select/select-next.js";
-import { SideNav as Rr, SideNavItem as Mr } from "./side-nav/side-nav.js";
-import { Spinner as vr } from "./spinner/spinner.js";
-import { Stack as zr } from "./stack/stack.js";
-import { SummaryList as Ur, SummaryListAction as Vr, SummaryListRow as jr, SummaryListValue as Jr } from "./summary-list/summary-list.js";
-import { Caption as Or } from "./table/caption.js";
-import { ColumnGroup as Xr } from "./table/column-group.js";
-import { Column as Zr } from "./table/column.js";
-import { TableBody as $r } from "./table/table-body.js";
-import { TableData as re } from "./table/table-data.js";
-import { TableFoot as te } from "./table/table-foot.js";
-import { TableHead as me } from "./table/table-head.js";
-import { TableHeader as xe } from "./table/table-header.js";
-import { TableRow as le } from "./table/table-row.js";
-import { Table as ne } from "./table/table.js";
-import { TabItem as ue } from "./tabs/tab-item.js";
-import { TabList as be } from "./tabs/tab-list.js";
-import { TabPanel as Ce } from "./tabs/tab-panel.js";
-import { Tabs as Se } from "./tabs/tabs.js";
-import { DataTableFooter as Fe, DataTableFooterCenter as Be, DataTableFooterEnd as ke, DataTableFooterStart as De } from "./data-table/data-table-footer.js";
-import { Tag as Le, TagTypeEnum as ge } from "./tag/tag.js";
-import { TextInput as Pe } from "./text-input/text-input.js";
-import { TextArea as ye } from "./textarea/textarea.js";
-import { ToastProvider as Ee, toaster as He } from "./toast/toast.js";
-import { Tooltip as Me } from "./tooltip/tooltip.js";
-import { EditableTableCell as ve } from "./data-table/editable-table-cell.js";
-import { SelectGroupItem as ze, SelectItem as qe, SelectTableCell as Ue } from "./select/select-native.js";
-import { i as je } from "./i18next-DxWa09nx.js";
+import { StepFillLevel as Cr, StepStatus as Sr } from "./progress-stepper/types.js";
+import { ProgressStepper as sr, Step as Fr, StepItem as Br } from "./progress-stepper/progress-stepper.js";
+import { RadioGroup as Dr } from "./radio/radio-group.js";
+import { Radio as hr } from "./radio/radio.js";
+import { ScoreSelect as Gr } from "./score-select/score-select.js";
+import { SectionBreak as wr } from "./section-break/section-break.js";
+import { Select as Ar } from "./select/select.js";
+import { SelectGroupItemNext as Hr, SelectItemNext as Rr, SelectNext as Mr } from "./select/select-next.js";
+import { SideNav as Nr, SideNavItem as Wr } from "./side-nav/side-nav.js";
+import { Spinner as qr } from "./spinner/spinner.js";
+import { Stack as Vr } from "./stack/stack.js";
+import { SummaryList as Jr, SummaryListAction as Kr, SummaryListRow as Or, SummaryListValue as Qr } from "./summary-list/summary-list.js";
+import { Caption as Yr } from "./table/caption.js";
+import { ColumnGroup as _r } from "./table/column-group.js";
+import { Column as oe } from "./table/column.js";
+import { TableBody as ee } from "./table/table-body.js";
+import { TableData as pe } from "./table/table-data.js";
+import { TableFoot as ae } from "./table/table-foot.js";
+import { TableHead as fe } from "./table/table-head.js";
+import { TableHeader as ie } from "./table/table-header.js";
+import { TableRow as de } from "./table/table-row.js";
+import { Table as ce } from "./table/table.js";
+import { TabItem as Te } from "./tabs/tab-item.js";
+import { TabList as Se } from "./tabs/tab-list.js";
+import { TabPanel as se } from "./tabs/tab-panel.js";
+import { Tabs as Be } from "./tabs/tabs.js";
+import { DataTableFooter as De, DataTableFooterCenter as Le, DataTableFooterEnd as he, DataTableFooterStart as ge } from "./data-table/data-table-footer.js";
+import { Tag as Pe, TagTypeEnum as we } from "./tag/tag.js";
+import { TextInput as Ae } from "./text-input/text-input.js";
+import { TextArea as He } from "./textarea/textarea.js";
+import { ToastProvider as Me, toaster as ve } from "./toast/toast.js";
+import { Tooltip as We } from "./tooltip/tooltip.js";
+import { EditableTableCell as qe } from "./data-table/editable-table-cell.js";
+import { SelectGroupItem as Ve, SelectItem as je, SelectTableCell as Je } from "./select/select-native.js";
+import { i as Oe } from "./i18next-DxWa09nx.js";
 export {
   p as Accordion,
   e as AccordionItem,
@@ -93,37 +94,37 @@ export {
   b as BreadcrumbLink,
   T as Breadcrumbs,
   F as Button,
-  I as ButtonGroup,
-  S as ButtonGroupItem,
-  Or as Caption,
+  S as ButtonGroup,
+  I as ButtonGroupItem,
+  Yr as Caption,
   A as Card,
   k as CardAction,
   D as CardContainer,
-  h as CardDescription,
-  L as CardHeader,
+  L as CardDescription,
+  h as CardHeader,
   g as CardMedia,
   G as CardSubtitle,
   P as CardTag,
   w as CardTitle,
   M as Checkbox,
   H as CheckboxGroup,
-  v as Chip,
-  Zr as Column,
-  Xr as ColumnGroup,
+  N as Chip,
+  oe as Column,
+  _r as ColumnGroup,
   z as Combobox,
   j as Container,
   K as CookieBanner,
-  Fe as DataTableFooter,
-  Be as DataTableFooterCenter,
-  ke as DataTableFooterEnd,
-  De as DataTableFooterStart,
+  De as DataTableFooter,
+  Le as DataTableFooterCenter,
+  he as DataTableFooterEnd,
+  ge as DataTableFooterStart,
   Q as Details,
   Y as Drawer,
   Z as DrawerBody,
   _ as DrawerFooter,
   $ as DrawerWrapper,
   U as DropdownItem,
-  ve as EditableTableCell,
+  qe as EditableTableCell,
   ro as FileUpload,
   to as Footer,
   uo as Form,
@@ -134,8 +135,8 @@ export {
   mo as FormFieldWithTag,
   Co as Header,
   bo as HeaderSearch,
-  So as Heading,
-  ho as Icon,
+  Io as Heading,
+  Lo as Icon,
   ko as IconButton,
   go as Icons,
   yo as InputCheckbox,
@@ -143,7 +144,7 @@ export {
   Ho as InputCheckboxSizeEnum,
   Ao as InputCheckboxTableCell,
   Mo as InputFile,
-  vo as InputPassword,
+  No as InputPassword,
   Uo as InputRadio,
   zo as InputRadioGroup,
   jo as InputRadioSizeEnum,
@@ -162,46 +163,48 @@ export {
   nr as PhaseBanner,
   ur as Popover,
   br as ProgressBar,
-  Cr as ProgressStepper,
-  kr as Radio,
-  Fr as RadioGroup,
-  hr as ScoreSelect,
-  gr as SectionBreak,
-  Pr as Select,
-  ze as SelectGroupItem,
-  yr as SelectGroupItemNext,
-  qe as SelectItem,
-  Ar as SelectItemNext,
-  Er as SelectNext,
-  Ue as SelectTableCell,
-  Rr as SideNav,
-  Mr as SideNavItem,
-  vr as Spinner,
-  zr as Stack,
-  Ir as Step,
-  Sr as StepItem,
-  Ur as SummaryList,
-  Vr as SummaryListAction,
-  jr as SummaryListRow,
-  Jr as SummaryListValue,
-  ue as TabItem,
-  be as TabList,
-  Ce as TabPanel,
-  ne as Table,
-  $r as TableBody,
-  re as TableData,
-  te as TableFoot,
-  me as TableHead,
-  xe as TableHeader,
-  le as TableRow,
-  Se as Tabs,
-  Le as Tag,
-  ge as TagTypeEnum,
-  ye as TextArea,
-  Pe as TextInput,
-  Ee as ToastProvider,
-  Me as Tooltip,
-  je as i18next,
+  sr as ProgressStepper,
+  hr as Radio,
+  Dr as RadioGroup,
+  Gr as ScoreSelect,
+  wr as SectionBreak,
+  Ar as Select,
+  Ve as SelectGroupItem,
+  Hr as SelectGroupItemNext,
+  je as SelectItem,
+  Rr as SelectItemNext,
+  Mr as SelectNext,
+  Je as SelectTableCell,
+  Nr as SideNav,
+  Wr as SideNavItem,
+  qr as Spinner,
+  Vr as Stack,
+  Fr as Step,
+  Cr as StepFillLevel,
+  Br as StepItem,
+  Sr as StepStatus,
+  Jr as SummaryList,
+  Kr as SummaryListAction,
+  Or as SummaryListRow,
+  Qr as SummaryListValue,
+  Te as TabItem,
+  Se as TabList,
+  se as TabPanel,
+  ce as Table,
+  ee as TableBody,
+  pe as TableData,
+  ae as TableFoot,
+  fe as TableHead,
+  ie as TableHeader,
+  de as TableRow,
+  Be as Tabs,
+  Pe as Tag,
+  we as TagTypeEnum,
+  He as TextArea,
+  Ae as TextInput,
+  Me as ToastProvider,
+  We as Tooltip,
+  Oe as i18next,
   Fo as initI18n,
-  He as toaster
+  ve as toaster
 };

package/dist/progress-bar/progress-bar.d.ts

@@ -3,5 +3,6 @@ export type ProgressBarProps = {
     value?: number;
     isIndeterminate?: boolean;
     label?: string;
-};
-export declare function ProgressBar({ value, max, isIndeterminate, label, }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
+    dataTestid?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+export declare function ProgressBar({ value, max, isIndeterminate, label, className, dataTestid, ...props }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/progress-bar/progress-bar.js

@@ -1,14 +1,17 @@
-import { jsxs as l, jsx as a } from "react/jsx-runtime";
-import { cn as t } from "../cn.js";
-import { translate as g } from "../i18n/utility.js";
-function d({
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
+import { cn as o } from "../cn.js";
+import { translate as p } from "../i18n/utility.js";
+function u({
   value: s = 0,
   max: e = 100,
   isIndeterminate: r,
-  label: o
+  label: i,
+  className: l,
+  dataTestid: t,
+  ...n
 }) {
-  const i = s * 100 / e;
-  return /* @__PURE__ */ l("div", { className: "gi-progress-bar-container", children: [
+  const g = s * 100 / e;
+  return /* @__PURE__ */ c("div", { className: "gi-progress-bar-container", children: [
     /* @__PURE__ */ a(
       "div",
       {
@@ -16,25 +19,26 @@ function d({
         "aria-valuenow": r ? void 0 : s,
         "aria-valuemin": 0,
         "aria-valuemax": e,
-        "aria-label": g("progressBar.progressBar", {
+        "aria-label": p("progressBar.progressBar", {
           defaultValue: "Progress bar"
         }),
-        "data-testid": "progress-bar",
-        className: "gi-progress-bar",
+        className: o("gi-progress-bar", l),
+        "data-testid": t,
+        ...n,
         children: /* @__PURE__ */ a(
           "div",
           {
-            className: t({
+            className: o({
               "gi-progress-bar-indeterminate": r
             }),
-            style: r ? {} : { width: `${i}%` }
+            style: r ? {} : { width: `${g}%` }
           }
         )
       }
     ),
-    o && /* @__PURE__ */ a("span", { children: o })
+    i && /* @__PURE__ */ a("span", { children: i })
   ] });
 }
 export {
-  d as ProgressBar
+  u as ProgressBar
 };

package/dist/progress-stepper/progress-stepper.d.ts

@@ -1,7 +1,9 @@
 import { FC } from 'react';
-import { InnerStepProps, ProgressStepperProps, StepItemProps } from './types.js';
-export declare const Step: ({ isCurrentStep, isCompleted, isLastStep, isDisabled, stepNumber, orientation, children, indicator, verticalSlot, defaultOpen, dataTestId, ariaLabel, verticalGap, }: InnerStepProps & {
+import { InnerStepProps, ProgressStepperProps, StepItemProps, StepFillLevelType } from './types.js';
+export declare const Step: ({ isCurrentStep, isCompleted, isLastStep, isDisabled, stepNumber, orientation, children, indicator, verticalSlot, defaultOpen, dataTestId, ariaLabel, verticalGap, fill, useFill, }: InnerStepProps & {
     isDisabled?: boolean;
+    fill?: StepFillLevelType;
+    useFill?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const StepItem: FC<StepItemProps>;
-export declare const ProgressStepper: ({ children, currentStepIndex, orientation, indicator, completeAll, stepStates, dataTestId, className, verticalGap, }: ProgressStepperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ProgressStepper: ({ children, currentStepIndex, orientation, indicator, completeAll, stepStates, className, verticalGap, ...props }: ProgressStepperProps) => import("react/jsx-runtime").JSX.Element;