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

package/esm/chunk-IUOX444H.js

@@ -0,0 +1,282 @@
+import {
+  isUnplacedRect,
+  useRect
+} from "./chunk-DSX6YDJM.js";
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-S62PPQHN.js";
+import {
+  isBolioUIElement
+} from "./chunk-UX2B3G6U.js";
+import {
+  use_theme_default
+} from "./chunk-45MVPPJN.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Tabs/Tabs.tsx
+import _JSXStyle3 from "styled-jsx/style";
+import React4, { useEffect as useEffect3, useMemo as useMemo3, useRef as useRef4, useState } from "react";
+
+// core/Tabs/TabsContext.ts
+import React from "react";
+var defaultContext = {
+  inGroup: false
+};
+var TabsContext = React.createContext(defaultContext);
+var useTabsContext = () => React.useContext(TabsContext);
+
+// core/Shared/highlight.tsx
+import _JSXStyle from "styled-jsx/style";
+import { useMemo, useRef as useRef2 } from "react";
+
+// core/utils/use-previous.ts
+import { useEffect, useRef } from "react";
+var usePrevious = (state) => {
+  const ref = useRef(null);
+  useEffect(() => {
+    ref.current = state;
+  });
+  return ref ? ref.current : null;
+};
+var use_previous_default = usePrevious;
+
+// core/Shared/highlight.tsx
+import { jsx } from "react/jsx-runtime";
+var Highlight = ({
+  rect,
+  visible,
+  hoverHeightRatio = 1,
+  hoverWidthRatio = 1,
+  activeOpacity = 0.8,
+  className,
+  ...props
+}) => {
+  const theme = use_theme_default();
+  const ref = useRef2(null);
+  const isFirstVisible = use_previous_default(isUnplacedRect(rect));
+  const position = useMemo(() => {
+    const width = rect.width * hoverWidthRatio;
+    const height = rect.height * hoverHeightRatio;
+    return {
+      width: `${width}px`,
+      left: `${rect.left + (rect.width - width) / 2}px`,
+      height: `${height}px`,
+      top: `${rect.elementTop + (rect.height - height) / 2}px`,
+      transition: isFirstVisible ? "opacity" : "opacity, width, left, top"
+    };
+  }, [rect, hoverWidthRatio, hoverHeightRatio, isFirstVisible]);
+  return /* @__PURE__ */ jsx("div", { ref, ...props, className: _JSXStyle.dynamic([["603024321", [theme.palette.accents_2, position.width, position.left, position.height, position.top, visible ? activeOpacity : 0, position.transition]]]) + " " + (props && props.className != null && props.className || use_classes_default("highlight", className) || ""), children: /* @__PURE__ */ jsx(_JSXStyle, { id: "603024321", dynamic: [theme.palette.accents_2, position.width, position.left, position.height, position.top, visible ? activeOpacity : 0, position.transition], children: `.highlight.__jsx-style-dynamic-selector{background:${theme.palette.accents_2};position:absolute;border-radius:5px;width:${position.width};left:${position.left};height:${position.height};top:${position.top};opacity:${visible ? activeOpacity : 0};-webkit-transition:0.15s ease;transition:0.15s ease;-webkit-transition-property:${position.transition};transition-property:${position.transition};}` }) });
+};
+var highlight_default = Highlight;
+
+// core/Tabs/TabsItem.tsx
+import _JSXStyle2 from "styled-jsx/style";
+import { useEffect as useEffect2, useMemo as useMemo2, useRef as useRef3 } from "react";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+function TabsItemCellComponent({
+  value,
+  label,
+  disabled = false,
+  onClick,
+  onMouseOver,
+  activeClassName,
+  activeStyle,
+  hideBorder
+}) {
+  const theme = use_theme_default();
+  const {
+    SCALES
+  } = use_scale_default();
+  const ref = useRef3(null);
+  const {
+    currentValue
+  } = useTabsContext();
+  const active = currentValue === value;
+  const classes = use_classes_default("tab", {
+    active,
+    disabled,
+    [activeClassName]: active,
+    "hide-border": hideBorder
+  });
+  const clickHandler = () => {
+    if (disabled) return;
+    if (onClick) onClick(value);
+  };
+  const keyDownHandler = (event) => {
+    var _a, _b, _c;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      clickHandler();
+      return;
+    }
+    if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return;
+    const tabs = Array.from(((_a = event.currentTarget.parentElement) == null ? void 0 : _a.querySelectorAll('[role="tab"]:not([aria-disabled="true"])')) || []);
+    const current = tabs.indexOf(event.currentTarget);
+    const last = tabs.length - 1;
+    let next = current;
+    if (event.key === "Home") next = 0;
+    else if (event.key === "End") next = last;
+    else if (event.key === "ArrowRight") next = current === last ? 0 : current + 1;
+    else next = current === 0 ? last : current - 1;
+    event.preventDefault();
+    (_b = tabs[next]) == null ? void 0 : _b.focus();
+    (_c = tabs[next]) == null ? void 0 : _c.click();
+  };
+  return /* @__PURE__ */ jsxs("div", { ref, role: "tab", "aria-selected": active, "aria-disabled": disabled || void 0, tabIndex: active ? 0 : -1, onMouseOver, onClick: clickHandler, onKeyDown: keyDownHandler, style: active ? activeStyle : {}, "data-bolioui": "tab-item", className: _JSXStyle2.dynamic([["839106636", [theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.pt(0.875), SCALES.pr(0.55), SCALES.pb(0.875), SCALES.pl(0.55), SCALES.mt(0), SCALES.mr(0.2), SCALES.mb(0), SCALES.ml(0.2), SCALES.pl(0.28), SCALES.pr(0.28), theme.palette.foreground, theme.palette.foreground, theme.palette.foreground, theme.palette.accents_3, label, theme.palette.primary]]]) + " " + (classes || ""), children: [
+    label,
+    /* @__PURE__ */ jsx2(_JSXStyle2, { id: "839106636", dynamic: [theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.pt(0.875), SCALES.pr(0.55), SCALES.pb(0.875), SCALES.pl(0.55), SCALES.mt(0), SCALES.mr(0.2), SCALES.mb(0), SCALES.ml(0.2), SCALES.pl(0.28), SCALES.pr(0.28), theme.palette.foreground, theme.palette.foreground, theme.palette.foreground, theme.palette.accents_3, label, theme.palette.primary], children: `.tab.__jsx-style-dynamic-selector{position:relative;box-sizing:border-box;cursor:pointer;outline:0;white-space:nowrap;background-color:transparent;color:${theme.palette.accents_5};-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;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;font-size:${SCALES.font(0.875)};line-height:normal;width:${SCALES.width(1, "auto")};height:${SCALES.height(1, "auto")};padding:${SCALES.pt(0.875)} ${SCALES.pr(0.55)} ${SCALES.pb(0.875)} ${SCALES.pl(0.55)};margin:${SCALES.mt(0)} ${SCALES.mr(0.2)} ${SCALES.mb(0)} ${SCALES.ml(0.2)};z-index:1;--tabs-item-hover-left:calc(-1 * ${SCALES.pl(0.28)});--tabs-item-hover-right:calc(-1 * ${SCALES.pr(0.28)});}.tab.__jsx-style-dynamic-selector:hover{color:${theme.palette.foreground};}.tab.__jsx-style-dynamic-selector:after{position:absolute;content:'';bottom:-1px;left:0;right:0;width:100%;height:2px;border-radius:4px;-webkit-transform:scaleX(0.75);-ms-transform:scaleX(0.75);transform:scaleX(0.75);background-color:${theme.palette.foreground};-webkit-transition: opacity, -webkit-transform 200ms ease-in;-webkit-transition: opacity, transform 200ms ease-in;transition: opacity, transform 200ms ease-in;opacity:0;}.active.__jsx-style-dynamic-selector:after{opacity:1;-webkit-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}.tab.__jsx-style-dynamic-selector svg{max-height:1em;margin-right:5px;}.tab.__jsx-style-dynamic-selector:first-of-type{margin-left:0;}.active.__jsx-style-dynamic-selector{color:${theme.palette.foreground};}.disabled.__jsx-style-dynamic-selector{color:${theme.palette.accents_3};cursor:not-allowed;}.hide-border.__jsx-style-dynamic-selector:before{display:block;content:${label};font-weight:500;height:0;overflow:hidden;visibility:hidden;}.tab.__jsx-style-dynamic-selector:focus-visible{outline:2px solid ${theme.palette.primary};outline-offset:-2px;}.hide-border.__jsx-style-dynamic-selector:after{display:none;}.hide-border.active.__jsx-style-dynamic-selector{font-weight:500;}` })
+  ] });
+}
+TabsItemCellComponent.displayName = "BolioUITabsInternalCell";
+var TabsItemCell = with_scale_default(TabsItemCellComponent);
+function TabsItemComponent({
+  children,
+  value,
+  label,
+  disabled = false
+}) {
+  const {
+    getAllScaleProps
+  } = use_scale_default();
+  const {
+    register,
+    currentValue,
+    directValues
+  } = useTabsContext();
+  const isActive = useMemo2(() => currentValue === value, [currentValue, value]);
+  const isDirect = Boolean(directValues == null ? void 0 : directValues.includes(value));
+  useEffect2(() => {
+    if (isDirect || !register) return;
+    register({
+      value,
+      props: {
+        value,
+        label,
+        disabled,
+        ...getAllScaleProps()
+      }
+    });
+  }, [value, label, disabled, isDirect]);
+  return isActive ? /* @__PURE__ */ jsx2(Fragment, { children }) : null;
+}
+TabsItemComponent.displayName = "BolioUITabsItem";
+var TabsItem = with_scale_default(TabsItemComponent);
+var TabsItem_default = TabsItem;
+
+// core/Tabs/Tabs.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var getDirectItems = (children) => React4.Children.toArray(children).flatMap((child) => {
+  if (!React4.isValidElement(child)) return [];
+  if (child.type === React4.Fragment) return getDirectItems(child.props.children);
+  if (child.type !== TabsItem_default) return [];
+  const {
+    children: panel,
+    ...props
+  } = child.props;
+  return [{
+    value: props.value,
+    props
+  }];
+});
+var TabsComponent = React4.forwardRef(({
+  initialValue: userCustomInitialValue,
+  value,
+  hideDivider = false,
+  hideBorder = false,
+  children,
+  onChange,
+  className = "",
+  leftSpace = "12px",
+  highlight = true,
+  hoverHeightRatio = 0.7,
+  hoverWidthRatio = 1.15,
+  activeClassName = "",
+  activeStyles,
+  align = "left",
+  ...props
+}, ref) => {
+  const theme = use_theme_default();
+  const {
+    SCALES
+  } = use_scale_default();
+  const [tabs, setTabs] = useState([]);
+  const [selfValue, setSelfValue] = useState(userCustomInitialValue);
+  const headerRef = useRef4(null);
+  const [displayHighlight, setDisplayHighlight] = useState(false);
+  const {
+    rect,
+    setRect
+  } = useRect();
+  const register = (next) => {
+    setTabs((last) => {
+      const hasItem = last.find((item) => item.value === next.value);
+      if (!hasItem) return [...last, next];
+      return last.map((item) => {
+        if (item.value !== next.value) return item;
+        return {
+          ...item,
+          ...next
+        };
+      });
+    });
+  };
+  const directItems = getDirectItems(children);
+  const directValues = directItems.map((item) => item.value);
+  const directKey = directValues.join("\n");
+  const headers = [...directItems, ...tabs.filter((item) => !directValues.includes(item.value))];
+  const initialValue = useMemo3(
+    () => ({
+      register,
+      currentValue: selfValue,
+      inGroup: true,
+      leftSpace,
+      directValues
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [selfValue, leftSpace, directKey]
+  );
+  useEffect3(() => {
+    if (typeof value === "undefined") return;
+    setSelfValue(value);
+  }, [value]);
+  const clickHandler = (value2) => {
+    setSelfValue(value2);
+    if (onChange) onChange(value2);
+  };
+  const tabItemMouseOverHandler = (event) => {
+    if (!isBolioUIElement(event.target)) return;
+    setRect(event, () => headerRef.current);
+    if (highlight) {
+      setDisplayHighlight(true);
+    }
+  };
+  return /* @__PURE__ */ jsx3(TabsContext.Provider, { value: initialValue, children: /* @__PURE__ */ jsxs2("div", { ref, ...props, className: _JSXStyle3.dynamic([["1540493998", [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), align, theme.palette.border, leftSpace]]]) + " " + (props && props.className != null && props.className || use_classes_default("tabs", className) || ""), children: [
+    /* @__PURE__ */ jsxs2("header", { ref: headerRef, onMouseLeave: () => setDisplayHighlight(false), className: _JSXStyle3.dynamic([["1540493998", [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), align, theme.palette.border, leftSpace]]]), children: [
+      /* @__PURE__ */ jsx3(highlight_default, { rect, visible: displayHighlight, hoverHeightRatio, hoverWidthRatio }),
+      /* @__PURE__ */ jsx3("div", { role: "tablist", className: _JSXStyle3.dynamic([["1540493998", [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), align, theme.palette.border, leftSpace]]]) + " " + (use_classes_default("scroll-container", {
+        "hide-divider": hideDivider
+      }) || ""), children: headers.map(({
+        value: value2,
+        props: itemProps
+      }) => /* @__PURE__ */ jsx3(TabsItemCell, { ...itemProps, onClick: clickHandler, onMouseOver: tabItemMouseOverHandler, activeClassName, activeStyle: activeStyles, hideBorder }, value2)) })
+    ] }),
+    /* @__PURE__ */ jsx3("div", { role: "tabpanel", className: _JSXStyle3.dynamic([["1540493998", [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), align, theme.palette.border, leftSpace]]]) + " content", children }),
+    /* @__PURE__ */ jsx3(_JSXStyle3, { id: "1540493998", 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), align, theme.palette.border, leftSpace], children: `.tabs.__jsx-style-dynamic-selector{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)};}header.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-y:hidden;overflow-x:scroll;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;position:relative;}.scroll-container.__jsx-style-dynamic-selector{width:100%;height:100%;-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:${align};-webkit-justify-content:${align};-ms-flex-pack:${align};justify-content:${align};border-bottom:1px solid ${theme.palette.border};padding-left:${leftSpace};}header.__jsx-style-dynamic-selector::-webkit-scrollbar{display:none;}.hide-divider.__jsx-style-dynamic-selector{border-color:transparent;}.content.__jsx-style-dynamic-selector{padding-top:0.625rem;}` })
+  ] }) });
+});
+TabsComponent.displayName = "BolioUITabs";
+var Tabs = with_scale_default(TabsComponent);
+var Tabs_default = Tabs;
+
+// core/Tabs/index.ts
+Tabs_default.Item = TabsItem_default;
+Tabs_default.Tab = TabsItem_default;
+var Tabs_default2 = Tabs_default;
+
+export {
+  highlight_default,
+  Tabs_default2 as Tabs_default
+};

