@integration-app/react 2.4.0 → 2.4.1-beta.0

package/dist/types/styled-system/types/system-types.d.ts

@@ -1,6 +1,6 @@
 /* eslint-disable */
 import type {  ConditionalValue, Nested  } from './conditions';
-import type {  AtRule, PropertiesFallback  } from './csstype';
+import type {  AtRule, Globals, PropertiesFallback  } from './csstype';
 import type {  SystemProperties, CssVarProperties  } from './style-props';
 
 type String = string & {}
@@ -22,9 +22,93 @@ export type Assign<T, U> = {
  * Native css properties
  * -----------------------------------------------------------------------------*/
 
+type DashedIdent = `--${string}`
+
+type StringToMultiple<T extends string> = T | `${T}, ${T}`
+
+export type PositionAreaAxis =
+  | 'left'
+  | 'center'
+  | 'right'
+  | 'x-start'
+  | 'x-end'
+  | 'span-x-start'
+  | 'span-x-end'
+  | 'x-self-start'
+  | 'x-self-end'
+  | 'span-x-self-start'
+  | 'span-x-self-end'
+  | 'span-all'
+  | 'top'
+  | 'bottom'
+  | 'span-top'
+  | 'span-bottom'
+  | 'y-start'
+  | 'y-end'
+  | 'span-y-start'
+  | 'span-y-end'
+  | 'y-self-start'
+  | 'y-self-end'
+  | 'span-y-self-start'
+  | 'span-y-self-end'
+  | 'block-start'
+  | 'block-end'
+  | 'span-block-start'
+  | 'span-block-end'
+  | 'inline-start'
+  | 'inline-end'
+  | 'span-inline-start'
+  | 'span-inline-end'
+  | 'self-block-start'
+  | 'self-block-end'
+  | 'span-self-block-start'
+  | 'span-self-block-end'
+  | 'self-inline-start'
+  | 'self-inline-end'
+  | 'span-self-inline-start'
+  | 'span-self-inline-end'
+  | 'start'
+  | 'end'
+  | 'span-start'
+  | 'span-end'
+  | 'self-start'
+  | 'self-end'
+  | 'span-self-start'
+  | 'span-self-end'
+
+type PositionTry =
+  | 'normal'
+  | 'flip-block'
+  | 'flip-inline'
+  | 'top'
+  | 'bottom'
+  | 'left'
+  | 'right'
+  | 'block-start'
+  | 'block-end'
+  | 'inline-start'
+  | 'inline-end'
+  | DashedIdent
+
+export interface ModernCssProperties {
+  anchorName?: Globals | 'none' | DashedIdent | StringToMultiple<DashedIdent>
+  anchorScope?: Globals | 'none' | 'all' | DashedIdent | StringToMultiple<DashedIdent>
+  fieldSizing?: Globals | 'fixed' | 'content'
+  interpolateSize?: Globals | 'allow-keywords' | 'numeric-only'
+  positionAnchor?: Globals | 'auto' | DashedIdent
+  positionArea?: Globals | 'auto' | PositionAreaAxis | `${PositionAreaAxis} ${PositionAreaAxis}` | String
+  positionTry?: Globals | StringToMultiple<PositionTry> | String
+  positionTryFallback?: Globals | 'none' | StringToMultiple<PositionTry> | String
+  positionTryOrder?: Globals | 'normal' | 'most-width' | 'most-height' | 'most-block-size' | 'most-inline-size'
+  positionVisibility?: Globals | 'always' | 'anchors-visible' | 'no-overflow'
+  textWrapMode?: Globals | 'wrap' | 'nowrap'
+  textSpacingTrim?: Globals | 'normal' | 'space-all' | 'space-first' | 'trim-start'
+  textWrapStyle?: Globals | 'auto' | 'balance' | 'pretty' | 'stable'
+}
+
 export type CssProperty = keyof PropertiesFallback
 
-export interface CssProperties extends PropertiesFallback<String | Number>, CssVarProperties {}
+export interface CssProperties extends PropertiesFallback<String | Number>, CssVarProperties, ModernCssProperties {}
 
 export interface CssKeyframes {
   [name: string]: {

package/dist/types/ui-kit/avatar.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import * as StyledAvatar from './styled/avatar';
 export interface AvatarProps extends StyledAvatar.RootProps {
     name?: string;

package/dist/types/ui-kit/button.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type ButtonProps as StyledButtonProps } from './styled/button';
 interface ButtonLoadingProps {
     loading?: boolean;

package/dist/types/ui-kit/panda-preset/panda.preset.d.ts

@@ -1,2 +1,2 @@
-declare const preset: import("@pandacss/types").Preset;
+declare const preset: import("@pandacss/dev").Preset;
 export { preset };

package/dist/types/ui-kit/spinner.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type SpinnerProps as StyledSpinnerProps } from './styled/spinner';
 export interface SpinnerProps extends StyledSpinnerProps {
     label?: string;

package/dist/types/ui-kit/styled/alert.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { Assign, PolymorphicProps } from '@ark-ui/react';
 import type { ComponentProps, HTMLStyledProps } from '../../styled-system/types';
 export type RootProps = ComponentProps<typeof Root>;

package/dist/types/ui-kit/styled/avatar.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Avatar } from '@ark-ui/react/avatar';
 import { type AvatarVariantProps } from '../../styled-system/recipes';
 import type { Assign } from '@ark-ui/react';

package/dist/types/ui-kit/styled/badge.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import type { ComponentProps } from '../../styled-system/types';
 export type BadgeProps = ComponentProps<typeof Badge>;
-export declare const Badge: import("../../styled-system/jsx").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-} & import("@ark-ui/react/factory").PolymorphicProps>, import("../../styled-system/recipes").BadgeVariantProps>;
+export declare const Badge: import("../../styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+} & import("@ark-ui/react").PolymorphicProps>, import("../../styled-system/recipes").BadgeVariantProps>;

package/dist/types/ui-kit/styled/button.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import type { ComponentProps } from '../../styled-system/types';
 export type ButtonProps = ComponentProps<typeof Button>;
-export declare const Button: import("../../styled-system/jsx").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+export declare const Button: import("../../styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
 } & import("@ark-ui/react").PolymorphicProps>, import("../../styled-system/recipes").ButtonVariantProps>;

package/dist/types/ui-kit/styled/icon-button.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 import { type ButtonVariantProps } from '../../styled-system/recipes';
 import type { ComponentProps } from '../../styled-system/types';
 export type IconButtonProps = ComponentProps<typeof IconButton>;
-export declare const IconButton: import("../../styled-system/jsx").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-} & import("@ark-ui/react/factory").PolymorphicProps>, ButtonVariantProps>;
+export declare const IconButton: import("../../styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+} & import("@ark-ui/react").PolymorphicProps>, ButtonVariantProps>;

package/dist/types/ui-kit/styled/icon.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import type { ComponentProps } from '../../styled-system/types';
 export type IconProps = ComponentProps<typeof Icon>;
-export declare const Icon: import("../../styled-system/jsx").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-} & import("@ark-ui/react/factory").PolymorphicProps>, import("../../styled-system/recipes").IconVariantProps>;
+export declare const Icon: import("../../styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGSVGElement> | null | undefined;
+} & import("@ark-ui/react").PolymorphicProps>, import("../../styled-system/recipes").IconVariantProps>;

package/dist/types/ui-kit/styled/input.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import type { ComponentProps } from '../../styled-system/types';
 export type InputProps = ComponentProps<typeof Input>;
-export declare const Input: import("../../styled-system/jsx").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-} & import("@ark-ui/react/factory").PolymorphicProps>, import("../../styled-system/recipes").InputVariantProps>;
+export declare const Input: import("../../styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+    ref?: ((instance: HTMLInputElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLInputElement> | null | undefined;
+} & import("@ark-ui/react").PolymorphicProps>, import("../../styled-system/recipes").InputVariantProps>;

package/dist/types/ui-kit/styled/menu.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Menu } from '@ark-ui/react';
 import { type MenuVariantProps } from '../../styled-system/recipes';
 import type { Assign } from '@ark-ui/react';

