@uni-design-system/uni-react 8.3.1 → 9.0.0

package/dist/types/components/index.d.ts

@@ -3,6 +3,7 @@ export * from './card';
 export * from './draggable';
 export * from './forms';
 export * from './icon-text-row';
+export * from './layout';
 export * from './modal';
 export * from './switch';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC"}

package/dist/types/components/layout/box/box.component.d.ts

@@ -0,0 +1,21 @@
+import { ElementType, ReactNode } from 'react';
+import { PolymorphicComponent, PolymorphicProps } from '../../../core/polymorphic';
+import { BoxStyleProps } from './box.styles';
+export interface BoxOwnProps extends BoxStyleProps {
+    /** The element to render. Defaults to `div`; use it to keep semantics: `as="main"`. */
+    as?: ElementType;
+    children?: ReactNode;
+    className?: string;
+}
+export type BoxProps<E extends ElementType = 'div'> = PolymorphicProps<E, BoxOwnProps>;
+/**
+ * The base layout primitive. Every other layout component is a Box with
+ * presets, and Box itself renders whatever element you name so the semantics
+ * stay yours: `<Box as="main" grow={1} padding="md">`.
+ *
+ * Sizing convention (height/width/min/max/inset): a **number is px** —
+ * `height={420}`; a **string is a CSS length** — `height="50%"`.
+ * Spacing/radius/border/shadow/color props take theme tokens.
+ */
+export declare const Box: PolymorphicComponent<BoxOwnProps>;
+//# sourceMappingURL=box.component.d.ts.map

package/dist/types/components/layout/box/box.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"box.component.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/box/box.component.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAc,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,KAAK,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAExF,OAAO,EAAkC,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAElF,MAAM,WAAW,WAAY,SAAQ,aAAa;IAChD,uFAAuF;IACvF,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,gBAAgB,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC;AAEvF;;;;;;;;GAQG;AACH,eAAO,MAAM,GAAG,EAuBV,oBAAoB,CAAC,WAAW,CAAC,CAAC"}

package/dist/types/components/layout/box/box.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Box } from './box.component';
+declare const meta: Meta<typeof Box>;
+export default meta;
+type Story = StoryObj<typeof Box>;
+export declare const Primary: Story;
+/** A flex container: three items spread along the main axis. */
+export declare const FlexContainer: Story;
+/** `as` keeps the semantics yours — this one renders a `<main>` element. */
+export declare const SemanticElement: Story;
+//# sourceMappingURL=box.stories.d.ts.map

package/dist/types/components/layout/box/box.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"box.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/box/box.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,EAAE,GAAG,EAAE,MAAM,iBAAiB,CAAC;AAEtC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,CAsG1B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,GAAG,CAAC,CAAC;AAElC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,gEAAgE;AAChE,eAAO,MAAM,aAAa,EAAE,KAkB3B,CAAC;AAEF,4EAA4E;AAC5E,eAAO,MAAM,eAAe,EAAE,KAQ7B,CAAC"}

package/dist/types/components/layout/box/box.styles.d.ts

