draft-components 3.6.0 → 4.0.0

package/dist/lib/keyboard-key.js

@@ -0,0 +1,16 @@
+export const KeyboardKey = {
+    ARROW_UP: 'ArrowUp',
+    ARROW_RIGHT: 'ArrowRight',
+    ARROW_DOWN: 'ArrowDown',
+    ARROW_LEFT: 'ArrowLeft',
+    TAB: 'Tab',
+    HOME: 'Home',
+    END: 'End',
+    PAGE_UP: 'PageUp',
+    PAGE_DOWN: 'PageDown',
+    ENTER: 'Enter',
+    ESCAPE: 'Escape',
+    BACKSPACE: 'Backspace',
+    SPACE: ' ',
+};
+//# sourceMappingURL=keyboard-key.js.map

package/dist/lib/keyboard-key.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard-key.js","sourceRoot":"","sources":["../../src/lib/keyboard-key.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,QAAQ,EAAE,SAAS;IACnB,WAAW,EAAE,YAAY;IACzB,UAAU,EAAE,WAAW;IACvB,UAAU,EAAE,WAAW;IACvB,GAAG,EAAE,KAAK;IACV,IAAI,EAAE,MAAM;IACZ,GAAG,EAAE,KAAK;IACV,OAAO,EAAE,QAAQ;IACjB,SAAS,EAAE,UAAU;IACrB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,SAAS,EAAE,WAAW;IACtB,KAAK,EAAE,GAAG;CACX,CAAC"}

package/dist/lib/observe-element-change.d.ts

@@ -0,0 +1,3 @@
+export type ChangeObserverCallback = () => void;
+export type ChangeObserverDestructor = () => void;
+export declare function observeElementChange(element: Element, callback: ChangeObserverCallback): ChangeObserverDestructor;

package/dist/lib/observe-element-change.js

@@ -0,0 +1,14 @@
+export function observeElementChange(element, callback) {
+    const elementMutationObserver = new MutationObserver(() => {
+        callback();
+    });
+    elementMutationObserver.observe(element, {
+        subtree: true,
+        childList: true,
+        characterData: true,
+    });
+    return () => {
+        elementMutationObserver.disconnect();
+    };
+}
+//# sourceMappingURL=observe-element-change.js.map

package/dist/lib/observe-element-change.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"observe-element-change.js","sourceRoot":"","sources":["../../src/lib/observe-element-change.ts"],"names":[],"mappings":"AAIA,MAAM,UAAU,oBAAoB,CAClC,OAAgB,EAChB,QAAgC;IAEhC,MAAM,uBAAuB,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;QACxD,QAAQ,EAAE,CAAC;IACb,CAAC,CAAC,CAAC;IACH,uBAAuB,CAAC,OAAO,CAAC,OAAO,EAAE;QACvC,OAAO,EAAE,IAAI;QACb,SAAS,EAAE,IAAI;QACf,aAAa,EAAE,IAAI;KACpB,CAAC,CAAC;IAEH,OAAO,GAAG,EAAE;QACV,uBAAuB,CAAC,UAAU,EAAE,CAAC;IACvC,CAAC,CAAC;AACJ,CAAC"}

package/dist/lib/observe-element-move.d.ts

@@ -0,0 +1,6 @@
+export type MoveObserverCallback = () => void;
+export type MoveObserverDestructor = () => void;
+/**
+ * @see https://samthor.au/2021/observing-dom/#3.-move-observations
+ */
+export declare function observeElementMove(element: Element, callback: MoveObserverCallback): MoveObserverDestructor;

package/dist/lib/observe-element-move.js