package/dist/types/ui-kit/styled/popover.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Popover } from '@ark-ui/react/popover';
 import { type PopoverVariantProps } from '../../styled-system/recipes';
 import type { Assign } from '@ark-ui/react';

package/dist/types/ui-kit/styled/skeleton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type SkeletonVariantProps } from '../../styled-system/recipes';
 import type { Assign, HTMLArkProps } from '@ark-ui/react';
 import type { JsxStyleProps } from '../../styled-system/types';

package/dist/types/ui-kit/styled/spinner.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import type { ComponentProps } from '../../styled-system/types';
 export type SpinnerProps = ComponentProps<typeof Spinner>;
-export declare const Spinner: import("../../styled-system/jsx").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+export declare const Spinner: import("../../styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
 } & import("@ark-ui/react").PolymorphicProps>, import("../../styled-system/recipes").SpinnerVariantProps>;

package/dist/types/ui-kit/styled/text.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type TextVariantProps } from '../../styled-system/recipes';
 import type { ComponentProps, StyledComponent } from '../../styled-system/types';
 type ParagraphProps = TextVariantProps & {

package/dist/types/ui-kit/styled/tooltip.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Tooltip } from '@ark-ui/react/tooltip';
 import { type TooltipVariantProps } from '../../styled-system/recipes';
 import type { Assign } from '@ark-ui/react';

