@mittwald/flow-react-components 0.1.0-alpha.11 → 0.1.0-alpha.111

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

@@ -0,0 +1,17 @@
+import { ComponentType, ExoticComponent, HTMLAttributes, ReactHTML, ReactNode } 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 type FlowRenderFn<P> = (component: ComponentType<P>, props: P) => ReactNode;
+export interface PropsWithRender<P> {
+}
+export interface PropsWithClassName {
+    className?: string;
+}
+export type PropsWithElementType<T extends keyof ReactHTML = never> = HTMLAttributes<HTMLElement> & {
+    elementType?: T | ExoticComponent;
+};

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/useProps-CjWcmgf3.js

@@ -0,0 +1,90 @@
+"use client"
+/* */
+import { mergeProps as s } from "@react-aria/utils";
+import { u as p } from "./propsContext-CauylOgH.js";
+import c, { isValidElement as d } from "react";
+import { pickBy as a, omit as m } from "remeda";
+import { P as C } from "./PropsContextProvider-DZvwqHLP.js";
+const l = {
+  Action: !0,
+  Avatar: !0,
+  Button: !0,
+  ButtonGroup: !0,
+  Checkbox: !0,
+  CheckboxButton: !0,
+  CheckboxGroup: !0,
+  Content: !0,
+  ContextMenu: !0,
+  CopyButton: !0,
+  FieldDescription: !0,
+  FieldError: !0,
+  Header: !0,
+  Heading: !0,
+  Icon: !0,
+  Image: !0,
+  Initials: !0,
+  InlineAlert: !0,
+  Label: !0,
+  LayoutCard: !0,
+  Link: !0,
+  MenuItem: !0,
+  Modal: !0,
+  NumberField: !0,
+  Radio: !0,
+  Option: !0,
+  RadioButton: !0,
+  RadioGroup: !0,
+  Select: !0,
+  StatusBadge: !0,
+  Switch: !0,
+  Tabs: !0,
+  TestComponent: !0,
+  Text: !0,
+  TextArea: !0,
+  TextField: !0
+}, u = Object.keys(
+  l
+);
+function x(t) {
+  return !!t && typeof t == "object" && "__dynamicProp" in t;
+}
+function i(t) {
+  return typeof t == "string" && u.includes(t);
+}
+function f(t) {
+  return !i(t);
+}
+const y = (t, r) => {
+  const e = {};
+  for (const o in t)
+    if (f(o)) {
+      const n = t[o];
+      x(n) && (e[o] = n.__dynamicProp(r));
+    }
+  return e;
+};
+function P(t) {
+  return !!t && typeof t == "object" && "children" in t && !!t.children;
+}
+const h = (t) => a(t, (r, e) => i(e)), b = (t, r) => {
+  if (!P(r))
+    return {};
+  const e = r.children;
+  if (!Array.isArray(e) && !d(e))
+    return {};
+  const o = h(t);
+  return Object.keys(o).length === 0 ? {} : {
+    children: /* @__PURE__ */ c.createElement(C, { props: o, mergeInParentContext: !0 }, r.children)
+  };
+}, F = (t, r) => {
+  const e = p()[t], o = e ? y(e, r) : void 0, n = e ? b(e, r) : void 0;
+  return s(
+    e && m(e, u),
+    r,
+    o,
+    n
+  );
+};
+export {
+  F 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,132 +1,355 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "0.1.0-alpha.11",
+  "version": "0.1.0-alpha.111",
   "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",
-    "./CopyToClipboardButton": "./dist/CopyToClipboardButton.js",
-    "./FieldDescription": "./dist/FieldDescription.js",
-    "./FieldError": "./dist/FieldError.js",
-    "./Heading": "./dist/Heading.js",
-    "./Icon": "./dist/Icon.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",
-    "./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"
+    },
+    "./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"
+    },
+    "./ButtonGroup": {
+      "types": "./dist/types/components/ButtonGroup/index.d.ts",
+      "import": "./dist/ButtonGroup.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"
+    },
+    "./IllustratedMessage": {
+      "types": "./dist/types/components/IllustratedMessage/index.d.ts",
+      "import": "./dist/IllustratedMessage.js"
+    },
+    "./ContextMenu": {
+      "types": "./dist/types/components/ContextMenu/index.d.ts",
+      "import": "./dist/ContextMenu.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"
+    },
+    "./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"
+    },
+    "./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"
+    },
+    "./NumberField": {
+      "types": "./dist/types/components/NumberField/index.d.ts",
+      "import": "./dist/NumberField.js"
+    },
+    "./OffCanvas": {
+      "types": "./dist/types/components/OffCanvas/index.d.ts",
+      "import": "./dist/OffCanvas.js"
+    },
+    "./OverlayTrigger": {
+      "types": "./dist/types/components/Overlay/components/OverlayTrigger/index.d.ts",
+      "import": "./dist/OverlayTrigger.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"
+    },
+    "./RadioGroup": {
+      "types": "./dist/types/components/RadioGroup/index.d.ts",
+      "import": "./dist/RadioGroup.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"
+    },
+    "./Skeleton": {
+      "types": "./dist/types/components/Skeleton/index.d.ts",
+      "import": "./dist/Skeleton.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"
+    },
+    "./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": [
     "dist"
   ],
