@kakadu/components 0.1.4 → 1.0.1

package/build/utilities/generate-random-id.mjs

@@ -0,0 +1,14 @@
+const n = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ", e = n.length;
+function r() {
+  let a = "", t = Math.round(
+    Number.parseInt(`${Date.now()}${Math.floor(Math.random() * 100)}`, 10) * Math.random()
+  );
+  for (; t > 0; ) {
+    const o = t % e;
+    a = n[Number(o)] + a, t = Math.floor(t / e);
+  }
+  return `${a}${Math.floor(Math.random() * 100)}`;
+}
+export {
+  r as default
+};

package/build/utilities/scale.d.ts

@@ -0,0 +1,11 @@
+import { type SVGProps } from 'react';
+export default function scale({ originalWidth, originalHeight, size, width, height, }: {
+    readonly originalWidth: number;
+    readonly originalHeight: number;
+    readonly size?: number;
+    readonly width?: SVGProps<SVGSVGElement>['width'];
+    readonly height?: SVGProps<SVGSVGElement>['height'];
+}): {
+    width: string | number | undefined;
+    height: string | number | undefined;
+};

package/build/utilities/scale.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});function m({originalWidth:u,originalHeight:s,size:n,width:e,height:t}){const o=typeof e=="number"?e:void 0,c=typeof t=="number"?t:void 0,r=o&&!c,b=c&&!o,f=n??(r?e:b&&typeof t=="number"?t/s*u:u),l=n??(r&&typeof e=="number"?e/u*s:b?t:s);return{width:f,height:l}}exports.default=m;

package/build/utilities/scale.mjs

@@ -0,0 +1,13 @@
+function r({
+  originalWidth: s,
+  originalHeight: t,
+  size: u,
+  width: e,
+  height: n
+}) {
+  const c = typeof e == "number" ? e : void 0, o = typeof n == "number" ? n : void 0, b = c && !o, f = o && !c, m = u ?? (b ? e : f && typeof n == "number" ? n / t * s : s), p = u ?? (b && typeof e == "number" ? e / s * t : f ? n : t);
+  return { width: m, height: p };
+}
+export {
+  r as default
+};

package/build/veil.d.ts

