@ogcio/design-system-react 1.11.0 → 1.11.2

package/dist/side-nav/side-nav.js

@@ -0,0 +1,171 @@
+"use client";
+import { jsxs as w, Fragment as V, jsx as s } from "react/jsx-runtime";
+import N, { memo as B, useEffect as q, useCallback as v, useState as _ } from "react";
+import { Button as A } from "../button/button.js";
+import { cn as f } from "../cn.js";
+import { Icon as $ } from "../icon/icon.js";
+import { Link as G } from "../link/link.js";
+import { Paragraph as H } from "../paragraph/paragraph.js";
+const j = N.createContext(
+  void 0
+), z = B(
+  ({
+    icon: n,
+    label: i,
+    showExpandableIcon: c,
+    isOpen: e
+  }) => /* @__PURE__ */ w(V, { children: [
+    /* @__PURE__ */ w("div", { className: "gi-side-nav-item-left", children: [
+      n && /* @__PURE__ */ s("div", { className: "gi-side-nav-item-icon", children: /* @__PURE__ */ s($, { icon: n }) }),
+      /* @__PURE__ */ s("div", { className: "gi-side-nav-item-label", children: /* @__PURE__ */ s(H, { size: "md", children: i }) })
+    ] }),
+    c && /* @__PURE__ */ s("div", { className: "gi-side-nav-expandable-icon", children: /* @__PURE__ */ s(
+      $,
+      {
+        className: f(e && "gi-rotate-180"),
+        icon: "keyboard_arrow_down"
+      }
+    ) })
+  ] })
+), J = N.memo(
+  ({
+    children: n,
+    primary: i,
+    secondary: c,
+    expandable: e,
+    label: o,
+    value: t,
+    icon: u,
+    href: m,
+    asChild: g,
+    open: r
+  }) => {
+    const l = N.useContext(j);
+    if (!l)
+      throw new Error("SideNavItem must be used within a SideNav");
+    const {
+      openItemIds: a,
+      selectedItemId: S,
+      setOpenItemIds: p,
+      setSelectedItemId: C,
+      navId: P
+    } = l, I = a.includes(t), x = S === t;
+    q(() => {
+      r && p((d) => d.includes(t) ? d : [...d, t]);
+    }, [r, p, t]);
+    const h = v(() => {
+      const d = I ? a.filter((R) => R !== t) : [...a, t];
+      p(d);
+    }, [I, a, p, t]), k = v(() => {
+      C(t);
+    }, [C, t]), E = `${P}-${t}`, O = i && e, b = m !== void 0, D = v(() => {
+      i && e && h(), k();
+    }, [i, e, h, k]), F = v(
+      (d) => {
+        d.preventDefault(), i && e ? h() : k();
+      },
+      [i, e, h, k]
+    ), L = f("gi-side-nav-item", {
+      "gi-side-nav-item-selected": x,
+      "gi-side-nav-item-primary": i,
+      "gi-side-nav-item-secondary": c
+    }), M = f("gi-side-nav-item", {
+      "gi-side-nav-item-selected": x,
+      "gi-side-nav-item-primary": i,
+      "gi-side-nav-item-secondary": c
+    });
+    return /* @__PURE__ */ w(
+      "div",
+      {
+        role: "group",
+        "aria-label": `${o} ${i && e ? "dropdown" : "item"}`,
+        children: [
+          b ? /* @__PURE__ */ s(
+            G,
+            {
+              id: E,
+              href: m,
+              asChild: g,
+              asButton: {
+                variant: "flat",
+                appearance: "dark",
+                size: "medium"
+              },
+              className: L,
+              onClick: D,
+              children: g ? n : /* @__PURE__ */ s(
+                z,
+                {
+                  icon: u,
+                  label: o,
+                  showExpandableIcon: O,
+                  isOpen: I
+                }
+              )
+            }
+          ) : /* @__PURE__ */ s(
+            A,
+            {
+              variant: "flat",
+              appearance: "dark",
+              size: "medium",
+              onClick: F,
+              className: M,
+              id: E,
+              children: /* @__PURE__ */ s(
+                z,
+                {
+                  icon: u,
+                  label: o,
+                  showExpandableIcon: O,
+                  isOpen: I
+                }
+              )
+            }
+          ),
+          e && i && /* @__PURE__ */ s(
+            "div",
+            {
+              className: f(I ? "gi-side-nav-item-content" : "gi-hidden"),
+              children: n
+            }
+          )
+        ]
+      }
+    );
+  }
+), K = B(
+  ({ children: n, className: i, dataTestid: c, onChange: e, value: o }) => {
+    const [t, u] = _([]), [m, g] = _(
+      o
+    ), r = N.useId(), l = v(
+      (S) => {
+        g(S), e == null || e(S);
+      },
+      [e]
+    ), a = N.useMemo(
+      () => ({
+        openItemIds: t,
+        selectedItemId: m,
+        setOpenItemIds: u,
+        setSelectedItemId: l,
+        navId: r
+      }),
+      [t, m, l, r]
+    );
+    return /* @__PURE__ */ s(j.Provider, { value: a, children: /* @__PURE__ */ s(
+      "div",
+      {
+        className: f("gi-side-nav-container", i),
+        "data-testid": c,
+        children: n
+      }
+    ) });
+  }
+);
+K.displayName = "SideNav";
+J.displayName = "SideNavItem";
+export {
+  K as SideNav,
+  J as SideNavItem
+};

