mainbase-ui 1.2.5 → 3.36.0

package/dist/cjs/theme/recipes/badge.cjs

@@ -0,0 +1,73 @@
+'use strict';
+
+var config = require('../../styled-system/config.cjs');
+
+const badgeRecipe = config.defineRecipe({
+  className: "mainbase-badge",
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    borderRadius: "l2",
+    gap: "1",
+    fontWeight: "medium",
+    fontVariantNumeric: "tabular-nums",
+    whiteSpace: "nowrap",
+    userSelect: "none"
+  },
+  variants: {
+    variant: {
+      solid: {
+        bg: "colorPalette.solid",
+        color: "colorPalette.contrast"
+      },
+      subtle: {
+        bg: "colorPalette.subtle",
+        color: "colorPalette.fg"
+      },
+      outline: {
+        color: "colorPalette.fg",
+        "--outline-shadow-legacy": "colors.colorPalette.muted",
+        "--outline-shadow": "colors.colorPalette.border",
+        shadow: "inset 0 0 0px 1px var(--shadow-color)",
+        shadowColor: "var(--outline-shadow, var(--outline-shadow-legacy))"
+      },
+      surface: {
+        bg: "colorPalette.subtle",
+        color: "colorPalette.fg",
+        shadow: "inset 0 0 0px 1px var(--shadow-color)",
+        shadowColor: "colorPalette.muted"
+      },
+      plain: {
+        color: "colorPalette.fg"
+      }
+    },
+    size: {
+      xs: {
+        textStyle: "2xs",
+        px: "1",
+        minH: "4"
+      },
+      sm: {
+        textStyle: "xs",
+        px: "1.5",
+        minH: "5"
+      },
+      md: {
+        textStyle: "sm",
+        px: "2",
+        minH: "6"
+      },
+      lg: {
+        textStyle: "sm",
+        px: "2.5",
+        minH: "7"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "subtle",
+    size: "sm"
+  }
+});
+
+exports.badgeRecipe = badgeRecipe;

package/dist/cjs/theme/recipes/blockquote.cjs

@@ -0,0 +1,82 @@
+'use strict';
+
+var anatomy = require('../../anatomy.cjs');
+var config = require('../../styled-system/config.cjs');
+
+const blockquoteSlotRecipe = config.defineSlotRecipe({
+  className: "mainbase-blockquote",
+  slots: anatomy.blockquoteAnatomy.keys(),
+  base: {
+    root: {
+      position: "relative",
+      display: "flex",
+      flexDirection: "column",
+      gap: "2"
+    },
+    caption: {
+      textStyle: "sm",
+      color: "fg.muted"
+    },
+    icon: {
+      boxSize: "5"
+    }
+  },
+  variants: {
+    justify: {
+      start: {
+        root: {
+          alignItems: "flex-start",
+          textAlign: "start"
+        }
+      },
+      center: {
+        root: {
+          alignItems: "center",
+          textAlign: "center"
+        }
+      },
+      end: {
+        root: {
+          alignItems: "flex-end",
+          textAlign: "end"
+        }
+      }
+    },
+    variant: {
+      subtle: {
+        root: {
+          paddingX: "5",
+          borderStartWidth: "4px",
+          borderStartColor: "colorPalette.muted"
+        },
+        icon: {
+          color: "colorPalette.fg"
+        }
+      },
+      solid: {
+        root: {
+          paddingX: "5",
+          borderStartWidth: "4px",
+          borderStartColor: "colorPalette.solid"
+        },
+        icon: {
+          color: "colorPalette.solid"
+        }
+      },
+      plain: {
+        root: {
+          paddingX: "5"
+        },
+        icon: {
+          color: "colorPalette.solid"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "subtle",
+    justify: "start"
+  }
+});
+
+exports.blockquoteSlotRecipe = blockquoteSlotRecipe;

package/dist/cjs/theme/recipes/breadcrumb.cjs

@@ -0,0 +1,99 @@
+'use strict';
+
+var anatomy = require('../../anatomy.cjs');
+var config = require('../../styled-system/config.cjs');
+
+const breadcrumbSlotRecipe = config.defineSlotRecipe({
+  className: "mainbase-breadcrumb",
+  slots: anatomy.breadcrumbAnatomy.keys(),
+  base: {
+    list: {
+      display: "flex",
+      alignItems: "center",
+      wordBreak: "break-word",
+      color: "fg.muted",
+      listStyle: "none"
+    },
+    link: {
+      outline: "0",
+      textDecoration: "none",
+      borderRadius: "l1",
+      focusRing: "outside",
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "2"
+    },
+    item: {
+      display: "inline-flex",
+      alignItems: "center"
+    },
+    separator: {
+      color: "fg.muted",
+      opacity: "0.8",
+      _icon: {
+        boxSize: "1em"
+      },
+      _rtl: {
+        rotate: "180deg"
+      }
+    },
+    ellipsis: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      _icon: {
+        boxSize: "1em"
+      }
+    }
+  },
+  variants: {
+    variant: {
+      underline: {
+        link: {
+          color: "colorPalette.fg",
+          textDecoration: "underline",
+          textUnderlineOffset: "0.2em",
+          textDecorationColor: "colorPalette.muted"
+        },
+        currentLink: {
+          color: "colorPalette.fg"
+        }
+      },
+      plain: {
+        link: {
+          color: "fg.muted",
+          _hover: { color: "fg" }
+        },
+        currentLink: {
+          color: "fg"
+        }
+      }
+    },
+    size: {
+      sm: {
+        list: {
+          gap: "1",
+          textStyle: "xs"
+        }
+      },
+      md: {
+        list: {
+          gap: "1.5",
+          textStyle: "sm"
+        }
+      },
+      lg: {
+        list: {
+          gap: "2",
+          textStyle: "md"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "plain",
+    size: "md"
+  }
+});
+
+exports.breadcrumbSlotRecipe = breadcrumbSlotRecipe;

package/dist/cjs/theme/recipes/button.cjs

@@ -0,0 +1,184 @@
+'use strict';
+
+var config = require('../../styled-system/config.cjs');
+
+const buttonRecipe = config.defineRecipe({
+  className: "mainbase-button",
+  base: {
+    display: "inline-flex",
+    appearance: "none",
+    alignItems: "center",
+    justifyContent: "center",
+    userSelect: "none",
+    position: "relative",
+    borderRadius: "l2",
+    whiteSpace: "nowrap",
+    verticalAlign: "middle",
+    borderWidth: "1px",
+    borderColor: "transparent",
+    cursor: "button",
+    flexShrink: "0",
+    outline: "0",
+    lineHeight: "1.2",
+    isolation: "isolate",
+    fontWeight: "medium",
+    transitionProperty: "common",
+    transitionDuration: "moderate",
+    focusVisibleRing: "outside",
+    _disabled: {
+      layerStyle: "disabled"
+    },
+    _icon: {
+      flexShrink: "0"
+    }
+  },
+  variants: {
+    size: {
+      "2xs": {
+        h: "6",
+        minW: "6",
+        textStyle: "xs",
+        px: "2",
+        gap: "1",
+        _icon: {
+          width: "3.5",
+          height: "3.5"
+        }
+      },
+      xs: {
+        h: "8",
+        minW: "8",
+        textStyle: "xs",
+        px: "2.5",
+        gap: "1",
+        _icon: {
+          width: "4",
+          height: "4"
+        }
+      },
+      sm: {
+        h: "9",
+        minW: "9",
+        px: "3.5",
+        textStyle: "sm",
+        gap: "2",
+        _icon: {
+          width: "4",
+          height: "4"
+        }
+      },
+      md: {
+        h: "10",
+        minW: "10",
+        textStyle: "sm",
+        px: "4",
+        gap: "2",
+        _icon: {
+          width: "5",
+          height: "5"
+        }
+      },
+      lg: {
+        h: "11",
+        minW: "11",
+        textStyle: "md",
+        px: "5",
+        gap: "3",
+        _icon: {
+          width: "5",
+          height: "5"
+        }
+      },
+      xl: {
+        h: "12",
+        minW: "12",
+        textStyle: "md",
+        px: "5",
+        gap: "2.5",
+        _icon: {
+          width: "5",
+          height: "5"
+        }
+      },
+      "2xl": {
+        h: "16",
+        minW: "16",
+        textStyle: "lg",
+        px: "7",
+        gap: "3",
+        _icon: {
+          width: "6",
+          height: "6"
+        }
+      }
+    },
+    variant: {
+      solid: {
+        bg: "colorPalette.solid",
+        color: "colorPalette.contrast",
+        borderColor: "transparent",
+        _hover: {
+          bg: "colorPalette.solid/90"
+        },
+        _expanded: {
+          bg: "colorPalette.solid/90"
+        }
+      },
+      subtle: {
+        bg: "colorPalette.subtle",
+        color: "colorPalette.fg",
+        borderColor: "transparent",
+        _hover: {
+          bg: "colorPalette.muted"
+        },
+        _expanded: {
+          bg: "colorPalette.muted"
+        }
+      },
+      surface: {
+        bg: "colorPalette.subtle",
+        color: "colorPalette.fg",
+        shadow: "0 0 0px 1px var(--shadow-color)",
+        shadowColor: "colorPalette.muted",
+        _hover: {
+          bg: "colorPalette.muted"
+        },
+        _expanded: {
+          bg: "colorPalette.muted"
+        }
+      },
+      outline: {
+        borderWidth: "1px",
+        "--outline-color-legacy": "colors.colorPalette.muted",
+        "--outline-color": "colors.colorPalette.border",
+        borderColor: "var(--outline-color, var(--outline-color-legacy))",
+        color: "colorPalette.fg",
+        _hover: {
+          bg: "colorPalette.subtle"
+        },
+        _expanded: {
+          bg: "colorPalette.subtle"
+        }
+      },
+      ghost: {
+        bg: "transparent",
+        color: "colorPalette.fg",
+        _hover: {
+          bg: "colorPalette.subtle"
+        },
+        _expanded: {
+          bg: "colorPalette.subtle"
+        }
+      },
+      plain: {
+        color: "colorPalette.fg"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "solid"
+  }
+});
+
+exports.buttonRecipe = buttonRecipe;

package/dist/cjs/theme/recipes/card.cjs

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

package/dist/cjs/theme/recipes/carousel.cjs

@@ -0,0 +1,66 @@
+'use strict';
+
+var config = require('../../styled-system/config.cjs');
+var carousel = require('@ark-ui/react/carousel');
+
+const carouselSlotRecipe = config.defineSlotRecipe({
+  className: "carousel",
+  slots: carousel.carouselAnatomy.keys(),
+  base: {
+    root: {
+      position: "relative",
+      display: "flex",
+      gap: "2",
+      _horizontal: {
+        flexDirection: "column"
+      },
+      _vertical: {
+        flexDirection: "row"
+      }
+    },
+    item: {
+      _horizontal: {
+        width: "100%"
+      },
+      _vertical: {
+        height: "100%"
+      }
+    },
+    control: {
+      display: "flex",
+      alignItems: "center",
+      _horizontal: {
+        flexDirection: "row",
+        width: "100%"
+      },
+      _vertical: {
+        flexDirection: "column",
+        height: "100%"
+      }
+    },
+    indicatorGroup: {
+      display: "flex",
+      justifyContent: "center",
+      gap: "3",
+      _horizontal: {
+        flexDirection: "row"
+      },
+      _vertical: {
+        flexDirection: "column"
+      }
+    },
+    indicator: {
+      width: "2.5",
+      height: "2.5",
+      borderRadius: "full",
+      bg: "colorPalette.subtle",
+      cursor: "button",
+      _current: {
+        bg: "colorPalette.solid"
+      }
+    }
+  },
+  defaultVariants: {}
+});
+
+exports.carouselSlotRecipe = carouselSlotRecipe;