@dreamcommerce/aurora 3.1.58 → 3.1.59

package/build/esm/packages/aurora/src/components/slider/slider.js

@@ -0,0 +1,141 @@
+import React__default, { useState, useRef, useCallback } from 'react';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { cn } from '../../utilities/cn.js';
+import { Root, Track, Range, Thumb } from '../../../../../external/@radix-ui/react-slider/dist/index.mjs.js';
+import { Trigger } from '../../../../../external/@radix-ui/react-tooltip/dist/index.mjs.js';
+import { Tooltip } from '../tooltip/tooltip.js';
+import { TooltipContent } from '../tooltip/components/tooltip_content.js';
+import { TooltipProvider } from '../tooltip/context/tooltip_provider.js';
+import { SliderInput } from './components/slider_input.js';
+
+var _excluded = ["value", "defaultValue", "min", "max", "step", "disabled", "showTooltip", "withInput", "suffix", "onValueChange", "onValueCommit", "className", "wrapperClassName"];
+var Slider = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+  var controlledValue = _ref.value,
+    _ref$defaultValue = _ref.defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? 0 : _ref$defaultValue,
+    _ref$min = _ref.min,
+    min = _ref$min === void 0 ? 0 : _ref$min,
+    _ref$max = _ref.max,
+    max = _ref$max === void 0 ? 100 : _ref$max,
+    _ref$step = _ref.step,
+    step = _ref$step === void 0 ? 1 : _ref$step,
+    disabled = _ref.disabled,
+    showTooltipProp = _ref.showTooltip,
+    _ref$withInput = _ref.withInput,
+    withInput = _ref$withInput === void 0 ? false : _ref$withInput,
+    suffix = _ref.suffix,
+    onValueChange = _ref.onValueChange,
+    onValueCommit = _ref.onValueCommit,
+    className = _ref.className,
+    wrapperClassName = _ref.wrapperClassName,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var isControlled = controlledValue !== undefined;
+  var _useState = useState(defaultValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalValue = _useState2[0],
+    setInternalValue = _useState2[1];
+  var currentValue = isControlled ? controlledValue : internalValue;
+  var showTooltip = showTooltipProp !== null && showTooltipProp !== void 0 ? showTooltipProp : !withInput;
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isHovered = _useState4[0],
+    setIsHovered = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isFocused = _useState6[0],
+    setIsFocused = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isDragging = _useState8[0],
+    setIsDragging = _useState8[1];
+  var isPointerDownRef = useRef(false);
+  var tooltipOpen = showTooltip && (isHovered || isFocused || isDragging);
+  var updateValue = useCallback(function (newValue) {
+    if (!isControlled) {
+      setInternalValue(newValue);
+    }
+    onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue);
+  }, [isControlled, onValueChange]);
+  var commitValue = useCallback(function (newValue) {
+    onValueCommit === null || onValueCommit === void 0 ? void 0 : onValueCommit(newValue);
+  }, [onValueCommit]);
+  var handleValueChange = useCallback(function (values) {
+    return updateValue(values[0]);
+  }, [updateValue]);
+  var handleValueCommit = useCallback(function (values) {
+    return commitValue(values[0]);
+  }, [commitValue]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: cn('aurora-slider aurora-flex aurora-items-center aurora-gap-3 aurora-w-full', wrapperClassName)
+  }, /*#__PURE__*/React__default.createElement(Root, _objectSpread2({
+    ref: ref,
+    min: min,
+    max: max,
+    step: step,
+    disabled: disabled,
+    value: [currentValue],
+    onValueChange: handleValueChange,
+    onValueCommit: handleValueCommit,
+    onPointerDown: function onPointerDown() {
+      isPointerDownRef.current = true;
+      setIsDragging(true);
+      setIsFocused(false);
+    },
+    onPointerUp: function onPointerUp() {
+      isPointerDownRef.current = false;
+      setIsDragging(false);
+      setIsHovered(false);
+    },
+    onPointerCancel: function onPointerCancel() {
+      isPointerDownRef.current = false;
+      setIsDragging(false);
+      setIsHovered(false);
+    },
+    className: cn('aurora-relative aurora-flex aurora-w-full aurora-touch-none aurora-select-none aurora-items-center aurora-group aurora-h-5', {
+      'aurora-cursor-not-allowed aurora-pointer-events-none': disabled
+    }, className)
+  }, props), /*#__PURE__*/React__default.createElement(Track, {
+    className: cn('aurora-relative aurora-h-1 aurora-w-full aurora-grow aurora-overflow-hidden aurora-rounded-8 aurora-cursor-pointer', disabled ? 'aurora-bg-active' : 'aurora-bg-neutral-500')
+  }, /*#__PURE__*/React__default.createElement(Range, {
+    className: cn('aurora-absolute aurora-h-full aurora-rounded-8', disabled ? 'aurora-bg-neutral-500' : 'aurora-bg-primary')
+  })), /*#__PURE__*/React__default.createElement(TooltipProvider, {
+    delayDuration: 0
+  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+    open: tooltipOpen
+  }, /*#__PURE__*/React__default.createElement(Trigger, {
+    asChild: true
+  }, /*#__PURE__*/React__default.createElement(Thumb, {
+    onMouseEnter: function onMouseEnter() {
+      return setIsHovered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsHovered(false);
+    },
+    onFocus: function onFocus(e) {
+      if (!isPointerDownRef.current) {
+        setIsFocused(e.target.matches(':focus-visible'));
+      }
+    },
+    onBlur: function onBlur() {
+      return setIsFocused(false);
+    },
+    className: cn('aurora-block aurora-h-5 aurora-w-5 aurora-rounded-full aurora-outline-none', !isDragging && 'aurora-transition-all', disabled ? 'aurora-bg-active aurora-border-0 aurora-cursor-not-allowed' : cn('aurora-bg focus-visible:aurora-border-extraStrong focus-visible:aurora-shadow-[0_0_0_3px_var(--a-brand-300)]', isDragging ? '!aurora-border-[6px] !aurora-border-primary hover:aurora-border-primary aurora-cursor-grabbing focus-visible:aurora-shadow-none' : 'aurora-border aurora-border-strong hover:aurora-border-extraStrong aurora-cursor-grab hover:aurora-cursor-grab'))
+  })), /*#__PURE__*/React__default.createElement(TooltipContent, {
+    variant: "dark",
+    side: "top",
+    sideOffset: 8
+  }, currentValue)))), withInput && (/*#__PURE__*/React__default.createElement(SliderInput, {
+    value: currentValue,
+    min: min,
+    max: max,
+    step: step,
+    suffix: suffix,
+    disabled: disabled,
+    onValueChange: updateValue,
+    onValueCommit: commitValue
+  })));
+});
+Slider.displayName = 'Slider';
+
+export { Slider };
+//# sourceMappingURL=slider.js.map

