@ogcio/design-system-react 1.11.1 → 1.11.3

package/dist/input-radio-group/input-radio-group.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as o } from "react/jsx-runtime";
+import { useState as c, Children as l, isValidElement as d, cloneElement as g } from "react";
+const v = ({
+  groupId: t,
+  inline: n,
+  onChange: r,
+  children: e
+}) => {
+  const [p, s] = c(), u = (i) => {
+    s(i.target.value), r == null || r(i);
+  }, a = l.map(e, (i) => d(i) ? g(i, {
+    onChange: u,
+    checked: p === i.props.value,
+    name: t
+  }) : i);
+  return /* @__PURE__ */ o("div", { className: "gi-input-group-container", children: /* @__PURE__ */ o("div", { className: "gi-input-group-options-container", children: /* @__PURE__ */ o(
+    "div",
+    {
+      role: "radiogroup",
+      className: n ? "gi-input-group-options-inline" : "gi-input-group-options-stacked",
+      children: a
+    }
+  ) }) });
+};
+export {
+  v as InputRadioGroup
+};

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

@@ -0,0 +1,5 @@
+export type InputRadioGroupProps = {
+    groupId: string;
+    inline?: boolean;
+    onChange?: (event?: React.ChangeEvent<HTMLInputElement>) => void;
+};

