@mittwald/flow-react-components 0.1.0-alpha.20 → 0.1.0-alpha.201

package/dist/types/lib/timer/Timer.d.ts

@@ -0,0 +1,18 @@
+import { DurationLike } from 'luxon';
+
+export declare class Timer {
+    private duration;
+    private onDone;
+    private startedAt?;
+    private pausedAt?;
+    private runningTimeoutId?;
+    start(duration: DurationLike, onDone?: () => void): void;
+    restart(): void;
+    pause(): void;
+    resume(): void;
+    stop(): void;
+    get state(): "idle" | "running" | "paused";
+    private clearTimeout;
+    private startTimeout;
+}
+export default Timer;

package/dist/types/lib/types/array.d.ts

@@ -0,0 +1 @@
+export type ItemType<T> = T extends (infer TItem)[] ? TItem : T;

package/dist/types/lib/types/props.d.ts

@@ -0,0 +1,18 @@
+import { ExoticComponent, HTMLAttributes, ReactHTML } from 'react';
+
+export type Status = "info" | "success" | "warning" | "danger";
+export type PropsWithStatus<T extends Status = Status, P = unknown> = P & {
+    status?: T;
+};
+export interface PropsWithTunnel {
+}
+export interface PropsWithClassName {
+    className?: string;
+}
+export type PropsWithElementType<T extends keyof ReactHTML = never> = HTMLAttributes<HTMLElement> & {
+    elementType?: T | ExoticComponent;
+};
+export type ContainerBreakpointSize = "xs" | "s" | "m" | "l" | "xl";
+export interface PropsWithContainerBreakpointSize {
+    containerBreakpointSize?: ContainerBreakpointSize;
+}

package/dist/types/lib/types/props.test-types.d.ts

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

package/dist/{stylesInit.d.ts → types/styles/index.d.ts}

@@ -1,4 +1,3 @@
-declare const _default: {};
-export default _default;
-
-export { }
+
+declare const _default: {};
+export default _default;

package/dist/useOnChange-C1Quwyuz.js

@@ -0,0 +1,12 @@
+"use client"
+/* */
+import { useRef as o, useEffect as s } from "react";
+const u = (e, r, n = []) => {
+  const t = o(e);
+  s(() => {
+    t.current !== e && r(), t.current = e;
+  }, [e, r, ...n]);
+};
+export {
+  u
+};

package/dist/useOverlayController-D8N4X2rc.js

@@ -0,0 +1,10 @@
+"use client"
+/* */
+import { O as s, u } from "./context-BB3_MApL.js";
+const C = (o, r = {}) => {
+  const { reuseControllerFromContext: t = !0, defaultOpen: n } = r, l = s.useNew(n), e = u()[o];
+  return t && e ? e : l;
+};
+export {
+  C as u
+};

package/dist/useSelector-DpU7_HMO.js

@@ -0,0 +1,13 @@
+"use client"
+/* */
+import { autorun as u } from "mobx";
+import { useState as s, useEffect as c } from "react";
+const m = (e, t = []) => {
+  const [r, o] = s(e());
+  return c(() => u(() => {
+    o(e());
+  }), t), r;
+};
+export {
+  m as u
+};

package/package.json

