@tosui/react 0.0.1

package/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

package/dist/components/Box/Box.d.ts

@@ -0,0 +1,35 @@
+import { ElementType, ReactNode } from 'react';
+import { Polymorphic } from '../../types/Polymorphic';
+import { DisplayProps } from './styleParts/display';
+import { PositionProps } from './styleParts/position';
+import { OverflowProps } from './styleParts/overflow';
+import { ZIndexProps } from './styleParts/zIndex';
+import { SizeProps } from './styleParts/sizing';
+import { FlexboxProps } from './styleParts/flexbox';
+import { GridProps } from './styleParts/grid';
+import { InsetProps } from './styleParts/inset';
+import { TypographyProps } from './styleParts/typography';
+import { ColorProps } from './styleParts/colors';
+import { BorderProps } from './styleParts/borders';
+import { RoundnessProps } from './styleParts/roundness';
+import { ShadowProps } from './styleParts/shadows';
+import { InteractionProps } from './styleParts/interactions';
+import { TextProps } from './styleParts/text';
+import { OpacityProps } from './styleParts/opacity';
+import { PaddingProps } from './styleParts/padding';
+import { MarginProps } from './styleParts/margin';
+export type BoxOwnProps = MarginProps & PaddingProps & DisplayProps & PositionProps & OverflowProps & ZIndexProps & SizeProps & FlexboxProps & GridProps & InsetProps & TypographyProps & ColorProps & BorderProps & RoundnessProps & ShadowProps & InteractionProps & TextProps & OpacityProps & {
+    className?: string;
+    children?: ReactNode;
+};
+export type BoxProps<T extends ElementType = "div"> = Polymorphic<T, BoxOwnProps>;
+/**
+ * Box - The core primitive component
+ *
+ * A polymorphic component that provides:
+ * - Default element: <div>
+ * - Can render as any HTML element via the `as` prop
+ * - Type-safe props based on the element type
+ */
+export declare function Box<T extends ElementType = "div">({ as, children, className, style, p, pt, pr, pb, pl, px, py, m, mt, mr, mb, ml, mx, my, display, position, overflow, overflowX, overflowY, zIndex, w, h, minW, maxW, minH, maxH, flexDirection, justifyContent, alignItems, alignSelf, flexWrap, gap, gapRow, gapColumn, flex, flexGrow, flexShrink, flexBasis, justifySelf, gridTemplateColumns, gridTemplateRows, inset, insetX, insetY, top, right, bottom, left, fontSize, fontFamily, fontWeight, lineHeight, color, bg, borderColor, border, borderX, borderY, borderTop, borderRight, borderBottom, borderLeft, borderStyle, rounded, roundedTop, roundedBottom, roundedLeft, roundedRight, roundedTopLeft, roundedTopRight, roundedBottomLeft, roundedBottomRight, shadow, cursor, pointerEvents, userSelect, textAlign, whiteSpace, opacity, ...rest }: BoxProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Box.d.ts.map

package/dist/components/Box/Box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../src/components/Box/Box.tsx"],"names":[],"mappings":"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"}

package/dist/components/Box/styleParts/borders.d.ts

@@ -0,0 +1,97 @@
+import { ResponsiveValue } from '../../../utils/breakpoints.stylex';
+import * as stylex from "@stylexjs/stylex";
+type BorderWidthValues = keyof typeof borderTopWidthStyles;
+type BorderStyleValues = keyof typeof borderStyleStyles;
+declare const borderTopWidthStyles: Readonly<{
+    readonly medium: Readonly<{
+        readonly borderTopWidth: stylex.StyleXClassNameFor<"borderTopWidth", "var(--t-border-width-medium)">;
+    }>;
+    readonly none: Readonly<{
+        readonly borderTopWidth: stylex.StyleXClassNameFor<"borderTopWidth", "var(--t-border-width-none)">;
+    }>;
+    readonly thick: Readonly<{
+        readonly borderTopWidth: stylex.StyleXClassNameFor<"borderTopWidth", "var(--t-border-width-thick)">;
+    }>;
+    readonly thin: Readonly<{
+        readonly borderTopWidth: stylex.StyleXClassNameFor<"borderTopWidth", "var(--t-border-width-thin)">;
+    }>;
+}>;
+declare const borderStyleStyles: Readonly<{
+    readonly dashed: Readonly<{
+        readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "dashed">;
+    }>;
+    readonly dotted: Readonly<{
+        readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "dotted">;
+    }>;
+    readonly none: Readonly<{
+        readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "none">;
+    }>;
+    readonly solid: Readonly<{
+        readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
+    }>;
+}>;
+type BorderWidth = ResponsiveValue<BorderWidthValues>;
+type BorderStyle = ResponsiveValue<BorderStyleValues>;
+export type BorderProps = {
+    border?: BorderWidth;
+    borderX?: BorderWidth;
+    borderY?: BorderWidth;
+    borderTop?: BorderWidth;
+    borderRight?: BorderWidth;
+    borderBottom?: BorderWidth;
+    borderLeft?: BorderWidth;
+    borderStyle?: BorderStyle;
+};
+export declare function getBorderStyles(props: BorderProps): (Readonly<{
+    readonly borderTopWidth: stylex.StyleXClassNameFor<"borderTopWidth", "var(--t-border-width-none)">;
+}> | Readonly<{
+    readonly borderTopWidth: stylex.StyleXClassNameFor<"borderTopWidth", "var(--t-border-width-thin)">;
+}> | Readonly<{
+    readonly borderTopWidth: stylex.StyleXClassNameFor<"borderTopWidth", "var(--t-border-width-medium)">;
+}> | Readonly<{
+    readonly borderTopWidth: stylex.StyleXClassNameFor<"borderTopWidth", "var(--t-border-width-thick)">;
+}> | readonly [Readonly<{
+    borderTopWidth: stylex.StyleXClassNameFor<"borderTopWidth", "var(--t-border-width-medium)" | "var(--t-border-width-none)" | "var(--t-border-width-thick)" | "var(--t-border-width-thin)">;
+}>, stylex.InlineStyles] | Readonly<{
+    readonly borderRightWidth: stylex.StyleXClassNameFor<"borderRightWidth", "var(--t-border-width-none)">;
+}> | Readonly<{
+    readonly borderRightWidth: stylex.StyleXClassNameFor<"borderRightWidth", "var(--t-border-width-thin)">;
+}> | Readonly<{
+    readonly borderRightWidth: stylex.StyleXClassNameFor<"borderRightWidth", "var(--t-border-width-medium)">;
+}> | Readonly<{
+    readonly borderRightWidth: stylex.StyleXClassNameFor<"borderRightWidth", "var(--t-border-width-thick)">;
+}> | readonly [Readonly<{
+    borderRightWidth: stylex.StyleXClassNameFor<"borderRightWidth", "var(--t-border-width-medium)" | "var(--t-border-width-none)" | "var(--t-border-width-thick)" | "var(--t-border-width-thin)">;
+}>, stylex.InlineStyles] | Readonly<{
+    readonly borderBottomWidth: stylex.StyleXClassNameFor<"borderBottomWidth", "var(--t-border-width-none)">;
+}> | Readonly<{
+    readonly borderBottomWidth: stylex.StyleXClassNameFor<"borderBottomWidth", "var(--t-border-width-thin)">;
+}> | Readonly<{
+    readonly borderBottomWidth: stylex.StyleXClassNameFor<"borderBottomWidth", "var(--t-border-width-medium)">;
+}> | Readonly<{
+    readonly borderBottomWidth: stylex.StyleXClassNameFor<"borderBottomWidth", "var(--t-border-width-thick)">;
+}> | readonly [Readonly<{
+    borderBottomWidth: stylex.StyleXClassNameFor<"borderBottomWidth", "var(--t-border-width-medium)" | "var(--t-border-width-none)" | "var(--t-border-width-thick)" | "var(--t-border-width-thin)">;
+}>, stylex.InlineStyles] | Readonly<{
+    readonly borderLeftWidth: stylex.StyleXClassNameFor<"borderLeftWidth", "var(--t-border-width-none)">;
+}> | Readonly<{
+    readonly borderLeftWidth: stylex.StyleXClassNameFor<"borderLeftWidth", "var(--t-border-width-thin)">;
+}> | Readonly<{
+    readonly borderLeftWidth: stylex.StyleXClassNameFor<"borderLeftWidth", "var(--t-border-width-medium)">;
+}> | Readonly<{
+    readonly borderLeftWidth: stylex.StyleXClassNameFor<"borderLeftWidth", "var(--t-border-width-thick)">;
+}> | readonly [Readonly<{
+    borderLeftWidth: stylex.StyleXClassNameFor<"borderLeftWidth", "var(--t-border-width-medium)" | "var(--t-border-width-none)" | "var(--t-border-width-thick)" | "var(--t-border-width-thin)">;
+}>, stylex.InlineStyles] | Readonly<{
+    readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "none">;
+}> | Readonly<{
+    readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "dotted">;
+}> | Readonly<{
+    readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "dashed">;
+}> | Readonly<{
+    readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
+}> | readonly [Readonly<{
+    borderStyle: stylex.StyleXClassNameFor<"borderStyle", "none" | "dotted" | "dashed" | "solid">;
+}>, stylex.InlineStyles])[];
+export {};
+//# sourceMappingURL=borders.d.ts.map

package/dist/components/Box/styleParts/borders.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"borders.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/styleParts/borders.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAEL,KAAK,eAAe,EAGrB,MAAM,mCAAmC,CAAC;AAE3C,KAAK,iBAAiB,GAAG,MAAM,OAAO,oBAAoB,CAAC;AAC3D,KAAK,iBAAiB,GAAG,MAAM,OAAO,iBAAiB,CAAC;AASxD,QAAA,MAAM,oBAAoB;;;;;;;;;;;;;EAaxB,CAAC;AAmGH,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;EAarB,CAAC;AAeH,KAAK,WAAW,GAAG,eAAe,CAAC,iBAAiB,CAAC,CAAC;AACtD,KAAK,WAAW,GAAG,eAAe,CAAC,iBAAiB,CAAC,CAAC;AAEtD,MAAM,MAAM,WAAW,GAAG;IACxB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,CAAC;AAEF,wBAAgB,eAAe,CAAC,KAAK,EAAE,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4BAwEjD"}

