@ogcio/design-system-react 1.28.0 → 1.30.0

package/dist/atoms/DsButton.js

@@ -0,0 +1,329 @@
+"use client";
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { c } from "../index-CB-zPpNk.js";
+const r = {
+  PRIMARY: "primary",
+  SECONDARY: "secondary",
+  FLAT: "flat"
+}, i = {
+  DEFAULT: "default",
+  DARK: "dark",
+  LIGHT: "light"
+}, o = {
+  SMALL: "small",
+  MEDIUM: "medium",
+  LARGE: "large"
+}, g = c({
+  base: [
+    "gi-border-solid",
+    "gi-border-sm",
+    "gi-gap-2",
+    "gi-flex",
+    "gi-rounded-sm",
+    "gi-items-center",
+    //disabled
+    "disabled:gi-cursor-not-allowed",
+    "disabled:gi-pointer-events-none",
+    // focus
+    "focus:gi-outline",
+    "focus:gi-outline-sm",
+    "focus:gi-outline-color-shadow-intent-focus-default",
+    "focus:gi-outline-offset-0",
+    "focus:gi-border-solid",
+    "focus:gi-border-color-border-intent-focus-default",
+    "focus:gi-border-sm",
+    "focus:gi-rounded-sm"
+  ],
+  variants: {
+    variant: {
+      primary: [
+        "gi-border-transparent",
+        "focus:gi-shadow-color-border-intent-focus-light",
+        "focus:gi-shadow-[inset_0_0_0_2px]"
+      ],
+      secondary: [],
+      flat: ["gi-border-base-transparent"]
+    },
+    appearance: {
+      default: "",
+      light: "",
+      dark: ""
+    },
+    size: {
+      small: "gi-h-8 gi-px-2 gi-py-1.5 gi-text-xs",
+      medium: "gi-h-10 gi-px-3 gi-py-2 gi-text-sm",
+      large: "gi-h-12 gi-px-4 gi-py-3 gi-text-2md"
+    },
+    disabled: {
+      true: "",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "primary",
+      appearance: "default",
+      disabled: !1,
+      class: [
+        "gi-text-color-text-tone-primary-fill-default",
+        "gi-bg-color-surface-tone-primary-fill-default",
+        "gi-stroke-color-text-tone-primary-fill-default",
+        "hover:gi-bg-color-surface-tone-primary-fill-hover",
+        "focus:gi-bg-color-surface-tone-primary-fill-hover"
+      ]
+    },
+    {
+      variant: "primary",
+      appearance: "light",
+      disabled: !1,
+      class: [
+        "gi-text-color-text-tone-light-fill-default",
+        "gi-stroke-color-text-tone-light-fill-default",
+        "gi-bg-color-surface-tone-light-fill-default",
+        "hover:gi-bg-color-surface-tone-light-fill-hover",
+        "focus:gi-bg-color-surface-tone-light-fill-hover"
+      ]
+    },
+    {
+      variant: "primary",
+      appearance: "dark",
+      disabled: !1,
+      class: [
+        "gi-text-color-text-tone-dark-fill-default",
+        "gi-stroke-color-text-tone-dark-fill-default",
+        "gi-bg-color-surface-tone-dark-fill-default",
+        "hover:gi-bg-color-surface-tone-dark-fill-hover",
+        "focus:gi-bg-color-surface-tone-dark-fill-hover"
+      ]
+    },
+    {
+      variant: "primary",
+      appearance: "default",
+      disabled: !0,
+      class: [
+        "gi-bg-color-surface-tone-primary-fill-disabled",
+        "gi-text-color-text-tone-primary-fill-disabled",
+        "gi-stroke-color-text-tone-primary-fill-disabled"
+      ]
+    },
+    {
+      variant: "primary",
+      appearance: "light",
+      disabled: !0,
+      class: [
+        "gi-bg-color-surface-tone-light-fill-disabled",
+        "gi-text-color-text-tone-light-fill-disabled",
+        "gi-stroke-color-text-tone-light-fill-disabled"
+      ]
+    },
+    {
+      variant: "primary",
+      appearance: "dark",
+      disabled: !0,
+      class: [
+        "gi-bg-color-surface-tone-dark-fill-disabled",
+        "gi-text-color-text-tone-dark-fill-disabled",
+        "gi-stroke-color-text-tone-dark-fill-disabled"
+      ]
+    },
+    {
+      variant: "secondary",
+      appearance: "default",
+      disabled: !1,
+      class: [
+        "gi-border-color-border-tone-primary-outline-default",
+        "gi-text-color-text-tone-primary-outline-default",
+        "gi-stroke-color-text-tone-primary-outline-default",
+        "hover:gi-bg-color-surface-tone-primary-outline-hover",
+        "focus:gi-bg-color-surface-tone-primary-outline-hover"
+      ]
+    },
+    {
+      variant: "secondary",
+      appearance: "light",
+      disabled: !1,
+      class: [
+        "gi-text-color-text-tone-light-outline-default",
+        "gi-stroke-color-text-tone-light-outline-default",
+        "gi-border-color-border-tone-light-outline-default",
+        "gi-bg-base-transparent",
+        "hover:gi-bg-color-surface-tone-light-outline-hover",
+        "focus:gi-bg-color-surface-tone-dark-fill-hover"
+      ]
+    },
+    {
+      variant: "secondary",
+      appearance: "dark",
+      disabled: !1,
+      class: [
+        "gi-border-color-border-tone-dark-outline-default",
+        "gi-bg-color-surface-tone-dark-outline-default",
+        "hover:gi-bg-color-surface-tone-dark-outline-hover",
+        "focus:gi-bg-color-surface-tone-light-fill-hover"
+      ]
+    },
+    {
+      variant: "secondary",
+      appearance: "default",
+      disabled: !0,
+      class: [
+        "gi-border-color-border-tone-primary-outline-disabled",
+        "gi-bg-color-surface-tone-primary-outline-disabled",
+        "gi-text-color-text-tone-primary-outline-disabled",
+        "gi-stroke-color-text-tone-primary-outline-disabled"
+      ]
+    },
+    {
+      variant: "secondary",
+      appearance: "light",
+      disabled: !0,
+      class: [
+        "gi-bg-color-surface-tone-light-outline-disabled",
+        "gi-border-color-border-tone-light-outline-disabled",
+        "gi-text-color-text-tone-light-outline-disabled",
+        "gi-stroke-color-text-tone-light-outline-disabled"
+      ]
+    },
+    {
+      variant: "secondary",
+      appearance: "dark",
+      disabled: !0,
+      class: [
+        "gi-border-color-border-tone-dark-outline-disabled",
+        "gi-bg-color-surface-tone-dark-fill-disabled",
+        "gi-text-color-text-tone-dark-outline-disabled",
+        "gi-stroke-color-text-tone-dark-outline-disabled"
+      ]
+    },
+    {
+      variant: "flat",
+      appearance: "default",
+      disabled: !1,
+      class: [
+        "gi-text-color-text-tone-primary-flat-default",
+        "gi-stroke-color-text-tone-primary-flat-default",
+        "gi-bg-base-transparent",
+        "hover:gi-bg-color-surface-tone-primary-flat-hover",
+        "focus:gi-bg-color-surface-tone-primary-outline-hover"
+      ]
+    },
+    {
+      variant: "flat",
+      appearance: "light",
+      disabled: !1,
+      class: [
+        "gi-bg-color-surface-tone-light-flat-default",
+        "gi-text-color-text-tone-light-flat-default",
+        "gi-stroke-color-text-tone-light-flat-default",
+        "hover:gi-bg-color-surface-tone-light-flat-hover",
+        "focus:gi-bg-color-surface-tone-dark-fill-hover"
+      ]
+    },
+    {
+      variant: "flat",
+      appearance: "dark",
+      disabled: !1,
+      class: [
+        "gi-text-color-text-tone-dark-flat-default",
+        "gi-stroke-color-text-tone-dark-flat-default",
+        "hover:gi-bg-color-surface-tone-dark-flat-hover",
+        "focus:gi-bg-color-surface-tone-light-fill-hover"
+      ]
+    },
+    {
+      variant: "flat",
+      appearance: "default",
+      disabled: !0,
+      class: [
+        "gi-text-color-text-tone-primary-flat-disabled",
+        "gi-stroke-color-text-tone-primary-flat-disabled",
+        "gi-bg-color-surface-tone-primary-flat-disabled"
+      ]
+    },
+    {
+      variant: "flat",
+      appearance: "light",
+      disabled: !0,
+      class: [
+        "gi-bg-color-surface-tone-light-flat-disabled",
+        "gi-text-color-text-tone-light-flat-disabled",
+        "gi-stroke-color-text-tone-light-flat-disabled"
+      ]
+    },
+    {
+      variant: "flat",
+      appearance: "dark",
+      disabled: !0,
+      class: [
+        "gi-bg-color-surface-tone-dark-flat-disabled",
+        "gi-text-color-text-tone-dark-flat-disabled",
+        "gi-stroke-color-text-tone-dark-flat-disabled"
+      ]
+    }
+  ],
+  defaultVariants: {
+    variant: "primary",
+    appearance: "default",
+    size: "medium",
+    disabled: !1
+  }
+}), f = (t = r.PRIMARY) => Object.values(r).includes(t) ? t : r.PRIMARY, u = (t) => t === i.LIGHT || t === i.DARK ? t : i.DEFAULT, b = (t) => t === o.SMALL || t === o.LARGE ? t : o.MEDIUM, y = s(function(e, d) {
+  return /* @__PURE__ */ n(
+    "button",
+    {
+      ref: d,
+      id: e.id,
+      className: g({
+        variant: f(e.variant),
+        appearance: u(e.appearance),
+        size: b(e.size),
+        disabled: e.disabled,
+        class: e.className
+      }),
+      disabled: e.disabled,
+      onClick: (l) => {
+        var a;
+        return (a = e.onClick) == null ? void 0 : a.call(e, l);
+      },
+      onFocus: (l) => {
+        var a;
+        return (a = e.onFocus) == null ? void 0 : a.call(e, l);
+      },
+      onBlur: (l) => {
+        var a;
+        return (a = e.onBlur) == null ? void 0 : a.call(e, l);
+      },
+      onKeyDown: (l) => {
+        var a;
+        return (a = e.onKeyDown) == null ? void 0 : a.call(e, l);
+      },
+      onKeyUp: (l) => {
+        var a;
+        return (a = e.onKeyUp) == null ? void 0 : a.call(e, l);
+      },
+      "aria-label": e.ariaLabel,
+      "aria-labelledby": e.ariaLabelledBy,
+      "aria-describedby": e.ariaDescribedBy,
+      "aria-pressed": e.ariaPressed,
+      "aria-expanded": e.ariaExpanded,
+      "aria-controls": e.ariaControls,
+      "aria-haspopup": e.ariaHasPopup,
+      "aria-busy": e.ariaBusy,
+      role: e.role,
+      type: e.type ?? "button",
+      form: e.form,
+      value: e.value,
+      tabIndex: e.tabIndex,
+      "data-testid": e.dataTestId ?? e.dataTestid,
+      children: e.children
+    }
+  );
+});
+export {
+  i as Appearance,
+  o as Size,
+  r as Variant,
+  y as default,
+  g as styles
+};

