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

package/esm/chunk-DSX6YDJM.js

@@ -0,0 +1,71 @@
+// core/utils/layouts.ts
+import { useState } from "react";
+var getElementOffset = (el) => {
+  if (!el)
+    return {
+      top: 0,
+      left: 0
+    };
+  const { top, left } = el.getBoundingClientRect();
+  return { top, left };
+};
+var defaultRect = {
+  top: -1e3,
+  left: -1e3,
+  right: -1e3,
+  width: 0,
+  height: 0,
+  elementTop: -1e3
+};
+var getRectFromDOMWithContainer = (domRect, getContainer) => {
+  if (!domRect) return defaultRect;
+  const container = getContainer ? getContainer() : null;
+  const scrollElement = container || document.documentElement;
+  const { top: offsetTop, left: offsetLeft } = getElementOffset(container);
+  return {
+    ...domRect,
+    width: domRect.width || domRect.right - domRect.left,
+    height: domRect.height || domRect.top - domRect.bottom,
+    top: domRect.bottom + scrollElement.scrollTop - offsetTop,
+    left: domRect.left + scrollElement.scrollLeft - offsetLeft,
+    elementTop: domRect.top + scrollElement.scrollTop - offsetTop
+  };
+};
+var isUnplacedRect = (rect) => {
+  if (!rect) return true;
+  return rect.top === defaultRect.top && rect.left === defaultRect.left;
+};
+var getRefRect = (ref, getContainer) => {
+  if (!ref || !ref.current) return defaultRect;
+  const rect = ref.current.getBoundingClientRect();
+  return getRectFromDOMWithContainer(rect, getContainer);
+};
+var getEventRect = (event, getContainer) => {
+  var _a;
+  const rect = (_a = event == null ? void 0 : event.target) == null ? void 0 : _a.getBoundingClientRect();
+  if (!rect) return defaultRect;
+  return getRectFromDOMWithContainer(rect, getContainer);
+};
+var isRefTarget = (eventOrRef) => {
+  return typeof (eventOrRef == null ? void 0 : eventOrRef.target) === "undefined";
+};
+var useRect = (initialState) => {
+  const [rect, setRect] = useState(
+    initialState || defaultRect
+  );
+  const updateRect = (eventOrRef, getContainer) => {
+    if (isRefTarget(eventOrRef))
+      return setRect(getRefRect(eventOrRef, getContainer));
+    setRect(getEventRect(eventOrRef, getContainer));
+  };
+  return {
+    rect,
+    setRect: updateRect
+  };
+};
+
+export {
+  isUnplacedRect,
+  getRefRect,
+  useRect
+};

package/esm/chunk-DTRBG524.js

