@chakra-ui/panda-preset 3.3.0

package/dist/esm/slot-recipes/field.js

@@ -0,0 +1,78 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const fieldSlotRecipe = 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"
+  }
+});
+
+export { fieldSlotRecipe };

package/dist/esm/slot-recipes/fieldset.js

@@ -0,0 +1,80 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const fieldsetSlotRecipe = 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"
+  }
+});
+
+export { fieldsetSlotRecipe };

package/dist/esm/slot-recipes/file-upload.js

@@ -0,0 +1,112 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const fileUploadSlotRecipe = 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: {}
+});
+
+export { fileUploadSlotRecipe };

package/dist/esm/slot-recipes/hover-card.js

@@ -0,0 +1,68 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const hoverCardSlotRecipe = 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"
+  }
+});
+
+export { hoverCardSlotRecipe };

package/dist/esm/slot-recipes/index.js

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

package/dist/esm/slot-recipes/list.js

@@ -0,0 +1,71 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const listSlotRecipe = 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"
+  }
+});
+
+export { listSlotRecipe };

package/dist/esm/slot-recipes/menu.js

@@ -0,0 +1,144 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const menuSlotRecipe = 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"
+  }
+});
+
+export { menuSlotRecipe };