@stokelp/styled-system 1.8.0 → 1.10.0

package/css/css.d.ts

@@ -1,9 +1,22 @@
 /* eslint-disable */
 import type { SystemStyleObject } from '../types/index';
 
+type Styles = SystemStyleObject | undefined | null | false
+
+interface CssRawFunction {
+  (styles: Styles): SystemStyleObject
+  (styles: Styles[]): SystemStyleObject
+  (...styles: Array<Styles | Styles[]>): SystemStyleObject
+  (styles: Styles): SystemStyleObject
+}
+
 interface CssFunction {
-  (...styles: Array<SystemStyleObject | undefined | null | false>): string
-  raw: (...styles: Array<SystemStyleObject | undefined | null | false>) => SystemStyleObject
+  (styles: Styles): string
+  (styles: Styles[]): string
+  (...styles: Array<Styles | Styles[]>): string
+  (styles: Styles): string
+
+  raw: CssRawFunction
 }
 
 export declare const css: CssFunction;

package/helpers.mjs

@@ -180,7 +180,7 @@ function createCss(context) {
   });
 }
 function compactStyles(...styles) {
-  return styles.filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);
+  return styles.flat().filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);
 }
 function createMergeCss(context) {
   function resolve(styles) {

package/jsx/aspect-ratio.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getAspectRatioStyle } from '../patterns/aspect-ratio.mjs';
 import { styled } from './factory.mjs';

package/jsx/bleed.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getBleedStyle } from '../patterns/bleed.mjs';
 import { styled } from './factory.mjs';

package/jsx/box.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getBoxStyle } from '../patterns/box.mjs';
 import { styled } from './factory.mjs';

package/jsx/center.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getCenterStyle } from '../patterns/center.mjs';
 import { styled } from './factory.mjs';

package/jsx/circle.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getCircleStyle } from '../patterns/circle.mjs';
 import { styled } from './factory.mjs';

package/jsx/container.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getContainerStyle } from '../patterns/container.mjs';
 import { styled } from './factory.mjs';

package/jsx/cq.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getCqStyle } from '../patterns/cq.mjs';
 import { styled } from './factory.mjs';

package/jsx/divider.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getDividerStyle } from '../patterns/divider.mjs';
 import { styled } from './factory.mjs';

package/jsx/flex.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getFlexStyle } from '../patterns/flex.mjs';
 import { styled } from './factory.mjs';

package/jsx/float.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getFloatStyle } from '../patterns/float.mjs';
 import { styled } from './factory.mjs';

package/jsx/grid-item.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getGridItemStyle } from '../patterns/grid-item.mjs';
 import { styled } from './factory.mjs';

package/jsx/grid.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getGridStyle } from '../patterns/grid.mjs';
 import { styled } from './factory.mjs';

package/jsx/hstack.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getHstackStyle } from '../patterns/hstack.mjs';
 import { styled } from './factory.mjs';

package/jsx/index.d.ts

@@ -10,7 +10,6 @@ export * from './spacer';
 export * from './square';
 export * from './circle';
 export * from './center';
-export * from './link-box';
 export * from './link-overlay';
 export * from './aspect-ratio';
 export * from './grid';

package/jsx/index.mjs

@@ -9,7 +9,6 @@ export * from './spacer.mjs';
 export * from './square.mjs';
 export * from './circle.mjs';
 export * from './center.mjs';
-export * from './link-box.mjs';
 export * from './link-overlay.mjs';
 export * from './aspect-ratio.mjs';
 export * from './grid.mjs';

package/jsx/link-overlay.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getLinkOverlayStyle } from '../patterns/link-overlay.mjs';
 import { styled } from './factory.mjs';

package/jsx/spacer.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getSpacerStyle } from '../patterns/spacer.mjs';
 import { styled } from './factory.mjs';

package/jsx/square.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getSquareStyle } from '../patterns/square.mjs';
 import { styled } from './factory.mjs';