@@ -0,0 +1,195 @@
+import {
+  ModalContent_default,
+  ModalSubtitle_default,
+  ModalTitle_default,
+  backdrop_default,
+  use_body_scroll_default
+} from "./chunk-K53ERLS7.js";
+import {
+  use_keyboard_default
+} from "./chunk-F3AL4TQZ.js";
+import {
+  css_transition_default
+} from "./chunk-LDTDMDE6.js";
+import {
+  use_portal_default
+} from "./chunk-BXDUHMWS.js";
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-S62PPQHN.js";
+import {
+  isChildElement
+} from "./chunk-UX2B3G6U.js";
+import {
+  use_theme_default
+} from "./chunk-45MVPPJN.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Drawer/Drawer.tsx
+import React2, { useEffect as useEffect2, useState } from "react";
+import { createPortal } from "react-dom";
+
+// core/Drawer/DrawerWrapper.tsx
+import _JSXStyle from "styled-jsx/style";
+import React, { useEffect, useImperativeHandle, useMemo, useRef } from "react";
+
+// core/Drawer/helper.ts
+var getDrawerTransform = (placement) => {
+  const translates = {
+    top: {
+      initial: "translate3d(0, -100%, 0)",
+      hidden: "translate3d(0, -100%, 0)",
+      visible: "translate3d(0, 0, 0)"
+    },
+    left: {
+      initial: "translate3d(-100%, 0, 0)",
+      hidden: "translate3d(-100%, 0, 0)",
+      visible: "translate3d(0, 0, 0)"
+    },
+    bottom: {
+      initial: "translate3d(0, 100%, 0)",
+      hidden: "translate3d(0, 100%, 0)",
+      visible: "translate3d(0, 0, 0)"
+    },
+    right: {
+      initial: "translate3d(100%, 0, 0)",
+      hidden: "translate3d(100%, 0, 0)",
+      visible: "translate3d(0, 0, 0)"
+    }
+  };
+  return translates[placement];
+};
+
+// core/Drawer/DrawerWrapper.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var DrawerWrapper = React.forwardRef(({
+  className = "",
+  children,
+  visible = false,
+  placement,
+  ...props
+}, ref) => {
+  const theme = use_theme_default();
+  const {
+    SCALES
+  } = use_scale_default();
+  const modalContent = useRef(null);
+  useImperativeHandle(ref, () => modalContent.current);
+  const tabStart = useRef(null);
+  const tabEnd = useRef(null);
+  const transform = useMemo(() => getDrawerTransform(placement), [placement]);
+  const classes = use_classes_default("wrapper", placement, className);
+  useEffect(() => {
+    if (!visible) return;
+    const activeElement = document.activeElement;
+    const isChild = isChildElement(modalContent.current, activeElement);
+    if (isChild) return;
+    if (tabStart.current) tabStart.current.focus();
+  }, [visible]);
+  const onKeyDown = (event) => {
+    const isTabDown = event.keyCode === 9;
+    if (!visible || !isTabDown) return;
+    const activeElement = document.activeElement;
+    if (event.shiftKey) {
+      if (activeElement === tabStart.current) {
+        if (tabEnd.current) tabEnd.current.focus();
+      }
+    } else {
+      if (activeElement === tabEnd.current) {
+        if (tabStart.current) tabStart.current.focus();
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx(css_transition_default, { name: "wrapper", visible, clearTime: 300, children: /* @__PURE__ */ jsxs("div", { role: "dialog", "aria-modal": "true", tabIndex: -1, onKeyDown, ref: modalContent, ...props, className: _JSXStyle.dynamic([["157760385", [theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, transform.initial, SCALES.font(1), SCALES.pl(1.3125), SCALES.pr(1.3125), SCALES.pt(1.3125), SCALES.pb(1.3125), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, "100%"), SCALES.height(1, "auto"), SCALES.width(1, "auto"), SCALES.height(1, "100%"), transform.hidden, transform.visible, transform.visible, transform.hidden]]]) + " " + (props && props.className != null && props.className || classes || ""), children: [
+    /* @__PURE__ */ jsx("div", { tabIndex: 0, "aria-hidden": "true", ref: tabStart, className: _JSXStyle.dynamic([["157760385", [theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, transform.initial, SCALES.font(1), SCALES.pl(1.3125), SCALES.pr(1.3125), SCALES.pt(1.3125), SCALES.pb(1.3125), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, "100%"), SCALES.height(1, "auto"), SCALES.width(1, "auto"), SCALES.height(1, "100%"), transform.hidden, transform.visible, transform.visible, transform.hidden]]]) + " hide-tab start" }),
+    children,
+    /* @__PURE__ */ jsx("div", { tabIndex: 0, "aria-hidden": "true", ref: tabEnd, className: _JSXStyle.dynamic([["157760385", [theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, transform.initial, SCALES.font(1), SCALES.pl(1.3125), SCALES.pr(1.3125), SCALES.pt(1.3125), SCALES.pb(1.3125), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, "100%"), SCALES.height(1, "auto"), SCALES.width(1, "auto"), SCALES.height(1, "100%"), transform.hidden, transform.visible, transform.visible, transform.hidden]]]) + " hide-tab end" }),
+    /* @__PURE__ */ jsx(_JSXStyle, { id: "157760385", dynamic: [theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, transform.initial, SCALES.font(1), SCALES.pl(1.3125), SCALES.pr(1.3125), SCALES.pt(1.3125), SCALES.pb(1.3125), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, "100%"), SCALES.height(1, "auto"), SCALES.width(1, "auto"), SCALES.height(1, "100%"), transform.hidden, transform.visible, transform.visible, transform.hidden], children: `.wrapper.__jsx-style-dynamic-selector{position:fixed;top:0;left:0;right:0;bottom:0;max-width:100%;vertical-align:middle;overflow:auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;box-sizing:border-box;background-color:${theme.palette.background};color:${theme.palette.foreground};border-radius:calc(3 * ${theme.layout.radius});box-shadow:${theme.expressiveness.shadowLarge};opacity:0;outline:none;-webkit-transform:${transform.initial};-ms-transform:${transform.initial};transform:${transform.initial};-webkit-transition: opacity, -webkit-transform 400ms cubic-bezier(0.1,0.6,0.1,1);-webkit-transition: opacity, transform 400ms cubic-bezier(0.1,0.6,0.1,1);transition: opacity, transform 400ms cubic-bezier(0.1,0.6,0.1,1);font-size:${SCALES.font(1)};--modal-wrapper-padding-left:${SCALES.pl(1.3125)};--modal-wrapper-padding-right:${SCALES.pr(1.3125)};padding:${SCALES.pt(1.3125)} var(--modal-wrapper-padding-right) ${SCALES.pb(1.3125)} var(--modal-wrapper-padding-left);margin:${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};}.top.__jsx-style-dynamic-selector,.bottom.__jsx-style-dynamic-selector{width:${SCALES.width(1, "100%")};height:${SCALES.height(1, "auto")};}.left.__jsx-style-dynamic-selector,.right.__jsx-style-dynamic-selector{width:${SCALES.width(1, "auto")};height:${SCALES.height(1, "100%")};}.top.__jsx-style-dynamic-selector{bottom:auto;border-top-left-radius:0;border-top-right-radius:0;}.left.__jsx-style-dynamic-selector{right:auto;border-top-left-radius:0;border-bottom-left-radius:0;}.bottom.__jsx-style-dynamic-selector{top:auto;border-bottom-left-radius:0;border-bottom-right-radius:0;}.right.__jsx-style-dynamic-selector{left:auto;border-top-right-radius:0;border-bottom-right-radius:0;}.wrapper-enter.__jsx-style-dynamic-selector{opacity:0;-webkit-transform:${transform.hidden};-ms-transform:${transform.hidden};transform:${transform.hidden};}.wrapper-enter-active.__jsx-style-dynamic-selector{opacity:1;-webkit-transform:${transform.visible};-ms-transform:${transform.visible};transform:${transform.visible};}.wrapper-leave.__jsx-style-dynamic-selector{opacity:1;-webkit-transform:${transform.visible};-ms-transform:${transform.visible};transform:${transform.visible};-webkit-transition: opacity, -webkit-transform 400ms cubic-bezier(0.1,0.2,0.1,1);-webkit-transition: opacity, transform 400ms cubic-bezier(0.1,0.2,0.1,1);transition: opacity, transform 400ms cubic-bezier(0.1,0.2,0.1,1);}.wrapper-leave-active.__jsx-style-dynamic-selector{opacity:0.4;-webkit-transform:${transform.hidden};-ms-transform:${transform.hidden};transform:${transform.hidden};}.hide-tab.__jsx-style-dynamic-selector{outline:none;overflow:hidden;width:0;height:0;opacity:0;}` })
+  ] }) });
+});
+DrawerWrapper.displayName = "BolioUIDrawerWrapper";
+var DrawerWrapper_default = DrawerWrapper;
+
+// core/Drawer/Drawer.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var DrawerComponent = React2.forwardRef(
+  ({
+    visible: customVisible,
+    keyboard = true,
+    disableBackdropClick,
+    wrapClassName,
+    children,
+    placement,
+    onClose,
+    onContentClick,
+    ...props
+  }, ref) => {
+    const portal = use_portal_default("drawer");
+    const [visible, setVisible] = useState(false);
+    const [, setBodyHidden] = use_body_scroll_default(null, { delayReset: 300 });
+    const closeDrawer = () => {
+      if (onClose) onClose();
+      setVisible(false);
+      setBodyHidden(false);
+    };
+    useEffect2(() => {
+      if (typeof customVisible === "undefined") return;
+      setVisible(customVisible);
+      setBodyHidden(customVisible);
+    }, [customVisible, setBodyHidden]);
+    const { bindings } = use_keyboard_default(
+      () => {
+        if (keyboard) closeDrawer();
+      },
+      27 /* Escape */,
+      {
+        disableGlobalEvent: true
+      }
+    );
+    const closeFromBackdrop = () => {
+      if (disableBackdropClick) return;
+      closeDrawer();
+    };
+    if (!portal) return null;
+    return createPortal(
+      /* @__PURE__ */ jsx2(
+        backdrop_default,
+        {
+          onClick: closeFromBackdrop,
+          onContentClick,
+          visible,
+          width: "100%",
+          ...bindings,
+          children: /* @__PURE__ */ jsx2(
+            DrawerWrapper_default,
+            {
+              ref,
+              visible,
+              className: wrapClassName,
+              placement,
+              ...props,
+              children
+            }
+          )
+        }
+      ),
+      portal
+    );
+  }
+);
+DrawerComponent.displayName = "BolioUIDrawer";
+var Drawer = with_scale_default(DrawerComponent);
+var Drawer_default = Drawer;
+
+// core/Drawer/index.ts
+Drawer_default.Title = ModalTitle_default;
+Drawer_default.Subtitle = ModalSubtitle_default;
+Drawer_default.Content = ModalContent_default;
+var Drawer_default2 = Drawer_default;
+
+export {
+  Drawer_default2 as Drawer_default
+};

