@umami/react-zen 0.19.0 → 0.21.0

package/dist/index.js

@@ -26223,6 +26223,48 @@ var global_default = {
   "shadow-4": "global_shadow-4",
   "shadow-5": "global_shadow-5",
   "shadow-6": "global_shadow-6",
+  "font-color-50": "global_font-color-50",
+  "font-color-100": "global_font-color-100",
+  "font-color-200": "global_font-color-200",
+  "font-color-300": "global_font-color-300",
+  "font-color-400": "global_font-color-400",
+  "font-color-500": "global_font-color-500",
+  "font-color-600": "global_font-color-600",
+  "font-color-700": "global_font-color-700",
+  "font-color-800": "global_font-color-800",
+  "font-color-900": "global_font-color-900",
+  "font-color-950": "global_font-color-950",
+  "font-color-gray": "global_font-color-gray",
+  "font-color-mauve": "global_font-color-mauve",
+  "font-color-slate": "global_font-color-slate",
+  "font-color-sage": "global_font-color-sage",
+  "font-color-olive": "global_font-color-olive",
+  "font-color-sand": "global_font-color-sand",
+  "font-color-gold": "global_font-color-gold",
+  "font-color-bronze": "global_font-color-bronze",
+  "font-color-brown": "global_font-color-brown",
+  "font-color-yellow": "global_font-color-yellow",
+  "font-color-amber": "global_font-color-amber",
+  "font-color-orange": "global_font-color-orange",
+  "font-color-tomato": "global_font-color-tomato",
+  "font-color-red": "global_font-color-red",
+  "font-color-ruby": "global_font-color-ruby",
+  "font-color-crimson": "global_font-color-crimson",
+  "font-color-pink": "global_font-color-pink",
+  "font-color-plum": "global_font-color-plum",
+  "font-color-purple": "global_font-color-purple",
+  "font-color-violet": "global_font-color-violet",
+  "font-color-iris": "global_font-color-iris",
+  "font-color-indigo": "global_font-color-indigo",
+  "font-color-blue": "global_font-color-blue",
+  "font-color-cyan": "global_font-color-cyan",
+  "font-color-teal": "global_font-color-teal",
+  "font-color-jade": "global_font-color-jade",
+  "font-color-green": "global_font-color-green",
+  "font-color-grass": "global_font-color-grass",
+  "font-color-lime": "global_font-color-lime",
+  "font-color-mint": "global_font-color-mint",
+  "font-color-sky": "global_font-color-sky",
   "background-color-50": "global_background-color-50",
   "background-color-100": "global_background-color-100",
   "background-color-200": "global_background-color-200",
@@ -26234,6 +26276,37 @@ var global_default = {
   "background-color-800": "global_background-color-800",
   "background-color-900": "global_background-color-900",
   "background-color-950": "global_background-color-950",
+  "background-color-gray": "global_background-color-gray",
+  "background-color-mauve": "global_background-color-mauve",
+  "background-color-slate": "global_background-color-slate",
+  "background-color-sage": "global_background-color-sage",
+  "background-color-olive": "global_background-color-olive",
+  "background-color-sand": "global_background-color-sand",
+  "background-color-gold": "global_background-color-gold",
+  "background-color-bronze": "global_background-color-bronze",
+  "background-color-brown": "global_background-color-brown",
+  "background-color-yellow": "global_background-color-yellow",
+  "background-color-amber": "global_background-color-amber",
+  "background-color-orange": "global_background-color-orange",
+  "background-color-tomato": "global_background-color-tomato",
+  "background-color-red": "global_background-color-red",
+  "background-color-ruby": "global_background-color-ruby",
+  "background-color-crimson": "global_background-color-crimson",
+  "background-color-pink": "global_background-color-pink",
+  "background-color-plum": "global_background-color-plum",
+  "background-color-purple": "global_background-color-purple",
+  "background-color-violet": "global_background-color-violet",
+  "background-color-iris": "global_background-color-iris",
+  "background-color-indigo": "global_background-color-indigo",
+  "background-color-blue": "global_background-color-blue",
+  "background-color-cyan": "global_background-color-cyan",
+  "background-color-teal": "global_background-color-teal",
+  "background-color-jade": "global_background-color-jade",
+  "background-color-green": "global_background-color-green",
+  "background-color-grass": "global_background-color-grass",
+  "background-color-lime": "global_background-color-lime",
+  "background-color-mint": "global_background-color-mint",
+  "background-color-sky": "global_background-color-sky",
   "text-align-left": "global_text-align-left",
   "text-align-center": "global_text-align-center",
   "text-align-right": "global_text-align-right",
@@ -26242,10 +26315,11 @@ var global_default = {
   "text-wrap-balance": "global_text-wrap-balance",
   "text-wrap-pretty": "global_text-wrap-pretty",
   "text-wrap-stable": "global_text-wrap-stable",
-  "letter-spacing-tighter": "global_letter-spacing-tighter",
-  "letter-spacing-tight": "global_letter-spacing-tight",
-  "letter-spacing-wide": "global_letter-spacing-wide",
-  "letter-spacing-wider": "global_letter-spacing-wider",
+  "letter-spacing-1": "global_letter-spacing-1",
+  "letter-spacing-2": "global_letter-spacing-2",
+  "letter-spacing-3": "global_letter-spacing-3",
+  "letter-spacing-4": "global_letter-spacing-4",
+  "letter-spacing-5": "global_letter-spacing-5",
   "padding-1": "global_padding-1",
   "padding-2": "global_padding-2",
   "padding-3": "global_padding-3",
@@ -26454,7 +26528,7 @@ var global_default = {
   "flex-direction-row-reverse": "global_flex-direction-row-reverse",
   "flex-direction-column": "global_flex-direction-column",
   "flex-direction-column-reverse": "global_flex-direction-column-reverse",
-  "flex-wrap": "global_flex-wrap",
+  "flex-wrap-wrap": "global_flex-wrap-wrap",
   "flex-wrap-nowrap": "global_flex-wrap-nowrap",
   "flex-wrap-wrap-reverse": "global_flex-wrap-wrap-reverse",
   "justify-content-center": "global_justify-content-center",
@@ -26468,8 +26542,6 @@ var global_default = {
   "justify-content-space-around": "global_justify-content-space-around",
   "justify-content-space-evenly": "global_justify-content-space-evenly",
   "justify-content-stretch": "global_justify-content-stretch",
-  "justify-content-safe-center": "global_justify-content-safe-center",
-  "justify-content-unsafe-center": "global_justify-content-unsafe-center",
   "justify-items-stretch": "global_justify-items-stretch",
   "justify-items-center": "global_justify-items-center",
   "justify-items-start": "global_justify-items-start",
@@ -26481,24 +26553,16 @@ var global_default = {
   "justify-items-left": "global_justify-items-left",
   "justify-items-right": "global_justify-items-right",
   "justify-items-baseline": "global_justify-items-baseline",
-  "justify-items-first-baseline": "global_justify-items-first-baseline",
-  "justify-items-last-baseline": "global_justify-items-last-baseline",
-  "justify-items-safe-center": "global_justify-items-safe-center",
-  "justify-items-unsafe-center": "global_justify-items-unsafe-center",
   "align-content-center": "global_align-content-center",
   "align-content-start": "global_align-content-start",
   "align-content-end": "global_align-content-end",
   "align-content-flex-start": "global_align-content-flex-start",
   "align-content-flex-end": "global_align-content-flex-end",
   "align-content-baseline": "global_align-content-baseline",
-  "align-content-first-baseline": "global_align-content-first-baseline",
-  "align-content-last-baseline": "global_align-content-last-baseline",
   "align-content-space-between": "global_align-content-space-between",
   "align-content-space-around": "global_align-content-space-around",
   "align-content-space-evenly": "global_align-content-space-evenly",
   "align-content-stretch": "global_align-content-stretch",
-  "align-content-safe-center": "global_align-content-safe-center",
-  "align-content-unsafe-center": "global_align-content-unsafe-center",
   "align-items-center": "global_align-items-center",
   "align-items-start": "global_align-items-start",
   "align-items-end": "global_align-items-end",
@@ -26508,10 +26572,6 @@ var global_default = {
   "align-items-self-end": "global_align-items-self-end",
   "align-items-stretch": "global_align-items-stretch",
   "align-items-baseline": "global_align-items-baseline",
-  "align-items-first-baseline": "global_align-items-first-baseline",
-  "align-items-last-baseline": "global_align-items-last-baseline",
-  "align-items-safe-center": "global_align-items-safe-center",
-  "align-items-unsafe-center": "global_align-items-unsafe-center",
   "align-self-center": "global_align-self-center",
   "align-self-start": "global_align-self-start",
   "align-self-end": "global_align-self-end",
@@ -26520,15 +26580,33 @@ var global_default = {
   "align-self-flex-start": "global_align-self-flex-start",
   "align-self-flex-end": "global_align-self-flex-end",
   "align-self-baseline": "global_align-self-baseline",
-  "align-self-first-baseline": "global_align-self-first-baseline",
-  "align-self-last-baseline": "global_align-self-last-baseline",
   "align-self-stretch": "global_align-self-stretch",
-  "align-self-safe-center": "global_align-self-safe-center",
-  "align-self-unsafe-center": "global_align-self-unsafe-center",
+  "justify-self-center": "global_justify-self-center",
+  "justify-self-start": "global_justify-self-start",
+  "justify-self-end": "global_justify-self-end",
+  "justify-self-self-start": "global_justify-self-self-start",
+  "justify-self-self-end": "global_justify-self-self-end",
+  "justify-self-baseline": "global_justify-self-baseline",
+  "justify-self-stretch": "global_justify-self-stretch",
   "grid-auto-flow-row": "global_grid-auto-flow-row",
   "grid-auto-flow-column": "global_grid-auto-flow-column",
   "grid-auto-flow-row-dense": "global_grid-auto-flow-row-dense",
   "grid-auto-flow-column-dense": "global_grid-auto-flow-column-dense",
+  "overflow-visible": "global_overflow-visible",
+  "overflow-hidden": "global_overflow-hidden",
+  "overflow-clip": "global_overflow-clip",
+  "overflow-scroll": "global_overflow-scroll",
+  "overflow-auto": "global_overflow-auto",
+  "overflow-x-visible": "global_overflow-x-visible",
+  "overflow-x-hidden": "global_overflow-x-hidden",
+  "overflow-x-clip": "global_overflow-x-clip",
+  "overflow-x-scroll": "global_overflow-x-scroll",
+  "overflow-x-auto": "global_overflow-x-auto",
+  "overflow-y-visible": "global_overflow-y-visible",
+  "overflow-y-hidden": "global_overflow-y-hidden",
+  "overflow-y-clip": "global_overflow-y-clip",
+  "overflow-y-scroll": "global_overflow-y-scroll",
+  "overflow-y-auto": "global_overflow-y-auto",
   "display-xs": "global_display-xs",
   "position-xs": "global_position-xs",
   "font-size-xs": "global_font-size-xs",
@@ -26565,6 +26643,7 @@ var global_default = {
   "flex-wrap-xs": "global_flex-wrap-xs",
   "justify-content-xs": "global_justify-content-xs",
   "justify-items-xs": "global_justify-items-xs",
+  "justify-self-xs": "global_justify-self-xs",
   "align-content-xs": "global_align-content-xs",
   "align-items-xs": "global_align-items-xs",
   "align-self-xs": "global_align-self-xs",
@@ -26573,6 +26652,10 @@ var global_default = {
   "flex-basis-xs": "global_flex-basis-xs",
   "flex-grow-xs": "global_flex-grow-xs",
   "flex-shrink-xs": "global_flex-shrink-xs",
+  "overflow-xs": "global_overflow-xs",
+  "overflow-x-xs": "global_overflow-x-xs",
+  "overflow-y-xs": "global_overflow-y-xs",
+  "order-xs": "global_order-xs",
   "display-sm": "global_display-sm",
   "position-sm": "global_position-sm",
   "font-size-sm": "global_font-size-sm",
@@ -26609,6 +26692,7 @@ var global_default = {
   "flex-wrap-sm": "global_flex-wrap-sm",
   "justify-content-sm": "global_justify-content-sm",
   "justify-items-sm": "global_justify-items-sm",
+  "justify-self-sm": "global_justify-self-sm",
   "align-content-sm": "global_align-content-sm",
   "align-items-sm": "global_align-items-sm",
   "align-self-sm": "global_align-self-sm",
@@ -26617,6 +26701,10 @@ var global_default = {
   "flex-basis-sm": "global_flex-basis-sm",
   "flex-grow-sm": "global_flex-grow-sm",
   "flex-shrink-sm": "global_flex-shrink-sm",
+  "overflow-sm": "global_overflow-sm",
+  "overflow-x-sm": "global_overflow-x-sm",
+  "overflow-y-sm": "global_overflow-y-sm",
+  "order-sm": "global_order-sm",
   "display-md": "global_display-md",
   "position-md": "global_position-md",
   "font-size-md": "global_font-size-md",
@@ -26653,6 +26741,7 @@ var global_default = {
   "flex-wrap-md": "global_flex-wrap-md",
   "justify-content-md": "global_justify-content-md",
   "justify-items-md": "global_justify-items-md",
+  "justify-self-md": "global_justify-self-md",
   "align-content-md": "global_align-content-md",
   "align-items-md": "global_align-items-md",
   "align-self-md": "global_align-self-md",
@@ -26661,6 +26750,10 @@ var global_default = {
   "flex-basis-md": "global_flex-basis-md",
   "flex-grow-md": "global_flex-grow-md",
   "flex-shrink-md": "global_flex-shrink-md",
+  "overflow-md": "global_overflow-md",
+  "overflow-x-md": "global_overflow-x-md",
+  "overflow-y-md": "global_overflow-y-md",
+  "order-md": "global_order-md",
   "display-lg": "global_display-lg",
   "position-lg": "global_position-lg",
   "font-size-lg": "global_font-size-lg",
@@ -26697,6 +26790,7 @@ var global_default = {
   "flex-wrap-lg": "global_flex-wrap-lg",
   "justify-content-lg": "global_justify-content-lg",
   "justify-items-lg": "global_justify-items-lg",
+  "justify-self-lg": "global_justify-self-lg",
   "align-content-lg": "global_align-content-lg",
   "align-items-lg": "global_align-items-lg",
   "align-self-lg": "global_align-self-lg",
@@ -26705,6 +26799,10 @@ var global_default = {
   "flex-basis-lg": "global_flex-basis-lg",
   "flex-grow-lg": "global_flex-grow-lg",
   "flex-shrink-lg": "global_flex-shrink-lg",
+  "overflow-lg": "global_overflow-lg",
+  "overflow-x-lg": "global_overflow-x-lg",
+  "overflow-y-lg": "global_overflow-y-lg",
+  "order-lg": "global_order-lg",
   "display-xl": "global_display-xl",
   "position-xl": "global_position-xl",
   "font-size-xl": "global_font-size-xl",
@@ -26741,6 +26839,7 @@ var global_default = {
   "flex-wrap-xl": "global_flex-wrap-xl",
   "justify-content-xl": "global_justify-content-xl",
   "justify-items-xl": "global_justify-items-xl",
+  "justify-self-xl": "global_justify-self-xl",
   "align-content-xl": "global_align-content-xl",
   "align-items-xl": "global_align-items-xl",
   "align-self-xl": "global_align-self-xl",
@@ -26748,10 +26847,14 @@ var global_default = {
   "grid-template-columns-xl": "global_grid-template-columns-xl",
   "flex-basis-xl": "global_flex-basis-xl",
   "flex-grow-xl": "global_flex-grow-xl",
-  "flex-shrink-xl": "global_flex-shrink-xl"
+  "flex-shrink-xl": "global_flex-shrink-xl",
+  "overflow-xl": "global_overflow-xl",
+  "overflow-x-xl": "global_overflow-x-xl",
+  "overflow-y-xl": "global_overflow-y-xl",
+  "order-xl": "global_order-xl"
 };
 
-// src/lib/utils.ts
+// src/components/hooks/useDesignProps.ts
 var CSS_MAP = {
   display: "display",
   position: "position",
@@ -26760,6 +26863,7 @@ var CSS_MAP = {
   textAlign: "text-align",
   textWrap: "text-wrap",
   letterSpacing: "letter-spacing",
+  color: "font-color",
   backgroundColor: "background-color",
   borderSize: "border-size",
   borderRadius: "border-radius",
@@ -26794,17 +26898,23 @@ var CSS_MAP = {
   alignContent: "align-content",
   alignItems: "align-items",
   alignSelf: "align-self",
-  gridAutoRows: "grid-auto-rows",
-  gridTemplateRows: "grid-template-rows",
-  gridTemplateColumns: "grid-template-columns",
-  gridAutoFlow: "grid-auto-flow",
   flexBasis: "flex-basis",
   flexGrow: "flex-grow",
   flexShrink: "flex-shrink",
+  gridTemplateRows: "grid-template-rows",
+  gridTemplateColumns: "grid-template-columns",
+  gridTemplateAreas: "grid-template-areas",
+  gridAutoRows: "grid-auto-rows",
+  gridAutoColumns: "grid-auto-columns",
+  gridAutoFlow: "grid-auto-flow",
+  gridArea: "grid-area",
+  gridRow: "grid-row",
+  gridColumn: "grid-column",
   top: "top",
   right: "right",
   bottom: "bottom",
-  left: "left"
+  left: "left",
+  order: "order"
 };
 var excludedProps = [
   "width",
@@ -26815,11 +26925,27 @@ var excludedProps = [
   "maxHeight",
   "gridTemplateRows",
   "gridTemplateColumns",
+  "gridTemplateAreas",
+  "gridAutoRows",
+  "gridAutoColumns",
+  "gridArea",
+  "gridRow",
+  "gridColumn",
   "flexBasis",
   "flexGrow",
-  "flexShrink"
+  "flexShrink",
+  "gridArea",
+  "gridRow",
+  "gridColumn",
+  "order"
 ];
-function mapProps(props) {
+function parseValue(value, name) {
+  if (/^\d+$/.test(value)) {
+    return `var(--${name}-${value})`;
+  }
+  return value;
+}
+function useDesignProps(props) {
   const classes = [];
   const styleProps = {};
   Object.keys(props).forEach((key) => {
@@ -26847,18 +26973,13 @@ function mapProps(props) {
   });
   return [classes, styleProps];
 }
-function parseValue(value, name) {
-  if (/^\d+$/.test(value)) {
-    return `var(--${name}-${value})`;
-  }
-  return value;
-}
 
 // src/components/Box.tsx
 var import_classnames3 = __toESM(require_classnames());
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function Box({
   display,
+  color,
   backgroundColor,
   borderSize,
   borderRadius,
@@ -26885,13 +27006,17 @@ function Box({
   maxHeight,
   position,
   align,
-  basis,
-  grow,
-  shrink,
   top,
   right,
   bottom,
   left,
+  flexBasis,
+  flexGrow,
+  flexShrink,
+  gridArea,
+  gridRow,
+  gridColumn,
+  order,
   as = "div",
   asChild,
   className,
@@ -26900,8 +27025,9 @@ function Box({
   ...props
 }) {
   const Component = asChild ? Slot : as;
-  const [classes, styleProps] = mapProps({
+  const [classes, styleProps] = useDesignProps({
     display,
+    color,
     backgroundColor,
     borderSize,
     borderRadius,
@@ -26928,13 +27054,17 @@ function Box({
     maxHeight,
     position,
     textAlign: align,
-    flexBasis: basis,
-    flexGrow: grow,
-    flexShrink: shrink,
     top,
     right,
     bottom,
-    left
+    left,
+    flexBasis,
+    flexGrow,
+    flexShrink,
+    gridArea,
+    gridRow,
+    gridColumn,
+    order
   });
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     Component,
@@ -26968,7 +27098,7 @@ function Flexbox({
   children,
   ...props
 }) {
-  const [classes, styleProps] = mapProps({
+  const [classes, styleProps] = useDesignProps({
     display,
     flexDirection: direction,
     flexWrap: wrap,
@@ -27002,26 +27132,28 @@ var Text_default = {
 // src/components/Text.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function Text({
-  as = "span",
-  asChild,
   type,
   size,
-  letterSpacing,
+  spacing,
   weight,
   align,
   wrap,
+  color,
+  as = "span",
+  asChild,
   className,
   style,
   children,
   ...props
 }) {
   const Component = asChild ? Slot : as;
-  const [classes, styleProps] = mapProps({
+  const [classes, styleProps] = useDesignProps({
     fontSize: size,
     textAlign: align,
     textWrap: wrap,
     fontWeight: weight,
-    letterSpacing
+    letterSpacing: spacing,
+    color
   });
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     Component,
@@ -28024,12 +28156,13 @@ function Grid({
   autoFlow,
   rows,
   columns,
+  areas,
   className,
   style,
   children,
   ...props
 }) {
-  const [classes, styleProps] = mapProps({
+  const [classes, styleProps] = useDesignProps({
     display,
     justifyContent,
     justifyItems,
@@ -28040,6 +28173,7 @@ function Grid({
     gapY,
     gridTemplateRows: rows,
     gridTemplateColumns: columns,
+    gridTemplateAreas: areas,
     gridAutoFlow: autoFlow
   });
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Box, { ...props, className: (0, import_classnames28.default)(className, classes), style: { ...styleProps, ...style }, children });
@@ -28059,12 +28193,18 @@ function Heading({
   size = "5",
   weight,
   align,
+  spacing = "1",
   className,
   style,
   children,
   ...props
 }) {
-  const [classes, styleProps] = mapProps({ fontSize: size, textAlign: align, fontWeight: weight });
+  const [classes, styleProps] = useDesignProps({
+    fontSize: size,
+    textAlign: align,
+    fontWeight: weight,
+    letterSpacing: spacing
+  });
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     Box,
     {