@ogcio/design-system-react 1.17.2 → 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';

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

@@ -1,23 +1,26 @@
 "use client";
-import { jsxs as u, jsx as d } from "react/jsx-runtime";
-import k from "react";
-import { ButtonGroup as y, ButtonGroupItem as N } from "../button-group/button-group.js";
-import { FormField as x, FormFieldLabel as f, FormFieldHint as j } from "../forms/form-field/form-field.js";
-const _ = ({
-  name: p,
-  size: $ = "medium",
-  value: s,
-  label: F,
-  hint: i,
-  leftLabel: a,
-  rightLabel: r,
-  onChange: c,
-  type: I
+import { jsxs as a, jsx as s, Fragment as F } from "react/jsx-runtime";
+import { useId as G } from "react";
+import { ButtonGroup as j, ButtonGroupItem as w } from "../button-group/button-group.js";
+import { cn as o } from "../cn.js";
+import { FormField as O, FormFieldLabel as V, FormFieldHint as E } from "../forms/form-field/form-field.js";
+import { useBreakpoint as H, Breakpoint as $ } from "../hooks/use-breakpoint.js";
+const K = ({
+  name: B,
+  size: x = "medium",
+  orientation: t = "horizontal",
+  wrapInMobile: I = !0,
+  value: m,
+  label: N,
+  hint: d,
+  leftLabel: i,
+  rightLabel: c,
+  onChange: v,
+  type: f
 }) => {
-  var m, t;
-  const o = k.useId(), v = `${o}-label`, b = i ? `${o}-hint` : void 0;
+  const h = G(), b = `${h}-label`, n = d ? `${h}-hint` : void 0, { breakpoint: p } = H(), g = p === $.ExtraSmall || p === $.Small;
   let l = [];
-  switch (I) {
+  switch (f) {
     case "1-5": {
       l = [
         { value: "1", label: "1" },
@@ -57,48 +60,88 @@ const _ = ({
       break;
     }
   }
-  return /* @__PURE__ */ u(x, { className: "gi-w-full", children: [
-    /* @__PURE__ */ d(f, { id: v, children: F }),
-    i && /* @__PURE__ */ d(j, { id: b, children: i }),
-    /* @__PURE__ */ u(
+  const u = t === "vertical" || g && !I, y = () => u ? "gi-score-select-button-group-vertical" : "gi-score-select-button-group-horizontal", z = () => {
+    var e, r;
+    return i && c && l.length > 2 && t === "horizontal" && !u && /* @__PURE__ */ a(
       "div",
       {
-        className: "gi-score-select-button-group",
-        role: "group",
-        "aria-labelledby": v,
-        "aria-describedby": b,
+        className: o("gi-score-select-labels-responsive"),
+        "aria-hidden": "true",
         children: [
-          a && r && l.length > 2 && /* @__PURE__ */ u("div", { className: "gi-score-select-labels-responsive", "aria-hidden": "true", children: [
-            /* @__PURE__ */ u("div", { children: [
-              (m = l[0]) == null ? void 0 : m.label,
-              " – ",
-              a
-            ] }),
-            /* @__PURE__ */ u("div", { children: [
-              (t = l.at(-1)) == null ? void 0 : t.label,
-              " – ",
-              r
-            ] })
+          /* @__PURE__ */ a("div", { children: [
+            (e = l[0]) == null ? void 0 : e.label,
+            " – ",
+            i
+          ] }),
+          /* @__PURE__ */ a("div", { children: [
+            (r = l.at(-1)) == null ? void 0 : r.label,
+            " – ",
+            c
+          ] })
+        ]
+      }
+    );
+  }, S = () => {
+    var e, r;
+    return (i || c) && /* @__PURE__ */ s(
+      "div",
+      {
+        className: o("gi-score-select-labels", {
+          "gi-score-select-labels-vertical": u
+        }),
+        "aria-hidden": "true",
+        children: t === "horizontal" && g ? /* @__PURE__ */ a(F, { children: [
+          /* @__PURE__ */ a("div", { children: [
+            (e = l[0]) == null ? void 0 : e.label,
+            " – ",
+            i
           ] }),
-          /* @__PURE__ */ d(
-            y,
+          /* @__PURE__ */ a("div", { children: [
+            (r = l.at(-1)) == null ? void 0 : r.label,
+            " – ",
+            c
+          ] })
+        ] }) : /* @__PURE__ */ a(F, { children: [
+          /* @__PURE__ */ s("div", { children: i }),
+          /* @__PURE__ */ s("div", { children: c })
+        ] })
+      }
+    );
+  };
+  return /* @__PURE__ */ a(O, { className: "gi-w-full", children: [
+    /* @__PURE__ */ s(V, { id: b, children: N }),
+    d && /* @__PURE__ */ s(E, { id: n, children: d }),
+    /* @__PURE__ */ a(
+      "div",
+      {
+        className: o("gi-score-select-button-group", y()),
+        role: "group",
+        "aria-labelledby": b,
+        "aria-describedby": n,
+        children: [
+          z(),
+          /* @__PURE__ */ s(
+            j,
             {
-              name: p,
-              size: $,
-              defaultValue: s,
-              onChange: (e) => c == null ? void 0 : c(e),
+              name: B,
+              size: x,
+              defaultValue: m,
+              onChange: (e) => v == null ? void 0 : v(e),
               role: "radiogroup",
-              "aria-labelledby": v,
-              "aria-describedby": b,
+              "aria-labelledby": b,
+              "aria-describedby": n,
+              className: o({
+                "gi-flex-col gi-items-start": u
+              }),
               children: l.map((e) => {
-                var n, h;
-                return /* @__PURE__ */ d(
-                  N,
+                var r, k;
+                return /* @__PURE__ */ s(
+                  w,
                   {
                     value: e.value,
                     role: "radio",
-                    "aria-checked": s === e.value,
-                    "aria-label": `${e.label}${a && e.value === ((n = l[0]) == null ? void 0 : n.value) ? ` - ${a}` : ""}${r && e.value === ((h = l.at(-1)) == null ? void 0 : h.value) ? ` - ${r}` : ""}`,
+                    "aria-checked": m === e.value,
+                    "aria-label": `${e.label}${i && e.value === ((r = l[0]) == null ? void 0 : r.value) ? ` - ${i}` : ""}${c && e.value === ((k = l.at(-1)) == null ? void 0 : k.value) ? ` - ${c}` : ""}`,
                     children: e.label
                   },
                   e.value
@@ -106,15 +149,12 @@ const _ = ({
               })
             }
           ),
-          (a || r) && /* @__PURE__ */ u("div", { className: "gi-score-select-labels", "aria-hidden": "true", children: [
-            /* @__PURE__ */ d("div", { children: a }),
-            /* @__PURE__ */ d("div", { children: r })
-          ] })
+          S()
         ]
       }
     )
   ] });
 };
 export {
-  _ as ScoreSelect
+  K as ScoreSelect
 };

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

@@ -9,6 +9,10 @@ export type ScoreSelectProps = {
     leftLabel?: string;
     rightLabel?: string;
     type: ScoreSelectType;
+    orientation?: 'vertical' | 'horizontal';
+    startLabel?: string;
+    endLabel?: string;
+    wrapInMobile?: boolean;
     onChange?: (value: string) => void;
 };
 export {};