@bolio-ui/core 2.0.0-alpha.2 → 3.0.0-alpha.1

package/esm/chunk-JFNYQSEZ.js

@@ -0,0 +1,200 @@
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-MAICNLTY.js";
+import {
+  joinClasses
+} from "./chunk-5KUROAEP.js";
+
+// core/Grid/Grid.tsx
+import React2 from "react";
+
+// core/Grid/BasicItem.tsx
+import React, { useMemo } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Grid/BasicItem.module.css.bolio-css-module-source
+var BasicItem_module_css_default = { "item": "BasicItem-module_item__Jar5a", "justify": "BasicItem-module_justify__RY7v5", "direction": "BasicItem-module_direction__DKP7a", "alignContent": "BasicItem-module_alignContent__KMzjY", "alignItems": "BasicItem-module_alignItems__0o0MQ", "xs": "BasicItem-module_xs__VjPCw", "sm": "BasicItem-module_sm__83Nx4", "md": "BasicItem-module_md__-XqXQ", "lg": "BasicItem-module_lg__1gvck", "xl": "BasicItem-module_xl__zTNsS" };
+
+// core/Grid/BasicItem.tsx
+import { jsx } from "react/jsx-runtime";
+var defaultProps = {
+  xs: false,
+  sm: false,
+  md: false,
+  lg: false,
+  xl: false,
+  className: ""
+};
+var getItemLayout = (val) => {
+  const display = val === 0 ? "none" : "block";
+  if (typeof val === "number") {
+    const width = 100 / 12 * val;
+    const ratio = width > 100 ? "100%" : width < 0 ? "0" : `${width}%`;
+    return {
+      grow: 0,
+      display,
+      width: ratio,
+      basis: ratio
+    };
+  }
+  return {
+    grow: 1,
+    display,
+    width: "100%",
+    basis: "0"
+  };
+};
+var GridBasicItem = React.forwardRef(
+  ({
+    xs = defaultProps.xs,
+    sm = defaultProps.sm,
+    md = defaultProps.md,
+    lg = defaultProps.lg,
+    xl = defaultProps.xl,
+    justify,
+    direction,
+    alignItems,
+    alignContent,
+    children,
+    className = defaultProps.className,
+    style,
+    ...props
+  }, ref) => {
+    const { SCALES } = use_scale_default();
+    const classes = useMemo(() => {
+      const aligns = {
+        [BasicItem_module_css_default.justify]: justify,
+        [BasicItem_module_css_default.direction]: direction,
+        [BasicItem_module_css_default.alignItems]: alignItems,
+        [BasicItem_module_css_default.alignContent]: alignContent,
+        [BasicItem_module_css_default.xs]: xs,
+        [BasicItem_module_css_default.sm]: sm,
+        [BasicItem_module_css_default.md]: md,
+        [BasicItem_module_css_default.lg]: lg,
+        [BasicItem_module_css_default.xl]: xl
+      };
+      const classString = Object.keys(aligns).reduce((pre, name) => {
+        if (aligns[name] !== void 0 && aligns[name] !== false)
+          return `${pre} ${name}`;
+        return pre;
+      }, "");
+      return joinClasses(BasicItem_module_css_default.item, classString, className);
+    }, [
+      justify,
+      direction,
+      alignItems,
+      alignContent,
+      xs,
+      sm,
+      md,
+      lg,
+      xl,
+      className
+    ]);
+    const layout = useMemo(
+      () => ({
+        xs: getItemLayout(xs),
+        sm: getItemLayout(sm),
+        md: getItemLayout(md),
+        lg: getItemLayout(lg),
+        xl: getItemLayout(xl)
+      }),
+      [xs, sm, md, lg, xl]
+    );
+    const itemStyle = {
+      "--grid-font-size": SCALES.font(1, "inherit"),
+      "--grid-height": SCALES.height(1, "auto"),
+      "--grid-justify": justify,
+      "--grid-direction": direction,
+      "--grid-align-content": alignContent,
+      "--grid-align-items": alignItems,
+      "--grid-xs-grow": layout.xs.grow,
+      "--grid-xs-max-width": layout.xs.width,
+      "--grid-xs-basis": layout.xs.basis,
+      "--grid-xs-display": layout.xs.display,
+      "--grid-sm-grow": layout.sm.grow,
+      "--grid-sm-max-width": layout.sm.width,
+      "--grid-sm-basis": layout.sm.basis,
+      "--grid-sm-display": layout.sm.display,
+      "--grid-md-grow": layout.md.grow,
+      "--grid-md-max-width": layout.md.width,
+      "--grid-md-basis": layout.md.basis,
+      "--grid-md-display": layout.md.display,
+      "--grid-lg-grow": layout.lg.grow,
+      "--grid-lg-max-width": layout.lg.width,
+      "--grid-lg-basis": layout.lg.basis,
+      "--grid-lg-display": layout.lg.display,
+      "--grid-xl-grow": layout.xl.grow,
+      "--grid-xl-max-width": layout.xl.width,
+      "--grid-xl-basis": layout.xl.basis,
+      "--grid-xl-display": layout.xl.display,
+      ...style
+    };
+    return /* @__PURE__ */ jsx("div", { ref, className: classes, ...props, style: itemStyle, children });
+  }
+);
+GridBasicItem.displayName = "BolioUIGridBasicItem";
+var BasicItem_default = GridBasicItem;
+
+// core/Grid/Grid.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var GridComponent = React2.forwardRef(({ children, className = "", style, ...props }, ref) => {
+  const { SCALES } = use_scale_default();
+  const gridGapUnit = "var(--grid-gap-unit)";
+  const gridStyle = {
+    margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+    boxSizing: "border-box",
+    padding: `${SCALES.pt(0, gridGapUnit)} ${SCALES.pr(0, gridGapUnit)} ${SCALES.pb(0, gridGapUnit)} ${SCALES.pl(0, gridGapUnit)}`,
+    ...style
+  };
+  return /* @__PURE__ */ jsx2(BasicItem_default, { ref, className, style: gridStyle, ...props, children });
+});
+GridComponent.displayName = "BolioUIGrid";
+var Grid = with_scale_default(GridComponent);
+var Grid_default = Grid;
+
+// core/Grid/GridContainer.tsx
+import React3, { useMemo as useMemo2 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var GridContainerComponent = React3.forwardRef(
+  ({
+    gap = 0,
+    wrap = "wrap",
+    children,
+    className = "",
+    style,
+    ...props
+  }, ref) => {
+    const { unit, SCALES } = use_scale_default();
+    const gapUnit = useMemo2(() => `calc(${gap} * ${unit} * 1/3)`, [gap, unit]);
+    const containerStyle = {
+      "--grid-gap-unit": gapUnit,
+      display: "flex",
+      flexWrap: wrap,
+      boxSizing: "border-box",
+      width: SCALES.width(1, "100%"),
+      ...style
+    };
+    return /* @__PURE__ */ jsx3(
+      BasicItem_default,
+      {
+        ref,
+        className,
+        style: containerStyle,
+        ...props,
+        children
+      }
+    );
+  }
+);
+GridContainerComponent.displayName = "BolioUIGridContainer";
+var GridContainer = with_scale_default(GridContainerComponent);
+var GridContainer_default = GridContainer;
+
+// core/Grid/index.ts
+Grid_default.Container = GridContainer_default;
+var Grid_default2 = Grid_default;
+
+export {
+  Grid_default2 as Grid_default
+};

package/esm/chunk-K6UULETP.js

@@ -0,0 +1,244 @@
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-MAICNLTY.js";
+import {
+  use_theme_default
+} from "./chunk-V5I4ORQQ.js";
+import {
+  joinClasses,
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Tree/Tree.tsx
+import React3, { useCallback, useMemo, useRef, useState } from "react";
+
+// core/Tree/TreeContext.ts
+import React from "react";
+var TreeContext = React.createContext({
+  selected: null,
+  expanded: [],
+  tabbable: void 0,
+  activate: () => void 0,
+  register: () => void 0
+});
+var useTreeContext = () => React.useContext(TreeContext);
+
+// core/Tree/TreeNode.tsx
+import { useId } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Tree/Tree.module.css.bolio-css-module-source
+var Tree_module_css_default = { "tree": "Tree-module_tree__2jgbS", "group": "Tree-module_group__H2325", "item": "Tree-module_item__wk8rO", "row": "Tree-module_row__lm4LA", "selected": "Tree-module_selected__DwSTb", "disabled": "Tree-module_disabled__9ghlS", "chevron": "Tree-module_chevron__V-147", "chevronIcon": "Tree-module_chevronIcon__YhP38", "open": "Tree-module_open__kBS5H", "icon": "Tree-module_icon__wiWbw", "label": "Tree-module_label__EoRFb" };
+
+// core/Tree/TreeNode.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function TreeNode({ node, level }) {
+  var _a;
+  const { selected, expanded, tabbable, activate, register } = useTreeContext();
+  const labelId = useId();
+  const hasChildren = Boolean(node.children && node.children.length);
+  const isExpanded = hasChildren && expanded.includes(node.value);
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      ref: (element) => register(node.value, element),
+      role: "treeitem",
+      "data-value": node.value,
+      "aria-labelledby": labelId,
+      "aria-level": level,
+      "aria-expanded": hasChildren ? isExpanded : void 0,
+      "aria-selected": selected === node.value,
+      "aria-disabled": node.disabled || void 0,
+      tabIndex: tabbable === node.value ? 0 : -1,
+      className: Tree_module_css_default.item,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: joinClasses(Tree_module_css_default.row, {
+              [Tree_module_css_default.selected]: selected === node.value,
+              [Tree_module_css_default.disabled]: Boolean(node.disabled)
+            }),
+            style: { "--tree-level": level - 1 },
+            onClick: () => activate(node),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: Tree_module_css_default.chevron, "aria-hidden": "true", children: hasChildren && /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  viewBox: "0 0 24 24",
+                  width: "1em",
+                  height: "1em",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  className: joinClasses(Tree_module_css_default.chevronIcon, {
+                    [Tree_module_css_default.open]: isExpanded
+                  }),
+                  children: /* @__PURE__ */ jsx("path", { d: "M9 6l6 6-6 6" })
+                }
+              ) }),
+              node.icon && /* @__PURE__ */ jsx("span", { className: Tree_module_css_default.icon, "aria-hidden": "true", children: node.icon }),
+              /* @__PURE__ */ jsx("span", { id: labelId, className: Tree_module_css_default.label, children: node.label })
+            ]
+          }
+        ),
+        isExpanded && /* @__PURE__ */ jsx("ul", { role: "group", className: Tree_module_css_default.group, children: (_a = node.children) == null ? void 0 : _a.map((child) => /* @__PURE__ */ jsx(TreeNode, { node: child, level: level + 1 }, child.value)) })
+      ]
+    }
+  );
+}
+var TreeNode_default = TreeNode;
+
+// core/Tree/Tree.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var noExpanded = [];
+var TreeComponent = React3.forwardRef(
+  ({
+    data,
+    value: customValue,
+    initialValue = null,
+    onChange,
+    expanded: customExpanded,
+    initialExpanded = noExpanded,
+    onExpandedChange,
+    className = "",
+    style,
+    onKeyDown,
+    onFocus,
+    ...props
+  }, ref) => {
+    var _a;
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const [selfValue, setSelfValue] = useState(initialValue);
+    const selected = customValue !== void 0 ? customValue : selfValue;
+    const [selfExpanded, setSelfExpanded] = useState(initialExpanded);
+    const expanded = customExpanded !== void 0 ? customExpanded : selfExpanded;
+    const [focused, setFocused] = useState();
+    const items = useRef(/* @__PURE__ */ new Map());
+    const visible = useMemo(() => {
+      const list = [];
+      const walk = (nodes, parent) => nodes.forEach((node) => {
+        list.push({ node, parent });
+        if (node.children && expanded.includes(node.value))
+          walk(node.children, node);
+      });
+      walk(data, null);
+      return list;
+    }, [data, expanded]);
+    const enabled = visible.filter(({ node }) => !node.disabled);
+    const tabbable = (_a = [focused, selected].map((value) => enabled.find(({ node }) => node.value === value)).find(Boolean) || enabled[0]) == null ? void 0 : _a.node.value;
+    const setExpanded = (next) => {
+      if (customExpanded === void 0) setSelfExpanded(next);
+      if (onExpandedChange) onExpandedChange(next);
+    };
+    const toggle = (node) => setExpanded(
+      expanded.includes(node.value) ? expanded.filter((value) => value !== node.value) : [...expanded, node.value]
+    );
+    const select = (node) => {
+      if (node.value === selected) return;
+      setSelfValue(node.value);
+      if (onChange) onChange(node.value, node);
+    };
+    const activate = (node) => {
+      if (node.disabled) return;
+      select(node);
+      if (node.children && node.children.length) toggle(node);
+    };
+    const register = useCallback(
+      (value, element) => {
+        if (element) items.current.set(value, element);
+        else items.current.delete(value);
+      },
+      []
+    );
+    const focusNode = (target) => {
+      var _a2;
+      if (target) (_a2 = items.current.get(target.node.value)) == null ? void 0 : _a2.focus();
+    };
+    const keyDownHandler = (event) => {
+      if (onKeyDown) onKeyDown(event);
+      if (event.defaultPrevented) return;
+      const element = event.target.closest(
+        '[role="treeitem"]'
+      );
+      const current = enabled.find(
+        ({ node: node2 }) => node2.value === (element == null ? void 0 : element.dataset.value)
+      );
+      if (!current) return;
+      const index = enabled.indexOf(current);
+      const { node, parent } = current;
+      const hasChildren = Boolean(node.children && node.children.length);
+      const isOpen = hasChildren && expanded.includes(node.value);
+      const actions = {
+        ArrowDown: () => focusNode(enabled[index + 1]),
+        ArrowUp: () => focusNode(enabled[index - 1]),
+        Home: () => focusNode(enabled[0]),
+        End: () => focusNode(enabled[enabled.length - 1]),
+        ArrowRight: () => {
+          if (!hasChildren) return;
+          if (!isOpen) return toggle(node);
+          focusNode(enabled.find((item) => item.parent === node));
+        },
+        ArrowLeft: () => {
+          if (isOpen) return toggle(node);
+          focusNode(enabled.find((item) => item.node === parent));
+        },
+        Enter: () => activate(node),
+        " ": () => activate(node)
+      };
+      const action = actions[event.key];
+      if (!action) return;
+      event.preventDefault();
+      action();
+    };
+    const focusHandler = (event) => {
+      var _a2;
+      if (onFocus) onFocus(event);
+      const value = (_a2 = event.target.closest(
+        '[role="treeitem"]'
+      )) == null ? void 0 : _a2.dataset.value;
+      if (value !== void 0) setFocused(value);
+    };
+    const config = { selected, expanded, tabbable, activate, register };
+    const treeStyle = {
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+      width: SCALES.width(1, "auto"),
+      fontSize: SCALES.font(0.875),
+      "--tree-color": theme.palette.accents_6,
+      "--tree-hover-bg": theme.palette.accents_1,
+      "--tree-selected-color": theme.palette.foreground,
+      "--tree-selected-bg": theme.palette.accents_2,
+      "--tree-icon-color": theme.palette.accents_5,
+      "--tree-disabled-color": theme.palette.accents_4,
+      "--tree-focus": theme.palette.primary,
+      "--tree-radius": theme.layout.radius,
+      ...style
+    };
+    return /* @__PURE__ */ jsx2(TreeContext.Provider, { value: config, children: /* @__PURE__ */ jsx2(
+      "ul",
+      {
+        ref,
+        role: "tree",
+        className: use_classes_default(Tree_module_css_default.tree, className),
+        ...props,
+        style: treeStyle,
+        onKeyDown: keyDownHandler,
+        onFocus: focusHandler,
+        children: data.map((node) => /* @__PURE__ */ jsx2(TreeNode_default, { node, level: 1 }, node.value))
+      }
+    ) });
+  }
+);
+TreeComponent.displayName = "BolioUITree";
+var Tree = with_scale_default(TreeComponent);
+var Tree_default = Tree;
+
+// core/Tree/index.ts
+var Tree_default2 = Tree_default;
+
+export {
+  Tree_default2 as Tree_default
+};

