@ogcio/design-system-react 1.29.0 → 1.30.0

package/dist/table/table.d.ts

@@ -7,7 +7,17 @@ declare const tableVariants: import('tailwind-variants').TVReturnType<{
         auto: string;
         fixed: string;
     };
-}, undefined, "gi-table", TVConfig<V, EV>, {
+}, undefined, "gi-table", import('tailwind-variants/dist/config.js').TVConfig<{
+    layout: {
+        auto: string;
+        fixed: string;
+    };
+}, {
+    layout: {
+        auto: string;
+        fixed: string;
+    };
+}>, {
     layout: {
         auto: string;
         fixed: string;
@@ -17,7 +27,17 @@ declare const tableVariants: import('tailwind-variants').TVReturnType<{
         auto: string;
         fixed: string;
     };
-}, undefined, "gi-table", TVConfig<V, EV>, unknown, unknown, undefined>>;
+}, undefined, "gi-table", import('tailwind-variants/dist/config.js').TVConfig<{
+    layout: {
+        auto: string;
+        fixed: string;
+    };
+}, {
+    layout: {
+        auto: string;
+        fixed: string;
+    };
+}>, unknown, unknown, undefined>>;
 export type TableProps = VariantProps<typeof tableVariants> & {
     dataTestid?: string;
     rowSize?: 'sm' | 'md' | 'lg';

package/dist/tabs/tab-item.d.ts

@@ -4,9 +4,9 @@ export declare const TabItem: FC<TabItemProps>;
 export declare const InternalTabItem: import('react').ForwardRefExoticComponent<TabItemProps & {
     onTabKeyDown?: (event: import('./types.js').TabKeyboardEvent) => void;
     index: number;
-    appearance?: "default" | "dark";
+    appearance?: "dark" | "default";
     size?: "md" | "sm";
     stretch?: boolean;
     labelAlignment?: "center" | "end" | "start";
     className?: string;
-} & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+} & import('react').RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;

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

@@ -12,7 +12,7 @@ export declare const TextInput: import('react').ForwardRefExoticComponent<import
     iconEnd?: import('react').ReactNode;
     iconEndClassName?: string;
     onIconEndClick?: () => void;
-    inputActionButton?: import('../input-text/type.js').InputActionButtonProps;
+    inputActionButton?: import('../index.js').InputActionButtonProps;
     iconEndRef?: any;
     inputActionPosition?: "beforeSuffix" | "afterSuffix";
     type?: "text" | "date" | "datetime-local" | "email" | "month" | "number" | "password" | "tel" | "time" | "url" | "week" | "search";

package/dist/textarea/textarea.js

@@ -1,15 +1,15 @@
 "use client";
 import { jsxs as g, Fragment as j, jsx as e } from "react/jsx-runtime";
 import { forwardRef as z, useRef as A, useState as h, useImperativeHandle as H, useEffect as O } from "react";
