mainbase-ui 1.2.5 → 3.37.0

package/dist/esm/theme/index.js

@@ -0,0 +1,149 @@
+import { defineConfig } from '../styled-system/config.js';
+import { breakpoints } from './breakpoints.js';
+import { globalCss } from './global-css.js';
+import { layerStyles } from './layer-styles.js';
+import { animationStyles } from './motion-styles.js';
+import { recipes } from './recipes.js';
+import { semanticColors } from './semantic-tokens/colors.js';
+import { semanticRadii } from './semantic-tokens/radii.js';
+import { semanticShadows } from './semantic-tokens/shadows.js';
+import { slotRecipes } from './slot-recipes.js';
+import { textStyles } from './text-styles.js';
+import { animations } from './tokens/animations.js';
+import { aspectRatios } from './tokens/aspect-ratios.js';
+import { blurs } from './tokens/blurs.js';
+import { borders } from './tokens/borders.js';
+import { colors } from './tokens/colors.js';
+import { cursor } from './tokens/cursor.js';
+import { durations } from './tokens/durations.js';
+import { easings } from './tokens/easings.js';
+import { fontSizes } from './tokens/font-sizes.js';
+import { fontWeights } from './tokens/font-weights.js';
+import { fonts } from './tokens/fonts.js';
+import { keyframes } from './tokens/keyframes.js';
+import { letterSpacings } from './tokens/letter-spacing.js';
+import { lineHeights } from './tokens/line-heights.js';
+import { radii } from './tokens/radius.js';
+import { sizes } from './tokens/sizes.js';
+import { spacing } from './tokens/spacing.js';
+import { zIndices } from './tokens/z-indices.js';
+export { accordionSlotRecipe } from './recipes/accordion.js';
+export { actionBarSlotRecipe } from './recipes/action-bar.js';
+export { alertSlotRecipe } from './recipes/alert.js';
+export { avatarSlotRecipe } from './recipes/avatar.js';
+export { badgeRecipe } from './recipes/badge.js';
+export { blockquoteSlotRecipe } from './recipes/blockquote.js';
+export { breadcrumbSlotRecipe } from './recipes/breadcrumb.js';
+export { buttonRecipe } from './recipes/button.js';
+export { cardSlotRecipe } from './recipes/card.js';
+export { carouselSlotRecipe } from './recipes/carousel.js';
+export { checkboxCardSlotRecipe } from './recipes/checkbox-card.js';
+export { checkboxSlotRecipe } from './recipes/checkbox.js';
+export { checkmarkRecipe } from './recipes/checkmark.js';
+export { codeBlockSlotRecipe } from './recipes/code-block.js';
+export { codeRecipe } from './recipes/code.js';
+export { collapsibleSlotRecipe } from './recipes/collapsible.js';
+export { colorPickerSlotRecipe } from './recipes/color-picker.js';
+export { colorSwatchRecipe } from './recipes/color-swatch.js';
+export { comboboxSlotRecipe } from './recipes/combobox.js';
+export { containerRecipe } from './recipes/container.js';
+export { dataListSlotRecipe } from './recipes/data-list.js';
+export { datePickerSlotRecipe } from './recipes/date-picker.js';
+export { dialogSlotRecipe } from './recipes/dialog.js';
+export { drawerSlotRecipe } from './recipes/drawer.js';
+export { editableSlotRecipe } from './recipes/editable.js';
+export { emptyStateSlotRecipe } from './recipes/empty-state.js';
+export { fieldSlotRecipe } from './recipes/field.js';
+export { fieldsetSlotRecipe } from './recipes/fieldset.js';
+export { fileUploadSlotRecipe } from './recipes/file-upload.js';
+export { headingRecipe } from './recipes/heading.js';
+export { hoverCardSlotRecipe } from './recipes/hover-card.js';
+export { iconRecipe } from './recipes/icon.js';
+export { inputAddonRecipe } from './recipes/input-addon.js';
+export { inputRecipe } from './recipes/input.js';
+export { kbdRecipe } from './recipes/kbd.js';
+export { linkRecipe } from './recipes/link.js';
+export { listSlotRecipe } from './recipes/list.js';
+export { listboxSlotRecipe } from './recipes/listbox.js';
+export { markRecipe } from './recipes/mark.js';
+export { marqueeSlotRecipe } from './recipes/marquee.js';
+export { menuSlotRecipe } from './recipes/menu.js';
+export { nativeSelectSlotRecipe } from './recipes/native-select.js';
+export { numberInputSlotRecipe } from './recipes/number-input.js';
+export { pinInputSlotRecipe } from './recipes/pin-input.js';
+export { popoverSlotRecipe } from './recipes/popover.js';
+export { progressCircleSlotRecipe } from './recipes/progress-circle.js';
+export { progressSlotRecipe } from './recipes/progress.js';
+export { qrCodeSlotRecipe } from './recipes/qr-code.js';
+export { radioCardSlotRecipe } from './recipes/radio-card.js';
+export { radioGroupSlotRecipe } from './recipes/radio-group.js';
+export { radiomarkRecipe } from './recipes/radiomark.js';
+export { ratingGroupSlotRecipe } from './recipes/rating-group.js';
+export { scrollAreaSlotRecipe } from './recipes/scroll-area.js';
+export { segmentGroupSlotRecipe } from './recipes/segment-group.js';
+export { selectSlotRecipe } from './recipes/select.js';
+export { separatorRecipe } from './recipes/separator.js';
+export { skeletonRecipe } from './recipes/skeleton.js';
+export { skipNavLinkRecipe } from './recipes/skip-nav-link.js';
+export { sliderSlotRecipe } from './recipes/slider.js';
+export { spinnerRecipe } from './recipes/spinner.js';
+export { splitterSlotRecipe } from './recipes/splitter.js';
+export { statSlotRecipe } from './recipes/stat.js';
+export { statusSlotRecipe } from './recipes/status.js';
+export { stepsSlotRecipe } from './recipes/steps.js';
+export { switchSlotRecipe } from './recipes/switch.js';
+export { tableSlotRecipe } from './recipes/table.js';
+export { tabsSlotRecipe } from './recipes/tabs.js';
+export { tagSlotRecipe } from './recipes/tag.js';
+export { tagsInputSlotRecipe } from './recipes/tags-input.js';
+export { textareaRecipe } from './recipes/textarea.js';
+export { timelineSlotRecipe } from './recipes/timeline.js';
+export { toastSlotRecipe } from './recipes/toast.js';
+export { tooltipSlotRecipe } from './recipes/tooltip.js';
+export { treeViewSlotRecipe } from './recipes/tree-view.js';
+
+const tokens = {
+  aspectRatios,
+  animations,
+  blurs,
+  borders,
+  colors,
+  durations,
+  easings,
+  fonts,
+  fontSizes,
+  fontWeights,
+  letterSpacings,
+  lineHeights,
+  radii,
+  spacing,
+  sizes,
+  zIndex: zIndices,
+  cursor
+};
+const semanticTokens = {
+  colors: semanticColors,
+  shadows: semanticShadows,
+  radii: semanticRadii
+};
+const cssVarsPrefix = "mainbase";
+const cssVarsRoot = ":where(html, .mainbase-theme)";
+const defaultThemeConfig = defineConfig({
+  preflight: true,
+  cssVarsPrefix,
+  cssVarsRoot,
+  globalCss,
+  theme: {
+    breakpoints,
+    keyframes,
+    tokens,
+    semanticTokens,
+    recipes,
+    slotRecipes,
+    textStyles,
+    layerStyles,
+    animationStyles
+  }
+});
+
+export { animationStyles, breakpoints, cssVarsPrefix, cssVarsRoot, defaultThemeConfig, globalCss, keyframes, layerStyles, recipes, semanticTokens, slotRecipes, textStyles, tokens };

