@dnanpm/ui-components 0.0.5 → 0.2.0

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/{Tooltip → Spinner}/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC"}
+{"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/font-definitions.css

@@ -0,0 +1,61 @@
+/* DNA Text font definition */
+@font-face {
+    font-family: 'DNA Text';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src:
+        url('https://www.dna.fi/fonts/DNAText-Regular.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNAText-Regular.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Text';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src:
+        url('https://www.dna.fi/fonts/DNAText-Medium.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNAText-Medium.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Text';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src:
+        url('https://www.dna.fi/fonts/DNAText-Bold.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNAText-Bold.woff') format('woff');
+}
+
+/* DNA Heading font definition */
+@font-face {
+    font-family: 'DNA Heading';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src:
+        url('https://www.dna.fi/fonts/DNAHeading-DemiBold.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNAHeading-DemiBold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Heading';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src:
+        url('https://www.dna.fi/fonts/DNAHeading-Bold.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNAHeading-Bold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Heading';
+    font-style: normal;
+    font-weight: 900;
+    font-display: swap;
+    src:
+        url('https://www.dna.fi/fonts/DNAHeading-Black.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNAHeading-Black.woff') format('woff');
+}