package/dist/atoms/icons/Close.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from './types';
+declare function Close(props: IconProps): import("react/jsx-runtime").JSX.Element;
+export default Close;

package/dist/atoms/icons/Close.js

@@ -0,0 +1,22 @@
+import { jsx as a } from "react/jsx-runtime";
+function l(e) {
+  return /* @__PURE__ */ a(
+    "svg",
+    {
+      viewBox: "0 -960 960 960",
+      width: e.size ?? 24,
+      height: e.size ?? 24,
+      className: e.className,
+      id: e.id,
+      role: e.role,
+      "aria-label": e.ariaLabel,
+      "aria-hidden": e.ariaHidden ?? "true",
+      fill: e.color ?? "currentColor",
+      "data-testid": e.dataTestId ?? "close",
+      children: /* @__PURE__ */ a("path", { d: "m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" })
+    }
+  );
+}
+export {
+  l as default
+};

package/dist/atoms/icons/KeyboardArrowDown.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from './types';
+declare function KeyboardArrowDown(props: IconProps): import("react/jsx-runtime").JSX.Element;
+export default KeyboardArrowDown;

package/dist/atoms/icons/KeyboardArrowDown.js

@@ -0,0 +1,22 @@
+import { jsx as e } from "react/jsx-runtime";
+function d(a) {
+  return /* @__PURE__ */ e(
+    "svg",
+    {
+      viewBox: "0 -960 960 960",
+      width: a.size ?? 24,
+      height: a.size ?? 24,
+      className: a.className,
+      id: a.id,
+      role: a.role,
+      "aria-label": a.ariaLabel,
+      "aria-hidden": a.ariaHidden ?? "true",
+      fill: a.color ?? "currentColor",
+      "data-testid": a.dataTestId ?? "keyboard_arrow_down",
+      children: /* @__PURE__ */ e("path", { d: "M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z" })
+    }
+  );
+}
+export {
+  d as default
+};

