@mattilsynet/design 1.3.1 → 1.3.3

package/mtds/input/input.js

@@ -1,24 +1,25 @@
-import { jsx as o } from "react/jsx-runtime";
-import { clsx as n } from "../external/clsx/dist/clsx.js";
+import { jsx as n } from "react/jsx-runtime";
+import { clsx as o } from "../external/clsx/dist/clsx.js";
 import { forwardRef as s } from "react";
-import c from "../styles.module.css.js";
-const a = s(function({ className: t, type: r = "text", ...e }, p) {
-  return /* @__PURE__ */ o(
+import p from "../styles.module.css.js";
+const l = s(function({ className: t, type: r = "text", ...e }, u) {
+  return /* @__PURE__ */ n(
     "input",
     {
-      className: n(c.input, t),
+      suppressHydrationWarning: !0,
+      className: o(p.input, t),
       type: r,
-      ref: p,
+      ref: u,
       ...e
     }
   );
 }), x = s(
   function({ className: t, ...r }, e) {
-    return /* @__PURE__ */ o("select", { className: n(c.input, t), ref: e, ...r });
+    return /* @__PURE__ */ n("select", { className: o(p.input, t), ref: e, ...r });
   }
 );
 export {
-  a as Input,
+  l as Input,
   x as Select
 };
 //# sourceMappingURL=input.js.map

package/mtds/input/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sources":["../../designsystem/input/input.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport styles from \"../styles.module.css\";\n\nexport type InputProps = React.ComponentPropsWithoutRef<\"input\">;\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n\t{ className, type = \"text\", ...rest },\n\tref,\n) {\n\treturn (\n\t\t<input\n\t\t\tclassName={clsx(styles.input, className)}\n\t\t\ttype={type}\n\t\t\tref={ref}\n\t\t\t{...rest}\n\t\t/>\n\t);\n});\n\nexport type SelectProps = React.ComponentPropsWithoutRef<\"select\">;\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n\tfunction Select({ className, ...rest }, ref) {\n\t\treturn (\n\t\t\t<select className={clsx(styles.input, className)} ref={ref} {...rest} />\n\t\t);\n\t},\n);\n"],"names":["Input","forwardRef","className","type","rest","ref","jsx","clsx","styles","Select"],"mappings":";;;;AAMa,MAAAA,IAAQC,EAAyC,SAC7D,EAAE,WAAAC,GAAW,MAAAC,IAAO,QAAQ,GAAGC,EAAK,GACpCC,GACC;AAEA,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,WAAWC,EAAKC,EAAO,OAAON,CAAS;AAAA,MACvC,MAAAC;AAAA,MACA,KAAAE;AAAA,MACC,GAAGD;AAAA,IAAA;AAAA,EACL;AAEF,CAAC,GAIYK,IAASR;AAAA,EACrB,SAAgB,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAAQC,GAAK;AAE3C,WAAA,gBAAAC,EAAC,UAAO,EAAA,WAAWC,EAAKC,EAAO,OAAON,CAAS,GAAG,KAAAG,GAAW,GAAGD,EAAM,CAAA;AAAA,EAAA;AAGzE;"}
+{"version":3,"file":"input.js","sources":["../../designsystem/input/input.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport styles from \"../styles.module.css\";\n\nexport type InputProps = React.ComponentPropsWithoutRef<\"input\">;\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n\t{ className, type = \"text\", ...rest },\n\tref,\n) {\n\treturn (\n\t\t<input\n\t\t\tsuppressHydrationWarning // Prevent hydration mismatch for SSR due to field-observer.ts\n\t\t\tclassName={clsx(styles.input, className)}\n\t\t\ttype={type}\n\t\t\tref={ref}\n\t\t\t{...rest}\n\t\t/>\n\t);\n});\n\nexport type SelectProps = React.ComponentPropsWithoutRef<\"select\">;\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n\tfunction Select({ className, ...rest }, ref) {\n\t\treturn (\n\t\t\t<select className={clsx(styles.input, className)} ref={ref} {...rest} />\n\t\t);\n\t},\n);\n"],"names":["Input","forwardRef","className","type","rest","ref","jsx","clsx","styles","Select"],"mappings":";;;;AAMa,MAAAA,IAAQC,EAAyC,SAC7D,EAAE,WAAAC,GAAW,MAAAC,IAAO,QAAQ,GAAGC,EAAK,GACpCC,GACC;AAEA,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,0BAAwB;AAAA,MACxB,WAAWC,EAAKC,EAAO,OAAON,CAAS;AAAA,MACvC,MAAAC;AAAA,MACA,KAAAE;AAAA,MACC,GAAGD;AAAA,IAAA;AAAA,EACL;AAEF,CAAC,GAIYK,IAASR;AAAA,EACrB,SAAgB,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAAQC,GAAK;AAE3C,WAAA,gBAAAC,EAAC,UAAO,EAAA,WAAWC,EAAKC,EAAO,OAAON,CAAS,GAAG,KAAAG,GAAW,GAAGD,EAAM,CAAA;AAAA,EAAA;AAGzE;"}

package/mtds/package.json.js

@@ -1,4 +1,4 @@
-const o = "1.3.1";
+const o = "1.3.3";
 export {
   o as version
 };

package/mtds/spinner/spinner.d.ts

@@ -1,6 +1,8 @@
 export type SpinnerProps = React.ComponentPropsWithoutRef<"span"> & {
     "data-size"?: "xs" | "sm" | "md" | "lg";
+    "data-state"?: "complete";
 };
 export declare const Spinner: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     "data-size"?: "xs" | "sm" | "md" | "lg";
+    "data-state"?: "complete";
 } & React.RefAttributes<HTMLSpanElement>>;