@@ -0,0 +1,77 @@
+import { ContainerColorToken, OptionalAlignContent, OptionalAlignItems, OptionalAlignSelf, OptionalBorder, OptionalColor, OptionalDisplay, OptionalFlexDirection, OptionalJustifyContent, OptionalOverflow, OptionalPosition, OptionalRadius, OptionalSize, OptionalTextAlign, OptionalWrap, Shadow, ZIndexableElements } from '@uni-design-system/uni-core';
+import { ThemeStyles } from '../../../core/theme';
+/**
+ * Every style prop the Box primitive understands. Spacing, radius, border,
+ * shadow and color props take **theme tokens**; sizing props (height/width/
+ * min/max/inset) take a **number (px) or a CSS length string**.
+ */
+export interface BoxStyleProps {
+    /** Container color token — paints the background and its matching on-color. */
+    color?: ContainerColorToken;
+    backgroundColor?: OptionalColor;
+    borderRadius?: OptionalRadius;
+    borderRadiusLeft?: OptionalRadius;
+    borderRadiusRight?: OptionalRadius;
+    borderRadiusTop?: OptionalRadius;
+    borderRadiusBottom?: OptionalRadius;
+    padding?: OptionalSize;
+    paddingHorizontal?: OptionalSize;
+    paddingVertical?: OptionalSize;
+    paddingLeft?: OptionalSize;
+    paddingRight?: OptionalSize;
+    paddingTop?: OptionalSize;
+    paddingBottom?: OptionalSize;
+    border?: OptionalBorder;
+    borderTop?: OptionalBorder;
+    borderBottom?: OptionalBorder;
+    borderLeft?: OptionalBorder;
+    borderRight?: OptionalBorder;
+    /** Draws `border` as an SVG dashed outline instead of a solid one. */
+    dashBorder?: boolean;
+    alignSelf?: OptionalAlignSelf;
+    alignItems?: OptionalAlignItems;
+    alignContent?: OptionalAlignContent;
+    justifyContent?: OptionalJustifyContent;
+    grow?: number;
+    display?: OptionalDisplay;
+    position?: OptionalPosition;
+    inset?: number | string;
+    /** Number = px (`height={420}`); string = CSS length (`height="420px"`). */
+    height?: number | string;
+    minHeight?: number | string;
+    maxHeight?: number | string;
+    /** Number = px (`width={420}`); string = CSS length (`width="50%"`). */
+    width?: number | string;
+    minWidth?: number | string;
+    maxWidth?: number | string;
+    /** When true (default), flex direction flips under `dir="rtl"`. */
+    ignoreDir?: boolean;
+    gridArea?: string;
+    gridColumn?: string;
+    gridRow?: string;
+    overflow?: OptionalOverflow;
+    shadow?: Shadow;
+    gap?: OptionalSize;
+    fullWidth?: boolean;
+    fullHeight?: boolean;
+    flexDirection?: OptionalFlexDirection;
+    textAlign?: OptionalTextAlign;
+    wrapItems?: OptionalWrap;
+    zIndex?: ZIndexableElements;
+}
+/**
+ * The runtime key list used to split style props from the DOM props that pass
+ * through to the rendered element. Kept exhaustive by `assertExhaustive` below.
+ */
+export declare const BOX_STYLE_PROP_KEYS: readonly ["color", "backgroundColor", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "borderRadiusTop", "borderRadiusBottom", "padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "border", "borderTop", "borderBottom", "borderLeft", "borderRight", "dashBorder", "alignSelf", "alignItems", "alignContent", "justifyContent", "grow", "display", "position", "inset", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "ignoreDir", "gridArea", "gridColumn", "gridRow", "overflow", "shadow", "gap", "fullWidth", "fullHeight", "flexDirection", "textAlign", "wrapItems", "zIndex"];
+/** Split a props bag into Box style props and the rest (DOM/element props). */
+export declare function splitBoxProps<P extends BoxStyleProps>(props: P): [BoxStyleProps, Omit<P, keyof BoxStyleProps>];
+/**
+ * The Box class name, resolved token-for-token the same way the Angular
+ * `UniBoxComponent` resolves it — including declaration order, so overlapping
+ * props (e.g. `display` after `alignSelf`) win identically in both frameworks.
+ */
+export declare function boxClassName(props: BoxStyleProps, styles: ThemeStyles): string;
+/** The Box class name for the active theme. */
+export declare function useBoxClassName(props: BoxStyleProps): string;
+//# sourceMappingURL=box.styles.d.ts.map

package/dist/types/components/layout/box/box.styles.d.ts.map

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

package/dist/types/components/layout/box/index.d.ts

@@ -0,0 +1,3 @@
+export * from './box.component';
+export * from './box.styles';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/layout/box/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/box/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC"}

package/dist/types/components/layout/center/center.component.d.ts

@@ -0,0 +1,7 @@
+import { ElementType } from 'react';
+import { PolymorphicComponent } from '../../../core/polymorphic';
+import { BoxOwnProps, BoxProps } from '../box';
+export type CenterProps<E extends ElementType = 'div'> = BoxProps<E>;
+/** A Box that centers its content on both axes. */
+export declare const Center: PolymorphicComponent<BoxOwnProps>;
+//# sourceMappingURL=center.component.d.ts.map

package/dist/types/components/layout/center/center.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"center.component.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/center/center.component.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAc,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACtE,OAAO,EAAO,KAAK,WAAW,EAAE,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAE9D,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC;AAErE,mDAAmD;AACnD,eAAO,MAAM,MAAM,EAUb,oBAAoB,CAAC,WAAW,CAAC,CAAC"}