package/dist/input-radio-group/types.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,19 @@
+import { InputActionButtonProps } from './type.js';
+export declare const InputActionButton: ({ onClick, ariaLabel, icon, dataTestId, ...props }: InputActionButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InputText: import('react').ForwardRefExoticComponent<import('react').InputHTMLAttributes<HTMLInputElement> & {
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    inputClassName?: string;
+    iconStart?: import('../icon/icon.js').IconId;
+    onIconStartClick?: () => void;
+    iconStartClassName?: string;
+    iconEnd?: import('../icon/icon.js').IconId;
+    iconEndClassName?: string;
+    onIconEndClick?: () => void;
+    inputActionButton?: InputActionButtonProps;
+    iconEndRef?: any;
+    inputActionPosition?: "beforeSuffix" | "afterSuffix";
+    type?: "text" | "date" | "datetime-local" | "email" | "month" | "number" | "password" | "tel" | "time" | "url" | "week" | "search";
+    halfFluid?: boolean;
+    clearButtonEnabled?: boolean;
+} & import('react').RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,140 @@
+"use client";
+import { jsx as t, jsxs as m } from "react/jsx-runtime";
+import { forwardRef as f, useRef as _, useImperativeHandle as j, useMemo as C } from "react";
+import { cn as c } from "../cn.js";
+import { Icon as o } from "../icon/icon.js";
+import { IconButton as O } from "../icon-button/icon-button.js";
+import { Input as S } from "../primitives/input.js";
+const b = f(
+  ({ onChange: a, ...r }, n) => {
+    const e = _(null);
+    return j(n, () => e.current), /* @__PURE__ */ t(
+      p,
+      {
+        ...r,
+        onChange: a,
+        ref: e,
+        inputActionButton: {
+          icon: "close",
+          onClick: () => {
+            e != null && e.current && (e.current.value = "", e.current.focus());
+            const d = {
+              target: e.current,
+              currentTarget: e.current,
+              __origin: "clear_button"
+            };
+            a && a(d);
+          }
+        }
+      }
+    );
+  }
+), p = f(
+  ({
+    prefix: a,
+    inputActionButton: r,
+    inputActionPosition: n = "beforeSuffix",
+    suffix: e,
+    halfFluid: s = !1,
+    className: d,
+    type: h = "text",
+    iconStart: u,
+    iconStartClassName: v,
+    onIconStartClick: g,
+    iconEnd: l,
+    iconEndClassName: I,
+    onIconEndClick: N,
+    disabled: i,
+    inputClassName: k,
+    iconEndRef: T,
+    ...w
+  }, z) => {
+    const R = C(() => r && n === "beforeSuffix" ? /* @__PURE__ */ t(
+      "div",
+      {
+        className: "gi-input-text-action-before-suffix",
+        "data-suffix": !!e,
+        "data-has-icon-end": !!l,
+        children: /* @__PURE__ */ t(x, { ...r, disabled: i })
+      }
+    ) : null, [r]);
+    return /* @__PURE__ */ m("div", { className: c(d, "gi-input-text-container"), children: [
+      a && /* @__PURE__ */ t("div", { className: "gi-input-text-prefix", "data-disabled": i, children: a }),
+      /* @__PURE__ */ m(
+        "div",
+        {
+          className: c("gi-input-text-inner", {
+            "gi-input-half-width": s
+          }),
+          children: [
+            u && /* @__PURE__ */ t(
+              "div",
+              {
+                className: c("gi-input-text-icon-start", v),
+                onClick: g,
+                "data-prefix": !!a,
+                children: /* @__PURE__ */ t(o, { icon: u, size: "md", disabled: i })
+              }
+            ),
+            /* @__PURE__ */ t(
+              S,
+              {
+                type: h,
+                "data-icon-start": !!u,
+                "data-icon-end": !!l,
+                "data-end-element": !!r,
+                "data-prefix": !!a,
+                "data-suffix": !!e,
+                className: c(k, "gi-input-text"),
+                ref: z,
+                disabled: i,
+                ...w
+              }
+            ),
+            l && /* @__PURE__ */ t(
+              "div",
+              {
+                className: c("gi-input-text-icon-end", I),
+                "data-end-element": !!r && n === "afterSuffix",
+                "data-suffix": !!e,
+                onClick: N,
+                ref: T,
+                children: /* @__PURE__ */ t(o, { icon: l, size: "md", disabled: i })
+              }
+            ),
+            R
+          ]
+        }
+      ),
+      r && n === "afterSuffix" && /* @__PURE__ */ t("div", { className: "gi-input-text-end-element", "data-suffix": !!e, children: /* @__PURE__ */ t(x, { ...r, disabled: i }) }),
+      e && /* @__PURE__ */ t("div", { className: "gi-input-text-suffix", "data-disabled": i, children: e })
+    ] });
+  }
+), x = ({
+  onClick: a,
+  ariaLabel: r,
+  icon: n,
+  dataTestId: e,
+  ...s
+}) => /* @__PURE__ */ t(
+  O,
+  {
+    ...s,
+    icon: {
+      icon: n
+    },
+    "data-testid": e,
+    "aria-label": r || "",
+    onClick: a,
+    variant: "flat",
+    size: "small",
+    appearance: "dark"
+  }
+), H = f(
+  ({ type: a = "text", clearButtonEnabled: r, ...n }, e) => r ? /* @__PURE__ */ t(b, { ref: e, type: a, ...n }) : /* @__PURE__ */ t(p, { ref: e, type: a, ...n })
+);
+H.displayName = "InputText";
+export {
+  x as InputActionButton,
+  H as InputText
+};

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

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+import { IconId } from '../icon/icon.js';
+export type InputActionButtonProps = {
+    icon: IconId;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    disabled?: boolean;
+    ariaLabel?: string;
+    dataTestId?: string;
+    ref?: React.Ref<HTMLButtonElement>;
+};
+export type InputTextProps = React.InputHTMLAttributes<HTMLInputElement> & {
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    inputClassName?: string;
+    iconStart?: IconId;
+    onIconStartClick?: () => void;
+    iconStartClassName?: string;
+    iconEnd?: IconId;
+    iconEndClassName?: string;
+    onIconEndClick?: () => void;
+    inputActionButton?: InputActionButtonProps;
+    iconEndRef?: any;
+    inputActionPosition?: 'beforeSuffix' | 'afterSuffix';
+    type?: 'text' | 'date' | 'datetime-local' | 'email' | 'month' | 'number' | 'password' | 'tel' | 'time' | 'url' | 'week' | 'search';
+    halfFluid?: boolean;
+    clearButtonEnabled?: boolean;
+};

package/dist/input-text/type.js

@@ -0,0 +1 @@
+

package/dist/label/label.d.ts

@@ -0,0 +1,11 @@
+export declare const LabelSize: {
+    readonly Small: "sm";
+    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>>;

package/dist/label/label.js

@@ -0,0 +1,27 @@
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as r } from "react";
+import { c as o } from "../index-DNkhmzZp.js";
+const d = {
+  Small: "sm",
+  Medium: "md",
+  Large: "lg"
+}, g = o({
+  base: "gi-label",
+  variants: {
+    size: {
+      sm: "gi-text-sm",
+      md: "gi-text-md",
+      lg: "gi-text-lg"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}), b = r(
+  ({ text: e, size: a = d.Medium, className: l, children: m, ...t }, i) => /* @__PURE__ */ s("label", { className: g({ size: a, className: l }), ref: i, ...t, children: m ?? e })
+);
+b.displayName = "Label";
+export {
+  b as Label,
+  d as LabelSize
+};

package/dist/label/types.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+import { LabelSize } from './label.js';
+export type LabelSizeType = (typeof LabelSize)[keyof typeof LabelSize];
+export type LabelTextProps = PropsWithChildren<React.LabelHTMLAttributes<HTMLLabelElement> & {
+    text?: string | React.ReactElement;
+    size?: LabelSizeType;
+}>;

package/dist/label/types.js

@@ -0,0 +1 @@
+

package/dist/link/link.d.ts

@@ -0,0 +1,47 @@
+import { default as React } from 'react';
+import { ButtonAppearance, ButtonSize, ButtonVariant } from '../button/types.js';
+import { IconId } from '../icon/icon.js';
+import { AnchorProps } from '../primitives/anchor.js';
+export type LinkProps = AnchorProps & {
+    href?: string;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    asChild?: boolean;
+    noVisited?: boolean;
+    noUnderline?: boolean;
+    noColor?: boolean;
+    external?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    dataTestid?: string;
+    asButton?: {
+        variant?: ButtonVariant;
+        appearance?: ButtonAppearance;
+        size?: ButtonSize;
+    };
+    iconStart?: IconId;
+    iconEnd?: IconId;
+    disabled?: boolean;
+    appearance?: Extract<ButtonAppearance, 'default' | 'light'>;
+};
+export declare const Link: React.ForwardRefExoticComponent<React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    external?: boolean;
+    asChild?: boolean;
+} & {
+    href?: string;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    asChild?: boolean;
+    noVisited?: boolean;
+    noUnderline?: boolean;
+    noColor?: boolean;
+    external?: boolean;
+    size?: "sm" | "md" | "lg";
+    dataTestid?: string;
+    asButton?: {
+        variant?: ButtonVariant;
+        appearance?: ButtonAppearance;
+        size?: ButtonSize;
+    };
+    iconStart?: IconId;
+    iconEnd?: IconId;
+    disabled?: boolean;
+    appearance?: Extract<ButtonAppearance, "default" | "light">;
+} & React.RefAttributes<HTMLElement>>;

package/dist/link/link.js

@@ -0,0 +1,104 @@
+import { jsx as n, jsxs as S, Fragment as b } from "react/jsx-runtime";
+import { a as j } from "../index-ntYL1VRC.js";
+import { forwardRef as w } from "react";
+import { getVariantAppearanceClass as I, getSizeClass as L } from "../button/helpers.js";
+import { cn as A } from "../cn.js";
+import { Icon as s } from "../icon/icon.js";
+import y from "../primitives/anchor.js";
+const F = ({
+  size: r,
+  iconStart: e,
+  asChild: l,
+  asButton: m,
+  children: p,
+  iconEnd: c
+}) => {
+  const a = "sm", g = e && !m && !l, o = c && !m && !l;
+  return /* @__PURE__ */ S(b, { children: [
+    g && /* @__PURE__ */ n(
+      "span",
+      {
+        className: "gi-link-icon gi-link-icon-start",
+        "data-size": r || "sm",
+        children: /* @__PURE__ */ n(s, { icon: e, size: a })
+      }
+    ),
+    o || g ? /* @__PURE__ */ n("span", { className: "gi-pr-5 gi-pl-5", children: p }) : p,
+    o && /* @__PURE__ */ n(
+      "span",
+      {
+        className: "gi-link-icon gi-link-icon-end",
+        "data-size": r || "sm",
+        children: /* @__PURE__ */ n(s, { icon: c, size: a })
+      }
+    )
+  ] });
+}, R = w(
+  ({
+    size: r,
+    asChild: e,
+    className: l,
+    children: m,
+    dataTestid: p,
+    noVisited: c,
+    noUnderline: a,
+    noColor: g,
+    external: o,
+    asButton: i,
+    iconStart: x,
+    iconEnd: h,
+    disabled: f,
+    appearance: k,
+    ...d
+  }, v) => {
+    const N = i && I({
+      disabled: !1,
+      variant: i == null ? void 0 : i.variant,
+      appearance: i == null ? void 0 : i.appearance
+    }), z = i && L(i == null ? void 0 : i.size);
+    return /* @__PURE__ */ n(
+      e ? j : y,
+      {
+        ...d,
+        ref: v,
+        "data-testid": p,
+        className: A(
+          {
+            "gi-link": !i,
+            "gi-link-no-underline": !i && a,
+            "gi-link-no-visited": !i && c,
+            "gi-link-inherit": !i && g,
+            "gi-btn": i,
+            "!gi-inline-flex": i,
+            "gi-link-disabled": f && !i && !e,
+            "gi-link-light": k === "light" && !i && !e && !g && !c && !f,
+            "gi-text-sm": r === "sm",
+            "gi-text-md": r === "md",
+            "gi-text-lg": r === "lg"
+          },
+          N,
+          z,
+          l
+        ),
+        "data-appearance": k,
+        external: o,
+        href: f ? "javascript:void(0)" : d.href,
+        children: e ? m : /* @__PURE__ */ n(
+          F,
+          {
+            asButton: i,
+            asChild: e,
+            iconEnd: h,
+            iconStart: x,
+            size: r,
+            children: m
+          }
+        )
+      }
+    );
+  }
+);
+R.displayName = "Link";
+export {
+  R as Link
+};

package/dist/list/list.d.ts

@@ -0,0 +1,13 @@
+export declare const ListTypeEnum: {
+    readonly None: "none";
+    readonly Bullet: "bullet";
+    readonly Number: "number";
+};
+export type ListType = (typeof ListTypeEnum)[keyof typeof ListTypeEnum];
+export type ListProps = {
+    items: Array<string | React.ReactElement>;
+    spaced?: boolean;
+    type?: ListType;
+    dataTestid?: string;
+} & React.HTMLAttributes<HTMLUListElement>;
+export declare function List({ items, type, spaced, ...props }: ListProps): import("react/jsx-runtime").JSX.Element;

package/dist/list/list.js

@@ -0,0 +1,44 @@
+import { jsx as n } from "react/jsx-runtime";
+const s = {
+  None: "none",
+  Bullet: "bullet",
+  Number: "number"
+}, a = ({ spaced: i, type: t }) => {
+  const e = [];
+  switch (t) {
+    case s.Bullet: {
+      e.push("gi-list-bullet");
+      break;
+    }
+    case s.Number: {
+      e.push("gi-list-number");
+      break;
+    }
+    default: {
+      e.push("gi-list");
+      break;
+    }
+  }
+  return i && e.push("gi-list-spaced"), e.join(" ");
+};
+function o({
+  items: i,
+  type: t = s.None,
+  spaced: e,
+  ...l
+}) {
+  return /* @__PURE__ */ n(
+    "ul",
+    {
+      role: t === s.None ? "list" : void 0,
+      className: a({ spaced: e, type: t }),
+      "data-testId": l.dataTestid,
+      ...l,
+      children: i.map((u, r) => /* @__PURE__ */ n("li", { children: u }, `listItem-${r}`))
+    }
+  );
+}
+export {
+  o as List,
+  s as ListTypeEnum
+};

package/dist/list-item/list-item.d.ts

@@ -0,0 +1,9 @@
+export type ListItemProps = {
+    label?: string;
+    action?: () => void;
+    href?: string;
+    external?: boolean;
+    bold?: boolean;
+    slot?: React.ReactNode;
+};
+export declare function ListItem({ label, href, external, bold, slot }: ListItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/list-item/list-item.js

@@ -0,0 +1,19 @@
+import { jsx as m } from "react/jsx-runtime";
+import { cn as n } from "../cn.js";
+import s from "../primitives/anchor.js";
+function f({ label: i, href: t, external: o, bold: e, slot: r }) {
+  return /* @__PURE__ */ m(
+    s,
+    {
+      "aria-label": i,
+      href: t,
+      className: n("gi-list-item", { "gi-font-bold": e }),
+      external: o,
+      asChild: !!r,
+      children: r || /* @__PURE__ */ m("span", { className: "gi-text-sm gi-ml-1", children: i })
+    }
+  );
+}
+export {
+  f as ListItem
+};

package/dist/modal/modal.content.d.ts

@@ -0,0 +1,2 @@
+export declare const HtmlContent: import("react/jsx-runtime").JSX.Element;
+export declare const TriggerButton: import("react/jsx-runtime").JSX.Element;

package/dist/modal/modal.content.js

@@ -0,0 +1,19 @@
+import { jsxs as i, Fragment as r, jsx as t } from "react/jsx-runtime";
+import { Button as o } from "../button/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" }),
+  /* @__PURE__ */ t(a, { children: /* @__PURE__ */ t("p", { className: "gi-paragraph-md", children: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam molestias error accusantium non nobis excepturi doloremque dolorem possimus corrupti. Nostrum quisquam est voluptate! Iure suscipit, commodi cupiditate sit minima veritatis." }) }),
+  /* @__PURE__ */ t(n, { children: /* @__PURE__ */ t(o, { children: "Primary" }) })
+] }), d = /* @__PURE__ */ t(
+  "button",
+  {
+    "data-testid": "trigger-button-container",
+    className: "gi-btn gi-btn-primary gi-btn-regular",
+    children: "Open Modal"
+  }
+);
+export {
+  c as HtmlContent,
+  d as TriggerButton
+};

package/dist/modal/modal.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { HeadingProps } from '../heading/heading.js';
+import { ModalFooterProps, ModalProps, ModalWrapperProps } from './types.js';
+export declare const ModalWrapper: ({ position, size, closeOnClick, closeOnOverlayClick, isOpen, onClose, closeButtonLabel, className, children, closeButtonSize, dataTestId, ...props }: ModalWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ModalTitle: ({ children, as, ...props }: HeadingProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ModalBody: ({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const ModalFooter: ({ className, children, orientation, dataModalSize, }: ModalFooterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Modal: ({ children, triggerButton, startsOpen, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;