@cube-dev/ui-kit 0.0.0-canary-fcfd265 → 0.0.0-canary-7339959

package/cjs/components/pickers/RangeSlider/styled.js

@@ -1,118 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-fcfd265
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledContent = exports.StyledSlider = exports.StyledControls = exports.StyledGrade = exports.StyledGradation = exports.StyledSlideTrack = exports.StyledSlide = exports.StyledThumb = void 0;
-const tasty_1 = require("../../../tasty");
-exports.StyledThumb = (0, tasty_1.tasty)({
-    styles: {
-        top: '2x',
-        width: '2x',
-        height: '2x',
-        fill: {
-            '': '#purple',
-            hovered: '#6B4FEE',
-            dragged: '#7A77FF',
-            disabled: '#dark-04',
-        },
-        cursor: {
-            hovered: 'pointer',
-            dragged: 'grab',
-        },
-        shadow: '0px 2px 4px rgba(20, 20, 70, 0.2)',
-        radius: '50%',
-        border: {
-            focused: '3px solid #CAC9FF',
-            dragged: '2px solid #665DE8;',
-        },
-        boxSizing: {
-            '': 'border-box',
-            focused: 'content-box',
-            dragged: 'border-box',
-        },
-        transition: 'theme',
-    },
-});
-exports.StyledSlide = (0, tasty_1.tasty)({
-    styles: {
-        top: '1.875x',
-        position: 'absolute',
-        fill: {
-            '': '#dark-05',
-            // disabled: '#dark-04',
-        },
-        height: '2px',
-        width: '100%',
-        radius: true,
-    },
-});
-exports.StyledSlideTrack = (0, tasty_1.tasty)({
-    styles: {
-        position: 'absolute',
-        '@start-range': {
-            '': '@thumb-0-value',
-            single: '0',
-        },
-        '@end-range': {
-            '': '(1 - @thumb-1-value)',
-            single: '(1 - @thumb-0-value)',
-        },
-        left: '(@start-range * 100%)',
-        right: '(@end-range * 100%)',
-        height: '2px',
-        fill: {
-            '': '#purple',
-            disabled: '#dark-04',
-        },
-        radius: true,
-    },
-});
-exports.StyledGradation = (0, tasty_1.tasty)({
-    styles: {},
-});
-exports.StyledGrade = (0, tasty_1.tasty)({
-    styles: {},
-});
-exports.StyledControls = (0, tasty_1.tasty)({
-    styles: {
-        position: 'relative',
-        width: '100% - 2x',
-        height: '4x',
-    },
-});
-exports.StyledSlider = (0, tasty_1.tasty)({
-    as: 'section',
-    styles: {
-        position: 'relative',
-        display: 'flex',
-        gap: {
-            '': '0',
-            inputs: '1x',
-        },
-        flexDirection: {
-            '': 'column',
-            inputs: 'row',
-        },
-        alignItems: 'center',
-        width: '100%',
-        padding: {
-            '': '0',
-            sideLabel: '0.75x top',
-        },
-    },
-});
-exports.StyledContent = (0, tasty_1.tasty)({
-    styles: {
-        display: 'flex',
-        alignItems: 'center',
-        flexDirection: 'column',
-        width: '100%',
-    },
-});
-
-        

package/es/components/pickers/RangeSlider/Gradation.js

@@ -1,24 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-fcfd265
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { StyledGradation, StyledGrade } from './styled';
-export function Gradation(props) {
-    const { state, ranges, values = [] } = props;
-    if (!values.length) {
-        return null;
-    }
-    const getIsActive = (value, idx) => {
-        const [minIdx, maxIdx] = ranges.map((range) => state.getThumbValue(range));
-        return idx >= minIdx && idx <= maxIdx;
-    };
-    return (_jsx(StyledGradation, { children: values.map((value, idx) => (_jsx(StyledGrade, { mods: {
-                active: getIsActive(value, idx),
-            }, children: value }, value))) }, void 0));
-}
-
-        

package/es/components/pickers/RangeSlider/Header.js

@@ -1,12 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-fcfd265
- * Released under the MIT license.
- */
-
-export function Header() {
-    return null;
-}
-
-        

package/es/components/pickers/RangeSlider/RangeInput.js