@@ -1,39 +1,267 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "0.1.0-alpha.20",
+  "version": "0.1.0-alpha.201",
   "type": "module",
   "description": "A React implementation of Flow, mittwald’s design system",
   "homepage": "https://mittwald.github.io/flow",
   "repository": "https://github.com/mittwald/flow",
   "exports": {
-    "./Avatar": "./dist/Avatar.js",
-    "./Badge": "./dist/Badge.js",
-    "./Button": "./dist/Button.js",
-    "./Checkbox": "./dist/Checkbox.js",
-    "./Content": "./dist/Content.js",
-    "./LayoutCard": "./dist/LayoutCard.js",
-    "./CopyToClipboardButton": "./dist/CopyToClipboardButton.js",
-    "./FieldDescription": "./dist/FieldDescription.js",
-    "./FieldError": "./dist/FieldError.js",
-    "./Heading": "./dist/Heading.js",
-    "./Icon": "./dist/Icon.js",
-    "./Icons": "./dist/Icons.js",
-    "./Image": "./dist/Image.js",
-    "./Initials": "./dist/Initials.js",
-    "./InlineAlert": "./dist/InlineAlert.js",
-    "./Label": "./dist/Label.js",
-    "./LabeledValue": "./dist/LabeledValue.js",
-    "./Link": "./dist/Link.js",
-    "./Navigation": "./dist/Navigation.js",
-    "./NumberField": "./dist/NumberField.js",
-    "./RadioGroup": "./dist/RadioGroup.js",
-    "./Section": "./dist/Section.js",
-    "./StatusIcon": "./dist/StatusIcon.js",
-    "./Switch": "./dist/Switch.js",
-    "./Text": "./dist/Text.js",
-    "./TextArea": "./dist/TextArea.js",
-    "./TextField": "./dist/TextField.js",
-    "./Tooltip": "./dist/Tooltip.js",
+    "./Accordion": {
+      "types": "./dist/types/components/Accordion/index.d.ts",
+      "import": "./dist/Accordion.js"
+    },
+    "./Action": {
+      "types": "./dist/types/components/Action/index.d.ts",
+      "import": "./dist/Action.js"
+    },
+    "./ActionGroup": {
+      "types": "./dist/types/components/ActionGroup/index.d.ts",
+      "import": "./dist/ActionGroup.js"
+    },
+    "./Avatar": {
+      "types": "./dist/types/components/Avatar/index.d.ts",
+      "import": "./dist/Avatar.js"
+    },
+    "./Button": {
+      "types": "./dist/types/components/Button/index.d.ts",
+      "import": "./dist/Button.js"
+    },
+    "./Breadcrumb": {
+      "types": "./dist/types/components/Breadcrumb/index.d.ts",
+      "import": "./dist/Breadcrumb.js"
+    },
+    "./Checkbox": {
+      "types": "./dist/types/components/Checkbox/index.d.ts",
+      "import": "./dist/Checkbox.js"
+    },
+    "./CheckboxButton": {
+      "types": "./dist/types/components/CheckboxButton/index.d.ts",
+      "import": "./dist/CheckboxButton.js"
+    },
+    "./CheckboxGroup": {
+      "types": "./dist/types/components/CheckboxGroup/index.d.ts",
+      "import": "./dist/CheckboxGroup.js"
+    },
+    "./ColumnLayout": {
+      "types": "./dist/types/components/ColumnLayout/index.d.ts",
+      "import": "./dist/ColumnLayout.js"
+    },
+    "./Content": {
+      "types": "./dist/types/components/Content/index.d.ts",
+      "import": "./dist/Content.js"
+    },
+    "./ContextMenu": {
+      "types": "./dist/types/components/ContextMenu/index.d.ts",
+      "import": "./dist/ContextMenu.js"
+    },
+    "./ContextualHelp": {
+      "types": "./dist/types/components/ContextualHelp/index.d.ts",
+      "import": "./dist/ContextualHelp.js"
+    },
+    "./controller": {
+      "types": "./dist/types/lib/controller/index.d.ts",
+      "import": "./dist/controller.js"
+    },
+    "./CopyButton": {
+      "types": "./dist/types/components/CopyButton/index.d.ts",
+      "import": "./dist/CopyButton.js"
+    },
+    "./CounterBadge": {
+      "types": "./dist/types/components/CounterBadge/index.d.ts",
+      "import": "./dist/CounterBadge.js"
+    },
+    "./FieldDescription": {
+      "types": "./dist/types/components/FieldDescription/index.d.ts",
+      "import": "./dist/FieldDescription.js"
+    },
+    "./FieldError": {
+      "types": "./dist/types/components/FieldError/index.d.ts",
+      "import": "./dist/FieldError.js"
+    },
+    "./Header": {
+      "types": "./dist/types/components/Header/index.d.ts",
+      "import": "./dist/Header.js"
+    },
+    "./HeaderNavigation": {
+      "types": "./dist/types/components/HeaderNavigation/index.d.ts",
+      "import": "./dist/HeaderNavigation.js"
+    },
+    "./Heading": {
+      "types": "./dist/types/components/Heading/index.d.ts",
+      "import": "./dist/Heading.js"
+    },
+    "./Icon": {
+      "types": "./dist/types/components/Icon/index.d.ts",
+      "import": "./dist/Icon.js"
+    },
+    "./Icons": {
+      "types": "./dist/types/components/Icon/components/icons/index.d.ts",
+      "import": "./dist/Icons.js"
+    },
+    "./IllustratedMessage": {
+      "types": "./dist/types/components/IllustratedMessage/index.d.ts",
+      "import": "./dist/IllustratedMessage.js"
+    },
+    "./Image": {
+      "types": "./dist/types/components/Image/index.d.ts",
+      "import": "./dist/Image.js"
+    },
+    "./Initials": {
+      "types": "./dist/types/components/Initials/index.d.ts",
+      "import": "./dist/Initials.js"
+    },
+    "./InlineAlert": {
+      "types": "./dist/types/components/InlineAlert/index.d.ts",
+      "import": "./dist/InlineAlert.js"
+    },
+    "./InlineCode": {
+      "types": "./dist/types/components/InlineCode/index.d.ts",
+      "import": "./dist/InlineCode.js"
+    },
+    "./Label": {
+      "types": "./dist/types/components/Label/index.d.ts",
+      "import": "./dist/Label.js"
+    },
+    "./LabeledValue": {
+      "types": "./dist/types/components/LabeledValue/index.d.ts",
+      "import": "./dist/LabeledValue.js"
+    },
+    "./LayoutCard": {
+      "types": "./dist/types/components/LayoutCard/index.d.ts",
+      "import": "./dist/LayoutCard.js"
+    },
+    "./Link": {
+      "types": "./dist/types/components/Link/index.d.ts",
+      "import": "./dist/Link.js"
+    },
+    "./List": {
+      "types": "./dist/types/components/List/index.d.ts",
+      "import": "./dist/List.js"
+    },
+    "./List/ListLoaderAsyncResource": {
+      "types": "./dist/types/components/List/components/ListLoaderAsyncResource.d.ts",
+      "import": "./dist/List/ListLoaderAsyncResource.js"
+    },
+    "./LoadingSpinner": {
+      "types": "./dist/types/components/LoadingSpinner/index.d.ts",
+      "import": "./dist/LoadingSpinner.js"
+    },
+    "./MenuItem": {
+      "types": "./dist/types/components/MenuItem/index.d.ts",
+      "import": "./dist/MenuItem.js"
+    },
+    "./Modal": {
+      "types": "./dist/types/components/Modal/index.d.ts",
+      "import": "./dist/Modal.js"
+    },
+    "./Navigation": {
+      "types": "./dist/types/components/Navigation/index.d.ts",
+      "import": "./dist/Navigation.js"
+    },
+    "./Notification": {
+      "types": "./dist/types/components/Notification/index.d.ts",
+      "import": "./dist/Notification.js"
+    },
+    "./NotificationProvider": {
+      "types": "./dist/types/components/NotificationProvider/index.d.ts",
+      "import": "./dist/NotificationProvider.js"
+    },
+    "./NumberField": {
+      "types": "./dist/types/components/NumberField/index.d.ts",
+      "import": "./dist/NumberField.js"
+    },
+    "./Popover": {
+      "types": "./dist/types/components/Popover/index.d.ts",
+      "import": "./dist/Popover.js"
+    },
+    "./ProgressBar": {
+      "types": "./dist/types/components/ProgressBar/index.d.ts",
+      "import": "./dist/ProgressBar.js"
+    },
+    "./PropsContextProvider": {
+      "types": "./dist/types/lib/propsContext/PropsContextProvider.d.ts",
+      "import": "./dist/PropsContextProvider.js"
+    },
+    "./RadioGroup": {
+      "types": "./dist/types/components/RadioGroup/index.d.ts",
+      "import": "./dist/RadioGroup.js"
+    },
+    "./Render": {
+      "types": "./dist/types/lib/react/components/Render/index.d.ts",
+      "import": "./dist/Render.js"
+    },
+    "./SearchField": {
+      "types": "./dist/types/components/SearchField/index.d.ts",
+      "import": "./dist/SearchField.js"
+    },
+    "./Section": {
+      "types": "./dist/types/components/Section/index.d.ts",
+      "import": "./dist/Section.js"
+    },
+    "./Select": {
+      "types": "./dist/types/components/Select/index.d.ts",
+      "import": "./dist/Select.js"
+    },
+    "./Separator": {
+      "types": "./dist/types/components/Separator/index.d.ts",
+      "import": "./dist/Separator.js"
+    },
+    "./Skeleton": {
+      "types": "./dist/types/components/Skeleton/index.d.ts",
+      "import": "./dist/Skeleton.js"
+    },
+    "./Slider": {
+      "types": "./dist/types/components/Slider/index.d.ts",
+      "import": "./dist/Slider.js"
+    },
+    "./StatusBadge": {
+      "types": "./dist/types/components/StatusBadge/index.d.ts",
+      "import": "./dist/StatusBadge.js"
+    },
+    "./StatusIcon": {
+      "types": "./dist/types/components/StatusIcon/index.d.ts",
+      "import": "./dist/StatusIcon.js"
+    },
+    "./Switch": {
+      "types": "./dist/types/components/Switch/index.d.ts",
+      "import": "./dist/Switch.js"
+    },
+    "./Table": {
+      "types": "./dist/types/components/Table/index.d.ts",
+      "import": "./dist/Table.js"
+    },
+    "./Tabs": {
+      "types": "./dist/types/components/Tabs/index.d.ts",
+      "import": "./dist/Tabs.js"
+    },
+    "./Text": {
+      "types": "./dist/types/components/Text/index.d.ts",
+      "import": "./dist/Text.js"
+    },
+    "./TextArea": {
+      "types": "./dist/types/components/TextArea/index.d.ts",
+      "import": "./dist/TextArea.js"
+    },
+    "./TextField": {
+      "types": "./dist/types/components/TextField/index.d.ts",
+      "import": "./dist/TextField.js"
+    },
+    "./Tooltip": {
+      "types": "./dist/types/components/Tooltip/index.d.ts",
+      "import": "./dist/Tooltip.js"
+    },
+    "./hooks": {
+      "types": "./dist/types/lib/hooks/index.d.ts",
+      "import": "./dist/hooks.js"
+    },
+    "./nextjs": {
+      "types": "./dist/types/integrations/nextjs/index.d.ts",
+      "import": "./dist/nextjs.js"
+    },
+    "./react-hook-form": {
+      "types": "./dist/types/integrations/react-hook-form/index.d.ts",
+      "import": "./dist/react-hook-form.js"
+    },
     "./styles": "./dist/styles.css"
   },
   "files": [
@@ -51,79 +279,114 @@
     "start": "run storybook dev --port 6006",
     "test": "",
     "test:compile": "run tsc --noEmit",
-    "test:unit": "node --experimental-vm-modules $(yarn bin jest)"
+    "test:unit": "run vitest run"
   },
   "dependencies": {
-    "@react-aria/utils": "^3.23.2",
-    "@react-types/shared": "^3.22.1",
-    "@tabler/icons-react": "^2.47.0",
-    "clsx": "^2.1.0",
+    "@chakra-ui/live-region": "^2.1.0",
+    "@internationalized/string-compiler": "^3.2.4",
+    "@mittwald/react-tunnel": "^0.1.0-alpha.201",
+    "@mittwald/react-use-promise": "^2.3.13",
+    "@react-aria/utils": "^3.25.1",
+    "@react-types/shared": "^3.24.1",
+    "@tabler/icons-react": "^3.11.0",
+    "@tanstack/react-table": "^8.20.1",
+    "@types/luxon": "^3.4.2",
+    "clsx": "^2.1.1",
     "copy-to-clipboard": "^3.3.3",
-    "html-react-parser": "^5.1.7",
-    "react-aria": "^3.32.1",
-    "react-aria-components": "^1.1.1",
+    "dot-prop": "^9.0.0",
+    "framer-motion": "^11.3.21",
+    "html-react-parser": "^5.1.12",
+    "invariant": "^2.2.4",
+    "luxon": "^3.5.0",
+    "mobx": "^6.13.1",
+    "mobx-react-lite": "^4.0.7",
+    "object-code": "^1.3.3",
+    "react-aria": "^3.34.1",
+    "react-aria-components": "^1.3.1",
     "react-children-utilities": "^2.10.0",
-    "react-stately": "^3.30.1",
-    "remeda": "^1.44.1"
+    "react-stately": "^3.32.1",
+    "remeda": "^2.7.0",
+    "use-callback-ref": "^1.3.2"
   },
   "devDependencies": {
-    "@jest/globals": "^29.7.0",
-    "@mittwald/flow-design-tokens": "^0.1.0-alpha.18",
-    "@nx/storybook": "^18.0.5",
-    "@storybook/addon-a11y": "^7.6.17",
-    "@storybook/addon-actions": "^7.6.17",
-    "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/addon-interactions": "^7.6.17",
-    "@storybook/addon-links": "^7.6.17",
-    "@storybook/blocks": "^7.6.17",
-    "@storybook/builder-vite": "^7.6.17",
-    "@storybook/components": "^7.6.17",
-    "@storybook/core-events": "^7.6.17",
-    "@storybook/manager-api": "^7.6.17",
-    "@storybook/preview-api": "^7.6.17",
-    "@storybook/react": "^7.6.17",
-    "@storybook/react-vite": "^7.6.17",
-    "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^7.6.17",
-    "@testing-library/react": "^14.2.1",
-    "@types/jest": "^29.5.12",
-    "@types/node": "20.11.20",
+    "@faker-js/faker": "^8.4.1",
+    "@mittwald/flow-design-tokens": "^0.1.0-alpha.201",
+    "@mittwald/react-use-promise": "^2.3.13",
+    "@nx/storybook": "^19.5.6",
+    "@storybook/addon-a11y": "^8.2.7",
+    "@storybook/addon-actions": "^8.2.7",
+    "@storybook/addon-essentials": "^8.2.7",
+    "@storybook/addon-interactions": "^8.2.7",
+    "@storybook/addon-links": "^8.2.7",
+    "@storybook/blocks": "^8.2.7",
+    "@storybook/components": "^8.2.7",
+    "@storybook/core-events": "^8.2.7",
+    "@storybook/manager-api": "^8.2.7",
+    "@storybook/preview-api": "^8.2.7",
+    "@storybook/react": "^8.2.7",
+    "@storybook/react-vite": "^8.2.7",
+    "@storybook/test": "^8.2.7",
+    "@storybook/theming": "^8.2.7",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "6.4.7",
+    "@testing-library/react": "~16.0.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/invariant": "^2.2.37",
+    "@types/node": "20.14.14",
     "@types/prettier": "^3.0.0",
-    "@types/prop-types": "^15.7.11",
-    "@types/react": "^18.2.58",
-    "@types/react-dom": "^18.2.19",
+    "@types/prop-types": "^15.7.12",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/rollup": "^0.54.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@vitest/coverage-v8": "~2.0.5",
     "decamelize": "^6.0.0",
+    "expect-type": "^0.19.0",
     "fs-jetpack": "^5.1.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "nx": "^18.0.5",
-    "postcss": "^8.4.35",
+    "happy-dom": "^14.12.3",
+    "next": "^14.2.5",
+    "nx": "^19.5.6",
+    "postcss": "^8.4.40",
     "postcss-nested-import": "^1.3.0",
-    "postcss-nesting": "^12.0.3",
-    "prettier": "^3.2.5",
+    "postcss-nesting": "^13.0.0",
+    "prettier": "^3.3.3",
     "prop-types": "^15.8.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-element-to-jsx-string": "^15.0.0",
-    "rollup": "^4.12.0",
-    "sass": "^1.71.1",
-    "storybook": "^7.6.17",
-    "storybook-addon-dir": "^1.0.6",
-    "storybook-addon-pseudo-states": "^2.1.2",
-    "ts-jest": "^29.1.2",
-    "tsx": "^4.7.1",
-    "typescript": "^5.3.3",
+    "react-hook-form": "^7.52.2",
+    "rollup": "^4.20.0",
+    "sass": "^1.77.8",
+    "storybook": "^8.2.7",
+    "storybook-addon-rtl": "^1.0.1",
+    "tsx": "^4.16.5",
+    "typescript": "^5.5.4",
     "typescript-plugin-css-modules": "^5.1.0",
-    "vite": "^5.1.4",
+    "vite": "^5.3.5",
     "vite-plugin-banner": "^0.7.1",
-    "vite-plugin-checker": "^0.6.4",
-    "vite-plugin-dts": "^3.7.3",
-    "yaml": "^2.4.0"
+    "vite-plugin-checker": "^0.7.2",
+    "vite-plugin-dts": "^4.0.0-beta.2",
+    "vite-plugin-externalize-deps": "^0.8.0",
+    "vitest": "~2.0.5",
+    "yaml": "^2.5.0"
   },
   "peerDependencies": {
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "@mittwald/react-use-promise": "^2.3.12",
+    "next": "*",
+    "react": "~18.3.0",
+    "react-dom": "~18.3.0",
+    "react-hook-form": "*"
   },
