mainbase-ui 1.2.5 → 3.37.0

package/dist/esm/theme/recipes/tree-view.js

@@ -0,0 +1,166 @@
+import { defineSlotRecipe, defineStyle } from '../../styled-system/config.js';
+import { treeViewAnatomy } from '@ark-ui/react/tree-view';
+
+const baseItemStyle = defineStyle({
+  display: "flex",
+  alignItems: "center",
+  gap: "var(--tree-item-gap)",
+  rounded: "l2",
+  userSelect: "none",
+  position: "relative",
+  "--tree-depth": "calc(var(--depth) - 1)",
+  "--tree-indentation-offset": "calc(var(--tree-indentation) * var(--tree-depth))",
+  "--tree-icon-offset": "calc(var(--tree-icon-size) * var(--tree-depth) * 0.5)",
+  "--tree-offset": "calc(var(--tree-padding-inline) + var(--tree-indentation-offset) + var(--tree-icon-offset))",
+  ps: "var(--tree-offset)",
+  pe: "var(--tree-padding-inline)",
+  py: "var(--tree-padding-block)",
+  focusVisibleRing: "inside",
+  focusRingColor: "border.emphasized",
+  focusRingWidth: "2px",
+  "&:hover, &:focus-visible": {
+    bg: "bg.muted"
+  },
+  _disabled: {
+    layerStyle: "disabled"
+  }
+});
+const baseTextStyle = defineStyle({
+  flex: "1"
+});
+const subtleVariantStyle = defineStyle({
+  _selected: {
+    bg: "colorPalette.subtle",
+    color: "colorPalette.fg"
+  }
+});
+const solidVariantStyle = defineStyle({
+  _selected: {
+    layerStyle: "fill.solid"
+  }
+});
+const treeViewSlotRecipe = defineSlotRecipe({
+  slots: treeViewAnatomy.keys(),
+  className: "mainbase-tree-view",
+  base: {
+    root: {
+      width: "full",
+      display: "flex",
+      flexDirection: "column",
+      gap: "2"
+    },
+    tree: {
+      display: "flex",
+      flexDirection: "column",
+      "--tree-item-gap": "spacing.2",
+      _icon: {
+        boxSize: "var(--tree-icon-size)"
+      }
+    },
+    label: {
+      fontWeight: "medium",
+      textStyle: "sm"
+    },
+    branch: {
+      position: "relative"
+    },
+    branchContent: {
+      position: "relative"
+    },
+    branchIndentGuide: {
+      height: "100%",
+      width: "1px",
+      bg: "border",
+      position: "absolute",
+      "--tree-depth": "calc(var(--depth) - 1)",
+      "--tree-indentation-offset": "calc(var(--tree-indentation) * var(--tree-depth))",
+      "--tree-offset": "calc(var(--tree-padding-inline) + var(--tree-indentation-offset))",
+      "--tree-icon-offset": "calc(var(--tree-icon-size) * 0.5 * var(--depth))",
+      insetInlineStart: "calc(var(--tree-offset) + var(--tree-icon-offset))",
+      zIndex: "1"
+    },
+    branchIndicator: {
+      color: "fg.muted",
+      transformOrigin: "center",
+      transitionDuration: "normal",
+      transitionProperty: "transform",
+      transitionTimingFunction: "default",
+      _open: {
+        transform: "rotate(90deg)"
+      }
+    },
+    branchTrigger: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    branchControl: baseItemStyle,
+    item: baseItemStyle,
+    itemText: baseTextStyle,
+    branchText: baseTextStyle,
+    nodeCheckbox: {
+      display: "inline-flex"
+    }
+  },
+  variants: {
+    size: {
+      md: {
+        tree: {
+          textStyle: "sm",
+          "--tree-indentation": "spacing.4",
+          "--tree-padding-inline": "spacing.3",
+          "--tree-padding-block": "spacing.1.5",
+          "--tree-icon-size": "spacing.4"
+        }
+      },
+      sm: {
+        tree: {
+          textStyle: "sm",
+          "--tree-indentation": "spacing.4",
+          "--tree-padding-inline": "spacing.3",
+          "--tree-padding-block": "spacing.1",
+          "--tree-icon-size": "spacing.3"
+        }
+      },
+      xs: {
+        tree: {
+          textStyle: "xs",
+          "--tree-indentation": "spacing.4",
+          "--tree-padding-inline": "spacing.2",
+          "--tree-padding-block": "spacing.1",
+          "--tree-icon-size": "spacing.3"
+        }
+      }
+    },
+    variant: {
+      subtle: {
+        branchControl: subtleVariantStyle,
+        item: subtleVariantStyle
+      },
+      solid: {
+        branchControl: solidVariantStyle,
+        item: solidVariantStyle
+      }
+    },
+    animateContent: {
+      true: {
+        branchContent: {
+          _open: {
+            animationName: "expand-height, fade-in",
+            animationDuration: "moderate"
+          },
+          _closed: {
+            animationName: "collapse-height, fade-out",
+            animationDuration: "moderate"
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "subtle"
+  }
+});
+
+export { treeViewSlotRecipe };

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

@@ -0,0 +1,19 @@
+export { badgeRecipe } from './recipes/badge.js';
+export { buttonRecipe } from './recipes/button.js';
+export { checkmarkRecipe } from './recipes/checkmark.js';
+export { codeRecipe } from './recipes/code.js';
+export { colorSwatchRecipe } from './recipes/color-swatch.js';
+export { containerRecipe } from './recipes/container.js';
+export { headingRecipe } from './recipes/heading.js';
+export { iconRecipe } from './recipes/icon.js';
+export { inputRecipe } from './recipes/input.js';
+export { inputAddonRecipe } from './recipes/input-addon.js';
+export { kbdRecipe } from './recipes/kbd.js';
+export { linkRecipe } from './recipes/link.js';
+export { markRecipe } from './recipes/mark.js';
+export { radiomarkRecipe } from './recipes/radiomark.js';
+export { separatorRecipe } from './recipes/separator.js';
+export { skeletonRecipe } from './recipes/skeleton.js';
+export { skipNavLinkRecipe } from './recipes/skip-nav-link.js';
+export { spinnerRecipe } from './recipes/spinner.js';
+export { textareaRecipe } from './recipes/textarea.js';

package/dist/esm/theme/recipes.js

@@ -0,0 +1,43 @@
+import { badgeRecipe } from './recipes/badge.js';
+import { buttonRecipe } from './recipes/button.js';
+import { checkmarkRecipe } from './recipes/checkmark.js';
+import { codeRecipe } from './recipes/code.js';
+import { colorSwatchRecipe } from './recipes/color-swatch.js';
+import { containerRecipe } from './recipes/container.js';
+import { headingRecipe } from './recipes/heading.js';
+import { iconRecipe } from './recipes/icon.js';
+import { inputRecipe } from './recipes/input.js';
+import { inputAddonRecipe } from './recipes/input-addon.js';
+import { kbdRecipe } from './recipes/kbd.js';
+import { linkRecipe } from './recipes/link.js';
+import { markRecipe } from './recipes/mark.js';
+import { radiomarkRecipe } from './recipes/radiomark.js';
+import { separatorRecipe } from './recipes/separator.js';
+import { skeletonRecipe } from './recipes/skeleton.js';
+import { skipNavLinkRecipe } from './recipes/skip-nav-link.js';
+import { spinnerRecipe } from './recipes/spinner.js';
+import { textareaRecipe } from './recipes/textarea.js';
+
+const recipes = {
+  badge: badgeRecipe,
+  button: buttonRecipe,
+  code: codeRecipe,
+  container: containerRecipe,
+  heading: headingRecipe,
+  input: inputRecipe,
+  inputAddon: inputAddonRecipe,
+  kbd: kbdRecipe,
+  link: linkRecipe,
+  mark: markRecipe,
+  separator: separatorRecipe,
+  skeleton: skeletonRecipe,
+  skipNavLink: skipNavLinkRecipe,
+  spinner: spinnerRecipe,
+  textarea: textareaRecipe,
+  icon: iconRecipe,
+  checkmark: checkmarkRecipe,
+  radiomark: radiomarkRecipe,
+  colorSwatch: colorSwatchRecipe
+};
+
+export { recipes };

package/dist/esm/theme/semantic-tokens/colors.js

@@ -0,0 +1,353 @@
+import { defineSemanticTokens } from '../../styled-system/config.js';
+
+const semanticColors = defineSemanticTokens.colors({
+  bg: {
+    DEFAULT: {
+      value: { _light: "{colors.white}", _dark: "{colors.black}" }
+    },
+    subtle: {
+      value: { _light: "{colors.gray.50}", _dark: "{colors.gray.950}" }
+    },
+    muted: {
+      value: { _light: "{colors.gray.100}", _dark: "{colors.gray.900}" }
+    },
+    emphasized: {
+      value: { _light: "{colors.gray.200}", _dark: "{colors.gray.800}" }
+    },
+    inverted: {
+      value: { _light: "{colors.black}", _dark: "{colors.white}" }
+    },
+    panel: {
+      value: { _light: "{colors.white}", _dark: "{colors.gray.950}" }
+    },
+    error: {
+      value: { _light: "{colors.red.50}", _dark: "{colors.red.950}" }
+    },
+    warning: {
+      value: { _light: "{colors.orange.50}", _dark: "{colors.orange.950}" }
+    },
+    success: {
+      value: { _light: "{colors.green.50}", _dark: "{colors.green.950}" }
+    },
+    info: {
+      value: { _light: "{colors.blue.50}", _dark: "{colors.blue.950}" }
+    }
+  },
+  fg: {
+    DEFAULT: {
+      value: { _light: "{colors.black}", _dark: "{colors.gray.50}" }
+    },
+    muted: {
+      value: { _light: "{colors.gray.600}", _dark: "{colors.gray.400}" }
+    },
+    subtle: {
+      value: { _light: "{colors.gray.400}", _dark: "{colors.gray.500}" }
+    },
+    inverted: {
+      value: { _light: "{colors.gray.50}", _dark: "{colors.black}" }
+    },
+    error: {
+      value: { _light: "{colors.red.500}", _dark: "{colors.red.400}" }
+    },
+    warning: {
+      value: { _light: "{colors.orange.600}", _dark: "{colors.orange.300}" }
+    },
+    success: {
+      value: { _light: "{colors.green.600}", _dark: "{colors.green.300}" }
+    },
+    info: {
+      value: { _light: "{colors.blue.600}", _dark: "{colors.blue.300}" }
+    }
+  },
+  border: {
+    DEFAULT: {
+      value: { _light: "{colors.gray.200}", _dark: "{colors.gray.800}" }
+    },
+    muted: {
+      value: { _light: "{colors.gray.100}", _dark: "{colors.gray.900}" }
+    },
+    subtle: {
+      value: { _light: "{colors.gray.50}", _dark: "{colors.gray.950}" }
+    },
+    emphasized: {
+      value: { _light: "{colors.gray.300}", _dark: "{colors.gray.700}" }
+    },
+    inverted: {
+      value: { _light: "{colors.gray.800}", _dark: "{colors.gray.200}" }
+    },
+    error: {
+      value: { _light: "{colors.red.500}", _dark: "{colors.red.400}" }
+    },
+    warning: {
+      value: { _light: "{colors.orange.500}", _dark: "{colors.orange.400}" }
+    },
+    success: {
+      value: { _light: "{colors.green.500}", _dark: "{colors.green.400}" }
+    },
+    info: {
+      value: { _light: "{colors.blue.500}", _dark: "{colors.blue.400}" }
+    }
+  },
+  gray: {
+    contrast: {
+      value: { _light: "{colors.white}", _dark: "{colors.black}" }
+    },
+    fg: {
+      value: { _light: "{colors.gray.800}", _dark: "{colors.gray.200}" }
+    },
+    subtle: {
+      value: { _light: "{colors.gray.100}", _dark: "{colors.gray.900}" }
+    },
+    muted: {
+      value: { _light: "{colors.gray.200}", _dark: "{colors.gray.800}" }
+    },
+    emphasized: {
+      value: { _light: "{colors.gray.300}", _dark: "{colors.gray.700}" }
+    },
+    solid: {
+      value: { _light: "{colors.gray.900}", _dark: "{colors.white}" }
+    },
+    focusRing: {
+      value: { _light: "{colors.gray.400}", _dark: "{colors.gray.400}" }
+    },
+    border: {
+      value: { _light: "{colors.gray.200}", _dark: "{colors.gray.800}" }
+    }
+  },
+  red: {
+    contrast: {
+      value: { _light: "white", _dark: "white" }
+    },
+    fg: {
+      value: { _light: "{colors.red.700}", _dark: "{colors.red.300}" }
+    },
+    subtle: {
+      value: { _light: "{colors.red.100}", _dark: "{colors.red.900}" }
+    },
+    muted: {
+      value: { _light: "{colors.red.200}", _dark: "{colors.red.800}" }
+    },
+    emphasized: {
+      value: { _light: "{colors.red.300}", _dark: "{colors.red.700}" }
+    },
+    solid: {
+      value: { _light: "{colors.red.600}", _dark: "{colors.red.600}" }
+    },
+    focusRing: {
+      value: { _light: "{colors.red.500}", _dark: "{colors.red.500}" }
+    },
+    border: {
+      value: { _light: "{colors.red.500}", _dark: "{colors.red.400}" }
+    }
+  },
+  orange: {
+    contrast: {
+      value: { _light: "white", _dark: "black" }
+    },
+    fg: {
+      value: { _light: "{colors.orange.700}", _dark: "{colors.orange.300}" }
+    },
+    subtle: {
+      value: { _light: "{colors.orange.100}", _dark: "{colors.orange.900}" }
+    },
+    muted: {
+      value: { _light: "{colors.orange.200}", _dark: "{colors.orange.800}" }
+    },
+    emphasized: {
+      value: { _light: "{colors.orange.300}", _dark: "{colors.orange.700}" }
+    },
+    solid: {
+      value: { _light: "{colors.orange.600}", _dark: "{colors.orange.500}" }
+    },
+    focusRing: {
+      value: { _light: "{colors.orange.500}", _dark: "{colors.orange.500}" }
+    },
+    border: {
+      value: { _light: "{colors.orange.500}", _dark: "{colors.orange.400}" }
+    }
+  },
+  green: {
+    contrast: {
+      value: { _light: "white", _dark: "white" }
+    },
+    fg: {
+      value: { _light: "{colors.green.700}", _dark: "{colors.green.300}" }
+    },
+    subtle: {
+      value: { _light: "{colors.green.100}", _dark: "{colors.green.900}" }
+    },
+    muted: {
+      value: { _light: "{colors.green.200}", _dark: "{colors.green.800}" }
+    },
+    emphasized: {
+      value: { _light: "{colors.green.300}", _dark: "{colors.green.700}" }
+    },
+    solid: {
+      value: { _light: "{colors.green.600}", _dark: "{colors.green.600}" }
+    },
+    focusRing: {
+      value: { _light: "{colors.green.500}", _dark: "{colors.green.500}" }
+    },
+    border: {
+      value: { _light: "{colors.green.500}", _dark: "{colors.green.400}" }
+    }
+  },
+  blue: {
+    contrast: {
+      value: { _light: "white", _dark: "white" }
+    },
+    fg: {
+      value: { _light: "{colors.blue.700}", _dark: "{colors.blue.300}" }
+    },
+    subtle: {
+      value: { _light: "{colors.blue.100}", _dark: "{colors.blue.900}" }
+    },
+    muted: {
+      value: { _light: "{colors.blue.200}", _dark: "{colors.blue.800}" }
+    },
+    emphasized: {
+      value: { _light: "{colors.blue.300}", _dark: "{colors.blue.700}" }
+    },
+    solid: {
+      value: { _light: "{colors.blue.600}", _dark: "{colors.blue.600}" }
+    },
+    focusRing: {
+      value: { _light: "{colors.blue.500}", _dark: "{colors.blue.500}" }
+    },
+    border: {
+      value: { _light: "{colors.blue.500}", _dark: "{colors.blue.400}" }
+    }
+  },
+  yellow: {
+    contrast: {
+      value: { _light: "black", _dark: "black" }
+    },
+    fg: {
+      value: { _light: "{colors.yellow.800}", _dark: "{colors.yellow.300}" }
+    },
+    subtle: {
+      value: { _light: "{colors.yellow.100}", _dark: "{colors.yellow.900}" }
+    },
+    muted: {
+      value: { _light: "{colors.yellow.200}", _dark: "{colors.yellow.800}" }
+    },
+    emphasized: {
+      value: { _light: "{colors.yellow.300}", _dark: "{colors.yellow.700}" }
+    },
+    solid: {
+      value: { _light: "{colors.yellow.300}", _dark: "{colors.yellow.300}" }
+    },
+    focusRing: {
+      value: { _light: "{colors.yellow.500}", _dark: "{colors.yellow.500}" }
+    },
+    border: {
+      value: { _light: "{colors.yellow.500}", _dark: "{colors.yellow.500}" }
+    }
+  },
+  teal: {
+    contrast: {
+      value: { _light: "white", _dark: "white" }
+    },
+    fg: {
+      value: { _light: "{colors.teal.700}", _dark: "{colors.teal.300}" }
+    },
+    subtle: {
+      value: { _light: "{colors.teal.100}", _dark: "{colors.teal.900}" }
+    },
+    muted: {
+      value: { _light: "{colors.teal.200}", _dark: "{colors.teal.800}" }
+    },
+    emphasized: {
+      value: { _light: "{colors.teal.300}", _dark: "{colors.teal.700}" }
+    },
+    solid: {
+      value: { _light: "{colors.teal.600}", _dark: "{colors.teal.600}" }
+    },
+    focusRing: {
+      value: { _light: "{colors.teal.500}", _dark: "{colors.teal.500}" }
+    },
+    border: {
+      value: { _light: "{colors.teal.500}", _dark: "{colors.teal.400}" }
+    }
+  },
+  purple: {
+    contrast: {
+      value: { _light: "white", _dark: "white" }
+    },
+    fg: {
+      value: { _light: "{colors.purple.700}", _dark: "{colors.purple.300}" }
+    },
+    subtle: {
+      value: { _light: "{colors.purple.100}", _dark: "{colors.purple.900}" }
+    },
+    muted: {
+      value: { _light: "{colors.purple.200}", _dark: "{colors.purple.800}" }
+    },
+    emphasized: {
+      value: { _light: "{colors.purple.300}", _dark: "{colors.purple.700}" }
+    },
+    solid: {
+      value: { _light: "{colors.purple.600}", _dark: "{colors.purple.600}" }
+    },
+    focusRing: {
+      value: { _light: "{colors.purple.500}", _dark: "{colors.purple.500}" }
+    },
+    border: {
+      value: { _light: "{colors.purple.500}", _dark: "{colors.purple.400}" }
+    }
+  },
+  pink: {
+    contrast: {
+      value: { _light: "white", _dark: "white" }
+    },
+    fg: {
+      value: { _light: "{colors.pink.700}", _dark: "{colors.pink.300}" }
+    },
+    subtle: {
+      value: { _light: "{colors.pink.100}", _dark: "{colors.pink.900}" }
+    },
+    muted: {
+      value: { _light: "{colors.pink.200}", _dark: "{colors.pink.800}" }
+    },
+    emphasized: {
+      value: { _light: "{colors.pink.300}", _dark: "{colors.pink.700}" }
+    },
+    solid: {
+      value: { _light: "{colors.pink.600}", _dark: "{colors.pink.600}" }
+    },
+    focusRing: {
+      value: { _light: "{colors.pink.500}", _dark: "{colors.pink.500}" }
+    },
+    border: {
+      value: { _light: "{colors.pink.500}", _dark: "{colors.pink.400}" }
+    }
+  },
+  cyan: {
+    contrast: {
+      value: { _light: "white", _dark: "white" }
+    },
+    fg: {
+      value: { _light: "{colors.cyan.700}", _dark: "{colors.cyan.300}" }
+    },
+    subtle: {
+      value: { _light: "{colors.cyan.100}", _dark: "{colors.cyan.900}" }
+    },
+    muted: {
+      value: { _light: "{colors.cyan.200}", _dark: "{colors.cyan.800}" }
+    },
+    emphasized: {
+      value: { _light: "{colors.cyan.300}", _dark: "{colors.cyan.700}" }
+    },
+    solid: {
+      value: { _light: "{colors.cyan.600}", _dark: "{colors.cyan.600}" }
+    },
+    focusRing: {
+      value: { _light: "{colors.cyan.500}", _dark: "{colors.cyan.500}" }
+    },
+    border: {
+      value: { _light: "{colors.cyan.500}", _dark: "{colors.cyan.400}" }
+    }
+  }
+});
+
+export { semanticColors };

package/dist/esm/theme/semantic-tokens/radii.js

@@ -0,0 +1,9 @@
+import { defineSemanticTokens } from '../../styled-system/config.js';
+
+const semanticRadii = defineSemanticTokens.radii({
+  l1: { value: "{radii.xs}" },
+  l2: { value: "{radii.sm}" },
+  l3: { value: "{radii.md}" }
+});
+
+export { semanticRadii };

package/dist/esm/theme/semantic-tokens/shadows.js

@@ -0,0 +1,54 @@
+import { defineSemanticTokens } from '../../styled-system/config.js';
+
+const semanticShadows = defineSemanticTokens.shadows({
+  xs: {
+    value: {
+      _light: "0px 1px 2px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/20}",
+      _dark: "0px 1px 1px {black/64}, 0px 0px 1px inset {colors.gray.300/20}"
+    }
+  },
+  sm: {
+    value: {
+      _light: "0px 2px 4px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
+      _dark: "0px 2px 4px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
+    }
+  },
+  md: {
+    value: {
+      _light: "0px 4px 8px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
+      _dark: "0px 4px 8px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
+    }
+  },
+  lg: {
+    value: {
+      _light: "0px 8px 16px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
+      _dark: "0px 8px 16px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
+    }
+  },
+  xl: {
+    value: {
+      _light: "0px 16px 24px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
+      _dark: "0px 16px 24px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
+    }
+  },
+  "2xl": {
+    value: {
+      _light: "0px 24px 40px {colors.gray.900/16}, 0px 0px 1px {colors.gray.900/30}",
+      _dark: "0px 24px 40px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
+    }
+  },
+  inner: {
+    value: {
+      _light: "inset 0 2px 4px 0 {black/5}",
+      _dark: "inset 0 2px 4px 0 black"
+    }
+  },
+  inset: {
+    value: {
+      _light: "inset 0 0 0 1px {black/5}",
+      _dark: "inset 0 0 0 1px {colors.gray.300/5}"
+    }
+  }
+});
+
+export { semanticShadows };