package/dist/types/components/layout/center/center.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Center } from './center.component';
+declare const meta: Meta<typeof Center>;
+export default meta;
+type Story = StoryObj<typeof Center>;
+export declare const Primary: Story;
+//# sourceMappingURL=center.stories.d.ts.map

package/dist/types/components/layout/center/center.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"center.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/center/center.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAE5C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAa7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC"}

package/dist/types/components/layout/center/index.d.ts

@@ -0,0 +1,2 @@
+export * from './center.component';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/layout/center/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/center/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}

package/dist/types/components/layout/grid/grid-area/grid-area.component.d.ts

@@ -0,0 +1,11 @@
+import { ElementType } from 'react';
+import { PolymorphicComponent } from '../../../../core/polymorphic';
+import { BoxOwnProps, BoxProps } from '../../box';
+export interface GridAreaOwnProps extends BoxOwnProps {
+    /** The named area of the parent Grid's `templateAreas` this fills. */
+    area: string;
+}
+export type GridAreaProps<E extends ElementType = 'div'> = Omit<BoxProps<E>, keyof GridAreaOwnProps> & GridAreaOwnProps;
+/** Places its content in a named area of the surrounding {@link Grid}. */
+export declare const GridArea: PolymorphicComponent<GridAreaOwnProps>;
+//# sourceMappingURL=grid-area.component.d.ts.map

package/dist/types/components/layout/grid/grid-area/grid-area.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-area.component.d.ts","sourceRoot":"","sources":["../../../../../../src/components/layout/grid/grid-area/grid-area.component.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAc,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACzE,OAAO,EAAO,KAAK,WAAW,EAAE,KAAK,QAAQ,EAAE,MAAM,WAAW,CAAC;AAEjE,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,sEAAsE;IACtE,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,IAAI,CAC7D,QAAQ,CAAC,CAAC,CAAC,EACX,MAAM,gBAAgB,CACvB,GACC,gBAAgB,CAAC;AAEnB,0EAA0E;AAC1E,eAAO,MAAM,QAAQ,EAIf,oBAAoB,CAAC,gBAAgB,CAAC,CAAC"}

package/dist/types/components/layout/grid/grid-area/index.d.ts

@@ -0,0 +1,2 @@
+export * from './grid-area.component';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/layout/grid/grid-area/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/layout/grid/grid-area/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}

package/dist/types/components/layout/grid/grid.component.d.ts

