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

package/esm/chunk-LSSL324I.js

@@ -0,0 +1,84 @@
+import {
+  use_theme_default
+} from "./chunk-V5I4ORQQ.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Row/Row.tsx
+import React, { useMemo } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Row/Row.module.css.bolio-css-module-source
+var Row_module_css_default = { "row": "Row-module_row__KhY-H" };
+
+// core/Row/Row.tsx
+import { jsx } from "react/jsx-runtime";
+var defaultProps = {
+  gap: 0,
+  justify: "start",
+  align: "top",
+  component: "div",
+  className: ""
+};
+var getFlexAlignment = (justify, align) => {
+  const flexJustifyMap = {
+    end: "flex-end",
+    center: "center",
+    "space-around": "space-around",
+    "space-between": "space-between"
+  };
+  const flexAlignMap = {
+    middle: "center",
+    bottom: "flex-end"
+  };
+  return {
+    justifyValue: flexJustifyMap[justify] || "normal",
+    alignValue: flexAlignMap[align] || "normal"
+  };
+};
+var Row = React.forwardRef(
+  ({
+    children,
+    component = defaultProps.component,
+    gap = defaultProps.gap,
+    justify = defaultProps.justify,
+    align = defaultProps.align,
+    className = defaultProps.className,
+    style,
+    ...props
+  }, ref) => {
+    const Component = component;
+    const theme = use_theme_default();
+    const { justifyValue, alignValue } = useMemo(
+      () => getFlexAlignment(justify, align),
+      [justify, align]
+    );
+    const rowStyle = {
+      marginLeft: `calc(${gap} * ${theme.layout.gap} / 2)`,
+      marginRight: `calc(${gap} * ${theme.layout.gap} / 2)`,
+      "--row-gap": `calc(${gap} * ${theme.layout.gap})`,
+      justifyContent: justifyValue,
+      alignItems: alignValue,
+      ...style
+    };
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref,
+        className: use_classes_default("row", Row_module_css_default.row, className),
+        ...props,
+        style: rowStyle,
+        children
+      }
+    );
+  }
+);
+Row.displayName = "BolioUIRow";
+var Row_default = Row;
+
+// core/Row/index.ts
+var Row_default2 = Row_default;
+
+export {
+  Row_default2 as Row_default
+};

package/esm/{chunk-S62PPQHN.js → chunk-MAICNLTY.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-UX2B3G6U.js";
 import {
   use_theme_default
-} from "./chunk-45MVPPJN.js";
+} from "./chunk-V5I4ORQQ.js";
 
 // core/use-scale/with-scale.tsx
 import { forwardRef } from "react";

package/esm/chunk-MDSRXACM.js