@@ -0,0 +1,3 @@
+export default function Veil({ hasMovingStars, }: {
+    readonly hasMovingStars?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/build/veil.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./jsx-runtime-BB_1_6y_.js"),u=require("react"),n=require("./moving-gradients.js"),o=require("./moving-stars.js"),i=require("./theme-setter.js");function a({hasMovingStars:r=!0}){const t=u.useRef(null),s=i.useIsDarkMode(t);return e.jsxRuntimeExports.jsxs("div",{ref:t,className:"kakadu-components-4115326614",children:[e.jsxRuntimeExports.jsx(n.default,{opacity:s?.1:.2,className:"kakadu-components-947991810"}),r?e.jsxRuntimeExports.jsx(o.default,{opacity:s?.1:.2}):null]})}exports.default=a;

package/build/veil.mjs

@@ -0,0 +1,17 @@
+import { j as o } from "./jsx-runtime-B4hRZ52C.mjs";
+import { useRef as t } from "react";
+import a from "./moving-gradients.mjs";
+import n from "./moving-stars.mjs";
+import { useIsDarkMode as i } from "./theme-setter.mjs";
+function l({
+  hasMovingStars: s = !0
+}) {
+  const r = t(null), e = i(r);
+  return /* @__PURE__ */ o.jsxs("div", { ref: r, className: "kakadu-components-4115326614", children: [
+    /* @__PURE__ */ o.jsx(a, { opacity: e ? 0.1 : 0.2, className: "kakadu-components-947991810" }),
+    s ? /* @__PURE__ */ o.jsx(n, { opacity: e ? 0.1 : 0.2 }) : null
+  ] });
+}
+export {
+  l as default
+};

package/index.d.ts

@@ -0,0 +1,60 @@
+export * from './build/atom';
+export * from './build/aria-text';
+export * from './build/box';
+export * from './build/button';
+export * from './build/button-tooltip';
+export * from './build/card';
+export * from './build/click-ripples';
+export * from './build/datum';
+export * from './build/dot';
+export * from './build/flex';
+export * from './build/footer';
+export * from './build/gauge';
+export * from './build/hover-gradient';
+export * from './build/icon-button';
+export * from './build/kakadu-guide-icon';
+export * from './build/kakadu-guide-logo';
+export * from './build/kakadu-index-logo';
+export * from './build/kakadu-logo';
+export * from './build/bankid-logo';
+export * from './build/dnb-logo';
+export * from './build/gjensidige-logo';
+export * from './build/sparebank1-logo';
+export * from './build/sto-logo';
+export * from './build/storebrand-logo';
+export * from './build/modal';
+export * from './build/moving-gradients';
+export * from './build/moving-stars';
+export * from './build/notice';
+export * from './build/notification';
+export * from './build/revealer';
+export * from './build/separator';
+export * from './build/skeleton';
+export * from './build/spinner';
+export * from './build/text';
+export * from './build/text-button';
+export * from './build/theme-setter';
+export * from './build/veil';
+export * from './build/theme';
+export * from './build/icon';
+export * from './build/icons/kakadu-guide';
+export * from './build/icons/kakadu-guide-glyph';
+export * from './build/icons/menu';
+export * from './build/icons/check';
+export * from './build/icons/plus';
+export * from './build/icons/times';
+export * from './build/icons/chevron-down';
+export * from './build/icons/chevron-up';
+export * from './build/icons/caret-down';
+export * from './build/icons/caret-right';
+export * from './build/icons/arrow-down';
+export * from './build/icons/edit';
+export * from './build/icons/copy';
+export * from './build/icons/test';
+export * from './build/icons/exclamation-triangle';
+export * from './build/icons/chrome-browser-logo';
+export * from './build/icons/edge-browser-logo';
+export * from './build/hooks/use-media-query';
+export * from './build/utilities/copy-to-clipboard';
+export * from './build/utilities/generate-random-id';
+export * from './build/utilities/scale';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kakadu/components",
-  "version": "0.1.4",
+  "version": "1.0.1",
   "description": "Kakadu components library",
   "license": "MIT",
   "repository": {
@@ -14,12 +14,9 @@
     "ui",
     "design-system"
   ],
-  "main": "./build/index.js",
-  "module": "./build/index.mjs",
-  "types": "./build/index.d.ts",
   "scripts": {
     "dev": "next dev",
-    "build": "rm -rf build && vite build && tsc --project tsconfig.build.json --emitDeclarationOnly --outDir build",
+    "build": "rm -rf build && vite build && tsc --project tsconfig.build.json --emitDeclarationOnly --outDir build && node move-types.mjs",
     "build:next": "next build",
     "start": "next start",
     "storybook": "storybook dev -p 6006 --no-open",
@@ -30,13 +27,12 @@
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
-    "prepublishOnly": "npm test && npm run build"
+    "prepublishOnly": "npm test && npm run build",
+    "chromatic": "npx chromatic --project-token=chpt_52149863cf0ae20"
   },
   "exports": {
     ".": {
-      "types": "./build/index.d.ts",
-      "import": "./build/index.mjs",
-      "require": "./build/index.js"
+      "types": "./index.d.ts"
     },
     "./atom": {
       "types": "./build/atom.d.ts",
@@ -53,21 +49,146 @@
       "import": "./build/box.mjs",
       "require": "./build/box.js"
     },
+    "./button": {
+      "types": "./build/button.d.ts",
+      "import": "./build/button.mjs",
+      "require": "./build/button.js"
+    },
+    "./button-tooltip": {
+      "types": "./build/button-tooltip.d.ts",
+      "import": "./build/button-tooltip.mjs",
+      "require": "./build/button-tooltip.js"
+    },
+    "./card": {
+      "types": "./build/card.d.ts",
+      "import": "./build/card.mjs",
+      "require": "./build/card.js"
+    },
+    "./click-ripples": {
+      "types": "./build/click-ripples.d.ts",
+      "import": "./build/click-ripples.mjs",
+      "require": "./build/click-ripples.js"
+    },
+    "./datum": {
+      "types": "./build/datum.d.ts",
+      "import": "./build/datum.mjs",
+      "require": "./build/datum.js"
+    },
+    "./dot": {
+      "types": "./build/dot.d.ts",
+      "import": "./build/dot.mjs",
+      "require": "./build/dot.js"
+    },
     "./flex": {
       "types": "./build/flex.d.ts",
       "import": "./build/flex.mjs",
       "require": "./build/flex.js"
     },
-    "./text": {
-      "types": "./build/text.d.ts",
-      "import": "./build/text.mjs",
-      "require": "./build/text.js"
+    "./footer": {
+      "types": "./build/footer.d.ts",
+      "import": "./build/footer.mjs",
+      "require": "./build/footer.js"
     },
     "./gauge": {
       "types": "./build/gauge.d.ts",
       "import": "./build/gauge.mjs",
       "require": "./build/gauge.js"
     },
+    "./hover-gradient": {
+      "types": "./build/hover-gradient.d.ts",
+      "import": "./build/hover-gradient.mjs",
+      "require": "./build/hover-gradient.js"
+    },
+    "./icon-button": {
+      "types": "./build/icon-button.d.ts",
+      "import": "./build/icon-button.mjs",
+      "require": "./build/icon-button.js"
+    },
+    "./kakadu-guide-icon": {
+      "types": "./build/kakadu-guide-icon.d.ts",
+      "import": "./build/kakadu-guide-icon.mjs",
+      "require": "./build/kakadu-guide-icon.js"
+    },
+    "./kakadu-guide-logo": {
+      "types": "./build/kakadu-guide-logo.d.ts",
+      "import": "./build/kakadu-guide-logo.mjs",
+      "require": "./build/kakadu-guide-logo.js"
+    },
+    "./kakadu-logo": {
+      "types": "./build/kakadu-logo.d.ts",
+      "import": "./build/kakadu-logo.mjs",
+      "require": "./build/kakadu-logo.js"
+    },
+    "./kakadu-index-logo": {
+      "types": "./build/kakadu-index-logo.d.ts",
+      "import": "./build/kakadu-index-logo.mjs",
+      "require": "./build/kakadu-index-logo.js"
+    },
+    "./bankid-logo": {
+      "types": "./build/bankid-logo.d.ts",
+      "import": "./build/bankid-logo.mjs",
+      "require": "./build/bankid-logo.js"
+    },
+    "./dnb-logo": {
+      "types": "./build/dnb-logo.d.ts",
+      "import": "./build/dnb-logo.mjs",
+      "require": "./build/dnb-logo.js"
+    },
+    "./gjensidige-logo": {
+      "types": "./build/gjensidige-logo.d.ts",
+      "import": "./build/gjensidige-logo.mjs",
+      "require": "./build/gjensidige-logo.js"
+    },
+    "./sparebank1-logo": {
+      "types": "./build/sparebank1-logo.d.ts",
+      "import": "./build/sparebank1-logo.mjs",
+      "require": "./build/sparebank1-logo.js"
+    },
+    "./sto-logo": {
+      "types": "./build/sto-logo.d.ts",
+      "import": "./build/sto-logo.mjs",
+      "require": "./build/sto-logo.js"
+    },
+    "./storebrand-logo": {
+      "types": "./build/storebrand-logo.d.ts",
+      "import": "./build/storebrand-logo.mjs",
+      "require": "./build/storebrand-logo.js"
+    },
+    "./modal": {
+      "types": "./build/modal.d.ts",
+      "import": "./build/modal.mjs",
+      "require": "./build/modal.js"
+    },
+    "./moving-gradients": {
+      "types": "./build/moving-gradients.d.ts",
+      "import": "./build/moving-gradients.mjs",
+      "require": "./build/moving-gradients.js"
+    },
+    "./moving-stars": {
+      "types": "./build/moving-stars.d.ts",
+      "import": "./build/moving-stars.mjs",
+      "require": "./build/moving-stars.js"
+    },
+    "./notice": {
+      "types": "./build/notice.d.ts",
+      "import": "./build/notice.mjs",
+      "require": "./build/notice.js"
+    },
+    "./notification": {
+      "types": "./build/notification.d.ts",
+      "import": "./build/notification.mjs",
+      "require": "./build/notification.js"
+    },
+    "./revealer": {
+      "types": "./build/revealer.d.ts",
+      "import": "./build/revealer.mjs",
+      "require": "./build/revealer.js"
+    },
+    "./separator": {
+      "types": "./build/separator.d.ts",
+      "import": "./build/separator.mjs",
+      "require": "./build/separator.js"
+    },
     "./skeleton": {
       "types": "./build/skeleton.d.ts",
       "import": "./build/skeleton.mjs",
@@ -78,6 +199,26 @@
       "import": "./build/spinner.mjs",
       "require": "./build/spinner.js"
     },
+    "./text": {
+      "types": "./build/text.d.ts",
+      "import": "./build/text.mjs",
+      "require": "./build/text.js"
+    },
+    "./text-button": {
+      "types": "./build/text-button.d.ts",
+      "import": "./build/text-button.mjs",
+      "require": "./build/text-button.js"
+    },
+    "./theme-setter": {
+      "types": "./build/theme-setter.d.ts",
+      "import": "./build/theme-setter.mjs",
+      "require": "./build/theme-setter.js"
+    },
+    "./veil": {
+      "types": "./build/veil.d.ts",
+      "import": "./build/veil.mjs",
+      "require": "./build/veil.js"
+    },
     "./theme": {
       "types": "./build/theme.d.ts",
       "import": "./build/theme.mjs",
@@ -88,11 +229,122 @@
       "import": "./build/theme.mjs",
       "require": "./build/theme.js"
     },
+    "./icon": {
+      "types": "./build/icon.d.ts",
+      "import": "./build/icon.mjs",
+      "require": "./build/icon.js"
+    },
+    "./icons/kakadu-guide": {
+      "types": "./build/icons/kakadu-guide.d.ts",
+      "import": "./build/icons/kakadu-guide.mjs",
+      "require": "./build/icons/kakadu-guide.js"
+    },
+    "./icons/kakadu-guide-glyph": {
+      "types": "./build/icons/kakadu-guide-glyph.d.ts",
+      "import": "./build/icons/kakadu-guide-glyph.mjs",
+      "require": "./build/icons/kakadu-guide-glyph.js"
+    },
+    "./icons/check": {
+      "types": "./build/icons/check.d.ts",
+      "import": "./build/icons/check.mjs",
+      "require": "./build/icons/check.js"
+    },
+    "./icons/plus": {
+      "types": "./build/icons/plus.d.ts",
+      "import": "./build/icons/plus.mjs",
+      "require": "./build/icons/plus.js"
+    },
+    "./icons/times": {
+      "types": "./build/icons/times.d.ts",
+      "import": "./build/icons/times.mjs",
+      "require": "./build/icons/times.js"
+    },
+    "./icons/chevron-down": {
+      "types": "./build/icons/chevron-down.d.ts",
+      "import": "./build/icons/chevron-down.mjs",
+      "require": "./build/icons/chevron-down.js"
+    },
+    "./icons/chevron-up": {
+      "types": "./build/icons/chevron-up.d.ts",
+      "import": "./build/icons/chevron-up.mjs",
+      "require": "./build/icons/chevron-up.js"
+    },
+    "./icons/caret-down": {
+      "types": "./build/icons/caret-down.d.ts",
+      "import": "./build/icons/caret-down.mjs",
+      "require": "./build/icons/caret-down.js"
+    },
+    "./icons/caret-right": {
+      "types": "./build/icons/caret-right.d.ts",
+      "import": "./build/icons/caret-right.mjs",
+      "require": "./build/icons/caret-right.js"
+    },
+    "./icons/arrow-down": {
+      "types": "./build/icons/arrow-down.d.ts",
+      "import": "./build/icons/arrow-down.mjs",
+      "require": "./build/icons/arrow-down.js"
+    },
+    "./icons/edit": {
+      "types": "./build/icons/edit.d.ts",
+      "import": "./build/icons/edit.mjs",
+      "require": "./build/icons/edit.js"
+    },
+    "./icons/copy": {
+      "types": "./build/icons/copy.d.ts",
+      "import": "./build/icons/copy.mjs",
+      "require": "./build/icons/copy.js"
+    },
+    "./icons/test": {
+      "types": "./build/icons/test.d.ts",
+      "import": "./build/icons/test.mjs",
+      "require": "./build/icons/test.js"
+    },
+    "./icons/exclamation-triangle": {
+      "types": "./build/icons/exclamation-triangle.d.ts",
+      "import": "./build/icons/exclamation-triangle.mjs",
+      "require": "./build/icons/exclamation-triangle.js"
+    },
+    "./icons/chrome-browser-logo": {
+      "types": "./build/icons/chrome-browser-logo.d.ts",
+      "import": "./build/icons/chrome-browser-logo.mjs",
+      "require": "./build/icons/chrome-browser-logo.js"
+    },
+    "./icons/edge-browser-logo": {
+      "types": "./build/icons/edge-browser-logo.d.ts",
+      "import": "./build/icons/edge-browser-logo.mjs",
+      "require": "./build/icons/edge-browser-logo.js"
+    },
+    "./icons/menu": {
+      "types": "./build/icons/menu.d.ts",
+      "import": "./build/icons/menu.mjs",
+      "require": "./build/icons/menu.js"
+    },
+    "./hooks/use-media-query": {
+      "types": "./build/hooks/use-media-query.d.ts",
+      "import": "./build/hooks/use-media-query.mjs",
+      "require": "./build/hooks/use-media-query.js"
+    },
+    "./utilities/copy-to-clipboard": {
+      "types": "./build/utilities/copy-to-clipboard.d.ts",
+      "import": "./build/utilities/copy-to-clipboard.mjs",
+      "require": "./build/utilities/copy-to-clipboard.js"
+    },
+    "./utilities/generate-random-id": {
+      "types": "./build/utilities/generate-random-id.d.ts",
+      "import": "./build/utilities/generate-random-id.mjs",
+      "require": "./build/utilities/generate-random-id.js"
+    },
+    "./utilities/scale": {
+      "types": "./build/utilities/scale.d.ts",
+      "import": "./build/utilities/scale.mjs",
+      "require": "./build/utilities/scale.js"
+    },
     "./components.css": "./build/components.css"
   },
   "files": [
     "build",
-    "theme.tsx"
+    "theme.tsx",
+    "index.d.ts"
   ],
   "publishConfig": {
     "access": "public"
@@ -100,21 +352,28 @@
   "sideEffects": [
     "**/*.css"
   ],
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./build/*"
+      ]
+    }
+  },
   "peerDependencies": {
-    "@kuma-ui/core": "^1.6.0",
+    "@kuma-ui/core": "^1.6.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "dependencies": {
-    "@kuma-ui/vite": "^1.5.0",
+    "@kuma-ui/vite": "^1.5.1",
+    "focus-trap-react": "^11.0.6",
     "next": "^16.0.1"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.2",
-    "@kuma-ui/core": "^1.6.0",
+    "@kuma-ui/core": "^1.6.3",
     "@storybook/addon-a11y": "^10.0.0",
     "@storybook/addon-docs": "^10.0.0",
-    "@storybook/addon-onboarding": "^10.0.0",
     "@storybook/addon-vitest": "^10.0.0",
     "@storybook/nextjs-vite": "^10.0.0",
     "@testing-library/jest-dom": "^6.9.1",
@@ -126,6 +385,7 @@
     "@vitejs/plugin-react": "^5.1.0",
     "@vitest/browser-playwright": "^4.0.4",
     "@vitest/coverage-v8": "^4.0.4",
+    "chromatic": "^13.3.5",
     "dotenv": "^17.2.3",
     "eslint-config-xo-react": "^0.27.0",
     "eslint-plugin-storybook": "^10.0.0",

package/readme.md

@@ -16,10 +16,11 @@ Next, import the base stylesheet in your application’s entry point (for exampl
 import '@kakadu/components/components.css';
 ```
 
-Finally, wrap your application with the `theme`. You can start using components right away:
+Finally, wrap your application with the `theme`, and render the `ThemeSetter`. You can start using components right away:
 
 ```tsx
 import theme from '@kakadu/components/theme';
+import ThemeSetter from '@kakadu/components/theme-setter';
 import Box from '@kakadu/components/box';
 
 export default function Wrapper({children}) {
@@ -27,6 +28,7 @@ export default function Wrapper({children}) {
     <div className={theme}>
       <Box>Hello!</Box>
       {children}
+      <ThemeSetter />
     </div>
   );
 }