@uni-design-system/uni-react 8.3.0 → 8.4.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @uni-design-system/uni-react
 
+## 8.4.0
+
+### Minor Changes
+
+- [`82d1341`](https://github.com/uni-design-system/uni/commit/82d134169997abc2a0f6261e248548e5b3240dcb) Thanks [@gaenglish](https://github.com/gaenglish)! - React layout primitives, at parity with Angular: `Box`, `Stack`, `Row`, `Center`, `Wrap`, `Grid` and `GridArea`. Angular applies layout as an attribute so the element's semantics stay the author's (`<main box-layout>`); React's equivalent is the polymorphic `as` prop — `<Box as="main" padding="md">` — with refs and DOM props forwarded to whatever element it renders.
+
+  Props, defaults and resolution order are ported one-for-one from `UniBoxComponent`, so the same tokens produce the same CSS in both frameworks: token-driven color pairs, padding, radius, border, shadow, gap and z-index; a number is px and a string is a CSS length for every sizing prop; `dashBorder` draws the SVG dashed outline; `ignoreDir` (default on) still flips flex direction under `dir="rtl"`. `Stack` keeps its `minHeight: fit-content` guard and `Row` its `minWidth: fit-content` — set `minHeight={0}` / `minWidth={0}` to shrink inside a constrained flex parent.
+
+  Supporting this: `createThemeStyles`/`useThemeStyles` — the React port of the Angular `ThemeService` token → CSS resolvers, method-for-method — and `@emotion/css` (new peer dependency, matching the Angular package) so pseudo-selectors like `:dir(rtl)` resolve in a real class rather than an inline style. A Box that paints a container color now also provides that token to its descendants, so `Text` inside it picks up the matching on-color.
+
+## 8.3.1
+
 ## 8.3.0
 
 ## 8.2.0

package/README.md

@@ -19,7 +19,7 @@ The official **React** implementation of the Uni Design System. This library fea
 ## 📦 Installation
 
 ```bash
-npm install @uni-design-system/uni-react @uni-design-system/uni-core
+npm install @uni-design-system/uni-react @uni-design-system/uni-core @emotion/css
 ```
 
 ## 🏁 Getting Started
@@ -39,11 +39,35 @@ export const MyComponent = () => {
 };
 ```
 
+## 🧱 Layout
+
+Layout is composed from one primitive. `Box` renders any element you name, so the
+semantics stay yours, and `Stack`, `Row`, `Center`, `Wrap` and `Grid` are the same
+Box with presets. Spacing, radius, border, shadow and color props take theme
+tokens; sizing props take a number (px) or a CSS length string.
+
+```tsx
+import { Grid, GridArea, Row, Stack } from '@uni-design-system/uni-react';
+
+<Stack as="main" gap="lg" padding="lg">
+  <Row gap="md" justifyContent="space-between">
+    <Text role="headline-large">Projects</Text>
+    <Button text="New project" />
+  </Row>
+
+  <Grid templateColumns="repeat(3, 1fr)" gap="md">
+    <GridArea area="summary" color="surface-variant" padding="md" borderRadius="md">
+      <Text>Summary</Text>
+    </GridArea>
+  </Grid>
+</Stack>;
+```
+
 ## 🛠️ Architecture Profile
 
 - **Framework Support:** React `>=18`
 - **Pre-bundled Internals:** Complex third-party layout engines (like `@dnd-kit` and `framer-motion`) are completely compiled _inside_ this package to simplify your build trees.
-- **Peer Dependencies:** React and `@uni-design-system/uni-core` are kept external to maintain minimal, lightweight bundle weights.
+- **Peer Dependencies:** React, `@uni-design-system/uni-core` and `@emotion/css` are kept external to maintain minimal, lightweight bundle weights.
 
 ```
 

package/dist/cjs/index.cjs

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require$$0 = require("react");
 const uniCore = require("@uni-design-system/uni-core");
 const reactDom = require("react-dom");
+const css = require("@emotion/css");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -6429,6 +6430,105 @@ function withTheme(Component) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...props, theme });
   };
 }