+  "engines": {
+    "node": ">=20.11"
+  },
   "scripts": {
     "build": "run vite build --config vite.build.config.ts",
-    "build:deps": "",
-    "build:deps:run": "yarn run -T lerna run build:deps --scope=@mittwald/flow-react-components",
-    "build:watch:dependents": "yarn build:deps:run && run -T lerna watch --scope=@mittwald/flow-react-components --include-dependencies -- lerna run build:deps --scope=@mittwald/flow-react-components",
-    "dev": "run storybook:start",
-    "storybook:build": "run storybook build",
-    "storybook:start": "run storybook dev -p 6006",
-    "test": "concurrently yarn:test:compile yarn:test:unit",
-    "test:compile": "tsc --noEmit",
-    "test:unit": "yarn node --experimental-vm-modules $(yarn bin jest)"
+    "build:deps:watch": "run -T build:deps:watch @mittwald/flow-react-components",
+    "build:icons": "run tsx dev/icons/generate.ts",
+    "build:storybook": "run storybook build",
+    "dev": "run nx run-many --outputStyle=stream --projects=@mittwald/flow-react-components --targets=start,build:deps:watch",
+    "start": "run storybook dev --port 6006",
+    "test": "",
+    "test:compile": "run tsc --noEmit",
+    "test:unit": "run vitest run"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.5.1",
-    "@fortawesome/react-fontawesome": "^0.2.0",
-    "@react-aria/utils": "^3.23.0",
-    "@react-types/shared": "^3.22.0",
-    "clsx": "^2.1.0",
+    "@chakra-ui/live-region": "^2.1.0",
+    "@mittwald/react-tunnel": "^0.1.0-alpha.111",
+    "@mittwald/react-use-promise": "^2.3.13",
+    "@react-aria/utils": "^3.24.0",
+    "@react-types/shared": "^3.23.0",
+    "@storybook/test": "^8.0.9",
+    "@tabler/icons-react": "^3.3.0",
+    "@tanstack/react-table": "^8.16.0",
+    "clsx": "^2.1.1",
     "copy-to-clipboard": "^3.3.3",
-    "html-react-parser": "^5.1.2",
-    "react-aria": "^3.31.1",
-    "react-aria-components": "^1.0.1",
+    "dot-prop": "^8.0.2",
+    "html-react-parser": "^5.1.10",
+    "invariant": "^2.2.4",
+    "mobx": "^6.12.3",
+    "mobx-react-lite": "^4.0.7",
+    "object-code": "^1.3.3",
+    "react-aria": "^3.33.0",
+    "react-aria-components": "^1.2.0",
     "react-children-utilities": "^2.10.0",
-    "react-stately": "^3.29.1",
-    "remeda": "^1.40.1"
+    "react-stately": "^3.31.0",
+    "remeda": "^1.61.0",
+    "use-callback-ref": "^1.3.2"
   },
   "devDependencies": {
-    "@fortawesome/free-regular-svg-icons": "^6.5.1",
-    "@fortawesome/free-solid-svg-icons": "^6.5.1",
-    "@jest/globals": "^29.7.0",
-    "@mittwald/flow-design-tokens": "^0.1.0-alpha.11",
-    "@nx/storybook": "^18.0.4",
-    "@storybook/addon-a11y": "^7.6.14",
-    "@storybook/addon-actions": "^7.6.14",
-    "@storybook/addon-essentials": "^7.6.14",
-    "@storybook/addon-interactions": "^7.6.14",
-    "@storybook/addon-links": "^7.6.14",
-    "@storybook/blocks": "^7.6.14",
-    "@storybook/builder-vite": "^7.6.14",
-    "@storybook/components": "^7.6.14",
-    "@storybook/core-events": "^7.6.14",
-    "@storybook/manager-api": "^7.6.14",
-    "@storybook/preview-api": "^7.6.14",
-    "@storybook/react": "^7.6.14",
-    "@storybook/react-vite": "^7.6.14",
-    "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^7.6.14",
-    "@testing-library/react": "^14.2.1",
-    "@types/jest": "^29.5.12",
-    "@types/prop-types": "^15.7.11",
-    "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.19",
+    "@faker-js/faker": "^8.4.1",
+    "@mittwald/flow-design-tokens": "^0.1.0-alpha.111",
+    "@mittwald/react-use-promise": "^2.3.13",
+    "@nx/storybook": "^18.3.4",
+    "@storybook/addon-a11y": "^8.0.9",
+    "@storybook/addon-actions": "^8.0.9",
+    "@storybook/addon-essentials": "^8.0.9",
+    "@storybook/addon-interactions": "^8.0.9",
+    "@storybook/addon-links": "^8.0.9",
+    "@storybook/blocks": "^8.0.9",
+    "@storybook/components": "^8.0.9",
+    "@storybook/core-events": "^8.0.9",
+    "@storybook/manager-api": "^8.0.9",
+    "@storybook/preview-api": "^8.0.9",
+    "@storybook/react": "^8.0.9",
+    "@storybook/react-vite": "^8.0.9",
+    "@storybook/theming": "^8.0.9",
+    "@testing-library/dom": "^10.1.0",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "~14.3.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/invariant": "^2.2.37",
+    "@types/node": "20.12.8",
+    "@types/prettier": "^3.0.0",
+    "@types/prop-types": "^15.7.12",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
     "@types/rollup": "^0.54.0",
-    "concurrently": "^8.2.2",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/coverage-v8": "~1.5.3",
     "decamelize": "^6.0.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "postcss": "^8.4.35",
+    "fs-jetpack": "^5.1.0",
+    "happy-dom": "^14.7.1",
+    "next": "^14.2.3",
+    "nx": "^18.3.4",
+    "postcss": "^8.4.38",
     "postcss-nested-import": "^1.3.0",
-    "postcss-nesting": "^12.0.2",
+    "postcss-nesting": "^12.1.2",
+    "prettier": "^3.2.5",
     "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.10.0",
-    "sass": "^1.70.0",
-    "storybook": "^7.6.14",
-    "storybook-addon-dir": "^1.0.6",
-    "storybook-addon-pseudo-states": "^2.1.2",
-    "ts-jest": "^29.1.2",
-    "typescript": "^5.3.3",
+    "react-hook-form": "^7.51.3",
+    "rollup": "^4.17.2",
+    "sass": "^1.76.0",
+    "storybook": "^8.0.9",
+    "storybook-addon-rtl": "^1.0.0",
+    "tsx": "^4.8.2",
+    "typescript": "^5.4.5",
     "typescript-plugin-css-modules": "^5.1.0",
-    "vite": "^5.1.1",
+    "vite": "^5.2.11",
     "vite-plugin-banner": "^0.7.1",
-    "vite-plugin-dts": "^3.7.2"
+    "vite-plugin-checker": "^0.6.4",
+    "vite-plugin-dts": "^3.9.0",
+    "vite-plugin-externalize-deps": "^0.8.0",
+    "vitest": "~1.5.3",
+    "yaml": "^2.4.2"
   },
   "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": "*"
   },
-  "nx": {
-    "targets": {
-      "build": {
-        "inputs": [
-          "default",
-          "^default",
-          "{projectRoot}/*.ts",
-          "{projectRoot}/dev/"
-        ]
-      }
+  "peerDependenciesMeta": {
+    "@mittwald/react-use-promise": {
+      "optional": true
+    },
+    "next": {
+      "optional": true
+    },
+    "react-hook-form": {
+      "optional": true
     }
   },
-  "gitHead": "5e7be32df66a5afbd79c6dec6f78720e7a1b758c"
+  "gitHead": "2426edfe2021445f6f9bd4acd5d724ddbaa1a93d"
 }

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 "s" */
-    size?: "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, StatusVariantProps {
-    className?: string;
-}
-
-declare interface StatusVariantProps<TOmit extends Variant = never> {
-    variant?: Exclude<Variant, TOmit>;
-}
-
-declare type Variant = "info" | "success" | "warning" | "danger";
-
-export { }