@ogcio/design-system-react 1.11.1 → 1.11.3

package/dist/popover/types.d.ts

@@ -0,0 +1,10 @@
+import { Options as PopperOptions } from '@popperjs/core';
+export type PopoverProps = {
+    triggerRef: React.RefObject<any> | null;
+    children: React.ReactNode;
+    className?: string;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    options?: PopperOptions;
+    extraRefs?: React.RefObject<any>[];
+};

package/dist/popover/types.js

@@ -0,0 +1 @@
+

package/dist/primitives/anchor.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export type AnchorProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    external?: boolean;
+    asChild?: boolean;
+};
+declare const Anchor: ({ external, asChild, children, ...props }: AnchorProps) => import("react/jsx-runtime").JSX.Element;
+export default Anchor;

package/dist/primitives/anchor.js

@@ -0,0 +1,14 @@
+import { jsx as t } from "react/jsx-runtime";
+import { a } from "../index-ntYL1VRC.js";
+const f = ({
+  external: o = !1,
+  asChild: r,
+  children: e,
+  ...n
+}) => /* @__PURE__ */ t(r ? a : "a", { ...n, ...o && {
+  target: "_blank",
+  rel: "noreferrer noopener"
+}, children: e });
+export {
+  f as default
+};

package/dist/primitives/input.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/primitives/input.js

@@ -0,0 +1,9 @@
+import { jsx as p } from "react/jsx-runtime";
+import r from "react";
+const a = r.forwardRef(
+  (t, o) => /* @__PURE__ */ p("input", { ref: o, ...t })
+);
+a.displayName = "Input";
+export {
+  a as Input
+};

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