package/dist/esm/theme/layer-styles.js

@@ -0,0 +1,114 @@
+import { defineLayerStyles } from '../styled-system/config.js';
+
+const layerStyles = defineLayerStyles({
+  // fill: some background color + color combination
+  "fill.muted": {
+    value: {
+      background: "colorPalette.muted",
+      color: "colorPalette.fg"
+    }
+  },
+  "fill.subtle": {
+    value: {
+      background: "colorPalette.subtle",
+      color: "colorPalette.fg"
+    }
+  },
+  "fill.surface": {
+    value: {
+      background: "colorPalette.subtle",
+      color: "colorPalette.fg",
+      boxShadow: "0 0 0px 1px var(--shadow-color)",
+      boxShadowColor: "colorPalette.muted"
+    }
+  },
+  "fill.solid": {
+    value: {
+      background: "colorPalette.solid",
+      color: "colorPalette.contrast"
+    }
+  },
+  // outline: some border color + color combination
+  "outline.subtle": {
+    value: {
+      color: "colorPalette.fg",
+      boxShadow: "inset 0 0 0px 1px var(--shadow-color)",
+      boxShadowColor: "colorPalette.subtle"
+    }
+  },
+  "outline.solid": {
+    value: {
+      borderWidth: "1px",
+      borderColor: "colorPalette.solid",
+      color: "colorPalette.fg"
+    }
+  },
+  // indicator: floating border color or left/bottom border
+  "indicator.bottom": {
+    value: {
+      position: "relative",
+      "--indicator-color-fallback": "colors.colorPalette.solid",
+      _before: {
+        content: `""`,
+        position: "absolute",
+        bottom: "var(--indicator-offset-y, 0)",
+        insetInline: "var(--indicator-offset-x, 0)",
+        height: "var(--indicator-thickness, 2px)",
+        background: "var(--indicator-color, var(--indicator-color-fallback))"
+      }
+    }
+  },
+  "indicator.top": {
+    value: {
+      position: "relative",
+      "--indicator-color-fallback": "colors.colorPalette.solid",
+      _before: {
+        content: `""`,
+        position: "absolute",
+        top: "var(--indicator-offset-y, 0)",
+        insetInline: "var(--indicator-offset-x, 0)",
+        height: "var(--indicator-thickness, 2px)",
+        background: "var(--indicator-color, var(--indicator-color-fallback))"
+      }
+    }
+  },
+  "indicator.start": {
+    value: {
+      position: "relative",
+      "--indicator-color-fallback": "colors.colorPalette.solid",
+      _before: {
+        content: `""`,
+        position: "absolute",
+        insetInlineStart: "var(--indicator-offset-x, 0)",
+        insetBlock: "var(--indicator-offset-y, 0)",
+        width: "var(--indicator-thickness, 2px)",
+        background: "var(--indicator-color, var(--indicator-color-fallback))"
+      }
+    }
+  },
+  "indicator.end": {
+    value: {
+      position: "relative",
+      "--indicator-color-fallback": "colors.colorPalette.solid",
+      _before: {
+        content: `""`,
+        position: "absolute",
+        insetInlineEnd: "var(--indicator-offset-x, 0)",
+        insetBlock: "var(--indicator-offset-y, 0)",
+        width: "var(--indicator-thickness, 2px)",
+        background: "var(--indicator-color, var(--indicator-color-fallback))"
+      }
+    }
+  },
+  disabled: {
+    value: {
+      opacity: "0.5",
+      cursor: "not-allowed"
+    }
+  },
+  none: {
+    value: {}
+  }
+});
+
+export { layerStyles };

