@dnanpm/ui-components 0.8.0 → 0.10.0

package/dist/components/Modal/Modal.module.css.js

@@ -1,30 +1,30 @@
 import './Modal.css';
-const modal = "_modal_ewl1e_1";
-const modal__container = "_modal__container_ewl1e_64";
-const modal__title = "_modal__title_ewl1e_76";
-const modal__heading = "_modal__heading_ewl1e_86";
-const modal__description = "_modal__description_ewl1e_94";
-const modal__content = "_modal__content_ewl1e_98";
-const modal__close = "_modal__close_ewl1e_111";
+const modal = "_modal_9bjhv_1";
+const modal__container = "_modal__container_9bjhv_64";
+const modal__title = "_modal__title_9bjhv_76";
+const modal__heading = "_modal__heading_9bjhv_86";
+const modal__description = "_modal__description_9bjhv_94";
+const modal__content = "_modal__content_9bjhv_98";
+const modal__close = "_modal__close_9bjhv_111";
 const styles = {
   modal,
-  "modal--align-top": "_modal--align-top_ewl1e_21",
-  "modal--small": "_modal--small_ewl1e_38",
-  "modal--medium": "_modal--medium_ewl1e_42",
-  "modal--large": "_modal--large_ewl1e_45",
-  "modal--opening": "_modal--opening_ewl1e_49",
-  "modal-open": "_modal-open_ewl1e_1",
-  "modal--closing": "_modal--closing_ewl1e_52",
-  "modal-close": "_modal-close_ewl1e_1",
+  "modal--align-top": "_modal--align-top_9bjhv_21",
+  "modal--small": "_modal--small_9bjhv_38",
+  "modal--medium": "_modal--medium_9bjhv_42",
+  "modal--large": "_modal--large_9bjhv_45",
+  "modal--opening": "_modal--opening_9bjhv_49",
+  "modal-open": "_modal-open_9bjhv_1",
+  "modal--closing": "_modal--closing_9bjhv_52",
+  "modal-close": "_modal-close_9bjhv_1",
   modal__container,
-  "modal--fixed-title": "_modal--fixed-title_ewl1e_72",
+  "modal--fixed-title": "_modal--fixed-title_9bjhv_72",
   modal__title,
   modal__heading,
   modal__description,
   modal__content,
   modal__close,
-  "modal__bottom-bar": "_modal__bottom-bar_ewl1e_132",
-  "modal--dark": "_modal--dark_ewl1e_137"
+  "modal__bottom-bar": "_modal__bottom-bar_9bjhv_132",
+  "modal--dark": "_modal--dark_9bjhv_137"
 };
 export {
   styles as default,

package/dist/components/Notification/Notification.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const icons = require("@dnanpm/icons");
-const focus_module = require("../../styles/utils/focus.module.css.cjs");
+const index = require("../../styles/utils/index.cjs");
 const Notification_module = require("./Notification.module.css.cjs");
 const cn = require("../../utils/cn/cn.cjs");
 const variantIcons = {
@@ -33,6 +33,7 @@ const Notification = ({
     "div",
     {
       ...props,
+      "data-color-scheme": "light",
       ref,
       role,
       className: cn.cn(Notification_module.default.notification, Notification_module.default[`notification--${variant}`], className),
@@ -43,7 +44,7 @@ const Notification = ({
           "button",
           {
             type: "button",
-            className: cn.cn(Notification_module.default.notification__close, focus_module.default.focusable),
+            className: cn.cn(Notification_module.default.notification__close, index.focusStyles.focusable),
             onClick: onClose,
             "aria-label": closeLabel,
             children: /* @__PURE__ */ jsxRuntime.jsx(icons.Close, { "aria-hidden": "true" })

package/dist/components/Notification/Notification.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.cjs","sources":["../../../src/components/Notification/Notification.tsx"],"sourcesContent":["import type { ComponentType, SVGProps } from 'react';\nimport { Check, Close, Error as ErrorIcon, Info, Warning } from '@dnanpm/icons';\nimport { cn } from '../../utils/cn';\nimport focusStyles from '../../styles/utils/focus.module.css';\nimport styles from './Notification.module.css';\nimport type { NotificationProps, NotificationVariant } from './Notification.types';\n\nconst variantIcons: Record<NotificationVariant, ComponentType<SVGProps<SVGSVGElement>>> = {\n    info: Info,\n    success: Check,\n    warning: Warning,\n    error: ErrorIcon,\n};\n\nconst variantRoles: Record<NotificationVariant, 'status' | 'alert'> = {\n    info: 'status',\n    success: 'status',\n    warning: 'alert',\n    error: 'alert',\n};\n\nexport const Notification = ({\n    variant,\n    children,\n    closable = false,\n    onClose,\n    closeLabel = 'Sulje ilmoitus',\n    className,\n    ref,\n    ...props\n}: NotificationProps) => {\n    const Icon = variantIcons[variant];\n    const role = variantRoles[variant];\n\n    return (\n        <div\n            {...props}\n            ref={ref}\n            role={role}\n            className={cn(styles.notification, styles[`notification--${variant}`], className)}\n        >\n            <div className={styles['notification__icon-container']}>\n                <Icon className={styles.notification__icon} aria-hidden=\"true\" />\n            </div>\n            <div className={styles.notification__content}>{children}</div>\n            {closable && (\n                <button\n                    type=\"button\"\n                    className={cn(styles.notification__close, focusStyles.focusable)}\n                    onClick={onClose}\n                    aria-label={closeLabel}\n                >\n                    <Close aria-hidden=\"true\" />\n                </button>\n            )}\n        </div>\n    );\n};\n"],"names":["Info","Check","Warning","ErrorIcon","jsxs","cn","styles","jsx","focusStyles","Close"],"mappings":";;;;;;;AAOA,MAAM,eAAoF;AAAA,EACtF,MAAMA,MAAAA;AAAAA,EACN,SAASC,MAAAA;AAAAA,EACT,SAASC,MAAAA;AAAAA,EACT,OAAOC,MAAAA;AACX;AAEA,MAAM,eAAgE;AAAA,EAClE,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACX;AAEO,MAAM,eAAe,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAyB;AACrB,QAAM,OAAO,aAAa,OAAO;AACjC,QAAM,OAAO,aAAa,OAAO;AAEjC,SACIC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,WAAWC,GAAAA,GAAGC,oBAAAA,QAAO,cAAcA,oBAAAA,QAAO,iBAAiB,OAAO,EAAE,GAAG,SAAS;AAAA,MAEhF,UAAA;AAAA,QAAAC,2BAAAA,IAAC,OAAA,EAAI,WAAWD,oBAAAA,QAAO,8BAA8B,GACjD,UAAAC,2BAAAA,IAAC,MAAA,EAAK,WAAWD,4BAAO,oBAAoB,eAAY,OAAA,CAAO,GACnE;AAAA,QACAC,2BAAAA,IAAC,OAAA,EAAI,WAAWD,oBAAAA,QAAO,uBAAwB,UAAS;AAAA,QACvD,YACGC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,WAAWF,GAAAA,GAAGC,oBAAAA,QAAO,qBAAqBE,aAAAA,QAAY,SAAS;AAAA,YAC/D,SAAS;AAAA,YACT,cAAY;AAAA,YAEZ,UAAAD,2BAAAA,IAACE,MAAAA,OAAA,EAAM,eAAY,OAAA,CAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MAC9B;AAAA,IAAA;AAAA,EAAA;AAIhB;;"}
+{"version":3,"file":"Notification.cjs","sources":["../../../src/components/Notification/Notification.tsx"],"sourcesContent":["import type { ComponentType, SVGProps } from 'react';\nimport { Check, Close, Error as ErrorIcon, Info, Warning } from '@dnanpm/icons';\nimport { cn } from '../../utils/cn';\nimport { focusStyles } from '../../styles/utils';\nimport styles from './Notification.module.css';\nimport type { NotificationProps, NotificationVariant } from './Notification.types';\n\nconst variantIcons: Record<NotificationVariant, ComponentType<SVGProps<SVGSVGElement>>> = {\n    info: Info,\n    success: Check,\n    warning: Warning,\n    error: ErrorIcon,\n};\n\nconst variantRoles: Record<NotificationVariant, 'status' | 'alert'> = {\n    info: 'status',\n    success: 'status',\n    warning: 'alert',\n    error: 'alert',\n};\n\nexport const Notification = ({\n    variant,\n    children,\n    closable = false,\n    onClose,\n    closeLabel = 'Sulje ilmoitus',\n    className,\n    ref,\n    ...props\n}: NotificationProps) => {\n    const Icon = variantIcons[variant];\n    const role = variantRoles[variant];\n\n    return (\n        <div\n            {...props}\n            data-color-scheme=\"light\"\n            ref={ref}\n            role={role}\n            className={cn(styles.notification, styles[`notification--${variant}`], className)}\n        >\n            <div className={styles['notification__icon-container']}>\n                <Icon className={styles.notification__icon} aria-hidden=\"true\" />\n            </div>\n            <div className={styles.notification__content}>{children}</div>\n            {closable && (\n                <button\n                    type=\"button\"\n                    className={cn(styles.notification__close, focusStyles.focusable)}\n                    onClick={onClose}\n                    aria-label={closeLabel}\n                >\n                    <Close aria-hidden=\"true\" />\n                </button>\n            )}\n        </div>\n    );\n};\n"],"names":["Info","Check","Warning","ErrorIcon","jsxs","cn","styles","jsx","focusStyles","Close"],"mappings":";;;;;;;AAOA,MAAM,eAAoF;AAAA,EACtF,MAAMA,MAAAA;AAAAA,EACN,SAASC,MAAAA;AAAAA,EACT,SAASC,MAAAA;AAAAA,EACT,OAAOC,MAAAA;AACX;AAEA,MAAM,eAAgE;AAAA,EAClE,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACX;AAEO,MAAM,eAAe,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAyB;AACrB,QAAM,OAAO,aAAa,OAAO;AACjC,QAAM,OAAO,aAAa,OAAO;AAEjC,SACIC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,qBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA,WAAWC,GAAAA,GAAGC,oBAAAA,QAAO,cAAcA,oBAAAA,QAAO,iBAAiB,OAAO,EAAE,GAAG,SAAS;AAAA,MAEhF,UAAA;AAAA,QAAAC,2BAAAA,IAAC,OAAA,EAAI,WAAWD,oBAAAA,QAAO,8BAA8B,GACjD,UAAAC,2BAAAA,IAAC,MAAA,EAAK,WAAWD,4BAAO,oBAAoB,eAAY,OAAA,CAAO,GACnE;AAAA,QACAC,2BAAAA,IAAC,OAAA,EAAI,WAAWD,oBAAAA,QAAO,uBAAwB,UAAS;AAAA,QACvD,YACGC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,WAAWF,GAAAA,GAAGC,oBAAAA,QAAO,qBAAqBE,MAAAA,YAAY,SAAS;AAAA,YAC/D,SAAS;AAAA,YACT,cAAY;AAAA,YAEZ,UAAAD,2BAAAA,IAACE,MAAAA,OAAA,EAAM,eAAY,OAAA,CAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MAC9B;AAAA,IAAA;AAAA,EAAA;AAIhB;;"}

package/dist/components/Notification/Notification.css

@@ -1,39 +1,44 @@
-@layer dds-components {/**
+@layer dds-base, dds-components;
+
+@layer dds-components { @layer fallback, components; }
+
+@layer dds-components.components{/**
  * Notification Component Styles
  *
  * Design tokens are consumed via CSS custom properties (variables).
  * These variables come from @dnanpm/design-tokens package.
  */
 
-._notification_m746g_8 {
+._notification_1m544_8 {
     display: flex;
     align-items: center;
     gap: var(--spacing-space-16);
     padding-right: var(--spacing-space-20);
     border: 2px solid var(--notification-color);
     border-radius: var(--radius-semantic-sm);
+    background-color: var(--color-semantic-surface-base);
     overflow: clip;
 }
 
 /* Variant colors */
-._notification--info_m746g_19 {
+._notification--info_1m544_20 {
     --notification-color: var(--color-semantic-status-info);
 }
 
-._notification--success_m746g_23 {
+._notification--success_1m544_24 {
     --notification-color: var(--color-semantic-status-success);
 }
 
-._notification--warning_m746g_27 {
+._notification--warning_1m544_28 {
     --notification-color: var(--color-semantic-status-warning);
 }
 
-._notification--error_m746g_31 {
+._notification--error_1m544_32 {
     --notification-color: var(--color-semantic-status-error);
 }
 
 /* Icon container */
-._notification__icon-container_m746g_36 {
+._notification__icon-container_1m544_37 {
     /* The colored area size should be 48x48px on one line content, so we adjust padding based on whether the border is present or not */
     --_icon-padding-with-border: 10px;
     --_icon-padding-without-border: 12px;
@@ -49,14 +54,14 @@
     color: var(--color-semantic-foreground-inverse);
 }
 
-._notification__icon_m746g_36 {
+._notification__icon_1m544_37 {
     width: 24px;
     height: 24px;
     flex: 0 0 auto;
 }
 
 /* Content */
-._notification__content_m746g_59 {
+._notification__content_1m544_60 {
     flex: 1 1 auto;
     min-width: 0;
     padding: var(--spacing-space-8) 0;
@@ -66,7 +71,7 @@
 }
 
 /* Close button */
-._notification__close_m746g_69 {
+._notification__close_1m544_70 {
     flex: 0 0 auto;
     display: flex;
     align-items: center;
@@ -83,8 +88,11 @@
     cursor: pointer;
 }
 
-._notification__close_m746g_69 svg {
+._notification__close_1m544_70 svg {
     width: 24px;
     height: 24px;
 }
-}
+
+/**
+ * Do not edit directly, this file was auto-generated.
+ */ }

package/dist/components/Notification/Notification.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/Notification.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAuB,MAAM,sBAAsB,CAAC;AAgBnF,eAAO,MAAM,YAAY,GAAI,gFAS1B,iBAAiB,4CA2BnB,CAAC"}
+{"version":3,"file":"Notification.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/Notification.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAuB,MAAM,sBAAsB,CAAC;AAgBnF,eAAO,MAAM,YAAY,GAAI,gFAS1B,iBAAiB,4CA4BnB,CAAC"}

package/dist/components/Notification/Notification.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { Error, Warning, Check, Info, Close } from "@dnanpm/icons";
-import focusStyles from "../../styles/utils/focus.module.css.js";
+import { focusStyles } from "../../styles/utils/index.js";
 import styles from "./Notification.module.css.js";
 import { cn } from "../../utils/cn/cn.js";
 const variantIcons = {
@@ -31,6 +31,7 @@ const Notification = ({
     "div",
     {
       ...props,
+      "data-color-scheme": "light",
       ref,
       role,
       className: cn(styles.notification, styles[`notification--${variant}`], className),

package/dist/components/Notification/Notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.js","sources":["../../../src/components/Notification/Notification.tsx"],"sourcesContent":["import type { ComponentType, SVGProps } from 'react';\nimport { Check, Close, Error as ErrorIcon, Info, Warning } from '@dnanpm/icons';\nimport { cn } from '../../utils/cn';\nimport focusStyles from '../../styles/utils/focus.module.css';\nimport styles from './Notification.module.css';\nimport type { NotificationProps, NotificationVariant } from './Notification.types';\n\nconst variantIcons: Record<NotificationVariant, ComponentType<SVGProps<SVGSVGElement>>> = {\n    info: Info,\n    success: Check,\n    warning: Warning,\n    error: ErrorIcon,\n};\n\nconst variantRoles: Record<NotificationVariant, 'status' | 'alert'> = {\n    info: 'status',\n    success: 'status',\n    warning: 'alert',\n    error: 'alert',\n};\n\nexport const Notification = ({\n    variant,\n    children,\n    closable = false,\n    onClose,\n    closeLabel = 'Sulje ilmoitus',\n    className,\n    ref,\n    ...props\n}: NotificationProps) => {\n    const Icon = variantIcons[variant];\n    const role = variantRoles[variant];\n\n    return (\n        <div\n            {...props}\n            ref={ref}\n            role={role}\n            className={cn(styles.notification, styles[`notification--${variant}`], className)}\n        >\n            <div className={styles['notification__icon-container']}>\n                <Icon className={styles.notification__icon} aria-hidden=\"true\" />\n            </div>\n            <div className={styles.notification__content}>{children}</div>\n            {closable && (\n                <button\n                    type=\"button\"\n                    className={cn(styles.notification__close, focusStyles.focusable)}\n                    onClick={onClose}\n                    aria-label={closeLabel}\n                >\n                    <Close aria-hidden=\"true\" />\n                </button>\n            )}\n        </div>\n    );\n};\n"],"names":["ErrorIcon"],"mappings":";;;;;AAOA,MAAM,eAAoF;AAAA,EACtF,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAOA;AACX;AAEA,MAAM,eAAgE;AAAA,EAClE,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACX;AAEO,MAAM,eAAe,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAyB;AACrB,QAAM,OAAO,aAAa,OAAO;AACjC,QAAM,OAAO,aAAa,OAAO;AAEjC,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,WAAW,GAAG,OAAO,cAAc,OAAO,iBAAiB,OAAO,EAAE,GAAG,SAAS;AAAA,MAEhF,UAAA;AAAA,QAAA,oBAAC,OAAA,EAAI,WAAW,OAAO,8BAA8B,GACjD,UAAA,oBAAC,MAAA,EAAK,WAAW,OAAO,oBAAoB,eAAY,OAAA,CAAO,GACnE;AAAA,QACA,oBAAC,OAAA,EAAI,WAAW,OAAO,uBAAwB,UAAS;AAAA,QACvD,YACG;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,WAAW,GAAG,OAAO,qBAAqB,YAAY,SAAS;AAAA,YAC/D,SAAS;AAAA,YACT,cAAY;AAAA,YAEZ,UAAA,oBAAC,OAAA,EAAM,eAAY,OAAA,CAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MAC9B;AAAA,IAAA;AAAA,EAAA;AAIhB;"}
+{"version":3,"file":"Notification.js","sources":["../../../src/components/Notification/Notification.tsx"],"sourcesContent":["import type { ComponentType, SVGProps } from 'react';\nimport { Check, Close, Error as ErrorIcon, Info, Warning } from '@dnanpm/icons';\nimport { cn } from '../../utils/cn';\nimport { focusStyles } from '../../styles/utils';\nimport styles from './Notification.module.css';\nimport type { NotificationProps, NotificationVariant } from './Notification.types';\n\nconst variantIcons: Record<NotificationVariant, ComponentType<SVGProps<SVGSVGElement>>> = {\n    info: Info,\n    success: Check,\n    warning: Warning,\n    error: ErrorIcon,\n};\n\nconst variantRoles: Record<NotificationVariant, 'status' | 'alert'> = {\n    info: 'status',\n    success: 'status',\n    warning: 'alert',\n    error: 'alert',\n};\n\nexport const Notification = ({\n    variant,\n    children,\n    closable = false,\n    onClose,\n    closeLabel = 'Sulje ilmoitus',\n    className,\n    ref,\n    ...props\n}: NotificationProps) => {\n    const Icon = variantIcons[variant];\n    const role = variantRoles[variant];\n\n    return (\n        <div\n            {...props}\n            data-color-scheme=\"light\"\n            ref={ref}\n            role={role}\n            className={cn(styles.notification, styles[`notification--${variant}`], className)}\n        >\n            <div className={styles['notification__icon-container']}>\n                <Icon className={styles.notification__icon} aria-hidden=\"true\" />\n            </div>\n            <div className={styles.notification__content}>{children}</div>\n            {closable && (\n                <button\n                    type=\"button\"\n                    className={cn(styles.notification__close, focusStyles.focusable)}\n                    onClick={onClose}\n                    aria-label={closeLabel}\n                >\n                    <Close aria-hidden=\"true\" />\n                </button>\n            )}\n        </div>\n    );\n};\n"],"names":["ErrorIcon"],"mappings":";;;;;AAOA,MAAM,eAAoF;AAAA,EACtF,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAOA;AACX;AAEA,MAAM,eAAgE;AAAA,EAClE,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACX;AAEO,MAAM,eAAe,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAyB;AACrB,QAAM,OAAO,aAAa,OAAO;AACjC,QAAM,OAAO,aAAa,OAAO;AAEjC,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,qBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA,WAAW,GAAG,OAAO,cAAc,OAAO,iBAAiB,OAAO,EAAE,GAAG,SAAS;AAAA,MAEhF,UAAA;AAAA,QAAA,oBAAC,OAAA,EAAI,WAAW,OAAO,8BAA8B,GACjD,UAAA,oBAAC,MAAA,EAAK,WAAW,OAAO,oBAAoB,eAAY,OAAA,CAAO,GACnE;AAAA,QACA,oBAAC,OAAA,EAAI,WAAW,OAAO,uBAAwB,UAAS;AAAA,QACvD,YACG;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,WAAW,GAAG,OAAO,qBAAqB,YAAY,SAAS;AAAA,YAC/D,SAAS;AAAA,YACT,cAAY;AAAA,YAEZ,UAAA,oBAAC,OAAA,EAAM,eAAY,OAAA,CAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MAC9B;AAAA,IAAA;AAAA,EAAA;AAIhB;"}

package/dist/components/Notification/Notification.module.css.cjs

@@ -1,17 +1,17 @@
 require('./Notification.css');
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const notification = "_notification_m746g_8";
-const notification__icon = "_notification__icon_m746g_36";
-const notification__content = "_notification__content_m746g_59";
-const notification__close = "_notification__close_m746g_69";
+const notification = "_notification_1m544_8";
+const notification__icon = "_notification__icon_1m544_37";
+const notification__content = "_notification__content_1m544_60";
+const notification__close = "_notification__close_1m544_70";
 const styles = {
   notification,
-  "notification--info": "_notification--info_m746g_19",
-  "notification--success": "_notification--success_m746g_23",
-  "notification--warning": "_notification--warning_m746g_27",
-  "notification--error": "_notification--error_m746g_31",
-  "notification__icon-container": "_notification__icon-container_m746g_36",
+  "notification--info": "_notification--info_1m544_20",
+  "notification--success": "_notification--success_1m544_24",
+  "notification--warning": "_notification--warning_1m544_28",
+  "notification--error": "_notification--error_1m544_32",
+  "notification__icon-container": "_notification__icon-container_1m544_37",
   notification__icon,
   notification__content,
   notification__close

package/dist/components/Notification/Notification.module.css.js

@@ -1,15 +1,15 @@
 import './Notification.css';
-const notification = "_notification_m746g_8";
-const notification__icon = "_notification__icon_m746g_36";
-const notification__content = "_notification__content_m746g_59";
-const notification__close = "_notification__close_m746g_69";
+const notification = "_notification_1m544_8";
+const notification__icon = "_notification__icon_1m544_37";
+const notification__content = "_notification__content_1m544_60";
+const notification__close = "_notification__close_1m544_70";
 const styles = {
   notification,
-  "notification--info": "_notification--info_m746g_19",
-  "notification--success": "_notification--success_m746g_23",
-  "notification--warning": "_notification--warning_m746g_27",
-  "notification--error": "_notification--error_m746g_31",
-  "notification__icon-container": "_notification__icon-container_m746g_36",
+  "notification--info": "_notification--info_1m544_20",
+  "notification--success": "_notification--success_1m544_24",
+  "notification--warning": "_notification--warning_1m544_28",
+  "notification--error": "_notification--error_1m544_32",
+  "notification__icon-container": "_notification__icon-container_1m544_37",
   notification__icon,
   notification__content,
   notification__close

package/dist/components/Pagination/Pagination.cjs

@@ -0,0 +1,142 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const icons = require("@dnanpm/icons");
+const react = require("react");
+const index = require("../../styles/utils/index.cjs");
+const Pagination_utils = require("./Pagination.utils.cjs");
+const Pagination_module = require("./Pagination.module.css.cjs");
+const cn = require("../../utils/cn/cn.cjs");
+const defaultPageLabel = (page) => `Sivu ${page}`;
+const defaultAnnouncement = (page, total) => `Sivu ${page} / ${total}`;
+const Pagination = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+  showPreviousNext = true,
+  previousPageLabel = "Edellinen sivu",
+  nextPageLabel = "Seuraava sivu",
+  formatPageLabel = defaultPageLabel,
+  formatPageAnnouncement = defaultAnnouncement,
+  className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  onFocusCapture,
+  onBlurCapture,
+  ref,
+  ...props
+}) => {
+  Pagination_utils.validatePages(currentPage, totalPages);
+  const currentButton = react.useRef(null);
+  const focusedButton = react.useRef(null);
+  const [announcement, setAnnouncement] = react.useState({
+    page: currentPage,
+    empty: totalPages === 0,
+    text: ""
+  });
+  if (announcement.page !== currentPage || announcement.empty !== (totalPages === 0)) {
+    setAnnouncement({
+      page: currentPage,
+      empty: totalPages === 0,
+      text: totalPages > 0 && !announcement.empty && announcement.page !== currentPage ? formatPageAnnouncement(currentPage, totalPages) : ""
+    });
+  }
+  react.useLayoutEffect(() => {
+    const focused = focusedButton.current;
+    if (focused && (!focused.isConnected || focused.disabled) && (document.activeElement === document.body || document.activeElement === focused)) {
+      currentButton.current?.focus();
+    }
+  }, [currentPage, totalPages, showPreviousNext]);
+  if (totalPages === 0) return null;
+  const requestPage = (page) => {
+    if (page !== currentPage) onPageChange(page);
+  };
+  const buttonClass = cn.cn(Pagination_module.default.pagination__button, index.focusStyles.focusable);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "nav",
+    {
+      ref,
+      className: cn.cn(Pagination_module.default.pagination, className),
+      "aria-label": ariaLabel ?? (ariaLabelledBy ? void 0 : "Sivutus"),
+      "aria-labelledby": ariaLabelledBy,
+      onFocusCapture: (event) => {
+        if (event.target instanceof HTMLButtonElement) focusedButton.current = event.target;
+        onFocusCapture?.(event);
+      },
+      onBlurCapture: (event) => {
+        const button = focusedButton.current;
+        const focusLeftPagination = event.relatedTarget ? !event.currentTarget.contains(event.relatedTarget) : button?.isConnected && !button.disabled;
+        if (focusLeftPagination) {
+          focusedButton.current = null;
+        }
+        onBlurCapture?.(event);
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "ul",
+          {
+            className: cn.cn(
+              Pagination_module.default.pagination__list,
+              Pagination_module.default[`pagination__list--${Pagination_utils.getPageWidth(totalPages)}`],
+              { [Pagination_module.default["pagination__list--arrows"]]: showPreviousNext }
+            ),
+            children: [
+              showPreviousNext && /* @__PURE__ */ jsxRuntime.jsx("li", { className: Pagination_module.default.pagination__arrow, children: /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: buttonClass,
+                  "aria-label": previousPageLabel,
+                  disabled: currentPage === 1,
+                  onClick: () => requestPage(currentPage - 1),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronLeftFilled, { "aria-hidden": "true", size: "16" })
+                }
+              ) }),
+              Pagination_utils.getPageCandidates(currentPage, totalPages).map(({ item, budgets }) => /* @__PURE__ */ jsxRuntime.jsx(
+                "li",
+                {
+                  className: cn.cn(
+                    Pagination_module.default.pagination__item,
+                    {
+                      [Pagination_module.default["pagination__item--current"]]: item.kind === "page" && item.page === currentPage
+                    },
+                    budgets.map((budget) => Pagination_module.default[`pagination__item--${budget}`])
+                  ),
+                  "aria-hidden": item.kind === "gap" ? true : void 0,
+                  children: item.kind === "page" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      ref: item.page === currentPage ? currentButton : void 0,
+                      className: buttonClass,
+                      "aria-label": formatPageLabel(item.page),
+                      "aria-current": item.page === currentPage ? "page" : void 0,
+                      onClick: () => requestPage(item.page),
+                      children: item.page
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: Pagination_module.default.pagination__gap, children: /* @__PURE__ */ jsxRuntime.jsx(icons.MoreFilled, { "aria-hidden": "true", size: "16" }) })
+                },
+                item.key
+              )),
+              showPreviousNext && /* @__PURE__ */ jsxRuntime.jsx("li", { className: Pagination_module.default.pagination__arrow, children: /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: buttonClass,
+                  "aria-label": nextPageLabel,
+                  disabled: currentPage === totalPages,
+                  onClick: () => requestPage(currentPage + 1),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronRightFilled, { "aria-hidden": "true", size: "16" })
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: Pagination_module.default["pagination__sr-only"], "aria-live": "polite", "aria-atomic": "true", children: announcement.text })
+      ]
+    }
+  );
+};
+exports.Pagination = Pagination;
+//# sourceMappingURL=Pagination.cjs.map

package/dist/components/Pagination/Pagination.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.cjs","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import { ChevronLeftFilled, ChevronRightFilled, MoreFilled } from '@dnanpm/icons';\nimport { useLayoutEffect, useRef, useState } from 'react';\nimport { cn } from '../../utils/cn';\nimport { focusStyles } from '../../styles/utils';\nimport type { PaginationProps } from './Pagination.types';\nimport { getPageCandidates, getPageWidth, validatePages } from './Pagination.utils';\nimport styles from './Pagination.module.css';\n\nconst defaultPageLabel = (page: number) => `Sivu ${page}`;\nconst defaultAnnouncement = (page: number, total: number) => `Sivu ${page} / ${total}`;\n\nexport const Pagination = ({\n    currentPage,\n    totalPages,\n    onPageChange,\n    showPreviousNext = true,\n    previousPageLabel = 'Edellinen sivu',\n    nextPageLabel = 'Seuraava sivu',\n    formatPageLabel = defaultPageLabel,\n    formatPageAnnouncement = defaultAnnouncement,\n    className,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    onFocusCapture,\n    onBlurCapture,\n    ref,\n    ...props\n}: PaginationProps) => {\n    validatePages(currentPage, totalPages);\n    const currentButton = useRef<HTMLButtonElement>(null);\n    const focusedButton = useRef<HTMLButtonElement | null>(null);\n    const [announcement, setAnnouncement] = useState({\n        page: currentPage,\n        empty: totalPages === 0,\n        text: '',\n    });\n\n    if (announcement.page !== currentPage || announcement.empty !== (totalPages === 0)) {\n        setAnnouncement({\n            page: currentPage,\n            empty: totalPages === 0,\n            text:\n                totalPages > 0 && !announcement.empty && announcement.page !== currentPage\n                    ? formatPageAnnouncement(currentPage, totalPages)\n                    : '',\n        });\n    }\n\n    useLayoutEffect(() => {\n        const focused = focusedButton.current;\n        if (\n            focused &&\n            (!focused.isConnected || focused.disabled) &&\n            (document.activeElement === document.body || document.activeElement === focused)\n        ) {\n            currentButton.current?.focus();\n        }\n    }, [currentPage, totalPages, showPreviousNext]);\n\n    if (totalPages === 0) return null;\n\n    const requestPage = (page: number) => {\n        if (page !== currentPage) onPageChange(page);\n    };\n    const buttonClass = cn(styles.pagination__button, focusStyles.focusable);\n\n    return (\n        <nav\n            ref={ref}\n            className={cn(styles.pagination, className)}\n            aria-label={ariaLabel ?? (ariaLabelledBy ? undefined : 'Sivutus')}\n            aria-labelledby={ariaLabelledBy}\n            onFocusCapture={(event) => {\n                if (event.target instanceof HTMLButtonElement) focusedButton.current = event.target;\n                onFocusCapture?.(event);\n            }}\n            onBlurCapture={(event) => {\n                const button = focusedButton.current;\n                const focusLeftPagination = event.relatedTarget\n                    ? !event.currentTarget.contains(event.relatedTarget)\n                    : button?.isConnected && !button.disabled;\n\n                if (focusLeftPagination) {\n                    focusedButton.current = null;\n                }\n                onBlurCapture?.(event);\n            }}\n            {...props}\n        >\n            <ul\n                className={cn(\n                    styles.pagination__list,\n                    styles[`pagination__list--${getPageWidth(totalPages)}`],\n                    { [styles['pagination__list--arrows']]: showPreviousNext },\n                )}\n            >\n                {showPreviousNext && (\n                    <li className={styles.pagination__arrow}>\n                        <button\n                            type=\"button\"\n                            className={buttonClass}\n                            aria-label={previousPageLabel}\n                            disabled={currentPage === 1}\n                            onClick={() => requestPage(currentPage - 1)}\n                        >\n                            <ChevronLeftFilled aria-hidden=\"true\" size=\"16\" />\n                        </button>\n                    </li>\n                )}\n                {getPageCandidates(currentPage, totalPages).map(({ item, budgets }) => (\n                    <li\n                        key={item.key}\n                        className={cn(\n                            styles.pagination__item,\n                            {\n                                [styles['pagination__item--current']]:\n                                    item.kind === 'page' && item.page === currentPage,\n                            },\n                            budgets.map((budget) => styles[`pagination__item--${budget}`]),\n                        )}\n                        aria-hidden={item.kind === 'gap' ? true : undefined}\n                    >\n                        {item.kind === 'page' ? (\n                            <button\n                                type=\"button\"\n                                ref={item.page === currentPage ? currentButton : undefined}\n                                className={buttonClass}\n                                aria-label={formatPageLabel(item.page)}\n                                aria-current={item.page === currentPage ? 'page' : undefined}\n                                onClick={() => requestPage(item.page)}\n                            >\n                                {item.page}\n                            </button>\n                        ) : (\n                            <span className={styles.pagination__gap}>\n                                <MoreFilled aria-hidden=\"true\" size=\"16\" />\n                            </span>\n                        )}\n                    </li>\n                ))}\n                {showPreviousNext && (\n                    <li className={styles.pagination__arrow}>\n                        <button\n                            type=\"button\"\n                            className={buttonClass}\n                            aria-label={nextPageLabel}\n                            disabled={currentPage === totalPages}\n                            onClick={() => requestPage(currentPage + 1)}\n                        >\n                            <ChevronRightFilled aria-hidden=\"true\" size=\"16\" />\n                        </button>\n                    </li>\n                )}\n            </ul>\n            <span className={styles['pagination__sr-only']} aria-live=\"polite\" aria-atomic=\"true\">\n                {announcement.text}\n            </span>\n        </nav>\n    );\n};\n"],"names":["validatePages","useRef","useState","useLayoutEffect","cn","styles","focusStyles","jsxs","getPageWidth","jsx","ChevronLeftFilled","getPageCandidates","MoreFilled","ChevronRightFilled"],"mappings":"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"}