package/build/esm/packages/aurora/src/components/slider/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA,0CAA0C,kEAAsE;AAChH,wBAAwB,mEAAuE;AAC/F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/slider/slider_constants.d.ts

@@ -0,0 +1 @@
+export declare const SLIDER_INPUT_LENGTH = 3;

package/build/esm/packages/aurora/src/components/slider/slider_constants.js

@@ -0,0 +1,4 @@
+var SLIDER_INPUT_LENGTH = 3;
+
+export { SLIDER_INPUT_LENGTH };
+//# sourceMappingURL=slider_constants.js.map

package/build/esm/packages/aurora/src/components/slider/slider_constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/slider/slider_types.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import * as SliderPrimitive from '@radix-ui/react-slider';
+export interface TSliderProps extends Omit<React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, 'value' | 'defaultValue' | 'onValueChange' | 'onValueCommit'> {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    onValueCommit?: (value: number) => void;
+    showTooltip?: boolean;
+    withInput?: boolean;
+    suffix?: string;
+    wrapperClassName?: string;
+}

package/build/esm/packages/aurora/src/components/slider/slider_types.js

@@ -0,0 +1,2 @@
+import '@radix-ui/react-slider';
+//# sourceMappingURL=slider_types.js.map

package/build/esm/packages/aurora/src/components/slider/slider_types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider_types.js","sourceRoot":"","sources":["../../../../../../../src/components/slider/slider_types.ts"],"names":[],"mappings":"AAAA,OAAiC,wBAAwB,CAAC"}