package/dist/types/ui-kit/styled/utils/create-style-context.d.ts

@@ -10,11 +10,11 @@ type Options = {
 };
 export declare const createStyleContext: <R extends Recipe>(recipe: R) => {
     withRootProvider: <P extends {}>(Component: ElementType) => (props: P) => import("react/jsx-runtime").JSX.Element;
-    withProvider: <T, P_1 extends {
+    withProvider: <T, P extends {
         className?: string | undefined;
-    }>(Component: ElementType, slot: Slot<R>, options?: Options) => ForwardRefExoticComponent<PropsWithoutRef<P_1> & RefAttributes<T>>;
-    withContext: <T_1, P_2 extends {
+    }>(Component: ElementType, slot: Slot<R>, options?: Options) => ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
+    withContext: <T, P_1 extends {
         className?: string | undefined;
-    }>(Component: ElementType, slot: Slot<R>) => ForwardRefExoticComponent<PropsWithoutRef<P_2> & RefAttributes<T_1>>;
+    }>(Component: ElementType, slot: Slot<R>) => ForwardRefExoticComponent<PropsWithoutRef<P_1> & RefAttributes<T>>;
 };
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@integration-app/react",
-  "version": "2.4.0",
+  "version": "2.4.1-beta.0",
   "description": "",
   "author": "Integration.app",
   "type": "module",
@@ -25,6 +25,31 @@
   "files": [
     "dist"
   ],