+const createLocalStorageManager = (key2) => ({
+  type: "localStorage",
+  get(init) {
+    if (!globalThis?.document) return init;
+    let value;
+    try {
+      value = localStorage.getItem(key2) || init;
+    } catch {
+    }
+    return JSON.parse(value) || init;
+  },
+  set(value) {
+    try {
+      localStorage.setItem(key2, JSON.stringify(value));
+    } catch {
+    }
+  }
+});
+const parseCookie = (cookie, key2) => {
+  const match = cookie.match(new RegExp(`(^| )${key2}=([^;]+)`));
+  return match?.[2];
+};
+const createCookieStorageManager = (key2, cookie) => ({
+  type: "cookie",
+  get(init) {
+    if (cookie) return parseCookie(cookie, key2);
+    if (!globalThis?.document) return init;
+    return parseCookie(document.cookie, key2) || init;
+  },
+  set(value) {
+    document.cookie = `${key2}=${value}; max-age=31536000; path=/`;
+  }
+});
+const safeParseInt = (n) => typeof n === "number" ? n : parseInt(n);
+function createThemeStyles(theme) {
+  const colors = theme.colors;
+  const spacing = theme.spacing;
+  const radii = theme.radii;
+  const borders = theme.borders;
+  const shadows = theme.shadows;
+  const thicknesses = theme.thicknesses;
+  const getContentColor = (token, useVariant) => useVariant ? colors[`on-${token}-variant`] : colors[`on-${token}`];
+  return {
+    theme,
+    colors,
+    colorPalette: () => colors,
+    getSpacing: (size) => size === "none" ? "none" : spacing[size],
+    getThickness: (thickness) => thicknesses[thickness],
+    getContentColor,
+    /** Background + matching on-color for a container token, as one pair. */
+    colorPair: (token, colorVariant) => {
+      if (!token) return void 0;
+      return { color: getContentColor(token, colorVariant), backgroundColor: colors[token] };
+    },
+    color: (color2) => !color2 ? void 0 : { color: colors[color2] },
+    backgroundColor: (token) => !token ? void 0 : { backgroundColor: colors[token] },
+    backgroundImage: (url) => !url ? void 0 : { backgroundImage: `url(${url})` },
+    borderColor: (borderColor) => ({
+      borderColor: colors[borderColor]
+    }),
+    /** An SVG-drawn dashed outline — CSS `dashed` cannot control dash length. */
+    getDashedBorder: (color2, radius) => {
+      if (!color2) return void 0;
+      const r = radius && radii[radius];
+      const borderRadius = r ? safeParseInt(r) : 0;
+      const strokeColor = colors[color2]?.replace("#", "%23");
+      return {
+        backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='${borderRadius}' ry='${borderRadius}' stroke='${strokeColor}' stroke-width='4' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e")`,
+        borderRadius
+      };
+    },
+    radius: (size) => !size ? void 0 : { borderRadius: radii[size] },
+    getRadiusLeft: (size) => !size ? void 0 : { borderBottomLeftRadius: radii[size], borderTopLeftRadius: radii[size] },
+    getRadiusRight: (size) => !size ? void 0 : { borderBottomRightRadius: radii[size], borderTopRightRadius: radii[size] },
+    getRadiusTop: (size) => !size ? void 0 : { borderTopLeftRadius: radii[size], borderTopRightRadius: radii[size] },
+    getRadiusBottom: (size) => !size ? void 0 : { borderBottomLeftRadius: radii[size], borderBottomRightRadius: radii[size] },
+    padding: (size) => !size ? void 0 : { padding: spacing[size] },
+    horizontalPadding: (size) => !size ? void 0 : { paddingInline: spacing[size] },
+    verticalPadding: (size) => !size ? void 0 : { paddingBlock: spacing[size] },
+    paddingLeft: (size) => !size ? void 0 : { paddingLeft: spacing[size] },
+    paddingRight: (size) => !size ? void 0 : { paddingRight: spacing[size] },
+    paddingTop: (size) => !size ? void 0 : { paddingTop: spacing[size] },
+    paddingBottom: (size) => !size ? void 0 : { paddingBottom: spacing[size] },
+    border: (border) => !border ? void 0 : { border: borders[border] },
+    borderTop: (border) => !border ? void 0 : { borderTop: borders[border] },
+    borderBottom: (border) => !border ? void 0 : { borderBottom: borders[border] },
+    borderLeft: (border) => !border ? void 0 : { borderLeft: borders[border] },
+    borderRight: (border) => !border ? void 0 : { borderRight: borders[border] },
+    boxShadow: (shadow) => !shadow ? void 0 : { boxShadow: shadows[shadow] },
+    gap: (gap) => !gap || gap === "none" ? void 0 : { gap: spacing[gap] },
+    zIndex: (element) => !element ? void 0 : { zIndex: uniCore.Z_INDEX[element] },
+    /** One property, dropped when the value is absent (or falsy, as in Angular). */
+    style: (prop, value) => !value ? void 0 : { [prop]: value }
+  };
+}
+function useThemeStyles() {
+  const theme = useTheme();
+  return require$$0.useMemo(() => createThemeStyles(theme), [theme]);
+}
 function Icon({ name, color: color2 = "on-surface", height = 24, width = 24 }) {
   if (!name) return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
   const { colors } = useTheme();
@@ -19611,6 +19711,217 @@ const SortableList = ({
 const TextInput = ({ value, onChange }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("input", { type: "text", value, onChange }) });
 };
+const BOX_STYLE_PROP_KEYS = [
+  "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",
+  "elevation",
+  "shadow",
+  "gap",
+  "fullWidth",
+  "fullHeight",
+  "flexDirection",
+  "textAlign",
+  "wrapItems",
+  "zIndex"
+];
+const STYLE_PROP_SET = new Set(BOX_STYLE_PROP_KEYS);
+function splitBoxProps(props) {
+  const styleProps = {};
+  const rest = {};
+  for (const key2 of Object.keys(props)) {
+    const target = STYLE_PROP_SET.has(key2) ? styleProps : rest;
+    target[key2] = props[key2];
+  }
+  return [styleProps, rest];
+}
+function boxClassName(props, styles) {
+  const { border, dashBorder = false, ignoreDir = true, flexDirection } = props;
+  return css.css([
+    {
+      ...styles.colorPair(props.color),
+      ...styles.backgroundColor(props.backgroundColor),
+      display: props.alignSelf ? "flex" : "block",
+      position: props.position,
+      inset: props.inset,
+      boxSizing: "border-box",
+      height: props.height,
+      minHeight: props.minHeight,
+      maxHeight: props.maxHeight,
+      width: props.width,
+      minWidth: props.minWidth,
+      maxWidth: props.maxWidth,
+      flexWrap: props.wrapItems,
+      overflow: props.overflow,
+      ...styles.padding(props.padding),
+      ...styles.horizontalPadding(props.paddingHorizontal),
+      ...styles.verticalPadding(props.paddingVertical),
+      ...styles.paddingLeft(props.paddingLeft),
+      ...styles.paddingRight(props.paddingRight),
+      ...styles.paddingTop(props.paddingTop),
+      ...styles.paddingBottom(props.paddingBottom),
+      ...styles.boxShadow(props.elevation),
+      ...styles.boxShadow(props.shadow),
+      ...styles.radius(props.borderRadius),
+      ...styles.getRadiusLeft(props.borderRadiusLeft),
+      ...styles.getRadiusRight(props.borderRadiusRight),
+      ...styles.getRadiusTop(props.borderRadiusTop),
+      ...styles.getRadiusBottom(props.borderRadiusBottom),
+      ...styles.borderTop(props.borderTop),
+      ...styles.borderBottom(props.borderBottom),
+      ...styles.borderLeft(props.borderLeft),
+      ...styles.borderRight(props.borderRight),
+      ...styles.gap(props.gap),
+      ...styles.style("display", props.display),
+      ...styles.style("alignSelf", props.alignSelf),
+      ...styles.style("alignItems", props.alignItems),
+      ...styles.style("justifyContent", props.justifyContent),
+      ...styles.style("alignContent", props.alignContent),
+      ...styles.style("flexGrow", props.grow),
+      ...styles.style("flexDirection", props.flexDirection),
+      ...styles.style("gridArea", props.gridArea),
+      ...styles.style("gridColumn", props.gridColumn),
+      ...styles.style("gridRow", props.gridRow),
+      ...styles.style("textAlign", props.textAlign),
+      ...styles.zIndex(props.zIndex)
+    },
+    border && !dashBorder && { ...styles.border(border) },
+    border && dashBorder && { ...styles.getDashedBorder(border, props.borderRadius) },
+    props.fullWidth && { width: "100%" },
+    props.fullHeight && { height: "100%" },
+    ignoreDir && (flexDirection ?? "row") === "row" && {
+      "&:dir(rtl)": { flexDirection: "row-reverse" }
+    },
+    ignoreDir && (flexDirection ?? "row") === "row-reverse" && {
+      "&:dir(rtl)": { flexDirection: "row" }
+    }
+  ]);
+}
+function useBoxClassName(props) {
+  const styles = useThemeStyles();
+  return boxClassName(props, styles);
+}
+const Box = require$$0.forwardRef(function Box2({ as, className: className2, children, ...props }, ref) {
+  const Component = as || "div";
+  const [styleProps, rest] = splitBoxProps(props);
+  const boxClass = useBoxClassName(styleProps);
+  const element = /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ref, className: css.cx(boxClass, className2), ...rest, children });
+  return styleProps.color ? /* @__PURE__ */ jsxRuntimeExports.jsx(ContainerContext.Provider, { value: { colorToken: styleProps.color }, children: element }) : element;
+});
+Box.displayName = "Box";
+const Center = require$$0.forwardRef(function Center2(props, ref) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Box,
+    {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      ...props,
+      ref
+    }
+  );
+});
+Center.displayName = "Center";
+const Grid = require$$0.forwardRef(function Grid2(props, ref) {
+  const {
+    templateAreas,
+    templateColumns,
+    templateRows,
+    outline,
+    outlineColor,
+    className: className2,
+    ...boxProps
+  } = props;
+  const styles = useThemeStyles();
+  const gridClass = css.css([
+    templateAreas && { gridTemplateAreas: templateAreas },
+    templateColumns && { gridTemplateColumns: templateColumns },
+    templateRows && { gridTemplateRows: templateRows },
+    outline && { gap: styles.getThickness(outline) },
+    outlineColor && { backgroundColor: styles.colorPalette()[outlineColor] }
+  ]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Box,
+    {
+      display: "grid",
+      ...boxProps,
+      className: css.cx(gridClass, className2),
+      ref
+    }
+  );
+});
+Grid.displayName = "Grid";
+const GridArea = require$$0.forwardRef(function GridArea2(props, ref) {
+  const { area, ...boxProps } = props;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { gridArea: area, ...boxProps, ref });
+});
+GridArea.displayName = "GridArea";
+const Row = require$$0.forwardRef(function Row2(props, ref) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Box,
+    {
+      display: "flex",
+      flexDirection: "row",
+      minWidth: "fit-content",
+      ...props,
+      ref
+    }
+  );
+});
+Row.displayName = "Row";
+const Stack = require$$0.forwardRef(function Stack2(props, ref) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Box,
+    {
+      display: "flex",
+      flexDirection: "column",
+      minHeight: "fit-content",
+      ...props,
+      ref
+    }
+  );
+});
+Stack.displayName = "Stack";
+const Wrap = require$$0.forwardRef(function Wrap2(props, ref) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { display: "flex", wrapItems: "wrap", ...props, ref });
+});
+Wrap.displayName = "Wrap";
 const ModalSizes = {
   sm: 260,
   md: 320,
@@ -19696,44 +20007,14 @@ const Switch = ({ size = "sm", on = false, onChange }) => {
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: switchStyle, className: "switch", "data-isOn": isOn, onClick: toggleSwitch, children: /* @__PURE__ */ jsxRuntimeExports.jsx(motion.div, { style: handleStyle, className: "handle", layout: true, transition: spring2 }) });
 };