-  "gitHead": "03f5b90e609a9e9f1523f4d2953b5142660e4ef6"
+  "peerDependenciesMeta": {
+    "@mittwald/react-use-promise": {
+      "optional": true
+    },
+    "next": {
+      "optional": true
+    },
+    "react-hook-form": {
+      "optional": true
+    }
+  },
+  "gitHead": "d13be5165ce131077e049cb1c01ea87700ee97ee"
 }

package/dist/Avatar.d.ts

@@ -1,14 +0,0 @@
-import { FC } from 'react';
-import { PropsWithChildren } from 'react';
-
-declare const Avatar: FC<AvatarProps>;
-export { Avatar }
-export default Avatar;
-
-export declare interface AvatarProps extends PropsWithChildren {
-    className?: string;
-    /** @default "m" */
-    size?: "xs" | "s" | "m" | "l";
-}
-
-export { }

package/dist/Badge.d.ts

@@ -1,18 +0,0 @@
-import { FC } from 'react';
-import { PropsWithChildren } from 'react';
-
-declare const Badge: FC<BadgeProps>;
-export { Badge }
-export default Badge;
-
-export declare interface BadgeProps extends PropsWithChildren, PropsWithVariant {
-    className?: string;
-}
-
-declare type PropsWithVariant<T extends Variant = Variant, P = unknown> = P & {
-    variant?: T;
-};
-
-declare type Variant = "info" | "success" | "warning" | "danger";
-
-export { }