@@ -0,0 +1,43 @@
+import { getElementBoundingRect } from './get-element-bounding-rect.js';
+/**
+ * @see https://samthor.au/2021/observing-dom/#3.-move-observations
+ */
+export function observeElementMove(element, callback) {
+    let rootIntersectionObserver = null;
+    const elementResizeObserver = new ResizeObserver(() => setupRootIntersectionObserver());
+    elementResizeObserver.observe(element);
+    const root = (element.ownerDocument || window.document).documentElement;
+    const rootResizeObserver = new ResizeObserver(() => setupRootIntersectionObserver());
+    rootResizeObserver.observe(root);
+    function setupRootIntersectionObserver() {
+        if (rootIntersectionObserver) {
+            rootIntersectionObserver.disconnect();
+        }
+        callback();
+        const { width, height, top, right, bottom, left } = getElementBoundingRect(element);
+        if (!width || !height) {
+            return;
+        }
+        let isFirstUpdate = true;
+        rootIntersectionObserver = new IntersectionObserver(() => {
+            if (isFirstUpdate) {
+                isFirstUpdate = false;
+            }
+            else {
+                setupRootIntersectionObserver();
+            }
+        }, {
+            root,
+            rootMargin: `-${top}px -${root.offsetWidth - right}px -${root.offsetHeight - bottom}px -${left}px`,
+            threshold: 1.0,
+        });
+    }
+    return () => {
+        elementResizeObserver.disconnect();
+        rootResizeObserver.disconnect();
+        if (rootIntersectionObserver) {
+            rootIntersectionObserver.disconnect();
+        }
+    };
+}
+//# sourceMappingURL=observe-element-move.js.map

package/dist/lib/observe-element-move.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"observe-element-move.js","sourceRoot":"","sources":["../../src/lib/observe-element-move.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAMxE;;GAEG;AACH,MAAM,UAAU,kBAAkB,CAChC,OAAgB,EAChB,QAA8B;IAE9B,IAAI,wBAAwB,GAAgC,IAAI,CAAC;IAEjE,MAAM,qBAAqB,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE,CAAC,6BAA6B,EAAE,CAAC,CAAC;IACxF,qBAAqB,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IAEvC,MAAM,IAAI,GAAG,CAAC,OAAO,CAAC,aAAa,IAAI,MAAM,CAAC,QAAQ,CAAC,CAAC,eAAe,CAAC;IACxE,MAAM,kBAAkB,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE,CAAC,6BAA6B,EAAE,CAAC,CAAC;IACrF,kBAAkB,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IAEjC,SAAS,6BAA6B;QACpC,IAAI,wBAAwB,EAAE,CAAC;YAC7B,wBAAwB,CAAC,UAAU,EAAE,CAAC;QACxC,CAAC;QAED,QAAQ,EAAE,CAAC;QAEX,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,sBAAsB,CAAC,OAAO,CAAC,CAAC;QACpF,IAAI,CAAC,KAAK,IAAI,CAAC,MAAM,EAAE,CAAC;YACtB,OAAO;QACT,CAAC;QAED,IAAI,aAAa,GAAG,IAAI,CAAC;QACzB,wBAAwB,GAAG,IAAI,oBAAoB,CAAC,GAAG,EAAE;YACvD,IAAI,aAAa,EAAE,CAAC;gBAClB,aAAa,GAAG,KAAK,CAAC;YACxB,CAAC;iBAAM,CAAC;gBACN,6BAA6B,EAAE,CAAC;YAClC,CAAC;QACH,CAAC,EAAE;YACD,IAAI;YACJ,UAAU,EAAE,IAAI,GAAG,OAAO,IAAI,CAAC,WAAW,GAAG,KAAK,OAAO,IAAI,CAAC,YAAY,GAAG,MAAM,OAAO,IAAI,IAAI;YAClG,SAAS,EAAE,GAAG;SACf,CAAC,CAAC;IACL,CAAC;IAED,OAAO,GAAG,EAAE;QACV,qBAAqB,CAAC,UAAU,EAAE,CAAC;QACnC,kBAAkB,CAAC,UAAU,EAAE,CAAC;QAChC,IAAI,wBAAwB,EAAE,CAAC;YAC7B,wBAAwB,CAAC,UAAU,EAAE,CAAC;QACxC,CAAC;IACH,CAAC,CAAC;AACJ,CAAC"}

package/dist/lib/react-helpers.d.ts