@@ -0,0 +1,24 @@
+import { ElementType } from 'react';
+import { Thickness, Variant } from '@uni-design-system/uni-core';
+import { PolymorphicComponent } from '../../../core/polymorphic';
+import { BoxOwnProps, BoxProps } from '../box';
+export interface GridOwnProps extends BoxOwnProps {
+    /** `grid-template-areas`, e.g. `"'header header' 'nav main'"`. */
+    templateAreas?: string;
+    /** `grid-template-columns`, e.g. `"repeat(3, 1fr)"`. */
+    templateColumns?: string;
+    /** `grid-template-rows`, e.g. `"auto 1fr auto"`. */
+    templateRows?: string;
+    /** Draws grid lines: sets the gap to a theme thickness so the grid's own background shows through. */
+    outline?: Thickness;
+    /** The color those grid lines are drawn in — painted as the grid's background. */
+    outlineColor?: Variant;
+}
+export type GridProps<E extends ElementType = 'div'> = Omit<BoxProps<E>, keyof GridOwnProps> & GridOwnProps;
+/**
+ * A Box laid out as a CSS grid. Beyond the Box props it takes the three
+ * `template*` tracks, plus `outline`/`outlineColor` — a themed gap that reads
+ * as grid rules rather than empty space.
+ */
+export declare const Grid: PolymorphicComponent<GridOwnProps>;
+//# sourceMappingURL=grid.component.d.ts.map

package/dist/types/components/layout/grid/grid.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.component.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/grid/grid.component.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAc,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AAG5D,OAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAGtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACtE,OAAO,EAAO,KAAK,WAAW,EAAE,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAE9D,MAAM,WAAW,YAAa,SAAQ,WAAW;IAC/C,kEAAkE;IAClE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,wDAAwD;IACxD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oDAAoD;IACpD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sGAAsG;IACtG,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,kFAAkF;IAClF,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,MAAM,YAAY,CAAC,GAC1F,YAAY,CAAC;AAEf;;;;GAIG;AACH,eAAO,MAAM,IAAI,EA4BX,oBAAoB,CAAC,YAAY,CAAC,CAAC"}

package/dist/types/components/layout/grid/grid.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Grid } from './grid.component';
+declare const meta: Meta<typeof Grid>;
+export default meta;
+type Story = StoryObj<typeof Grid>;
+export declare const SimpleGrid: Story;
+//# sourceMappingURL=grid.stories.d.ts.map

package/dist/types/components/layout/grid/grid.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/grid/grid.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAqB3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAUnC,eAAO,MAAM,UAAU,EAAE,KAcxB,CAAC"}

package/dist/types/components/layout/grid/index.d.ts

@@ -0,0 +1,3 @@
+export * from './grid.component';
+export * from './grid-area';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/layout/grid/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/grid/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC"}

package/dist/types/components/layout/index.d.ts

@@ -0,0 +1,7 @@
+export * from './box';
+export * from './center';
+export * from './grid';
+export * from './row';
+export * from './stack';
+export * from './wrap';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/layout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC"}

package/dist/types/components/layout/layout.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=layout.spec.d.ts.map

package/dist/types/components/layout/layout.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.spec.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/layout.spec.tsx"],"names":[],"mappings":""}

package/dist/types/components/layout/row/index.d.ts

@@ -0,0 +1,2 @@
+export * from './row.component';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/layout/row/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/row/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/dist/types/components/layout/row/row.component.d.ts

@@ -0,0 +1,13 @@
+import { ElementType } from 'react';
+import { PolymorphicComponent } from '../../../core/polymorphic';
+import { BoxOwnProps, BoxProps } from '../box';
+export type RowProps<E extends ElementType = 'div'> = BoxProps<E>;
+/**
+ * A horizontal Box: `display: flex` in a row.
+ *
+ * `minWidth` defaults to `fit-content` (guards content collapse). Set
+ * `minWidth={0}` when the row must shrink inside a constrained flex parent
+ * (scroll or text-truncation containment).
+ */
+export declare const Row: PolymorphicComponent<BoxOwnProps>;
+//# sourceMappingURL=row.component.d.ts.map

package/dist/types/components/layout/row/row.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"row.component.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/row/row.component.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAc,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACtE,OAAO,EAAO,KAAK,WAAW,EAAE,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAE9D,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC;AAElE;;;;;;GAMG;AACH,eAAO,MAAM,GAAG,EAUV,oBAAoB,CAAC,WAAW,CAAC,CAAC"}

