@qoretechnologies/reqore 0.68.0 → 0.68.1

package/dist/esm/components/SegmentedControl/index.js

@@ -0,0 +1,291 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, memo, useCallback, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { useMeasure, useUpdateEffect } from 'react-use';
+import styled, { css } from 'styled-components';
+import { CONTROL_HORIZONTAL_PADDING_FROM_SIZE, CONTROL_TEXT_FROM_SIZE, ICON_FROM_SIZE, PADDING_FROM_SIZE, PILL_RADIUS_MODIFIER, RADIUS_FROM_SIZE, } from '../../constants/sizes';
+import { changeLightness, getReadableColorFrom } from '../../helpers/colors';
+import { calculateStringSizeInPixels } from '../../helpers/utils';
+import { useReqoreProperty } from '../../hooks/useReqoreContext';
+import { useReqoreTheme } from '../../hooks/useTheme';
+import ReqoreButton from '../Button';
+import ReqoreMenu from '../Menu';
+import ReqoreMenuItem from '../Menu/item';
+import { ReqorePopover } from '../Popover';
+const CONTAINER_PADDING = 3;
+const StyledSegmentedControl = styled.div `
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  box-sizing: border-box;
+  padding: ${CONTAINER_PADDING}px;
+  background-color: ${({ theme }) => changeLightness(theme.main, 0.03)};
+  border: ${({ theme, flat }) => !flat ? `1px solid ${changeLightness(theme.main, 0.07)}` : 'none'};
+  border-radius: ${({ size, pill }) => `${RADIUS_FROM_SIZE[size] * (pill ? PILL_RADIUS_MODIFIER : 1) + 1}px`};
+  width: ${({ fluid }) => (fluid ? '100%' : undefined)};
+  overflow: hidden;
+  gap: 0;
+
+  ${({ disabled }) => disabled &&
+    css `
+      opacity: 0.5;
+      pointer-events: none;
+    `}
+`;
+const StyledSegmentedControlIndicator = styled.div `
+  position: absolute;
+  top: ${CONTAINER_PADDING}px;
+  bottom: ${CONTAINER_PADDING}px;
+  left: 0;
+  background-color: ${({ theme }) => theme.main};
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
+  border-radius: ${({ size, pill }) => `${RADIUS_FROM_SIZE[size] * (pill ? PILL_RADIUS_MODIFIER : 1)}px`};
+  z-index: 0;
+  pointer-events: none;
+
+  ${({ animate }) => animate
+    ? css `
+          transition: transform 0.2s ease-out, width 0.2s ease-out;
+        `
+    : undefined}
+`;
+const StyledItemWrapper = styled.div `
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex: ${({ fluid }) => (fluid ? '1 1 0' : '0 0 auto')};
+
+  &::after {
+    content: '';
+    position: absolute;
+    right: 0;
+    top: 20%;
+    height: 60%;
+    width: 1px;
+    background-color: ${({ theme }) => changeLightness(theme.main, 0.1)};
+    transition: opacity 0.15s ease-out;
+    opacity: ${({ isSelected, isBeforeSelected, isLast }) => isSelected || isBeforeSelected || isLast ? 0 : 1};
+  }
+`;
+/**
+ * Estimate the pixel width of a segment item based on its content.
+ * Same approach as Tabs: calculates width from label text size, icons, badges, and padding.
+ */
+const estimateItemWidth = (item, itemSize = 'normal') => {
+    const hPad = CONTROL_HORIZONTAL_PADDING_FROM_SIZE[itemSize];
+    let width = hPad * 2;
+    if (item.label) {
+        width += calculateStringSizeInPixels(item.label.toString(), CONTROL_TEXT_FROM_SIZE[itemSize]);
+    }
+    if (item.icon) {
+        width += ICON_FROM_SIZE[itemSize] + PADDING_FROM_SIZE[itemSize] / 2;
+    }
+    if (item.rightIcon) {
+        width += ICON_FROM_SIZE[itemSize] + PADDING_FROM_SIZE[itemSize] / 2;
+    }
+    return width;
+};
+/**
+ * Calculate the total estimated width of all items including gaps.
+ * Mirrors the Tabs `getTabsLength` approach.
+ */
+const getItemsLength = (items, itemSize = 'normal', selectedValue) => items.reduce((len, item) => {
+    if (Array.isArray(item)) {
+        // "More" group — estimate the More button width
+        const isSelectedHidden = item.some((i) => i.value === selectedValue);
+        const moreLabel = isSelectedHidden
+            ? item.find((i) => i.value === selectedValue)?.label ?? 'More'
+            : 'More';
+        const hPad = CONTROL_HORIZONTAL_PADDING_FROM_SIZE[itemSize];
+        const iconWidth = ICON_FROM_SIZE[itemSize] + PADDING_FROM_SIZE[itemSize] / 2;
+        const labelWidth = calculateStringSizeInPixels(moreLabel.toString(), CONTROL_TEXT_FROM_SIZE[itemSize]);
+        return len + hPad * 2 + iconWidth + labelWidth;
+    }
+    return len + estimateItemWidth(item, itemSize);
+}, 0);
+/**
+ * Progressively move items from the end into a "More" group array until
+ * the total estimated width fits within the available space.
+ * Same algorithm as Tabs `getTransformedItems`.
+ */
+const getTransformedItems = (items, availableWidth, itemSize = 'normal', selectedValue) => {
+    if (!availableWidth) {
+        return items;
+    }
+    let newItems = [...items];
+    while (getItemsLength(newItems, itemSize, selectedValue) > availableWidth &&
+        newItems.length > 1) {
+        const last = newItems[newItems.length - 1];
+        if (Array.isArray(last)) {
+            // Already have a More group — prepend the second-to-last item into it
+            last.unshift(newItems[newItems.length - 2]);
+            newItems[newItems.length - 2] = undefined;
+        }
+        else {
+            // Convert last item into a More group
+            newItems[newItems.length - 1] = [last];
+        }
+        newItems = newItems.filter((i) => i);
+    }
+    return newItems.filter((i) => i);
+};
+const ReqoreSegmentedControl = memo(forwardRef(({ items, value, defaultValue, onChange, size = 'normal', flat, pill, allowDeselect, activeIntent, disabled, readOnly, intent, customTheme, inheritCustomTheme, fluid, className, _testWidth, ...rest }, ref) => {
+    const animations = useReqoreProperty('animations');
+    const theme = useReqoreTheme('main', customTheme, intent, undefined, inheritCustomTheme);
+    const [_value, _setValue] = useState(value ?? defaultValue ?? items[0]?.value);
+    const itemRefs = useRef({});
+    const wrapperRefs = useRef({});
+    const containerRef = useRef(null);
+    const [measureRef, { width: measuredWidth }] = useMeasure();
+    const [indicatorStyle, setIndicatorStyle] = useState({ left: 0, width: 0 });
+    // Only constrain width when fluid (container has fixed width from parent)
+    // or when _testWidth is explicitly provided for testing.
+    // Non-fluid containers grow to fit their content, so overflow never applies.
+    const availableWidth = _testWidth || (fluid ? measuredWidth : 0);
+    // Sync controlled value
+    useUpdateEffect(() => {
+        if (value !== undefined) {
+            _setValue(value);
+        }
+    }, [value]);
+    // Transform items using the Tabs-style width estimation approach
+    const transformedItems = useMemo(() => getTransformedItems(items, availableWidth, size, _value), [items, availableWidth, size, _value]);
+    // Split into visible items and hidden items (the More group)
+    const visibleItems = useMemo(() => transformedItems.filter((item) => !Array.isArray(item)), [transformedItems]);
+    const hiddenItems = useMemo(() => {
+        const moreGroup = transformedItems.find((item) => Array.isArray(item));
+        return moreGroup || [];
+    }, [transformedItems]);
+    const hasOverflow = hiddenItems.length > 0;
+    // Is the selected value hidden in the "More" dropdown?
+    const isSelectedHidden = useMemo(() => hasOverflow && _value
+        ? hiddenItems.some((item) => item.value === _value)
+        : false, [hasOverflow, _value, hiddenItems]);
+    // Get the label for the "More" button
+    const moreLabel = useMemo(() => {
+        if (isSelectedHidden) {
+            const hidden = hiddenItems.find((item) => item.value === _value);
+            return hidden?.label ?? 'More';
+        }
+        return 'More';
+    }, [isSelectedHidden, hiddenItems, _value]);
+    // Calculate indicator position
+    useLayoutEffect(() => {
+        if (!_value || isSelectedHidden) {
+            return;
+        }
+        const selectedWrapper = wrapperRefs.current[_value];
+        const container = containerRef.current;
+        if (selectedWrapper && container) {
+            const containerRect = container.getBoundingClientRect();
+            const itemRect = selectedWrapper.getBoundingClientRect();
+            setIndicatorStyle({
+                left: itemRect.left - containerRect.left,
+                width: itemRect.width,
+            });
+        }
+    }, [_value, items, isSelectedHidden, visibleItems, measuredWidth]);
+    const handleSelect = useCallback((itemValue) => {
+        if (disabled || readOnly) {
+            return;
+        }
+        if (allowDeselect && itemValue === _value) {
+            _setValue(undefined);
+            onChange?.(undefined);
+            return;
+        }
+        _setValue(itemValue);
+        onChange?.(itemValue);
+    }, [_value, onChange, allowDeselect, disabled, readOnly]);
+    const enabledItems = useMemo(() => items.filter((item) => !item.disabled), [items]);
+    const handleKeyDown = useCallback((e) => {
+        if (disabled || readOnly || enabledItems.length === 0) {
+            return;
+        }
+        const currentIndex = enabledItems.findIndex((i) => i.value === _value);
+        let nextIndex;
+        switch (e.key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+                nextIndex = (currentIndex + 1) % enabledItems.length;
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                nextIndex =
+                    (currentIndex - 1 + enabledItems.length) % enabledItems.length;
+                break;
+            case 'Home':
+                nextIndex = 0;
+                break;
+            case 'End':
+                nextIndex = enabledItems.length - 1;
+                break;
+            default:
+                return;
+        }
+        e.preventDefault();
+        const nextItem = enabledItems[nextIndex];
+        handleSelect(nextItem.value);
+        itemRefs.current[nextItem.value]?.focus();
+    }, [enabledItems, _value, handleSelect, disabled, readOnly]);
+    const selectedVisibleIndex = useMemo(() => visibleItems.findIndex((item) => item.value === _value), [visibleItems, _value]);
+    if (!items || items.length === 0) {
+        return null;
+    }
+    return (_jsxs(StyledSegmentedControl, { ...rest, ref: (node) => {
+            containerRef.current =
+                node;
+            measureRef(node);
+            if (typeof ref === 'function') {
+                ref(node);
+            }
+            else if (ref) {
+                ref.current =
+                    node;
+            }
+        }, theme: theme, size: size, flat: flat, pill: pill, fluid: fluid, disabled: disabled, role: 'radiogroup', onKeyDown: handleKeyDown, className: `${className || ''} reqore-segmented-control`, children: [_value && selectedVisibleIndex >= 0 && !isSelectedHidden && (_jsx(StyledSegmentedControlIndicator, { theme: theme, size: size, pill: pill, animate: animations.buttons !== false, style: {
+                    transform: `translateX(${indicatorStyle.left - CONTAINER_PADDING}px)`,
+                    width: `${indicatorStyle.width}px`,
+                } })), visibleItems.map((item, index) => {
+                const isSelected = item.value === _value;
+                const isBeforeSelected = index === selectedVisibleIndex - 1;
+                const isLastVisible = index === visibleItems.length - 1 && !hasOverflow;
+                const itemDisabled = disabled || item.disabled;
+                const selectedItemIntent = item.activeIntent || activeIntent;
+                return (_jsx(StyledItemWrapper, { ref: (el) => {
+                        wrapperRefs.current[item.value] = el;
+                    }, isSelected: isSelected, isBeforeSelected: isBeforeSelected, isLast: isLastVisible, theme: theme, fluid: fluid, children: _jsx(ReqoreButton, { ref: (el) => {
+                            itemRefs.current[item.value] = el;
+                        }, flat: true, transparent: true, icon: item.icon, rightIcon: item.rightIcon, badge: item.badge, tooltip: item.tooltip, disabled: itemDisabled, effect: item.effect, size: size, fluid: fluid, intent: isSelected && selectedItemIntent
+                            ? selectedItemIntent
+                            : undefined, customTheme: isSelected && !selectedItemIntent
+                            ? {
+                                main: getReadableColorFrom(theme.main),
+                            }
+                            : customTheme, onClick: () => handleSelect(item.value), role: 'radio', "aria-checked": isSelected, tabIndex: isSelected
+                            ? 0
+                            : selectedVisibleIndex < 0 && index === 0
+                                ? 0
+                                : -1, className: 'reqore-segmented-control-item', pill: pill, children: item.label }) }, item.value));
+            }), hasOverflow && (_jsx(StyledItemWrapper, { isSelected: false, isBeforeSelected: false, isLast: true, theme: theme, fluid: fluid, children: _jsx(ReqorePopover, { component: ReqoreButton, componentProps: {
+                        icon: 'ArrowDownSLine',
+                        flat: true,
+                        transparent: true,
+                        size,
+                        pill,
+                        fluid,
+                        active: isSelectedHidden,
+                        intent: isSelectedHidden ? activeIntent : undefined,
+                        customTheme: isSelectedHidden
+                            ? { main: getReadableColorFrom(theme.main) }
+                            : customTheme,
+                        className: 'reqore-segmented-control-item reqore-segmented-control-more',
+                        label: moreLabel,
+                    }, closeOnOutsideClick: true, isReqoreComponent: true, noWrapper: true, handler: 'hoverStay', content: _jsx(ReqoreMenu, { customTheme: customTheme, children: hiddenItems.map((overflowItem) => (_jsx(ReqoreMenuItem, { icon: overflowItem.icon, rightIcon: overflowItem.rightIcon, disabled: overflowItem.disabled, selected: overflowItem.value === _value, intent: overflowItem.value === _value
+                                ? overflowItem.activeIntent || activeIntent
+                                : undefined, onClick: (_event, _itemId, closePopover) => {
+                                handleSelect(overflowItem.value);
+                                closePopover?.();
+                            }, children: overflowItem.label }, overflowItem.value))) }) }) }, '__more__'))] }));
+}));
+export default ReqoreSegmentedControl;
+//# sourceMappingURL=index.js.map

