@dnanpm/ui-components 0.0.5 → 0.2.0

package/dist/components/Label/Label.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import styles from "./Label.module.css.js";
+import { cn } from "../../utils/cn/cn.js";
+const Label = ({ variant = "default", className, children, ref, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      className: cn(styles.label, styles[`label--${variant}`], className),
+      ...props,
+      children
+    }
+  );
+};
+export {
+  Label
+};
+//# sourceMappingURL=Label.js.map

package/dist/components/Label/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.js","sources":["../../../src/components/Label/Label.tsx"],"sourcesContent":["import { cn } from '../../utils/cn';\nimport styles from './Label.module.css';\nimport type { LabelProps } from './Label.types';\n\nexport const Label = ({ variant = 'default', className, children, ref, ...props }: LabelProps) => {\n    return (\n        <span\n            ref={ref}\n            className={cn(styles.label, styles[`label--${variant}`], className)}\n            {...props}\n        >\n            {children}\n        </span>\n    );\n};\n"],"names":[],"mappings":";;;AAIO,MAAM,QAAQ,CAAC,EAAE,UAAU,WAAW,WAAW,UAAU,KAAK,GAAG,YAAwB;AAC9F,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAW,GAAG,OAAO,OAAO,OAAO,UAAU,OAAO,EAAE,GAAG,SAAS;AAAA,MACjE,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGb;"}

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

@@ -0,0 +1,16 @@
+require('./Label.css');
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const label = "_label_1bsev_1";
+const styles = {
+  label,
+  "label--default": "_label--default_1bsev_15",
+  "label--campaign": "_label--campaign_1bsev_19",
+  "label--new": "_label--new_1bsev_23",
+  "label--presale": "_label--presale_1bsev_27",
+  "label--soldout": "_label--soldout_1bsev_31",
+  "label--other": "_label--other_1bsev_35"
+};
+exports.default = styles;
+exports.label = label;
+//# sourceMappingURL=Label.module.css.cjs.map

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

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

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

@@ -0,0 +1,16 @@
+import './Label.css';
+const label = "_label_1bsev_1";
+const styles = {
+  label,
+  "label--default": "_label--default_1bsev_15",
+  "label--campaign": "_label--campaign_1bsev_19",
+  "label--new": "_label--new_1bsev_23",
+  "label--presale": "_label--presale_1bsev_27",
+  "label--soldout": "_label--soldout_1bsev_31",
+  "label--other": "_label--other_1bsev_35"
+};
+export {
+  styles as default,
+  label
+};
+//# sourceMappingURL=Label.module.css.js.map

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

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

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

@@ -0,0 +1,24 @@
+import type * as React from 'react';
+/**
+ * Visual variant of the Label, determining its background color.
+ *
+ * - `default` — White. Default neutral label.
+ * - `campaign` — Pink. Indicates discounts, benefits, and special offers.
+ * - `new` — Yellow. Indicates a "new state", e.g. new product.
+ * - `presale` — Orange. Indicates a pre-sale campaign.
+ * - `soldout` — Sand. Indicates a sold-out state.
+ * - `other` — Blue. Indicates anything else, e.g. special technical properties.
+ */
+export type LabelVariant = 'default' | 'campaign' | 'new' | 'presale' | 'soldout' | 'other';
+export interface LabelProps extends React.ComponentPropsWithRef<'span'> {
+    /**
+     * The visible text content of the label.
+     */
+    readonly children: React.ReactNode;
+    /**
+     * The visual variant that determines background color.
+     * @default 'default'
+     */
+    readonly variant?: LabelVariant;
+}
+//# sourceMappingURL=Label.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Label.types.d.ts","sourceRoot":"","sources":["../../../src/components/Label/Label.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC;;;;;;;;;GASG;AACH,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,UAAU,GAAG,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE5F,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,qBAAqB,CAAC,MAAM,CAAC;IACnE;;OAEG;IACH,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,YAAY,CAAC;CACnC"}

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

@@ -0,0 +1,3 @@
+export { Label } from './Label';
+export type { LabelProps, LabelVariant } from './Label.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Label/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/Notification/Notification.cjs

@@ -0,0 +1,57 @@
+"use strict";
+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 Notification_module = require("./Notification.module.css.cjs");
+const cn = require("../../utils/cn/cn.cjs");
+const variantIcons = {
+  info: icons.Info,
+  success: icons.Check,
+  warning: icons.Warning,
+  error: icons.Error
+};
+const variantRoles = {
+  info: "status",
+  success: "status",
+  warning: "alert",
+  error: "alert"
+};
+const Notification = ({
+  variant,
+  children,
+  closable = false,
+  onClose,
+  closeLabel = "Sulje ilmoitus",
+  className,
+  ref,
+  ...props
+}) => {
+  const Icon = variantIcons[variant];
+  const role = variantRoles[variant];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...props,
+      ref,
+      role,
+      className: cn.cn(Notification_module.default.notification, Notification_module.default[`notification--${variant}`], className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: Notification_module.default["notification__icon-container"], children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: Notification_module.default.notification__icon, "aria-hidden": "true" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: Notification_module.default.notification__content, children }),
+        closable && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: cn.cn(Notification_module.default.notification__close, focus_module.default.focusable),
+            onClick: onClose,
+            "aria-label": closeLabel,
+            children: /* @__PURE__ */ jsxRuntime.jsx(icons.Close, { "aria-hidden": "true" })
+          }
+        )
+      ]
+    }
+  );
+};
+exports.Notification = Notification;
+//# sourceMappingURL=Notification.cjs.map

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

@@ -0,0 +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;;"}

package/dist/components/Notification/Notification.css