+  "scripts": {
+    "build": "npm run build:bundle && npm run build:dts",
+    "build:bundle": "rollup -c rollup.config.mjs",
+    "build:dts": "node ./scripts/patch-bundle-types.mjs",
+    "dev": "turbo run dev:bundle dev:dts --parallel",
+    "dev:bundle": "rollup -c rollup.config.mjs --watch",
+    "dev:dts": "node ./scripts/patch-bundle-types.mjs --watch",
+    "lint": "npx publint",
+    "prepare": "panda codegen",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "test": "vitest --config ./vitest.config.ts",
+    "test:package": "cd ../react-bundle-tests/test-package && npm run test-package-build && cd ..",
+    "test:storybook:watch": "test-storybook --watch",
+    "test:storybook": "test-storybook",
+    "test:storybook:ci": "concurrently -k -s first \"npm run test:storybook:ci:build-n-serve\" \"npm run test:storybook:ci:run-tests\"",
+    "test:storybook:ci:build-n-serve": "storybook build --test --quiet && npx http-server storybook-static --port 6006 --silent",
+    "test:storybook:ci:run-tests": "wait-on tcp:6006 && npm run test:storybook -- --maxWorkers=2",
+    "chromatic": "chromatic --exit-zero-on-changes",
+    "find-circular-deps": "madge ./src/index.ts --warning -c",
+    "docs": "typedoc --tsconfig tsconfig.json --plugin typedoc-plugin-missing-exports",
+    "docs:dev": "typedoc --tsconfig tsconfig.json --plugin typedoc-plugin-missing-exports --watch",
+    "docs:recipes": "tsx ./scripts/generate-recipes-docs.ts",
+    "prepublishOnly": "tsx ./scripts/prepare-package-json.ts"
+  },
   "dependencies": {
     "@ark-ui/react": "^4.1.1",
     "@floating-ui/react": "^0.27.0",
@@ -51,13 +76,68 @@
     "react": ">=18.3.1",
     "react-dom": ">=18.3.1"
   },
-  "overrides": {
-    "express": "^4.20.0",
-    "cross-spawn": "^7.0.5"
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.2",
+    "@pandacss/dev": "0.53.0",
+    "@park-ui/panda-preset": "^0.42.0",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@storybook/addon-docs": "^8.5.6",
+    "@storybook/addon-essentials": "^8.5.6",
+    "@storybook/addon-interactions": "^8.5.6",
+    "@storybook/addon-links": "^8.5.6",
+    "@storybook/blocks": "^8.5.6",
+    "@storybook/builder-vite": "^8.5.6",
+    "@storybook/react": "^8.5.6",
+    "@storybook/react-vite": "^8.5.6",
+    "@storybook/test": "^8.5.6",
+    "@storybook/test-runner": "^0.21.3",
+    "@storybook/types": "^8.5.6",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@types/react": "18.3.12",
+    "@types/react-dom": "18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "autoprefixer": "^10.4.20",
+    "chokidar": "^4.0.0",
+    "commander": "^12.1.0",
+    "concurrently": "^9.0.1",
+    "esbuild": "^0.25.0",
+    "execa": "^9.4.0",
+    "jsdom": "^25.0.1",
+    "madge": "^8.0.0",
+    "msw": "^2.6.8",
+    "msw-storybook-addon": "^2.0.4",
+    "postcss-import": "^16.1.0",
+    "postcss-nesting": "^13.0.0",
+    "react-helmet": "^6.1.0",
+    "resize-observer-polyfill": "^1.5.1",
+    "rimraf": "^5.0.5",
+    "rollup": "^4.22.5",
+    "rollup-plugin-esbuild": "^6.1.1",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-preserve-directives": "^0.4.0",
+    "rollup-plugin-tsconfig-paths": "^1.5.2",
+    "rollup-plugin-visualizer": "^5.13.1",
+    "storybook": "^8.5.6",
+    "storybook-mock-date-decorator": "^2.0.6",
+    "tailwindcss": "^3.4.13",
+    "tsc-alias": "^1.8.10",
+    "tsx": "^4.19.2",
+    "turbo": "^1.5.2",
+    "typedoc": "^0.26.11",
+    "typedoc-plugin-mark-react-functional-components": "^0.2.2",
+    "typedoc-plugin-missing-exports": "^3.1.0",
+    "typedoc-plugin-rename-defaults": "^0.7.1",
+    "typescript": "^5.4.4",
+    "vite-tsconfig-paths": "^5.0.1",
+    "vitest": "^3.0.6",
+    "wait-on": "^8.0.1"
   },
   "msw": {
     "workerDirectory": [
       "public"
     ]
   }
-}
+}