@ogcio/design-system-react 1.29.0 → 1.31.0

package/README.md

@@ -1,6 +1,4 @@
-# govie-react
-
-**This library should only be imported for departments actively working with the core design system team during its development. Do not use this library if you are not part of this development process, and contact the design system team instead if you interested in its use.**
+# Government of Ireland Design System – React
 
 Welcome to the Government of Ireland Design System React component library, a collection of reusable React components designed to help you build modern React web applications utilising the Government of Ireland Design System.
 
@@ -12,20 +10,6 @@ To install the library, use the following command:
 npm install @ogcio/design-system-react @ogcio/theme-govie
 ```
 
-### Pinning packages
-
-We **strongly recommend** that you pin the Government of Ireland Design System packages, so that any regressions are not automatically introduced during development. Regressions that will only be discoverable at runtime.
-
-**Upgrades should be explicit version updates** in the `package.json` and then your application should be regression tested:
-
-```diff
-"dependencies": {
--  "@ogcio/theme-govie": "^1.4.1",
-+  "@ogcio/theme-govie": "1.4.1",
--  "@ogcio/design-system-react": "^1.10.0",
-+  "@ogcio/design-system-react": "1.10.0"
-```
-
 ### Usage
 
 Import the Government of Ireland `theme.css` from the `@ogcio/theme-govie` theme package at the entry point of your application, for example:
@@ -75,11 +59,18 @@ function MyComponent() {
 
 #### Font Loading
 
-The Government of Ireland Design System uses the [Lato](https://fonts.google.com/specimen/Lato) Google font. While the design system includes font loading through `styles.css`, **in Next.js 16 applications, CSS `@import` statements do not load fonts properly**. Therefore, you must explicitly load fonts using `next/font/google` for optimal font loading.
+The Government of Ireland Design System uses the [Lato](https://fonts.google.com/specimen/Lato) font family via [`@fontsource/lato`](https://fontsource.org/fonts/lato). Lato fonts are included in `styles.css` — no additional font import is needed.
 
-**Recommended approach for Next.js (Primary):**
+Your bundler (Vite, webpack, etc.) resolves the `@fontsource/lato` imports and bundles the font files automatically.
+
+A standalone `fonts.css` is also available if you need to import fonts separately:
+
+```jsx
+import '@ogcio/design-system-react/fonts.css';
+```
+
+**Next.js:** We recommend using [`next/font/google`](https://nextjs.org/docs/app/getting-started/fonts) to load the Lato font family for optimal performance.
 
-For Next.js applications, we strongly recommend using [`next/font/google`](https://nextjs.org/docs/app/getting-started/fonts) as it provides optimal font loading with automatic optimisation.
 
 ```tsx
 // app/layout.tsx (App Router)
@@ -167,16 +158,3 @@ resources: {
 
 Note: Each component in the design system documents its relevant i18n keys under an **i18n Keys** heading, if available, for example [Pagination i18n Keys](http://ds.blocks.gov.ie/components/library/pagination/#i18n-keys). Be sure to refer to this section when using or implementing a component to ensure all necessary translations are provided.
 
-## Contribution
-
-We welcome contributions! If you have suggestions for improvements, please feel free to open an issue or submit a pull request.
-
-## Feedback
-
-Your feedback is invaluable to us. Please share your thoughts and experiences to help us make this library better.
-
-## Roadmap
-
-- Alpha: Frequent updates with breaking changes.
-- Beta: Stabilizing the API and focusing on bug fixes.
-- 1.0: Stable release with a solid API.

package/dist/alert/variants.d.ts

@@ -23,7 +23,45 @@ export declare const alertVariants: import('tailwind-variants').TVReturnType<{
     container: string;
     heading: string;
     dismiss: string;
-}, undefined, TVConfig<V, EV>, {
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        info: {
+            base: string;
+            baseDismissible: string;
+        };
+        danger: {
+            base: string;
+            baseDismissible: string;
+        };
+        success: {
+            base: string;
+            baseDismissible: string;
+        };
+        warning: {
+            base: string;
+            baseDismissible: string;
+        };
+    };
+}, {
+    variant: {
+        info: {
+            base: string;
+            baseDismissible: string;
+        };
+        danger: {
+            base: string;
+            baseDismissible: string;
+        };
+        success: {
+            base: string;
+            baseDismissible: string;
+        };
+        warning: {
+            base: string;
+            baseDismissible: string;
+        };
+    };
+}>, {
     variant: {
         info: {
             base: string;
@@ -73,4 +111,42 @@ export declare const alertVariants: import('tailwind-variants').TVReturnType<{
     container: string;
     heading: string;
     dismiss: string;
-}, undefined, TVConfig<V, EV>, unknown, unknown, undefined>>;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        info: {
+            base: string;
+            baseDismissible: string;
+        };
+        danger: {
+            base: string;
+            baseDismissible: string;
+        };
+        success: {
+            base: string;
+            baseDismissible: string;
+        };
+        warning: {
+            base: string;
+            baseDismissible: string;
+        };
+    };
+}, {
+    variant: {
+        info: {
+            base: string;
+            baseDismissible: string;
+        };
+        danger: {
+            base: string;
+            baseDismissible: string;
+        };
+        success: {
+            base: string;
+            baseDismissible: string;
+        };
+        warning: {
+            base: string;
+            baseDismissible: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;

package/dist/atoms/DsButton.d.ts

@@ -0,0 +1,194 @@
+/**
+ * Mitosis automatically generates this file.
+ * Do not edit this file directly.
+ * The file source is in `packages/core/atoms/DsButton.lite.tsx`
+ */
+import * as React from 'react';
+type Props = {
+    id?: string;
+    variant?: (typeof Variant)[keyof typeof Variant];
+    appearance?: (typeof Appearance)[keyof typeof Appearance];
+    size?: (typeof Size)[keyof typeof Size];
+    children?: any;
+    disabled?: boolean;
+    className?: string;
+    onClick?: (event: any) => void;
+    onFocus?: (event: any) => void;
+    onBlur?: (event: any) => void;
+    onKeyDown?: (event: any) => void;
+    onKeyUp?: (event: any) => void;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
+    ariaPressed?: boolean | 'mixed';
+    ariaExpanded?: boolean;
+    ariaControls?: string;
+    ariaHasPopup?: 'menu' | 'listbox' | 'dialog' | 'grid' | 'tree' | boolean;
+    ariaBusy?: boolean;
+    role?: string;
+    type?: 'button' | 'submit' | 'reset';
+    form?: string;
+    value?: string;
+    tabIndex?: number;
+    dataTestId?: string;
+    dataTestid?: string;
+    ref?: any;
+};
+export declare const Variant: {
+    readonly PRIMARY: "primary";
+    readonly SECONDARY: "secondary";
+    readonly FLAT: "flat";
+};
+export declare const Appearance: {
+    readonly DEFAULT: "default";
+    readonly DARK: "dark";
+    readonly LIGHT: "light";
+};
+export declare const Size: {
+    readonly SMALL: "small";
+    readonly MEDIUM: "medium";
+    readonly LARGE: "large";
+};
+export declare const styles: import('tailwind-variants').TVReturnType<{
+    variant: {
+        primary: string[];
+        secondary: never[];
+        flat: string[];
+    };
+    appearance: {
+        default: string;
+        light: string;
+        dark: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        primary: string[];
+        secondary: never[];
+        flat: string[];
+    };
+    appearance: {
+        default: string;
+        light: string;
+        dark: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+}, {
+    variant: {
+        primary: string[];
+        secondary: never[];
+        flat: string[];
+    };
+    appearance: {
+        default: string;
+        light: string;
+        dark: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+}>, {
+    variant: {
+        primary: string[];
+        secondary: never[];
+        flat: string[];
+    };
+    appearance: {
+        default: string;
+        light: string;
+        dark: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        primary: string[];
+        secondary: never[];
+        flat: string[];
+    };
+    appearance: {
+        default: string;
+        light: string;
+        dark: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        primary: string[];
+        secondary: never[];
+        flat: string[];
+    };
+    appearance: {
+        default: string;
+        light: string;
+        dark: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+}, {
+    variant: {
+        primary: string[];
+        secondary: never[];
+        flat: string[];
+    };
+    appearance: {
+        default: string;
+        light: string;
+        dark: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+}>, unknown, unknown, undefined>>;
+declare const DsButton: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<any>>;
+export default DsButton;

package/dist/atoms/DsButton.js

@@ -0,0 +1,330 @@
+"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-font-primary",
+    "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 || void 0,
+      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/InsetText.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Mitosis automatically generates this file.
+ * Do not edit this file directly.
+ * The file source is in `packages/core/atoms/InsetText.lite.tsx`
+ */
+export type Props = {
+    id?: string;
+    children: any;
+    cite?: string;
+    describedBy?: string;
+    labelledBy?: string;
+};
+declare function InsetText(props: Props): import("react/jsx-runtime").JSX.Element;
+export default InsetText;