@@ -0,0 +1,212 @@
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-MAICNLTY.js";
+import {
+  use_theme_default
+} from "./chunk-V5I4ORQQ.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Carousel/Carousel.tsx
+import React, { useEffect, useRef, useState } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Carousel/Carousel.module.css.bolio-css-module-source
+var Carousel_module_css_default = { "carousel": "Carousel-module_carousel__Rr2by", "viewport": "Carousel-module_viewport__rbEeR", "slide": "Carousel-module_slide__xIqxO", "footer": "Carousel-module_footer__ySplI", "control": "Carousel-module_control__SdAV-", "indicator": "Carousel-module_indicator__YSuaU", "indicators": "Carousel-module_indicators__ZtrIN" };
+
+// core/Carousel/Carousel.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var CarouselComponent = React.forwardRef(
+  ({
+    slidesToShow = 1,
+    gap = "1rem",
+    controls = true,
+    indicators = true,
+    value,
+    initialValue = 0,
+    onChange,
+    previousLabel = "Previous slide",
+    nextLabel = "Next slide",
+    slideLabel = (index, count) => `${index + 1} of ${count}`,
+    indicatorLabel = (index) => `Go to slide ${index + 1}`,
+    className = "",
+    children,
+    style,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const slides = React.Children.toArray(children).filter(React.isValidElement);
+    const visible = Math.max(1, Math.floor(slidesToShow));
+    const positions = Math.max(1, slides.length - visible + 1);
+    const viewport = useRef(null);
+    const settle = useRef(void 0);
+    const [selfIndex, setSelfIndex] = useState(initialValue);
+    const isControlled = value !== void 0;
+    const index = Math.min(isControlled ? value : selfIndex, positions - 1);
+    const latest = useRef(index);
+    latest.current = index;
+    const commit = (next) => {
+      if (next === latest.current) return;
+      latest.current = next;
+      if (!isControlled) setSelfIndex(next);
+      if (onChange) onChange(next);
+    };
+    const scrollTo = (next) => {
+      var _a;
+      const element = (_a = viewport.current) == null ? void 0 : _a.children[next];
+      if (viewport.current && element)
+        viewport.current.scrollLeft = element.offsetLeft;
+    };
+    const go = (next) => {
+      const target = Math.max(0, Math.min(next, positions - 1));
+      scrollTo(target);
+      commit(target);
+    };
+    const scrollHandler = () => {
+      window.clearTimeout(settle.current);
+      settle.current = window.setTimeout(() => {
+        const element = viewport.current;
+        if (!element) return;
+        const offsets = Array.from(element.children).map(
+          (child) => child.offsetLeft
+        );
+        const closest = offsets.reduce(
+          (best, offset, position) => Math.abs(offset - element.scrollLeft) < Math.abs(offsets[best] - element.scrollLeft) ? position : best,
+          0
+        );
+        commit(Math.min(closest, positions - 1));
+      }, 100);
+    };
+    useEffect(() => () => window.clearTimeout(settle.current), []);
+    useEffect(() => {
+      if (value !== void 0) scrollTo(Math.min(value, positions - 1));
+    }, [value]);
+    const carouselStyle = {
+      width: SCALES.width(1, "100%"),
+      margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
+      fontSize: SCALES.font(0.875),
+      "--carousel-visible": visible,
+      "--carousel-gap": gap,
+      "--carousel-border": theme.palette.accents_2,
+      "--carousel-color": theme.palette.accents_6,
+      "--carousel-hover-bg": theme.palette.accents_1,
+      "--carousel-dot": theme.palette.accents_3,
+      "--carousel-dot-active": theme.palette.foreground,
+      "--carousel-focus": theme.palette.primary,
+      "--carousel-radius": theme.layout.radius,
+      ...style
+    };
+    const showFooter = positions > 1 && (controls || indicators);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "region",
+        "aria-roledescription": "carousel",
+        className: use_classes_default(Carousel_module_css_default.carousel, className),
+        ...props,
+        style: carouselStyle,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: viewport,
+              className: Carousel_module_css_default.viewport,
+              tabIndex: 0,
+              onScroll: scrollHandler,
+              children: slides.map((slide, position) => {
+                var _a;
+                return /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    role: "group",
+                    "aria-roledescription": "slide",
+                    "aria-label": slideLabel(position, slides.length),
+                    className: Carousel_module_css_default.slide,
+                    children: slide
+                  },
+                  (_a = slide.key) != null ? _a : position
+                );
+              })
+            }
+          ),
+          showFooter && /* @__PURE__ */ jsxs("div", { className: Carousel_module_css_default.footer, children: [
+            controls && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: Carousel_module_css_default.control,
+                "aria-label": previousLabel,
+                disabled: index === 0,
+                onClick: () => go(index - 1),
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    viewBox: "0 0 24 24",
+                    width: "1.25em",
+                    height: "1.25em",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ jsx("path", { d: "M15 6l-6 6 6 6" })
+                  }
+                )
+              }
+            ),
+            indicators && /* @__PURE__ */ jsx("div", { className: Carousel_module_css_default.indicators, children: Array.from({ length: positions }, (_, position) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: Carousel_module_css_default.indicator,
+                "aria-label": indicatorLabel(position),
+                "aria-current": position === index || void 0,
+                onClick: () => go(position)
+              },
+              position
+            )) }),
+            controls && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: Carousel_module_css_default.control,
+                "aria-label": nextLabel,
+                disabled: index === positions - 1,
+                onClick: () => go(index + 1),
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    viewBox: "0 0 24 24",
+                    width: "1.25em",
+                    height: "1.25em",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ jsx("path", { d: "M9 6l6 6-6 6" })
+                  }
+                )
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+CarouselComponent.displayName = "BolioUICarousel";
+var Carousel = with_scale_default(CarouselComponent);
+var Carousel_default = Carousel;
+
+// core/Carousel/index.ts
+var Carousel_default2 = Carousel_default;
+
+export {
+  Carousel_default2 as Carousel_default
+};

package/esm/chunk-MGHMAZRL.js

