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

package/esm/Text/index.js

@@ -1,3 +1,13 @@
 'use client';
-import Text from './Text';
-export default Text;
+import {
+  Text_default
+} from "../chunk-UEWD6OUC.js";
+import "../chunk-S62PPQHN.js";
+import "../chunk-UX2B3G6U.js";
+import "../chunk-45MVPPJN.js";
+import "../chunk-TFZ2IGNH.js";
+import "../chunk-QUMM6MGX.js";
+import "../chunk-VCTKX4AS.js";
+export {
+  Text_default as default
+};

package/esm/Textarea/Textarea.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { NormalTypes } from '../utils/prop-types';
-declare const resizeTypes: ["none", "both", "horizontal", "vertical", "initial", "inherit"];
-export type TextareaResizes = typeof resizeTypes[number];
+import type { AnyElement } from '../utils/types';
+export type TextareaResizes = 'none' | 'both' | 'horizontal' | 'vertical' | 'initial' | 'inherit';
 export type TextareaTypes = NormalTypes;
 interface Props {
     value?: string;
@@ -16,9 +16,9 @@ interface Props {
     className?: string;
     resize?: TextareaResizes;
 }
-type NativeAttrs = Omit<React.TextareaHTMLAttributes<any>, keyof Props>;
+type NativeAttrs = Omit<React.TextareaHTMLAttributes<AnyElement>, keyof Props>;
 export type TextareaProps = Props & NativeAttrs;
 declare const Textarea: import("../use-scale/with-scale").ScaleComponent<HTMLTextAreaElement, Props & NativeAttrs & {
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLTextAreaElement>>;
 export default Textarea;

package/esm/Textarea/index.js

@@ -1,3 +1,15 @@
 'use client';
-import Textarea from './Textarea';
-export default Textarea;
+import {
+  Textarea_default
+} from "../chunk-33WYJZ4F.js";
+import "../chunk-IWMGNPNV.js";
+import "../chunk-S62PPQHN.js";
+import "../chunk-UX2B3G6U.js";
+import "../chunk-45MVPPJN.js";
+import "../chunk-TFZ2IGNH.js";
+import "../chunk-QUMM6MGX.js";
+import "../chunk-VCTKX4AS.js";
+import "../chunk-5KUROAEP.js";
+export {
+  Textarea_default as default
+};

package/esm/Themes/index.js

@@ -1,3 +1,8 @@
 'use client';
-import Themes from './Themes';
-export default Themes;
+import {
+  Themes_default
+} from "../chunk-QUMM6MGX.js";
+import "../chunk-VCTKX4AS.js";
+export {
+  Themes_default as default
+};

package/esm/Toggle/Toggle.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { NormalTypes } from '../utils/prop-types';
+import type { AnyElement } from '../utils/types';
 export type ToggleTypes = NormalTypes;
 export interface ToggleEventTarget {
     checked: boolean;
@@ -18,13 +19,13 @@ interface Props {
     type?: ToggleTypes;
     className?: string;
 }
-type NativeAttrs = Omit<React.LabelHTMLAttributes<any>, keyof Props>;
+type NativeAttrs = Omit<React.LabelHTMLAttributes<AnyElement>, keyof Props>;
 export type ToggleProps = Props & NativeAttrs;
 export type ToggleSize = {
     width: string;
     height: string;
 };
 declare const Toggle: import("../use-scale/with-scale").ScaleComponent<HTMLInputElement, Props & NativeAttrs & {
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLInputElement>>;
 export default Toggle;

package/esm/Toggle/index.js

@@ -1,3 +1,14 @@
 'use client';
-import Toggle from './Toggle';
-export default Toggle;
+import {
+  Toggle_default
+} from "../chunk-YHEIC6EK.js";
+import "../chunk-S62PPQHN.js";
+import "../chunk-UX2B3G6U.js";
+import "../chunk-45MVPPJN.js";
+import "../chunk-TFZ2IGNH.js";
+import "../chunk-QUMM6MGX.js";
+import "../chunk-VCTKX4AS.js";
+import "../chunk-5KUROAEP.js";
+export {
+  Toggle_default as default
+};

package/esm/Tooltip/Tooltip.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { TriggerTypes, Placement, SnippetTypes } from '../utils/prop-types';
+import type { AnyElement } from '../utils/types';
 export type TooltipOnVisibleChange = (visible: boolean) => void;
 export type TooltipTypes = SnippetTypes;
 export type TooltipTriggers = TriggerTypes;
@@ -7,6 +8,9 @@ export type TooltipPlacement = Placement;
 interface Props {
     text?: string | React.ReactNode;
     type?: TooltipTypes;
+    light?: boolean;
+    ghost?: boolean;
+    subtle?: boolean;
     placement?: TooltipPlacement;
     visible?: boolean;
     initialVisible?: boolean;
@@ -19,9 +23,9 @@ interface Props {
     portalClassName?: string;
     onVisibleChange?: TooltipOnVisibleChange;
 }
-type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+type NativeAttrs = Omit<React.HTMLAttributes<AnyElement>, keyof Props>;
 export type TooltipProps = Props & NativeAttrs;
 declare const Tooltip: import("../use-scale/with-scale").ScaleComponent<HTMLDivElement, Props & NativeAttrs & {
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export default Tooltip;

package/esm/Tooltip/TooltipContent.d.ts

@@ -11,6 +11,9 @@ interface Props {
     iconOffset: TooltipIconOffset;
     id?: string;
     role?: string;
+    light?: boolean;
+    ghost?: boolean;
+    subtle?: boolean;
 }
 export type TooltipIconOffset = {
     x: string;

package/esm/Tooltip/helper.d.ts

@@ -7,4 +7,4 @@ export interface ReactiveDomReact {
     width: number;
     height: number;
 }
-export declare const getRect: (ref: MutableRefObject<HTMLElement | null>) => ReactiveDomReact;
+export declare const getRect: (ref?: MutableRefObject<HTMLElement | null>) => ReactiveDomReact;

package/esm/Tooltip/index.js

@@ -1,3 +1,22 @@
 'use client';
-import Tooltip from './Tooltip';
-export default Tooltip;
+import {
+  Tooltip_default
+} from "../chunk-CPIFYIT3.js";
+import "../chunk-V57PNXMD.js";
+import "../chunk-JJFOGZ6V.js";
+import "../chunk-LDTDMDE6.js";
+import "../chunk-BXDUHMWS.js";
+import "../chunk-ZRORQ2WH.js";
+import "../chunk-GJZT47MP.js";
+import "../chunk-DGXZP4VJ.js";
+import "../chunk-3WPRUUZ6.js";
+import "../chunk-S62PPQHN.js";
+import "../chunk-UX2B3G6U.js";
+import "../chunk-45MVPPJN.js";
+import "../chunk-TFZ2IGNH.js";
+import "../chunk-QUMM6MGX.js";
+import "../chunk-VCTKX4AS.js";
+import "../chunk-5KUROAEP.js";
+export {
+  Tooltip_default as default
+};

package/esm/Tooltip/styles.d.ts

@@ -3,5 +3,11 @@ import { BolioUIThemesPalette } from '../Themes/Presets';
 export type TooltipColors = {
     bgColor: string;
     color: string;
+    borderColor: string;
 };
-export declare const getColors: (type: SnippetTypes, palette: BolioUIThemesPalette) => TooltipColors;
+export interface TooltipVariantProps {
+    light?: boolean;
+    ghost?: boolean;
+    subtle?: boolean;
+}
+export declare const getColors: (type: SnippetTypes, palette: BolioUIThemesPalette, { light, ghost, subtle }?: TooltipVariantProps) => TooltipColors;

package/esm/chunk-33BUV2RX.js

@@ -0,0 +1,10 @@
+import {
+  use_current_state_default
+} from "./chunk-GGD4BGH2.js";
+
+// core/utils/use-current-state.ts
+var use_current_state_default2 = use_current_state_default;
+
+export {
+  use_current_state_default2 as use_current_state_default
+};

package/esm/chunk-33WYJZ4F.js

@@ -0,0 +1,88 @@
+import {
+  getColors
+} from "./chunk-IWMGNPNV.js";
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-S62PPQHN.js";
+import {
+  use_theme_default
+} from "./chunk-45MVPPJN.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Textarea/Textarea.tsx
+import _JSXStyle from "styled-jsx/style";
+import React, { useRef, useImperativeHandle, useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TextareaComponent = React.forwardRef(({
+  type = "default",
+  disabled = false,
+  readOnly = false,
+  onFocus,
+  onBlur,
+  className = "",
+  initialValue = "",
+  onChange,
+  value,
+  placeholder,
+  resize = "none",
+  ...props
+}, ref) => {
+  const theme = use_theme_default();
+  const {
+    SCALES
+  } = use_scale_default();
+  const textareaRef = useRef(null);
+  useImperativeHandle(ref, () => textareaRef.current);
+  const isControlledComponent = useMemo(() => value !== void 0, [value]);
+  const [selfValue, setSelfValue] = useState(initialValue);
+  const [hover, setHover] = useState(false);
+  const colors = useMemo(() => getColors(theme.palette, type), [theme.palette, type]);
+  const classes = use_classes_default("wrapper", {
+    hover,
+    disabled
+  }, className);
+  const changeHandler = (event) => {
+    if (disabled || readOnly) return;
+    setSelfValue(event.target.value);
+    if (onChange) onChange(event);
+  };
+  const focusHandler = (e) => {
+    setHover(true);
+    if (onFocus) onFocus(e);
+  };
+  const blurHandler = (e) => {
+    setHover(false);
+    if (onBlur) onBlur(e);
+  };
+  useEffect(() => {
+    if (isControlledComponent) {
+      setSelfValue(value);
+    }
+  }, [isControlledComponent, value]);
+  const controlledValue = isControlledComponent ? {
+    value: selfValue
+  } : {
+    defaultValue: initialValue
+  };
+  const textareaProps = {
+    ...props,
+    ...controlledValue
+  };
+  return /* @__PURE__ */ jsxs("div", { className: _JSXStyle.dynamic([["631818153", [theme.layout.radius, colors.borderColor, colors.color, SCALES.font(0.875), SCALES.height(1, "auto"), SCALES.width(1, "initial"), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), colors.hoverBorder, colors.hoverBgColor, theme.palette.accents_2, theme.palette.accents_3, colors.bgColor, theme.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme.layout.radius, colors.hoverBorder, colors.hoverBgColor, theme.palette.background]]]) + " " + (classes || ""), children: [
+    /* @__PURE__ */ jsx("textarea", { ref: textareaRef, disabled, placeholder, readOnly, onFocus: focusHandler, onBlur: blurHandler, onChange: changeHandler, ...textareaProps, className: _JSXStyle.dynamic([["631818153", [theme.layout.radius, colors.borderColor, colors.color, SCALES.font(0.875), SCALES.height(1, "auto"), SCALES.width(1, "initial"), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), colors.hoverBorder, colors.hoverBgColor, theme.palette.accents_2, theme.palette.accents_3, colors.bgColor, theme.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme.layout.radius, colors.hoverBorder, colors.hoverBgColor, theme.palette.background]]]) + " " + (textareaProps && textareaProps.className != null && textareaProps.className || "") }),
+    /* @__PURE__ */ jsx(_JSXStyle, { id: "631818153", dynamic: [theme.layout.radius, colors.borderColor, colors.color, SCALES.font(0.875), SCALES.height(1, "auto"), SCALES.width(1, "initial"), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), colors.hoverBorder, colors.hoverBgColor, theme.palette.accents_2, theme.palette.accents_3, colors.bgColor, theme.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme.layout.radius, colors.hoverBorder, colors.hoverBgColor, theme.palette.background], children: `.wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:${theme.layout.radius};border:1px solid ${colors.borderColor};color:${colors.color};-webkit-transition: border 0.2s ease 0s, color 0.2s ease 0s;transition: border 0.2s ease 0s, color 0.2s ease 0s;min-width:12.5rem;max-width:95vw;--textarea-font-size:${SCALES.font(0.875)};--textarea-height:${SCALES.height(1, "auto")};width:${SCALES.width(1, "initial")};height:var(--textarea-height);margin:${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};}.wrapper.hover.__jsx-style-dynamic-selector{border-color:${colors.hoverBorder};background-color:${colors.hoverBgColor};}.wrapper.disabled.__jsx-style-dynamic-selector{background-color:${theme.palette.accents_2};border-color:${theme.palette.accents_3};cursor:not-allowed;}textarea.__jsx-style-dynamic-selector{background-color:${colors.bgColor};box-shadow:none;display:block;font-family:${theme.font.sans};font-size:var(--textarea-font-size);width:100%;border:none;outline:none;padding:${SCALES.pt(0.5)} ${SCALES.pr(0.5)} ${SCALES.pb(0.5)} ${SCALES.pl(0.5)};resize:${resize};border-radius:${theme.layout.radius};}.disabled.__jsx-style-dynamic-selector>textarea.__jsx-style-dynamic-selector{cursor:not-allowed;}textarea.active.__jsx-style-dynamic-selector,textarea.__jsx-style-dynamic-selector:hover{border-color:${colors.hoverBorder};background:${colors.hoverBgColor};}textarea.__jsx-style-dynamic-selector:-webkit-autofill,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ${theme.palette.background} inset !important;}` })
+  ] });
+});
+TextareaComponent.displayName = "BolioUITextarea";
+var Textarea = with_scale_default(TextareaComponent);
+var Textarea_default = Textarea;
+
+// core/Textarea/index.ts
+var Textarea_default2 = Textarea_default;
+
+export {
+  Textarea_default2 as Textarea_default
+};

package/esm/chunk-3BVFLDHI.js

@@ -0,0 +1,295 @@
+import {
+  use_latest_default
+} from "./chunk-ZRORQ2WH.js";
+import {
+  use_current_state_default
+} from "./chunk-33BUV2RX.js";
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-S62PPQHN.js";
+import {
+  use_theme_default
+} from "./chunk-45MVPPJN.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Slider/Slider.tsx
+import _JSXStyle3 from "styled-jsx/style";
+import React3, { useCallback, useEffect as useEffect2, useImperativeHandle, useMemo as useMemo2, useRef as useRef2, useState } from "react";
+
+// core/utils/use-drag.ts
+import { useEffect, useRef } from "react";
+var useDrag = (elementRef, draggingHandler = () => {
+}, dragStartHandler = () => {
+}, dragEndHandler = () => {
+}) => {
+  const onDragging = useRef(false);
+  const [, setStartX, startXRef] = use_current_state_default(0);
+  const [, setCurrentX, currentXRef] = use_current_state_default(0);
+  const draggingRef = use_latest_default(draggingHandler);
+  const dragStartRef = use_latest_default(dragStartHandler);
+  const dragEndRef = use_latest_default(dragEndHandler);
+  useEffect(() => {
+    const element = elementRef && elementRef.current;
+    if (!element) return;
+    const getCustomEvent = () => ({
+      startX: startXRef.current,
+      currentX: currentXRef.current
+    });
+    const elementMouseDownHandler = (event) => {
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+      onDragging.current = true;
+      setStartX(element.getBoundingClientRect().x);
+      dragStartRef.current(getCustomEvent());
+    };
+    const globalDraggingHandler = (event) => {
+      if (!onDragging.current) return;
+      if (event.type === "touchmove") {
+        setCurrentX(event.changedTouches[0].clientX);
+      } else {
+        setCurrentX(event.clientX);
+      }
+      draggingRef.current(getCustomEvent());
+    };
+    const globalDragEndHandler = () => {
+      if (!onDragging.current) return;
+      onDragging.current = false;
+      dragEndRef.current(getCustomEvent());
+    };
+    element.addEventListener("mousedown", elementMouseDownHandler);
+    element.addEventListener("touchstart", elementMouseDownHandler);
+    window.addEventListener("mousemove", globalDraggingHandler);
+    window.addEventListener("touchmove", globalDraggingHandler);
+    window.addEventListener("mouseup", globalDragEndHandler);
+    window.addEventListener("touchend", globalDragEndHandler);
+    return () => {
+      window.removeEventListener("mousemove", globalDraggingHandler);
+      window.removeEventListener("touchmove", globalDraggingHandler);
+      window.removeEventListener("mouseup", globalDragEndHandler);
+      window.removeEventListener("touchend", globalDragEndHandler);
+      element.removeEventListener("mousedown", elementMouseDownHandler);
+      element.removeEventListener("touchstart", elementMouseDownHandler);
+    };
+  }, [
+    elementRef,
+    startXRef,
+    currentXRef,
+    setStartX,
+    setCurrentX,
+    draggingRef,
+    dragStartRef,
+    dragEndRef
+  ]);
+};
+var use_drag_default = useDrag;
+
+// core/Slider/SliderDot.tsx
+import _JSXStyle from "styled-jsx/style";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SliderDot = React.forwardRef(({
+  children,
+  disabled = false,
+  left = 0,
+  isClick = false,
+  ...props
+}, ref) => {
+  const theme = use_theme_default();
+  const classes = use_classes_default("dot", {
+    disabled,
+    click: isClick
+  });
+  return /* @__PURE__ */ jsxs("div", { ref, ...props, className: _JSXStyle.dynamic([["391068299", [left, theme.palette.primary, theme.palette.background, theme.palette.foreground, theme.palette.accents_2, theme.palette.accents_4]]]) + " " + (props && props.className != null && props.className || classes || ""), children: [
+    children,
+    /* @__PURE__ */ jsx(_JSXStyle, { id: "391068299", dynamic: [left, theme.palette.primary, theme.palette.background, theme.palette.foreground, theme.palette.accents_2, theme.palette.accents_4], children: `.dot.__jsx-style-dynamic-selector{position:absolute;left:${left}%;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);height:calc(var(--slider-font-size) * 1.25);min-width:calc(var(--slider-font-size) * 1.25);line-height:calc(var(--slider-font-size) * 1.25);border-radius:calc(var(--slider-font-size) * 0.625);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-weight:700;font-size:calc(var(--slider-font-size) * 0.75);z-index:100;background-color:${theme.palette.primary};color:${theme.palette.background};text-align:center;padding:0 calc(0.57 * var(--slider-font-size));}.dot.__jsx-style-dynamic-selector:focus-visible{outline:2px solid ${theme.palette.foreground};outline-offset:2px;}.dot.disabled.__jsx-style-dynamic-selector{cursor:not-allowed !important;background-color:${theme.palette.accents_2};color:${theme.palette.accents_4};}.dot.click.__jsx-style-dynamic-selector{-webkit-transition:all 200ms ease;transition:all 200ms ease;}.dot.__jsx-style-dynamic-selector:hover{cursor:-webkit-grab;cursor:-moz-grab;cursor:grab;}.dot.__jsx-style-dynamic-selector:active{cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing;}` })
+  ] });
+});
+SliderDot.displayName = "BolioUISliderDot";
+var SliderDot_default = SliderDot;
+
+// core/Slider/SliderMark.tsx
+import _JSXStyle2 from "styled-jsx/style";
+import { useMemo } from "react";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var getMarks = (min, max, step) => {
+  const value = max - min;
+  const roundFunc = !(value % step) ? Math.floor : Math.ceil;
+  const count = roundFunc(value / step) - 1;
+  if (count >= 99) return [];
+  return [...new Array(count)].map((_, index) => step * (index + 1) * 100 / value);
+};
+function SliderMark({
+  step,
+  max,
+  min
+}) {
+  const theme = use_theme_default();
+  const marks = useMemo(() => getMarks(min, max, step), [min, max, step]);
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    marks.map((val, index) => /* @__PURE__ */ jsx2("span", { style: {
+      left: `${val}%`
+    }, className: _JSXStyle2.dynamic([["324900419", [theme.palette.background]]]) }, `${val}-${index}`)),
+    /* @__PURE__ */ jsx2(_JSXStyle2, { id: "324900419", dynamic: [theme.palette.background], children: `span.__jsx-style-dynamic-selector{position:absolute;width:2px;height:100%;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:${theme.palette.background};}` })
+  ] });
+}
+var SliderMark_default = SliderMark;
+
+// core/Slider/styles.ts
+var getColors = (palette, status) => {
+  const colors = {
+    default: {
+      bg: palette.accents_8
+    },
+    primary: {
+      bg: palette.primary
+    },
+    secondary: {
+      bg: palette.secondary
+    },
+    success: {
+      bg: palette.success
+    },
+    warning: {
+      bg: palette.warning
+    },
+    error: {
+      bg: palette.error
+    },
+    info: {
+      bg: palette.info
+    }
+  };
+  if (!status) return colors.default;
+  return colors[status];
+};
+
+// core/Slider/Slider.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var getRefWidth = (elementRef) => {
+  if (!elementRef || !elementRef.current) return 0;
+  const rect = elementRef.current.getBoundingClientRect();
+  return rect.width || rect.right - rect.left;
+};
+var getValue = (max, min, step, offsetX, railWidth) => {
+  if (offsetX < 0) return min;
+  if (offsetX > railWidth) return max;
+  const widthForEachStep = railWidth / (max - min) * step;
+  if (widthForEachStep <= 0) return min;
+  const slideDistance = Math.round(offsetX / widthForEachStep) * step + min;
+  return Number.isInteger(slideDistance) ? slideDistance : Number.parseFloat(slideDistance.toFixed(1));
+};
+var SliderComponent = React3.forwardRef(({
+  hideValue = false,
+  disabled = false,
+  type = "default",
+  step = 1,
+  max = 100,
+  min = 0,
+  initialValue = 0,
+  value: customValue,
+  onChange,
+  className = "",
+  showMarkers = false,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  ...props
+}, ref) => {
+  const theme = use_theme_default();
+  const {
+    SCALES
+  } = use_scale_default();
+  const [value, setValue] = useState(initialValue);
+  const [, setSliderWidth, sideWidthRef] = use_current_state_default(0);
+  const [, setLastDargOffset, lastDargOffsetRef] = use_current_state_default(0);
+  const [isClick, setIsClick] = useState(false);
+  const sliderRef = useRef2(null);
+  useImperativeHandle(ref, () => sliderRef.current);
+  const dotRef = useRef2(null);
+  const currentRatio = useMemo2(() => (value - min) / (max - min) * 100, [value, max, min]);
+  const setLastOffsetManually = (val) => {
+    const width = getRefWidth(sliderRef);
+    const shouldOffset = (val - min) / (max - min) * width;
+    setLastDargOffset(shouldOffset);
+  };
+  const updateValue = useCallback((offset) => {
+    const currentValue = getValue(max, min, step, offset, sideWidthRef.current);
+    setValue(currentValue);
+    if (onChange) onChange(currentValue);
+  }, [max, min, step, sideWidthRef, onChange]);
+  const {
+    bg
+  } = useMemo2(() => getColors(theme.palette, type), [theme.palette, type]);
+  const dragHandler = (event) => {
+    if (disabled) return;
+    const currentOffset = event.currentX - event.startX;
+    const offset = currentOffset + lastDargOffsetRef.current;
+    updateValue(offset);
+  };
+  const dragStartHandler = () => {
+    setIsClick(false);
+    setSliderWidth(getRefWidth(sliderRef));
+  };
+  const dragEndHandler = (event) => {
+    if (disabled) return;
+    const offset = event.currentX - event.startX;
+    const currentOffset = offset + lastDargOffsetRef.current;
+    const boundOffset = currentOffset < 0 ? 0 : Math.min(currentOffset, sideWidthRef.current);
+    setLastDargOffset(boundOffset);
+  };
+  const keyDownHandler = (event) => {
+    if (disabled) return;
+    const nextByKey = {
+      ArrowRight: value + step,
+      ArrowUp: value + step,
+      ArrowLeft: value - step,
+      ArrowDown: value - step,
+      PageUp: value + step * 10,
+      PageDown: value - step * 10,
+      Home: min,
+      End: max
+    };
+    if (!(event.key in nextByKey)) return;
+    event.preventDefault();
+    const next = Math.min(max, Math.max(min, nextByKey[event.key]));
+    if (next === value) return;
+    setValue(next);
+    setLastOffsetManually(next);
+    if (onChange) onChange(next);
+  };
+  const clickHandler = (event) => {
+    if (disabled) return;
+    if (!sliderRef || !sliderRef.current) return;
+    setIsClick(true);
+    setSliderWidth(getRefWidth(sliderRef));
+    const clickOffset = event.clientX - sliderRef.current.getBoundingClientRect().x;
+    setLastDargOffset(clickOffset);
+    updateValue(clickOffset);
+  };
+  use_drag_default(dotRef, dragHandler, dragStartHandler, dragEndHandler);
+  useEffect2(() => {
+    if (customValue === void 0) return;
+    if (customValue === value) return;
+    setValue(customValue);
+  }, [customValue, value]);
+  useEffect2(() => {
+    if (initialValue) setLastOffsetManually(initialValue);
+  }, []);
+  return /* @__PURE__ */ jsxs3("div", { onClick: clickHandler, ref: sliderRef, ...props, className: _JSXStyle3.dynamic([["1412427536", [disabled ? theme.palette.accents_2 : bg, disabled ? "not-allow" : "pointer", SCALES.font(1), SCALES.width(1, "100%"), SCALES.height(0.5), 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 || use_classes_default("slider", className) || ""), children: [
+    /* @__PURE__ */ jsx3(SliderDot_default, { disabled, ref: dotRef, isClick, left: currentRatio, role: "slider", tabIndex: disabled ? -1 : 0, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-disabled": disabled || void 0, onKeyDown: keyDownHandler, children: hideValue || value }),
+    showMarkers && /* @__PURE__ */ jsx3(SliderMark_default, { max, min, step }),
+    /* @__PURE__ */ jsx3(_JSXStyle3, { id: "1412427536", dynamic: [disabled ? theme.palette.accents_2 : bg, disabled ? "not-allow" : "pointer", SCALES.font(1), SCALES.width(1, "100%"), SCALES.height(0.5), 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: `.slider.__jsx-style-dynamic-selector{border-radius:50px;background-color:${disabled ? theme.palette.accents_2 : bg};position:relative;cursor:${disabled ? "not-allow" : "pointer"};--slider-font-size:${SCALES.font(1)};width:${SCALES.width(1, "100%")};height:${SCALES.height(0.5)};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)};}` })
+  ] });
+});
+SliderComponent.displayName = "BolioUISlider";
+var Slider = with_scale_default(SliderComponent);
+var Slider_default = Slider;
+
+// core/Slider/index.ts
+var Slider_default2 = Slider_default;
+
+export {
+  Slider_default2 as Slider_default
+};

package/esm/chunk-3WPRUUZ6.js

@@ -0,0 +1,25 @@
+// core/use-click-away/use-click-away.ts
+import { useEffect, useRef } from "react";
+var useClickAway = (ref, handler) => {
+  const handlerRef = useRef(handler);
+  useEffect(() => {
+    handlerRef.current = handler;
+  }, [handler]);
+  useEffect(() => {
+    const callback = (event) => {
+      const el = ref.current;
+      if (!event || !el || el.contains(event.target)) return;
+      handlerRef.current(event);
+    };
+    document.addEventListener("click", callback);
+    return () => document.removeEventListener("click", callback);
+  }, [ref]);
+};
+var use_click_away_default = useClickAway;
+
+// core/use-click-away/index.ts
+var use_click_away_default2 = use_click_away_default;
+
+export {
+  use_click_away_default2 as use_click_away_default
+};