@@ -1,34 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-fcfd265
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback } from 'react';
-import { Flow } from '../../layout/Flow';
-import { NumberInput } from '../../forms';
-function calculateWidth(max) {
-    if (typeof max === 'undefined') {
-        return undefined;
-    }
-    const value = String(max).length;
-    const charWidth = 2;
-    return `${value * charWidth}x`;
-}
-export function RangeInput(props) {
-    const { state, index, suffix, min, max, isLoading, ...otherProps } = props;
-    const value = state.values[index];
-    const width = calculateWidth(max);
-    const onChange = useCallback((value) => {
-        state.setThumbValue(index, value);
-    }, [index, state]);
-    return (_jsx(NumberInput, { ...otherProps, hideStepper: true, inputProps: {
-            maxLength: max && String(max).length,
-        }, inputStyles: {
-            width,
-        }, isLoading: isLoading, suffix: suffix && _jsx(Flow, { padding: "0.5x", children: suffix }, void 0), value: value, minValue: state.getThumbMinValue(index), maxValue: state.getThumbMaxValue(index), onChange: onChange }, void 0));
-}
-
-        

package/es/components/pickers/RangeSlider/RangeSlider.js

@@ -1,97 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-fcfd265
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useRef } from 'react';
-import { useSlider } from '@react-aria/slider';
-import { useSliderState } from '@react-stately/slider';
-import { FieldWrapper } from '../../forms/FieldWrapper';
-import { extractStyles, OUTER_STYLES, } from '../../../tasty';
-import { Slide } from './Slide';
-import { Gradation } from './Gradation';
-import { Thumb } from './Thumb';
-import { RangeInput } from './RangeInput';
-import { StyledControls, StyledSlider, StyledContent } from './styled';
-function getRanges(value) {
-    if (Array.isArray(value)) {
-        return value.length >= 2 ? [0, 1] : [0];
-    }
-    return [0];
-}
-function RangeSlider(props, ref) {
-    let { labelPosition, label, extra, styles, isRequired, validationState, message, description, requiredMark, labelSuffix, labelStyles, necessityIndicator, defaultValue, value, gradation, step = 1, isDisabled, isLoading, orientation = 'horizontal', showInput, inputStyles, inputSuffix, inputSuffixPosition, minValue, maxValue, onChange, onChangeEnd, ...otherProps } = props;
-    const ranges = getRanges(defaultValue || value || [0, 1]);
-    const isSingle = ranges.length <= 1;
-    const trackRef = useRef(null);
-    const inputRef = useRef(null);
-    const numberFormatter = new Intl.NumberFormat();
-    const baseProps = {
-        step,
-        orientation,
-        isDisabled,
-        onChange(range) {
-            if (onChange) {
-                onChange(Array.isArray(range) ? range : [range]);
-            }
-        },
-        onChangeEnd(range) {
-            if (onChangeEnd) {
-                onChangeEnd(Array.isArray(range) ? range : [range]);
-            }
-        },
-    };
-    const state = useSliderState({
-        ...props,
-        ...baseProps,
-        numberFormatter,
-    });
-    const { groupProps, trackProps, labelProps } = useSlider({
-        ...props,
-        ...baseProps,
-    }, state, trackRef);
-    const inputProps = {
-        min: minValue,
-        max: maxValue,
-        step,
-        state: state,
-        suffix: inputSuffix,
-        styles: inputStyles,
-        suffixPosition: inputSuffixPosition,
-        isDisabled,
-        isLoading,
-    };
-    const sliderField = (_jsxs(StyledSlider, { ...groupProps, mods: {
-            sideLabel: labelPosition === 'side',
-            inputs: showInput,
-        }, children: [!isSingle && showInput && _jsx(RangeInput, { index: 0, ...inputProps }, void 0), _jsx(StyledContent, { children: _jsxs(StyledControls, { ...trackProps, ref: trackRef, children: [_jsx(Slide, { state: state, ranges: ranges, isSingle: isSingle, isDisabled: isDisabled }, void 0), _jsx(Gradation, { state: state, ranges: ranges, values: gradation }, void 0), ranges.map((thumb) => (_jsx(Thumb, { index: thumb, state: state, inputRef: inputRef, trackRef: trackRef, isDisabled: isDisabled, defaultValue: defaultValue && defaultValue[thumb] }, thumb)))] }, void 0) }, void 0), showInput && _jsx(RangeInput, { index: 1, ...inputProps }, void 0)] }, void 0));
-    styles = extractStyles(otherProps, OUTER_STYLES, styles);
-    return (_jsx(FieldWrapper, { ...{
-            labelPosition,
-            label,
-            extra,
-            styles,
-            isRequired,
-            labelStyles,
-            necessityIndicator,
-            labelProps,
-            isDisabled,
-            validationState,
-            message,
-            description,
-            requiredMark,
-            labelSuffix,
-            Component: sliderField,
-            ref: ref,
-        } }, void 0));
-}
-const _RangeSlider = forwardRef(RangeSlider);
-const __RangeSlider = Object.assign(_RangeSlider, {
-    cubeInputType: 'CheckboxGroup',
-});
-export { __RangeSlider as RangeSlider };
-
-        

