@stokelp/styled-system 2.6.0 → 2.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokelp/styled-system",
-  "version": "2.6.0",
+  "version": "2.8.0",
   "description": "Stokelp UI styled-system",
   "type": "module",
   "publishConfig": {

package/panda.buildinfo.json

@@ -49,6 +49,7 @@
       "justifyContent]___[value:center",
       "flex]___[value:0 0 auto",
       "borderRadius]___[value:9999px",
+      "paddingBottom]___[value:space-24",
       "display]___[value:grid",
       "gridTemplateColumns]___[value:repeat(auto-fit, minmax(300px, 1fr))",
       "gap]___[value:10px",
@@ -61,6 +62,8 @@
       "marginBlock]___[value:space-24",
       "width]___[value:100%",
       "gridTemplateColumns]___[value:repeat(3, 1fr)",
+      "padding]___[value:space-4",
+      "gap]___[value:space-4",
       "gap]___[value:space-32",
       "padding]___[value:space-16",
       "marginTop]___[value:100",
@@ -83,7 +86,6 @@
       "background]___[value:grey.100",
       "borderRadius]___[value:radius-4",
       "display]___[value:inline-flex",
-      "gap]___[value:space-4",
       "background]___[value:primary.700",
       "paddingBlock]___[value:space-8",
       "paddingInline]___[value:space-16",
@@ -153,10 +155,14 @@
         "severity]___[value:warning]___[recipe:tag",
         "severity]___[value:error]___[recipe:tag"
       ],
-      "productCardCatalog": [],
+      "appNavigation": [
+        "variant]___[value:primary]___[recipe:appNavigation"
+      ],
       "heading": [
         "size]___[value:h2]___[recipe:heading"
       ],
+      "collapsible": [],
+      "productCardCatalog": [],
       "accordion": [
         "size]___[value:md]___[recipe:accordion"
       ],