package/esm/{Input/styles.js → chunk-IWMGNPNV.js}

@@ -1,6 +1,7 @@
-export var getColors = function getColors(palette, status, disabled, readOnly) {
-  var colors = {
-    "default": {
+// core/Input/styles.ts
+var getColors = (palette, status, disabled, readOnly) => {
+  const colors = {
+    default: {
       color: palette.foreground,
       bgColor: palette.accents_1,
       borderColor: palette.accents_2,
@@ -50,20 +51,26 @@ export var getColors = function getColors(palette, status, disabled, readOnly) {
       hoverBorder: palette.info
     }
   };
-  if (disabled) return {
-    color: palette.accents_6,
-    bgColor: palette.accents_2,
-    borderColor: palette.accents_3,
-    hoverBgColor: palette.accents_2,
-    hoverBorder: palette.accents_3
-  };
-  if (readOnly) return {
-    color: palette.foreground,
-    bgColor: palette.accents_1,
-    borderColor: palette.accents_2,
-    hoverBgColor: palette.accents_1,
-    hoverBorder: palette.accents_4
-  };
-  if (!status) return colors["default"];
+  if (disabled)
+    return {
+      color: palette.accents_6,
+      bgColor: palette.accents_2,
+      borderColor: palette.accents_3,
+      hoverBgColor: palette.accents_2,
+      hoverBorder: palette.accents_3
+    };
+  if (readOnly)
+    return {
+      color: palette.foreground,
+      bgColor: palette.accents_1,
+      borderColor: palette.accents_2,
+      hoverBgColor: palette.accents_1,
+      hoverBorder: palette.accents_4
+    };
+  if (!status) return colors.default;
   return colors[status];
-};
+};
+
+export {
+  getColors
+};

package/esm/chunk-J4K4LRBI.js

@@ -0,0 +1,32 @@
+import {
+  use_current_state_default
+} from "./chunk-33BUV2RX.js";
+
+// core/use-input/use-input.tsx
+var useInput = (initialValue) => {
+  const [state, setState, currentRef] = use_current_state_default(initialValue);
+  return {
+    state,
+    setState,
+    currentRef,
+    reset: () => setState(initialValue),
+    bindings: {
+      value: state,
+      onChange: (event) => {
+        if (typeof event === "object" && event.target) {
+          setState(event.target.value);
+        } else {
+          setState(event);
+        }
+      }
+    }
+  };
+};
+var use_input_default = useInput;
+
+// core/use-input/index.ts
+var use_input_default2 = use_input_default;
+
+export {
+  use_input_default2 as use_input_default
+};

package/esm/chunk-J6KQRS7O.js

@@ -0,0 +1,226 @@
+import {
+  log_warning_default
+} from "./chunk-AXYDJGTN.js";
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-S62PPQHN.js";
+import {
+  pickChild
+} from "./chunk-UX2B3G6U.js";
+import {
+  use_theme_default
+} from "./chunk-45MVPPJN.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Radio/Radio.tsx
+import _JSXStyle2 from "styled-jsx/style";
+import React2, { useEffect, useMemo, useState } from "react";
+
+// core/Radio/RadioContext.ts
+import React from "react";
+var defaultContext = {
+  disabledAll: false,
+  inGroup: false
+};
+var RadioContext = React.createContext(defaultContext);
+var useRadioContext = () => React.useContext(RadioContext);
+
+// core/Radio/RadioDescription.tsx
+import _JSXStyle from "styled-jsx/style";
+import { jsx, jsxs } from "react/jsx-runtime";
+function RadioDescriptionComponent({
+  className = "",
+  children,
+  ...props
+}) {
+  const theme = use_theme_default();
+  const {
+    SCALES
+  } = use_scale_default();
+  return /* @__PURE__ */ jsxs("span", { ...props, className: _JSXStyle.dynamic([["2910110723", [theme.palette.accents_3, SCALES.font(0.85, "calc(var(--radio-size) * 0.85)"), SCALES.width(1, "auto"), 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, "calc(var(--radio-size) + var(--radio-size) * 0.375)")]]]) + " " + (props && props.className != null && props.className || className || ""), children: [
+    children,
+    /* @__PURE__ */ jsx(_JSXStyle, { id: "2910110723", dynamic: [theme.palette.accents_3, SCALES.font(0.85, "calc(var(--radio-size) * 0.85)"), SCALES.width(1, "auto"), 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, "calc(var(--radio-size) + var(--radio-size) * 0.375)")], children: `span.__jsx-style-dynamic-selector{color:${theme.palette.accents_3};font-size:${SCALES.font(0.85, "calc(var(--radio-size) * 0.85)")};width:${SCALES.width(1, "auto")};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, "calc(var(--radio-size) + var(--radio-size) * 0.375)")};}` })
+  ] });
+}
+RadioDescriptionComponent.displayName = "BolioUIRadioDescription";
+var RadioDescription = with_scale_default(RadioDescriptionComponent);
+var RadioDescription_default = RadioDescription;
+
+// core/Radio/styles.ts
+var getColors = (palette, status) => {
+  const colors = {
+    default: {
+      label: palette.foreground,
+      border: palette.border,
+      bg: palette.foreground
+    },
+    primary: {
+      label: palette.primary,
+      border: palette.primary,
+      bg: palette.primary
+    },
+    secondary: {
+      label: palette.secondary,
+      border: palette.secondary,
+      bg: palette.secondary
+    },
+    success: {
+      label: palette.success,
+      border: palette.success,
+      bg: palette.success
+    },
+    warning: {
+      label: palette.warning,
+      border: palette.warning,
+      bg: palette.warning
+    },
+    error: {
+      label: palette.error,
+      border: palette.error,
+      bg: palette.error
+    },
+    info: {
+      label: palette.info,
+      border: palette.info,
+      bg: palette.info
+    }
+  };
+  if (!status) return colors.default;
+  return colors[status];
+};
+
+// core/Radio/Radio.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var RadioComponent = React2.forwardRef(({
+  className = "",
+  checked,
+  onChange,
+  disabled = false,
+  type = "default",
+  value: radioValue,
+  children,
+  ...props
+}, ref) => {
+  const theme = use_theme_default();
+  const {
+    SCALES
+  } = use_scale_default();
+  const [selfChecked, setSelfChecked] = useState(!!checked);
+  const {
+    value: groupValue,
+    disabledAll,
+    inGroup,
+    updateState
+  } = useRadioContext();
+  const [withoutDescChildren, DescChildren] = pickChild(children, RadioDescription_default);
+  if (inGroup) {
+    if (checked !== void 0) {
+      log_warning_default('Remove props "checked" if in the Radio.Group.', "Radio");
+    }
+    if (radioValue === void 0) {
+      log_warning_default('Props "value" must be deinfed if in the Radio.Group.', "Radio");
+    }
+  }
+  useEffect(() => {
+    if (!inGroup) return;
+    setSelfChecked(groupValue === radioValue);
+  }, [inGroup, groupValue, radioValue]);
+  const {
+    label,
+    border,
+    bg
+  } = useMemo(() => getColors(theme.palette, type), [theme.palette, type]);
+  const isDisabled = useMemo(() => disabled || disabledAll, [disabled, disabledAll]);
+  const changeHandler = (event) => {
+    if (isDisabled) return;
+    const selfEvent = {
+      target: {
+        checked: !selfChecked
+      },
+      stopPropagation: event.stopPropagation,
+      preventDefault: event.preventDefault,
+      nativeEvent: event
+    };
+    setSelfChecked(!selfChecked);
+    if (inGroup) {
+      if (updateState) updateState(radioValue);
+    }
+    if (onChange) onChange(selfEvent);
+  };
+  useEffect(() => {
+    if (checked === void 0) return;
+    setSelfChecked(Boolean(checked));
+  }, [checked]);
+  return /* @__PURE__ */ jsxs2("div", { className: _JSXStyle2.dynamic([["691427886", [theme.palette.primary, 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), isDisabled ? theme.palette.accents_4 : label, isDisabled ? "not-allowed" : "pointer", border, isDisabled ? theme.palette.accents_4 : bg]]]) + " " + (use_classes_default("radio", className) || ""), children: [
+    /* @__PURE__ */ jsxs2("label", { className: _JSXStyle2.dynamic([["691427886", [theme.palette.primary, 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), isDisabled ? theme.palette.accents_4 : label, isDisabled ? "not-allowed" : "pointer", border, isDisabled ? theme.palette.accents_4 : bg]]]), children: [
+      /* @__PURE__ */ jsx2("input", { ref, type: "radio", value: radioValue, checked: selfChecked, onChange: changeHandler, ...props, className: _JSXStyle2.dynamic([["691427886", [theme.palette.primary, 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), isDisabled ? theme.palette.accents_4 : label, isDisabled ? "not-allowed" : "pointer", border, isDisabled ? theme.palette.accents_4 : bg]]]) + " " + (props && props.className != null && props.className || "") }),
+      /* @__PURE__ */ jsxs2("span", { className: _JSXStyle2.dynamic([["691427886", [theme.palette.primary, 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), isDisabled ? theme.palette.accents_4 : label, isDisabled ? "not-allowed" : "pointer", border, isDisabled ? theme.palette.accents_4 : bg]]]) + " name", children: [
+        /* @__PURE__ */ jsx2("span", { className: _JSXStyle2.dynamic([["691427886", [theme.palette.primary, 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), isDisabled ? theme.palette.accents_4 : label, isDisabled ? "not-allowed" : "pointer", border, isDisabled ? theme.palette.accents_4 : bg]]]) + " " + (use_classes_default("point", {
+          active: selfChecked
+        }) || "") }),
+        withoutDescChildren
+      ] }),
+      DescChildren && DescChildren
+    ] }),
+    /* @__PURE__ */ jsx2(_JSXStyle2, { id: "691427886", dynamic: [theme.palette.primary, 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), isDisabled ? theme.palette.accents_4 : label, isDisabled ? "not-allowed" : "pointer", border, isDisabled ? theme.palette.accents_4 : bg], children: `input.__jsx-style-dynamic-selector{opacity:0;overflow:hidden;width:1px;height:1px;margin:0;top:0;left:0;position:absolute;font-size:0;}input.__jsx-style-dynamic-selector:focus-visible+.name.__jsx-style-dynamic-selector{border-radius:4px;outline:2px solid ${theme.palette.primary};outline-offset:2px;}.radio.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;position:relative;--radio-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)};}label.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;color:${isDisabled ? theme.palette.accents_4 : label};cursor:${isDisabled ? "not-allowed" : "pointer"};}.name.__jsx-style-dynamic-selector{font-size:var(--radio-size);font-weight:bold;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.point.__jsx-style-dynamic-selector{height:var(--radio-size);width:var(--radio-size);border-radius:50%;border:1px solid ${border};-webkit-transition:all 0.2s ease 0s;transition:all 0.2s ease 0s;position:relative;display:inline-block;-webkit-transform:scale(0.875);-ms-transform:scale(0.875);transform:scale(0.875);margin-right:calc(var(--radio-size) * 0.375);}.point.__jsx-style-dynamic-selector:before{content:'';position:absolute;left:-1px;top:-1px;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);height:var(--radio-size);width:var(--radio-size);border-radius:50%;background-color:${isDisabled ? theme.palette.accents_4 : bg};}.active.__jsx-style-dynamic-selector:before{-webkit-transform:scale(0.875);-ms-transform:scale(0.875);transform:scale(0.875);-webkit-transition:all 0.2s ease 0s;transition:all 0.2s ease 0s;}` })
+  ] });
+});
+RadioComponent.displayName = "BolioUIRadio";
+var Radio = with_scale_default(RadioComponent);
+var Radio_default = Radio;
+
+// core/Radio/RadioGroup.tsx
+import _JSXStyle3 from "styled-jsx/style";
+import { useCallback, useEffect as useEffect2, useMemo as useMemo2, useState as useState2 } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function RadioGroupComponent({
+  disabled = false,
+  onChange,
+  value,
+  children,
+  className = "",
+  initialValue,
+  useRow = false,
+  ...props
+}) {
+  const {
+    SCALES
+  } = use_scale_default();
+  const [selfVal, setSelfVal] = useState2(initialValue);
+  const updateState = useCallback((nextValue) => {
+    setSelfVal(nextValue);
+    if (onChange) onChange(nextValue);
+  }, [onChange]);
+  const providerValue = useMemo2(() => {
+    return {
+      updateState,
+      disabledAll: disabled,
+      inGroup: true,
+      value: selfVal
+    };
+  }, [updateState, disabled, selfVal]);
+  useEffect2(() => {
+    if (value === void 0) return;
+    setSelfVal(value);
+  }, [value]);
+  return /* @__PURE__ */ jsxs3(RadioContext.Provider, { value: providerValue, children: [
+    /* @__PURE__ */ jsx3("div", { ...props, className: _JSXStyle3.dynamic([["2984632262", [useRow ? "col" : "column", SCALES.font(1), SCALES.width(1, "auto"), 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), useRow ? 0 : "var(--radio-group-gap)", useRow ? "var(--radio-group-gap)" : 0, SCALES.font(1)]]]) + " " + (props && props.className != null && props.className || use_classes_default("radio-group", className) || ""), children }),
+    /* @__PURE__ */ jsx3(_JSXStyle3, { id: "2984632262", dynamic: [useRow ? "col" : "column", SCALES.font(1), SCALES.width(1, "auto"), 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), useRow ? 0 : "var(--radio-group-gap)", useRow ? "var(--radio-group-gap)" : 0, SCALES.font(1)], children: `.radio-group.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:${useRow ? "col" : "column"};-ms-flex-direction:${useRow ? "col" : "column"};flex-direction:${useRow ? "col" : "column"};--radio-group-gap:${SCALES.font(1)};width:${SCALES.width(1, "auto")};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)};}.radio-group.__jsx-style-dynamic-selector .radio{margin-top:${useRow ? 0 : "var(--radio-group-gap)"};margin-left:${useRow ? "var(--radio-group-gap)" : 0};--radio-size:${SCALES.font(1)};}.radio-group.__jsx-style-dynamic-selector .radio:first-of-type{margin:0;}` })
+  ] });
+}
+RadioGroupComponent.displayName = "BolioUIRadioGroup";
+var RadioGroup = with_scale_default(RadioGroupComponent);
+var RadioGroup_default = RadioGroup;
+
+// core/Radio/index.ts
+Radio_default.Group = RadioGroup_default;
+Radio_default.Description = RadioDescription_default;
+Radio_default.Desc = RadioDescription_default;
+var Radio_default2 = Radio_default;
+
+export {
+  Radio_default2 as Radio_default
+};

package/esm/chunk-JJFOGZ6V.js

@@ -0,0 +1,22 @@
+import {
+  use_latest_default
+} from "./chunk-ZRORQ2WH.js";
+
+// core/utils/use-resize.ts
+import { useEffect } from "react";
+var useResize = (callback, immediatelyInvoke = true) => {
+  const latest = use_latest_default(callback);
+  useEffect(() => {
+    const fn = () => latest.current();
+    if (immediatelyInvoke) {
+      fn();
+    }
+    window.addEventListener("resize", fn);
+    return () => window.removeEventListener("resize", fn);
+  }, [immediatelyInvoke, latest]);
+};
+var use_resize_default = useResize;
+
+export {
+  use_resize_default
+};