package/dist/atoms/icons/KeyboardArrowUp.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from './types';
+declare function KeyboardArrowUp(props: IconProps): import("react/jsx-runtime").JSX.Element;
+export default KeyboardArrowUp;

package/dist/atoms/icons/KeyboardArrowUp.js

@@ -0,0 +1,22 @@
+import { jsx as e } from "react/jsx-runtime";
+function d(a) {
+  return /* @__PURE__ */ e(
+    "svg",
+    {
+      viewBox: "0 -960 960 960",
+      width: a.size ?? 24,
+      height: a.size ?? 24,
+      className: a.className,
+      id: a.id,
+      role: a.role,
+      "aria-label": a.ariaLabel,
+      "aria-hidden": a.ariaHidden ?? "true",
+      fill: a.color ?? "currentColor",
+      "data-testid": a.dataTestId ?? "keyboard_arrow_up",
+      children: /* @__PURE__ */ e("path", { d: "M480-528 296-344l-56-56 240-240 240 240-56 56-184-184Z" })
+    }
+  );
+}
+export {
+  d as default
+};

package/dist/atoms/icons/Visibility.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from './types';
+declare function Visibility(props: IconProps): import("react/jsx-runtime").JSX.Element;
+export default Visibility;

package/dist/atoms/icons/Visibility.js