package/dist/types/components/layout/row/row.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Row } from './row.component';
+declare const meta: Meta<typeof Row>;
+export default meta;
+type Story = StoryObj<typeof Row>;
+export declare const ButtonRow: Story;
+//# sourceMappingURL=row.stories.d.ts.map

package/dist/types/components/layout/row/row.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"row.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/row/row.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,EAAE,GAAG,EAAE,MAAM,iBAAiB,CAAC;AAEtC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,CAa1B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,GAAG,CAAC,CAAC;AAElC,eAAO,MAAM,SAAS,EAAE,KASvB,CAAC"}

package/dist/types/components/layout/stack/index.d.ts

@@ -0,0 +1,2 @@
+export * from './stack.component';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/layout/stack/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/stack/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}

package/dist/types/components/layout/stack/stack.component.d.ts

@@ -0,0 +1,13 @@
+import { ElementType } from 'react';
+import { PolymorphicComponent } from '../../../core/polymorphic';
+import { BoxOwnProps, BoxProps } from '../box';
+export type StackProps<E extends ElementType = 'div'> = BoxProps<E>;
+/**
+ * A vertical Box: `display: flex` in a column.
+ *
+ * `minHeight` defaults to `fit-content` (guards content collapse). Set
+ * `minHeight={0}` when the stack must shrink inside a constrained flex parent
+ * (scroll containment).
+ */
+export declare const Stack: PolymorphicComponent<BoxOwnProps>;
+//# sourceMappingURL=stack.component.d.ts.map

package/dist/types/components/layout/stack/stack.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.component.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/stack/stack.component.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAc,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACtE,OAAO,EAAO,KAAK,WAAW,EAAE,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAE9D,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC;AAEpE;;;;;;GAMG;AACH,eAAO,MAAM,KAAK,EAUZ,oBAAoB,CAAC,WAAW,CAAC,CAAC"}

package/dist/types/components/layout/stack/stack.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Stack } from './stack.component';
+declare const meta: Meta<typeof Stack>;
+export default meta;
+type Story = StoryObj<typeof Stack>;
+export declare const StackedCards: Story;
+//# sourceMappingURL=stack.stories.d.ts.map

package/dist/types/components/layout/stack/stack.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/stack/stack.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAa5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAC;AAEpC,eAAO,MAAM,YAAY,EAAE,KAW1B,CAAC"}

package/dist/types/components/layout/wrap/index.d.ts

@@ -0,0 +1,2 @@
+export * from './wrap.component';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/layout/wrap/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/wrap/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

package/dist/types/components/layout/wrap/wrap.component.d.ts

@@ -0,0 +1,7 @@
+import { ElementType } from 'react';
+import { PolymorphicComponent } from '../../../core/polymorphic';
+import { BoxOwnProps, BoxProps } from '../box';
+export type WrapProps<E extends ElementType = 'div'> = BoxProps<E>;
+/** A flex Box whose items wrap onto as many lines as they need. */
+export declare const Wrap: PolymorphicComponent<BoxOwnProps>;
+//# sourceMappingURL=wrap.component.d.ts.map

package/dist/types/components/layout/wrap/wrap.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wrap.component.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/wrap/wrap.component.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAc,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACtE,OAAO,EAAO,KAAK,WAAW,EAAE,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAE9D,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC;AAEnE,mEAAmE;AACnE,eAAO,MAAM,IAAI,EAEX,oBAAoB,CAAC,WAAW,CAAC,CAAC"}

package/dist/types/components/layout/wrap/wrap.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Wrap } from './wrap.component';
+declare const meta: Meta<typeof Wrap>;
+export default meta;
+type Story = StoryObj<typeof Wrap>;
+export declare const Primary: Story;
+//# sourceMappingURL=wrap.stories.d.ts.map

package/dist/types/components/layout/wrap/wrap.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wrap.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/wrap/wrap.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAa3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC"}

package/dist/types/core/index.d.ts

@@ -8,6 +8,7 @@ export * from './image';
 export * from './layout';
 export * from './overlay';
 export * from './padding';
