mainbase-ui 1.2.5 → 3.36.0

package/dist/esm/theme/recipes/color-picker.js

@@ -0,0 +1,260 @@
+import { colorPickerAnatomy } from '../../anatomy.js';
+import { defineSlotRecipe } from '../../styled-system/config.js';
+import { colorSwatchRecipe } from './color-swatch.js';
+import { inputRecipe } from './input.js';
+
+const colorPickerSlotRecipe = defineSlotRecipe({
+  className: "colorPicker",
+  slots: colorPickerAnatomy.keys(),
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "1.5"
+    },
+    label: {
+      color: "fg",
+      fontWeight: "medium",
+      textStyle: "sm",
+      _disabled: {
+        opacity: "0.5"
+      }
+    },
+    valueText: {
+      textAlign: "start"
+    },
+    control: {
+      display: "flex",
+      alignItems: "center",
+      flexDirection: "row",
+      gap: "2",
+      position: "relative"
+    },
+    swatchTrigger: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    trigger: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexDirection: "row",
+      flexShrink: "0",
+      gap: "2",
+      textStyle: "sm",
+      minH: "var(--input-height)",
+      minW: "var(--input-height)",
+      px: "1",
+      rounded: "l2",
+      _disabled: { opacity: "0.5" },
+      "--focus-color": "colors.colorPalette.focusRing",
+      "&:focus-visible": {
+        borderColor: "var(--focus-color)",
+        outline: "1px solid var(--focus-color)"
+      },
+      "&[data-fit-content]": {
+        "--input-height": "unset",
+        px: "0",
+        border: "0"
+      }
+    },
+    content: {
+      display: "flex",
+      flexDirection: "column",
+      bg: "bg.panel",
+      borderRadius: "l3",
+      boxShadow: "lg",
+      width: "64",
+      p: "4",
+      gap: "3",
+      "--color-picker-z-index": "zIndex.popover",
+      zIndex: "calc(var(--color-picker-z-index) + var(--layer-index, 0))",
+      _open: {
+        animationStyle: "slide-fade-in",
+        animationDuration: "fast"
+      },
+      _closed: {
+        animationStyle: "slide-fade-out",
+        animationDuration: "faster"
+      }
+    },
+    area: {
+      height: "180px",
+      borderRadius: "l2",
+      overflow: "hidden"
+    },
+    areaThumb: {
+      borderRadius: "full",
+      height: "var(--thumb-size)",
+      width: "var(--thumb-size)",
+      borderWidth: "2px",
+      borderColor: "white",
+      shadow: "sm",
+      focusVisibleRing: "mixed",
+      focusRingColor: "white"
+    },
+    areaBackground: {
+      height: "full"
+    },
+    channelSlider: {
+      borderRadius: "l2",
+      flex: "1"
+    },
+    channelSliderTrack: {
+      height: "var(--slider-height)",
+      borderRadius: "inherit",
+      boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.1)"
+    },
+    channelText: {
+      textStyle: "xs",
+      color: "fg.muted",
+      fontWeight: "medium",
+      textTransform: "capitalize"
+    },
+    swatchGroup: {
+      display: "flex",
+      flexDirection: "row",
+      flexWrap: "wrap",
+      gap: "2"
+    },
+    swatch: {
+      ...colorSwatchRecipe.base,
+      borderRadius: "l1"
+    },
+    swatchIndicator: {
+      color: "white",
+      rounded: "full"
+    },
+    channelSliderThumb: {
+      borderRadius: "full",
+      height: "var(--thumb-size)",
+      width: "var(--thumb-size)",
+      borderWidth: "2px",
+      borderColor: "white",
+      shadow: "sm",
+      transform: "translate(-50%, -50%)",
+      focusVisibleRing: "outside",
+      focusRingOffset: "1px"
+    },
+    channelInput: {
+      ...inputRecipe.base,
+      "&::-webkit-inner-spin-button, &::-webkit-outer-spin-button": {
+        WebkitAppearance: "none",
+        margin: 0
+      }
+    },
+    formatSelect: {
+      textStyle: "xs",
+      textTransform: "uppercase",
+      borderWidth: "1px",
+      minH: "6",
+      focusRing: "inside",
+      rounded: "l2"
+    },
+    transparencyGrid: {
+      borderRadius: "l2"
+    },
+    view: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "2"
+    }
+  },
+  variants: {
+    size: {
+      "2xs": {
+        channelInput: inputRecipe.variants?.size?.["2xs"],
+        swatch: { "--swatch-size": "sizes.4.5" },
+        trigger: { "--input-height": "sizes.7" },
+        area: { "--thumb-size": "sizes.3" },
+        channelSlider: {
+          "--slider-height": "sizes.3",
+          "--thumb-size": "sizes.3"
+        }
+      },
+      xs: {
+        channelInput: inputRecipe.variants?.size?.xs,
+        swatch: { "--swatch-size": "sizes.5" },
+        trigger: { "--input-height": "sizes.8" },
+        area: { "--thumb-size": "sizes.3.5" },
+        channelSlider: {
+          "--slider-height": "sizes.3.5",
+          "--thumb-size": "sizes.3.5"
+        }
+      },
+      sm: {
+        channelInput: inputRecipe.variants?.size?.sm,
+        swatch: { "--swatch-size": "sizes.6" },
+        trigger: { "--input-height": "sizes.9" },
+        area: { "--thumb-size": "sizes.3.5" },
+        channelSlider: {
+          "--slider-height": "sizes.3.5",
+          "--thumb-size": "sizes.3.5"
+        }
+      },
+      md: {
+        channelInput: inputRecipe.variants?.size?.md,
+        swatch: { "--swatch-size": "sizes.7" },
+        trigger: { "--input-height": "sizes.10" },
+        area: { "--thumb-size": "sizes.3.5" },
+        channelSlider: {
+          "--slider-height": "sizes.3.5",
+          "--thumb-size": "sizes.3.5"
+        }
+      },
+      lg: {
+        channelInput: inputRecipe.variants?.size?.lg,
+        swatch: { "--swatch-size": "sizes.7" },
+        trigger: { "--input-height": "sizes.11" },
+        area: { "--thumb-size": "sizes.3.5" },
+        channelSlider: {
+          "--slider-height": "sizes.3.5",
+          "--thumb-size": "sizes.3.5"
+        }
+      },
+      xl: {
+        channelInput: inputRecipe.variants?.size?.xl,
+        swatch: { "--swatch-size": "sizes.8" },
+        trigger: { "--input-height": "sizes.12" },
+        area: { "--thumb-size": "sizes.3.5" },
+        channelSlider: {
+          "--slider-height": "sizes.3.5",
+          "--thumb-size": "sizes.3.5"
+        }
+      },
+      "2xl": {
+        channelInput: inputRecipe.variants?.size?.["2xl"],
+        swatch: { "--swatch-size": "sizes.10" },
+        trigger: { "--input-height": "sizes.16" },
+        area: { "--thumb-size": "sizes.3.5" },
+        channelSlider: {
+          "--slider-height": "sizes.3.5",
+          "--thumb-size": "sizes.3.5"
+        }
+      }
+    },
+    variant: {
+      outline: {
+        channelInput: inputRecipe.variants?.variant?.outline,
+        trigger: {
+          borderWidth: "1px"
+        }
+      },
+      subtle: {
+        channelInput: inputRecipe.variants?.variant?.subtle,
+        trigger: {
+          borderWidth: "1px",
+          borderColor: "transparent",
+          bg: "bg.muted"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "outline"
+  }
+});
+
+export { colorPickerSlotRecipe };

package/dist/esm/theme/recipes/color-swatch.js

@@ -0,0 +1,41 @@
+import { defineRecipe } from '../../styled-system/config.js';
+
+const colorSwatchRecipe = defineRecipe({
+  className: "color-swatch",
+  base: {
+    boxSize: "var(--swatch-size)",
+    shadow: "inset 0 0 0 1px rgba(0, 0, 0, 0.1)",
+    "--checker-size": "8px",
+    "--checker-bg": "colors.bg",
+    "--checker-fg": "colors.bg.emphasized",
+    background: "linear-gradient(var(--color), var(--color)), repeating-conic-gradient(var(--checker-fg) 0%, var(--checker-fg) 25%, var(--checker-bg) 0%, var(--checker-bg) 50%) 0% 50% / var(--checker-size) var(--checker-size) !important",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: "0"
+  },
+  variants: {
+    size: {
+      "2xs": { "--swatch-size": "sizes.3.5" },
+      xs: { "--swatch-size": "sizes.4" },
+      sm: { "--swatch-size": "sizes.4.5" },
+      md: { "--swatch-size": "sizes.5" },
+      lg: { "--swatch-size": "sizes.6" },
+      xl: { "--swatch-size": "sizes.7" },
+      "2xl": { "--swatch-size": "sizes.8" },
+      inherit: { "--swatch-size": "inherit" },
+      full: { "--swatch-size": "100%" }
+    },
+    shape: {
+      square: { borderRadius: "none" },
+      circle: { borderRadius: "full" },
+      rounded: { borderRadius: "l1" }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    shape: "rounded"
+  }
+});
+
+export { colorSwatchRecipe };

package/dist/esm/theme/recipes/combobox.js

@@ -0,0 +1,290 @@
+import { comboboxAnatomy } from '../../anatomy.js';
+import { defineSlotRecipe } from '../../styled-system/config.js';
+
+const comboboxSlotRecipe = defineSlotRecipe({
+  className: "mainbase-combobox",
+  slots: comboboxAnatomy.keys(),
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "1.5",
+      width: "full"
+    },
+    label: {
+      fontWeight: "medium",
+      userSelect: "none",
+      textStyle: "sm",
+      _disabled: {
+        layerStyle: "disabled"
+      }
+    },
+    control: {
+      pos: "relative",
+      "--padding-factor": "1",
+      "--combobox-input-padding-end": "var(--combobox-input-padding-x)",
+      "&:has([data-part=trigger]), &:has([data-part=clear-trigger])": {
+        "--combobox-input-padding-end": "calc(var(--combobox-input-height) * var(--padding-factor))"
+      },
+      "&:has([data-part=trigger]):has([data-part=clear-trigger]:not([hidden]))": {
+        "--padding-factor": "1.5"
+      }
+    },
+    input: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      background: "bg.panel",
+      width: "full",
+      minH: "var(--combobox-input-height)",
+      ps: "var(--combobox-input-padding-x)",
+      pe: "var(--combobox-input-padding-end)",
+      "--input-height": "var(--combobox-input-height)",
+      borderRadius: "l2",
+      outline: 0,
+      userSelect: "none",
+      textAlign: "start",
+      _placeholderShown: {
+        color: "fg.muted"
+      },
+      _disabled: {
+        layerStyle: "disabled"
+      },
+      "--focus-color": "colors.colorPalette.focusRing",
+      "--error-color": "colors.border.error",
+      _invalid: {
+        focusRingColor: "var(--error-color)",
+        borderColor: "var(--error-color)"
+      }
+    },
+    trigger: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      "--input-height": "var(--combobox-input-height)"
+    },
+    clearTrigger: {
+      color: "fg.muted",
+      pointerEvents: "auto",
+      focusVisibleRing: "inside",
+      focusRingWidth: "2px",
+      rounded: "l1"
+    },
+    indicatorGroup: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "1",
+      pos: "absolute",
+      insetEnd: "0",
+      top: "0",
+      bottom: "0",
+      px: "var(--combobox-input-padding-x)",
+      _icon: {
+        boxSize: "var(--combobox-indicator-size)"
+      },
+      "[data-disabled] &": {
+        opacity: 0.5
+      }
+    },
+    content: {
+      background: "bg.panel",
+      display: "flex",
+      flexDirection: "column",
+      "--combobox-z-index": "zIndex.popover",
+      zIndex: "calc(var(--combobox-z-index) + var(--layer-index, 0))",
+      borderRadius: "l2",
+      outline: 0,
+      maxH: "96",
+      overflowY: "auto",
+      boxShadow: "md",
+      _open: {
+        animationStyle: "slide-fade-in",
+        animationDuration: "fast"
+      },
+      _closed: {
+        animationStyle: "slide-fade-out",
+        animationDuration: "0s"
+      },
+      "&[data-empty]:not(:has([data-scope=combobox][data-part=empty]))": {
+        opacity: 0
+      }
+    },
+    item: {
+      position: "relative",
+      userSelect: "none",
+      display: "flex",
+      alignItems: "center",
+      gap: "2",
+      py: "var(--combobox-item-padding-y)",
+      px: "var(--combobox-item-padding-x)",
+      cursor: "option",
+      justifyContent: "space-between",
+      flex: "1",
+      textAlign: "start",
+      borderRadius: "l1",
+      _highlighted: {
+        bg: "bg.emphasized/60"
+      },
+      _disabled: {
+        pointerEvents: "none",
+        opacity: "0.5"
+      },
+      _icon: {
+        boxSize: "var(--combobox-indicator-size)"
+      }
+    },
+    empty: {
+      py: "var(--combobox-item-padding-y)",
+      px: "var(--combobox-item-padding-x)"
+    },
+    itemText: {
+      flex: "1"
+    },
+    itemGroup: {
+      pb: "var(--combobox-item-padding-y)",
+      _last: {
+        pb: "0"
+      }
+    },
+    itemGroupLabel: {
+      fontWeight: "medium",
+      py: "var(--combobox-item-padding-y)",
+      px: "var(--combobox-item-padding-x)"
+    }
+  },
+  variants: {
+    variant: {
+      outline: {
+        input: {
+          bg: "transparent",
+          borderWidth: "1px",
+          borderColor: "border",
+          focusVisibleRing: "inside"
+        }
+      },
+      subtle: {
+        input: {
+          borderWidth: "1px",
+          borderColor: "transparent",
+          bg: "bg.muted",
+          focusVisibleRing: "inside"
+        }
+      },
+      flushed: {
+        input: {
+          bg: "transparent",
+          borderBottomWidth: "1px",
+          borderBottomColor: "border",
+          borderRadius: "0",
+          px: "0",
+          _focusVisible: {
+            borderColor: "var(--focus-color)",
+            boxShadow: "0px 1px 0px 0px var(--focus-color)"
+          }
+        },
+        indicatorGroup: {
+          px: "0"
+        }
+      }
+    },
+    size: {
+      xs: {
+        root: {
+          "--combobox-input-height": "sizes.8",
+          "--combobox-input-padding-x": "spacing.2",
+          "--combobox-indicator-size": "sizes.3.5"
+        },
+        input: {
+          textStyle: "xs"
+        },
+        content: {
+          "--combobox-item-padding-x": "spacing.1.5",
+          "--combobox-item-padding-y": "spacing.1",
+          "--combobox-indicator-size": "sizes.3.5",
+          p: "1",
+          textStyle: "xs"
+        },
+        trigger: {
+          textStyle: "xs",
+          gap: "1"
+        }
+      },
+      sm: {
+        root: {
+          "--combobox-input-height": "sizes.9",
+          "--combobox-input-padding-x": "spacing.2.5",
+          "--combobox-indicator-size": "sizes.4"
+        },
+        input: {
+          textStyle: "sm"
+        },
+        content: {
+          "--combobox-item-padding-x": "spacing.2",
+          "--combobox-item-padding-y": "spacing.1.5",
+          "--combobox-indicator-size": "sizes.4",
+          p: "1",
+          textStyle: "sm"
+        },
+        trigger: {
+          textStyle: "sm",
+          gap: "1"
+        }
+      },
+      md: {
+        root: {
+          "--combobox-input-height": "sizes.10",
+          "--combobox-input-padding-x": "spacing.3",
+          "--combobox-indicator-size": "sizes.4"
+        },
+        input: {
+          textStyle: "sm"
+        },
+        content: {
+          "--combobox-item-padding-x": "spacing.2",
+          "--combobox-item-padding-y": "spacing.1.5",
+          "--combobox-indicator-size": "sizes.4",
+          p: "1",
+          textStyle: "sm"
+        },
+        itemIndicator: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        trigger: {
+          textStyle: "sm",
+          gap: "2"
+        }
+      },
+      lg: {
+        root: {
+          "--combobox-input-height": "sizes.12",
+          "--combobox-input-padding-x": "spacing.4",
+          "--combobox-indicator-size": "sizes.5"
+        },
+        input: {
+          textStyle: "md"
+        },
+        content: {
+          "--combobox-item-padding-y": "spacing.2",
+          "--combobox-item-padding-x": "spacing.3",
+          "--combobox-indicator-size": "sizes.5",
+          p: "1.5",
+          textStyle: "md"
+        },
+        trigger: {
+          textStyle: "md",
+          py: "3",
+          gap: "2"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "outline"
+  }
+});
+
+export { comboboxSlotRecipe };

package/dist/esm/theme/recipes/container.js

@@ -0,0 +1,28 @@
+import { defineRecipe } from '../../styled-system/config.js';
+
+const containerRecipe = defineRecipe({
+  className: "mainbase-container",
+  base: {
+    position: "relative",
+    maxWidth: "8xl",
+    w: "100%",
+    mx: "auto",
+    px: { base: "4", md: "6", lg: "8" }
+  },
+  variants: {
+    centerContent: {
+      true: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center"
+      }
+    },
+    fluid: {
+      true: {
+        maxWidth: "full"
+      }
+    }
+  }
+});
+
+export { containerRecipe };

