@ogcio/design-system-react 1.29.0 → 1.31.0

package/dist/table/table-row.js

@@ -1,11 +1,18 @@
-import { jsx as a } from "react/jsx-runtime";
-import { cn as e } from "../cn.js";
-function c({
-  children: t,
-  ...r
+import { jsx as o } from "react/jsx-runtime";
+import { cn as r } from "../cn.js";
+function l({
+  children: i,
+  ...e
 }) {
-  return /* @__PURE__ */ a("tr", { className: e(r.className, "gi-table-tr"), ...r, children: t });
+  return /* @__PURE__ */ o(
+    "tr",
+    {
+      className: r(e.className, "gi-overflow-hidden gi-align-middle"),
+      ...e,
+      children: i
+    }
+  );
 }
 export {
-  c as TableRow
+  l as TableRow
 };

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/tabs/tab-panel.js

@@ -1,19 +1,19 @@
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as l } from "react/jsx-runtime";
 import { slugify as n } from "../utilities.js";
-function i({ value: e, children: l }) {
+function b({ value: e, children: i }) {
   const a = n(e);
-  return /* @__PURE__ */ t(
+  return /* @__PURE__ */ l(
     "div",
     {
       role: "tabpanel",
       "aria-labelledby": `tab-panel-${a}`,
       id: `tab-panel-${a}`,
       tabIndex: 0,
-      className: "gi-tab-panel",
-      children: l
+      className: "gi-hidden gi-basis-full gi-pt-2 focus-visible:gi-outline-none",
+      children: i
     }
   );
 }
 export {
-  i as TabPanel
+  b as TabPanel
 };

package/dist/tabs/tabs.js

@@ -1,28 +1,28 @@
 import { jsx as c } from "react/jsx-runtime";
-import { Children as f, isValidElement as u, cloneElement as p } from "react";
-import { generateRandomId as h } from "../utilities.js";
-function x({
+import { Children as s, isValidElement as u, cloneElement as p } from "react";
+import { generateRandomId as g } from "../utilities.js";
+function b({
   appearance: t = "default",
-  size: a = "md",
-  stretch: n = !1,
-  padding: i = !0,
-  labelAlignment: m = "center",
-  id: e = h(),
-  ariaLabelledBy: o,
-  children: d,
-  ...l
+  size: i = "md",
+  stretch: a = !1,
+  padding: n = !0,
+  labelAlignment: l = "center",
+  id: e = g(),
+  ariaLabelledBy: m,
+  children: o,
+  ...f
 }) {
-  const s = f.map(d, (r) => u(r) ? p(r, {
+  const d = s.map(o, (r) => u(r) ? p(r, {
     tabName: e,
     appearance: t,
-    size: a,
-    ariaLabelledBy: o,
-    stretch: n,
-    padding: i,
-    labelAlignment: m
+    size: i,
+    ariaLabelledBy: m,
+    stretch: a,
+    padding: n,
+    labelAlignment: l
   }) : r);
-  return /* @__PURE__ */ c("div", { className: "gi-tabs", id: e, ...l, children: s });
+  return /* @__PURE__ */ c("div", { className: "gi-flex gi-flex-wrap gi-w-full", id: e, ...f, children: d });
 }
 export {
-  x as Tabs
+  b as Tabs
 };

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.31.0",
   "description": "The Government of Ireland Design System React components.",
   "type": "module",
   "main": "dist/index.js",
@@ -11,13 +11,14 @@
   "exports": {
     ".": "./dist/index.js",
     "./styles.css": "./dist/styles.css",
-    "./logos": {
-      "types": "./dist/assets/logos/index.d.ts",
-      "import": "./dist/assets/logos/index.js"
+    "./fonts.css": "./fonts.css",
+    "./icons": {
+      "types": "./dist/icons/index.d.ts",
+      "import": "./dist/icons/index.js"
     },
-    "./logos/*": {
-      "types": "./dist/assets/logos/*.d.ts",
-      "import": "./dist/assets/logos/*.js"
+    "./logos": {
+      "types": "./dist/logos/index.d.ts",
+      "import": "./dist/logos/index.js"
     }
   },
   "prettier": "@ogcio/design-system-prettier-config",
@@ -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-eslint-config": "1.3.0",
+    "@ogcio/design-system-tailwind": "1.22.0",
     "@ogcio/design-system-prettier-config": "1.1.0",
-    "@ogcio/design-system-tailwind": "1.21.2",
     "@ogcio/theme-doete": "1.0.0",
-    "@ogcio/theme-govie": "1.21.2"
+    "@ogcio/theme-govie": "1.21.3"
   },
   "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"

package/dist/assets/logos/LogoBlack.d.ts

@@ -1,3 +0,0 @@
-import { SVGProps } from 'react';
-export declare const LogoBlack: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
-export default LogoBlack;