package/esm/chunk-KBZEYKCZ.js

@@ -0,0 +1,98 @@
+import {
+  getVariantColors,
+  isSemanticColorType
+} from "./chunk-GJZT47MP.js";
+
+// core/Input/styles.ts
+var getColors = (palette, status, disabled, { filled, light, ghost, subtle } = {}) => {
+  if (disabled)
+    return {
+      color: palette.accents_4,
+      bgColor: palette.accents_1,
+      borderColor: palette.border,
+      hoverBgColor: palette.accents_1,
+      hoverBorder: palette.border,
+      focusBorder: palette.border,
+      placeholderColor: palette.accents_4,
+      iconColor: palette.accents_3
+    };
+  if (!status || !isSemanticColorType(status))
+    return {
+      color: palette.foreground,
+      bgColor: palette.background,
+      borderColor: palette.border,
+      hoverBgColor: palette.background,
+      hoverBorder: palette.accents_4,
+      focusBorder: palette.primary,
+      placeholderColor: palette.accents_6,
+      iconColor: palette.accents_5
+    };
+  const base = palette[status];
+  const dark = palette[`${status}Dark`];
+  if (subtle) {
+    const { bg, color } = getVariantColors(palette, status, "subtle");
+    return {
+      color,
+      bgColor: bg,
+      borderColor: palette[`${status}Light`],
+      hoverBgColor: palette[`${status}Light`],
+      hoverBorder: base,
+      focusBorder: dark,
+      placeholderColor: color,
+      iconColor: color
+    };
+  }
+  if (light) {
+    const { bg, border, color } = getVariantColors(palette, status, "light");
+    return {
+      color,
+      bgColor: bg,
+      borderColor: border,
+      hoverBgColor: bg,
+      hoverBorder: base,
+      focusBorder: dark,
+      placeholderColor: color,
+      iconColor: color
+    };
+  }
+  if (ghost) {
+    const { bg, border, color } = getVariantColors(palette, status, "outline");
+    return {
+      color,
+      bgColor: bg,
+      borderColor: border,
+      hoverBgColor: bg,
+      hoverBorder: dark,
+      focusBorder: dark,
+      placeholderColor: palette[`${status}Light`],
+      iconColor: color
+    };
+  }
+  if (filled) {
+    const { bg, border, color } = getVariantColors(palette, status, "filled");
+    return {
+      color,
+      bgColor: bg,
+      borderColor: border,
+      hoverBgColor: bg,
+      hoverBorder: dark,
+      focusBorder: dark,
+      placeholderColor: "rgba(255, 255, 255, 0.7)",
+      iconColor: color
+    };
+  }
+  return {
+    color: dark,
+    bgColor: palette[`${status}Light`],
+    borderColor: base,
+    hoverBgColor: palette[`${status}Light`],
+    hoverBorder: base,
+    focusBorder: dark,
+    placeholderColor: palette.accents_6,
+    iconColor: dark
+  };
+};
+
+export {
+  getColors
+};