@@ -0,0 +1,7 @@
+export type ProgressBarProps = {
+    max?: number;
+    value?: number;
+    isIndeterminate?: boolean;
+    label?: string;
+};
+export declare function ProgressBar({ value, max, isIndeterminate, label, }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;

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

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

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

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

package/dist/progress-stepper/progress-stepper.js

@@ -0,0 +1,198 @@
+import { jsxs as f, jsx as r } from "react/jsx-runtime";
+import { Children as P } from "react";
+import { cn as $ } from "../cn.js";
+import { Icon as z } from "../icon/icon.js";
+import { ProgressStepperIndicator as v } from "./types.js";
+const j = (e) => `calc(100% + ${e * 4 - 36}px)`, k = ({
+  isNextStep: e,
+  orientation: t = "horizontal",
+  isCurrentStep: s,
+  isCompleted: a,
+  verticalGap: l
+}) => {
+  const o = t === "vertical" ? { height: j(l) } : void 0;
+  return /* @__PURE__ */ f(
+    "div",
+    {
+      "data-orientation": t,
+      "data-next": e,
+      "data-completed": a,
+      "data-current": s,
+      className: "gi-progress-stepper-step-connector",
+      "aria-hidden": "true",
+      style: o,
+      children: [
+        /* @__PURE__ */ r("span", {}),
+        s ? /* @__PURE__ */ r("span", {}) : null
+      ]
+    }
+  );
+}, x = (e) => ({
+  [v.Hashtag]: {
+    completed: /* @__PURE__ */ r(z, { icon: "check" }),
+    current: () => "#",
+    next: () => "#"
+  },
+  [v.Number]: {
+    completed: /* @__PURE__ */ r(z, { icon: "check" }),
+    current: (s) => s,
+    next: (s) => s
+  }
+})[e], V = (e, t, s, a) => {
+  const { current: l, completed: o, next: i } = x(
+    e || v.Hashtag
+  );
+  return s ? o : a ? l(t) : i(t);
+}, B = ({
+  isCurrentStep: e,
+  isCompleted: t,
+  isLastStep: s,
+  stepNumber: a,
+  orientation: l,
+  children: o,
+  indicator: i,
+  verticalSlot: n,
+  defaultOpen: d,
+  dataTestId: u,
+  ariaLabel: g,
+  verticalGap: h
+}) => {
+  const m = !t && !e, c = l === "vertical" && (e || d || t), p = !!o;
+  return /* @__PURE__ */ f("div", { className: "gi-relative", children: [
+    /* @__PURE__ */ f(
+      "div",
+      {
+        className: "gi-progress-stepper-step-container",
+        "data-orientation": l,
+        "data-current": e,
+        "data-completed": t,
+        "data-next": m,
+        "data-indicator": i,
+        role: "listitem",
+        "aria-labelledby": `step-label-${a}`,
+        "data-testid": u || `step-label-${a}`,
+        "aria-label": p ? void 0 : g,
+        children: [
+          /* @__PURE__ */ r("div", { className: "gi-progress-stepper-step", "data-indicator": i, children: V(
+            i || v.Hashtag,
+            a,
+            t,
+            e
+          ) }),
+          p && /* @__PURE__ */ r(
+            "div",
+            {
+              className: "gi-progress-stepper-step-label",
+              "data-orientation": l,
+              id: `step-label-${a}`,
+              children: o
+            }
+          )
+        ]
+      }
+    ),
+    s ? null : /* @__PURE__ */ r(
+      k,
+      {
+        isCurrentStep: e,
+        isNextStep: m,
+        isCompleted: t,
+        orientation: l,
+        stepNumber: a,
+        verticalGap: h
+      }
+    ),
+    c && n && /* @__PURE__ */ r(
+      "div",
+      {
+        "data-testid": `vertical-step-slot-${a - 1}`,
+        className: $("gi-ml-10", {
+          "gi-pt-5": p,
+          "-gi-mt-[34px]": !p && n
+        }),
+        children: n
+      }
+    )
+  ] });
+}, I = () => null, J = ({
+  children: e,
+  currentStepIndex: t = 0,
+  orientation: s = "horizontal",
+  indicator: a = "number",
+  completeAll: l,
+  dataTestId: o,
+  className: i,
+  verticalGap: n = 14
+}) => {
+  var g, h;
+  const d = (h = (g = e[t]) == null ? void 0 : g.props) == null ? void 0 : h.children, u = s === "horizontal" && d;
+  return /* @__PURE__ */ f(
+    "div",
+    {
+      className: $("gi-w-full", {
+        "gi-flex": s === "vertical"
+      }),
+      children: [
+        /* @__PURE__ */ r(
+          "div",
+          {
+            "data-testid": "progress-stepper",
+            className: $(
+              "gi-progress-stepper",
+              {
+                [`gi-gap-${n}`]: s === "vertical"
+              },
+              i
+            ),
+            "data-orientation": s,
+            role: "list",
+            "aria-live": "polite",
+            children: P.map(e, (m, c) => {
+              var b, N;
+              const {
+                label: p = "",
+                defaultOpen: H,
+                ariaLabel: w
+              } = m.props, [y, L, O] = [
+                !l && t === c,
+                c === e.length - 1,
+                l || c < t && c !== t
+              ];
+              return /* @__PURE__ */ r("div", { className: "gi-w-full", children: /* @__PURE__ */ r(
+                B,
+                {
+                  stepNumber: c + 1,
+                  isCurrentStep: y,
+                  isCompleted: O,
+                  orientation: s,
+                  isLastStep: L,
+                  verticalSlot: (N = (b = e[c]) == null ? void 0 : b.props) == null ? void 0 : N.children,
+                  defaultOpen: H,
+                  indicator: a,
+                  dataTestId: o,
+                  ariaLabel: w,
+                  verticalGap: n,
+                  children: p
+                },
+                o || `progress-stepper-step-${c}`
+              ) });
+            })
+          }
+        ),
+        u && /* @__PURE__ */ r(
+          "div",
+          {
+            className: "gi-h-full",
+            "data-testid": `horizontal-step-slot-${t}`,
+            children: d
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  J as ProgressStepper,
+  B as Step,
+  I as StepItem
+};

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

@@ -0,0 +1,49 @@
+type Orientation = 'vertical' | 'horizontal';
+export declare const ProgressStepperIndicator: {
+    readonly Hashtag: "hashtag";
+    readonly Number: "number";
+};
+export type ProgressStepperIndicatorType = (typeof ProgressStepperIndicator)[keyof typeof ProgressStepperIndicator];
+export type Step = {
+    label: string;
+    slot: React.ReactElement;
+};
+export type StepItemProps = {
+    label?: string;
+    children?: React.ReactNode;
+    defaultOpen?: boolean;
+    ariaLabel?: string;
+};
+export type ProgressStepperProps = {
+    children: React.ReactElement<InnerStepProps>[];
+    currentStepIndex?: number;
+    orientation?: Orientation;
+    completeAll?: boolean;
+    dataTestId?: string;
+    indicator?: ProgressStepperIndicatorType;
+    className?: string;
+    verticalGap?: number;
+};
+export type InnerStepProps = {
+    children: string;
+    isCurrentStep: boolean;
+    isLastStep: boolean;
+    isCompleted: boolean;
+    stepNumber: number;
+    orientation?: Orientation;
+    indicator?: ProgressStepperIndicatorType;
+    verticalSlot?: React.ReactNode;
+    defaultOpen?: boolean;
+    dataTestId?: string;
+    ariaLabel?: string;
+    verticalGap: number;
+};
+export type ConnectorProps = {
+    stepNumber: number;
+    isNextStep: boolean;
+    isCurrentStep: boolean;
+    isCompleted: boolean;
+    orientation?: Orientation;
+    verticalGap: number;
+};
+export {};

package/dist/progress-stepper/types.js

@@ -0,0 +1,7 @@
+const r = {
+  Hashtag: "hashtag",
+  Number: "number"
+};
+export {
+  r as ProgressStepperIndicator
+};

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

@@ -0,0 +1,4 @@
+/**
+ * @deprecated Use <InputRadioGroup /> instead of <RadioGroup />.
+ */
+export declare const RadioGroup: import('react').FC<import('react').PropsWithChildren<import('../index.js').InputRadioGroupProps>>;

package/dist/radio/radio-group.js

@@ -0,0 +1,7 @@
+"use client";
+import { InputRadioGroup as o } from "../input-radio-group/input-radio-group.js";
+const p = o;
+p.displayName = "RadioGroup";
+export {
+  p as RadioGroup
+};

package/dist/radio/radio.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @deprecated Use `InputRadio` instead of `Radio`.
+ */
+export declare const Radio: import('react').FC<import('../index.js').InputRadioProps>;

package/dist/radio/radio.js

@@ -0,0 +1,7 @@
+"use client";
+import { InputRadio as o } from "../input-radio/input-radio.js";
+const i = o;
+i.displayName = "Radio";
+export {
+  i as Radio
+};

package/dist/radio/types.d.ts

@@ -0,0 +1,14 @@
+import { InputRadioSizeType, InputRadioProps } from '../input-radio/types.js';
+import { InputRadioGroupProps } from '../input-radio-group/types.js';
+/** @deprecated Use InputRadioSizeType instead */
+export type RadioSizeType = InputRadioSizeType;
+/** @deprecated Use InputRadioProps instead */
+export type RadioProps = InputRadioProps;
+/** @deprecated Use InputRadioSizeEnum instead */
+export declare const RadioSizeEnum: {
+    readonly Large: "lg";
+    readonly Medium: "md";
+    readonly Small: "sm";
+};
+/** @deprecated Use InputRadioGroupProps instead */
+export type RadioGroupProps = InputRadioGroupProps;

package/dist/radio/types.js

@@ -0,0 +1,5 @@
+import { InputRadioSizeEnum as o } from "../input-radio/types.js";
+const m = o;
+export {
+  m as RadioSizeEnum
+};

package/dist/score-select/score-select.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { ScoreSelectProps } from './type.js';
+export declare const ScoreSelect: React.FC<ScoreSelectProps>;

package/dist/score-select/score-select.js

@@ -0,0 +1,124 @@
+"use client";
+import { jsx as r, jsxs as d } from "react/jsx-runtime";
+import f from "react";
+import { ButtonGroup as k, ButtonGroupItem as y } from "../button-group/button-group.js";
+import { FormField as N } from "../forms/form-field.js";
+const G = ({
+  name: p,
+  size: $ = "medium",
+  value: s,
+  label: x,
+  hint: i,
+  leftLabel: a,
+  rightLabel: u,
+  onChange: c,
+  type: I
+}) => {
+  var o, n;
+  const t = f.useId(), v = `${t}-label`, b = i ? `${t}-hint` : void 0;
+  let l = [];
+  switch (I) {
+    case "1-5": {
+      l = [
+        { value: "1", label: "1" },
+        { value: "2", label: "2" },
+        { value: "3", label: "3" },
+        { value: "4", label: "4" },
+        { value: "5", label: "5" }
+      ];
+      break;
+    }
+    case "1-7": {
+      l = [
+        { value: "1", label: "1" },
+        { value: "2", label: "2" },
+        { value: "3", label: "3" },
+        { value: "4", label: "4" },
+        { value: "5", label: "5" },
+        { value: "6", label: "6" },
+        { value: "7", label: "7" }
+      ];
+      break;
+    }
+    case "0-10": {
+      l = [
+        { value: "0", label: "0" },
+        { value: "1", label: "1" },
+        { value: "2", label: "2" },
+        { value: "3", label: "3" },
+        { value: "4", label: "4" },
+        { value: "5", label: "5" },
+        { value: "6", label: "6" },
+        { value: "7", label: "7" },
+        { value: "8", label: "8" },
+        { value: "9", label: "9" },
+        { value: "10", label: "10" }
+      ];
+      break;
+    }
+  }
+  return /* @__PURE__ */ r(
+    N,
+    {
+      className: "gi-w-full",
+      label: { text: x, id: v },
+      hint: i ? { text: i, id: b } : void 0,
+      children: /* @__PURE__ */ d(
+        "div",
+        {
+          className: "gi-score-select-button-group",
+          role: "group",
+          "aria-labelledby": v,
+          "aria-describedby": b,
+          children: [
+            a && u && l.length > 2 && /* @__PURE__ */ d("div", { className: "gi-score-select-labels-responsive", "aria-hidden": "true", children: [
+              /* @__PURE__ */ d("div", { children: [
+                (o = l[0]) == null ? void 0 : o.label,
+                " – ",
+                a
+              ] }),
+              /* @__PURE__ */ d("div", { children: [
+                (n = l.at(-1)) == null ? void 0 : n.label,
+                " – ",
+                u
+              ] })
+            ] }),
+            /* @__PURE__ */ r(
+              k,
+              {
+                name: p,
+                size: $,
+                defaultValue: s,
+                onChange: (e) => c == null ? void 0 : c(e),
+                role: "radiogroup",
+                "aria-labelledby": v,
+                "aria-describedby": b,
+                children: l.map((e) => {
+                  var m, h;
+                  return /* @__PURE__ */ r(
+                    y,
+                    {
+                      value: e.value,
+                      role: "radio",
+                      "aria-checked": s === e.value,
+                      "aria-label": `${e.label}${a && e.value === ((m = l[0]) == null ? void 0 : m.value) ? ` - ${a}` : ""}${u && e.value === ((h = l.at(-1)) == null ? void 0 : h.value) ? ` - ${u}` : ""}`,
+                      children: e.label
+                    },
+                    e.value
+                  );
+                })
+              }
+            ),
+            (a || u) && /* @__PURE__ */ d("div", { className: "gi-score-select-labels", "aria-hidden": "true", children: [
+              /* @__PURE__ */ r("div", { children: a }),
+              /* @__PURE__ */ r("div", { children: u })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  G as ScoreSelect
+};

package/dist/score-select/type.d.ts

@@ -0,0 +1,14 @@
+import { ButtonSize } from '../button/types.js';
+type ScoreSelectType = '1-5' | '1-7' | '0-10';
+export type ScoreSelectProps = {
+    name: string;
+    value?: string;
+    size?: ButtonSize;
+    label: string;
+    hint?: string;
+    leftLabel?: string;
+    rightLabel?: string;
+    type: ScoreSelectType;
+    onChange?: (value: string) => void;
+};
+export {};

package/dist/score-select/type.js

@@ -0,0 +1 @@
+

package/dist/section-break/section-break.d.ts

@@ -0,0 +1,7 @@
+export type SectionBreakSize = 'sm' | 'md' | 'lg' | 'xl';
+export type SectionBreakProps = {
+    size?: SectionBreakSize;
+    color?: string;
+    dataTestid?: string;
+};
+export declare function SectionBreak({ size, color, dataTestid, }: SectionBreakProps): import("react/jsx-runtime").JSX.Element;

package/dist/section-break/section-break.js

@@ -0,0 +1,38 @@
+import { jsx as i } from "react/jsx-runtime";
+import { cn as s } from "../cn.js";
+import { translate as o } from "../i18n/utility.js";
+function m({
+  size: a = "sm",
+  color: r = "gi-border-gray-400",
+  dataTestid: t
+}) {
+  let e = "gi-section-break-sm";
+  switch (a) {
+    case "md": {
+      e = "gi-section-break-md";
+      break;
+    }
+    case "lg": {
+      e = "gi-section-break-lg";
+      break;
+    }
+    case "xl": {
+      e = "gi-section-break-xl";
+      break;
+    }
+  }
+  return /* @__PURE__ */ i(
+    "hr",
+    {
+      "data-testid": t,
+      className: s(e, r),
+      role: "separator",
+      "aria-label": o("sectionBreak.sectionBreak", {
+        defaultValue: "Section Break"
+      })
+    }
+  );
+}
+export {
+  m as SectionBreak
+};

package/dist/select/select-menu.d.ts

@@ -0,0 +1,7 @@
+import { SelectMenuOptionProps, SelectMenuProps } from './types.js';
+export declare const SelectMenu: ({ children, className, onChange, enableSearch, }: SelectMenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectMenuOption: ({ children, value, selected, onChange, disabled, dataTestid, className, hidden, enableSearch, isHighlighted, ...props }: SelectMenuOptionProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const SelectMenuGroupItem: ({ children, label, ...props }: {
+    children?: any;
+    label: string;
+}) => import("react/jsx-runtime").JSX.Element;