mainbase-ui 1.2.5 → 3.37.0

package/dist/cjs/theme/layer-styles.cjs

@@ -0,0 +1,116 @@
+'use strict';
+
+var config = require('../styled-system/config.cjs');
+
+const layerStyles = config.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: {}
+  }
+});
+
+exports.layerStyles = layerStyles;

package/dist/cjs/theme/motion-styles.cjs

@@ -0,0 +1,54 @@
+'use strict';
+
+var config = require('../styled-system/config.cjs');
+
+const animationStyles = config.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"
+    }
+  }
+});
+
+exports.animationStyles = animationStyles;

package/dist/cjs/theme/recipes/accordion.cjs

@@ -0,0 +1,144 @@
+'use strict';
+
+var anatomy = require('../../anatomy.cjs');
+var config = require('../../styled-system/config.cjs');
+
+const accordionSlotRecipe = config.defineSlotRecipe({
+  className: "mainbase-accordion",
+  slots: anatomy.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"
+  }
+});
+
+exports.accordionSlotRecipe = accordionSlotRecipe;

package/dist/cjs/theme/recipes/action-bar.cjs

@@ -0,0 +1,86 @@
+'use strict';
+
+var anatomy = require('../../anatomy.cjs');
+var config = require('../../styled-system/config.cjs');
+
+const actionBarSlotRecipe = config.defineSlotRecipe({
+  className: "mainbase-action-bar",
+  slots: anatomy.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"
+  }
+});
+
+exports.actionBarSlotRecipe = actionBarSlotRecipe;

package/dist/cjs/theme/recipes/alert.cjs

@@ -0,0 +1,155 @@
+'use strict';
+
+var anatomy = require('../../anatomy.cjs');
+var config = require('../../styled-system/config.cjs');
+
+const alertSlotRecipe = config.defineSlotRecipe({
+  slots: anatomy.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
+  }
+});
+
+exports.alertSlotRecipe = alertSlotRecipe;

package/dist/cjs/theme/recipes/avatar.cjs

@@ -0,0 +1,142 @@
+'use strict';
+
+var config = require('../../styled-system/config.cjs');
+var avatar = require('@ark-ui/react/avatar');
+
+const avatarSlotRecipe = config.defineSlotRecipe({
+  slots: avatar.avatarAnatomy.keys(),
+  className: "mainbase-avatar",
+  base: {
+    root: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontWeight: "medium",
+      position: "relative",
+      verticalAlign: "top",
+      flexShrink: "0",
+      userSelect: "none",
+      width: "var(--avatar-size)",
+      height: "var(--avatar-size)",
+      fontSize: "var(--avatar-font-size)",
+      borderRadius: "var(--avatar-radius)",
+      "&[data-group-item]": {
+        borderWidth: "2px",
+        borderColor: "bg"
+      }
+    },
+    image: {
+      width: "100%",
+      height: "100%",
+      objectFit: "cover",
+      borderRadius: "var(--avatar-radius)"
+    },
+    fallback: {
+      lineHeight: "1",
+      textTransform: "uppercase",
+      fontWeight: "medium",
+      fontSize: "var(--avatar-font-size)",
+      borderRadius: "var(--avatar-radius)"
+    }
+  },
+  variants: {
+    size: {
+      full: {
+        root: {
+          "--avatar-size": "100%",
+          "--avatar-font-size": "100%"
+        }
+      },
+      "2xs": {
+        root: {
+          "--avatar-font-size": "fontSizes.2xs",
+          "--avatar-size": "sizes.6"
+        }
+      },
+      xs: {
+        root: {
+          "--avatar-font-size": "fontSizes.xs",
+          "--avatar-size": "sizes.8"
+        }
+      },
+      sm: {
+        root: {
+          "--avatar-font-size": "fontSizes.sm",
+          "--avatar-size": "sizes.9"
+        }
+      },
+      md: {
+        root: {
+          "--avatar-font-size": "fontSizes.md",
+          "--avatar-size": "sizes.10"
+        }
+      },
+      lg: {
+        root: {
+          "--avatar-font-size": "fontSizes.md",
+          "--avatar-size": "sizes.11"
+        }
+      },
+      xl: {
+        root: {
+          "--avatar-font-size": "fontSizes.lg",
+          "--avatar-size": "sizes.12"
+        }
+      },
+      "2xl": {
+        root: {
+          "--avatar-font-size": "fontSizes.xl",
+          "--avatar-size": "sizes.16"
+        }
+      }
+    },
+    variant: {
+      solid: {
+        root: {
+          bg: "colorPalette.solid",
+          color: "colorPalette.contrast"
+        }
+      },
+      subtle: {
+        root: {
+          bg: "colorPalette.muted",
+          color: "colorPalette.fg"
+        }
+      },
+      outline: {
+        root: {
+          color: "colorPalette.fg",
+          borderWidth: "1px",
+          "--outline-shadow-legacy": "colors.colorPalette.muted",
+          "--outline-shadow": "colors.colorPalette.border",
+          borderColor: "var(--outline-shadow, var(--outline-shadow-legacy))"
+        }
+      }
+    },
+    shape: {
+      square: {},
+      rounded: {
+        root: { "--avatar-radius": "radii.l3" }
+      },
+      full: {
+        root: { "--avatar-radius": "radii.full" }
+      }
+    },
+    borderless: {
+      true: {
+        root: {
+          "&[data-group-item]": {
+            borderWidth: "0px"
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    shape: "full",
+    variant: "subtle"
+  }
+});
+
+exports.avatarSlotRecipe = avatarSlotRecipe;