@mattilsynet/design 0.0.12 → 0.1.0

package/mtds/styles.json

@@ -1,15 +1,32 @@
 {
-  "alert": "_alert_1h1lt_1 _ds-alert_whhdm_1",
-  "breadcrumbs": "_breadcrumbs_1h1lt_1 _ds-breadcrumbs_whhdm_1",
-  "button": "_button_1h1lt_1 _ds-button_whhdm_1",
-  "details": "_details_1h1lt_1 _ds-details_whhdm_1",
-  "field": "_field_1h1lt_1 _ds-field_whhdm_1",
-  "fieldset": "_fieldset_1h1lt_1 _ds-fieldset_whhdm_1",
-  "autolayout": "_autolayout_1h1lt_1",
-  "input": "_input_1h1lt_1 _ds-input_whhdm_1",
-  "link": "_link_1h1lt_1",
-  "logo": "_logo_1h1lt_1 _ds-focus_whhdm_1",
-  "popover": "_popover_1h1lt_1",
-  "validation": "_validation_1h1lt_1",
-  "body": "_body_1h1lt_50"
+  "alert": "_alert_d52qk_1 _ds-alert_whhdm_1",
+  "avatar": "_avatar_d52qk_1 _ds-avatar_whhdm_1",
+  "breadcrumbs": "_breadcrumbs_d52qk_1 _ds-breadcrumbs_whhdm_1",
+  "button": "_button_d52qk_1 _ds-button_whhdm_1",
+  "card": "_card_d52qk_1 _ds-card_whhdm_1",
+  "chip": "_chip_d52qk_1 _ds-chip_whhdm_1",
+  "details": "_details_d52qk_1 _ds-details_whhdm_1",
+  "errorsummary": "_errorsummary_d52qk_1 _ds-error-summary_whhdm_1",
+  "field": "_field_d52qk_1 _ds-field_whhdm_1",
+  "fieldChildAdded": "_fieldChildAdded_d52qk_1",
+  "affixes": "_affixes_d52qk_1 _ds-field-affixes_whhdm_1",
+  "count": "_count_d52qk_1",
+  "fieldset": "_fieldset_d52qk_1 _ds-fieldset_whhdm_1",
+  "fieldsetValidationAdded": "_fieldsetValidationAdded_d52qk_1",
+  "input": "_input_d52qk_1 _ds-input_whhdm_1",
+  "grid": "_grid_d52qk_1",
+  "flex": "_flex_d52qk_1",
+  "box": "_box_d52qk_1",
+  "link": "_link_d52qk_1",
+  "logo": "_logo_d52qk_1 _ds-focus_whhdm_1",
+  "modal": "_modal_d52qk_1 _ds-modal_whhdm_1",
+  "pagination": "_pagination_d52qk_1 _ds-pagination_whhdm_1",
+  "popover": "_popover_d52qk_1",
+  "table": "_table_d52qk_1 _ds-table_whhdm_1",
+  "scrollShadow": "_scrollShadow_d52qk_1",
+  "tableChildAdded": "_tableChildAdded_d52qk_1",
+  "tabs": "_tabs_d52qk_1",
+  "tag": "_tag_d52qk_1 _ds-tag_whhdm_1",
+  "validation": "_validation_d52qk_1 _ds-validation-message_whhdm_1",
+  "body": "_body_d52qk_65"
 }

package/mtds/styles.module.css.js