+export * from './polymorphic';
 export * from './shadow';
 export * from './text';
 export * from './theme';

package/dist/types/core/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC"}

package/dist/types/core/polymorphic/index.d.ts

@@ -0,0 +1,2 @@
+export * from './polymorphic.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/core/polymorphic/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/polymorphic/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}

package/dist/types/core/polymorphic/polymorphic.types.d.ts

@@ -0,0 +1,27 @@
+import { ComponentPropsWithRef, ComponentPropsWithoutRef, ElementType, ReactElement } from 'react';
+/**
+ * The `as` prop every layout primitive accepts. Angular applies layout as an
+ * attribute (`<main box-layout>`) so the element's semantics stay the author's;
+ * React's equivalent is `as`: `<Box as="main">`.
+ */
+export type AsProp<E extends ElementType> = {
+    as?: E;
+};
+type PropsToOmit<E extends ElementType, P> = keyof (AsProp<E> & P);
+/** Own props + the rendered element's own props, minus anything we shadow. */
+export type PolymorphicProps<E extends ElementType, P> = P & AsProp<E> & Omit<ComponentPropsWithoutRef<E>, PropsToOmit<E, P>>;
+/** The ref type of whatever element `as` resolves to. */
+export type PolymorphicRef<E extends ElementType> = ComponentPropsWithRef<E>['ref'];
+export type PolymorphicPropsWithRef<E extends ElementType, P> = PolymorphicProps<E, P> & {
+    ref?: PolymorphicRef<E>;
+};
+/**
+ * The callable shape of a polymorphic, ref-forwarding component. `forwardRef`
+ * erases the generic, so components are cast to this after creation.
+ */
+export interface PolymorphicComponent<P, D extends ElementType = 'div'> {
+    <E extends ElementType = D>(props: PolymorphicPropsWithRef<E, P>): ReactElement | null;
+    displayName?: string;
+}
+export {};
+//# sourceMappingURL=polymorphic.types.d.ts.map