@@ -1,14 +1,6 @@
-import { type MutableRefObject, type ReactElement, type Ref, type RefCallback, RefObject } from 'react';
 export type ClassNamesObject = {
     [className: string]: unknown;
 };
 export type ClassName = string | number | boolean | undefined | null | ClassNamesObject;
 export declare function classNames(...classes: ClassName[]): string;
-export type RefParameter<T> = MutableRefObject<T> | Ref<T> | undefined;
-export declare function mergeRefs<T>(...refs: RefParameter<T>[]): RefCallback<T>;
-export type ReactElementWithRef = ReactElement & {
-    ref: Ref<unknown>;
-};
-export declare function isReactElementWithRef(element: unknown): element is ReactElementWithRef;
-export declare function focusElement(element: EventTarget | null | undefined): void;
-export declare function getRefElement<T extends HTMLElement>(ref: RefObject<T> | MutableRefObject<T>, message?: string): NonNullable<T>;
+export declare function tryToFocusElement(element: EventTarget | null | undefined): void;

package/dist/lib/react-helpers.js

@@ -1,4 +1,3 @@
-import { isValidElement, } from 'react';
 export function classNames(...classes) {
     let resultString = '';
     for (const className of classes) {
@@ -18,32 +17,9 @@ export function classNames(...classes) {
     }
     return resultString.trimEnd();
 }
-export function mergeRefs(...refs) {
-    return (instance) => {
-        for (const ref of refs) {
-            if (ref != null) {
-                if (typeof ref === 'function') {
-                    ref(instance);
-                }
-                else {
-                    Object.assign(ref, { current: instance });
-                }
-            }
-        }
-    };
-}
-export function isReactElementWithRef(element) {
-    return isValidElement(element) && 'ref' in element;
-}
-export function focusElement(element) {
+export function tryToFocusElement(element) {
     if (element != null && element instanceof HTMLElement) {
         element.focus();
     }
 }
-export function getRefElement(ref, message = 'getElementFromRef: ref value is null.') {
-    const value = ref.current;
-    if (value == null) {
-        throw new Error(message);
-    }
-    return value;
-}
+//# sourceMappingURL=react-helpers.js.map

package/dist/lib/react-helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-helpers.js","sourceRoot":"","sources":["../../src/lib/react-helpers.ts"],"names":[],"mappings":"AASA,MAAM,UAAU,UAAU,CAAC,GAAG,OAAoB;IAChD,IAAI,YAAY,GAAG,EAAE,CAAC;IACtB,KAAK,MAAM,SAAS,IAAI,OAAO,EAAE,CAAC;QAChC,IAAI,CAAC,SAAS,EAAE,CAAC;YACf,SAAS;QACX,CAAC;QAED,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE,CAAC;YAClC,KAAK,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC;gBACzC,IAAI,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC;oBACnB,YAAY,IAAI,GAAG,GAAG,GAAG,CAAC;gBAC5B,CAAC;YACH,CAAC;QACH,CAAC;aAAM,CAAC;YACN,YAAY,IAAI,SAAS,GAAG,GAAG,CAAC;QAClC,CAAC;IACH,CAAC;IAED,OAAO,YAAY,CAAC,OAAO,EAAE,CAAC;AAChC,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,OAAuC;IACvE,IAAI,OAAO,IAAI,IAAI,IAAI,OAAO,YAAY,WAAW,EAAE,CAAC;QACtD,OAAO,CAAC,KAAK,EAAE,CAAC;IAClB,CAAC;AACH,CAAC"}

package/dist/storybook-blocks/color-palette/color-palette.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from 'react';
+import './color-palette.css';
+type ColorItem = {
+    color: string;
+    label: ReactNode;
+};
+export declare function ColorPalette({ className, colors, }: {
+    className?: string;
+    colors: ColorItem[];
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/storybook-blocks/color-palette/color-palette.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from 'react';
+import { classNames } from '../../lib/react-helpers.js';
+import './color-palette.css';
+export function ColorPalette({ className, colors, }) {
+    return (_jsx("div", { className: classNames('dc-color-palette', className), children: _jsx("dl", { className: "dc-color-palette__items", children: colors.map((item, index) => (_jsx(ColorPaletteRow, { item: item }, `${item.color}-${index}`))) }) }));
+}
+function ColorPaletteRow({ item, }) {
+    const color = item.color;
+    const label = item.label;
+    const sampleRef = useRef(null);
+    const [computedColor, setComputedColor] = useState('');
+    useLayoutEffect(() => {
+        const sample = sampleRef.current;
+        if (sample) {
+            const computedColor = window.getComputedStyle(sample).backgroundColor;
+            setComputedColor(computedColor);
+        }
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx("dt", { className: "dc-color-palette__item-label", children: label }), _jsx("dd", { className: "dc-color-palette__item-color", children: _jsxs("figure", { className: "dc-color-item", children: [_jsx("div", { className: "dc-color-item__sample", children: _jsx("div", { ref: sampleRef, style: { background: color } }) }), computedColor && (_jsxs("figcaption", { className: "dc-color-item__color", children: [color, _jsx("code", { children: computedColor })] }))] }) })] }));
+}
+//# sourceMappingURL=color-palette.js.map

package/dist/storybook-blocks/color-palette/color-palette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-palette.js","sourceRoot":"","sources":["../../../src/storybook-blocks/color-palette/color-palette.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,qBAAqB,CAAC;AAO7B,MAAM,UAAU,YAAY,CAAC,EAC3B,SAAS,EACT,MAAM,GAIP;IACC,OAAO,CACL,cAAK,SAAS,EAAE,UAAU,CAAC,kBAAkB,EAAE,SAAS,CAAC,YACvD,aAAI,SAAS,EAAC,yBAAyB,YACpC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC3B,KAAC,eAAe,IAAgC,IAAI,EAAE,IAAI,IAApC,GAAG,IAAI,CAAC,KAAK,IAAI,KAAK,EAAE,CAAgB,CAC/D,CAAC,GACC,GACD,CACP,CAAC;AACJ,CAAC;AAED,SAAS,eAAe,CAAC,EACvB,IAAI,GAGL;IACC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;IACzB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;IACzB,MAAM,SAAS,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACtD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEvD,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC;QACjC,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,aAAa,GAAG,MAAM,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,eAAe,CAAC;YACtE,gBAAgB,CAAC,aAAa,CAAC,CAAC;QAClC,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,8BACE,aAAI,SAAS,EAAC,8BAA8B,YACzC,KAAK,GACH,EACL,aAAI,SAAS,EAAC,8BAA8B,YAC1C,kBAAQ,SAAS,EAAC,eAAe,aAC/B,cAAK,SAAS,EAAC,uBAAuB,YACpC,cAAK,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,GAAI,GACjD,EACL,aAAa,IAAI,CAChB,sBAAY,SAAS,EAAC,sBAAsB,aACzC,KAAK,EACN,yBAAO,aAAa,GAAQ,IACjB,CACd,IACM,GACN,IACJ,CACJ,CAAC;AACJ,CAAC"}

package/dist/storybook-blocks/color-palette/index.d.ts

@@ -0,0 +1 @@
+export * from './color-palette.js';

package/dist/storybook-blocks/color-palette/index.js

@@ -0,0 +1,2 @@
+export * from './color-palette.js';
+//# sourceMappingURL=index.js.map

package/dist/storybook-blocks/color-palette/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/storybook-blocks/color-palette/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draft-components",
-  "version": "3.6.0",
+  "version": "4.0.0",
   "description": "The React based UI components library.",
   "type": "module",
   "exports": {
@@ -14,9 +14,6 @@
     "./css/*": "./css/*"
   },
   "types": "./dist/index.d.ts",
-  "engines": {
-    "node": ">= 18"
-  },
   "files": [
     "dist",
     "css"
@@ -24,7 +21,8 @@
   "scripts": {
     "prepare": "husky",
     "test": "vitest run",
-    "coverage": "vitest run --coverage",
+    "test-watch": "vitest",
+    "test-coverage": "vitest run --coverage",
     "lint": "npm run lint-js && npm run lint-css",
     "lint-js": "eslint",
     "lint-css": "stylelint 'src/**/*.css'",
@@ -51,54 +49,53 @@
   },
   "homepage": "https://draft-components.netlify.app",
   "peerDependencies": {
-    "react": ">= 18",
-    "react-dom": ">= 18"
+    "react": ">= 19",
+    "react-dom": ">= 19"
   },
   "devDependencies": {
-    "@eslint/js": "9.16.0",
-    "@heroicons/react": "2.2.0",
-    "@storybook/addon-actions": "8.4.7",
-    "@storybook/addon-essentials": "8.4.7",
-    "@storybook/addon-links": "8.4.7",
-    "@storybook/addon-themes": "8.4.7",
-    "@storybook/core-common": "8.4.7",
-    "@storybook/react": "8.4.7",
-    "@storybook/react-vite": "8.4.7",
-    "@stylistic/eslint-plugin": "2.12.1",
+    "@eslint/js": "9.27.0",
+    "@storybook/addon-actions": "8.6.14",
+    "@storybook/addon-essentials": "8.6.14",
+    "@storybook/addon-links": "8.6.14",
+    "@storybook/addon-themes": "8.6.14",
+    "@storybook/core-common": "8.6.14",
+    "@storybook/react": "8.6.14",
+    "@storybook/react-vite": "8.6.14",
+    "@stylistic/eslint-plugin": "4.2.0",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
-    "@testing-library/react": "16.1.0",
-    "@testing-library/user-event": "14.5.2",
-    "@types/node": "20.17.10",
-    "@types/react": "18.3.16",
-    "@types/react-dom": "18.3.5",
-    "@vitejs/plugin-react": "4.3.4",
-    "@vitest/coverage-istanbul": "2.1.8",
-    "autoprefixer": "10.4.20",
-    "color": "4.2.3",
-    "eslint": "9.16.0",
+    "@testing-library/react": "16.3.0",
+    "@testing-library/user-event": "14.6.1",
+    "@types/node": "22.15.21",
+    "@types/react": "19.1.5",
+    "@types/react-dom": "19.1.5",
+    "@vitejs/plugin-react": "4.5.0",
+    "@vitest/coverage-istanbul": "3.1.4",
+    "autoprefixer": "10.4.21",
+    "color": "5.0.0",
+    "eslint": "9.27.0",
     "eslint-plugin-jsx-a11y": "6.10.2",
-    "eslint-plugin-react": "7.37.2",
-    "eslint-plugin-react-hooks": "5.1.0",
-    "eslint-plugin-storybook": "0.11.1",
-    "eslint-plugin-testing-library": "7.1.1",
-    "glob": "11.0.0",
-    "globals": "15.13.0",
+    "eslint-plugin-react": "7.37.5",
+    "eslint-plugin-react-hooks": "5.2.0",
+    "eslint-plugin-storybook": "0.12.0",
+    "eslint-plugin-testing-library": "7.2.1",
+    "glob": "11.0.2",
+    "globals": "16.1.0",
     "husky": "9.1.7",
-    "jsdom": "25.0.1",
-    "lint-staged": "15.2.11",
-    "postcss": "8.4.49",
+    "jsdom": "26.1.0",
+    "lint-staged": "16.0.0",
+    "postcss": "8.5.3",
     "postcss-import": "16.1.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "storybook": "^8.4.7",
-    "stylelint": "16.11.0",
-    "stylelint-config-recess-order": "5.1.1",
-    "stylelint-config-standard": "36.0.1",
-    "typescript": "5.7.2",
-    "typescript-eslint": "8.18.0",
-    "vite": "6.0.3",
-    "vitest": "2.1.8"
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "storybook": "8.6.14",
+    "stylelint": "16.19.1",
+    "stylelint-config-recess-order": "6.0.0",
+    "stylelint-config-standard": "38.0.0",
+    "typescript": "5.8.3",
+    "typescript-eslint": "8.32.1",
+    "vite": "6.3.5",
+    "vitest": "3.1.4"
   },
   "lint-staged": {
     "*.ts?(x)": "npm run lint-js",