-import { cn as v } from "../cn.js";
-import { HintText as F } from "../hint-text/hint-text.js";
-import { translate as L } from "../i18n/utility.js";
-import { Icon as S } from "../icon/icon.js";
-import { IconButton as Y } from "../icon-button/icon-button.js";
-const $ = z(
+import { cn as p } from "../cn.js";
+import { HintText as C } from "../hint-text/hint-text.js";
+import { translate as F } from "../i18n/utility.js";
+import { Icon as L } from "../icon/icon.js";
+import { IconButton as S } from "../icon-button/icon-button.js";
+const Y = z(
   ({
     value: r,
-    rows: p = 4,
+    rows: v = 4,
     cols: x = 100,
     autoComplete: b = "on",
     maxChars: t,
@@ -21,72 +21,71 @@ const $ = z(
     name: s,
     ...c
   }, V) => {
-    const n = A(null), [u, I] = h(
+    const i = A(null), [u, I] = h(
       t
     );
-    H(V, () => n.current);
-    const [T, f] = h(""), i = r !== void 0, m = i ? String(r) : T;
+    H(V, () => i.current);
+    const [T, f] = h(""), n = r !== void 0, m = n ? String(r) : T;
     O(() => {
       t !== void 0 && I(t - m.length);
     }, [m, t]);
     const k = (o) => {
       const y = o.target.value;
-      i || f(y), a && a(o);
+      n || f(y), a && a(o);
     }, w = () => {
-      n.current && (i || f(""), a && a({
+      i.current && (n || f(""), a && a({
         target: { name: s, value: "" },
         currentTarget: { name: s, value: "" },
         type: "change",
         bubbles: !0
-      }), n.current.focus());
+      }), i.current.focus());
     };
     return /* @__PURE__ */ g(j, { children: [
       /* @__PURE__ */ e("div", { className: "gi-textarea-container", children: /* @__PURE__ */ g(
         "div",
         {
-          className: v("gi-textarea-inner", {
+          className: p("gi-textarea-inner", {
             "gi-input-half-width": N
           }),
           children: [
-            l && /* @__PURE__ */ e("div", { className: "gi-text-area-icon-start", children: /* @__PURE__ */ e(S, { icon: l, size: "md", disabled: c.disabled }) }),
+            l && /* @__PURE__ */ e("div", { className: "gi-text-area-icon-start", children: /* @__PURE__ */ e(L, { icon: l, size: "md", disabled: c.disabled }) }),
             /* @__PURE__ */ e(
               "textarea",
               {
                 name: s,
-                rows: p,
+                rows: v,
                 cols: x,
                 autoComplete: b,
-                className: v(R, "gi-textarea"),
-                ref: n,
+                className: p(R, "gi-textarea"),
+                ref: i,
                 "data-icon-start": !!l,
                 "data-clear-enabled": d,
                 maxLength: t,
-                ...i ? { value: String(r) } : {},
+                ...n ? { value: String(r) } : {},
                 onChange: k,
                 ...c
               }
             ),
             d ? /* @__PURE__ */ e("div", { className: "gi-text-area-end-element", children: /* @__PURE__ */ e(
-              Y,
+              S,
               {
                 type: "button",
                 disabled: c.disabled,
-                icon: {
-                  icon: "close"
-                },
+                icon: { icon: "close" },
                 onClick: w,
                 variant: "flat",
                 size: "small",
-                appearance: "dark"
+                appearance: "dark",
+                "aria-label": "Clear input"
               }
             ) }) : null
           ]
         }
       ) }),
       t && /* @__PURE__ */ e("div", { className: "gi-textarea-remaining-chars", children: /* @__PURE__ */ e(
-        F,
+        C,
         {
-          text: L("textarea.remainingChars", {
+          text: F("textarea.remainingChars", {
             remainingChars: u,
             defaultValue: `You have ${u} characters remaining`
           })
@@ -95,7 +94,7 @@ const $ = z(
     ] });
   }
 );
-$.displayName = "TextArea";
+Y.displayName = "TextArea";
 export {
-  $ as TextArea
+  Y as TextArea
 };

package/dist/toast/ds-toast.d.ts

@@ -25,7 +25,45 @@ declare const toastVariants: import('tailwind-variants').TVReturnType<{
     heading: string;
     dismiss: string;
     innerContainer: 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;
@@ -77,6 +115,44 @@ declare const toastVariants: import('tailwind-variants').TVReturnType<{
     heading: string;
     dismiss: string;
     innerContainer: 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>>;
 declare function Toast({ title, description, action, variant, showIcon, dismissible, onClose, slotAction, }: ToastProps): import("react/jsx-runtime").JSX.Element;
 export { Toast, toastVariants };

package/fonts.css

@@ -0,0 +1,10 @@
+@import '@fontsource/lato/100.css';
+@import '@fontsource/lato/100-italic.css';
+@import '@fontsource/lato/300.css';
+@import '@fontsource/lato/300-italic.css';
+@import '@fontsource/lato/400.css';
+@import '@fontsource/lato/400-italic.css';
+@import '@fontsource/lato/700.css';
+@import '@fontsource/lato/700-italic.css';
+@import '@fontsource/lato/900.css';
+@import '@fontsource/lato/900-italic.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ogcio/design-system-react",
-  "version": "1.29.0",
+  "version": "1.30.0",
   "description": "The Government of Ireland Design System React components.",
   "type": "module",
   "main": "dist/index.js",
@@ -11,6 +11,7 @@
   "exports": {
     ".": "./dist/index.js",
     "./styles.css": "./dist/styles.css",
+    "./fonts.css": "./fonts.css",
     "./logos": {
       "types": "./dist/assets/logos/index.d.ts",
       "import": "./dist/assets/logos/index.js"
@@ -27,7 +28,8 @@
   ],
   "files": [
     "dist",
-    "styles"
+    "styles",
+    "fonts.css"
   ],
   "keywords": [],
   "author": "",
@@ -37,6 +39,7 @@
     "react-dom": "*"
   },
   "dependencies": {
+    "@fontsource/lato": "^5.1.1",
     "@popperjs/core": "^2.11.8",
     "@radix-ui/react-slot": "^1.1.2",
     "bowser": "^2.13.1",
@@ -54,16 +57,17 @@
     "eslint": "^9.23.0",
     "eslint-plugin-storybook": "^0.12.0",
     "glob": "^11.0.1",
+    "http-server": "^14.1.1",
     "i18next": "^25.6.2",
     "postcss": "^8.4.40",
     "postcss-import": "^16.1.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",
-    "@ogcio/design-system-eslint-config": "1.2.6",
-    "@ogcio/design-system-prettier-config": "1.1.0",
-    "@ogcio/design-system-tailwind": "1.21.2",
+    "@ogcio/design-system-eslint-config": "1.3.0",
+    "@ogcio/design-system-tailwind": "1.21.3",
     "@ogcio/theme-doete": "1.0.0",
-    "@ogcio/theme-govie": "1.21.2"
+    "@ogcio/theme-govie": "1.21.3",
+    "@ogcio/design-system-prettier-config": "1.1.0"
   },
   "scripts": {
     "format": "prettier 'src/**/*.{ts,tsx}' --write",
@@ -73,10 +77,11 @@
     "test:watch": "vitest",
     "coverage": "vitest run --coverage",
     "build": "pnpm build:ts && pnpm build:styles",
-    "build:styles": "tailwindcss -i ./styles.css -o ./dist/styles.css --minify",
+    "build:styles": "tailwindcss -i ./styles.css -o ./dist/styles.css --minify && node scripts/build-styles.js",
     "build:ts": "vite build",
     "storybook:dev": "storybook dev -p 6006",
     "storybook:build": "storybook build --stats-json",
+    "storybook:serve": "http-server storybook-static -p 6006 -c-1",
     "playwright:test": "playwright test",
     "playwright:update-snapshots": "playwright test --update-snapshots",
     "typecheck": "tsc -p tsconfig.json --noEmit"