package/dist/components/Box/styleParts/colors.d.ts

@@ -0,0 +1,288 @@
+import { ResponsiveValue } from '../../../utils/breakpoints.stylex';
+import * as stylex from "@stylexjs/stylex";
+type ColorValues = keyof typeof colorStyles;
+type BackgroundColorValues = keyof typeof bgStyles;
+type BorderColorValues = keyof typeof borderColorStyles;
+declare const colorStyles: Readonly<{
+    readonly "accent-emphasis": Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", "var(--t-color-accent-emphasis)">;
+    }>;
+    readonly accent: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", "var(--t-color-accent-default)">;
+    }>;
+    readonly "error-emphasis": Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", "var(--t-color-error-emphasis)">;
+    }>;
+    readonly error: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", "var(--t-color-error-default)">;
+    }>;
+    readonly "foreground-inverted-muted": Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", "var(--t-color-foreground-inverted-muted)">;
+    }>;
+    readonly "foreground-inverted-subtle": Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", "var(--t-color-foreground-inverted-subtle)">;
+    }>;
+    readonly "foreground-inverted": Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", "var(--t-color-foreground-inverted)">;
+    }>;
+    readonly "foreground-muted": Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", "var(--t-color-foreground-muted)">;
+    }>;
+    readonly "foreground-subtle": Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", "var(--t-color-foreground-subtle)">;
+    }>;
+    readonly foreground: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", "var(--t-color-foreground)">;
+    }>;
+    readonly "info-emphasis": Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", "var(--t-color-info-emphasis)">;
+    }>;
+    readonly info: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", "var(--t-color-info-default)">;
+    }>;
+    readonly "primary-emphasis": Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", "var(--t-color-primary-emphasis)">;
+    }>;
+    readonly primary: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", "var(--t-color-primary-default)">;
+    }>;
+    readonly "success-emphasis": Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", "var(--t-color-success-emphasis)">;
+    }>;
+    readonly success: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", "var(--t-color-success-default)">;
+    }>;
+    readonly "warning-emphasis": Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", "var(--t-color-warning-emphasis)">;
+    }>;
+    readonly warning: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", "var(--t-color-warning-default)">;
+    }>;
+}>;
+declare const bgStyles: Readonly<{
+    readonly "accent-default": Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--t-color-accent-default)">;
+    }>;
+    readonly "accent-emphasis": Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--t-color-accent-emphasis)">;
+    }>;
+    readonly "accent-subtle": Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--t-color-accent-subtle)">;
+    }>;
+    readonly background: Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--t-color-background)">;
+    }>;
+    readonly "error-default": Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--t-color-error-default)">;
+    }>;
+    readonly "error-emphasis": Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--t-color-error-emphasis)">;
+    }>;
+    readonly "error-subtle": Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--t-color-error-subtle)">;
+    }>;
+    readonly "info-default": Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--t-color-info-default)">;
+    }>;
+    readonly "info-emphasis": Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--t-color-info-emphasis)">;
+    }>;
+    readonly "info-subtle": Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--t-color-info-subtle)">;
+    }>;
+    readonly "primary-default": Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--t-color-primary-default)">;
+    }>;
+    readonly "primary-emphasis": Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--t-color-primary-emphasis)">;
+    }>;
+    readonly "primary-subtle": Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--t-color-primary-subtle)">;
+    }>;
+    readonly "success-default": Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--t-color-success-default)">;
+    }>;
+    readonly "success-emphasis": Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--t-color-success-emphasis)">;
+    }>;
+    readonly "success-subtle": Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--t-color-success-subtle)">;
+    }>;
+    readonly surface: Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--t-color-surface)">;
+    }>;
+    readonly "warning-default": Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--t-color-warning-default)">;
+    }>;
+    readonly "warning-emphasis": Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--t-color-warning-emphasis)">;
+    }>;
+    readonly "warning-subtle": Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--t-color-warning-subtle)">;
+    }>;
+}>;
+declare const borderColorStyles: Readonly<{
+    readonly "accent-emphasis": Readonly<{
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "var(--t-color-accent-emphasis)">;
+    }>;
+    readonly accent: Readonly<{
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "var(--t-color-accent-default)">;
+    }>;
+    readonly "border-muted": Readonly<{
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "var(--t-color-border-muted)">;
+    }>;
+    readonly border: Readonly<{
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "var(--t-color-border)">;
+    }>;
+    readonly "error-emphasis": Readonly<{
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "var(--t-color-error-emphasis)">;
+    }>;
+    readonly error: Readonly<{
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "var(--t-color-error-default)">;
+    }>;
+    readonly "info-emphasis": Readonly<{
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "var(--t-color-info-emphasis)">;
+    }>;
+    readonly info: Readonly<{
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "var(--t-color-info-default)">;
+    }>;
+    readonly "primary-emphasis": Readonly<{
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "var(--t-color-primary-emphasis)">;
+    }>;
+    readonly primary: Readonly<{
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "var(--t-color-primary-default)">;
+    }>;
+    readonly "success-emphasis": Readonly<{
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "var(--t-color-success-emphasis)">;
+    }>;
+    readonly success: Readonly<{
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "var(--t-color-success-default)">;
+    }>;
+    readonly "warning-emphasis": Readonly<{
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "var(--t-color-warning-emphasis)">;
+    }>;
+    readonly warning: Readonly<{
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "var(--t-color-warning-default)">;
+    }>;
+}>;
+export type Color = ResponsiveValue<ColorValues>;
+export type BackgroundColor = ResponsiveValue<BackgroundColorValues>;
+export type BorderColor = ResponsiveValue<BorderColorValues>;
+export type ColorProps = {
+    color?: Color;
+    bg?: BackgroundColor;
+    borderColor?: BorderColor;
+};
+export declare function getColorStyles(props: ColorProps): (Readonly<{
+    readonly color: stylex.StyleXClassNameFor<"color", "var(--t-color-accent-emphasis)">;
+}> | Readonly<{
+    readonly color: stylex.StyleXClassNameFor<"color", "var(--t-color-accent-default)">;
+}> | Readonly<{
+    readonly color: stylex.StyleXClassNameFor<"color", "var(--t-color-error-emphasis)">;
+}> | Readonly<{
+    readonly color: stylex.StyleXClassNameFor<"color", "var(--t-color-error-default)">;
+}> | Readonly<{
+    readonly color: stylex.StyleXClassNameFor<"color", "var(--t-color-foreground-inverted-muted)">;
+}> | Readonly<{
+    readonly color: stylex.StyleXClassNameFor<"color", "var(--t-color-foreground-inverted-subtle)">;
+}> | Readonly<{
+    readonly color: stylex.StyleXClassNameFor<"color", "var(--t-color-foreground-inverted)">;
+}> | Readonly<{
+    readonly color: stylex.StyleXClassNameFor<"color", "var(--t-color-foreground-muted)">;
+}> | Readonly<{
+    readonly color: stylex.StyleXClassNameFor<"color", "var(--t-color-foreground-subtle)">;
+}> | Readonly<{
+    readonly color: stylex.StyleXClassNameFor<"color", "var(--t-color-foreground)">;
+}> | Readonly<{
+    readonly color: stylex.StyleXClassNameFor<"color", "var(--t-color-info-emphasis)">;
+}> | Readonly<{
+    readonly color: stylex.StyleXClassNameFor<"color", "var(--t-color-info-default)">;
+}> | Readonly<{
+    readonly color: stylex.StyleXClassNameFor<"color", "var(--t-color-primary-emphasis)">;
+}> | Readonly<{
+    readonly color: stylex.StyleXClassNameFor<"color", "var(--t-color-primary-default)">;
+}> | Readonly<{
+    readonly color: stylex.StyleXClassNameFor<"color", "var(--t-color-success-emphasis)">;
+}> | Readonly<{
+    readonly color: stylex.StyleXClassNameFor<"color", "var(--t-color-success-default)">;
+}> | Readonly<{
+    readonly color: stylex.StyleXClassNameFor<"color", "var(--t-color-warning-emphasis)">;
+}> | Readonly<{
+    readonly color: stylex.StyleXClassNameFor<"color", "var(--t-color-warning-default)">;
+}> | readonly [Readonly<{
+    color: stylex.StyleXClassNameFor<"color", "var(--t-color-accent-emphasis)" | "var(--t-color-accent-default)" | "var(--t-color-error-emphasis)" | "var(--t-color-error-default)" | "var(--t-color-foreground-inverted-muted)" | "var(--t-color-foreground-inverted-subtle)" | "var(--t-color-foreground-inverted)" | "var(--t-color-foreground-muted)" | "var(--t-color-foreground-subtle)" | "var(--t-color-foreground)" | "var(--t-color-info-emphasis)" | "var(--t-color-info-default)" | "var(--t-color-primary-emphasis)" | "var(--t-color-primary-default)" | "var(--t-color-success-emphasis)" | "var(--t-color-success-default)" | "var(--t-color-warning-emphasis)" | "var(--t-color-warning-default)">;
+}>, stylex.InlineStyles] | Readonly<{
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--t-color-background)">;
+}> | Readonly<{
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--t-color-accent-emphasis)">;
+}> | Readonly<{
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--t-color-error-emphasis)">;
+}> | Readonly<{
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--t-color-info-emphasis)">;
+}> | Readonly<{
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--t-color-primary-emphasis)">;
+}> | Readonly<{
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--t-color-success-emphasis)">;
+}> | Readonly<{
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--t-color-warning-emphasis)">;
+}> | Readonly<{
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--t-color-accent-default)">;
+}> | Readonly<{
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--t-color-accent-subtle)">;
+}> | Readonly<{
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--t-color-error-default)">;
+}> | Readonly<{
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--t-color-error-subtle)">;
+}> | Readonly<{
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--t-color-info-default)">;
+}> | Readonly<{
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--t-color-info-subtle)">;
+}> | Readonly<{
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--t-color-primary-default)">;
+}> | Readonly<{
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--t-color-primary-subtle)">;
+}> | Readonly<{
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--t-color-success-default)">;
+}> | Readonly<{
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--t-color-success-subtle)">;
+}> | Readonly<{
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--t-color-surface)">;
+}> | Readonly<{
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--t-color-warning-default)">;
+}> | Readonly<{
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--t-color-warning-subtle)">;
+}> | readonly [Readonly<{
+    backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--t-color-accent-emphasis)" | "var(--t-color-accent-default)" | "var(--t-color-error-emphasis)" | "var(--t-color-error-default)" | "var(--t-color-info-emphasis)" | "var(--t-color-info-default)" | "var(--t-color-primary-emphasis)" | "var(--t-color-primary-default)" | "var(--t-color-success-emphasis)" | "var(--t-color-success-default)" | "var(--t-color-warning-emphasis)" | "var(--t-color-warning-default)" | "var(--t-color-accent-subtle)" | "var(--t-color-background)" | "var(--t-color-error-subtle)" | "var(--t-color-info-subtle)" | "var(--t-color-primary-subtle)" | "var(--t-color-success-subtle)" | "var(--t-color-surface)" | "var(--t-color-warning-subtle)">;
+}>, stylex.InlineStyles] | Readonly<{
+    readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "var(--t-color-border)">;
+}> | Readonly<{
+    readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "var(--t-color-accent-emphasis)">;
+}> | Readonly<{
+    readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "var(--t-color-accent-default)">;
+}> | Readonly<{
+    readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "var(--t-color-error-emphasis)">;
+}> | Readonly<{
+    readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "var(--t-color-error-default)">;
+}> | Readonly<{
+    readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "var(--t-color-info-emphasis)">;
+}> | Readonly<{
+    readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "var(--t-color-info-default)">;
+}> | Readonly<{
+    readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "var(--t-color-primary-emphasis)">;
+}> | Readonly<{
+    readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "var(--t-color-primary-default)">;
+}> | Readonly<{
+    readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "var(--t-color-success-emphasis)">;
+}> | Readonly<{
+    readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "var(--t-color-success-default)">;
+}> | Readonly<{
+    readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "var(--t-color-warning-emphasis)">;
+}> | Readonly<{
+    readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "var(--t-color-warning-default)">;
+}> | Readonly<{
+    readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "var(--t-color-border-muted)">;
+}> | readonly [Readonly<{
+    borderColor: stylex.StyleXClassNameFor<"borderColor", "var(--t-color-accent-emphasis)" | "var(--t-color-accent-default)" | "var(--t-color-error-emphasis)" | "var(--t-color-error-default)" | "var(--t-color-info-emphasis)" | "var(--t-color-info-default)" | "var(--t-color-primary-emphasis)" | "var(--t-color-primary-default)" | "var(--t-color-success-emphasis)" | "var(--t-color-success-default)" | "var(--t-color-warning-emphasis)" | "var(--t-color-warning-default)" | "var(--t-color-border-muted)" | "var(--t-color-border)">;
+}>, stylex.InlineStyles])[];
+export {};
+//# sourceMappingURL=colors.d.ts.map