package/dist/esm/theme/motion-styles.js

@@ -0,0 +1,52 @@
+import { defineAnimationStyles } from '../styled-system/config.js';
+
+const animationStyles = defineAnimationStyles({
+  "slide-fade-in": {
+    value: {
+      transformOrigin: "var(--transform-origin)",
+      "&[data-placement^=top]": {
+        animationName: "slide-from-bottom, fade-in"
+      },
+      "&[data-placement^=bottom]": {
+        animationName: "slide-from-top, fade-in"
+      },
+      "&[data-placement^=left]": {
+        animationName: "slide-from-right, fade-in"
+      },
+      "&[data-placement^=right]": {
+        animationName: "slide-from-left, fade-in"
+      }
+    }
+  },
+  "slide-fade-out": {
+    value: {
+      transformOrigin: "var(--transform-origin)",
+      "&[data-placement^=top]": {
+        animationName: "slide-to-bottom, fade-out"
+      },
+      "&[data-placement^=bottom]": {
+        animationName: "slide-to-top, fade-out"
+      },
+      "&[data-placement^=left]": {
+        animationName: "slide-to-right, fade-out"
+      },
+      "&[data-placement^=right]": {
+        animationName: "slide-to-left, fade-out"
+      }
+    }
+  },
+  "scale-fade-in": {
+    value: {
+      transformOrigin: "var(--transform-origin)",
+      animationName: "scale-in, fade-in"
+    }
+  },
+  "scale-fade-out": {
+    value: {
+      transformOrigin: "var(--transform-origin)",
+      animationName: "scale-out, fade-out"
+    }
+  }
+});
+
+export { animationStyles };

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

