@chakra-ui/panda-preset 3.3.0

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

@@ -0,0 +1,100 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const cardSlotRecipe = defineSlotRecipe({
+  className: "card",
+  slots: ["root", "header", "body", "footer", "title", "description"],
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      position: "relative",
+      minWidth: "0",
+      wordWrap: "break-word",
+      borderRadius: "l3",
+      color: "fg",
+      textAlign: "start"
+    },
+    title: {
+      fontWeight: "semibold"
+    },
+    description: {
+      color: "fg.muted",
+      fontSize: "sm"
+    },
+    header: {
+      paddingInline: "var(--card-padding)",
+      paddingTop: "var(--card-padding)",
+      display: "flex",
+      flexDirection: "column",
+      gap: "1.5"
+    },
+    body: {
+      padding: "var(--card-padding)",
+      flex: "1",
+      display: "flex",
+      flexDirection: "column"
+    },
+    footer: {
+      display: "flex",
+      alignItems: "center",
+      gap: "2",
+      paddingInline: "var(--card-padding)",
+      paddingBottom: "var(--card-padding)"
+    }
+  },
+  variants: {
+    size: {
+      sm: {
+        root: {
+          "--card-padding": "spacing.4"
+        },
+        title: {
+          textStyle: "md"
+        }
+      },
+      md: {
+        root: {
+          "--card-padding": "spacing.6"
+        },
+        title: {
+          textStyle: "lg"
+        }
+      },
+      lg: {
+        root: {
+          "--card-padding": "spacing.7"
+        },
+        title: {
+          textStyle: "xl"
+        }
+      }
+    },
+    variant: {
+      elevated: {
+        root: {
+          bg: "bg.panel",
+          boxShadow: "md"
+        }
+      },
+      outline: {
+        root: {
+          bg: "bg.panel",
+          borderWidth: "1px",
+          borderColor: "border"
+        }
+      },
+      subtle: {
+        root: {
+          bg: "bg.muted"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "outline",
+    size: "md"
+  }
+});
+
+export { cardSlotRecipe };

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

@@ -0,0 +1,285 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const checkboxCardSlotRecipe = defineSlotRecipe({
+  slots: [
+    "root",
+    "control",
+    "label",
+    "description",
+    "addon",
+    "indicator",
+    "content"
+  ],
+  className: "checkbox-card",
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      userSelect: "none",
+      position: "relative",
+      borderRadius: "l2",
+      flex: "1",
+      focusVisibleRing: "outside",
+      _disabled: {
+        opacity: "0.8",
+        borderColor: "border.subtle"
+      },
+      _invalid: {
+        outline: "2px solid",
+        outlineColor: "border.error"
+      }
+    },
+    control: {
+      display: "inline-flex",
+      flex: "1",
+      position: "relative",
+      borderRadius: "inherit",
+      justifyContent: "var(--checkbox-card-justify)",
+      alignItems: "var(--checkbox-card-align)"
+    },
+    label: {
+      fontWeight: "medium",
+      display: "flex",
+      alignItems: "center",
+      gap: "2",
+      _disabled: {
+        opacity: "0.5"
+      }
+    },
+    description: {
+      opacity: "0.64",
+      textStyle: "sm"
+    },
+    addon: {
+      _disabled: {
+        opacity: "0.5"
+      }
+    },
+    indicator: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: "0",
+      color: "white",
+      borderWidth: "1px",
+      borderColor: "transparent",
+      borderRadius: "l1",
+      focusVisibleRing: "outside",
+      _icon: {
+        boxSize: "full"
+      },
+      _invalid: {
+        colorPalette: "red",
+        borderColor: "border.error"
+      },
+      _disabled: {
+        opacity: "0.5"
+      }
+    },
+    content: {
+      display: "flex",
+      flexDirection: "column",
+      flex: "1",
+      gap: "1",
+      justifyContent: "var(--checkbox-card-justify)",
+      alignItems: "var(--checkbox-card-align)"
+    }
+  },
+  variants: {
+    size: {
+      sm: {
+        root: {
+          textStyle: "sm"
+        },
+        control: {
+          padding: "3",
+          gap: "1.5"
+        },
+        addon: {
+          px: "3",
+          py: "1.5",
+          borderTopWidth: "1px"
+        },
+        indicator: {
+          boxSize: "4"
+        }
+      },
+      md: {
+        root: {
+          textStyle: "sm"
+        },
+        control: {
+          padding: "4",
+          gap: "2.5"
+        },
+        addon: {
+          px: "4",
+          py: "2",
+          borderTopWidth: "1px"
+        },
+        indicator: {
+          boxSize: "5",
+          p: "0.5"
+        }
+      },
+      lg: {
+        root: {
+          textStyle: "md"
+        },
+        control: {
+          padding: "4",
+          gap: "3.5"
+        },
+        addon: {
+          px: "4",
+          py: "2",
+          borderTopWidth: "1px"
+        },
+        indicator: {
+          boxSize: "6",
+          p: "0.5"
+        }
+      }
+    },
+    variant: {
+      surface: {
+        root: {
+          borderWidth: "1px",
+          borderColor: "border",
+          _checked: {
+            bg: "colorPalette.subtle",
+            color: "colorPalette.fg",
+            borderColor: "colorPalette.muted"
+          },
+          _disabled: {
+            bg: "bg.muted"
+          }
+        },
+        indicator: {
+          borderColor: "border",
+          "&:is([data-state=checked], [data-state=indeterminate])": {
+            bg: "colorPalette.solid",
+            color: "colorPalette.contrast",
+            borderColor: "colorPalette.solid"
+          }
+        }
+      },
+      subtle: {
+        root: {
+          bg: "bg.muted"
+        },
+        control: {
+          _checked: {
+            bg: "colorPalette.muted",
+            color: "colorPalette.fg"
+          }
+        },
+        indicator: {
+          "&:is([data-state=checked], [data-state=indeterminate])": {
+            color: "colorPalette.fg"
+          }
+        }
+      },
+      outline: {
+        root: {
+          borderWidth: "1px",
+          borderColor: "border",
+          _checked: {
+            boxShadow: "0 0 0 1px var(--shadow-color)",
+            boxShadowColor: "colorPalette.solid",
+            borderColor: "colorPalette.solid"
+          }
+        },
+        indicator: {
+          borderColor: "border",
+          "&:is([data-state=checked], [data-state=indeterminate])": {
+            bg: "colorPalette.solid",
+            color: "colorPalette.contrast",
+            borderColor: "colorPalette.solid"
+          }
+        }
+      },
+      solid: {
+        root: {
+          borderWidth: "1px",
+          _checked: {
+            bg: "colorPalette.solid",
+            color: "colorPalette.contrast",
+            borderColor: "colorPalette.solid"
+          }
+        },
+        indicator: {
+          borderColor: "border",
+          color: "colorPalette.fg",
+          "&:is([data-state=checked], [data-state=indeterminate])": {
+            borderColor: "colorPalette.solid"
+          }
+        }
+      }
+    },
+    justify: {
+      start: {
+        root: {
+          "--checkbox-card-justify": "flex-start"
+        }
+      },
+      end: {
+        root: {
+          "--checkbox-card-justify": "flex-end"
+        }
+      },
+      center: {
+        root: {
+          "--checkbox-card-justify": "center"
+        }
+      }
+    },
+    align: {
+      start: {
+        root: {
+          "--checkbox-card-align": "flex-start"
+        },
+        content: {
+          textAlign: "start"
+        }
+      },
+      end: {
+        root: {
+          "--checkbox-card-align": "flex-end"
+        },
+        content: {
+          textAlign: "end"
+        }
+      },
+      center: {
+        root: {
+          "--checkbox-card-align": "center"
+        },
+        content: {
+          textAlign: "center"
+        }
+      }
+    },
+    orientation: {
+      vertical: {
+        control: {
+          flexDirection: "column"
+        }
+      },
+      horizontal: {
+        control: {
+          flexDirection: "row"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "outline",
+    align: "start",
+    orientation: "horizontal"
+  }
+});
+
+export { checkboxCardSlotRecipe };

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

@@ -0,0 +1,130 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const checkboxSlotRecipe = defineSlotRecipe({
+  slots: ["root", "label", "control", "indicator", "group"],
+  className: "checkbox",
+  base: {
+    root: {
+      display: "inline-flex",
+      gap: "2",
+      alignItems: "center",
+      verticalAlign: "top",
+      position: "relative"
+    },
+    control: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: "0",
+      color: "white",
+      borderWidth: "1px",
+      borderColor: "transparent",
+      borderRadius: "l1",
+      focusVisibleRing: "outside",
+      _icon: {
+        boxSize: "full"
+      },
+      _invalid: {
+        colorPalette: "red",
+        borderColor: "border.error"
+      },
+      _disabled: {
+        opacity: "0.5"
+      }
+    },
+    label: {
+      fontWeight: "medium",
+      userSelect: "none",
+      _disabled: {
+        opacity: "0.5"
+      }
+    }
+  },
+  variants: {
+    size: {
+      xs: {
+        root: {
+          gap: "1.5"
+        },
+        label: {
+          textStyle: "xs"
+        },
+        control: {
+          boxSize: "3"
+        }
+      },
+      sm: {
+        root: {
+          gap: "2"
+        },
+        label: {
+          textStyle: "sm"
+        },
+        control: {
+          boxSize: "4"
+        }
+      },
+      md: {
+        root: {
+          gap: "2.5"
+        },
+        label: {
+          textStyle: "sm"
+        },
+        control: {
+          boxSize: "5",
+          p: "0.5"
+        }
+      },
+      lg: {
+        root: {
+          gap: "3"
+        },
+        label: {
+          textStyle: "md"
+        },
+        control: {
+          boxSize: "6",
+          p: "0.5"
+        }
+      }
+    },
+    variant: {
+      outline: {
+        control: {
+          borderColor: "border",
+          "&:is([data-state=checked], [data-state=indeterminate])": {
+            color: "colorPalette.fg",
+            borderColor: "colorPalette.solid"
+          }
+        }
+      },
+      solid: {
+        control: {
+          borderColor: "border",
+          "&:is([data-state=checked], [data-state=indeterminate])": {
+            bg: "colorPalette.solid",
+            color: "colorPalette.contrast",
+            borderColor: "colorPalette.solid"
+          }
+        }
+      },
+      subtle: {
+        control: {
+          bg: "colorPalette.muted",
+          borderColor: "colorPalette.muted",
+          "&:is([data-state=checked], [data-state=indeterminate])": {
+            color: "colorPalette.fg"
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "solid",
+    size: "md"
+  }
+});
+
+export { checkboxSlotRecipe };

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

@@ -0,0 +1,22 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const collapsibleSlotRecipe = defineSlotRecipe({
+  slots: ["root", "trigger", "content"],
+  className: "collapsible",
+  base: {
+    content: {
+      overflow: "hidden",
+      _open: {
+        animationName: "expand-height, fade-in",
+        animationDuration: "moderate"
+      },
+      _closed: {
+        animationName: "collapse-height, fade-out",
+        animationDuration: "moderate"
+      }
+    }
+  }
+});
+
+export { collapsibleSlotRecipe };