package/dist/side-nav/types.d.ts

@@ -0,0 +1,18 @@
+import { IconId } from '../icon/icon.js';
+export type SideNavItemProps = {
+    value: string;
+    label: string;
+    href?: string;
+    asChild?: boolean;
+    primary?: boolean;
+    secondary?: boolean;
+    open?: boolean;
+    expandable?: boolean;
+    icon?: IconId;
+};
+export type SideNavProps = {
+    className?: string;
+    dataTestid?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+};

package/dist/side-nav/types.js

@@ -0,0 +1 @@
+

package/dist/spinner/spinner.d.ts

@@ -0,0 +1,35 @@
+import { VariantProps } from 'tailwind-variants';
+export declare const spinnerSizeVariants: {
+    xl: string;
+    lg: string;
+    md: string;
+    sm: string;
+};
+declare const spinnerVariants: import('tailwind-variants').TVReturnType<{
+    size: {
+        xl: string;
+        lg: string;
+        md: string;
+        sm: string;
+    };
+}, undefined, undefined, TVConfig<V, EV>, {
+    size: {
+        xl: string;
+        lg: string;
+        md: string;
+        sm: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        xl: string;
+        lg: string;
+        md: string;
+        sm: string;
+    };
+}, undefined, undefined, TVConfig<V, EV>, unknown, unknown, undefined>>;
+export type SpinnerProps = VariantProps<typeof spinnerVariants> & {
+    inline?: boolean;
+    dataTestid?: string;
+};
+export declare function Spinner({ size, inline, dataTestid, }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/spinner/spinner.js

@@ -0,0 +1,84 @@
+"use client";
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { c as o } from "../index-DNkhmzZp.js";
+import { cn as l } from "../cn.js";
+const c = {
+  xl: "gi-w-10 gi-h-10",
+  lg: "gi-w-8 gi-h-8",
+  md: "gi-w-6 gi-h-6",
+  sm: "gi-w-4 gi-h-4"
+}, m = o({
+  variants: {
+    size: c
+  }
+});
+function g({
+  size: t = "md",
+  inline: s = !1,
+  dataTestid: r
+}) {
+  const a = s ? "" : "gi-block", n = m({ size: t });
+  return /* @__PURE__ */ e(
+    "svg",
+    {
+      role: "status",
+      className: l("gi-stroke-gray-950", a, n),
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      "data-testid": r,
+      children: /* @__PURE__ */ i("g", { children: [
+        /* @__PURE__ */ i(
+          "circle",
+          {
+            cx: "12",
+            cy: "12",
+            r: "9.5",
+            fill: "none",
+            strokeWidth: "3",
+            strokeLinecap: "round",
+            children: [
+              /* @__PURE__ */ e(
+                "animate",
+                {
+                  attributeName: "stroke-dasharray",
+                  dur: "1.5s",
+                  calcMode: "spline",
+                  values: "0 150;42 150;42 150;42 150",
+                  keyTimes: "0;0.475;0.95;1",
+                  keySplines: "0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1",
+                  repeatCount: "indefinite"
+                }
+              ),
+              /* @__PURE__ */ e(
+                "animate",
+                {
+                  attributeName: "stroke-dashoffset",
+                  dur: "1.5s",
+                  calcMode: "spline",
+                  values: "0;-16;-59;-59",
+                  keyTimes: "0;0.475;0.95;1",
+                  keySplines: "0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1",
+                  repeatCount: "indefinite"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          "animateTransform",
+          {
+            attributeName: "transform",
+            type: "rotate",
+            dur: "2s",
+            values: "0 12 12;360 12 12",
+            repeatCount: "indefinite"
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  g as Spinner,
+  c as spinnerSizeVariants
+};

package/dist/spinner/spinner.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/spinner/spinner.test.js

@@ -0,0 +1,11 @@
+import { jsx as n } from "react/jsx-runtime";
+import { c as i, t as s, r as t } from "../test-utilities-BS7B3BF-.js";
+import { spinnerSizeVariants as o, Spinner as a } from "./spinner.js";
+describe("govieSpinner", () => {
+  afterEach(i);
+  const r = (e) => t(/* @__PURE__ */ n(a, { ...e }));
+  s(
+    Reflect.ownKeys(o),
+    (e) => r({ size: e })
+  );
+});

package/dist/stack/stack.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { StackProps } from './types.js';
+export declare const Stack: FC<StackProps>;

package/dist/stack/stack.js

@@ -0,0 +1,186 @@
+"use client";
+import { jsx as C, jsxs as h } from "react/jsx-runtime";
+import { Children as R, Fragment as y, isValidElement as d, cloneElement as X } from "react";
+import { cn as c } from "../cn.js";
+const p = (l) => typeof l == "string" ? {} : {
+  isBaseColumn: l.base === "column",
+  isBaseRow: l.base === "row",
+  isXsColumn: l.xs === "column",
+  isXsRow: l.xs === "row",
+  isSmColumn: l.sm === "column",
+  isSmRow: l.sm === "row",
+  isMdColumn: l.md === "column",
+  isMdRow: l.md === "row",
+  isLgColumn: l.lg === "column",
+  isLgRow: l.lg === "row",
+  isXlColumn: l.xl === "column",
+  isXlRow: l.xl === "row",
+  is2xlColumn: l["2xl"] === "column",
+  is2xlRow: l["2xl"] === "row"
+}, j = (l) => {
+  if (typeof l == "string")
+    return {
+      "gi-flex-row": l === "row",
+      "gi-flex-col": l === "column"
+    };
+  const {
+    isBaseColumn: s,
+    isBaseRow: e,
+    isXsColumn: g,
+    isXsRow: r,
+    isSmColumn: u,
+    isSmRow: m,
+    isMdColumn: x,
+    isMdRow: t,
+    isLgColumn: w,
+    isLgRow: f,
+    isXlColumn: a,
+    isXlRow: n,
+    is2xlColumn: o,
+    is2xlRow: i
+  } = p(l);
+  return {
+    "gi-flex-row": e,
+    "gi-flex-col": s,
+    "xs:gi-flex-row": r,
+    "xs:gi-flex-col": g,
+    "sm:gi-flex-row": m,
+    "sm:gi-flex-col": u,
+    "md:gi-flex-row": t,
+    "md:gi-flex-col": x,
+    "lg:gi-flex-row": f,
+    "lg:gi-flex-col": w,
+    "xl:gi-flex-row": n,
+    "xl:gi-flex-col": a,
+    "2xl:gi-flex-row": i,
+    "2xl:gi-flex-col": o
+  };
+}, S = (l) => {
+  if (typeof l == "string")
+    return {
+      "gi-w-full": l === "column",
+      "gi-h-[1px]": l === "column",
+      "gi-h-full": l === "row",
+      "gi-w-[1px]": l === "row"
+    };
+  const {
+    isBaseColumn: s,
+    isBaseRow: e,
+    isXsColumn: g,
+    isXsRow: r,
+    isSmColumn: u,
+    isSmRow: m,
+    isMdColumn: x,
+    isMdRow: t,
+    isLgColumn: w,
+    isLgRow: f,
+    isXlColumn: a,
+    isXlRow: n,
+    is2xlColumn: o,
+    is2xlRow: i
+  } = p(l);
+  return {
+    "gi-w-full": s,
+    "gi-h-[1px]": s,
+    "gi-h-full": e,
+    "gi-w-[1px]": e,
+    "xs:gi-w-full": g,
+    "xs:gi-h-[1px]": g,
+    "xs:gi-h-full": r,
+    "xs:gi-w-[1px]": r,
+    "sm:gi-w-full": u,
+    "sm:gi-h-[1px]": u,
+    "sm:gi-h-full": m,
+    "sm:gi-w-[1px]": m,
+    "md:gi-w-full": x,
+    "md:gi-h-[1px]": x,
+    "md:gi-h-full": t,
+    "md:gi-w-[1px]": t,
+    "lg:gi-w-full": w,
+    "lg:gi-h-[1px]": w,
+    "lg:gi-h-full": f,
+    "lg:gi-w-[1px]": f,
+    "xl:gi-w-full": a,
+    "xl:gi-h-[1px]": a,
+    "xl:gi-h-full": n,
+    "xl:gi-w-[1px]": n,
+    "2xl:gi-w-full": o,
+    "2xl:gi-h-[1px]": o,
+    "2xl:gi-h-full": i,
+    "2xl:gi-w-[1px]": i
+  };
+}, v = (l) => ({
+  "gi-items-start": l === "start",
+  "gi-items-center": l === "center",
+  "gi-items-end": l === "end",
+  "gi-items-stretch": l === "stretch"
+}), B = (l) => ({
+  "gi-justify-start": l === "start",
+  "gi-justify-center": l === "center",
+  "gi-justify-end": l === "end",
+  "gi-justify-between": l === "between",
+  "gi-justify-around": l === "around",
+  "gi-justify-evenly": l === "evenly",
+  "gi-justify-stretch": l === "stretch"
+}), $ = (l) => ({
+  "gi-flex-wrap": l,
+  "gi-flex-nowrap": !l
+}), L = (l) => typeof l == "number" && l ? `gi-gap-${l}` : Object.entries(l).map(
+  ([e, g]) => e === "base" ? `gi-gap-${g}` : `${e}:gi-gap-${g}`
+).join(" "), M = ({ direction: l }) => {
+  const s = S(l);
+  return /* @__PURE__ */ C(
+    "div",
+    {
+      className: `${c(s)} gi-bg-gray-400`,
+      "aria-hidden": "true"
+    }
+  );
+}, k = ({
+  children: l,
+  direction: s = "column",
+  fixedHeight: e = "100%",
+  gap: g = 0,
+  hasDivider: r,
+  itemsAlignment: u = "start",
+  itemsDistribution: m = "start",
+  wrap: x = !1,
+  className: t,
+  ...w
+}) => {
+  const f = c(
+    t,
+    "gi-flex",
+    "gi-w-full",
+    B(m),
+    v(u),
+    j(s),
+    L(g),
+    $(x)
+  );
+  return /* @__PURE__ */ C(
+    "div",
+    {
+      className: f,
+      role: "region",
+      style: { height: e },
+      ...w,
+      children: (() => {
+        const n = R.toArray(l);
+        return n.map((o, i) => /* @__PURE__ */ h(y, { children: [
+          d(o) ? X(
+            o,
+            {
+              "data-testid": `govie-stack-item-${i}`
+            }
+          ) : o,
+          r && i < n.length - 1 && /* @__PURE__ */ C(M, { direction: s })
+        ] }, `item_${i}`));
+      })()
+    }
+  );
+};
+k.displayName = "Stack";
+export {
+  k as Stack
+};

package/dist/stack/stack.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/stack/stack.test.js

@@ -0,0 +1,44 @@
+import { jsx as t } from "react/jsx-runtime";
+import { c as s, r as n } from "../test-utilities-BS7B3BF-.js";
+import { Stack as o } from "./stack.js";
+describe("govieStack", () => {
+  afterEach(s);
+  const i = (e) => n(/* @__PURE__ */ t(o, { ...e, "data-testid": "govie-stack" })), c = [
+    /* @__PURE__ */ t("div", { children: "item 1" }, "stack_1"),
+    /* @__PURE__ */ t("div", { children: "item 2" }, "stack_2"),
+    /* @__PURE__ */ t("div", { children: "item 3" }, "stack_3")
+  ];
+  it("should Stack items render correctly", () => {
+    const e = i({
+      direction: "column",
+      itemsAlignment: "center",
+      itemsDistribution: "end",
+      gap: 1,
+      children: c
+    });
+    expect(e.getByTestId("govie-stack")).toBeInTheDocument(), expect(e.getByTestId("govie-stack-item-0")).toBeInTheDocument(), expect(e.getByTestId("govie-stack-item-1")).toBeInTheDocument(), expect(e.getByTestId("govie-stack-item-2")).toBeInTheDocument();
+  }), it("should Stack items render correctly with breakpoint configuration", () => {
+    const e = i({
+      direction: {
+        base: "column",
+        md: "row"
+      },
+      gap: {
+        sm: 2,
+        xs: 1,
+        md: 3
+      },
+      itemsAlignment: "start",
+      itemsDistribution: "start",
+      children: c
+    });
+    expect(e.getByTestId("govie-stack")).toBeInTheDocument(), expect(e.getByTestId("govie-stack-item-0")).toBeInTheDocument(), expect(e.getByTestId("govie-stack-item-1")).toBeInTheDocument(), expect(e.getByTestId("govie-stack-item-2")).toBeInTheDocument();
+  }), it("should pass axe accessibility tests", async () => {
+    await i({
+      direction: "column",
+      itemsAlignment: "start",
+      itemsDistribution: "start",
+      children: c
+    }).axe();
+  });
+});

package/dist/stack/types.d.ts

@@ -0,0 +1,32 @@
+export type Gap = number | {
+    base?: number;
+    xs?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+    '2xl'?: number;
+};
+type SimpleDirection = 'column' | 'row';
+export type Alignment = 'start' | 'center' | 'end' | 'stretch';
+export type Distribution = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' | 'stretch';
+export type Direction = SimpleDirection | {
+    base?: SimpleDirection;
+    xs?: SimpleDirection;
+    sm?: SimpleDirection;
+    md?: SimpleDirection;
+    lg?: SimpleDirection;
+    xl?: SimpleDirection;
+    '2xl'?: SimpleDirection;
+};
+export type StackProps = {
+    direction?: Direction;
+    itemsAlignment?: Alignment;
+    itemsDistribution?: Distribution;
+    gap?: Gap;
+    hasDivider?: boolean;
+    wrap?: boolean;
+    fixedHeight?: string;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+export {};

package/dist/stack/types.js

@@ -0,0 +1 @@
+