package/dist/types/core/polymorphic/polymorphic.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"polymorphic.types.d.ts","sourceRoot":"","sources":["../../../../src/core/polymorphic/polymorphic.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,qBAAqB,EACrB,wBAAwB,EACxB,WAAW,EACX,YAAY,EACb,MAAM,OAAO,CAAC;AAEf;;;;GAIG;AACH,MAAM,MAAM,MAAM,CAAC,CAAC,SAAS,WAAW,IAAI;IAAE,EAAE,CAAC,EAAE,CAAC,CAAA;CAAE,CAAC;AAEvD,KAAK,WAAW,CAAC,CAAC,SAAS,WAAW,EAAE,CAAC,IAAI,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;AAEnE,8EAA8E;AAC9E,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,WAAW,EAAE,CAAC,IAAI,CAAC,GACxD,MAAM,CAAC,CAAC,CAAC,GACT,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAEvD,yDAAyD;AACzD,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,IAAI,qBAAqB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;AAEpF,MAAM,MAAM,uBAAuB,CAAC,CAAC,SAAS,WAAW,EAAE,CAAC,IAAI,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;IACvF,GAAG,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;CACzB,CAAC;AAEF;;;GAGG;AACH,MAAM,WAAW,oBAAoB,CAAC,CAAC,EAAE,CAAC,SAAS,WAAW,GAAG,KAAK;IACpE,CAAC,CAAC,SAAS,WAAW,GAAG,CAAC,EAAE,KAAK,EAAE,uBAAuB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,YAAY,GAAG,IAAI,CAAC;IACvF,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/dist/types/core/theme/index.d.ts

@@ -1,2 +1,3 @@
 export { ThemeProvider, withTheme, useTheme } from './theming';
+export { createThemeStyles, useThemeStyles, type ThemeStyles } from './theme.styles';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/core/theme/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/types/core/theme/theme.styles.d.ts

@@ -0,0 +1,52 @@
+import { Border, ColorKey, ColorToken, ContainerColorToken, NullableSize, NullableStyleExpression, OptionalSize, Radius, Shadow, Thickness, UniTheme, ZIndexableElements } from '@uni-design-system/uni-core';
+/**
+ * Token → CSS resolvers for a single theme. This is the React port of the
+ * Angular `ThemeService` style methods: same names, same arguments, same
+ * output, so a layout primitive written against either framework resolves a
+ * token to identical CSS.
+ *
+ * Every resolver returns `undefined` for a missing token so callers can spread
+ * it unconditionally: `{ ...styles.padding(padding) }`.
+ */
+export declare function createThemeStyles(theme: UniTheme): {
+    theme: UniTheme;
+    colors: Partial<Record<string, string>>;
+    colorPalette: () => Partial<Record<string, string>>;
+    getSpacing: (size: NullableSize) => string | number | undefined;
+    getThickness: (thickness: Thickness) => string | number | undefined;
+    getContentColor: (token: ContainerColorToken, useVariant?: boolean) => string | undefined;
+    /** Background + matching on-color for a container token, as one pair. */
+    colorPair: (token?: ContainerColorToken, colorVariant?: boolean) => NullableStyleExpression;
+    color: (color?: ColorKey) => NullableStyleExpression;
+    backgroundColor: (token?: ColorKey) => NullableStyleExpression;
+    backgroundImage: (url?: string) => NullableStyleExpression;
+    borderColor: (borderColor: ColorToken) => NullableStyleExpression;
+    /** An SVG-drawn dashed outline — CSS `dashed` cannot control dash length. */
+    getDashedBorder: (color?: ColorKey, radius?: Radius) => NullableStyleExpression;
+    radius: (size?: Radius) => NullableStyleExpression;
+    getRadiusLeft: (size?: Radius) => NullableStyleExpression;
+    getRadiusRight: (size?: Radius) => NullableStyleExpression;
+    getRadiusTop: (size?: Radius) => NullableStyleExpression;
+    getRadiusBottom: (size?: Radius) => NullableStyleExpression;
+    padding: (size: OptionalSize) => NullableStyleExpression;
+    horizontalPadding: (size: OptionalSize) => NullableStyleExpression;
+    verticalPadding: (size: OptionalSize) => NullableStyleExpression;
+    paddingLeft: (size: OptionalSize) => NullableStyleExpression;
+    paddingRight: (size: OptionalSize) => NullableStyleExpression;
+    paddingTop: (size: OptionalSize) => NullableStyleExpression;
+    paddingBottom: (size: OptionalSize) => NullableStyleExpression;
+    border: (border?: Border) => NullableStyleExpression;
+    borderTop: (border?: Border) => NullableStyleExpression;
+    borderBottom: (border?: Border) => NullableStyleExpression;
+    borderLeft: (border?: Border) => NullableStyleExpression;
+    borderRight: (border?: Border) => NullableStyleExpression;
+    boxShadow: (shadow?: Shadow) => NullableStyleExpression;
+    gap: (gap: OptionalSize) => NullableStyleExpression;
+    zIndex: (element?: ZIndexableElements) => NullableStyleExpression;
+    /** One property, dropped when the value is absent (or falsy, as in Angular). */
+    style: (prop: string, value?: string | number) => NullableStyleExpression;
+};
+export type ThemeStyles = ReturnType<typeof createThemeStyles>;
+/** The active theme's token → CSS resolvers, recomputed only when the theme changes. */
+export declare function useThemeStyles(): ThemeStyles;
+//# sourceMappingURL=theme.styles.d.ts.map

package/dist/types/core/theme/theme.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.styles.d.ts","sourceRoot":"","sources":["../../../../src/core/theme/theme.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,MAAM,EACX,KAAK,QAAQ,EACb,KAAK,UAAU,EACf,KAAK,mBAAmB,EACxB,KAAK,YAAY,EACjB,KAAK,uBAAuB,EAC5B,KAAK,YAAY,EACjB,KAAK,MAAM,EACX,KAAK,MAAM,EACX,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,kBAAkB,EACxB,MAAM,6BAA6B,CAAC;AAKrC;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,QAAQ;;;;uBAgB1B,YAAY;8BACL,SAAS;6BATL,mBAAmB,eAAe,OAAO;IAavE,yEAAyE;wBACrD,mBAAmB,iBAAiB,OAAO,KAAG,uBAAuB;oBAKzE,QAAQ,KAAG,uBAAuB;8BAGxB,QAAQ,KAAG,uBAAuB;4BAGpC,MAAM,KAAG,uBAAuB;+BAG7B,UAAU,KAAG,uBAAuB;IAI/D,6EAA6E;8BACnD,QAAQ,WAAW,MAAM,KAAG,uBAAuB;oBAa7D,MAAM,KAAG,uBAAuB;2BAGzB,MAAM,KAAG,uBAAuB;4BAG/B,MAAM,KAAG,uBAAuB;0BAKlC,MAAM,KAAG,uBAAuB;6BAG7B,MAAM,KAAG,uBAAuB;oBAKzC,YAAY,KAAG,uBAAuB;8BAG5B,YAAY,KAAG,uBAAuB;4BAGxC,YAAY,KAAG,uBAAuB;wBAG1C,YAAY,KAAG,uBAAuB;yBAGrC,YAAY,KAAG,uBAAuB;uBAGxC,YAAY,KAAG,uBAAuB;0BAGnC,YAAY,KAAG,uBAAuB;sBAG1C,MAAM,KAAG,uBAAuB;yBAG7B,MAAM,KAAG,uBAAuB;4BAG7B,MAAM,KAAG,uBAAuB;0BAGlC,MAAM,KAAG,uBAAuB;2BAG/B,MAAM,KAAG,uBAAuB;yBAGlC,MAAM,KAAG,uBAAuB;eAG1C,YAAY,KAAG,uBAAuB;uBAG9B,kBAAkB,KAAG,uBAAuB;IAG/D,gFAAgF;kBAClE,MAAM,UAAU,MAAM,GAAG,MAAM,KAAG,uBAAuB;EAG1E;AAED,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAE/D,wFAAwF;AACxF,wBAAgB,cAAc,IAAI,WAAW,CAG5C"}

package/dist/types/utils/index.d.ts

@@ -1,2 +1,3 @@
 export * from './storage-manager';
+export * from './number.helper';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC"}

package/dist/types/utils/number.helper.d.ts

@@ -0,0 +1,2 @@
+export declare const safeParseInt: (n: string | number) => number;
+//# sourceMappingURL=number.helper.d.ts.map

package/dist/types/utils/number.helper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number.helper.d.ts","sourceRoot":"","sources":["../../../src/utils/number.helper.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,GAAI,GAAG,MAAM,GAAG,MAAM,WAA8C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uni-design-system/uni-react",
-  "version": "8.3.1",
+  "version": "9.0.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -29,7 +29,8 @@
   ],
   "peerDependencies": {
     "@uni-design-system/uni-core": ">=5.0.0",
-    "react": ">=18"
+    "react": ">=18",
+    "@emotion/css": "^11.0.0"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
@@ -44,6 +45,7 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.2.1",
+    "@emotion/css": "^11.0.0",
     "@eslint/js": "^10.0.1",
     "@storybook/addon-a11y": "^10.4.0",
     "@storybook/addon-docs": "^10.4.0",
@@ -64,12 +66,14 @@
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^4.1.5",
     "@uni-design-system/tsconfig": "0.1.0",
-    "@uni-design-system/uni-core": "8.3.1"
+    "@uni-design-system/uni-core": "9.0.0"
   },
   "scripts": {
     "dev": "vite build --watch",
     "build": "vite build",
     "lint": "eslint src/",
+    "test": "vitest run --project=unit",
+    "test:watch": "vitest --project=unit",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   }