package/dist/esm/components/SegmentedControl/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/SegmentedControl/index.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/SeverityRow/index.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { rgba } from 'polished';
+import { forwardRef, memo, useMemo } from 'react';
+import styled, { css } from 'styled-components';
+import { PADDING_FROM_SIZE, RADIUS_FROM_SIZE } from '../../constants/sizes';
+import { changeLightness, getMainBackgroundColor, getReadableColor } from '../../helpers/colors';
+import { getOneLessSize, resolvePadding } from '../../helpers/utils';
+import { useReqoreTheme } from '../../hooks/useTheme';
+import { DisabledElement, RaisedElement } from '../../styles';
+import ReqoreButton, { ButtonBadge } from '../Button';
+import ReqoreControlGroup from '../ControlGroup';
+import { StyledEffect } from '../Effect';
+import { ReqoreP } from '../Paragraph';
+import { ReqoreSpan } from '../Span';
+import { ReqoreTooltipComponent } from '../TooltipComponent';
+const stripColorFor = (theme, intent) => intent ? theme.intents[intent] : changeLightness(getMainBackgroundColor(theme), 0.16);
+const tintedBgFor = (theme, intent) => intent
+    ? rgba(theme.intents[intent], 0.06)
+    : rgba(changeLightness(getMainBackgroundColor(theme), 0.04), 1);
+const StyledRow = styled(StyledEffect) `
+  display: grid;
+  grid-template-columns: 4px 1fr auto;
+  gap: ${({ size }) => PADDING_FROM_SIZE[size] * 2}px;
+  padding: ${({ $padded, $paddingSize }) => resolvePadding({
+    padded: $padded,
+    paddingSize: $paddingSize,
+    verticalMultiplier: 2,
+    horizontalMultiplier: 3,
+})};
+  border-radius: ${({ rounded, size }) => (rounded ? `${RADIUS_FROM_SIZE[size]}px` : '0')};
+  background-color: ${({ theme, $intent, $transparent }) => $transparent ? 'transparent' : tintedBgFor(theme, $intent)};
+  border: ${({ flat, theme, $intent }) => flat
+    ? 'none'
+    : `1px solid ${changeLightness($intent ? theme.intents[$intent] : getMainBackgroundColor(theme), 0.08)}`};
+  align-items: center;
+  width: ${({ $fluid }) => ($fluid ? '100%' : 'auto')};
+  color: ${({ theme }) => getReadableColor(theme, undefined, undefined, true)};
+  transition: background-color 0.15s ease-out;
+
+  ${({ $clickable, theme, $intent, $transparent }) => $clickable &&
+    css `
+      cursor: pointer;
+      &:hover {
+        background-color: ${$intent
+        ? rgba(theme.intents[$intent], $transparent ? 0.04 : 0.1)
+        : $transparent
+            ? rgba(changeLightness(getMainBackgroundColor(theme), 0.08), 0.08)
+            : rgba(changeLightness(getMainBackgroundColor(theme), 0.08), 1)};
+      }
+    `}
+
+  ${({ $raised, flat }) => $raised && flat !== false && RaisedElement}
+
+  ${({ disabled }) => disabled && DisabledElement}
+`;
+const StyledStrip = styled.div `
+  align-self: stretch;
+  border-radius: 2px;
+  background-color: ${({ theme, $intent }) => stripColorFor(theme, $intent)};
+  // Subtle glow matching the strip colour — same pattern as FeatureCard's
+  // line marker. Pulls focus to the row without using a heavier border.
+  box-shadow: 0 0 22px ${({ theme, $intent }) => rgba(stripColorFor(theme, $intent), 0.3)};
+`;
+const StyledBody = styled.div `
+  display: flex;
+  flex-flow: column;
+  gap: 4px;
+  min-width: 0;
+`;
+const StyledLabelLine = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: ${({ $wrap }) => ($wrap ? 'wrap' : 'nowrap')};
+  min-width: 0;
+  font-weight: 500;
+`;
+// `text-overflow: ellipsis` only works on the actual text-bearing element,
+// not its wrapper. Cascade the ellipsis CSS into the child <ReqoreP>/<ReqoreSpan>
+// so the `…` glyph actually appears, while keeping the wrapper itself a flex
+// item that can shrink (`min-width: 0; flex: 1 1 auto`) inside its parent.
+const StyledTextSlot = styled.div `
+  min-width: 0;
+  ${({ $wrap }) => !$wrap &&
+    css `
+      flex: 1 1 auto;
+      overflow: hidden;
+
+      & > * {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        display: block;
+        max-width: 100%;
+      }
+    `}
+`;
+const ReqoreSeverityRow = memo(forwardRef(({ label, description, leading, badge, actions, intent, transparent = false, showStrip = true, size = 'normal', flat = true, fluid = true, rounded = true, raised, customTheme, inheritCustomTheme, disabled, tooltip, effect, labelEffect, descriptionEffect, wrap = true, padded = true, paddingSize, className, ...rest }, ref) => {
+    const theme = useReqoreTheme('main', customTheme, undefined, undefined, inheritCustomTheme);
+    const secondarySize = useMemo(() => getOneLessSize(size), [size]);
+    const interactive = !!(rest.onClick || rest.onDoubleClick);
+    const hasBadge = badge !== undefined && badge !== null;
+    return (_jsxs(ReqoreTooltipComponent, { ...rest, Component: StyledRow, tooltip: tooltip, ref: ref, theme: theme, "$intent": intent, "$transparent": transparent, size: size, "$fluid": fluid, flat: flat, rounded: rounded, "$raised": raised, "$clickable": interactive, "$padded": padded, "$paddingSize": paddingSize ?? size, disabled: disabled, effect: effect, className: `${className || ''} reqore-severity-row`, children: [showStrip ? (_jsx(StyledStrip, { theme: theme, "$intent": intent, className: 'reqore-severity-row-strip', "aria-hidden": true })) : (_jsx("span", { "aria-hidden": true, style: { width: 4 } })), _jsxs(StyledBody, { className: 'reqore-severity-row-body', children: [_jsxs(StyledLabelLine, { "$wrap": wrap, className: 'reqore-severity-row-label', children: [leading, _jsx(StyledTextSlot, { "$wrap": wrap, children: _jsx(ReqoreSpan, { size: size, effect: labelEffect, children: label }) }), hasBadge && (_jsx(ButtonBadge, { size: size, content: badge, margin: 'none' }))] }), description && (_jsx(StyledTextSlot, { "$wrap": wrap, children: _jsx(ReqoreP, { size: secondarySize, effect: { opacity: 0.6, ...descriptionEffect }, className: 'reqore-severity-row-description', children: description }) }))] }), actions && actions.length > 0 && (_jsx(ReqoreControlGroup, { gapSize: 'small', className: 'reqore-severity-row-actions', children: actions.map((action, idx) => (_jsx(ReqoreButton, { size: size, intent: action.intent ?? intent, ...action, children: action.label }, idx))) }))] }));
+}));
+export default ReqoreSeverityRow;
+//# sourceMappingURL=index.js.map

package/dist/esm/components/SeverityRow/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/SeverityRow/index.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/Skeleton/index.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import styled, { css, keyframes } from 'styled-components';
+import { RADIUS_FROM_SIZE, SIZE_TO_PX } from '../../constants/sizes';
+export const StyledSkeletonAnimation = keyframes `
+  0% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1;
+  }
+`;
+export const StyledSkeleton = styled.div `
+  ${({ $size, $width, $height, $circle, theme }) => css `
+    background-color: ${theme.intents.muted};
+    border-radius: ${$circle ? '99999' : RADIUS_FROM_SIZE[$size]}px;
+    height: ${$height || `${SIZE_TO_PX[$size]}px`};
+    width: ${$width || `${SIZE_TO_PX[$size]}px`};
+
+    animation: ${StyledSkeletonAnimation} 0.75s infinite alternate;
+  `}
+`;
+export const ReqoreSkeleton = ({ size = 'normal', width, height, circle, lines, }) => {
+    if (lines) {
+        return (_jsx(_Fragment, { children: Array.from({ length: lines }).map((_, i) => (_jsx(StyledSkeleton, { "$size": size, "$width": width, "$height": height, "$circle": circle }, i))) }));
+    }
+    return _jsx(StyledSkeleton, { "$size": size, "$width": width, "$height": height, "$circle": circle });
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Skeleton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Skeleton/index.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAIrE,MAAM,CAAC,MAAM,uBAAuB,GAAG,SAAS,CAAA;;;;;;;CAO/C,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;IACpC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAwB,EAAE,EAAE,CAAC,GAAG,CAAA;wBACrD,KAAK,CAAC,OAAO,CAAC,KAAK;qBACtB,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC;cAClD,OAAO,IAAI,GAAG,UAAU,CAAC,KAAK,CAAC,IAAI;aACpC,MAAM,IAAI,GAAG,UAAU,CAAC,KAAK,CAAC,IAAI;;iBAE9B,uBAAuB;GACrC;CACF,CAAC;AAmBF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,IAAI,GAAG,QAAQ,EACf,KAAK,EACL,MAAM,EACN,MAAM,EACN,KAAK,GACgB,EAAE,EAAE;IACzB,IAAI,KAAK,EAAE;QACT,OAAO,CACL,4BACG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAC3C,KAAC,cAAc,aAAgB,IAAI,YAAU,KAAK,aAAW,MAAM,aAAW,MAAM,IAA/D,CAAC,CAAkE,CACzF,CAAC,GACD,CACJ,CAAC;KACH;IAED,OAAO,KAAC,cAAc,aAAQ,IAAI,YAAU,KAAK,aAAW,MAAM,aAAW,MAAM,GAAI,CAAC;AAC1F,CAAC,CAAC"}

package/dist/esm/components/Slider/index.js

@@ -0,0 +1,176 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Slider from '@radix-ui/react-slider';
+import { forwardRef, memo, useCallback, useMemo } from 'react';
+import styled, { css } from 'styled-components';
+import { HALF_PADDING_FROM_SIZE, ICON_FROM_SIZE } from '../../constants/sizes';
+import { changeLightness, getReadableColor } from '../../helpers/colors';
+import { useReqoreTheme } from '../../hooks/useTheme';
+import ReqoreControlGroup from '../ControlGroup';
+import { StyledEffect } from '../Effect';
+import ReqoreIcon from '../Icon';
+import { ReqoreP } from '../Paragraph';
+import ReqoreTag from '../Tag';
+import { ReqoreTooltipComponent } from '../TooltipComponent';
+const StyledControlGroupWrapper = styled(ReqoreControlGroup) `
+  &[data-orientation='horizontal'] {
+    &[data-fluid='false'] {
+      max-width: 200px;
+      min-width: 200px;
+    }
+  }
+  &[data-orientation='vertical'] {
+    &[data-fluid='false'] {
+      max-height: 200px;
+    }
+  }
+`;
+const StyledTrack = styled(Slider.Track) `
+  background-color: ${(props) => props.background};
+  position: relative;
+  border-radius: 9999px;
+`;
+const StyledRange = styled(Slider.Range) `
+  position: absolute;
+  background-color: ${(props) => props.background};
+  border-radius: 9999px;
+`;
+const StyledThumb = styled(Slider.Thumb) `
+  display: block;
+  background-color: ${(props) => props.background};
+  border-radius: 9999px;
+  transition: all 0.2s ease-out;
+
+  &:focus {
+    box-shadow: 0 0 0 8px ${(props) => props.background}15;
+    outline: none;
+  }
+`;
+const StyledRoot = styled(Slider.Root) `
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  flex-grow: 1;
+
+  &[aria-disabled='true'] {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  ${({ 'data-size': size }) => css `
+    ${StyledThumb} {
+      width: ${ICON_FROM_SIZE[size]}px;
+      height: ${ICON_FROM_SIZE[size]}px;
+      min-width: ${ICON_FROM_SIZE[size]}px;
+    }
+  `}
+
+  &[data-orientation='horizontal'] {
+    width: 100%;
+
+    ${({ 'data-size': size }) => css `
+      height: ${ICON_FROM_SIZE[size]}px;
+
+      ${StyledTrack} {
+        height: ${HALF_PADDING_FROM_SIZE[size]}px;
+      }
+    `}
+
+    ${StyledTrack} {
+      flex-grow: 1;
+    }
+    ${StyledRange} {
+      height: 100%;
+    }
+  }
+
+  &[data-orientation='vertical'] {
+    flex-direction: column;
+    justify-content: center;
+    height: 200px;
+
+    ${({ 'data-size': size }) => css `
+      width: ${ICON_FROM_SIZE[size]}px;
+
+      ${StyledTrack} {
+        width: ${HALF_PADDING_FROM_SIZE[size]}px;
+      }
+    `}
+
+    ${StyledTrack} {
+      flex-grow: 1;
+    }
+    ${StyledRange} {
+      width: 100%;
+    }
+  }
+`;
+const StyledCurrentValue = styled(ReqoreTag) `
+  position: absolute;
+  ${({ position, isAboveThreshold, isBelowThreshold }) => css `
+      ${position}: ${isAboveThreshold || isBelowThreshold ? '-5px' : '-35px'};
+      ${position === 'left' || position === 'right' ? 'top' : 'left'}: 50%;
+      transform: ${position === 'left' || position === 'right'
+    ? 'translateY(-50%)'
+    : 'translateX(-50%)'};
+    `}
+`;
+const SliderRootWrapper = styled(ReqoreControlGroup) `
+  align-items: center;
+  flex-grow: 1;
+  width: 100%;
+`;
+export const ReqoreSlider = memo(forwardRef(({ value, onChange, step = 0.1, orientation = 'horizontal', fluid = true, showLabels, icon, iconColor, iconProps, rightIcon, rightIconColor, rightIconProps, customTheme, intent, effect, trackProps, rangeProps, thumbProps, minLabelProps, maxLabelProps, size = 'normal', wrapperProps, labelsPosition = 'top', tooltip, currentMaxLabelProps, currentMinLabelProps, displayCurrentValueOverThumb, ...props }, ref) => {
+    const theme = useReqoreTheme('main', customTheme, intent);
+    const background = intent
+        ? changeLightness(theme.main, 0.2)
+        : getReadableColor(theme, undefined, undefined, true);
+    const trackBackground = intent
+        ? changeLightness(theme.main, 0.05)
+        : changeLightness(theme.main, 0.2);
+    const isRange = Array.isArray(value);
+    const renderLabels = useCallback(() => {
+        if (!showLabels) {
+            return null;
+        }
+        return (_jsxs(ReqoreControlGroup, { fluid: true, spaceBetween: true, vertical: orientation === 'vertical', fill: true, children: [_jsxs(ReqoreControlGroup, { fixed: true, vertical: orientation === 'vertical', horizontalAlign: 'center', children: [icon && (_jsx(ReqoreIcon, { icon: icon, size: size, color: iconColor, intent: intent, ...iconProps })), props.min || props.min === 0 ? (_jsx(ReqoreP, { size: size, intent: intent, effect: effect, ...minLabelProps, children: props.min })) : null] }), _jsxs(ReqoreControlGroup, { fixed: true, vertical: orientation === 'vertical', horizontalAlign: 'center', children: [props.max || props.max === 0 ? (_jsx(ReqoreP, { size: size, intent: intent, effect: effect, ...maxLabelProps, children: props.max })) : null, rightIcon && (_jsx(ReqoreIcon, { icon: rightIcon, size: size, color: rightIconColor, intent: intent, ...rightIconProps }))] })] }));
+    }, [
+        icon,
+        rightIcon,
+        iconProps,
+        rightIconProps,
+        minLabelProps,
+        maxLabelProps,
+        size,
+        intent,
+        props.min,
+        props.max,
+        showLabels,
+        orientation,
+        effect,
+    ]);
+    const currentValuePosition = useMemo(() => {
+        return orientation === 'horizontal'
+            ? labelsPosition === 'top'
+                ? 'top'
+                : 'bottom'
+            : labelsPosition === 'top'
+                ? 'left'
+                : 'right';
+    }, [orientation, labelsPosition]);
+    const isMinValueBelowThreshold = useMemo(() => {
+        const _value = isRange ? value[0] : value;
+        return _value < props.min + step * 5;
+    }, [value, props.min]);
+    const isMaxValueAboveThreshold = useMemo(() => {
+        if (!isRange)
+            return false;
+        const _value = value[1];
+        return _value > props.max - step * 5;
+    }, [value, props.max]);
+    return (_jsxs(ReqoreTooltipComponent, { "data-orientation": orientation, "data-labels-position": labelsPosition, "data-fluid": fluid, fluid: fluid, vertical: orientation === 'horizontal', fill: true, gapSize: orientation === 'horizontal' ? 'big' : 'normal', ...wrapperProps, Component: StyledControlGroupWrapper, ref: ref, tooltip: tooltip, children: [labelsPosition === 'top' && renderLabels(), _jsx(SliderRootWrapper, { vertical: orientation === 'vertical', children: _jsxs(StyledRoot, { "data-size": size, orientation: orientation, minStepsBetweenThumbs: step, inverted: orientation === 'vertical', step: step, ...props, value: isRange ? value : [value], onValueChange: (values) => {
+                        onChange(isRange ? values : values[0]);
+                    }, children: [_jsx(StyledTrack, { background: trackBackground, asChild: true, children: _jsx(StyledEffect, { effect: effect, ...trackProps, children: _jsx(StyledRange, { background: background, asChild: true, children: _jsx(StyledEffect, { effect: effect, ...rangeProps }) }) }) }), _jsx(StyledThumb, { background: background, asChild: true, children: _jsx(StyledEffect, { effect: effect, ...thumbProps, children: showLabels && (_jsx(StyledCurrentValue, { size: size, effect: effect, intent: intent, position: currentValuePosition, label: isRange ? value[0] : value, isBelowThreshold: displayCurrentValueOverThumb || isMinValueBelowThreshold, ...currentMinLabelProps })) }) }), isRange && (_jsx(StyledThumb, { background: background, asChild: true, children: _jsx(StyledEffect, { effect: effect, ...thumbProps, children: showLabels && (_jsx(StyledCurrentValue, { size: size, effect: effect, intent: intent, position: currentValuePosition, isAboveThreshold: displayCurrentValueOverThumb || isMaxValueAboveThreshold, label: value[1], ...currentMaxLabelProps })) }) }))] }) }), labelsPosition === 'bottom' && renderLabels()] }));
+}));
+//# sourceMappingURL=index.js.map