package/esm/chunk-ELIPUM6Q.js

@@ -0,0 +1,142 @@
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-S62PPQHN.js";
+import {
+  use_theme_default
+} from "./chunk-45MVPPJN.js";
+import {
+  joinClasses,
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Combobox/Combobox.tsx
+import _JSXStyle from "styled-jsx/style";
+import React, { useEffect, useId, useMemo, useState } from "react";
+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,
+  emptyText = "No results",
+  filter = defaultFilter,
+  className = "",
+  onKeyDown,
+  onBlur,
+  ...props
+}, ref) => {
+  const theme = use_theme_default();
+  const {
+    SCALES
+  } = use_scale_default();
+  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);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: _JSXStyle.dynamic([["1685493807", [SCALES.font(1), SCALES.width(1, "initial"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.foreground, theme.palette.background, theme.palette.border, theme.layout.radius, theme.palette.primary, theme.palette.accents_4, theme.palette.accents_1, theme.palette.background, theme.palette.border, theme.layout.radius, theme.expressiveness.shadowMedium, theme.palette.foreground, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_5]]]) + " " + (use_classes_default("combobox", className) || ""), 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, ...props, className: _JSXStyle.dynamic([["1685493807", [SCALES.font(1), SCALES.width(1, "initial"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.foreground, theme.palette.background, theme.palette.border, theme.layout.radius, theme.palette.primary, theme.palette.accents_4, theme.palette.accents_1, theme.palette.background, theme.palette.border, theme.layout.radius, theme.expressiveness.shadowMedium, theme.palette.foreground, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_5]]]) + " " + (props && props.className != null && props.className || "") }),
+    expanded && /* @__PURE__ */ jsx("ul", { id: listId, role: "listbox", className: _JSXStyle.dynamic([["1685493807", [SCALES.font(1), SCALES.width(1, "initial"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.foreground, theme.palette.background, theme.palette.border, theme.layout.radius, theme.palette.primary, theme.palette.accents_4, theme.palette.accents_1, theme.palette.background, theme.palette.border, theme.layout.radius, theme.expressiveness.shadowMedium, theme.palette.foreground, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_5]]]), children: visible.map((option, index) => /* @__PURE__ */ jsx("li", { id: optionId(index), role: "option", "aria-selected": option.value === selected, "aria-disabled": option.disabled || void 0, onMouseDown: (event) => {
+      event.preventDefault();
+      choose(option);
+    }, onMouseMove: () => !option.disabled && setActiveIndex(index), className: _JSXStyle.dynamic([["1685493807", [SCALES.font(1), SCALES.width(1, "initial"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.foreground, theme.palette.background, theme.palette.border, theme.layout.radius, theme.palette.primary, theme.palette.accents_4, theme.palette.accents_1, theme.palette.background, theme.palette.border, theme.layout.radius, theme.expressiveness.shadowMedium, theme.palette.foreground, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_5]]]) + " " + (joinClasses({
+      active: index === activeIndex,
+      selected: option.value === selected,
+      disabled: option.disabled
+    }) || ""), children: getLabel(option) }, option.value)) }),
+    open && visible.length === 0 && /* @__PURE__ */ jsx("div", { className: _JSXStyle.dynamic([["1685493807", [SCALES.font(1), SCALES.width(1, "initial"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.foreground, theme.palette.background, theme.palette.border, theme.layout.radius, theme.palette.primary, theme.palette.accents_4, theme.palette.accents_1, theme.palette.background, theme.palette.border, theme.layout.radius, theme.expressiveness.shadowMedium, theme.palette.foreground, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_5]]]) + " empty", children: emptyText }),
+    /* @__PURE__ */ jsx("div", { role: "status", className: _JSXStyle.dynamic([["1685493807", [SCALES.font(1), SCALES.width(1, "initial"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.foreground, theme.palette.background, theme.palette.border, theme.layout.radius, theme.palette.primary, theme.palette.accents_4, theme.palette.accents_1, theme.palette.background, theme.palette.border, theme.layout.radius, theme.expressiveness.shadowMedium, theme.palette.foreground, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_5]]]) + " sr-only", children: expanded ? `${visible.length} result${visible.length === 1 ? "" : "s"} available` : "" }),
+    /* @__PURE__ */ jsx(_JSXStyle, { id: "1685493807", dynamic: [SCALES.font(1), SCALES.width(1, "initial"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.foreground, theme.palette.background, theme.palette.border, theme.layout.radius, theme.palette.primary, theme.palette.accents_4, theme.palette.accents_1, theme.palette.background, theme.palette.border, theme.layout.radius, theme.expressiveness.shadowMedium, theme.palette.foreground, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_5], children: `.combobox.__jsx-style-dynamic-selector{position:relative;display:inline-block;font-size:${SCALES.font(1)};width:${SCALES.width(1, "initial")};height:${SCALES.height(1, "auto")};padding:${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};margin:${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};}input.__jsx-style-dynamic-selector{box-sizing:border-box;width:100%;min-width:12.5em;height:2.5em;padding:0 0.875em;font:inherit;color:${theme.palette.foreground};background-color:${theme.palette.background};border:1px solid ${theme.palette.border};border-radius:${theme.layout.radius};outline:none;-webkit-transition:border-color 0.15s ease;transition:border-color 0.15s ease;}input.__jsx-style-dynamic-selector:focus{border-color:${theme.palette.primary};}input.__jsx-style-dynamic-selector:disabled{cursor:not-allowed;color:${theme.palette.accents_4};background-color:${theme.palette.accents_1};}ul.__jsx-style-dynamic-selector,.empty.__jsx-style-dynamic-selector{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:1100;box-sizing:border-box;background-color:${theme.palette.background};border:1px solid ${theme.palette.border};border-radius:${theme.layout.radius};box-shadow:${theme.expressiveness.shadowMedium};}ul.__jsx-style-dynamic-selector{max-height:15em;overflow-y:auto;margin:0;padding:0.25em;list-style:none;}li.__jsx-style-dynamic-selector{padding:0.5em 0.75em;border-radius:4px;cursor:pointer;color:${theme.palette.foreground};}li.active.__jsx-style-dynamic-selector{background-color:${theme.palette.accents_2};}li.selected.__jsx-style-dynamic-selector{font-weight:600;}li.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;color:${theme.palette.accents_4};}.empty.__jsx-style-dynamic-selector{padding:0.75em;color:${theme.palette.accents_5};}.sr-only.__jsx-style-dynamic-selector{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;-webkit-clip:rect(0 0 0 0);clip:rect(0 0 0 0);white-space:nowrap;border:0;}` })
+  ] });
+});
+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
+};

