@chakra-ui/panda-preset 3.3.0

package/dist/cjs/slot-recipes/field.cjs

@@ -0,0 +1,80 @@
+"use strict";
+'use strict';
+
+var def = require('../def.cjs');
+
+const fieldSlotRecipe = def.defineSlotRecipe({
+  className: "field",
+  slots: [
+    "root",
+    "errorText",
+    "helperText",
+    "input",
+    "label",
+    "select",
+    "textarea",
+    "requiredIndicator",
+    "requiredIndicator"
+  ],
+  base: {
+    requiredIndicator: {
+      color: "fg.error",
+      lineHeight: "1"
+    },
+    root: {
+      display: "flex",
+      width: "100%",
+      position: "relative",
+      gap: "1.5"
+    },
+    label: {
+      display: "flex",
+      alignItems: "center",
+      textAlign: "start",
+      textStyle: "sm",
+      fontWeight: "medium",
+      gap: "1",
+      userSelect: "none",
+      _disabled: {
+        opacity: "0.5"
+      }
+    },
+    errorText: {
+      display: "inline-flex",
+      alignItems: "center",
+      fontWeight: "medium",
+      gap: "1",
+      color: "fg.error",
+      textStyle: "xs"
+    },
+    helperText: {
+      color: "fg.muted",
+      textStyle: "xs"
+    }
+  },
+  variants: {
+    orientation: {
+      vertical: {
+        root: {
+          flexDirection: "column",
+          alignItems: "flex-start"
+        }
+      },
+      horizontal: {
+        root: {
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "space-between"
+        },
+        label: {
+          flex: "0 0 var(--field-label-width, 80px)"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    orientation: "vertical"
+  }
+});
+
+exports.fieldSlotRecipe = fieldSlotRecipe;

package/dist/cjs/slot-recipes/fieldset.cjs

@@ -0,0 +1,82 @@
+"use strict";
+'use strict';
+
+var def = require('../def.cjs');
+
+const fieldsetSlotRecipe = def.defineSlotRecipe({
+  className: "fieldset",
+  slots: ["root", "errorText", "helperText", "legend", "content"],
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      width: "full"
+    },
+    content: {
+      display: "flex",
+      flexDirection: "column",
+      width: "full"
+    },
+    legend: {
+      color: "fg",
+      fontWeight: "medium",
+      _disabled: {
+        opacity: "0.5"
+      }
+    },
+    helperText: {
+      color: "fg.muted",
+      textStyle: "sm"
+    },
+    errorText: {
+      display: "inline-flex",
+      alignItems: "center",
+      color: "fg.error",
+      gap: "2",
+      fontWeight: "medium",
+      textStyle: "sm"
+    }
+  },
+  variants: {
+    size: {
+      sm: {
+        root: {
+          spaceY: "2"
+        },
+        content: {
+          gap: "1.5"
+        },
+        legend: {
+          textStyle: "sm"
+        }
+      },
+      md: {
+        root: {
+          spaceY: "4"
+        },
+        content: {
+          gap: "4"
+        },
+        legend: {
+          textStyle: "sm"
+        }
+      },
+      lg: {
+        root: {
+          spaceY: "6"
+        },
+        content: {
+          gap: "4"
+        },
+        legend: {
+          textStyle: "md"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+exports.fieldsetSlotRecipe = fieldsetSlotRecipe;

package/dist/cjs/slot-recipes/file-upload.cjs

@@ -0,0 +1,114 @@
+"use strict";
+'use strict';
+
+var def = require('../def.cjs');
+
+const fileUploadSlotRecipe = def.defineSlotRecipe({
+  className: "file-upload",
+  slots: [
+    "root",
+    "dropzone",
+    "item",
+    "itemDeleteTrigger",
+    "itemGroup",
+    "itemName",
+    "itemPreview",
+    "itemPreviewImage",
+    "itemSizeText",
+    "label",
+    "trigger",
+    "clearTrigger",
+    "itemContent",
+    "dropzoneContent"
+  ],
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "4",
+      width: "100%",
+      alignItems: "flex-start"
+    },
+    label: {
+      fontWeight: "medium",
+      textStyle: "sm"
+    },
+    dropzone: {
+      background: "bg",
+      borderRadius: "l3",
+      borderWidth: "2px",
+      borderStyle: "dashed",
+      display: "flex",
+      alignItems: "center",
+      flexDirection: "column",
+      gap: "4",
+      justifyContent: "center",
+      minHeight: "2xs",
+      px: "3",
+      py: "2",
+      transition: "backgrounds",
+      focusVisibleRing: "outside",
+      _hover: {
+        bg: "bg.subtle"
+      },
+      _dragging: {
+        bg: "colorPalette.subtle",
+        borderStyle: "solid",
+        borderColor: "colorPalette.solid"
+      }
+    },
+    dropzoneContent: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      textAlign: "center",
+      gap: "1",
+      textStyle: "sm"
+    },
+    item: {
+      textStyle: "sm",
+      animationName: "fade-in",
+      animationDuration: "moderate",
+      background: "bg",
+      borderRadius: "l2",
+      borderWidth: "1px",
+      width: "100%",
+      display: "flex",
+      alignItems: "center",
+      gap: "3",
+      p: "4"
+    },
+    itemGroup: {
+      width: "100%",
+      display: "flex",
+      flexDirection: "column",
+      gap: "3"
+    },
+    itemName: {
+      color: "fg",
+      fontWeight: "medium",
+      lineClamp: "1"
+    },
+    itemContent: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "0.5",
+      flex: "1"
+    },
+    itemSizeText: {
+      color: "fg.muted",
+      textStyle: "xs"
+    },
+    itemDeleteTrigger: {
+      alignSelf: "flex-start"
+    },
+    itemPreviewImage: {
+      width: "10",
+      height: "10",
+      objectFit: "scale-down"
+    }
+  },
+  defaultVariants: {}
+});
+
+exports.fileUploadSlotRecipe = fileUploadSlotRecipe;

package/dist/cjs/slot-recipes/hover-card.cjs

@@ -0,0 +1,70 @@
+"use strict";
+'use strict';
+
+var def = require('../def.cjs');
+
+const hoverCardSlotRecipe = def.defineSlotRecipe({
+  className: "hover-card",
+  slots: ["arrow", "arrowTip", "trigger", "positioner", "content"],
+  base: {
+    content: {
+      position: "relative",
+      display: "flex",
+      flexDirection: "column",
+      textStyle: "sm",
+      "--hovercard-bg": "colors.bg.panel",
+      bg: "var(--hovercard-bg)",
+      boxShadow: "lg",
+      maxWidth: "80",
+      borderRadius: "l3",
+      zIndex: "popover",
+      transformOrigin: "var(--transform-origin)",
+      outline: "0",
+      _open: {
+        animationStyle: "slide-fade-in",
+        animationDuration: "fast"
+      },
+      _closed: {
+        animationStyle: "slide-fade-out",
+        animationDuration: "faster"
+      }
+    },
+    arrow: {
+      "--arrow-size": "sizes.3",
+      "--arrow-background": "var(--hovercard-bg)"
+    },
+    arrowTip: {
+      borderTopWidth: "0.5px",
+      borderInlineStartWidth: "0.5px"
+    }
+  },
+  variants: {
+    size: {
+      xs: {
+        content: {
+          padding: "3"
+        }
+      },
+      sm: {
+        content: {
+          padding: "4"
+        }
+      },
+      md: {
+        content: {
+          padding: "5"
+        }
+      },
+      lg: {
+        content: {
+          padding: "6"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+exports.hoverCardSlotRecipe = hoverCardSlotRecipe;

package/dist/cjs/slot-recipes/index.cjs

@@ -0,0 +1,98 @@
+"use strict";
+'use strict';
+
+var accordion = require('./accordion.cjs');
+var actionBar = require('./action-bar.cjs');
+var alert = require('./alert.cjs');
+var avatar = require('./avatar.cjs');
+var blockquote = require('./blockquote.cjs');
+var breadcrumb = require('./breadcrumb.cjs');
+var card = require('./card.cjs');
+var checkbox = require('./checkbox.cjs');
+var checkboxCard = require('./checkbox-card.cjs');
+var collapsible = require('./collapsible.cjs');
+var colorPicker = require('./color-picker.cjs');
+var dataList = require('./data-list.cjs');
+var dialog = require('./dialog.cjs');
+var drawer = require('./drawer.cjs');
+var editable = require('./editable.cjs');
+var emptyState = require('./empty-state.cjs');
+var field = require('./field.cjs');
+var fieldset = require('./fieldset.cjs');
+var fileUpload = require('./file-upload.cjs');
+var hoverCard = require('./hover-card.cjs');
+var list = require('./list.cjs');
+var menu = require('./menu.cjs');
+var nativeSelect = require('./native-select.cjs');
+var numberInput = require('./number-input.cjs');
+var pinInput = require('./pin-input.cjs');
+var popover = require('./popover.cjs');
+var progress = require('./progress.cjs');
+var progressCircle = require('./progress-circle.cjs');
+var qrCode = require('./qr-code.cjs');
+var radioCard = require('./radio-card.cjs');
+var radioGroup = require('./radio-group.cjs');
+var ratingGroup = require('./rating-group.cjs');
+var segmentGroup = require('./segment-group.cjs');
+var select = require('./select.cjs');
+var slider = require('./slider.cjs');
+var stat = require('./stat.cjs');
+var status = require('./status.cjs');
+var steps = require('./steps.cjs');
+var _switch = require('./switch.cjs');
+var table = require('./table.cjs');
+var tabs = require('./tabs.cjs');
+var tag = require('./tag.cjs');
+var timeline = require('./timeline.cjs');
+var toast = require('./toast.cjs');
+var tooltip = require('./tooltip.cjs');
+
+const slotRecipes = {
+  accordion: accordion.accordionSlotRecipe,
+  actionBar: actionBar.actionBarSlotRecipe,
+  alert: alert.alertSlotRecipe,
+  avatar: avatar.avatarSlotRecipe,
+  blockquote: blockquote.blockquoteSlotRecipe,
+  breadcrumb: breadcrumb.breadcrumbSlotRecipe,
+  card: card.cardSlotRecipe,
+  checkbox: checkbox.checkboxSlotRecipe,
+  checkboxCard: checkboxCard.checkboxCardSlotRecipe,
+  collapsible: collapsible.collapsibleSlotRecipe,
+  dataList: dataList.dataListSlotRecipe,
+  dialog: dialog.dialogSlotRecipe,
+  drawer: drawer.drawerSlotRecipe,
+  editable: editable.editableSlotRecipe,
+  emptyState: emptyState.emptyStateSlotRecipe,
+  field: field.fieldSlotRecipe,
+  fieldset: fieldset.fieldsetSlotRecipe,
+  fileUpload: fileUpload.fileUploadSlotRecipe,
+  hoverCard: hoverCard.hoverCardSlotRecipe,
+  list: list.listSlotRecipe,
+  menu: menu.menuSlotRecipe,
+  nativeSelect: nativeSelect.nativeSelectSlotRecipe,
+  numberInput: numberInput.numberInputSlotRecipe,
+  pinInput: pinInput.pinInputSlotRecipe,
+  popover: popover.popoverSlotRecipe,
+  progress: progress.progressSlotRecipe,
+  progressCircle: progressCircle.progressCircleSlotRecipe,
+  radioCard: radioCard.radioCardSlotRecipe,
+  radioGroup: radioGroup.radioGroupSlotRecipe,
+  ratingGroup: ratingGroup.ratingGroupSlotRecipe,
+  segmentGroup: segmentGroup.segmentGroupSlotRecipe,
+  select: select.selectSlotRecipe,
+  slider: slider.sliderSlotRecipe,
+  stat: stat.statSlotRecipe,
+  steps: steps.stepsSlotRecipe,
+  swittch: _switch.switchSlotRecipe,
+  table: table.tableSlotRecipe,
+  tabs: tabs.tabsSlotRecipe,
+  tag: tag.tagSlotRecipe,
+  toast: toast.toastSlotRecipe,
+  tooltip: tooltip.tooltipSlotRecipe,
+  status: status.statusSlotRecipe,
+  timeline: timeline.timelineSlotRecipe,
+  colorPicker: colorPicker.colorPickerSlotRecipe,
+  qrCode: qrCode.qrCodeSlotRecipe
+};
+
+exports.slotRecipes = slotRecipes;

package/dist/cjs/slot-recipes/list.cjs

@@ -0,0 +1,73 @@
+"use strict";
+'use strict';
+
+var def = require('../def.cjs');
+
+const listSlotRecipe = def.defineSlotRecipe({
+  className: "list",
+  slots: ["root", "item", "indicator"],
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "var(--list-gap)",
+      "& :where(ul, ol)": {
+        marginTop: "var(--list-gap)"
+      }
+    },
+    item: {
+      whiteSpace: "normal",
+      display: "list-item"
+    },
+    indicator: {
+      marginEnd: "2",
+      minHeight: "1lh",
+      flexShrink: 0,
+      display: "inline-block",
+      verticalAlign: "middle"
+    }
+  },
+  variants: {
+    variant: {
+      marker: {
+        root: {
+          listStyle: "revert",
+          listStylePosition: "inside"
+        },
+        item: {
+          _marker: {
+            color: "fg.subtle"
+          }
+        }
+      },
+      plain: {
+        item: {
+          alignItems: "flex-start",
+          display: "inline-flex"
+        }
+      }
+    },
+    align: {
+      center: {
+        item: {
+          alignItems: "center"
+        }
+      },
+      start: {
+        item: {
+          alignItems: "flex-start"
+        }
+      },
+      end: {
+        item: {
+          alignItems: "flex-end"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "marker"
+  }
+});
+
+exports.listSlotRecipe = listSlotRecipe;

package/dist/cjs/slot-recipes/menu.cjs

@@ -0,0 +1,146 @@
+"use strict";
+'use strict';
+
+var def = require('../def.cjs');
+
+const menuSlotRecipe = def.defineSlotRecipe({
+  className: "menu",
+  slots: [
+    "arrow",
+    "arrowTip",
+    "content",
+    "contextTrigger",
+    "indicator",
+    "item",
+    "itemGroup",
+    "itemGroupLabel",
+    "itemIndicator",
+    "itemText",
+    "positioner",
+    "separator",
+    "trigger",
+    "triggerItem",
+    "itemCommand"
+  ],
+  base: {
+    content: {
+      outline: 0,
+      bg: "bg.panel",
+      boxShadow: "lg",
+      color: "fg",
+      maxHeight: "var(--available-height)",
+      "--menu-z-index": "zIndex.dropdown",
+      zIndex: "calc(var(--menu-z-index) + var(--layer-index, 0))",
+      borderRadius: "l2",
+      overflow: "hidden",
+      overflowY: "auto",
+      _open: {
+        animationStyle: "slide-fade-in",
+        animationDuration: "fast"
+      },
+      _closed: {
+        animationStyle: "slide-fade-out",
+        animationDuration: "faster"
+      }
+    },
+    item: {
+      textDecoration: "none",
+      color: "fg",
+      userSelect: "none",
+      borderRadius: "l1",
+      width: "100%",
+      display: "flex",
+      cursor: "menuitem",
+      alignItems: "center",
+      textAlign: "start",
+      position: "relative",
+      flex: "0 0 auto",
+      outline: 0,
+      _disabled: {
+        layerStyle: "disabled"
+      }
+    },
+    itemText: {
+      flex: "1"
+    },
+    itemGroupLabel: {
+      px: "2",
+      py: "1.5",
+      fontWeight: "semibold",
+      textStyle: "sm"
+    },
+    indicator: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: "0"
+    },
+    itemCommand: {
+      opacity: "0.6",
+      textStyle: "xs",
+      ms: "auto",
+      ps: "4",
+      letterSpacing: "widest"
+    },
+    separator: {
+      height: "1px",
+      bg: "bg.muted",
+      my: "1",
+      mx: "-1"
+    }
+  },
+  variants: {
+    variant: {
+      subtle: {
+        item: {
+          _highlighted: {
+            bg: {
+              _light: "bg.muted",
+              _dark: "bg.emphasized"
+            }
+          }
+        }
+      },
+      solid: {
+        item: {
+          _highlighted: {
+            bg: "colorPalette.solid",
+            color: "colorPalette.contrast"
+          }
+        }
+      }
+    },
+    size: {
+      sm: {
+        content: {
+          minW: "8rem",
+          padding: "1"
+        },
+        item: {
+          gap: "1",
+          textStyle: "xs",
+          py: "1",
+          px: "1.5"
+        }
+      },
+      md: {
+        content: {
+          minW: "8rem",
+          padding: "1.5"
+        },
+        item: {
+          gap: "2",
+          textStyle: "sm",
+          py: "1.5",
+          px: "2"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "subtle"
+  }
+});
+
+exports.menuSlotRecipe = menuSlotRecipe;