package/build/esm/packages/aurora/src/components/time_picker/components/time_picker_input.js

@@ -1,6 +1,6 @@
 import React__default from 'react';
-import { PopoverTrigger } from '../../popover/components/popover_trigger.js';
 import { Input } from '../../input/input.js';
+import { PopoverTrigger } from '../../popover/components/popover_trigger.js';
 import { InputMask } from '../../input_mask/input_mask.js';
 import { TimeLineIcon } from '../../../assets/icons/time_line_icon.js';
 import { TimePickerUtils } from '../time_picker_utils.js';

package/build/esm/packages/aurora/src/index.d.ts

@@ -31,6 +31,8 @@ export { SidebarToggle } from "./components/sidebar/components/sidebar_toggle";
 export { useSidebar } from './components/sidebar/hooks/use_sidebar';
 export { SidebarCloseButton } from "./components/sidebar/components/sidebar_close_button";
 export { SIDEBAR_SIDE, SIDEBAR_VARIANTS } from "./components/sidebar/sidebar_constants";
+export { Slider } from "./components/slider/slider";
+export { TSliderProps } from "./components/slider/slider_types";
 export { Divider } from './components/divider/divider';
 export { DIVIDER_VARIANTS, DIVIDER_THICKNESS, DIVIDER_ORIENTATION } from "./components/divider/divider_constants";
 export { Stack } from './components/stack/stack';

package/build/esm/packages/aurora/src/index.js

@@ -53,9 +53,11 @@ export { SidebarToggle } from './components/sidebar/components/sidebar_toggle.js
 export { SidebarCloseButton } from './components/sidebar/components/sidebar_close_button.js';
 export { Tooltip } from './components/tooltip/tooltip.js';
 export { TOOLTIP_VARIANT_TYPES } from './components/tooltip/tooltip_constants.js';
-export { TooltipTrigger } from './components/tooltip/components/tooltip_trigger.js';
 export { TooltipContent } from './components/tooltip/components/tooltip_content.js';
 export { TooltipProvider } from './components/tooltip/context/tooltip_provider.js';
+export { Input } from './components/input/input.js';
+export { Slider } from './components/slider/slider.js';
+export { TooltipTrigger } from './components/tooltip/components/tooltip_trigger.js';
 export { SEGMENTED_CONTROL_SIZE_TYPES, SEGMENTED_CONTROL_TYPE, SEGMENTED_CONTROL_VARIANT_TYPES } from './components/segmented_control/segmented_control_constants.js';
 export { SegmentedControl } from './components/segmented_control/segmented_control.js';
 export { SegmentedControlItem } from './components/segmented_control/components/segmented_control_item.js';
@@ -90,7 +92,6 @@ export { TAG_VARIANTS } from './components/tag/tag_constants.js';
 export { Tag } from './components/tag/tag.js';
 export { Switch } from './components/switch/switch.js';
 export { SwitchControl } from './components/controls/switch_control/switch_control.js';
-export { Input } from './components/input/input.js';
 export { InputControl } from './components/controls/input_control/input_control.js';
 export { InputMask } from './components/input_mask/input_mask.js';
 export { GRADIENT_TYPES } from './components/color_picker/color_picker_constants.js';

package/build/esm/packages/aurora/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}