@stokelp/styled-system 1.17.0 → 1.19.0

package/package.json

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

package/panda.buildinfo.json

@@ -53,6 +53,11 @@
       "gridTemplateColumns]___[value:repeat(3, 1fr)",
       "gap]___[value:10px",
       "flexDirection]___[value:row",
+      "gap]___[value:120",
+      "overflow]___[value:auto",
+      "padding]___[value:space-64",
+      "height]___[value:500",
+      "background]___[value:grey.100",
       "borderRadius]___[value:radius-4",
       "display]___[value:inline-flex",
       "gap]___[value:space-4",
@@ -88,6 +93,14 @@
         "variant]___[value:tertiary]___[recipe:button",
         "variant]___[value:primary]___[recipe:button"
       ],
+      "iconButton": [
+        "size]___[value:sm]___[recipe:iconButton",
+        "variant]___[value:secondary]___[recipe:iconButton",
+        "severity]___[value:none]___[recipe:iconButton",
+        "size]___[value:md]___[recipe:iconButton",
+        "variant]___[value:tertiary]___[recipe:iconButton",
+        "variant]___[value:primary]___[recipe:iconButton"
+      ],
       "formControl": [],
       "formLabel": [
         "variant]___[value:absolute]___[recipe:formLabel"
@@ -124,6 +137,7 @@
       "tabs": [
         "variant]___[value:line]___[recipe:tabs"
       ],
+      "tooltip": [],
       "datepicker": [],
       "formHelperText": [],
       "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(props9, { map }) {
-  const { ratio = 4 / 3, ...rest } = props9;
+transform(props10, { map }) {
+  const { ratio = 4 / 3, ...rest } = props10;
   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(props9, { map, isCssUnit, isCssVar }) {
-  const { inline, block, ...rest } = props9;
+transform(props10, { map, isCssUnit, isCssVar }) {
+  const { inline, block, ...rest } = props10;
   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(props9) {
-  return props9;
+transform(props10) {
+  return props10;
 }}
 
 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(props9) {
-  const { inline, ...rest } = props9;
+transform(props10) {
+  const { inline, ...rest } = props10;
   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(props9) {
-  const { size, ...rest } = props9;
+transform(props10) {
+  const { size, ...rest } = props10;
   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(props9) {
+transform(props10) {
   return {
     position: "relative",
     maxWidth: "8xl",
     mx: "auto",
     px: { base: "4", md: "6", lg: "8" },
-    ...props9
+    ...props10
   };
 }}
 

package/patterns/cq.mjs

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

package/patterns/spacer.mjs

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

package/patterns/vstack.mjs

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

package/recipes/icon-button.d.ts

@@ -0,0 +1,43 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface IconButtonVariant {
+  /**
+ * @default "md"
+ */
+size: "lg" | "md" | "sm"
+/**
+ * @default "primary"
+ */
+variant: "primary" | "secondary" | "tertiary"
+/**
+ * @default "none"
+ */
+severity: "none" | "danger"
+}
+
+type IconButtonVariantMap = {
+  [key in keyof IconButtonVariant]: Array<IconButtonVariant[key]>
+}
+
+export type IconButtonVariantProps = {
+  [key in keyof IconButtonVariant]?: IconButtonVariant[key] | undefined
+}
+
+export interface IconButtonRecipe {
+  __type: IconButtonVariantProps
+  (props?: IconButtonVariantProps): string
+  raw: (props?: IconButtonVariantProps) => IconButtonVariantProps
+  variantMap: IconButtonVariantMap
+  variantKeys: Array<keyof IconButtonVariant>
+  splitVariantProps<Props extends IconButtonVariantProps>(props: Props): [IconButtonVariantProps, Pretty<DistributiveOmit<Props, keyof IconButtonVariantProps>>]
+  getVariantProps: (props?: IconButtonVariantProps) => IconButtonVariantProps
+}
+
+/**
+ * The styles for the IconButton component
+
+
+ */
+export declare const iconButton: IconButtonRecipe

package/recipes/icon-button.mjs

@@ -0,0 +1,116 @@
+import { memo, splitProps } from '../helpers.mjs';
+import { createRecipe, mergeRecipes } from './create-recipe.mjs';
+
+const iconButtonFn = /* @__PURE__ */ createRecipe('icon-button', {
+  "size": "md",
+  "variant": "primary",
+  "severity": "none"
+}, [
+  {
+    "variant": "primary",
+    "severity": "danger",
+    "css": {
+      "bg": {
+        "_disabled": {
+          "_hover": "error.500",
+          "_active": "error.500",
+          "base": "error.500"
+        },
+        "_active": "error.800",
+        "_hover": "error.700",
+        "base": "error.500"
+      }
+    }
+  },
+  {
+    "variant": "secondary",
+    "severity": "danger",
+    "css": {
+      "bg": {
+        "_disabled": {
+          "_hover": "transparent",
+          "_active": "transparent",
+          "base": "transparent"
+        },
+        "_active": "error.700",
+        "_hover": "error.500",
+        "base": "transparent"
+      },
+      "boxShadow": {
+        "base": "inset 0 0 0 1px {colors.error.500}",
+        "_active": "inset 0 0 0 1px {colors.error.700}"
+      },
+      "color": {
+        "_disabled": {
+          "_hover": "error.500",
+          "_active": "error.500",
+          "base": "error.500"
+        },
+        "base": "error.500",
+        "_hover": "white",
+        "_active": "white"
+      }
+    }
+  },
+  {
+    "variant": "tertiary",
+    "severity": "danger",
+    "css": {
+      "bg": {
+        "_disabled": {
+          "_hover": "transparent",
+          "_active": "transparent",
+          "base": "transparent"
+        },
+        "_active": "error.200",
+        "_hover": "error.100",
+        "base": "transparent"
+      },
+      "color": {
+        "_disabled": {
+          "_hover": "error.500",
+          "_active": "error.500",
+          "base": "error.500"
+        },
+        "base": "error.500",
+        "_hover": "error.700",
+        "_active": "error.700"
+      }
+    }
+  }
+])
+
+const iconButtonVariantMap = {
+  "size": [
+    "lg",
+    "md",
+    "sm"
+  ],
+  "variant": [
+    "primary",
+    "secondary",
+    "tertiary"
+  ],
+  "severity": [
+    "none",
+    "danger"
+  ]
+}
+
+const iconButtonVariantKeys = Object.keys(iconButtonVariantMap)
+
+export const iconButton = /* @__PURE__ */ Object.assign(memo(iconButtonFn.recipeFn), {
+  __recipe__: true,
+  __name__: 'iconButton',
+  __getCompoundVariantCss__: iconButtonFn.__getCompoundVariantCss__,
+  raw: (props) => props,
+  variantKeys: iconButtonVariantKeys,
+  variantMap: iconButtonVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe)
+  },
+  splitVariantProps(props) {
+    return splitProps(props, iconButtonVariantKeys)
+  },
+  getVariantProps: iconButtonFn.getVariantProps,
+})

package/recipes/index.d.ts

@@ -1,5 +1,6 @@
 /* eslint-disable */
 export * from './button';
+export * from './icon-button';
 export * from './heading';
 export * from './switch-recipe';
 export * from './text';
@@ -20,4 +21,5 @@ export * from './tabs';
 export * from './tag';
 export * from './select';
 export * from './chip';
-export * from './action-card';
+export * from './action-card';
+export * from './tooltip';

package/recipes/index.mjs

@@ -1,4 +1,5 @@
 export * from './button.mjs';
+export * from './icon-button.mjs';
 export * from './heading.mjs';
 export * from './switch-recipe.mjs';
 export * from './text.mjs';
@@ -19,4 +20,5 @@ export * from './tabs.mjs';
 export * from './tag.mjs';
 export * from './select.mjs';
 export * from './chip.mjs';
-export * from './action-card.mjs';
+export * from './action-card.mjs';
+export * from './tooltip.mjs';

package/recipes/tooltip.d.ts

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

package/recipes/tooltip.mjs

@@ -0,0 +1,48 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
+import { createRecipe } from './create-recipe.mjs';
+
+const tooltipDefaultVariants = {}
+const tooltipCompoundVariants = []
+
+const tooltipSlotNames = [
+  [
+    "trigger",
+    "tooltip__trigger"
+  ],
+  [
+    "arrow",
+    "tooltip__arrow"
+  ],
+  [
+    "arrowTip",
+    "tooltip__arrowTip"
+  ],
+  [
+    "positioner",
+    "tooltip__positioner"
+  ],
+  [
+    "content",
+    "tooltip__content"
+  ]
+]
+const tooltipSlotFns = /* @__PURE__ */ tooltipSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, tooltipDefaultVariants, getSlotCompoundVariant(tooltipCompoundVariants, slotName))])
+
+const tooltipFn = memo((props = {}) => {
+  return Object.fromEntries(tooltipSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
+})
+
+const tooltipVariantKeys = []
+const getVariantProps = (variants) => ({ ...tooltipDefaultVariants, ...compact(variants) })
+
+export const tooltip = /* @__PURE__ */ Object.assign(tooltipFn, {
+  __recipe__: false,
+  __name__: 'tooltip',
+  raw: (props) => props,
+  variantKeys: tooltipVariantKeys,
+  variantMap: {},
+  splitVariantProps(props) {
+    return splitProps(props, tooltipVariantKeys)
+  },
+  getVariantProps
+})