@@ -0,0 +1,90 @@
+@layer dna-design-system {/**
+ * Notification Component Styles
+ *
+ * Design tokens are consumed via CSS custom properties (variables).
+ * These variables come from @dnanpm/design-tokens package.
+ */
+
+._notification_5h3rs_8 {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-ui-md);
+    padding-right: var(--spacing-ui-lg);
+    border: 2px solid var(--notification-color);
+    border-radius: var(--radius-semantic-sm);
+    overflow: clip;
+}
+
+/* Variant colors */
+._notification--info_5h3rs_19 {
+    --notification-color: var(--color-semantic-status-info);
+}
+
+._notification--success_5h3rs_23 {
+    --notification-color: var(--color-semantic-status-success);
+}
+
+._notification--warning_5h3rs_27 {
+    --notification-color: var(--color-semantic-status-warning);
+}
+
+._notification--error_5h3rs_31 {
+    --notification-color: var(--color-semantic-status-error);
+}
+
+/* Icon container */
+._notification__icon-container_5h3rs_36 {
+    /* 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;
+
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    align-self: stretch;
+    padding: var(--_icon-padding-with-border) var(--_icon-padding-without-border)
+        var(--_icon-padding-with-border) var(--_icon-padding-with-border);
+    background-color: var(--notification-color);
+    color: var(--color-semantic-foreground-inverse);
+}
+
+._notification__icon_5h3rs_36 {
+    width: 24px;
+    height: 24px;
+    flex: 0 0 auto;
+}
+
+/* Content */
+._notification__content_5h3rs_59 {
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: var(--spacing-ui-xs) 0;
+    font: var(--typography-body-md);
+    color: var(--color-semantic-foreground-default);
+    text-wrap: pretty;
+}
+
+/* Close button */
+._notification__close_5h3rs_69 {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    /* Negative margin to offset the button's size and maintain consistent spacing with the content */
+    margin: 0 calc(var(--spacing-ui-xxs) * -1);
+    border: none;
+    border-radius: var(--radius-semantic-sm);
+    background: none;
+    color: var(--color-semantic-foreground-default);
+    cursor: pointer;
+}
+
+._notification__close_5h3rs_69 svg {
+    width: 24px;
+    height: 24px;
+}
+}

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

@@ -0,0 +1,3 @@
+import { NotificationProps } from './Notification.types';
+export declare const Notification: ({ variant, children, closable, onClose, closeLabel, className, ref, ...props }: NotificationProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Notification.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/Notification/Notification.js

@@ -0,0 +1,57 @@
+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 styles from "./Notification.module.css.js";
+import { cn } from "../../utils/cn/cn.js";
+const variantIcons = {
+  info: Info,
+  success: Check,
+  warning: Warning,
+  error: Error
+};
+const variantRoles = {
+  info: "status",
+  success: "status",
+  warning: "alert",
+  error: "alert"
+};
+const Notification = ({
+  variant,
+  children,
+  closable = false,
+  onClose,
+  closeLabel = "Sulje ilmoitus",
+  className,
+  ref,
+  ...props
+}) => {
+  const Icon = variantIcons[variant];
+  const role = variantRoles[variant];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      ref,
+      role,
+      className: cn(styles.notification, styles[`notification--${variant}`], className),
+      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 }),
+        closable && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: cn(styles.notification__close, focusStyles.focusable),
+            onClick: onClose,
+            "aria-label": closeLabel,
+            children: /* @__PURE__ */ jsx(Close, { "aria-hidden": "true" })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Notification
+};
+//# sourceMappingURL=Notification.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,24 @@
+require('./Notification.css');
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+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_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
+};
+exports.default = styles;
+exports.notification = notification;
+exports.notification__close = notification__close;
+exports.notification__content = notification__content;
+exports.notification__icon = notification__icon;
+//# sourceMappingURL=Notification.module.css.cjs.map

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

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

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

@@ -0,0 +1,24 @@
+import './Notification.css';
+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_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
+};
+export {
+  styles as default,
+  notification,
+  notification__close,
+  notification__content,
+  notification__icon
+};
+//# sourceMappingURL=Notification.module.css.js.map

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

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

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

@@ -0,0 +1,40 @@
+import type * as React from 'react';
+export type NotificationVariant = 'info' | 'success' | 'warning' | 'error';
+interface NotificationBaseProps extends Omit<React.ComponentPropsWithRef<'div'>, 'children'> {
+    /**
+     * Visual variant determining the color and icon.
+     */
+    readonly variant: NotificationVariant;
+    /**
+     * Notification message content.
+     */
+    readonly children: React.ReactNode;
+}
+interface NotificationClosableProps extends NotificationBaseProps {
+    /**
+     * Whether to show the close button.
+     */
+    readonly closable: true;
+    /**
+     * Callback fired when the close button is clicked.
+     * Required when `closable` is true.
+     * The consuming application is responsible for handling dismiss logic.
+     */
+    readonly onClose: () => void;
+    /**
+     * Accessible label for the close button.
+     */
+    readonly closeLabel?: string;
+}
+interface NotificationStaticProps extends NotificationBaseProps {
+    /**
+     * Whether to show the close button.
+     * @default false
+     */
+    readonly closable?: false;
+    readonly onClose?: never;
+    readonly closeLabel?: never;
+}
+export type NotificationProps = NotificationClosableProps | NotificationStaticProps;
+export {};
+//# sourceMappingURL=Notification.types.d.ts.map

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

@@ -0,0 +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,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/Notification/index.d.ts

@@ -0,0 +1,3 @@
+export { Notification } from './Notification';
+export type { NotificationProps, NotificationVariant } from './Notification.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,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"}