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

package/dist/esm/index.js

@@ -1,7 +1,8 @@
 import * as require$$0 from "react";
 import require$$0__default, { createContext, forwardRef, useState, useMemo, useEffect, useContext, useRef, useLayoutEffect, useId, useInsertionEffect, useCallback, Children, isValidElement, Fragment, createElement, Component, memo as memo$1, useReducer, cloneElement } from "react";
-import { getValue, LightTheme, getDeviceSize, getDeviceOrientation, HSLAToString, ShadowCssMap, FontWeightMap, RoleHues } from "@uni-design-system/uni-core";
+import { getValue, LightTheme, Z_INDEX, getDeviceSize, getDeviceOrientation, HSLAToString, ShadowCssMap, FontWeightMap, RoleHues } from "@uni-design-system/uni-core";
 import { unstable_batchedUpdates, createPortal } from "react-dom";
+import { css, cx as cx$1 } from "@emotion/css";
 var jsxRuntime = { exports: {} };
 var reactJsxRuntime_production_min = {};
 var hasRequiredReactJsxRuntime_production_min;
@@ -6411,6 +6412,105 @@ function withTheme(Component2) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(Component2, { ...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: 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 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();
@@ -19593,6 +19693,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([
+    {
+      ...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 = forwardRef(function Box2({ as, className: className2, children, ...props }, ref) {
+  const Component2 = as || "div";
+  const [styleProps, rest] = splitBoxProps(props);
+  const boxClass = useBoxClassName(styleProps);
+  const element = /* @__PURE__ */ jsxRuntimeExports.jsx(Component2, { ref, className: cx$1(boxClass, className2), ...rest, children });
+  return styleProps.color ? /* @__PURE__ */ jsxRuntimeExports.jsx(ContainerContext.Provider, { value: { colorToken: styleProps.color }, children: element }) : element;
+});
+Box.displayName = "Box";
+const Center = forwardRef(function Center2(props, ref) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Box,
+    {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      ...props,
+      ref
+    }
+  );
+});
+Center.displayName = "Center";
+const Grid = forwardRef(function Grid2(props, ref) {
+  const {
+    templateAreas,
+    templateColumns,
+    templateRows,
+    outline,
+    outlineColor,
+    className: className2,
+    ...boxProps
+  } = props;
+  const styles = useThemeStyles();
+  const gridClass = 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: cx$1(gridClass, className2),
+      ref
+    }
+  );
+});
+Grid.displayName = "Grid";
+const GridArea = forwardRef(function GridArea2(props, ref) {
+  const { area, ...boxProps } = props;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { gridArea: area, ...boxProps, ref });
+});
+GridArea.displayName = "GridArea";
+const Row = forwardRef(function Row2(props, ref) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Box,
+    {
+      display: "flex",
+      flexDirection: "row",
+      minWidth: "fit-content",
+      ...props,
+      ref
+    }
+  );
+});
+Row.displayName = "Row";
+const Stack = forwardRef(function Stack2(props, ref) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Box,
+    {
+      display: "flex",
+      flexDirection: "column",
+      minHeight: "fit-content",
+      ...props,
+      ref
+    }
+  );
+});
+Stack.displayName = "Stack";
+const Wrap = 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,
@@ -19678,47 +19989,17 @@ 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=/`;
-  }
-});
 const IconDictionary = srcExports.IconDictionary;
 const IconKeys = srcExports.IconKeys;
 export {
+  BOX_STYLE_PROP_KEYS,
   Background,
   BorderStyle,
+  Box,
   BoxShadow,
   Button,
   Card,
+  Center,
   Collapse,
   ContainerContext,
   DragHandle,
@@ -19726,6 +20007,8 @@ export {
   Flex,
   FlexHorizontalAlignments,
   FlexVerticalAlignments,
+  Grid,
+  GridArea,
   Icon,
   IconDictionary,
   IconKeys,
@@ -19735,20 +20018,25 @@ export {
   Modal,
   Overlay,
   Padding,
+  Row,
   Slide,
   SortableItem,
   SortableList,
   SortableOverlay,
+  Stack,
   Switch,
   Text,
   TextInput,
   ThemeProvider,
+  Wrap,
   alignBottom,
   alignCenter,
   alignTop,
+  boxClassName,
   column,
   createCookieStorageManager,
   createLocalStorageManager,
+  createThemeStyles,
   expand,
   fadeConfig,
   fix,
@@ -19768,11 +20056,15 @@ export {
   row,
   rowFixedItem,
   rowFlexItem,
+  safeParseInt,
   spaceBetween,
   spaceEvenly,
+  splitBoxProps,
+  useBoxClassName,
   useLayout,
   useMedia,
   useTheme,
+  useThemeStyles,
   useToggle,
   withTheme
 };