@@ -0,0 +1,231 @@
+import {
+  getColors
+} from "./chunk-KBZEYKCZ.js";
+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/Combobox/Combobox.tsx
+import React, { useEffect, useId, useMemo, useState } from "react";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Combobox/Combobox.module.css.bolio-css-module-source
+var Combobox_module_css_default = { "combobox": "Combobox-module_combobox__-928S", "input": "Combobox-module_input__ti3bv", "list": "Combobox-module_list__2otmP", "empty": "Combobox-module_empty__OHL8R", "option": "Combobox-module_option__7vlGK", "active": "Combobox-module_active__hBOFz", "selected": "Combobox-module_selected__SPX5y", "disabled": "Combobox-module_disabled__P6bkw", "srOnly": "Combobox-module_srOnly__g2BKO" };
+
+// core/Combobox/Combobox.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var getLabel = (option) => {
+  var _a;
+  return option ? (_a = option.label) != null ? _a : option.value : "";
+};
+var defaultFilter = (option, text) => getLabel(option).toLowerCase().includes(text.trim().toLowerCase());
+var firstEnabled = (options) => options.findIndex((option) => !option.disabled);
+var ComboboxComponent = React.forwardRef(
+  ({
+    options,
+    value: customValue,
+    initialValue = null,
+    onChange,
+    onInputChange,
+    placeholder,
+    disabled = false,
+    type = "default",
+    rounded = false,
+    filled = false,
+    light = false,
+    ghost = false,
+    subtle = false,
+    emptyText = "No results",
+    filter = defaultFilter,
+    className = "",
+    onKeyDown,
+    onBlur,
+    ...props
+  }, ref) => {
+    const theme = use_theme_default();
+    const { SCALES } = use_scale_default();
+    const colors = getColors(theme.palette, type, disabled, {
+      filled,
+      light,
+      ghost,
+      subtle
+    });
+    const baseId = useId();
+    const listId = `${baseId}-list`;
+    const optionId = (index) => `${baseId}-option-${index}`;
+    const isControlled = customValue !== void 0;
+    const [selfValue, setSelfValue] = useState(initialValue);
+    const selected = isControlled ? customValue : selfValue;
+    const selectedOption = options.find((option) => option.value === selected);
+    const selectedLabel = getLabel(selectedOption);
+    const [text, setText] = useState(selectedLabel);
+    const [open, setOpen] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(-1);
+    useEffect(() => {
+      setText(selectedLabel);
+    }, [selectedLabel]);
+    const query = selectedOption && text === selectedLabel ? "" : text;
+    const visible = useMemo(
+      () => options.filter((option) => filter(option, query)),
+      [options, filter, query]
+    );
+    const expanded = open && visible.length > 0;
+    useEffect(() => {
+      setActiveIndex(open ? firstEnabled(visible) : -1);
+    }, [open, query]);
+    useEffect(() => {
+      var _a;
+      if (activeIndex < 0) return;
+      const element = document.getElementById(optionId(activeIndex));
+      (_a = element == null ? void 0 : element.scrollIntoView) == null ? void 0 : _a.call(element, { block: "nearest" });
+    }, [activeIndex]);
+    const choose = (option) => {
+      if (option.disabled) return;
+      if (!isControlled) setSelfValue(option.value);
+      setText(getLabel(option));
+      setOpen(false);
+      if (onChange) onChange(option.value);
+    };
+    const inputHandler = (event) => {
+      const next = event.target.value;
+      setText(next);
+      setOpen(true);
+      if (onInputChange) onInputChange(next);
+      if (next === "" && selected !== null) {
+        if (!isControlled) setSelfValue(null);
+        if (onChange) onChange(null);
+      }
+    };
+    const move = (direction) => {
+      const count = visible.length;
+      if (!count) return;
+      let index = activeIndex === -1 ? direction === 1 ? -1 : count : activeIndex;
+      for (let step = 0; step < count; step++) {
+        index = (index + direction + count) % count;
+        if (!visible[index].disabled) return setActiveIndex(index);
+      }
+    };
+    const keyDownHandler = (event) => {
+      if (onKeyDown) onKeyDown(event);
+      if (event.defaultPrevented) return;
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        if (!open) return setOpen(true);
+        return move(event.key === "ArrowDown" ? 1 : -1);
+      }
+      if (event.key === "Enter" && expanded && activeIndex >= 0) {
+        event.preventDefault();
+        return choose(visible[activeIndex]);
+      }
+      if (event.key === "Escape" && open) {
+        event.preventDefault();
+        setOpen(false);
+      }
+    };
+    const blurHandler = (event) => {
+      if (onBlur) onBlur(event);
+      setOpen(false);
+      setText(selectedLabel);
+    };
+    const comboboxStyle = {
+      "--combobox-font-size": SCALES.font(0.875),
+      "--combobox-input-height": SCALES.height(2.25),
+      "--combobox-width": SCALES.width(1, "initial"),
+      "--combobox-height": SCALES.height(1, "auto"),
+      "--combobox-padding-top": SCALES.pt(0),
+      "--combobox-padding-right": SCALES.pr(0),
+      "--combobox-padding-bottom": SCALES.pb(0),
+      "--combobox-padding-left": SCALES.pl(0),
+      "--combobox-margin-top": SCALES.mt(0),
+      "--combobox-margin-right": SCALES.mr(0),
+      "--combobox-margin-bottom": SCALES.mb(0),
+      "--combobox-margin-left": SCALES.ml(0),
+      "--combobox-text-color": theme.palette.foreground,
+      "--combobox-bg": theme.palette.background,
+      "--combobox-border-color": theme.palette.border,
+      "--combobox-radius": rounded ? "25px" : theme.layout.radius,
+      "--combobox-popup-radius": theme.layout.radius,
+      "--combobox-field-color": colors.color,
+      "--combobox-field-bg": colors.bgColor,
+      "--combobox-field-border": colors.borderColor,
+      "--combobox-field-hover-bg": colors.hoverBgColor,
+      "--combobox-field-hover-border": colors.hoverBorder,
+      "--combobox-focus-border-color": colors.focusBorder,
+      "--combobox-placeholder-color": colors.placeholderColor,
+      "--combobox-disabled-color": theme.palette.accents_4,
+      "--combobox-shadow": theme.expressiveness.shadowMedium,
+      "--combobox-active-bg": theme.palette.accents_2,
+      "--combobox-empty-color": theme.palette.accents_5
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: use_classes_default(Combobox_module_css_default.combobox, className),
+        style: comboboxStyle,
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              type: "text",
+              role: "combobox",
+              autoComplete: "off",
+              "aria-autocomplete": "list",
+              "aria-expanded": expanded,
+              "aria-controls": expanded ? listId : void 0,
+              "aria-activedescendant": expanded && activeIndex >= 0 ? optionId(activeIndex) : void 0,
+              value: text,
+              placeholder,
+              disabled,
+              onChange: inputHandler,
+              onKeyDown: keyDownHandler,
+              onBlur: blurHandler,
+              className: Combobox_module_css_default.input,
+              ...props
+            }
+          ),
+          expanded && /* @__PURE__ */ jsx("ul", { id: listId, role: "listbox", className: Combobox_module_css_default.list, children: visible.map((option, index) => /* @__PURE__ */ jsx(
+            "li",
+            {
+              id: optionId(index),
+              role: "option",
+              "aria-selected": option.value === selected,
+              "aria-disabled": option.disabled || void 0,
+              className: joinClasses(Combobox_module_css_default.option, {
+                [Combobox_module_css_default.active]: index === activeIndex,
+                [Combobox_module_css_default.selected]: option.value === selected,
+                [Combobox_module_css_default.disabled]: option.disabled
+              }),
+              onMouseDown: (event) => {
+                event.preventDefault();
+                choose(option);
+              },
+              onMouseMove: () => !option.disabled && setActiveIndex(index),
+              children: getLabel(option)
+            },
+            option.value
+          )) }),
+          open && visible.length === 0 && /* @__PURE__ */ jsx("div", { className: Combobox_module_css_default.empty, children: emptyText }),
+          /* @__PURE__ */ jsx("div", { role: "status", className: Combobox_module_css_default.srOnly, children: expanded ? `${visible.length} result${visible.length === 1 ? "" : "s"} available` : "" })
+        ]
+      }
+    );
+  }
+);
+ComboboxComponent.displayName = "BolioUICombobox";
+var Combobox = with_scale_default(ComboboxComponent);
+var Combobox_default = Combobox;
+
+// core/Combobox/index.ts
+var Combobox_default2 = Combobox_default;
+
+export {
+  Combobox_default2 as Combobox_default
+};