package/dist/components/Box/styleParts/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/styleParts/colors.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAEL,KAAK,eAAe,EAGrB,MAAM,mCAAmC,CAAC;AAE3C,KAAK,WAAW,GAAG,MAAM,OAAO,WAAW,CAAC;AAC5C,KAAK,qBAAqB,GAAG,MAAM,OAAO,QAAQ,CAAC;AACnD,KAAK,iBAAiB,GAAG,MAAM,OAAO,iBAAiB,CAAC;AA+DxD,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuDf,CAAC;AAeH,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6DZ,CAAC;AAeH,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2CrB,CAAC;AAeH,MAAM,MAAM,KAAK,GAAG,eAAe,CAAC,WAAW,CAAC,CAAC;AACjD,MAAM,MAAM,eAAe,GAAG,eAAe,CAAC,qBAAqB,CAAC,CAAC;AACrE,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC,iBAAiB,CAAC,CAAC;AAE7D,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,EAAE,CAAC,EAAE,eAAe,CAAC;IACrB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,CAAC;AAEF,wBAAgB,cAAc,CAAC,KAAK,EAAE,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4BAoC/C"}

package/dist/components/Box/styleParts/display.d.ts

@@ -0,0 +1,54 @@
+import { ResponsiveValue } from '../../../utils/breakpoints.stylex';
+import * as stylex from "@stylexjs/stylex";
+type DisplayValues = keyof typeof displayStyles;
+export type Display = ResponsiveValue<DisplayValues>;
+declare const displayStyles: Readonly<{
+    readonly block: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "block">;
+    }>;
+    readonly flex: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+    }>;
+    readonly grid: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "grid">;
+    }>;
+    readonly inline: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "inline">;
+    }>;
+    readonly "inline-block": Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "inline-block">;
+    }>;
+    readonly "inline-flex": Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
+    }>;
+    readonly "inline-grid": Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "inline-grid">;
+    }>;
+    readonly none: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "none">;
+    }>;
+}>;
+export type DisplayProps = {
+    display?: Display;
+};
+export declare function getDisplayStyles(display?: Display): Readonly<{
+    readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+}> | Readonly<{
+    readonly display: stylex.StyleXClassNameFor<"display", "grid">;
+}> | Readonly<{
+    readonly display: stylex.StyleXClassNameFor<"display", "none">;
+}> | Readonly<{
+    readonly display: stylex.StyleXClassNameFor<"display", "inline">;
+}> | Readonly<{
+    readonly display: stylex.StyleXClassNameFor<"display", "block">;
+}> | Readonly<{
+    readonly display: stylex.StyleXClassNameFor<"display", "inline-block">;
+}> | Readonly<{
+    readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
+}> | Readonly<{
+    readonly display: stylex.StyleXClassNameFor<"display", "inline-grid">;
+}> | readonly [Readonly<{
+    display: stylex.StyleXClassNameFor<"display", "flex" | "grid" | "none" | "inline" | "block" | "inline-block" | "inline-flex" | "inline-grid">;
+}>, stylex.InlineStyles] | undefined;
+export {};
+//# sourceMappingURL=display.d.ts.map

package/dist/components/Box/styleParts/display.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"display.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/styleParts/display.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAEL,KAAK,eAAe,EAGrB,MAAM,mCAAmC,CAAC;AAE3C,KAAK,aAAa,GAAG,MAAM,OAAO,aAAa,CAAC;AAEhD,MAAM,MAAM,OAAO,GAAG,eAAe,CAAC,aAAa,CAAC,CAAC;AAErD,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;EAyBjB,CAAC;AAgBH,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,OAAO,CAAC,EAAE,OAAO;;;;;;;;;;;;;;;;;;qCAQjD"}