@@ -0,0 +1,142 @@
+import { accordionAnatomy } from '../../anatomy.js';
+import { defineSlotRecipe } from '../../styled-system/config.js';
+
+const accordionSlotRecipe = defineSlotRecipe({
+  className: "mainbase-accordion",
+  slots: accordionAnatomy.keys(),
+  base: {
+    root: {
+      width: "full",
+      "--accordion-radius": "radii.l2"
+    },
+    item: {
+      overflowAnchor: "none"
+    },
+    itemTrigger: {
+      display: "flex",
+      alignItems: "center",
+      textAlign: "start",
+      width: "full",
+      outline: "0",
+      gap: "3",
+      fontWeight: "medium",
+      borderRadius: "var(--accordion-radius)",
+      _focusVisible: {
+        outline: "2px solid",
+        outlineColor: "colorPalette.focusRing"
+      },
+      _disabled: {
+        layerStyle: "disabled"
+      }
+    },
+    itemBody: {
+      pt: "var(--accordion-padding-y)",
+      pb: "calc(var(--accordion-padding-y) * 2)"
+    },
+    itemContent: {
+      overflow: "hidden",
+      borderRadius: "var(--accordion-radius)",
+      _open: {
+        animationName: "expand-height, fade-in",
+        animationDuration: "moderate"
+      },
+      _closed: {
+        animationName: "collapse-height, fade-out",
+        animationDuration: "moderate"
+      }
+    },
+    itemIndicator: {
+      transition: "rotate 0.2s",
+      transformOrigin: "center",
+      color: "fg.subtle",
+      _open: {
+        rotate: "180deg"
+      },
+      _icon: {
+        width: "1.2em",
+        height: "1.2em"
+      }
+    }
+  },
+  variants: {
+    variant: {
+      outline: {
+        item: {
+          borderBottomWidth: "1px"
+        }
+      },
+      subtle: {
+        itemTrigger: {
+          px: "var(--accordion-padding-x)"
+        },
+        itemContent: {
+          px: "var(--accordion-padding-x)"
+        },
+        item: {
+          borderRadius: "var(--accordion-radius)",
+          _open: {
+            bg: "colorPalette.subtle"
+          }
+        }
+      },
+      enclosed: {
+        root: {
+          borderWidth: "1px",
+          borderRadius: "var(--accordion-radius)",
+          divideY: "1px",
+          overflow: "hidden"
+        },
+        itemTrigger: {
+          px: "var(--accordion-padding-x)"
+        },
+        itemContent: {
+          px: "var(--accordion-padding-x)"
+        },
+        item: {
+          _open: {
+            bg: "bg.subtle"
+          }
+        }
+      },
+      plain: {}
+    },
+    size: {
+      sm: {
+        root: {
+          "--accordion-padding-x": "spacing.3",
+          "--accordion-padding-y": "spacing.2"
+        },
+        itemTrigger: {
+          textStyle: "sm",
+          py: "var(--accordion-padding-y)"
+        }
+      },
+      md: {
+        root: {
+          "--accordion-padding-x": "spacing.4",
+          "--accordion-padding-y": "spacing.2"
+        },
+        itemTrigger: {
+          textStyle: "md",
+          py: "var(--accordion-padding-y)"
+        }
+      },
+      lg: {
+        root: {
+          "--accordion-padding-x": "spacing.4.5",
+          "--accordion-padding-y": "spacing.2.5"
+        },
+        itemTrigger: {
+          textStyle: "lg",
+          py: "var(--accordion-padding-y)"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "outline"
+  }
+});
+
+export { accordionSlotRecipe };

package/dist/esm/theme/recipes/action-bar.js

@@ -0,0 +1,84 @@
+import { actionBarAnatomy } from '../../anatomy.js';
+import { defineSlotRecipe } from '../../styled-system/config.js';
+
+const actionBarSlotRecipe = defineSlotRecipe({
+  className: "mainbase-action-bar",
+  slots: actionBarAnatomy.keys(),
+  base: {
+    positioner: {
+      position: "fixed",
+      display: "flex",
+      pointerEvents: "none",
+      insetInline: "0",
+      "--action-bar-offset": "spacing.4"
+    },
+    content: {
+      bg: "bg.panel",
+      shadow: "md",
+      display: "flex",
+      alignItems: "center",
+      gap: "3",
+      borderRadius: "l3",
+      py: "2.5",
+      px: "3",
+      pointerEvents: "auto",
+      // Stabilize the position of the action bar when the scrollbar is hidden
+      // by using the scrollbar width to offset the position.
+      translate: "calc(-1 * var(--scrollbar-width) / 2) 0px",
+      _open: {
+        animationName: "slide-from-bottom, fade-in",
+        animationDuration: "moderate"
+      },
+      _closed: {
+        animationName: "slide-to-bottom, fade-out",
+        animationDuration: "faster"
+      }
+    },
+    separator: {
+      width: "1px",
+      height: "5",
+      bg: "border"
+    },
+    selectionTrigger: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "2",
+      alignSelf: "stretch",
+      textStyle: "sm",
+      px: "4",
+      py: "1",
+      borderRadius: "l2",
+      borderWidth: "1px",
+      borderStyle: "dashed"
+    }
+  },
+  variants: {
+    placement: {
+      bottom: {
+        positioner: {
+          bottom: "calc(env(safe-area-inset-bottom) + var(--action-bar-offset))",
+          justifyContent: "center"
+        }
+      },
+      "bottom-start": {
+        positioner: {
+          bottom: "calc(env(safe-area-inset-bottom) + var(--action-bar-offset))",
+          justifyContent: "flex-start",
+          ps: "var(--action-bar-offset)"
+        }
+      },
+      "bottom-end": {
+        positioner: {
+          bottom: "calc(env(safe-area-inset-bottom) + var(--action-bar-offset))",
+          justifyContent: "flex-end",
+          pe: "var(--action-bar-offset)"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    placement: "bottom"
+  }
+});
+
+export { actionBarSlotRecipe };

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

@@ -0,0 +1,153 @@
+import { alertAnatomy } from '../../anatomy.js';
+import { defineSlotRecipe } from '../../styled-system/config.js';
+
+const alertSlotRecipe = defineSlotRecipe({
+  slots: alertAnatomy.keys(),
+  className: "mainbase-alert",
+  base: {
+    root: {
+      width: "full",
+      display: "flex",
+      alignItems: "flex-start",
+      position: "relative",
+      borderRadius: "l3"
+    },
+    title: {
+      fontWeight: "medium"
+    },
+    description: {
+      display: "inline"
+    },
+    indicator: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: "0",
+      width: "1em",
+      height: "1em",
+      _icon: { boxSize: "full" }
+    },
+    content: {
+      display: "flex",
+      flex: "1",
+      gap: "1"
+    }
+  },
+  variants: {
+    status: {
+      info: {
+        root: { colorPalette: "blue" }
+      },
+      warning: {
+        root: { colorPalette: "orange" }
+      },
+      success: {
+        root: { colorPalette: "green" }
+      },
+      error: {
+        root: { colorPalette: "red" }
+      },
+      neutral: {
+        root: { colorPalette: "gray" }
+      }
+    },
+    inline: {
+      true: {
+        content: {
+          display: "inline-flex",
+          flexDirection: "row",
+          alignItems: "center"
+        }
+      },
+      false: {
+        content: {
+          display: "flex",
+          flexDirection: "column"
+        }
+      }
+    },
+    variant: {
+      subtle: {
+        root: {
+          bg: "colorPalette.subtle",
+          color: "colorPalette.fg"
+        }
+      },
+      surface: {
+        root: {
+          bg: "colorPalette.subtle",
+          color: "colorPalette.fg",
+          shadow: "inset 0 0 0px 1px var(--shadow-color)",
+          shadowColor: "colorPalette.muted"
+        },
+        indicator: {
+          color: "colorPalette.fg"
+        }
+      },
+      outline: {
+        root: {
+          color: "colorPalette.fg",
+          shadow: "inset 0 0 0px 1px var(--shadow-color)",
+          "--outline-shadow-legacy": "colors.colorPalette.muted",
+          "--outline-shadow": "colors.colorPalette.border",
+          shadowColor: "var(--outline-shadow, var(--outline-shadow-legacy))"
+        },
+        indicator: {
+          color: "colorPalette.fg"
+        }
+      },
+      solid: {
+        root: {
+          bg: "colorPalette.solid",
+          color: "colorPalette.contrast"
+        },
+        indicator: {
+          color: "colorPalette.contrast"
+        }
+      }
+    },
+    size: {
+      sm: {
+        root: {
+          gap: "2",
+          px: "3",
+          py: "3",
+          textStyle: "xs"
+        },
+        indicator: {
+          textStyle: "lg"
+        }
+      },
+      md: {
+        root: {
+          gap: "3",
+          px: "4",
+          py: "4",
+          textStyle: "sm"
+        },
+        indicator: {
+          textStyle: "xl"
+        }
+      },
+      lg: {
+        root: {
+          gap: "3",
+          px: "4",
+          py: "4",
+          textStyle: "md"
+        },
+        indicator: {
+          textStyle: "2xl"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    status: "info",
+    variant: "subtle",
+    size: "md",
+    inline: false
+  }
+});
+
+export { alertSlotRecipe };