package/mtds/spinner/spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.js","sources":["../../designsystem/spinner/spinner.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport styles from \"../styles.module.css\";\n\nexport type SpinnerProps = React.ComponentPropsWithoutRef<\"span\"> & {\n\t\"data-size\"?: \"xs\" | \"sm\" | \"md\" | \"lg\";\n};\n\nexport const Spinner = forwardRef<HTMLSpanElement, SpinnerProps>(\n\tfunction Spinner({ className, ...rest }, ref) {\n\t\treturn (\n\t\t\t<span className={clsx(styles.spinner, className)} ref={ref} {...rest} />\n\t\t);\n\t},\n);\n"],"names":["Spinner","forwardRef","className","rest","ref","jsx","clsx","styles"],"mappings":";;;;AAQO,MAAMA,IAAUC;AAAA,EACtB,SAAiB,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAAQC,GAAK;AAE5C,WAAA,gBAAAC,EAAC,QAAK,EAAA,WAAWC,EAAKC,EAAO,SAASL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAAA,EAAA;AAGzE;"}
+{"version":3,"file":"spinner.js","sources":["../../designsystem/spinner/spinner.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport styles from \"../styles.module.css\";\n\nexport type SpinnerProps = React.ComponentPropsWithoutRef<\"span\"> & {\n\t\"data-size\"?: \"xs\" | \"sm\" | \"md\" | \"lg\";\n\t\"data-state\"?: \"complete\";\n};\n\nexport const Spinner = forwardRef<HTMLSpanElement, SpinnerProps>(\n\tfunction Spinner({ className, ...rest }, ref) {\n\t\treturn (\n\t\t\t<span className={clsx(styles.spinner, className)} ref={ref} {...rest} />\n\t\t);\n\t},\n);\n"],"names":["Spinner","forwardRef","className","rest","ref","jsx","clsx","styles"],"mappings":";;;;AASO,MAAMA,IAAUC;AAAA,EACtB,SAAiB,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAAQC,GAAK;AAE5C,WAAA,gBAAAC,EAAC,QAAK,EAAA,WAAWC,EAAKC,EAAO,SAASL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAAA,EAAA;AAGzE;"}

package/mtds/spinner/spinner.stories.d.ts

@@ -10,4 +10,5 @@ type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const React: Story;
 export declare const Sizes: Story;
-export declare const Text: Story;
+export declare const WithText: Story;
+export declare const WithStateComplete: Story;

package/mtds/steps/steps.d.ts

@@ -1,9 +1,10 @@
-import { JSX } from 'react';
-import { PolymorphicComponentPropWithRef } from '../react-types';
-export type StepsProps<As extends React.ElementType = "div"> = PolymorphicComponentPropWithRef<As, {
+export type StepsProps = React.ComponentPropsWithoutRef<"ol"> & {
     "data-direction"?: "right" | "up" | "down";
     "data-fade"?: "true" | "false" | "start" | "end";
-}>;
-type StepsComponent = <As extends React.ElementType = "div">(props: StepsProps<As>) => JSX.Element;
-export declare const Steps: StepsComponent;
-export {};
+    "data-state"?: "complete";
+};
+export declare const Steps: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & {
+    "data-direction"?: "right" | "up" | "down";
+    "data-fade"?: "true" | "false" | "start" | "end";
+    "data-state"?: "complete";
+} & React.RefAttributes<HTMLOListElement>>;

