@dnanpm/ui-components 0.1.0 → 0.2.0

package/dist/components/Notification/Notification.js

@@ -1,5 +1,4 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { Error, Warning, Check, Info, Close } from "@dnanpm/icons";
 import focusStyles from "../../styles/utils/focus.module.css.js";
 import styles from "./Notification.module.css.js";
@@ -16,24 +15,25 @@ const variantRoles = {
   warning: "alert",
   error: "alert"
 };
-const Notification = forwardRef(function Notification2({
+const Notification = ({
   variant,
   children,
   closable = false,
   onClose,
   closeLabel = "Sulje ilmoitus",
   className,
+  ref,
   ...props
-}, ref) {
+}) => {
   const Icon = variantIcons[variant];
   const role = variantRoles[variant];
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ...props,
       ref,
       role,
       className: cn(styles.notification, styles[`notification--${variant}`], className),
-      ...props,
       children: [
         /* @__PURE__ */ jsx("div", { className: styles["notification__icon-container"], children: /* @__PURE__ */ jsx(Icon, { className: styles.notification__icon, "aria-hidden": "true" }) }),
         /* @__PURE__ */ jsx("div", { className: styles.notification__content, children }),
@@ -50,8 +50,7 @@ const Notification = forwardRef(function Notification2({
       ]
     }
   );
-});
-Notification.displayName = "Notification";
+};
 export {
   Notification
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Notification.js","sources":["../../../src/components/Notification/Notification.tsx"],"sourcesContent":["import { forwardRef, type ComponentType, type 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 = forwardRef<HTMLDivElement, NotificationProps>(function Notification(\n    {\n        variant,\n        children,\n        closable = false,\n        onClose,\n        closeLabel = 'Sulje ilmoitus',\n        className,\n        ...props\n    },\n    ref,\n) {\n    const Icon = variantIcons[variant];\n    const role = variantRoles[variant];\n\n    return (\n        <div\n            ref={ref}\n            role={role}\n            className={cn(styles.notification, styles[`notification--${variant}`], className)}\n            {...props}\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\nNotification.displayName = 'Notification';\n"],"names":["ErrorIcon","Notification"],"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,WAA8C,SAASC,cAC/E;AAAA,EACI;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACP,GACA,KACF;AACE,QAAM,OAAO,aAAa,OAAO;AACjC,QAAM,OAAO,aAAa,OAAO;AAEjC,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA;AAAA,MACA,WAAW,GAAG,OAAO,cAAc,OAAO,iBAAiB,OAAO,EAAE,GAAG,SAAS;AAAA,MAC/E,GAAG;AAAA,MAEJ,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,CAAC;AAED,aAAa,cAAc;"}
+{"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;"}

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_1glup_8";
-const notification__icon = "_notification__icon_1glup_36";
-const notification__content = "_notification__content_1glup_59";
-const notification__close = "_notification__close_1glup_70";
+const notification = "_notification_5h3rs_8";
+const notification__icon = "_notification__icon_5h3rs_36";
+const notification__content = "_notification__content_5h3rs_59";
+const notification__close = "_notification__close_5h3rs_69";
 const styles = {
   notification,
-  "notification--info": "_notification--info_1glup_19",
-  "notification--success": "_notification--success_1glup_23",
-  "notification--warning": "_notification--warning_1glup_27",
-  "notification--error": "_notification--error_1glup_31",
-  "notification__icon-container": "_notification__icon-container_1glup_36",
+  "notification--info": "_notification--info_5h3rs_19",
+  "notification--success": "_notification--success_5h3rs_23",
+  "notification--warning": "_notification--warning_5h3rs_27",
+  "notification--error": "_notification--error_5h3rs_31",
+  "notification__icon-container": "_notification__icon-container_5h3rs_36",
   notification__icon,
   notification__content,
   notification__close

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

@@ -1,15 +1,15 @@
 import './Notification.css';
-const notification = "_notification_1glup_8";
-const notification__icon = "_notification__icon_1glup_36";
-const notification__content = "_notification__content_1glup_59";
-const notification__close = "_notification__close_1glup_70";
+const notification = "_notification_5h3rs_8";
+const notification__icon = "_notification__icon_5h3rs_36";
+const notification__content = "_notification__content_5h3rs_59";
+const notification__close = "_notification__close_5h3rs_69";
 const styles = {
   notification,
-  "notification--info": "_notification--info_1glup_19",
-  "notification--success": "_notification--success_1glup_23",
-  "notification--warning": "_notification--warning_1glup_27",
-  "notification--error": "_notification--error_1glup_31",
-  "notification__icon-container": "_notification__icon-container_1glup_36",
+  "notification--info": "_notification--info_5h3rs_19",
+  "notification--success": "_notification--success_5h3rs_23",
+  "notification--warning": "_notification--warning_5h3rs_27",
+  "notification--error": "_notification--error_5h3rs_31",
+  "notification__icon-container": "_notification__icon-container_5h3rs_36",
   notification__icon,
   notification__content,
   notification__close

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

@@ -1,6 +1,6 @@
 import type * as React from 'react';
 export type NotificationVariant = 'info' | 'success' | 'warning' | 'error';
-interface NotificationBaseProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+interface NotificationBaseProps extends Omit<React.ComponentPropsWithRef<'div'>, 'children'> {
     /**
      * Visual variant determining the color and icon.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"Notification.types.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/Notification.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE3E,UAAU,qBAAsB,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC3F;;OAEG;IACH,QAAQ,CAAC,OAAO,EAAE,mBAAmB,CAAC;IACtC;;OAEG;IACH,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CACtC;AAED,UAAU,yBAA0B,SAAQ,qBAAqB;IAC7D;;OAEG;IACH,QAAQ,CAAC,QAAQ,EAAE,IAAI,CAAC;IACxB;;;;OAIG;IACH,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAC7B;;OAEG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,UAAU,uBAAwB,SAAQ,qBAAqB;IAC3D;;;OAGG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC;IAC1B,QAAQ,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC;IACzB,QAAQ,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC;CAC/B;AAED,MAAM,MAAM,iBAAiB,GAAG,yBAAyB,GAAG,uBAAuB,CAAC"}
+{"version":3,"file":"Notification.types.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/Notification.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE3E,UAAU,qBAAsB,SAAQ,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACxF;;OAEG;IACH,QAAQ,CAAC,OAAO,EAAE,mBAAmB,CAAC;IACtC;;OAEG;IACH,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CACtC;AAED,UAAU,yBAA0B,SAAQ,qBAAqB;IAC7D;;OAEG;IACH,QAAQ,CAAC,QAAQ,EAAE,IAAI,CAAC;IACxB;;;;OAIG;IACH,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAC7B;;OAEG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,UAAU,uBAAwB,SAAQ,qBAAqB;IAC3D;;;OAGG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC;IAC1B,QAAQ,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC;IACzB,QAAQ,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC;CAC/B;AAED,MAAM,MAAM,iBAAiB,GAAG,yBAAyB,GAAG,uBAAuB,CAAC"}

package/dist/components/Spinner/Spinner.cjs

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const Spinner_module = require("./Spinner.module.css.cjs");
+const cn = require("../../utils/cn/cn.cjs");
+const CAR_DASH = "71 212";
+const Spinner = ({
+  color = "primary",
+  size = "m",
+  className,
+  ref,
+  role = "status",
+  "aria-label": ariaLabel = "Ladataan",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      ...props,
+      ref,
+      viewBox: "0 0 100 100",
+      role,
+      "aria-label": ariaLabel,
+      className: cn.cn(
+        Spinner_module.default.spinner,
+        Spinner_module.default[`spinner--${color}`],
+        Spinner_module.default[`spinner--${size}`],
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "circle",
+          {
+            className: Spinner_module.default.spinner__track,
+            cx: "50",
+            cy: "50",
+            r: "45",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "10"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "circle",
+          {
+            className: Spinner_module.default.spinner__car,
+            cx: "50",
+            cy: "50",
+            r: "45",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "10",
+            strokeDasharray: CAR_DASH,
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  );
+};
+exports.Spinner = Spinner;
+//# sourceMappingURL=Spinner.cjs.map

package/dist/components/Spinner/Spinner.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.cjs","sources":["../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import { cn } from '../../utils/cn';\nimport styles from './Spinner.module.css';\nimport type { SpinnerProps } from './Spinner.types';\n\n/**\n * Circumference of a circle with r=45 in a 100×100 viewBox: 2π × 45 ≈ 282.74.\n * The \"car\" arc covers ~25 % of the circumference (~70.69); the gap fills the rest (~212.06).\n */\nconst CAR_DASH = '71 212';\n\nexport const Spinner = ({\n    color = 'primary',\n    size = 'm',\n    className,\n    ref,\n    role = 'status',\n    'aria-label': ariaLabel = 'Ladataan',\n    ...props\n}: SpinnerProps) => {\n    return (\n        <svg\n            {...props}\n            ref={ref}\n            viewBox=\"0 0 100 100\"\n            role={role}\n            aria-label={ariaLabel}\n            className={cn(\n                styles.spinner,\n                styles[`spinner--${color}`],\n                styles[`spinner--${size}`],\n                className,\n            )}\n        >\n            {/* Track: full ring at 40 % opacity */}\n            <circle\n                className={styles.spinner__track}\n                cx=\"50\"\n                cy=\"50\"\n                r=\"45\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"10\"\n            />\n            {/* Car: partial arc that rotates continuously */}\n            <circle\n                className={styles.spinner__car}\n                cx=\"50\"\n                cy=\"50\"\n                r=\"45\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"10\"\n                strokeDasharray={CAR_DASH}\n                strokeLinecap=\"round\"\n            />\n        </svg>\n    );\n};\n"],"names":["jsxs","cn","styles","jsx"],"mappings":";;;;;AAQA,MAAM,WAAW;AAEV,MAAM,UAAU,CAAC;AAAA,EACpB,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,cAAc,YAAY;AAAA,EAC1B,GAAG;AACP,MAAoB;AAChB,SACIA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ;AAAA,MACA,SAAQ;AAAA,MACR;AAAA,MACA,cAAY;AAAA,MACZ,WAAWC,GAAAA;AAAAA,QACPC,eAAAA,QAAO;AAAA,QACPA,eAAAA,QAAO,YAAY,KAAK,EAAE;AAAA,QAC1BA,eAAAA,QAAO,YAAY,IAAI,EAAE;AAAA,QACzB;AAAA,MAAA;AAAA,MAIJ,UAAA;AAAA,QAAAC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAWD,eAAAA,QAAO;AAAA,YAClB,IAAG;AAAA,YACH,IAAG;AAAA,YACH,GAAE;AAAA,YACF,MAAK;AAAA,YACL,QAAO;AAAA,YACP,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAGhBC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAWD,eAAAA,QAAO;AAAA,YAClB,IAAG;AAAA,YACH,IAAG;AAAA,YACH,GAAE;AAAA,YACF,MAAK;AAAA,YACL,QAAO;AAAA,YACP,aAAY;AAAA,YACZ,iBAAiB;AAAA,YACjB,eAAc;AAAA,UAAA;AAAA,QAAA;AAAA,MAClB;AAAA,IAAA;AAAA,EAAA;AAGZ;;"}

package/dist/components/Spinner/Spinner.css

@@ -0,0 +1,116 @@
+@layer dna-design-system {/* ─────────────────────────────────────────────────────────────
+   Spinner — base
+   ───────────────────────────────────────────────────────────── */
+
+._spinner_j28th_5 {
+    /*
+     * Internal custom property that carries the animation duration.
+     * Each size class below overrides it; the .car rule consumes it.
+     * The default matches the medium (m) size.
+     */
+    --_spinner-duration: 0.8s;
+
+    display: inline-block;
+    flex-shrink: 0;
+    overflow: visible;
+}
+
+/* ─────────────────────────────────────────────────────────────
+   Color variants
+   Token: foreground color of both the track and the car.
+   The track uses the same color at 40 % opacity (see .track).
+   ───────────────────────────────────────────────────────────── */
+
+._spinner--primary_j28th_24 {
+    color: var(--color-semantic-foreground-primary-strong);
+}
+
+._spinner--secondary_j28th_28 {
+    color: var(--color-semantic-foreground-secondary-strong);
+}
+
+._spinner--inverse_j28th_32 {
+    color: var(--color-semantic-foreground-inverse);
+}
+
+._spinner--inherit_j28th_36 {
+    color: inherit;
+}
+
+/* ─────────────────────────────────────────────────────────────
+   Size variants
+   XS → 0.6 s  |  S → 0.7 s  |  M → 0.8 s  |  L → 0.9 s  |  XL → 1.0 s
+   ───────────────────────────────────────────────────────────── */
+
+._spinner--xs_j28th_45 {
+    width: 20px;
+    height: 20px;
+    --_spinner-duration: 0.6s;
+}
+
+._spinner--s_j28th_28 {
+    width: 24px;
+    height: 24px;
+    --_spinner-duration: 0.7s;
+}
+
+._spinner--m_j28th_57 {
+    width: 40px;
+    height: 40px;
+    --_spinner-duration: 0.8s;
+}
+
+._spinner--l_j28th_63 {
+    width: 64px;
+    height: 64px;
+    --_spinner-duration: 0.9s;
+}
+
+._spinner--xl_j28th_69 {
+    width: 80px;
+    height: 80px;
+    --_spinner-duration: 1s;
+}
+
+/* ─────────────────────────────────────────────────────────────
+   Track — the background ring
+   Rendered at 40 % opacity of currentColor.
+   ───────────────────────────────────────────────────────────── */
+
+._spinner__track_j28th_80 {
+    opacity: 0.4;
+}
+
+/* ─────────────────────────────────────────────────────────────
+   Car — the animated arc that travels around the track
+   ───────────────────────────────────────────────────────────── */
+
+._spinner__car_j28th_88 {
+    /*
+     * transform-box: fill-box makes transform-origin relative to the
+     * element's own bounding box, so "center" correctly refers to the
+     * centre of the circle rather than the SVG viewport.
+     */
+    transform-box: fill-box;
+    transform-origin: center;
+    animation: _spinner-rotate_j28th_1 var(--_spinner-duration) linear infinite;
+}
+
+@keyframes _spinner-rotate_j28th_1 {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* ─────────────────────────────────────────────────────────────
+   Reduced-motion preference
+   Slow the animation significantly instead of stopping it entirely,
+   so the loading state remains perceptible without causing discomfort.
+   ───────────────────────────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+    ._spinner__car_j28th_88 {
+        animation-duration: 3s;
+    }
+}
+}

package/dist/components/Spinner/Spinner.d.ts

@@ -0,0 +1,3 @@
+import { SpinnerProps } from './Spinner.types';
+export declare const Spinner: ({ color, size, className, ref, role, "aria-label": ariaLabel, ...props }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Spinner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAQpD,eAAO,MAAM,OAAO,GAAI,0EAQrB,YAAY,4CAuCd,CAAC"}

package/dist/components/Spinner/Spinner.js

@@ -0,0 +1,62 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import styles from "./Spinner.module.css.js";
+import { cn } from "../../utils/cn/cn.js";
+const CAR_DASH = "71 212";
+const Spinner = ({
+  color = "primary",
+  size = "m",
+  className,
+  ref,
+  role = "status",
+  "aria-label": ariaLabel = "Ladataan",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ...props,
+      ref,
+      viewBox: "0 0 100 100",
+      role,
+      "aria-label": ariaLabel,
+      className: cn(
+        styles.spinner,
+        styles[`spinner--${color}`],
+        styles[`spinner--${size}`],
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            className: styles.spinner__track,
+            cx: "50",
+            cy: "50",
+            r: "45",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "10"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            className: styles.spinner__car,
+            cx: "50",
+            cy: "50",
+            r: "45",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "10",
+            strokeDasharray: CAR_DASH,
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Spinner
+};
+//# sourceMappingURL=Spinner.js.map

package/dist/components/Spinner/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","sources":["../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import { cn } from '../../utils/cn';\nimport styles from './Spinner.module.css';\nimport type { SpinnerProps } from './Spinner.types';\n\n/**\n * Circumference of a circle with r=45 in a 100×100 viewBox: 2π × 45 ≈ 282.74.\n * The \"car\" arc covers ~25 % of the circumference (~70.69); the gap fills the rest (~212.06).\n */\nconst CAR_DASH = '71 212';\n\nexport const Spinner = ({\n    color = 'primary',\n    size = 'm',\n    className,\n    ref,\n    role = 'status',\n    'aria-label': ariaLabel = 'Ladataan',\n    ...props\n}: SpinnerProps) => {\n    return (\n        <svg\n            {...props}\n            ref={ref}\n            viewBox=\"0 0 100 100\"\n            role={role}\n            aria-label={ariaLabel}\n            className={cn(\n                styles.spinner,\n                styles[`spinner--${color}`],\n                styles[`spinner--${size}`],\n                className,\n            )}\n        >\n            {/* Track: full ring at 40 % opacity */}\n            <circle\n                className={styles.spinner__track}\n                cx=\"50\"\n                cy=\"50\"\n                r=\"45\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"10\"\n            />\n            {/* Car: partial arc that rotates continuously */}\n            <circle\n                className={styles.spinner__car}\n                cx=\"50\"\n                cy=\"50\"\n                r=\"45\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"10\"\n                strokeDasharray={CAR_DASH}\n                strokeLinecap=\"round\"\n            />\n        </svg>\n    );\n};\n"],"names":[],"mappings":";;;AAQA,MAAM,WAAW;AAEV,MAAM,UAAU,CAAC;AAAA,EACpB,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,cAAc,YAAY;AAAA,EAC1B,GAAG;AACP,MAAoB;AAChB,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ;AAAA,MACA,SAAQ;AAAA,MACR;AAAA,MACA,cAAY;AAAA,MACZ,WAAW;AAAA,QACP,OAAO;AAAA,QACP,OAAO,YAAY,KAAK,EAAE;AAAA,QAC1B,OAAO,YAAY,IAAI,EAAE;AAAA,QACzB;AAAA,MAAA;AAAA,MAIJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAW,OAAO;AAAA,YAClB,IAAG;AAAA,YACH,IAAG;AAAA,YACH,GAAE;AAAA,YACF,MAAK;AAAA,YACL,QAAO;AAAA,YACP,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAGhB;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAW,OAAO;AAAA,YAClB,IAAG;AAAA,YACH,IAAG;AAAA,YACH,GAAE;AAAA,YACF,MAAK;AAAA,YACL,QAAO;AAAA,YACP,aAAY;AAAA,YACZ,iBAAiB;AAAA,YACjB,eAAc;AAAA,UAAA;AAAA,QAAA;AAAA,MAClB;AAAA,IAAA;AAAA,EAAA;AAGZ;"}

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

@@ -0,0 +1,26 @@
+require('./Spinner.css');
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const spinner = "_spinner_j28th_5";
+const spinner__track = "_spinner__track_j28th_80";
+const spinner__car = "_spinner__car_j28th_88";
+const styles = {
+  spinner,
+  "spinner--primary": "_spinner--primary_j28th_24",
+  "spinner--secondary": "_spinner--secondary_j28th_28",
+  "spinner--inverse": "_spinner--inverse_j28th_32",
+  "spinner--inherit": "_spinner--inherit_j28th_36",
+  "spinner--xs": "_spinner--xs_j28th_45",
+  "spinner--s": "_spinner--s_j28th_28",
+  "spinner--m": "_spinner--m_j28th_57",
+  "spinner--l": "_spinner--l_j28th_63",
+  "spinner--xl": "_spinner--xl_j28th_69",
+  spinner__track,
+  spinner__car,
+  "spinner-rotate": "_spinner-rotate_j28th_1"
+};
+exports.default = styles;
+exports.spinner = spinner;
+exports.spinner__car = spinner__car;
+exports.spinner__track = spinner__track;
+//# sourceMappingURL=Spinner.module.css.cjs.map

package/dist/components/Spinner/Spinner.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,26 @@
+import './Spinner.css';
+const spinner = "_spinner_j28th_5";
+const spinner__track = "_spinner__track_j28th_80";
+const spinner__car = "_spinner__car_j28th_88";
+const styles = {
+  spinner,
+  "spinner--primary": "_spinner--primary_j28th_24",
+  "spinner--secondary": "_spinner--secondary_j28th_28",
+  "spinner--inverse": "_spinner--inverse_j28th_32",
+  "spinner--inherit": "_spinner--inherit_j28th_36",
+  "spinner--xs": "_spinner--xs_j28th_45",
+  "spinner--s": "_spinner--s_j28th_28",
+  "spinner--m": "_spinner--m_j28th_57",
+  "spinner--l": "_spinner--l_j28th_63",
+  "spinner--xl": "_spinner--xl_j28th_69",
+  spinner__track,
+  spinner__car,
+  "spinner-rotate": "_spinner-rotate_j28th_1"
+};
+export {
+  styles as default,
+  spinner,
+  spinner__car,
+  spinner__track
+};
+//# sourceMappingURL=Spinner.module.css.js.map

package/dist/components/Spinner/Spinner.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}

package/dist/components/Spinner/Spinner.types.d.ts

@@ -0,0 +1,41 @@
+import { ComponentPropsWithRef } from 'react';
+/**
+ * Color variant of the Spinner.
+ *
+ * - `primary`   — Primary brand color. Use on light backgrounds.
+ * - `secondary` — Secondary brand color. Use on light backgrounds.
+ * - `inverse`   — Inverse color. Use on dark or colored backgrounds.
+ * - `inherit`   — Inherit the current text color from the parent.
+ */
+export type SpinnerColor = 'primary' | 'secondary' | 'inverse' | 'inherit';
+/**
+ * Size variant of the Spinner following the T-shirt sizing scale.
+ *
+ * - `xs` — 20 × 20 px
+ * - `s`  — 24 × 24 px
+ * - `m`  — 40 × 40 px
+ * - `l`  — 64 × 64 px
+ * - `xl` — 80 × 80 px
+ */
+export type SpinnerSize = 'xs' | 's' | 'm' | 'l' | 'xl';
+export interface SpinnerProps extends ComponentPropsWithRef<'svg'> {
+    /**
+     * Color variant determining which design token is used for the spinner color.
+     * Use `inherit` to follow the parent's `currentColor`.
+     * @default 'primary'
+     */
+    readonly color?: SpinnerColor;
+    /**
+     * Size variant following the T-shirt sizing scale.
+     * @default 'm'
+     */
+    readonly size?: SpinnerSize;
+    /**
+     * Accessible label announced to screen readers.
+     * Defaults to the Finnish word for "Loading" per the design system convention
+     * (ADR-002). Override with a locale-appropriate string when needed.
+     * @default 'Ladataan'
+     */
+    readonly 'aria-label'?: string;
+}
+//# sourceMappingURL=Spinner.types.d.ts.map

package/dist/components/Spinner/Spinner.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.types.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/Spinner.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAEnD;;;;;;;GAOG;AACH,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC;AAE3E;;;;;;;;GAQG;AACH,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAExD,MAAM,WAAW,YAAa,SAAQ,qBAAqB,CAAC,KAAK,CAAC;IAC9D;;;;OAIG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,YAAY,CAAC;IAC9B;;;OAGG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,WAAW,CAAC;IAC5B;;;;;OAKG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;CAClC"}

package/dist/components/Spinner/index.d.ts

@@ -0,0 +1,3 @@
+export { Spinner } from './Spinner';
+export type { SpinnerColor, SpinnerProps, SpinnerSize } from './Spinner.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Spinner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/index.cjs

@@ -4,13 +4,19 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const Accordion = require("./components/Accordion/Accordion.cjs");
 const AccordionItem = require("./components/AccordionItem/AccordionItem.cjs");
 const Breadcrumb = require("./components/Breadcrumb/Breadcrumb.cjs");
+const Button = require("./components/Button/Button.cjs");
+const ColorScheme = require("./components/ColorScheme/ColorScheme.cjs");
 const Label = require("./components/Label/Label.cjs");
 const Notification = require("./components/Notification/Notification.cjs");
+const Spinner = require("./components/Spinner/Spinner.cjs");
 const cn = require("./utils/cn/cn.cjs");
 exports.Accordion = Accordion.Accordion;
 exports.AccordionItem = AccordionItem.AccordionItem;
 exports.Breadcrumb = Breadcrumb.Breadcrumb;
+exports.Button = Button.Button;
+exports.ColorScheme = ColorScheme.ColorScheme;
 exports.Label = Label.Label;
 exports.Notification = Notification.Notification;
+exports.Spinner = Spinner.Spinner;
 exports.cn = cn.cn;
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.d.ts

@@ -1,13 +1,19 @@
 export { Accordion } from './components/Accordion';
 export { AccordionItem } from './components/AccordionItem';
 export { Breadcrumb } from './components/Breadcrumb';
+export { Button } from './components/Button';
+export { ColorScheme } from './components/ColorScheme';
 export { Notification } from './components/Notification';
 export { Label } from './components/Label';
+export { Spinner } from './components/Spinner';
 export type { AccordionProps } from './components/Accordion';
 export type { AccordionItemProps } from './components/AccordionItem';
 export type { BreadcrumbItem, BreadcrumbLinkProps, BreadcrumbProps } from './components/Breadcrumb';
+export type { ButtonProps, ButtonLinkProps, ButtonVariant, ButtonSize } from './components/Button';
+export type { ColorSchemeProps, ColorSchemeValue } from './components/ColorScheme';
 export type { NotificationProps, NotificationVariant } from './components/Notification';
 export type { LabelProps, LabelVariant } from './components/Label';
+export type { SpinnerColor, SpinnerProps, SpinnerSize } from './components/Spinner';
 export { cn } from './utils';
 export type { CnDictionary, CnInput } from './utils';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAG5B,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACrE,YAAY,EAAE,cAAc,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AACpG,YAAY,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AACxF,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEnE,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAC7B,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAG5B,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACrE,YAAY,EAAE,cAAc,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AACpG,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACnG,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACnF,YAAY,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AACxF,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACnE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEpF,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAC7B,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -2,15 +2,21 @@
 import { Accordion } from "./components/Accordion/Accordion.js";
 import { AccordionItem } from "./components/AccordionItem/AccordionItem.js";
 import { Breadcrumb } from "./components/Breadcrumb/Breadcrumb.js";
+import { Button } from "./components/Button/Button.js";
+import { ColorScheme } from "./components/ColorScheme/ColorScheme.js";
 import { Label } from "./components/Label/Label.js";
 import { Notification } from "./components/Notification/Notification.js";
+import { Spinner } from "./components/Spinner/Spinner.js";
 import { cn } from "./utils/cn/cn.js";
 export {
   Accordion,
   AccordionItem,
   Breadcrumb,
+  Button,
+  ColorScheme,
   Label,
   Notification,
+  Spinner,
   cn
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/styles/utils/elevation.css

@@ -3,25 +3,25 @@
  * with official design tokens once elevation tokens are added to the design token set
  */
 
-._elevationLow_1rmn9_6 {
+._elevationLow_4gnft_6 {
     --_elevation-semantic-low: 0px 2px 16px 0px rgba(18, 18, 18, 0.06);
     --_elevation-style: var(--_elevation-semantic-low);
 }
 
-._elevationHigh_1rmn9_11 {
+._elevationHigh_4gnft_11 {
     --_elevation-semantic-high: 0px 4px 24px 0px rgba(18, 18, 18, 0.08);
     --_elevation-style: var(--_elevation-semantic-high);
 }
 
-._elevationExtraHigh_1rmn9_16 {
+._elevationExtraHigh_4gnft_16 {
     --_elevation-semantic-extra-high: 0px 8px 64px 0px rgba(18, 18, 18, 0.16);
     --_elevation-style: var(--_elevation-semantic-extra-high);
 }
 
-._elevationLow_1rmn9_6,
-._elevationHigh_1rmn9_11,
-._elevationExtraHigh_1rmn9_16 {
-    border: var(--borderwidth-semantic-xs) solid var(--colors-semantic-border-neutral-base);
+._elevationLow_4gnft_6,
+._elevationHigh_4gnft_11,
+._elevationExtraHigh_4gnft_16 {
+    border: var(--borderwidth-semantic-xs) solid var(--color-semantic-border-neutral-base);
     box-shadow: var(--_elevation-style);
     border-radius: var(--radius-semantic-md);
 }

package/dist/styles/utils/elevation.module.css.cjs

@@ -1,7 +1,7 @@
 require('./elevation.css');
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const elevationLow = "_elevationLow_1rmn9_6";
+const elevationLow = "_elevationLow_4gnft_6";
 const elevationStyles = {
   elevationLow
 };