@@ -1,32 +1,66 @@
-const t = "_alert_1h1lt_1 _ds-alert_whhdm_1", _ = "_breadcrumbs_1h1lt_1 _ds-breadcrumbs_whhdm_1", o = "_button_1h1lt_1 _ds-button_whhdm_1", l = "_details_1h1lt_1 _ds-details_whhdm_1", d = "_field_1h1lt_1 _ds-field_whhdm_1", s = "_fieldset_1h1lt_1 _ds-fieldset_whhdm_1", e = "_autolayout_1h1lt_1", h = "_input_1h1lt_1 _ds-input_whhdm_1", n = "_link_1h1lt_1", a = "_logo_1h1lt_1 _ds-focus_whhdm_1", i = "_popover_1h1lt_1", u = "_validation_1h1lt_1", c = "_body_1h1lt_50", r = {
-  alert: t,
-  breadcrumbs: _,
-  button: o,
-  details: l,
-  field: d,
-  fieldset: s,
-  autolayout: e,
-  input: h,
-  link: n,
-  logo: a,
-  popover: i,
-  validation: u,
-  body: c
+const d = "_alert_d52qk_1 _ds-alert_whhdm_1", _ = "_avatar_d52qk_1 _ds-avatar_whhdm_1", t = "_breadcrumbs_d52qk_1 _ds-breadcrumbs_whhdm_1", s = "_button_d52qk_1 _ds-button_whhdm_1", o = "_card_d52qk_1 _ds-card_whhdm_1", a = "_chip_d52qk_1 _ds-chip_whhdm_1", e = "_details_d52qk_1 _ds-details_whhdm_1", i = "_errorsummary_d52qk_1 _ds-error-summary_whhdm_1", l = "_field_d52qk_1 _ds-field_whhdm_1", n = "_fieldChildAdded_d52qk_1", c = "_affixes_d52qk_1 _ds-field-affixes_whhdm_1", h = "_count_d52qk_1", r = "_fieldset_d52qk_1 _ds-fieldset_whhdm_1", m = "_fieldsetValidationAdded_d52qk_1", k = "_input_d52qk_1 _ds-input_whhdm_1", q = "_grid_d52qk_1", b = "_flex_d52qk_1", f = "_box_d52qk_1", u = "_link_d52qk_1", w = "_logo_d52qk_1 _ds-focus_whhdm_1", p = "_modal_d52qk_1 _ds-modal_whhdm_1", g = "_pagination_d52qk_1 _ds-pagination_whhdm_1", v = "_popover_d52qk_1", x = "_table_d52qk_1 _ds-table_whhdm_1", A = "_scrollShadow_d52qk_1", y = "_tableChildAdded_d52qk_1", C = "_tabs_d52qk_1", S = "_tag_d52qk_1 _ds-tag_whhdm_1", V = "_validation_d52qk_1 _ds-validation-message_whhdm_1", j = "_body_d52qk_65", z = {
+  alert: d,
+  avatar: _,
+  breadcrumbs: t,
+  button: s,
+  card: o,
+  chip: a,
+  details: e,
+  errorsummary: i,
+  field: l,
+  fieldChildAdded: n,
+  affixes: c,
+  count: h,
+  fieldset: r,
+  fieldsetValidationAdded: m,
+  input: k,
+  grid: q,
+  flex: b,
+  box: f,
+  link: u,
+  logo: w,
+  modal: p,
+  pagination: g,
+  popover: v,
+  table: x,
+  scrollShadow: A,
+  tableChildAdded: y,
+  tabs: C,
+  tag: S,
+  validation: V,
+  body: j
 };
 export {
-  t as alert,
-  e as autolayout,
-  c as body,
-  _ as breadcrumbs,
-  o as button,
-  r as default,
-  l as details,
-  d as field,
-  s as fieldset,
-  h as input,
-  n as link,
-  a as logo,
-  i as popover,
-  u as validation
+  c as affixes,
+  d as alert,
+  _ as avatar,
+  j as body,
+  f as box,
+  t as breadcrumbs,
+  s as button,
+  o as card,
+  a as chip,
+  h as count,
+  z as default,
+  e as details,
+  i as errorsummary,
+  l as field,
+  n as fieldChildAdded,
+  r as fieldset,
+  m as fieldsetValidationAdded,
+  b as flex,
+  q as grid,
+  k as input,
+  u as link,
+  w as logo,
+  p as modal,
+  g as pagination,
+  v as popover,
+  A as scrollShadow,
+  x as table,
+  y as tableChildAdded,
+  C as tabs,
+  S as tag,
+  V as validation
 };
 //# sourceMappingURL=styles.module.css.js.map

package/mtds/styles.module.css.js.map

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

package/mtds/table/table.d.ts

@@ -0,0 +1,2 @@
+export declare function observe(el: Element | Document): void;
+export declare function unobserve(el: Element | Document): void;

package/mtds/table/table.js

@@ -0,0 +1,30 @@
+import f from "../styles.module.css.js";
+import { IS_BROWSER as d, onAdd as i } from "../utils.js";
+const b = f.table.split(" ")[0], l = /* @__PURE__ */ new WeakMap();
+function m(t) {
+  var o, e;
+  for (const n of t) if (n instanceof HTMLTableElement) {
+    const a = Array.from(((e = (o = n.tHead) == null ? void 0 : o.rows[0]) == null ? void 0 : e.cells) || [], (r) => {
+      var s;
+      return (s = r.innerText) == null ? void 0 : s.trim();
+    });
+    for (const r of n.tBodies)
+      for (const s of r.rows)
+        for (const c of s.cells)
+          c.setAttribute("data-th", a[c.cellIndex] || "");
+  }
+}
+d && p(document);
+function p(t) {
+  const o = t.getElementsByClassName(b), e = i(f.tableChildAdded, () => m(o));
+  l.set(t, e), e.observe(t);
+}
+function B(t) {
+  var o;
+  (o = l.get(t)) == null || o.disconnect(t);
+}
+export {
+  p as observe,
+  B as unobserve
+};
+//# sourceMappingURL=table.js.map

package/mtds/table/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","sources":["../../designsystem/table/table.ts"],"sourcesContent":["import styles from '../styles.module.css';\nimport { IS_BROWSER, onAdd } from '../utils';\nconst CSS_TABLE = styles.table.split(' ')[0];\nconst BOUND = new WeakMap<Element | Document, ReturnType<typeof onAdd>>();\n\nfunction process(tables: HTMLCollectionOf<Element>) {\n  for(const table of tables) if (table instanceof HTMLTableElement) {\n    const ths = Array.from(table.tHead?.rows[0]?.cells || [], (el) => el.innerText?.trim()); // Using innerText to only include visible text\n    for (const tbody of table.tBodies) {\n      for (const row of tbody.rows) {\n        for (const cell of row.cells) {\n          cell.setAttribute('data-th', ths[cell.cellIndex] || '');\n        }\n      }\n    }\n  }\n}\n\nif (IS_BROWSER) observe(document);\n\nexport function observe (el: Element | Document) {\n  const tables = el.getElementsByClassName(CSS_TABLE);\n  const add = onAdd(styles.tableChildAdded, () => process(tables));\n  BOUND.set(el, add);\n  add.observe(el);\n}\n\nexport function unobserve (el: Element | Document) {\n  BOUND.get(el)?.disconnect(el);\n}\n"],"names":["CSS_TABLE","styles","BOUND","process","tables","table","ths","_b","_a","el","tbody","row","cell","IS_BROWSER","observe","add","onAdd","unobserve"],"mappings":";;AAEA,MAAMA,IAAYC,EAAO,MAAM,MAAM,GAAG,EAAE,CAAC,GACrCC,wBAAY,QAAsD;AAExE,SAASC,EAAQC,GAAmC;;AAClD,aAAUC,KAASD,EAAY,KAAAC,aAAiB,kBAAkB;AAChE,UAAMC,IAAM,MAAM,OAAKC,KAAAC,IAAAH,EAAM,UAAN,gBAAAG,EAAa,KAAK,OAAlB,gBAAAD,EAAsB,UAAS,IAAI,CAACE,MAAO;;AAAA,cAAAD,IAAAC,EAAG,cAAH,gBAAAD,EAAc;AAAA,KAAM;AAC3E,eAAAE,KAASL,EAAM;AACb,iBAAAM,KAAOD,EAAM;AACX,mBAAAE,KAAQD,EAAI;AACrB,UAAAC,EAAK,aAAa,WAAWN,EAAIM,EAAK,SAAS,KAAK,EAAE;AAAA,EAG5D;AAEJ;AAEIC,OAAoB,QAAQ;AAEzB,SAASC,EAASL,GAAwB;AACzC,QAAAL,IAASK,EAAG,uBAAuBT,CAAS,GAC5Ce,IAAMC,EAAMf,EAAO,iBAAiB,MAAME,EAAQC,CAAM,CAAC;AACzD,EAAAF,EAAA,IAAIO,GAAIM,CAAG,GACjBA,EAAI,QAAQN,CAAE;AAChB;AAEO,SAASQ,EAAWR,GAAwB;;AACjD,GAAAD,IAAAN,EAAM,IAAIO,CAAE,MAAZ,QAAAD,EAAe,WAAWC;AAC5B;"}

package/mtds/table/table.mockData.d.ts

@@ -0,0 +1,8 @@
+declare const _default: {
+    firstName: string;
+    lastName: string;
+    age: number;
+    visits: number;
+    date: number;
+}[];
+export default _default;

package/mtds/table/table.stories.d.ts

@@ -0,0 +1,28 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const DefaultTanstack: Story;
+export declare const HeadingsSimple: Story;
+export declare const HeadingsTanstack: Story;
+export declare const SortableSimple: Story;
+export declare const SortableTanstack: Story;
+export declare const PaginatableSimple: Story;
+export declare const PaginatableTanstack: Story;
+export declare const SearchableSimple: Story;
+export declare const SearchableTanstack: Story;
+export declare const ExpandableSimple: Story;
+export declare const ExpandableTanstack: Story;
+export declare const CheckableSimple: Story;
+export declare const CheckableTanstack: Story;
+export declare const HorizontalTitles: Story;
+export declare const FixedWidths: Story;
+export declare const NumericValues: Story;
+export declare const Footer: Story;
+export declare const Sizes: Story;
+export declare const Checkbox: Story;
+export declare const MobileScroll: Story;
+export declare const MobileDivide: Story;

package/mtds/tabs/tabs.stories.d.ts

@@ -0,0 +1,8 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Sizes: Story;

package/mtds/tag/tag.stories.d.ts

@@ -0,0 +1,7 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/mtds/utils.d.ts

@@ -1,4 +1,8 @@
 export declare const IS_BROWSER: boolean;
+export declare const QUICK_EVENT: {
+    capture: boolean;
+    passive: boolean;
+};
 export declare function useId(el: Element): string;
 /**
  * Speed up MutationObserver by debouncing and only running when page is visible
@@ -19,3 +23,28 @@ export declare const on: (element: Node | Window, type: string, listener: EventL
  * @param listener An event listener function or listener object
  */
 export declare const off: (element: Node | Window, type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined) => void;
+/**
+ * Child added event inspired by:
+ * https://davidwalsh.name/detect-node-insertion
+ */
+export declare const onAdd: (animationName: string, callback: () => void) => {
+    observe: (el: Element | Document) => void;
+    disconnect: (el: Element | Document) => void;
+};
+export declare const isInputLike: (el: unknown) => el is HTMLInputElement;
+declare global {
+    namespace React.JSX {
+        interface IntrinsicAttributes {
+            popovertargetaction?: string;
+            popovertarget?: string;
+            popover?: string | boolean;
+        }
+    }
+    namespace React {
+        interface HTMLAttributes<T> {
+            popovertargetaction?: string;
+            popovertarget?: string;
+            popover?: string | boolean;
+        }
+    }
+}

package/mtds/utils.js

@@ -1,26 +1,29 @@
-const d = typeof window < "u" && typeof document < "u";
-let s = 0;
-const c = `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`;
-function u(t) {
-  return t.id || (t.id = `${c}${++s}`), t.id;
+const f = typeof window < "u" && typeof document < "u", a = { capture: !0, passive: !0 };
+let c = 0;
+const d = `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`;
+function u(n) {
+  return n.id || (n.id = `${d}${++c}`), n.id;
 }
-function f(t) {
-  const e = [], n = new MutationObserver((r) => {
-    e[0] || requestAnimationFrame(o), e.push(...r);
-  }), o = () => {
-    t(e, n), e.length = 0;
+const s = (n, t, e) => {
+  for (const i of e[0].split(","))
+    e[0] = i, Element.prototype[`${n}EventListener`].apply(t, e);
+}, r = (n, ...t) => s("add", n, t), m = (n, ...t) => s("remove", n, t), p = (n, t) => {
+  let e = 0;
+  const i = (o) => {
+    o.animationName === n && (cancelAnimationFrame(e), e = requestAnimationFrame(t));
   };
-  return n;
-}
-const i = (t, e, n) => {
-  for (const o of n[0].split(","))
-    n[0] = o, Element.prototype[`${t}EventListener`].apply(e, n);
-}, p = (t, ...e) => i("add", t, e), a = (t, ...e) => i("remove", t, e);
+  return {
+    observe: (o) => r(o, "animationend", i, a),
+    disconnect: (o) => m(o, "animationstart", i, a)
+  };
+}, E = (n) => n instanceof HTMLElement && "validity" in n && !(n instanceof HTMLButtonElement);
 export {
-  d as IS_BROWSER,
-  f as createOptimizedMutationObserver,
-  a as off,
-  p as on,
+  f as IS_BROWSER,
+  a as QUICK_EVENT,
+  E as isInputLike,
+  m as off,
+  r as on,
+  p as onAdd,
   u as useId
 };
 //# sourceMappingURL=utils.js.map

package/mtds/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../designsystem/utils.ts"],"sourcesContent":["export const IS_BROWSER = typeof window !== 'undefined' && typeof document !== 'undefined';\n\n/**\n * useId\n * @return A generated unique ID\n */\nlet id = 0;\nconst UUID = `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`;\nexport function useId (el: Element) {\n  if (!el.id) el.id = `${UUID}${++id}`;\n\treturn el.id;\n};\n\n/**\n * Speed up MutationObserver by debouncing and only running when page is visible\n * @return new MutaionObserver\n */\nexport function createOptimizedMutationObserver(callback: MutationCallback) {\n  const queue: MutationRecord[] = [];\n  const observer = new MutationObserver((mutations) => {\n    if (!queue[0]) requestAnimationFrame(process);\n    queue.push(...mutations);\n  });\n\n  const process = () => {\n    callback(queue, observer);\n    queue.length = 0; // Reset queue\n  };\n\n  return observer;\n}\n\n// Internal helper for on / off\nconst events = (\n\taction: \"add\" | \"remove\",\n\telement: Node | Window,\n\trest: Parameters<typeof Element.prototype.addEventListener>,\n): void => {\n\tfor (const type of rest[0].split(\",\")) {\n\t\trest[0] = type;\n\t\tElement.prototype[`${action}EventListener`].apply(element, rest);\n\t}\n};\n\n/**\n * on\n * @param element The Element to use as EventTarget\n * @param types A comma separated string of event types\n * @param listener An event listener function or listener object\n */\nexport const on = (\n\telement: Node | Window,\n\t...rest: Parameters<typeof Element.prototype.addEventListener>\n): void => events(\"add\", element, rest);\n\n/**\n * off\n * @param element The Element to use as EventTarget\n * @param types A comma separated string of event types\n * @param listener An event listener function or listener object\n */\nexport const off = (\n\telement: Node | Window,\n\t...rest: Parameters<typeof Element.prototype.removeEventListener>\n): void => events(\"remove\", element, rest);\n\n"],"names":["IS_BROWSER","id","UUID","useId","el","createOptimizedMutationObserver","callback","queue","observer","mutations","process","events","action","element","rest","type","on","off"],"mappings":"AAAO,MAAMA,IAAa,OAAO,SAAW,OAAe,OAAO,WAAa;AAM/E,IAAIC,IAAK;AACT,MAAMC,IAAO,GAAG,KAAK,IAAM,EAAA,SAAS,EAAE,CAAC,GAAG,KAAK,SAAS,SAAS,EAAE,EAAE,MAAM,GAAG,CAAC,CAAC;AACzE,SAASC,EAAOC,GAAa;AAC9B,SAACA,EAAG,OAAIA,EAAG,KAAK,GAAGF,CAAI,GAAG,EAAED,CAAE,KAC5BG,EAAG;AACX;AAMO,SAASC,EAAgCC,GAA4B;AAC1E,QAAMC,IAA0B,CAAC,GAC3BC,IAAW,IAAI,iBAAiB,CAACC,MAAc;AACnD,IAAKF,EAAM,CAAC,2BAAyBG,CAAO,GACtCH,EAAA,KAAK,GAAGE,CAAS;AAAA,EAAA,CACxB,GAEKC,IAAU,MAAM;AACpB,IAAAJ,EAASC,GAAOC,CAAQ,GACxBD,EAAM,SAAS;AAAA,EACjB;AAEO,SAAAC;AACT;AAGA,MAAMG,IAAS,CACdC,GACAC,GACAC,MACU;AACV,aAAWC,KAAQD,EAAK,CAAC,EAAE,MAAM,GAAG;AACnC,IAAAA,EAAK,CAAC,IAAIC,GACV,QAAQ,UAAU,GAAGH,CAAM,eAAe,EAAE,MAAMC,GAASC,CAAI;AAEjE,GAQaE,IAAK,CACjBH,MACGC,MACOH,EAAO,OAAOE,GAASC,CAAI,GAQzBG,IAAM,CAClBJ,MACGC,MACOH,EAAO,UAAUE,GAASC,CAAI;"}
+{"version":3,"file":"utils.js","sources":["../designsystem/utils.ts"],"sourcesContent":["export const IS_BROWSER = typeof window !== 'undefined' && typeof document !== 'undefined';\nexport const QUICK_EVENT = { capture: true, passive: true };\n\n/**\n * useId\n * @return A generated unique ID\n */\nlet id = 0;\nconst UUID = `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`;\nexport function useId (el: Element) {\n  if (!el.id) el.id = `${UUID}${++id}`;\n\treturn el.id;\n};\n\n/**\n * Speed up MutationObserver by debouncing and only running when page is visible\n * @return new MutaionObserver\n */\nexport function createOptimizedMutationObserver(callback: MutationCallback) {\n  const queue: MutationRecord[] = [];\n  const observer = new MutationObserver((mutations) => {\n    if (!queue[0]) requestAnimationFrame(process);\n    queue.push(...mutations);\n  });\n\n  const process = () => {\n    callback(queue, observer);\n    queue.length = 0; // Reset queue\n  };\n\n  return observer;\n}\n\n// Internal helper for on / off\nconst events = (\n\taction: \"add\" | \"remove\",\n\telement: Node | Window,\n\trest: Parameters<typeof Element.prototype.addEventListener>,\n): void => {\n\tfor (const type of rest[0].split(\",\")) {\n\t\trest[0] = type;\n\t\tElement.prototype[`${action}EventListener`].apply(element, rest);\n\t}\n};\n\n/**\n * on\n * @param element The Element to use as EventTarget\n * @param types A comma separated string of event types\n * @param listener An event listener function or listener object\n */\nexport const on = (\n\telement: Node | Window,\n\t...rest: Parameters<typeof Element.prototype.addEventListener>\n): void => events(\"add\", element, rest);\n\n/**\n * off\n * @param element The Element to use as EventTarget\n * @param types A comma separated string of event types\n * @param listener An event listener function or listener object\n */\nexport const off = (\n\telement: Node | Window,\n\t...rest: Parameters<typeof Element.prototype.removeEventListener>\n): void => events(\"remove\", element, rest);\n\n/**\n * Child added event inspired by:\n * https://davidwalsh.name/detect-node-insertion\n */\nexport const onAdd = (animationName: string, callback: () => void) => {\n  let timer: ReturnType<typeof requestAnimationFrame> | number = 0;\n  const onAnimation = (event: Event & { animationName?: string }) => {\n    if (event.animationName === animationName) {\n      cancelAnimationFrame(timer);\n      timer = requestAnimationFrame(callback);\n    }\n  };\n\n\treturn {\n\t\tobserve: (el: Element | Document, ) => on(el, 'animationend', onAnimation, QUICK_EVENT),\n\t\tdisconnect: (el: Element | Document, ) => off(el, 'animationstart', onAnimation, QUICK_EVENT)\n\t};\n}\n\nexport const isInputLike = (el: unknown): el is HTMLInputElement =>\n\tel instanceof HTMLElement && 'validity' in el && !(el instanceof HTMLButtonElement);\n\n// Make React support popover=\"\"target attribute\n// https://github.com/facebook/react/issues/27479\ndeclare global {\n\tnamespace React.JSX {\n\t\tinterface IntrinsicAttributes {\n\t\t\tpopovertargetaction?: string;\n\t\t\tpopovertarget?: string;\n\t\t\tpopover?: string | boolean;\n\t\t}\n\t}\n\tnamespace React {\n\t\tinterface HTMLAttributes<T> {\n\t\t\tpopovertargetaction?: string;\n\t\t\tpopovertarget?: string;\n\t\t\tpopover?: string | boolean;\n\t\t}\n\t}\n}"],"names":["IS_BROWSER","QUICK_EVENT","id","UUID","useId","el","events","action","element","rest","type","on","off","onAdd","animationName","callback","timer","onAnimation","event","isInputLike"],"mappings":"AAAO,MAAMA,IAAa,OAAO,SAAW,OAAe,OAAO,WAAa,KAClEC,IAAc,EAAE,SAAS,IAAM,SAAS,GAAK;AAM1D,IAAIC,IAAK;AACT,MAAMC,IAAO,GAAG,KAAK,IAAM,EAAA,SAAS,EAAE,CAAC,GAAG,KAAK,SAAS,SAAS,EAAE,EAAE,MAAM,GAAG,CAAC,CAAC;AACzE,SAASC,EAAOC,GAAa;AAC9B,SAACA,EAAG,OAAIA,EAAG,KAAK,GAAGF,CAAI,GAAG,EAAED,CAAE,KAC5BG,EAAG;AACX;AAsBA,MAAMC,IAAS,CACdC,GACAC,GACAC,MACU;AACV,aAAWC,KAAQD,EAAK,CAAC,EAAE,MAAM,GAAG;AACnC,IAAAA,EAAK,CAAC,IAAIC,GACV,QAAQ,UAAU,GAAGH,CAAM,eAAe,EAAE,MAAMC,GAASC,CAAI;AAEjE,GAQaE,IAAK,CACjBH,MACGC,MACOH,EAAO,OAAOE,GAASC,CAAI,GAQzBG,IAAM,CAClBJ,MACGC,MACOH,EAAO,UAAUE,GAASC,CAAI,GAM5BI,IAAQ,CAACC,GAAuBC,MAAyB;AACpE,MAAIC,IAA2D;AACzD,QAAAC,IAAc,CAACC,MAA8C;AAC7D,IAAAA,EAAM,kBAAkBJ,MAC1B,qBAAqBE,CAAK,GAC1BA,IAAQ,sBAAsBD,CAAQ;AAAA,EAE1C;AAEM,SAAA;AAAA,IACN,SAAS,CAACV,MAA6BM,EAAGN,GAAI,gBAAgBY,GAAahB,CAAW;AAAA,IACtF,YAAY,CAACI,MAA6BO,EAAIP,GAAI,kBAAkBY,GAAahB,CAAW;AAAA,EAC7F;AACD,GAEakB,IAAc,CAACd,MAC3BA,aAAc,eAAe,cAAcA,KAAM,EAAEA,aAAc;"}

package/mtds/validation/validation.stories.d.ts

@@ -0,0 +1,7 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/package.json

@@ -1,18 +1,23 @@
 {
 	"name": "@mattilsynet/design",
-	"version": "0.0.12",
+	"version": "0.1.0",
 	"type": "module",
 	"main": "./mtds/index.js",
 	"types": "./mtds/index.d.ts",
 	"files": [
 		"mtds"
 	],
+	"engines": {
+		"npm": "^10.x",
+		"node": "^20.x"
+	},
 	"exports": {
 		".": {
 			"import": "./mtds/index.js",
 			"types": "./mtds/index.d.ts"
 		},
 		"./*.svg": "./mtds/*.svg",
+		"./*.ico": "./mtds/*.ico",
 		"./icons/*": "./mtds/icons/*",
 		"./illustrations/*": "./mtds/illustrations/*",
 		"./index.iife.js": "./mtds/index.iife.js",
@@ -21,16 +26,14 @@
 		"./styles.json": "./mtds/styles.json"
 	},
 	"scripts": {
-		"start": "vite",
 		"build": "vite build && rm -rf mtds/docs/",
 		"lint": "npx @biomejs/biome lint",
-		"preview": "vite preview",
-		"docs:dev": "vitepress dev",
-		"docs:build": "vitepress build",
-		"docs:preview": "vitepress preview",
-		"publish:patch": "npm run build && npm version patch --message 'Release %s' && git push --tags && npm publish --access public",
+		"publish:clojure": "cd ./clojure && ./publish.sh",
 		"publish:minor": "npm run build && npm version minor --message 'Release %s' && git push --tags && npm publish --access public",
-		"publish:clojure": "cd ./clojure && ./publish.sh"
+		"publish:patch": "npm run build && npm version patch --message 'Release %s' && git push --tags && npm publish --access public",
+		"start": "vite",
+		"storybook": "storybook dev -p 6006",
+		"storybook:build": "npm run build && storybook build"
 	},
 	"dependencies": {
 		"nanopop": "^2.4.2"
@@ -39,15 +42,31 @@
 		"@biomejs/biome": "^1.9.4",
 		"@digdir/designsystemet-css": "^1.0.0-next.44",
 		"@digdir/designsystemet-theme": "^1.0.0-next.44",
-		"@navikt/aksel-icons": "^7.8.0",
+		"@navikt/aksel-icons": "^7.9.0",
+		"@phosphor-icons/react": "^2.1.7",
+		"@storybook/addon-essentials": "^8.4.7",
+		"@storybook/addon-storysource": "^8.4.7",
+		"@storybook/blocks": "^8.4.7",
+		"@storybook/manager-api": "^8.4.7",
+		"@storybook/react": "^8.4.7",
+		"@storybook/react-vite": "^8.4.7",
+		"@storybook/theming": "^8.4.7",
+		"@tanstack/react-table": "^8.20.6",
 		"@types/node": "^22.10.2",
+		"@types/react": "^18.3.12",
+		"@types/react-dom": "^18.3.1",
 		"@u-elements/u-details": "^0.1.0",
+		"@u-elements/u-tabs": "^0.0.8",
+		"@vitejs/plugin-react": "^4.3.4",
+		"fast-glob": "^3.3.2",
+		"globals": "^15.12.0",
 		"postcss": "^8.4.49",
 		"postcss-nesting": "^13.0.1",
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1",
+		"storybook": "^8.4.7",
 		"typescript": "^5.7.2",
-		"vite": "^6.0.3",
-		"vite-plugin-dts": "^4.3.0",
-		"vitepress": "^1.5.0",
-		"vue": "^3.5.13"
+		"vite": "^6.0.6",
+		"vite-plugin-dts": "^4.4.0"
 	}
 }

package/mtds/input/input.d.ts

@@ -1 +0,0 @@
-export {};