package/mtds/steps/steps.js

@@ -1,11 +1,11 @@
-import { jsx as m } from "react/jsx-runtime";
-import { clsx as e } from "../external/clsx/dist/clsx.js";
-import { forwardRef as p } from "react";
-import f from "../styles.module.css.js";
-const d = p(function({ as: o, className: r, ...t }, s) {
-  return /* @__PURE__ */ m(o || "div", { className: e(f.steps, r), ref: s, ...t });
+import { jsx as s } from "react/jsx-runtime";
+import { clsx as m } from "../external/clsx/dist/clsx.js";
+import { forwardRef as e } from "react";
+import p from "../styles.module.css.js";
+const a = e(function({ className: o, ...r }, t) {
+  return /* @__PURE__ */ s("ol", { className: m(p.steps, o), ref: t, ...r });
 });
 export {
-  d as Steps
+  a as Steps
 };
 //# sourceMappingURL=steps.js.map

package/mtds/steps/steps.js.map

@@ -1 +1 @@
-{"version":3,"file":"steps.js","sources":["../../designsystem/steps/steps.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type JSX, forwardRef } from \"react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\n\nexport type StepsProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<\n\t\tAs,\n\t\t{\n\t\t\t\"data-direction\"?: \"right\" | \"up\" | \"down\";\n\t\t\t\"data-fade\"?: \"true\" | \"false\" | \"start\" | \"end\";\n\t\t}\n\t>;\n\ntype StepsComponent = <As extends React.ElementType = \"div\">(\n\tprops: StepsProps<As>,\n) => JSX.Element;\n\nexport const Steps: StepsComponent = forwardRef<null>(function Steps<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: StepsProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn <Tag className={clsx(styles.steps, className)} ref={ref} {...rest} />;\n}) as StepsComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Steps","forwardRef","as","className","rest","ref","jsx","clsx","styles"],"mappings":";;;;AAqBa,MAAAA,IAAwBC,EAAiB,SAEpD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAK,GAAmBC,GAA0B;AAGhE,SAAA,gBAAAC,EAFKJ,KAAM,OAEN,EAAA,WAAWK,EAAKC,EAAO,OAAOL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAC3E,CAAC;"}
+{"version":3,"file":"steps.js","sources":["../../designsystem/steps/steps.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport styles from \"../styles.module.css\";\n\nexport type StepsProps = React.ComponentPropsWithoutRef<\"ol\"> & {\n\t\"data-direction\"?: \"right\" | \"up\" | \"down\";\n\t\"data-fade\"?: \"true\" | \"false\" | \"start\" | \"end\";\n\t\"data-state\"?: \"complete\";\n};\nexport const Steps = forwardRef<HTMLOListElement, StepsProps>(function Steps(\n\t{ className, ...rest }: StepsProps,\n\tref,\n) {\n\treturn <ol className={clsx(styles.steps, className)} ref={ref} {...rest} />;\n});\n"],"names":["Steps","forwardRef","className","rest","ref","jsx","clsx","styles"],"mappings":";;;;AASa,MAAAA,IAAQC,EAAyC,SAC7D,EAAE,WAAAC,GAAW,GAAGC,EAAK,GACrBC,GACC;AACM,SAAA,gBAAAC,EAAC,MAAG,EAAA,WAAWC,EAAKC,EAAO,OAAOL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAC1E,CAAC;"}

package/mtds/steps/steps.stories.d.ts

@@ -1,6 +1,5 @@
 import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
-    id: string;
     title: string;
     parameters: {
         layout: string;
@@ -12,11 +11,11 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
-export declare const WithDirectionDown: Story;
-export declare const WithDirectionUp: Story;
+export declare const React: Story;
+export declare const WithStateComplete: Story;
+export declare const WithDirection: Story;
 export declare const WithFade: Story;
-export declare const WithFadeDirectionDown: Story;
-export declare const WithFadeDirectionUp: Story;
+export declare const WithFadeAndDirection: Story;
+export declare const WithColors: Story;
+export declare const WithInteraction: Story;
 export declare const Timeline: Story;
-export declare const Colors: Story;
-export declare const React: Story;