package/es/components/pickers/RangeSlider/Slide.js

@@ -1,24 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-fcfd265
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { StyledSlide, StyledSlideTrack } from './styled';
-export function Slide(props) {
-    const { ranges, state, isDisabled, isSingle } = props;
-    const styles = {};
-    const mods = useMemo(() => ({
-        single: isSingle,
-        disabled: isDisabled,
-    }), [isDisabled, isSingle]);
-    ranges.forEach((rangeIndex) => {
-        styles[`@thumb-${rangeIndex}-value`] = state.getThumbPercent(rangeIndex);
-    });
-    return (_jsx(StyledSlide, { mods: mods, children: _jsx(StyledSlideTrack, { styles: styles, mods: mods }, void 0) }, void 0));
-}
-
-        

package/es/components/pickers/RangeSlider/Thumb.js

@@ -1,32 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-fcfd265
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef } from 'react';
-import { useSliderThumb } from '@react-aria/slider';
-import { useHover } from '@react-aria/interactions';
-import { VisuallyHidden } from '@react-aria/visually-hidden';
-import { FocusRing } from '@react-aria/focus';
-import { mergeProps } from '../../../utils/react';
-import { StyledThumb } from './styled';
-export function Thumb(props) {
-    const { state, isDisabled } = props;
-    const ref = useRef(null);
-    const { thumbProps, inputProps, isDragging, isFocused } = useSliderThumb({
-        ...props,
-        inputRef: ref,
-    }, state);
-    const { hoverProps, isHovered } = useHover({ isDisabled });
-    return (_jsx(FocusRing, { within: true, children: _jsx(StyledThumb, { mods: {
-                hovered: isHovered,
-                dragged: isDragging,
-                focused: isFocused,
-                disabled: isDisabled,
-            }, ...mergeProps(thumbProps, hoverProps), role: "presentation", children: _jsx(VisuallyHidden, { children: _jsx("input", { ref: ref, ...inputProps }, void 0) }, void 0) }, void 0) }, void 0));
-}
-
-        

package/es/components/pickers/RangeSlider/styled.js

@@ -1,115 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-fcfd265
- * Released under the MIT license.
- */
-
-import { tasty } from '../../../tasty';
-export const StyledThumb = tasty({
-    styles: {
-        top: '2x',
-        width: '2x',
-        height: '2x',
-        fill: {
-            '': '#purple',
-            hovered: '#6B4FEE',
-            dragged: '#7A77FF',
-            disabled: '#dark-04',
-        },
-        cursor: {
-            hovered: 'pointer',
-            dragged: 'grab',
-        },
-        shadow: '0px 2px 4px rgba(20, 20, 70, 0.2)',
-        radius: '50%',
-        border: {
-            focused: '3px solid #CAC9FF',
-            dragged: '2px solid #665DE8;',
-        },
-        boxSizing: {
-            '': 'border-box',
-            focused: 'content-box',
-            dragged: 'border-box',
-        },
-        transition: 'theme',
-    },
-});
-export const StyledSlide = tasty({
-    styles: {
-        top: '1.875x',
-        position: 'absolute',
-        fill: {
-            '': '#dark-05',
-            // disabled: '#dark-04',
-        },
-        height: '2px',
-        width: '100%',
-        radius: true,
-    },
-});
-export const StyledSlideTrack = tasty({
-    styles: {
-        position: 'absolute',
-        '@start-range': {
-            '': '@thumb-0-value',
-            single: '0',
-        },
-        '@end-range': {
-            '': '(1 - @thumb-1-value)',
-            single: '(1 - @thumb-0-value)',
-        },
-        left: '(@start-range * 100%)',
-        right: '(@end-range * 100%)',
-        height: '2px',
-        fill: {
-            '': '#purple',
-            disabled: '#dark-04',
-        },
-        radius: true,
-    },
-});
-export const StyledGradation = tasty({
-    styles: {},
-});
-export const StyledGrade = tasty({
-    styles: {},
-});
-export const StyledControls = tasty({
-    styles: {
-        position: 'relative',
-        width: '100% - 2x',
-        height: '4x',
-    },
-});
-export const StyledSlider = tasty({
-    as: 'section',
-    styles: {
-        position: 'relative',
-        display: 'flex',
-        gap: {
-            '': '0',
-            inputs: '1x',
-        },
-        flexDirection: {
-            '': 'column',
-            inputs: 'row',
-        },
-        alignItems: 'center',
-        width: '100%',
-        padding: {
-            '': '0',
-            sideLabel: '0.75x top',
-        },
-    },
-});
-export const StyledContent = tasty({
-    styles: {
-        display: 'flex',
-        alignItems: 'center',
-        flexDirection: 'column',
-        width: '100%',
-    },
-});
-
-        