@@ -0,0 +1,22 @@
+import { jsx as t } from "react/jsx-runtime";
+function e(i) {
+  return /* @__PURE__ */ t(
+    "svg",
+    {
+      viewBox: "0 -960 960 960",
+      width: i.size ?? 24,
+      height: i.size ?? 24,
+      className: i.className,
+      id: i.id,
+      role: i.role,
+      "aria-label": i.ariaLabel,
+      "aria-hidden": i.ariaHidden ?? "true",
+      fill: i.color ?? "currentColor",
+      "data-testid": i.dataTestId ?? "visibility",
+      children: /* @__PURE__ */ t("path", { d: "M607.5-372.5Q660-425 660-500t-52.5-127.5Q555-680 480-680t-127.5 52.5Q300-575 300-500t52.5 127.5Q405-320 480-320t127.5-52.5Zm-204-51Q372-455 372-500t31.5-76.5Q435-608 480-608t76.5 31.5Q588-545 588-500t-31.5 76.5Q525-392 480-392t-76.5-31.5ZM214-281.5Q94-363 40-500q54-137 174-218.5T480-800q146 0 266 81.5T920-500q-54 137-174 218.5T480-200q-146 0-266-81.5ZM480-500Zm207.5 160.5Q782-399 832-500q-50-101-144.5-160.5T480-720q-113 0-207.5 59.5T128-500q50 101 144.5 160.5T480-280q113 0 207.5-59.5Z" })
+    }
+  );
+}
+export {
+  e as default
+};

