@ogcio/design-system-react 1.31.1 → 1.33.0

package/dist/Heading.d.ts

@@ -0,0 +1,5 @@
+import { Props as CoreProps } from './atoms/heading';
+export type Props = CoreProps & {
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+};
+export default function Heading({ as, ...props }: Props): import("react/jsx-runtime").JSX.Element;

package/dist/Heading.js

@@ -0,0 +1,22 @@
+import { jsx as t } from "react/jsx-runtime";
+import p from "./atoms/heading/H1.js";
+import f from "./atoms/heading/H2.js";
+import i from "./atoms/heading/H3.js";
+import n from "./atoms/heading/H4.js";
+import h from "./atoms/heading/H5.js";
+import H from "./atoms/heading/H6.js";
+const e = {
+  h1: p,
+  h2: f,
+  h3: i,
+  h4: n,
+  h5: h,
+  h6: H
+};
+function j({ as: o = "h1", ...r }) {
+  const m = e[o];
+  return /* @__PURE__ */ t(m, { ...r });
+}
+export {
+  j as default
+};

package/dist/accordion/accordion-item.js

@@ -1,61 +1,46 @@
 "use client";
-import { jsxs as r, Fragment as u, jsx as a } from "react/jsx-runtime";
-import { c as t } from "../clsx-OuTLNxxd.js";
-import { useState as y, useRef as b } from "react";
-import { c as h } from "../index-CB-zPpNk.js";
-import { Icon as w } from "../icon/icon.js";
-const I = h({
-  variants: {
-    variant: {
-      default: "gi-px-2 gi-py-4 gi-text-md gi-font-bold",
-      small: "gi-py-2 gi-px-2 gi-text-sm gi-font-bold"
-    }
-  }
-}), j = ({
-  defaultExpanded: s,
+import { jsxs as n, Fragment as y, jsx as a } from "react/jsx-runtime";
+import { c as s } from "../clsx-OuTLNxxd.js";
+import { useState as w, useRef as I } from "react";
+import { c as k } from "../index-CB-zPpNk.js";
+import { Icon as v } from "../icon/icon.js";
+const $ = ({
+  defaultExpanded: d,
   children: c,
-  label: i,
-  disabled: n,
+  label: o,
+  disabled: t,
   className: l,
-  variant: e = "default",
-  ...m
+  variant: i = "default",
+  ...g
 }) => {
-  const [o, d] = y(s), g = b(null), p = `${i}-button`, f = `${i}-panel`;
-  return /* @__PURE__ */ r(u, { children: [
+  const [e, r] = w(d), m = I(null), p = `${o}-button`, f = `${o}-panel`, u = (h) => {
+    h.key === "Enter" && !t && r(!e);
+  }, { base: x, header: b } = N({ variant: i, disabled: !!t });
+  return /* @__PURE__ */ n(y, { children: [
     /* @__PURE__ */ a(
       "div",
       {
-        ...m,
-        ref: g,
-        "data-disabled": !!n,
-        onClick: () => !n && d(!o),
-        onKeyDown: (x) => {
-          x.key === "Enter" && !n && d(!o);
-        },
+        ...g,
+        ref: m,
+        "data-testid": "accordion-item",
+        "data-disabled": !!t,
+        onClick: () => !t && r(!e),
+        onKeyDown: u,
         tabIndex: 0,
-        className: t("gi-accordion", l),
-        children: /* @__PURE__ */ r(
-          "div",
-          {
-            className: t(
-              "gi-accordion-header",
-              I({ variant: e })
-            ),
-            children: [
-              i,
-              /* @__PURE__ */ a(
-                w,
-                {
-                  icon: o ? "keyboard_arrow_up" : "keyboard_arrow_down",
-                  size: "md",
-                  className: t({
-                    "gi-pt-[1.5px]": e === "default"
-                  })
-                }
-              )
-            ]
-          }
-        )
+        className: s(x(), l),
+        children: /* @__PURE__ */ n("div", { "data-testid": "accordion-header", className: b(), children: [
+          o,
+          /* @__PURE__ */ a(
+            v,
+            {
+              icon: e ? "keyboard_arrow_up" : "keyboard_arrow_down",
+              size: "md",
+              className: s({
+                "gi-pt-[1.5px]": i === "default"
+              })
+            }
+          )
+        ] })
       }
     ),
     /* @__PURE__ */ a(
@@ -64,17 +49,37 @@ const I = h({
         id: f,
         role: "region",
         "aria-labelledby": p,
-        className: t("gi-px-2 gi-pb-4 gi-pt-2 gi-font-normal", {
-          "gi-block": o,
-          "gi-hidden": !o,
-          "gi-text-md": e === "default",
-          "gi-text-sm": e === "small"
+        className: s("gi-px-2 gi-pb-4 gi-pt-2 gi-font-normal", {
+          "gi-block": e,
+          "gi-hidden": !e,
+          "gi-text-md": i === "default",
+          "gi-text-sm": i === "small"
         }),
         children: c
       }
     )
   ] });
-};
+}, N = k({
+  slots: {
+    base: "gi-focus-visible-state-outline-inner-shadow-sm",
+    header: " gi-flex gi-items-start gi-justify-between"
+  },
+  variants: {
+    variant: {
+      default: { header: "gi-px-2 gi-py-4 gi-text-md gi-font-bold" },
+      small: { header: "gi-py-2 gi-px-2 gi-text-sm gi-font-bold" }
+    },
+    disabled: {
+      false: {
+        base: "hover:gi-bg-gray-200 gi-focus-state-outline-inner-shadow-sm",
+        header: "gi-cursor-pointer"
+      },
+      true: {
+        header: "gi-cursor-not-allowed gi-text-gray-600"
+      }
+    }
+  }
+});
 export {
-  j as AccordionItem
+  $ as AccordionItem
 };

package/dist/alert/alert.d.ts

@@ -1,3 +1,6 @@
+import { ComponentType } from 'react';
+import { IconProps } from '../atoms/icons';
 import { AlertProps } from './types.js';
+export declare const ALERT_VARIANT_ICONS: Record<string, ComponentType<IconProps>>;
 declare function Alert({ title, children, variant, showIcon, dismissible, onClose, className, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element | null;
 export { Alert };

package/dist/alert/alert.js

@@ -1,80 +1,62 @@
 "use client";
-import { jsxs as n, jsx as i } from "react/jsx-runtime";
-import { useState as v } from "react";
-import { cn as c } from "../cn.js";
+import { jsx as i, jsxs as e } from "react/jsx-runtime";
+import { useState as I } from "react";
+import k from "../atoms/icons/Info.js";
+import v from "../atoms/icons/Error.js";
+import b from "../atoms/icons/Warning.js";
+import x from "../atoms/icons/CheckCircle.js";
+import { cn as t } from "../cn.js";
 import { translate as D } from "../i18n/utility.js";
-import { Icon as w } from "../icon/icon.js";
-import { IconButton as x } from "../icon-button/icon-button.js";
-import { alertVariants as I } from "./variants.js";
-const V = ({ variant: e }) => {
-  let a;
-  switch (e) {
-    case "warning": {
-      a = "warning";
-      break;
-    }
-    case "success": {
-      a = "check_circle";
-      break;
-    }
-    case "danger": {
-      a = "error";
-      break;
-    }
-    default:
-      a = "info";
-  }
-  return a;
+import { IconButton as V } from "../icon-button/icon-button.js";
+import { alertVariants as j } from "./variants.js";
+const E = {
+  warning: (r) => /* @__PURE__ */ i(b, { ...r }),
+  success: (r) => /* @__PURE__ */ i(x, { ...r }),
+  danger: (r) => /* @__PURE__ */ i(v, { ...r }),
+  info: (r) => /* @__PURE__ */ i(k, { ...r })
 };
 function q({
-  title: e,
-  children: a,
-  variant: r = "info",
-  showIcon: l = !0,
-  dismissible: t,
+  title: r,
+  children: n,
+  variant: a = "info",
+  showIcon: o = !0,
+  dismissible: m,
   onClose: s,
-  className: o,
-  ...m
+  className: l,
+  ...c
 }) {
-  const [d, u] = v(!1), { base: f, heading: p, container: g, dismiss: b, baseDismissible: h } = I({
-    variant: r
-  }), k = t ? h : f;
-  return d ? null : /* @__PURE__ */ n(
+  const [f, d] = I(!1), { base: p, heading: u, container: g, dismiss: h } = j({ variant: a });
+  if (f)
+    return null;
+  const N = E[a ?? "info"];
+  return /* @__PURE__ */ e(
     "div",
     {
-      className: c(k(), o, "gi-not-prose"),
+      className: t(p(), l, "gi-not-prose"),
       role: "alert",
       "aria-live": "assertive",
-      ...m,
+      ...c,
       children: [
-        l ? /* @__PURE__ */ i(
-          w,
-          {
-            icon: V({ variant: r }),
-            ariaHidden: !0,
-            className: "gi-alert-icon",
-            "data-variant": r
-          }
-        ) : null,
-        /* @__PURE__ */ n(
+        o ? /* @__PURE__ */ i(N, { className: "gi-shrink-0 gi-block" }) : null,
+        /* @__PURE__ */ e(
           "div",
           {
-            className: c(g(), {
-              "gi-gap-1": e
+            className: t(g(), {
+              "gi-gap-1": r
             }),
             children: [
-              e && /* @__PURE__ */ i("p", { className: p(), children: e }),
-              a
+              r && /* @__PURE__ */ i("p", { className: u(), "data-testid": "alert-heading", children: r }),
+              n
             ]
           }
         ),
-        t && /* @__PURE__ */ i(
-          x,
+        m && /* @__PURE__ */ i(
+          V,
           {
-            onClick: (N) => {
-              u(!0), s == null || s(N);
+            onClick: (A) => {
+              d(!0), s == null || s(A);
             },
-            className: b(),
+            className: h(),
             size: "small",
             appearance: "dark",
             variant: "flat",
@@ -89,5 +71,6 @@ function q({
   );
 }
 export {
+  E as ALERT_VARIANT_ICONS,
   q as Alert
 };

package/dist/alert/variants.d.ts

@@ -2,24 +2,23 @@ export declare const alertVariants: import('tailwind-variants').TVReturnType<{
     variant: {
         info: {
             base: string;
-            baseDismissible: string;
-        };
-        danger: {
-            base: string;
-            baseDismissible: string;
+            icon: string;
         };
         success: {
             base: string;
-            baseDismissible: string;
+            icon: string;
         };
         warning: {
             base: string;
-            baseDismissible: string;
+            icon: string;
+        };
+        danger: {
+            base: string;
+            icon: string;
         };
     };
 }, {
     base: string;
-    baseDismissible: string;
     container: string;
     heading: string;
     dismiss: string;
@@ -27,62 +26,61 @@ export declare const alertVariants: import('tailwind-variants').TVReturnType<{
     variant: {
         info: {
             base: string;
-            baseDismissible: string;
-        };
-        danger: {
-            base: string;
-            baseDismissible: string;
+            icon: string;
         };
         success: {
             base: string;
-            baseDismissible: string;
+            icon: string;
         };
         warning: {
             base: string;
-            baseDismissible: string;
+            icon: string;
+        };
+        danger: {
+            base: string;
+            icon: string;
         };
     };
 }, {
     variant: {
         info: {
             base: string;
-            baseDismissible: string;
-        };
-        danger: {
-            base: string;
-            baseDismissible: string;
+            icon: string;
         };
         success: {
             base: string;
-            baseDismissible: string;
+            icon: string;
         };
         warning: {
             base: string;
-            baseDismissible: string;
+            icon: string;
+        };
+        danger: {
+            base: string;
+            icon: string;
         };
     };
 }>, {
     variant: {
         info: {
             base: string;
-            baseDismissible: string;
-        };
-        danger: {
-            base: string;
-            baseDismissible: string;
+            icon: string;
         };
         success: {
             base: string;
-            baseDismissible: string;
+            icon: string;
         };
         warning: {
             base: string;
-            baseDismissible: string;
+            icon: string;
+        };
+        danger: {
+            base: string;
+            icon: string;
         };
     };
 }, {
     base: string;
-    baseDismissible: string;
     container: string;
     heading: string;
     dismiss: string;
@@ -90,24 +88,23 @@ export declare const alertVariants: import('tailwind-variants').TVReturnType<{
     variant: {
         info: {
             base: string;
-            baseDismissible: string;
-        };
-        danger: {
-            base: string;
-            baseDismissible: string;
+            icon: string;
         };
         success: {
             base: string;
-            baseDismissible: string;
+            icon: string;
         };
         warning: {
             base: string;
-            baseDismissible: string;
+            icon: string;
+        };
+        danger: {
+            base: string;
+            icon: string;
         };
     };
 }, {
     base: string;
-    baseDismissible: string;
     container: string;
     heading: string;
     dismiss: string;
@@ -115,38 +112,38 @@ export declare const alertVariants: import('tailwind-variants').TVReturnType<{
     variant: {
         info: {
             base: string;
-            baseDismissible: string;
-        };
-        danger: {
-            base: string;
-            baseDismissible: string;
+            icon: string;
         };
         success: {
             base: string;
-            baseDismissible: string;
+            icon: string;
         };
         warning: {
             base: string;
-            baseDismissible: string;
+            icon: string;
+        };
+        danger: {
+            base: string;
+            icon: string;
         };
     };
 }, {
     variant: {
         info: {
             base: string;
-            baseDismissible: string;
-        };
-        danger: {
-            base: string;
-            baseDismissible: string;
+            icon: string;
         };
         success: {
             base: string;
-            baseDismissible: string;
+            icon: string;
         };
         warning: {
             base: string;
-            baseDismissible: string;
+            icon: string;
+        };
+        danger: {
+            base: string;
+            icon: string;
         };
     };
 }>, unknown, unknown, undefined>>;

package/dist/alert/variants.js

@@ -1,29 +1,28 @@
-import { c as i } from "../index-CB-zPpNk.js";
-const a = i({
+import { c as t } from "../index-CB-zPpNk.js";
+const i = t({
   slots: {
-    base: "gi-alert-base",
-    baseDismissible: "gi-alert-base-dismissible",
-    container: "gi-alert-container",
-    heading: "gi-alert-title",
-    dismiss: "gi-alert-dismiss"
+    base: "gi-relative gi-flex gi-flex-row gi-p-3 gi-border-xs gi-rounded-sm gi-gap-2 gi-max-w-[640px] [width:inherit]",
+    container: "gi-flex gi-flex-col gi-items-start gi-grow gi-pr-2",
+    heading: "gi-text-2md gi-font-bold",
+    dismiss: "gi-absolute gi-top-2 gi-right-2"
   },
   variants: {
     variant: {
       info: {
-        base: "gi-alert-info",
-        baseDismissible: "gi-alert-info"
-      },
-      danger: {
-        base: "gi-alert-danger",
-        baseDismissible: "gi-alert-danger"
+        base: "gi-bg-color-surface-intent-info-default gi-border-color-border-intent-info-subtle gi-text-color-text-intent-info-default",
+        icon: "gi-text-color-icon-intent-info-default"
       },
       success: {
-        base: "gi-alert-success",
-        baseDismissible: "gi-alert-success"
+        base: "gi-bg-color-surface-intent-success-default gi-border-color-border-intent-success-subtle gi-text-color-text-intent-success-default",
+        icon: "gi-text-color-icon-intent-success-default"
       },
       warning: {
-        base: "gi-alert-warning",
-        baseDismissible: "gi-alert-warning"
+        base: "gi-bg-color-surface-intent-warning-default gi-border-color-border-intent-warning-subtle gi-text-color-text-intent-warning-default",
+        icon: "gi-text-color-icon-intent-warning-default"
+      },
+      danger: {
+        base: "gi-bg-color-surface-intent-error-default gi-border-color-border-intent-error-subtle gi-text-color-text-intent-error-default",
+        icon: "gi-text-color-icon-intent-error-default"
       }
     }
   },
@@ -32,5 +31,5 @@ const a = i({
   }
 });
 export {
-  a as alertVariants
+  i as alertVariants
 };

package/dist/atoms/{DsButton.d.ts → Button.d.ts}

@@ -1,10 +1,10 @@
 /**
  * Mitosis automatically generates this file.
  * Do not edit this file directly.
- * The file source is in `packages/core/atoms/DsButton.lite.tsx`
+ * The file source is in `packages/core/atoms/Button.lite.tsx`
  */
 import * as React from 'react';
-type Props = {
+export type Props = {
     id?: string;
     variant?: (typeof Variant)[keyof typeof Variant];
     appearance?: (typeof Appearance)[keyof typeof Appearance];
@@ -20,6 +20,7 @@ type Props = {
     ariaLabel?: string;
     ariaLabelledBy?: string;
     ariaDescribedBy?: string;
+    ariaChecked?: boolean;
     ariaPressed?: boolean | 'mixed';
     ariaExpanded?: boolean;
     ariaControls?: string;
@@ -31,7 +32,6 @@ type Props = {
     value?: string;
     tabIndex?: number;
     dataTestId?: string;
-    dataTestid?: string;
     ref?: any;
 };
 export declare const Variant: {
@@ -190,5 +190,5 @@ export declare const styles: import('tailwind-variants').TVReturnType<{
         false: string;
     };
 }>, unknown, unknown, undefined>>;
-declare const DsButton: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<any>>;
-export default DsButton;
+declare const Button: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<any>>;
+export default Button;