package/dist/Badge.js

@@ -1,34 +0,0 @@
-"use client"
-/* */
-import o from "react";
-import { c as l } from "./clsx-DB4S2d7J.js";
-import { S as i } from "./StatusIcon-BBNE68gH.js";
-import { T as d } from "./Text--ofl9X5e.js";
-import "./propsContext-Dx7WKmmM.js";
-import { P as f } from "./PropsContextProvider-CEoxD8yK.js";
-import "@react-aria/utils";
-const g = "flow--badge", u = "flow--badge--content", p = "flow--badge--custom-icon", b = "flow--badge--status-icon", w = "flow--badge--info", I = "flow--badge--success", x = "flow--badge--warning", N = "flow--badge--danger", t = {
-  badge: g,
-  content: u,
-  customIcon: p,
-  statusIcon: b,
-  info: w,
-  success: I,
-  warning: x,
-  danger: N
-}, S = (n) => {
-  const { children: s, className: c, variant: e = "info", ...a } = n, r = l(t.badge, t[e], c), m = {
-    Icon: {
-      className: t.customIcon,
-      size: "s"
-    },
-    Text: {
-      className: t.content
-    }
-  };
-  return /* @__PURE__ */ o.createElement("div", { className: r, ...a }, /* @__PURE__ */ o.createElement(i, { size: "s", className: t.statusIcon, variant: e }), /* @__PURE__ */ o.createElement(f, { props: m }, typeof s == "string" ? /* @__PURE__ */ o.createElement(d, null, s) : s));
-};
-export {
-  S as Badge,
-  S as default
-};