@sikt/sds-notification 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,9 @@
+# Changelog
+
+All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
+
+## 1.0.0 (2026-01-28)
+
+### Features
+
+- **notification:** add new notification component ([42fbd81](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/42fbd8115dbfe1a18f7d2c78c618babc917f121a))

package/README.md

@@ -0,0 +1,30 @@
+# `@sikt/sds-notification`
+
+## Consume
+
+```sh
+npm i -s @sikt/sds-notification
+```
+
+### React
+
+```js
+import { Notification } from "packages/notification";
+import "@sikt/sds-notification/dist/index.css";
+
+/* jsx example goes here */
+```
+
+### Stylesheets & custom markup
+
+Import stylesheet:
+
+```css
+@import url("@sikt/sds-notification");
+```
+
+Create custom markup:
+
+```html
+<!-- html example goes here -->
+```

package/dist/index.css

@@ -0,0 +1,24 @@
+/* src/notification.pcss */
+.sds-notification {
+  align-items: center;
+  background-color: var(--sds-color-support-info-strong);
+  border-radius: var(--sds-space-border-radius-full);
+  color: var(--sds-color-text-on-strong);
+  display: inline-flex;
+  font-size: var(--sds-typography-fontsize-300);
+  justify-content: center;
+  padding: 0 var(--sds-space-padding-infinitesimal);
+  min-width: 1em;
+  min-height: 1em;
+}
+.sds-notification__count {
+  align-items: center;
+  display: inline-flex;
+  font-size: var(--sds-typography-body-default-fontsize);
+  font-weight: var(--sds-typography-fontweight-semibold);
+  justify-content: center;
+  line-height: var(--sds-typography-body-default-lineheight);
+  padding: 0 var(--sds-space-padding-minimal);
+  min-width: 1.25em;
+}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/notification.pcss"],"sourcesContent":[".sds-notification {\n  align-items: center;\n  background-color: var(--sds-color-support-info-strong);\n  border-radius: var(--sds-space-border-radius-full);\n  color: var(--sds-color-text-on-strong);\n  display: inline-flex;\n  font-size: var(--sds-typography-fontsize-300);\n  justify-content: center;\n  padding: 0 var(--sds-space-padding-infinitesimal);\n  min-width: 1em;\n  min-height: 1em;\n}\n\n  .sds-notification__count {\n    align-items: center;\n    display: inline-flex;\n    font-size: var(--sds-typography-body-default-fontsize);\n    font-weight: var(--sds-typography-fontweight-semibold);\n    justify-content: center;\n    line-height: var(--sds-typography-body-default-lineheight);\n    padding: 0 var(--sds-space-padding-minimal);\n    min-width: 1.25em;\n  }\n"],"mappings":";AAAA,CAAC;AACC,eAAa;AACb,oBAAkB,IAAI;AACtB,iBAAe,IAAI;AACnB,SAAO,IAAI;AACX,WAAS;AACT,aAAW,IAAI;AACf,mBAAiB;AACjB,WAAS,EAAE,IAAI;AACf,aAAW;AACX,cAAY;AACd;AAEE,CAAC;AACC,eAAa;AACb,WAAS;AACT,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,mBAAiB;AACjB,eAAa,IAAI;AACjB,WAAS,EAAE,IAAI;AACf,aAAW;AACb;","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLAttributes } from 'react';
+
+interface NotificationProps extends HTMLAttributes<HTMLSpanElement> {
+    className?: string;
+    count?: number;
+    maxCount?: number;
+}
+declare const Notification: {
+    ({ className, count, maxCount, ...rest }: NotificationProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { Notification, type NotificationProps };

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLAttributes } from 'react';
+
+interface NotificationProps extends HTMLAttributes<HTMLSpanElement> {
+    className?: string;
+    count?: number;
+    maxCount?: number;
+}
+declare const Notification: {
+    ({ className, count, maxCount, ...rest }: NotificationProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { Notification, type NotificationProps };

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";var e=require("clsx/lite"),r=require("react/jsx-runtime"),t=Object.defineProperty,a=Object.defineProperties,n=Object.getOwnPropertyDescriptors,o=Object.getOwnPropertySymbols,i=Object.prototype.hasOwnProperty,c=Object.prototype.propertyIsEnumerable,s=(e,r,a)=>r in e?t(e,r,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[r]=a,l=t=>{var l,f,u=t,{className:p,count:b,maxCount:m=1/0}=u,O=((e,r)=>{var t={};for(var a in e)i.call(e,a)&&r.indexOf(a)<0&&(t[a]=e[a]);if(null!=e&&o)for(var a of o(e))r.indexOf(a)<0&&c.call(e,a)&&(t[a]=e[a]);return t})(u,["className","count","maxCount"]);return r.jsx("span",(l=((e,r)=>{for(var t in r||(r={}))i.call(r,t)&&s(e,t,r[t]);if(o)for(var t of o(r))c.call(r,t)&&s(e,t,r[t]);return e})({className:e.clsx("sds-notification",p)},O),f={children:b&&r.jsx("span",{className:"sds-notification__count",children:m<b?"".concat(m,"+"):b})},a(l,n(f))))};l.displayName="Notification",exports.Notification=l;//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Notification.tsx"],"names":["jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUa,IAAA,YAAA,GAAe,CAAC,EAKJ,KAAA;AALI,EAC3B,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAW,GAAA;AAAA,GAbb,GAU6B,EAIxB,EAAA,IAAA,GAAA,SAAA,CAJwB,EAIxB,EAAA;AAAA,IAHH,WAAA;AAAA,IACA,OAAA;AAAA,IACA;AAAA,GAAA,CAAA;AAGA,EACE,uBAAAA,cAAA,CAAC,uCAAK,SAAW,EAAAC,SAAA,CAAK,oBAAoB,SAAS,CAAA,EAAA,EAAO,OAAzD,EACE,QAAA,EAAA,KAAA,mCACE,MAAK,EAAA,EAAA,SAAA,EAAU,2BACb,QAAW,EAAA,QAAA,GAAA,KAAA,GAAQ,GAAG,MAAQ,CAAA,QAAA,EAAA,GAAA,CAAA,GAAM,OACvC,CAEJ,EAAA,CAAA,CAAA;AAEJ;AAEA,YAAA,CAAa,WAAc,GAAA,cAAA","file":"index.js","sourcesContent":["import { clsx } from \"clsx/lite\";\nimport { HTMLAttributes } from \"react\";\nimport \"./notification.pcss\";\n\nexport interface NotificationProps extends HTMLAttributes<HTMLSpanElement> {\n  className?: string;\n  count?: number;\n  maxCount?: number;\n}\n\nexport const Notification = ({\n  className,\n  count,\n  maxCount = Infinity,\n  ...rest\n}: NotificationProps) => {\n  return (\n    <span className={clsx(\"sds-notification\", className)} {...rest}>\n      {count && (\n        <span className=\"sds-notification__count\">\n          {maxCount < count ? `${maxCount}+` : count}\n        </span>\n      )}\n    </span>\n  );\n};\n\nNotification.displayName = \"Notification\";\n"]}

package/dist/index.mjs

@@ -0,0 +1 @@
+import{clsx as e}from"clsx/lite";import{jsx as r}from"react/jsx-runtime";var t=Object.defineProperty,a=Object.defineProperties,o=Object.getOwnPropertyDescriptors,n=Object.getOwnPropertySymbols,i=Object.prototype.hasOwnProperty,c=Object.prototype.propertyIsEnumerable,l=(e,r,a)=>r in e?t(e,r,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[r]=a,s=t=>{var s,f,p=t,{className:m,count:u,maxCount:b=1/0}=p,O=((e,r)=>{var t={};for(var a in e)i.call(e,a)&&r.indexOf(a)<0&&(t[a]=e[a]);if(null!=e&&n)for(var a of n(e))r.indexOf(a)<0&&c.call(e,a)&&(t[a]=e[a]);return t})(p,["className","count","maxCount"]);return r("span",(s=((e,r)=>{for(var t in r||(r={}))i.call(r,t)&&l(e,t,r[t]);if(n)for(var t of n(r))c.call(r,t)&&l(e,t,r[t]);return e})({className:e("sds-notification",m)},O),f={children:u&&r("span",{className:"sds-notification__count",children:b<u?"".concat(b,"+"):u})},a(s,o(f))))};s.displayName="Notification";export{s as Notification};//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Notification.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUa,IAAA,YAAA,GAAe,CAAC,EAKJ,KAAA;AALI,EAC3B,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAW,GAAA;AAAA,GAbb,GAU6B,EAIxB,EAAA,IAAA,GAAA,SAAA,CAJwB,EAIxB,EAAA;AAAA,IAHH,WAAA;AAAA,IACA,OAAA;AAAA,IACA;AAAA,GAAA,CAAA;AAGA,EACE,uBAAA,GAAA,CAAC,uCAAK,SAAW,EAAA,IAAA,CAAK,oBAAoB,SAAS,CAAA,EAAA,EAAO,OAAzD,EACE,QAAA,EAAA,KAAA,wBACE,MAAK,EAAA,EAAA,SAAA,EAAU,2BACb,QAAW,EAAA,QAAA,GAAA,KAAA,GAAQ,GAAG,MAAQ,CAAA,QAAA,EAAA,GAAA,CAAA,GAAM,OACvC,CAEJ,EAAA,CAAA,CAAA;AAEJ;AAEA,YAAA,CAAa,WAAc,GAAA,cAAA","file":"index.mjs","sourcesContent":["import { clsx } from \"clsx/lite\";\nimport { HTMLAttributes } from \"react\";\nimport \"./notification.pcss\";\n\nexport interface NotificationProps extends HTMLAttributes<HTMLSpanElement> {\n  className?: string;\n  count?: number;\n  maxCount?: number;\n}\n\nexport const Notification = ({\n  className,\n  count,\n  maxCount = Infinity,\n  ...rest\n}: NotificationProps) => {\n  return (\n    <span className={clsx(\"sds-notification\", className)} {...rest}>\n      {count && (\n        <span className=\"sds-notification__count\">\n          {maxCount < count ? `${maxCount}+` : count}\n        </span>\n      )}\n    </span>\n  );\n};\n\nNotification.displayName = \"Notification\";\n"]}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@sikt/sds-notification",
+  "version": "1.0.0",
+  "license": "UNLICENSED",
+  "description": "Notification component, Sikt component library",
+  "homepage": "https://designsystem.sikt.no/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.sikt.no/designsystem/sds-komponentbibliotek.git"
+  },
+  "type": "commonjs",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "exports": {
+    ".": {
+      "style": "./dist/index.css",
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./dist/*": "./dist/*"
+  },
+  "types": "dist/index.d.ts",
+  "style": "dist/index.css",
+  "files": [
+    "CHANGELOG.md",
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup"
+  },
+  "dependencies": {
+    "@sikt/sds-core": "^5.0.0"
+  },
+  "peerDependencies": {
+    "@types/react": "^18.0.0 || ^19.0.0",
+    "@types/react-dom": "^18.0.0 || ^19.0.0",
+    "clsx": "^2.1.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  }
+}