package/jsx/stack.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getStackStyle } from '../patterns/stack.mjs';
 import { styled } from './factory.mjs';

package/jsx/visually-hidden.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getVisuallyHiddenStyle } from '../patterns/visually-hidden.mjs';
 import { styled } from './factory.mjs';

package/jsx/vstack.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getVstackStyle } from '../patterns/vstack.mjs';
 import { styled } from './factory.mjs';

package/jsx/wrap.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getWrapStyle } from '../patterns/wrap.mjs';
 import { styled } from './factory.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokelp/styled-system",
-  "version": "1.8.0",
+  "version": "1.10.0",
   "description": "Stokelp UI styled-system",
   "type": "module",
   "publishConfig": {
@@ -56,7 +56,7 @@
     "./panda.buildinfo.json": "./panda.buildinfo.json"
   },
   "devDependencies": {
-    "@pandacss/dev": "^0.37.2"
+    "@pandacss/dev": "^0.41.0"
   },
   "release": {
     "monorepo": {

package/panda.buildinfo.json

@@ -1,8 +1,7 @@
 {
-  "schemaVersion": "0.37.2",
+  "schemaVersion": "0.41.0",
   "styles": {
     "atomic": [
-      "marginLeft]___[value:auto",
       "padding]___[value:space-8",
       "background]___[value:error.500]___[cond:_disabled<___>_hover",
       "background]___[value:error.500]___[cond:_disabled<___>_active",
@@ -28,6 +27,7 @@
       "background]___[value:error.100]___[cond:_hover",
       "color]___[value:error.700]___[cond:_hover",
       "color]___[value:error.700]___[cond:_active",
+      "marginLeft]___[value:auto",
       "truncate]___[value:true",
       "width]___[value:20",
       "height]___[value:20",
@@ -54,10 +54,17 @@
       "checkbox": [
         "size]___[value:md]___[recipe:checkbox"
       ],
+      "inputGroup": [],
+      "input": [
+        "size]___[value:md]___[recipe:input"
+      ],
+      "inputAddon": [],
       "button": [
+        "size]___[value:sm]___[recipe:button",
+        "variant]___[value:secondary]___[recipe:button",
+        "severity]___[value:none]___[recipe:button",
         "size]___[value:lg]___[recipe:button",
         "variant]___[value:tertiary]___[recipe:button",
-        "severity]___[value:none]___[recipe:button",
         "variant]___[value:primary]___[recipe:button"
       ],
       "formControl": [],
@@ -88,14 +95,10 @@
       "drawer": [
         "variant]___[value:right]___[recipe:drawer"
       ],
-      "inputGroup": [],
-      "inputAddon": [],
-      "input": [
-        "size]___[value:md]___[recipe:input"
-      ],
       "tabs": [
         "variant]___[value:line]___[recipe:tabs"
       ],
+      "datepicker": [],
       "formHelperText": [],
       "select": [
         "size]___[value:md]___[recipe:select"

package/patterns/aspect-ratio.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const aspectRatioConfig = {
-transform(props7, { map }) {
-  const { ratio = 4 / 3, ...rest } = props7;
+transform(props8, { map }) {
+  const { ratio = 4 / 3, ...rest } = props8;
   return {
     position: "relative",
     _before: {

package/patterns/bleed.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const bleedConfig = {
-transform(props7, { map, isCssUnit, isCssVar }) {
-  const { inline, block, ...rest } = props7;
+transform(props8, { map, isCssUnit, isCssVar }) {
+  const { inline, block, ...rest } = props8;
   const valueFn = (v) => isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`;
   return {
     "--bleed-x": map(inline, valueFn),

package/patterns/box.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const boxConfig = {
-transform(props7) {
-  return props7;
+transform(props8) {
+  return props8;
 }}
 
 export const getBoxStyle = (styles = {}) => {

package/patterns/center.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const centerConfig = {
-transform(props7) {
-  const { inline, ...rest } = props7;
+transform(props8) {
+  const { inline, ...rest } = props8;
   return {
     display: inline ? "inline-flex" : "flex",
     alignItems: "center",

package/patterns/circle.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const circleConfig = {
-transform(props7) {
-  const { size, ...rest } = props7;
+transform(props8) {
+  const { size, ...rest } = props8;
   return {
     display: "flex",
     alignItems: "center",

package/patterns/container.mjs

@@ -2,13 +2,13 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const containerConfig = {
-transform(props7) {
+transform(props8) {
   return {
     position: "relative",
     maxWidth: "8xl",
     mx: "auto",
     px: { base: "4", md: "6", lg: "8" },
-    ...props7
+    ...props8
   };
 }}
 

package/patterns/cq.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const cqConfig = {
-transform(props7) {
-  const { name, type, ...rest } = props7;
+transform(props8) {
+  const { name, type, ...rest } = props8;
   return {
     containerType: type,
     containerName: name,

package/patterns/divider.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const dividerConfig = {
-transform(props7, { map }) {
-  const { orientation, thickness, color, ...rest } = props7;
+transform(props8, { map }) {
+  const { orientation, thickness, color, ...rest } = props8;
   return {
     "--thickness": thickness,
     width: map(orientation, (v) => v === "vertical" ? void 0 : "100%"),

package/patterns/flex.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const flexConfig = {
-transform(props7) {
-  const { direction, align, justify, wrap: wrap22, basis, grow, shrink, ...rest } = props7;
+transform(props8) {
+  const { direction, align, justify, wrap: wrap22, basis, grow, shrink, ...rest } = props8;
   return {
     display: "flex",
     flexDirection: direction,

package/patterns/float.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const floatConfig = {
-transform(props7, { map }) {
-  const { offset, offsetX, offsetY, placement, ...rest } = props7;
+transform(props8, { map }) {
+  const { offset, offsetX, offsetY, placement, ...rest } = props8;
   return {
     display: "inline-flex",
     justifyContent: "center",
@@ -38,8 +38,8 @@ transform(props7, { map }) {
     ...rest
   };
 },
-defaultValues(props7) {
-  const offset = props7.offset || "0";
+defaultValues(props8) {
+  const offset = props8.offset || "0";
   return { offset, offsetX: offset, offsetY: offset, placement: "top-end" };
 }}
 

package/patterns/grid-item.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const gridItemConfig = {
-transform(props7, { map }) {
-  const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = props7;
+transform(props8, { map }) {
+  const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = props8;
   const spanFn = (v) => v === "auto" ? v : `span ${v}`;
   return {
     gridColumn: colSpan != null ? map(colSpan, spanFn) : void 0,

package/patterns/grid.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const gridConfig = {
-transform(props7, { map, isCssUnit }) {
-  const { columnGap, rowGap, gap, columns, minChildWidth, ...rest } = props7;
+transform(props8, { map, isCssUnit }) {
+  const { columnGap, rowGap, gap, columns, minChildWidth, ...rest } = props8;
   const getValue = (v) => isCssUnit(v) ? v : `token(sizes.${v}, ${v})`;
   return {
     display: "grid",
@@ -14,8 +14,8 @@ transform(props7, { map, isCssUnit }) {
     ...rest
   };
 },
-defaultValues(props7) {
-  return { gap: props7.columnGap || props7.rowGap ? void 0 : "10px" };
+defaultValues(props8) {
+  return { gap: props8.columnGap || props8.rowGap ? void 0 : "10px" };
 }}
 
 export const getGridStyle = (styles = {}) => {

package/patterns/hstack.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const hstackConfig = {
-transform(props7) {
-  const { justify, gap, ...rest } = props7;
+transform(props8) {
+  const { justify, gap, ...rest } = props8;
   return {
     display: "flex",
     alignItems: "center",

package/patterns/index.d.ts

@@ -8,7 +8,6 @@ export * from './spacer';
 export * from './square';
 export * from './circle';
 export * from './center';
-export * from './link-box';
 export * from './link-overlay';
 export * from './aspect-ratio';
 export * from './grid';

package/patterns/index.mjs

@@ -7,7 +7,6 @@ export * from './spacer.mjs';
 export * from './square.mjs';
 export * from './circle.mjs';
 export * from './center.mjs';
-export * from './link-box.mjs';
 export * from './link-overlay.mjs';
 export * from './aspect-ratio.mjs';
 export * from './grid.mjs';

package/patterns/link-overlay.mjs

@@ -2,19 +2,16 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const linkOverlayConfig = {
-transform(props7) {
+transform(props8) {
   return {
-    position: "static",
     _before: {
       content: '""',
-      display: "block",
       position: "absolute",
-      cursor: "inherit",
       inset: "0",
       zIndex: "0",
-      ...props7["_before"]
+      ...props8["_before"]
     },
-    ...props7
+    ...props8
   };
 }}
 

package/patterns/spacer.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const spacerConfig = {
-transform(props7, { map }) {
-  const { size, ...rest } = props7;
+transform(props8, { map }) {
+  const { size, ...rest } = props8;
   return {
     alignSelf: "stretch",
     justifySelf: "stretch",

package/patterns/square.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const squareConfig = {
-transform(props7) {
-  const { size, ...rest } = props7;
+transform(props8) {
+  const { size, ...rest } = props8;
   return {
     display: "flex",
     alignItems: "center",

package/patterns/stack.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const stackConfig = {
-transform(props7) {
-  const { align, justify, direction, gap, ...rest } = props7;
+transform(props8) {
+  const { align, justify, direction, gap, ...rest } = props8;
   return {
     display: "flex",
     flexDirection: direction,

package/patterns/visually-hidden.mjs

@@ -2,10 +2,10 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const visuallyHiddenConfig = {
-transform(props7) {
+transform(props8) {
   return {
     srOnly: true,
-    ...props7
+    ...props8
   };
 }}
 

package/patterns/vstack.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const vstackConfig = {
-transform(props7) {
-  const { justify, gap, ...rest } = props7;
+transform(props8) {
+  const { justify, gap, ...rest } = props8;
   return {
     display: "flex",
     alignItems: "center",

package/patterns/wrap.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const wrapConfig = {
-transform(props7) {
-  const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", align, justify, ...rest } = props7;
+transform(props8) {
+  const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", align, justify, ...rest } = props8;
   return {
     display: "flex",
     flexWrap: "wrap",

package/recipes/accordion.d.ts

@@ -3,7 +3,10 @@ import type { ConditionalValue } from '../types/index';
 import type { DistributiveOmit, Pretty } from '../types/system-types';
 
 interface AccordionVariant {
-  size: "md"
+  /**
+ * @default "md"
+ */
+size: "md"
 }
 
 type AccordionVariantMap = {

package/recipes/button.d.ts

@@ -3,8 +3,17 @@ import type { ConditionalValue } from '../types/index';
 import type { DistributiveOmit, Pretty } from '../types/system-types';
 
 interface ButtonVariant {
-  size: "lg" | "md" | "sm"
+  /**
+ * @default "lg"
+ */
+size: "lg" | "md" | "sm"
+/**
+ * @default "primary"
+ */
 variant: "primary" | "secondary" | "tertiary"
+/**
+ * @default "none"
+ */
 severity: "none" | "danger"
 }
 
@@ -26,5 +35,9 @@ export interface ButtonRecipe {
   getVariantProps: (props?: ButtonVariantProps) => ButtonVariantProps
 }
 
-/** The styles for the Button component */
+/**
+ * The styles for the Button component
+
+
+ */
 export declare const button: ButtonRecipe