package/dist/atoms/icons/VisibilityOff.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from './types';
+declare function VisibilityOff(props: IconProps): import("react/jsx-runtime").JSX.Element;
+export default VisibilityOff;

package/dist/atoms/icons/VisibilityOff.js

@@ -0,0 +1,22 @@
+import { jsx as i } from "react/jsx-runtime";
+function e(t) {
+  return /* @__PURE__ */ i(
+    "svg",
+    {
+      viewBox: "0 -960 960 960",
+      width: t.size ?? 24,
+      height: t.size ?? 24,
+      className: t.className,
+      id: t.id,
+      "data-testid": t.dataTestId,
+      role: t.role,
+      "aria-label": t.ariaLabel,
+      "aria-hidden": t.ariaHidden ?? "true",
+      fill: t.color ?? "currentColor",
+      children: /* @__PURE__ */ i("path", { d: "m644-428-58-58q9-47-27-88t-93-32l-58-58q17-8 34.5-12t37.5-4q75 0 127.5 52.5T660-500q0 20-4 37.5T644-428Zm128 126-58-56q38-29 67.5-63.5T832-500q-50-101-143.5-160.5T480-720q-29 0-57 4t-55 12l-62-62q41-17 84-25.5t90-8.5q151 0 269 83.5T920-500q-23 59-60.5 109.5T772-302Zm20 246L624-222q-35 11-70.5 16.5T480-200q-151 0-269-83.5T40-500q21-53 53-98.5t73-81.5L56-792l56-56 736 736-56 56ZM222-624q-29 26-53 57t-41 67q50 101 143.5 160.5T480-280q20 0 39-2.5t39-5.5l-36-38q-11 3-21 4.5t-21 1.5q-75 0-127.5-52.5T300-500q0-11 1.5-21t4.5-21l-84-82Zm319 93Zm-151 75Z" })
+    }
+  );
+}
+export {
+  e as default
+};

package/dist/atoms/icons/index.d.ts

@@ -0,0 +1,6 @@
+export { default as KeyboardArrowDown } from './KeyboardArrowDown';
+export { default as KeyboardArrowUp } from './KeyboardArrowUp';
+export { default as Close } from './Close';
+export { default as Visibility } from './Visibility';
+export { default as VisibilityOff } from './VisibilityOff';
+export * from './types';

package/dist/atoms/icons/index.js

@@ -0,0 +1,12 @@
+import { default as e } from "./KeyboardArrowDown.js";
+import { default as f } from "./KeyboardArrowUp.js";
+import { default as i } from "./Close.js";
+import { default as s } from "./Visibility.js";
+import { default as p } from "./VisibilityOff.js";
+export {
+  i as Close,
+  e as KeyboardArrowDown,
+  f as KeyboardArrowUp,
+  s as Visibility,
+  p as VisibilityOff
+};

package/dist/atoms/icons/types.d.ts

@@ -0,0 +1,10 @@
+export type IconProps = {
+    id?: string;
+    className?: string;
+    size?: string | number;
+    color?: string;
+    role?: string;
+    ariaLabel?: string;
+    ariaHidden?: boolean;
+    dataTestId?: string;
+};

package/dist/atoms/icons/types.js

@@ -0,0 +1 @@
+

package/dist/atoms/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DsButton } from './DsButton';
+export * from './icons';

package/dist/atoms/index.js

@@ -0,0 +1,14 @@
+import { default as t } from "./DsButton.js";
+import { default as a } from "./icons/KeyboardArrowDown.js";
+import { default as s } from "./icons/KeyboardArrowUp.js";
+import { default as d } from "./icons/Close.js";
+import { default as p } from "./icons/Visibility.js";
+import { default as m } from "./icons/VisibilityOff.js";
+export {
+  d as Close,
+  t as DsButton,
+  a as KeyboardArrowDown,
+  s as KeyboardArrowUp,
+  p as Visibility,
+  m as VisibilityOff
+};