package/dist/esm/theme/recipes/data-list.js

@@ -0,0 +1,96 @@
+import { dataListAnatomy } from '../../anatomy.js';
+import { defineSlotRecipe } from '../../styled-system/config.js';
+
+const dataListSlotRecipe = defineSlotRecipe({
+  slots: dataListAnatomy.keys(),
+  className: "mainbase-data-list",
+  base: {
+    itemLabel: {
+      display: "flex",
+      alignItems: "center",
+      gap: "1"
+    },
+    itemValue: {
+      display: "flex",
+      minWidth: "0",
+      flex: "1"
+    }
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        root: {
+          display: "flex",
+          flexDirection: "column"
+        },
+        item: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: "4"
+        },
+        itemLabel: {
+          minWidth: "120px"
+        }
+      },
+      vertical: {
+        root: {
+          display: "flex",
+          flexDirection: "column"
+        },
+        item: {
+          display: "flex",
+          flexDirection: "column",
+          gap: "1"
+        }
+      }
+    },
+    size: {
+      sm: {
+        root: {
+          gap: "3"
+        },
+        item: {
+          textStyle: "xs"
+        }
+      },
+      md: {
+        root: {
+          gap: "4"
+        },
+        item: {
+          textStyle: "sm"
+        }
+      },
+      lg: {
+        root: {
+          gap: "5"
+        },
+        item: {
+          textStyle: "md"
+        }
+      }
+    },
+    variant: {
+      subtle: {
+        itemLabel: {
+          color: "fg.muted"
+        }
+      },
+      bold: {
+        itemLabel: {
+          fontWeight: "medium"
+        },
+        itemValue: {
+          color: "fg.muted"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    orientation: "vertical",
+    variant: "subtle"
+  }
+});
+
+export { dataListSlotRecipe };