-const createLocalStorageManager = (key2) => ({
-  type: "localStorage",
-  get(init) {
-    if (!globalThis?.document) return init;
-    let value;
-    try {
-      value = localStorage.getItem(key2) || init;
-    } catch {
-    }
-    return JSON.parse(value) || init;
-  },
-  set(value) {
-    try {
-      localStorage.setItem(key2, JSON.stringify(value));
-    } catch {
-    }
-  }
-});
-const parseCookie = (cookie, key2) => {
-  const match = cookie.match(new RegExp(`(^| )${key2}=([^;]+)`));
-  return match?.[2];
-};
-const createCookieStorageManager = (key2, cookie) => ({
-  type: "cookie",
-  get(init) {
-    if (cookie) return parseCookie(cookie, key2);
-    if (!globalThis?.document) return init;
-    return parseCookie(document.cookie, key2) || init;
-  },
-  set(value) {
-    document.cookie = `${key2}=${value}; max-age=31536000; path=/`;
-  }
-});
+exports.BOX_STYLE_PROP_KEYS = BOX_STYLE_PROP_KEYS;
 exports.Background = Background;
 exports.BorderStyle = BorderStyle;
+exports.Box = Box;
 exports.BoxShadow = BoxShadow;
 exports.Button = Button;
 exports.Card = Card;