package/esm/chunk-EMDU5OPY.js

@@ -0,0 +1,236 @@
+import {
+  use_resize_default
+} from "./chunk-JJFOGZ6V.js";
+import {
+  use_real_shape_default
+} from "./chunk-HKOESPKZ.js";
+import {
+  log_warning_default
+} from "./chunk-AXYDJGTN.js";
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-S62PPQHN.js";
+import {
+  use_theme_default
+} from "./chunk-45MVPPJN.js";
+import {
+  joinClasses
+} from "./chunk-5KUROAEP.js";
+
+// core/Table/Table.tsx
+import _JSXStyle3 from "styled-jsx/style";
+import React4, { useCallback, useEffect as useEffect2, useImperativeHandle, useMemo as useMemo2, useRef, useState } from "react";
+
+// core/Table/TableHead.tsx
+import _JSXStyle from "styled-jsx/style";
+import { useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var makeColgroup = (width, columns) => {
+  const unsetWidthCount = columns.filter((c) => !c.width).length;
+  const customWidthTotal = columns.reduce((pre, current) => {
+    return current.width ? pre + current.width : pre;
+  }, 0);
+  const averageWidth = (width - customWidthTotal) / unsetWidthCount;
+  if (averageWidth <= 0) return /* @__PURE__ */ jsx("colgroup", {});
+  return /* @__PURE__ */ jsx("colgroup", { children: columns.map((column, index) => /* @__PURE__ */ jsx("col", { width: column.width || averageWidth }, `colgroup-${index}`)) });
+};
+var TableHead = (props) => {
+  const theme = use_theme_default();
+  const {
+    columns,
+    width
+  } = props;
+  const isScalableWidth = useMemo(() => columns.find((item) => !!item.width), [columns]);
+  const colgroup = useMemo(() => {
+    if (!isScalableWidth) return /* @__PURE__ */ jsx("colgroup", {});
+    return makeColgroup(width, columns);
+  }, [isScalableWidth, width, columns]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    colgroup,
+    /* @__PURE__ */ jsx("thead", { className: _JSXStyle.dynamic([["134865897", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]), children: /* @__PURE__ */ jsx("tr", { className: _JSXStyle.dynamic([["134865897", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]), children: columns.map((column, index) => /* @__PURE__ */ jsx("th", { className: _JSXStyle.dynamic([["134865897", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + (column.className || ""), children: /* @__PURE__ */ jsx("div", { className: _JSXStyle.dynamic([["134865897", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " thead-box", children: column.label }) }, `table-th-${String(column.prop)}-${index}`)) }) }),
+    /* @__PURE__ */ jsx(_JSXStyle, { id: "134865897", dynamic: [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius], children: `thead.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;font-size:inherit;}th.__jsx-style-dynamic-selector{padding:0 0.5em;font-size:calc(0.75 * var(--table-font-size));font-weight:normal;text-align:left;-webkit-letter-spacing:0;-moz-letter-spacing:0;-ms-letter-spacing:0;letter-spacing:0;vertical-align:middle;min-height:calc(2.5 * var(--table-font-size));color:${theme.palette.accents_5};background:${theme.palette.accents_1};border-bottom:1px solid ${theme.palette.border};border-top:1px solid ${theme.palette.border};border-radius:0;}th.__jsx-style-dynamic-selector:nth-child(1){border-bottom:1px solid ${theme.palette.border};border-left:1px solid ${theme.palette.border};border-top:1px solid ${theme.palette.border};border-top-left-radius:${theme.layout.radius};border-bottom-left-radius:${theme.layout.radius};}th.__jsx-style-dynamic-selector:last-child{border-bottom:1px solid ${theme.palette.border};border-right:1px solid ${theme.palette.border};border-top:1px solid ${theme.palette.border};border-top-right-radius:${theme.layout.radius};border-bottom-right-radius:${theme.layout.radius};}.thead-box.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-align:center;min-height:calc(2.5 * var(--table-font-size));text-transform:uppercase;}` })
+  ] });
+};
+TableHead.displayName = "BolioUITableHead";
+var TableHead_default = TableHead;
+
+// core/Table/TableBody.tsx
+import _JSXStyle2 from "styled-jsx/style";
+
+// core/Table/TableCell.tsx
+import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
+var TableCell = ({
+  columns,
+  row,
+  rowIndex,
+  emptyText,
+  onCellClick
+}) => {
+  return /* @__PURE__ */ jsx2(Fragment2, { children: columns.map((column, index) => {
+    const currentRowValue = row[column.prop];
+    const cellValue = currentRowValue || emptyText;
+    const shouldBeRenderElement = column.renderHandler(
+      currentRowValue,
+      row,
+      rowIndex
+    );
+    return /* @__PURE__ */ jsx2(
+      "td",
+      {
+        onClick: () => onCellClick && onCellClick(currentRowValue, rowIndex, index),
+        className: column.className,
+        children: /* @__PURE__ */ jsx2("div", { className: "cell", children: shouldBeRenderElement ? shouldBeRenderElement : cellValue })
+      },
+      `row-td-${index}-${String(column.prop)}`
+    );
+  }) });
+};
+var TableCell_default = TableCell;
+
+// core/Table/TableContext.ts
+import React2 from "react";
+var defaultContext = {
+  columns: [],
+  updateColumn: () => {
+  }
+};
+var TableContext = React2.createContext(defaultContext);
+var useTableContext = () => React2.useContext(TableContext);
+
+// core/Table/TableBody.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var TableBody = ({
+  data,
+  hover,
+  emptyText,
+  onRow,
+  onCell,
+  rowClassName
+}) => {
+  const theme = use_theme_default();
+  const {
+    columns
+  } = useTableContext();
+  const rowClickHandler = (row, index) => {
+    if (onRow) onRow(row, index);
+  };
+  return /* @__PURE__ */ jsxs2("tbody", { className: _JSXStyle2.dynamic([["3433300570", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]]), children: [
+    data.map((row, index) => {
+      const className = rowClassName(row, index);
+      return /* @__PURE__ */ jsx3("tr", { onClick: () => rowClickHandler(row, index), className: _JSXStyle2.dynamic([["3433300570", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]]) + " " + (joinClasses({
+        hover
+      }, className) || ""), children: /* @__PURE__ */ jsx3(TableCell_default, { columns, row, rowIndex: index, emptyText, onCellClick: onCell }) }, `tbody-row-${index}`);
+    }),
+    /* @__PURE__ */ jsx3(_JSXStyle2, { id: "3433300570", dynamic: [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6], children: `tr.__jsx-style-dynamic-selector{-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;font-size:inherit;}tr.hover.__jsx-style-dynamic-selector:hover{background-color:${theme.palette.accents_1};}tr.__jsx-style-dynamic-selector td{padding:0 0.5em;border-bottom:1px solid ${theme.palette.border};color:${theme.palette.accents_6};font-size:calc(0.875 * var(--table-font-size));text-align:left;}tr.__jsx-style-dynamic-selector .cell{min-height:calc(3.125 * var(--table-font-size));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}` })
+  ] });
+};
+TableBody.displayName = "BolioUITableBody";
+var TableBody_default = TableBody;
+
+// core/Table/TableColumn.tsx
+import { useEffect } from "react";
+var defaultRender = () => {
+};
+var TableColumn = (columnProps) => {
+  const {
+    children,
+    prop,
+    label,
+    width,
+    className = "",
+    render: renderHandler = defaultRender
+  } = columnProps;
+  const { updateColumn } = useTableContext();
+  const safeProp = String(prop).trim();
+  if (!safeProp) {
+    log_warning_default('The props "prop" is required.', "Table.Column");
+  }
+  useEffect(() => {
+    updateColumn({
+      label: children || label,
+      prop: safeProp,
+      width,
+      className,
+      renderHandler
+    });
+  }, [children, label, safeProp, width, className, renderHandler, updateColumn]);
+  return null;
+};
+TableColumn.displayName = "BolioUITableColumn";
+var TableColumn_default = TableColumn;
+
+// core/Table/Table.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var defaultProps = {
+  hover: true,
+  initialData: [],
+  emptyText: "",
+  className: "",
+  rowClassName: () => ""
+};
+function TableComponent(tableProps, forwardedRef) {
+  const {
+    children,
+    data: customData,
+    initialData = defaultProps.initialData,
+    hover = defaultProps.hover,
+    emptyText = defaultProps.emptyText,
+    onRow,
+    onCell,
+    onChange,
+    className = defaultProps.className,
+    rowClassName = defaultProps.rowClassName,
+    ...props
+  } = tableProps;
+  const {
+    SCALES
+  } = use_scale_default();
+  const tableRef = useRef(null);
+  useImperativeHandle(forwardedRef, () => tableRef.current);
+  const [{
+    width
+  }, updateShape] = use_real_shape_default(tableRef);
+  const [columns, setColumns] = useState([]);
+  const [data, setData] = useState(initialData);
+  const updateColumn = useCallback((column) => {
+    setColumns((last) => {
+      const hasColumn = last.find((item) => item.prop === column.prop);
+      if (!hasColumn) return [...last, column];
+      return last.map((item) => {
+        if (item.prop !== column.prop) return item;
+        return column;
+      });
+    });
+  }, []);
+  const contextValue = useMemo2(() => ({
+    columns,
+    updateColumn
+  }), [columns, updateColumn]);
+  useEffect2(() => {
+    if (typeof customData === "undefined") return;
+    setData(customData);
+  }, [customData]);
+  use_resize_default(() => updateShape());
+  return (
+    // the context is typed for any row: each Table provides its own
+    /* @__PURE__ */ jsx4(TableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs3("table", { ref: tableRef, ...props, className: _JSXStyle3.dynamic([["2991182230", [SCALES.font(1), SCALES.width(1, "100%"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || ""), children: [
+      /* @__PURE__ */ jsx4(TableHead_default, { columns, width }),
+      /* @__PURE__ */ jsx4(TableBody_default, { data, hover, emptyText, onRow, onCell, rowClassName }),
+      children,
+      /* @__PURE__ */ jsx4(_JSXStyle3, { id: "2991182230", dynamic: [SCALES.font(1), SCALES.width(1, "100%"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)], children: `table.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;--table-font-size:${SCALES.font(1)};font-size:var(--table-font-size);width:${SCALES.width(1, "100%")};height:${SCALES.height(1, "auto")};padding:${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};margin:${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};}` })
+    ] }) })
+  );
+}
+TableComponent.displayName = "BolioUITable";
+TableComponent.Column = TableColumn_default;
+var Table = with_scale_default(React4.forwardRef(TableComponent));
+Table.Column = TableColumn_default;
+var Table_default = Table;
+
+// core/Table/index.ts
+var Table_default2 = Table_default;
+
+export {
+  Table_default2 as Table_default
+};