package/patterns/aspect-ratio.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const aspectRatioConfig = {
-transform(props11, { map }) {
-  const { ratio = 4 / 3, ...rest } = props11;
+transform(props12, { map }) {
+  const { ratio = 4 / 3, ...rest } = props12;
   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(props11, { map, isCssUnit, isCssVar }) {
-  const { inline, block, ...rest } = props11;
+transform(props12, { map, isCssUnit, isCssVar }) {
+  const { inline, block, ...rest } = props12;
   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(props11) {
-  return props11;
+transform(props12) {
+  return props12;
 }}
 
 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(props11) {
-  const { inline, ...rest } = props11;
+transform(props12) {
+  const { inline, ...rest } = props12;
   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(props11) {
-  const { size, ...rest } = props11;
+transform(props12) {
+  const { size, ...rest } = props12;
   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(props11) {
+transform(props12) {
   return {
     position: "relative",
     maxWidth: "8xl",
     mx: "auto",
     px: { base: "4", md: "6", lg: "8" },
-    ...props11
+    ...props12
   };
 }}
 

package/patterns/cq.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const cqConfig = {
-transform(props11) {
-  const { name, type, ...rest } = props11;
+transform(props12) {
+  const { name, type, ...rest } = props12;
   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(props11, { map }) {
-  const { orientation, thickness, color, ...rest } = props11;
+transform(props12, { map }) {
+  const { orientation, thickness, color, ...rest } = props12;
   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(props11) {
-  const { direction, align, justify, wrap: wrap22, basis, grow, shrink, ...rest } = props11;
+transform(props12) {
+  const { direction, align, justify, wrap: wrap22, basis, grow, shrink, ...rest } = props12;
   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(props11, { map }) {
-  const { offset, offsetX, offsetY, placement, ...rest } = props11;
+transform(props12, { map }) {
+  const { offset, offsetX, offsetY, placement, ...rest } = props12;
   return {
     display: "inline-flex",
     justifyContent: "center",
@@ -38,8 +38,8 @@ transform(props11, { map }) {
     ...rest
   };
 },
-defaultValues(props11) {
-  const offset = props11.offset || "0";
+defaultValues(props12) {
+  const offset = props12.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(props11, { map }) {
-  const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = props11;
+transform(props12, { map }) {
+  const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = props12;
   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(props11, { map, isCssUnit }) {
-  const { columnGap, rowGap, gap, columns, minChildWidth, ...rest } = props11;
+transform(props12, { map, isCssUnit }) {
+  const { columnGap, rowGap, gap, columns, minChildWidth, ...rest } = props12;
   const getValue = (v) => isCssUnit(v) ? v : `token(sizes.${v}, ${v})`;
   return {
     display: "grid",
@@ -14,8 +14,8 @@ transform(props11, { map, isCssUnit }) {
     ...rest
   };
 },
-defaultValues(props11) {
-  return { gap: props11.columnGap || props11.rowGap ? void 0 : "10px" };
+defaultValues(props12) {
+  return { gap: props12.columnGap || props12.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(props11) {
-  const { justify, gap, ...rest } = props11;
+transform(props12) {
+  const { justify, gap, ...rest } = props12;
   return {
     display: "flex",
     alignItems: "center",

package/patterns/link-overlay.mjs

@@ -2,16 +2,16 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const linkOverlayConfig = {
-transform(props11) {
+transform(props12) {
   return {
     _before: {
       content: '""',
       position: "absolute",
       inset: "0",
       zIndex: "0",
-      ...props11["_before"]
+      ...props12["_before"]
     },
-    ...props11
+    ...props12
   };
 }}
 

package/patterns/spacer.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const spacerConfig = {
-transform(props11, { map }) {
-  const { size, ...rest } = props11;
+transform(props12, { map }) {
+  const { size, ...rest } = props12;
   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(props11) {
-  const { size, ...rest } = props11;
+transform(props12) {
+  const { size, ...rest } = props12;
   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(props11) {
-  const { align, justify, direction, gap, ...rest } = props11;
+transform(props12) {
+  const { align, justify, direction, gap, ...rest } = props12;
   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(props11) {
+transform(props12) {
   return {
     srOnly: true,
-    ...props11
+    ...props12
   };
 }}
 

package/patterns/vstack.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const vstackConfig = {
-transform(props11) {
-  const { justify, gap, ...rest } = props11;
+transform(props12) {
+  const { justify, gap, ...rest } = props12;
   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(props11) {
-  const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", align, justify, ...rest } = props11;
+transform(props12) {
+  const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", align, justify, ...rest } = props12;
   return {
     display: "flex",
     flexWrap: "wrap",

package/recipes/app-navigation.d.ts

@@ -0,0 +1,35 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface AppNavigationVariant {
+  /**
+ * @default "primary"
+ */
+variant: "primary"
+}
+
+type AppNavigationVariantMap = {
+  [key in keyof AppNavigationVariant]: Array<AppNavigationVariant[key]>
+}
+
+export type AppNavigationVariantProps = {
+  [key in keyof AppNavigationVariant]?: ConditionalValue<AppNavigationVariant[key]> | undefined
+}
+
+export interface AppNavigationRecipe {
+  __type: AppNavigationVariantProps
+  (props?: AppNavigationVariantProps): Pretty<Record<"root" | "header" | "body" | "item" | "itemLabel" | "itemIcon" | "itemContent" | "itemSubItems" | "footer", string>>
+  raw: (props?: AppNavigationVariantProps) => AppNavigationVariantProps
+  variantMap: AppNavigationVariantMap
+  variantKeys: Array<keyof AppNavigationVariant>
+  splitVariantProps<Props extends AppNavigationVariantProps>(props: Props): [AppNavigationVariantProps, Pretty<DistributiveOmit<Props, keyof AppNavigationVariantProps>>]
+  getVariantProps: (props?: AppNavigationVariantProps) => AppNavigationVariantProps
+}
+
+/**
+ * The styles for the AppNavigation component
+
+
+ */
+export declare const appNavigation: AppNavigationRecipe

package/recipes/app-navigation.mjs

@@ -0,0 +1,72 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
+import { createRecipe } from './create-recipe.mjs';
+
+const appNavigationDefaultVariants = {
+  "variant": "primary"
+}
+const appNavigationCompoundVariants = []
+
+const appNavigationSlotNames = [
+  [
+    "root",
+    "app-navigation__root"
+  ],
+  [
+    "header",
+    "app-navigation__header"
+  ],
+  [
+    "body",
+    "app-navigation__body"
+  ],
+  [
+    "item",
+    "app-navigation__item"
+  ],
+  [
+    "itemLabel",
+    "app-navigation__itemLabel"
+  ],
+  [
+    "itemIcon",
+    "app-navigation__itemIcon"
+  ],
+  [
+    "itemContent",
+    "app-navigation__itemContent"
+  ],
+  [
+    "itemSubItems",
+    "app-navigation__itemSubItems"
+  ],
+  [
+    "footer",
+    "app-navigation__footer"
+  ]
+]
+const appNavigationSlotFns = /* @__PURE__ */ appNavigationSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, appNavigationDefaultVariants, getSlotCompoundVariant(appNavigationCompoundVariants, slotName))])
+
+const appNavigationFn = memo((props = {}) => {
+  return Object.fromEntries(appNavigationSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
+})
+
+const appNavigationVariantKeys = [
+  "variant"
+]
+const getVariantProps = (variants) => ({ ...appNavigationDefaultVariants, ...compact(variants) })
+
+export const appNavigation = /* @__PURE__ */ Object.assign(appNavigationFn, {
+  __recipe__: false,
+  __name__: 'appNavigation',
+  raw: (props) => props,
+  variantKeys: appNavigationVariantKeys,
+  variantMap: {
+  "variant": [
+    "primary"
+  ]
+},
+  splitVariantProps(props) {
+    return splitProps(props, appNavigationVariantKeys)
+  },
+  getVariantProps
+})

package/recipes/collapsible.d.ts

@@ -0,0 +1,28 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface CollapsibleVariant {
+  
+}
+
+type CollapsibleVariantMap = {
+  [key in keyof CollapsibleVariant]: Array<CollapsibleVariant[key]>
+}
+
+export type CollapsibleVariantProps = {
+  [key in keyof CollapsibleVariant]?: ConditionalValue<CollapsibleVariant[key]> | undefined
+}
+
+export interface CollapsibleRecipe {
+  __type: CollapsibleVariantProps
+  (props?: CollapsibleVariantProps): Pretty<Record<"root" | "trigger" | "content", string>>
+  raw: (props?: CollapsibleVariantProps) => CollapsibleVariantProps
+  variantMap: CollapsibleVariantMap
+  variantKeys: Array<keyof CollapsibleVariant>
+  splitVariantProps<Props extends CollapsibleVariantProps>(props: Props): [CollapsibleVariantProps, Pretty<DistributiveOmit<Props, keyof CollapsibleVariantProps>>]
+  getVariantProps: (props?: CollapsibleVariantProps) => CollapsibleVariantProps
+}
+
+
+export declare const collapsible: CollapsibleRecipe

package/recipes/collapsible.mjs

@@ -0,0 +1,40 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
+import { createRecipe } from './create-recipe.mjs';
+
+const collapsibleDefaultVariants = {}
+const collapsibleCompoundVariants = []
+
+const collapsibleSlotNames = [
+  [
+    "root",
+    "collapsible__root"
+  ],
+  [
+    "trigger",
+    "collapsible__trigger"
+  ],
+  [
+    "content",
+    "collapsible__content"
+  ]
+]
+const collapsibleSlotFns = /* @__PURE__ */ collapsibleSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, collapsibleDefaultVariants, getSlotCompoundVariant(collapsibleCompoundVariants, slotName))])
+
+const collapsibleFn = memo((props = {}) => {
+  return Object.fromEntries(collapsibleSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
+})
+
+const collapsibleVariantKeys = []
+const getVariantProps = (variants) => ({ ...collapsibleDefaultVariants, ...compact(variants) })
+
+export const collapsible = /* @__PURE__ */ Object.assign(collapsibleFn, {
+  __recipe__: false,
+  __name__: 'collapsible',
+  raw: (props) => props,
+  variantKeys: collapsibleVariantKeys,
+  variantMap: {},
+  splitVariantProps(props) {
+    return splitProps(props, collapsibleVariantKeys)
+  },
+  getVariantProps
+})

package/recipes/icon.d.ts

@@ -6,7 +6,7 @@ interface IconVariant {
   /**
  * @default "md"
  */
-size: "md"
+size: "sm" | "md"
 }
 
 type IconVariantMap = {

package/recipes/icon.mjs

@@ -7,6 +7,7 @@ const iconFn = /* @__PURE__ */ createRecipe('icon', {
 
 const iconVariantMap = {
   "size": [
+    "sm",
     "md"
   ]
 }

package/recipes/index.d.ts

@@ -40,4 +40,6 @@ export * from './product-card-catalog';
 export * from './switch-card';
 export * from './radio-card-group';
 export * from './checkbox-card';
-export * from './combobox';
+export * from './combobox';
+export * from './collapsible';
+export * from './app-navigation';

package/recipes/index.mjs

@@ -39,4 +39,6 @@ export * from './product-card-catalog.mjs';
 export * from './switch-card.mjs';
 export * from './radio-card-group.mjs';
 export * from './checkbox-card.mjs';
-export * from './combobox.mjs';
+export * from './combobox.mjs';
+export * from './collapsible.mjs';
+export * from './app-navigation.mjs';