package/types/components/pickers/RangeSlider/Gradation.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-import { SliderState } from '@react-stately/slider';
-export declare type GradationProps = {
-    state: SliderState;
-    ranges: number[];
-    values?: string[];
-};
-export declare function Gradation(props: GradationProps): JSX.Element | null;

package/types/components/pickers/RangeSlider/Header.d.ts

@@ -1 +0,0 @@
-export declare function Header(): null;

package/types/components/pickers/RangeSlider/RangeInput.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-import { SliderState } from '@react-stately/slider';
-import { CubeNumberInputProps } from '../../forms';
-export interface RangeInputProps extends CubeNumberInputProps {
-    index: number;
-    state: SliderState;
-    min?: number;
-    max?: number;
-}
-export declare function RangeInput(props: RangeInputProps): JSX.Element;

package/types/components/pickers/RangeSlider/RangeSlider.d.ts

@@ -1,19 +0,0 @@
-/// <reference types="react" />
-import { FormFieldProps } from '../../../shared';
-import { BasePropsWithoutChildren, BlockStyleProps, OuterStyleProps, Styles } from '../../../tasty';
-import type { AriaSliderProps, SliderProps } from '@react-types/slider';
-declare type SliderValue = number[];
-export interface CubeRangeSliderProps extends AriaSliderProps<SliderValue>, SliderProps<SliderValue>, BasePropsWithoutChildren, OuterStyleProps, FormFieldProps, BlockStyleProps {
-    showInput?: boolean;
-    inputSuffix?: string;
-    inputSuffixPosition?: 'before' | 'after';
-    inputStyles?: Styles;
-    isLoading?: boolean;
-    gradation?: string[];
-    onChange?: (range: SliderValue) => void;
-    onChangeEnd?: (range: SliderValue) => void;
-}
-declare const __RangeSlider: import("react").ForwardRefExoticComponent<CubeRangeSliderProps & import("react").RefAttributes<import("@react-types/shared").DOMRefValue<HTMLDivElement>>> & {
-    cubeInputType: string;
-};
-export { __RangeSlider as RangeSlider };

package/types/components/pickers/RangeSlider/Slide.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import { SliderState } from '@react-stately/slider';
-export declare type SlideProps = {
-    state: SliderState;
-    ranges: number[];
-    isDisabled?: boolean;
-    isSingle?: boolean;
-};
-export declare function Slide(props: SlideProps): JSX.Element;

package/types/components/pickers/RangeSlider/Thumb.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import { AriaSliderThumbOptions } from '@react-aria/slider';
-import { SliderState } from '@react-stately/slider';
-export interface ThumbProps extends AriaSliderThumbOptions {
-    state: SliderState;
-    defaultValue?: number;
-    isDisabled?: boolean;
-}
-export declare function Thumb(props: ThumbProps): JSX.Element;

package/types/components/pickers/RangeSlider/styled.d.ts

@@ -1,8 +0,0 @@
-export declare const StyledThumb: any;
-export declare const StyledSlide: any;
-export declare const StyledSlideTrack: any;
-export declare const StyledGradation: any;
-export declare const StyledGrade: any;
-export declare const StyledControls: any;
-export declare const StyledSlider: any;
-export declare const StyledContent: any;