+exports.Center = Center;
 exports.Collapse = Collapse;
 exports.ContainerContext = ContainerContext;
 exports.DragHandle = DragHandle;
@@ -19741,6 +20022,8 @@ exports.Fade = Fade;
 exports.Flex = Flex;
 exports.FlexHorizontalAlignments = FlexHorizontalAlignments;
 exports.FlexVerticalAlignments = FlexVerticalAlignments;
+exports.Grid = Grid;
+exports.GridArea = GridArea;
 exports.Icon = Icon;
 exports.IconDictionary = srcExports.IconDictionary;
 exports.IconKeys = srcExports.IconKeys;
@@ -19750,20 +20033,25 @@ exports.LayoutProvider = LayoutProvider;
 exports.Modal = Modal;
 exports.Overlay = Overlay;
 exports.Padding = Padding;
+exports.Row = Row;
 exports.Slide = Slide;
 exports.SortableItem = SortableItem;
 exports.SortableList = SortableList;
 exports.SortableOverlay = SortableOverlay;
+exports.Stack = Stack;
 exports.Switch = Switch;
 exports.Text = Text;
 exports.TextInput = TextInput;
 exports.ThemeProvider = ThemeProvider;
+exports.Wrap = Wrap;
 exports.alignBottom = alignBottom;
 exports.alignCenter = alignCenter;
 exports.alignTop = alignTop;
+exports.boxClassName = boxClassName;
 exports.column = column;
 exports.createCookieStorageManager = createCookieStorageManager;
 exports.createLocalStorageManager = createLocalStorageManager;
+exports.createThemeStyles = createThemeStyles;
 exports.expand = expand;
 exports.fadeConfig = fadeConfig;
 exports.fix = fix;
@@ -19783,11 +20071,15 @@ exports.justifyRight = justifyRight;
 exports.row = row;
 exports.rowFixedItem = rowFixedItem;
 exports.rowFlexItem = rowFlexItem;
+exports.safeParseInt = safeParseInt;
 exports.spaceBetween = spaceBetween;
 exports.spaceEvenly = spaceEvenly;
+exports.splitBoxProps = splitBoxProps;
+exports.useBoxClassName = useBoxClassName;
 exports.useLayout = useLayout;
 exports.useMedia = useMedia;
 exports.useTheme = useTheme;
+exports.useThemeStyles = useThemeStyles;
 exports.useToggle = useToggle;
 exports.withTheme = withTheme;
 //# sourceMappingURL=index.cjs.map