@tremolo-ui/react 0.0.2 → 0.0.4

package/src/components/Slider/index.tsx

@@ -0,0 +1,326 @@
+import { css, CSSObject, Global } from '@emotion/react'
+import {
+  Direction,
+  gradientDirection,
+  isHorizontal,
+  isReversed,
+  isVertical,
+  parseScaleOrderList,
+  ScaleOrderList,
+  ScaleType,
+} from '@tremolo-ui/functions/Slider'
+import { clamp, normalizeValue, rawValue, stepValue } from '@tremolo-ui/functions'
+import { WheelOption } from '@tremolo-ui/functions'
+import { styleHelper } from '@tremolo-ui/functions'
+import React, { ReactElement, useRef } from 'react'
+import clsx from 'clsx'
+
+import { useEventListener } from '../../hooks/useEventListener'
+import { useRefCallbackEvent } from '../../hooks/useRefCallbackEvent'
+import { UserActionPseudoProps } from '../../system/pseudo'
+
+import { SliderThumb } from './Thumb'
+import { SliderTrack } from './Track'
+import { ScaleOption } from './type'
+
+interface SliderProps {
+  // required
+  value: number
+  min: number
+  max: number
+
+  // optional
+  step?: number
+  skew?: number // | SkewFunction
+  length?: number | string
+  thickness?: number | string
+  direction?: Direction
+  scale?: ['step', ScaleType] | [number, ScaleType] | ScaleOrderList[]
+  scaleOption?: ScaleOption
+  color?: string
+  bg?: string
+  bodyNoSelect?: boolean
+  enableWheel?: WheelOption
+  className?: string
+  style?: CSSObject
+  onChange?: (value: number) => void
+  children?: ReactElement | ReactElement[]
+  // ReactElement<typeof SliderThumb, typeof SliderTrack>[]
+}
+
+/**
+ * Customizable slider
+ */
+export function Slider({
+  value,
+  min,
+  max,
+  step = 1,
+  skew = 1,
+  length = 140,
+  thickness = 10,
+  direction = 'right',
+  scale,
+  scaleOption,
+  color = '#4e76e6',
+  bg = '#eee',
+  className,
+  style,
+  bodyNoSelect = true,
+  enableWheel,
+  onChange,
+  children,
+  ...pseudo
+}: SliderProps & UserActionPseudoProps) {
+  // -- state and ref ---
+  const trackElementRef = useRef<HTMLDivElement>(null)
+
+  // --- interpret props ---
+  const { _active, _focus, _hover } = pseudo
+  const percent = normalizeValue(value, min, max, skew) * 100
+  const percentRev = isReversed(direction) ? 100 - percent : percent
+
+  const scalesList = parseScaleOrderList(scale, min, max, step)
+  if (isReversed(direction)) scalesList.reverse()
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let trackProps: any
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let thumbProps: any
+  if (children != undefined) {
+    React.Children.forEach(children, (child) => {
+      if (React.isValidElement(child)) {
+        if (child.type == SliderThumb) {
+          thumbProps = child.props
+        } else if (child.type == SliderTrack) {
+          trackProps = child.props
+        } else {
+          throw new Error('only <SliderThumb> or <SliderTrack>')
+        }
+      } else {
+        throw new Error('children is an invalid element.')
+      }
+    })
+  }
+
+  const thumbDragged = useRef(false)
+  const handleValue = (
+    event: MouseEvent | React.PointerEvent<HTMLDivElement> | TouchEvent,
+  ) => {
+    if (!trackElementRef.current || !thumbDragged.current) return
+    const isTouch = event instanceof TouchEvent
+    if (isTouch && event.cancelable) event.preventDefault()
+    if (bodyNoSelect) document.body.classList.add('no-select')
+    const {
+      left: x1,
+      top: y1,
+      right: x2,
+      bottom: y2,
+    } = trackElementRef.current.getBoundingClientRect()
+    const mouseX = isTouch ? event.touches[0].clientX : event.clientX
+    const mouseY = isTouch ? event.touches[0].clientY : event.clientY
+    const n = isHorizontal(direction)
+      ? normalizeValue(mouseX, x1, x2)
+      : normalizeValue(mouseY, y1, y2)
+    const v = rawValue(isReversed(direction) ? 1 - n : n, min, max, skew)
+    const v2 = clamp(stepValue(v, step), min, max)
+    if (onChange) onChange(v2)
+  }
+
+  // --- hooks ---
+  const touchMoveRefCallback = useRefCallbackEvent(
+    'touchmove',
+    handleValue,
+    { passive: false },
+    [min, max, skew, step, direction, onChange],
+  )
+
+  const wheelRefCallback = useRefCallbackEvent(
+    'wheel',
+    (event) => {
+      if (!enableWheel) return
+      event.preventDefault()
+      let x = event.deltaY > 0 ? enableWheel[1] : -enableWheel[1]
+      if (isReversed(direction) || isHorizontal(direction)) x *= -1
+      let v
+      if (enableWheel[0] == 'normalized') {
+        const n = normalizeValue(value, min, max, skew)
+        v = rawValue(n + x, min, max, skew)
+      } else {
+        v = value + x
+      }
+      if (onChange) onChange(clamp(stepValue(v, step), min, max))
+    },
+    {
+      passive: false,
+    },
+    [enableWheel, value, min, max, skew, step],
+  )
+
+  useEventListener(window, 'mousemove', (event) => {
+    handleValue(event)
+  })
+
+  useEventListener(window, 'mouseup', () => {
+    thumbDragged.current = false
+    if (bodyNoSelect) document.body.classList.remove('no-select')
+  })
+
+  return (
+    <div
+      className={clsx('tremolo-slider', className)}
+      ref={(div) => {
+        wheelRefCallback(div)
+        touchMoveRefCallback(div)
+      }}
+      tabIndex={-1}
+      role="slider"
+      aria-valuenow={value}
+      aria-valuemax={max}
+      aria-valuemin={min}
+      aria-orientation={isHorizontal(direction) ? 'horizontal' : 'vertical'}
+      css={css({
+        display: 'inline-block',
+        boxSizing: 'border-box',
+        margin: '0.7rem',
+        padding: 0,
+        cursor: 'pointer',
+        ...style,
+      })}
+      onPointerDown={(event) => {
+        thumbDragged.current = true
+        handleValue(event)
+      }}
+    >
+      <Global
+        styles={{
+          '.no-select': {
+            userSelect: 'none',
+          },
+        }}
+      />
+      <div
+        css={css({
+          display: 'flex',
+          flexDirection: isHorizontal(direction) ? 'column' : 'row',
+        })}
+      >
+        {/* trackProps */}
+        <div
+          className="tremolo-slider-track-wrapper"
+          ref={trackElementRef}
+          css={css({ position: 'relative' })}
+        >
+          <SliderTrack
+            __css={{
+              background: `linear-gradient(to ${gradientDirection(direction)}, ${color} ${percent}%, ${bg} ${percent}%)`,
+              borderRadius: styleHelper(thickness, '/', 2),
+              borderStyle: 'solid',
+              borderColor: '#ccc',
+              borderWidth: 2,
+              width: isHorizontal(direction) ? length : thickness,
+              height: isHorizontal(direction) ? thickness : length,
+              zIndex: 1,
+            }}
+            {...trackProps}
+          />
+          <SliderThumb
+            color={color}
+            __css={{
+              top: isHorizontal(direction) ? '50%' : `${percentRev}%`,
+              left: isHorizontal(direction) ? `${percentRev}%` : '50%',
+            }}
+            {...thumbProps}
+          />
+        </div>
+        {scale && (
+          <div
+            className="tremolo-slider-scale-wrapper"
+            css={css({
+              position: 'relative',
+              width: isHorizontal(direction) ? length : undefined,
+              height: isVertical(direction) ? length : undefined,
+              marginLeft: isHorizontal(direction)
+                ? 2
+                : (scaleOption?.gap ??
+                  `calc((1.4rem - ${styleHelper(thickness)}) / 2)`),
+              marginTop: isVertical(direction)
+                ? 2
+                : (scaleOption?.gap ??
+                  `calc((1.4rem - ${styleHelper(thickness)}) / 2)`),
+              ...scaleOption?.style,
+              // zIndex: 10,
+            })}
+          >
+            {scalesList.map((item, index) => (
+              <div
+                key={index}
+                css={css({
+                  display: 'flex',
+                  flexDirection: isHorizontal(direction) ? 'column' : 'row',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  position: 'absolute',
+                  left: isHorizontal(direction)
+                    ? `${
+                        isReversed(direction)
+                          ? 100 - normalizeValue(item.at, min, max, skew) * 100
+                          : normalizeValue(item.at, min, max, skew) * 100
+                      }%`
+                    : undefined,
+                  top: isVertical(direction)
+                    ? `${
+                        isReversed(direction)
+                          ? 100 - normalizeValue(item.at, min, max, skew) * 100
+                          : normalizeValue(item.at, min, max, skew) * 100
+                      }%`
+                    : undefined,
+                  translate: isHorizontal(direction) ? '-50% 0' : '0 -50%',
+                  zIndex: 10,
+                })}
+              >
+                {(item.type ?? scaleOption?.defaultType ?? 'mark-number') !=
+                  'number' && (
+                  <div
+                    className="tremolo-slider-scale-mark"
+                    css={css({
+                      width: isHorizontal(direction)
+                        ? (item.style?.thickness ?? 1)
+                        : (item.style?.length ?? '0.5rem'),
+                      height: isVertical(direction)
+                        ? (item.style?.thickness ?? 1)
+                        : (item.style?.length ?? '0.5rem'),
+                      backgroundColor:
+                        item.style?.markColor ??
+                        scaleOption?.markColor ??
+                        '#222',
+                      marginBottom: isHorizontal(direction) ? 2 : undefined,
+                      marginRight: isVertical(direction) ? 2 : undefined,
+                    })}
+                  ></div>
+                )}
+                {(item.type ?? scaleOption?.defaultType ?? 'mark-number') !=
+                  'mark' && (
+                  <div
+                    className="tremolo-slider-scale-number"
+                    css={css({
+                      color: item.style?.labelColor ?? scaleOption?.labelColor,
+                      width: scaleOption?.labelWidth,
+                      textAlign: 'right',
+                    })}
+                  >
+                    {item.text ?? item.at}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export * from './Thumb'
+export * from './Track'
+export * from './type'

package/src/components/Slider/type.ts

@@ -0,0 +1,16 @@
+import { CSSObject } from '@emotion/react'
+
+import type { ScaleOption as Opt } from '@tremolo-ui/functions/Slider'
+
+export type ScaleOption = Opt & {
+  style?: CSSObject
+}
+
+export {
+  type Direction,
+  type Horizontal,
+  type ScaleOrderList,
+  type ScaleType,
+  type Vertical,
+  gradientDirection
+} from '@tremolo-ui/functions/Slider'

package/src/hooks/useCallbackRef.ts

@@ -0,0 +1,20 @@
+import { useCallback, useInsertionEffect, useRef } from 'react'
+
+/**
+ * This hook is user-land implementation of the experimental `useEffectEvent` hook.
+ * React docs: https://react.dev/learn/separating-events-from-effects#declaring-an-effect-event
+ */
+export function useCallbackRef<Args extends unknown[], Return>(
+  callback: ((...args: Args) => Return) | undefined,
+  deps: React.DependencyList = [],
+) {
+  const callbackRef = useRef<typeof callback>(() => {
+    throw new Error('Cannot call an event handler while rendering.')
+  })
+
+  useInsertionEffect(() => {
+    callbackRef.current = callback
+  })
+
+  return useCallback((...args: Args) => callbackRef.current?.(...args), deps)
+}

package/src/hooks/useEventListener.ts

@@ -0,0 +1,49 @@
+import { useEffect } from 'react'
+
+import { useCallbackRef } from './useCallbackRef'
+
+type Target = EventTarget | null | (() => EventTarget | null)
+type Options = boolean | AddEventListenerOptions
+
+export function useEventListener<K extends keyof DocumentEventMap>(
+  target: Target,
+  event: K,
+  handler?: (event: DocumentEventMap[K]) => void,
+  options?: Options,
+): VoidFunction
+export function useEventListener<K extends keyof WindowEventMap>(
+  target: Target,
+  event: K,
+  handler?: (event: WindowEventMap[K]) => void,
+  options?: Options,
+): VoidFunction
+export function useEventListener<K extends keyof GlobalEventHandlersEventMap>(
+  target: Target,
+  event: K,
+  handler?: (event: GlobalEventHandlersEventMap[K]) => void,
+  options?: Options,
+): VoidFunction
+export function useEventListener(
+  target: Target,
+  event: string,
+  handler: ((event: Event) => void) | undefined,
+  options?: Options,
+) {
+  const listener = useCallbackRef(handler)
+
+  useEffect(() => {
+    const node = typeof target === 'function' ? target() : (target ?? document)
+
+    if (!handler || !node) return
+
+    node.addEventListener(event, listener, options)
+    return () => {
+      node.removeEventListener(event, listener, options)
+    }
+  }, [event, target, options, listener, handler])
+
+  return () => {
+    const node = typeof target === 'function' ? target() : (target ?? document)
+    node?.removeEventListener(event, listener, options)
+  }
+}

package/src/hooks/useRefCallbackEvent.ts

@@ -0,0 +1,32 @@
+import { useMemo } from 'react'
+
+type Options = boolean | AddEventListenerOptions
+type CallbackFunc = (div: EventTarget | null) => void
+
+export function useRefCallbackEvent<K extends keyof DocumentEventMap>(
+  event: K,
+  handler: (event: DocumentEventMap[K]) => void,
+  options?: Options,
+  deps?: React.DependencyList,
+): CallbackFunc
+export function useRefCallbackEvent(
+  event: string,
+  handler: (event: Event) => void,
+  options?: Options,
+  deps: React.DependencyList = [],
+): CallbackFunc {
+  return useMemo(() => {
+    let cleanup: (() => void) | undefined
+    return (node: EventTarget | null) => {
+      if (!node) {
+        cleanup?.()
+        return
+      }
+      node.addEventListener(event, handler, options)
+
+      cleanup = () => {
+        node.removeEventListener(event, handler, options)
+      }
+    }
+  }, deps)
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './components/AnimationCanvas'
+export * from './components/Knob'
+export * from './components/NumberInput'
+export * from './components/Slider'

package/src/styles/variables.css

@@ -0,0 +1,4 @@
+:root {
+  --tremolo-theme-color: #4e76e6;
+  --tremolo-theme-color-rgb: 78, 118, 230;
+}

package/src/system/pseudo.ts

@@ -0,0 +1,55 @@
+import { CSSObject } from '@emotion/react'
+
+function _toPropName(str: string) {
+  return str.replace(/-\w/, (s) => s.toUpperCase()).replace(/^::?/, '_')
+}
+
+// ref. https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-classes
+
+export const inputPseudoSelectors = [
+  '&:enabled',
+  '&:disabled',
+  '&:read-only',
+  '&:read-write',
+  '&:placeholder-shown',
+  '&:blank',
+  '&:valid',
+  '&:invalid',
+  '&:in-range',
+  '&:out-of-range',
+] as const
+
+export const inputPseudoPropNames = [
+  '_enabled',
+  '_disabled',
+  '_readOnly',
+  '_readWrite',
+  '_placeholderShown',
+  '_blank',
+  '_valid',
+  '_invalid',
+  '_inRange',
+  '_outOfRange',
+] as const
+
+export type InputPseudos = (typeof inputPseudoPropNames)[number]
+export type InputPseudoProps = Partial<{
+  [key in InputPseudos]: CSSObject
+}>
+
+export const userActionPseudoSelectors = [
+  '&:hover',
+  '&:active',
+  '&:focus',
+] as const
+
+export const userActionPseudoPropNames = [
+  '_hover',
+  '_active',
+  '_focus',
+] as const
+
+export type UserActionPseudos = (typeof userActionPseudoPropNames)[number]
+export type UserActionPseudoProps = Partial<{
+  [key in UserActionPseudos]: CSSObject
+}>

package/dist/cjs/index.d.ts

@@ -1,75 +0,0 @@
-export * from 'common/math';
-import { WheelOption } from 'common/types';
-export * from 'common/types';
-import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
-import { CSSObject } from '@emotion/react';
-import React, { ReactElement } from 'react';
-import { ScaleOption as ScaleOption$1, Direction, ScaleType, ScaleOrderList } from 'common/components/Slider/type';
-
-declare const userActionPseudoPropNames: readonly ["_hover", "_active", "_focus"];
-type UserActionPseudos = (typeof userActionPseudoPropNames)[number];
-type UserActionPseudoProps = Partial<{
-    [key in UserActionPseudos]: CSSObject;
-}>;
-
-interface KnobProps {
-    value: number;
-    min: number;
-    max: number;
-    defaultValue?: number;
-    startValue?: number;
-    step?: number;
-    skew?: number;
-    size?: number | `${number}%`;
-    width?: number | `${number}%`;
-    height?: number | `${number}%`;
-    options?: {
-        active?: string;
-        inactive?: string;
-        bg?: string;
-        thumb?: string;
-        lineWeight?: number;
-        thumbWeight?: number;
-    };
-    cursor?: string;
-    style?: CSSObject;
-    bodyNoSelect?: boolean;
-    enableWheel?: WheelOption;
-    enableDoubleClickDefault?: boolean;
-    onChange?: (value: number) => void;
-}
-/**
- * simple rotary Knob.
- */
-declare function Knob({ value, min, max, defaultValue, startValue, step, skew, size, width, height, options, cursor, style, bodyNoSelect, enableWheel, enableDoubleClickDefault, onChange, _active, _focus, _hover, ...props }: KnobProps & UserActionPseudoProps & Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, 'onChange'>): _emotion_react_jsx_runtime.JSX.Element;
-
-type ScaleOption = ScaleOption$1 & {
-    style?: CSSObject;
-};
-
-interface SliderProps {
-    value: number;
-    min: number;
-    max: number;
-    step?: number;
-    skew?: number;
-    length?: number | string;
-    thickness?: number | string;
-    direction?: Direction;
-    scale?: ['step', ScaleType] | [number, ScaleType] | ScaleOrderList[];
-    scaleOption?: ScaleOption;
-    color?: string;
-    bg?: string;
-    bodyNoSelect?: boolean;
-    enableWheel?: WheelOption;
-    className?: string;
-    style?: CSSObject;
-    onChange?: (value: number) => void;
-    children?: ReactElement | ReactElement[];
-}
-/**
- * Customizable slider
- */
-declare function Slider({ value, min, max, step, skew, length, thickness, direction, scale, scaleOption, color, bg, className, style, bodyNoSelect, enableWheel, onChange, children, ...pseudo }: SliderProps & UserActionPseudoProps): _emotion_react_jsx_runtime.JSX.Element;
-
-export { Knob, Slider };

package/dist/cjs/types/src/components/AnimationCanvas/canvas.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"canvas.d.ts","sourceRoot":"","sources":["../../../../packages/react/src/components/AnimationCanvas/canvas.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,YAAY,gSAmBf,CAAA;AAEV,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AACxD,MAAM,MAAM,iBAAiB,GAAG,wBAAwB,CAAC,YAAY,CAAC,CAAA;AACtE,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,wBAAwB,EAAE,YAAY,CAAC,CAAA;AAEzE,wBAAgB,cAAc,CAAC,GAAG,EAAE,OAAO,GAAG,GAAG,IAAI,YAAY,CAGhE"}

package/dist/cjs/types/src/components/AnimationCanvas/index.d.ts

@@ -1,20 +0,0 @@
-import { CSSObject } from '@emotion/react';
-import { MutableRefObject } from 'react';
-type DrawFunc = (context: CanvasRenderingContext2D, width: MutableRefObject<number>, height: MutableRefObject<number>, count: number) => void;
-interface AnimationCanvasProps {
-    width?: number;
-    height?: number;
-    relativeSize?: boolean;
-    /** only available relativeSize=true */
-    reduceFlickering?: boolean;
-    options?: CanvasRenderingContext2DSettings;
-    style?: CSSObject;
-    init?: DrawFunc;
-    draw: DrawFunc;
-}
-/**
- * A simple animatable canvas with requestAnimationFrame()
- */
-export declare function AnimationCanvas({ width, height, style, relativeSize, reduceFlickering, options, init, draw, ...props }: AnimationCanvasProps & Omit<React.ClassAttributes<HTMLCanvasElement> & React.CanvasHTMLAttributes<HTMLCanvasElement>, 'ref' | 'width' | 'height' | 'style'>): import("@emotion/react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=index.d.ts.map

package/dist/cjs/types/src/components/AnimationCanvas/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../packages/react/src/components/AnimationCanvas/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAE,gBAAgB,EAAqB,MAAM,OAAO,CAAA;AAkB3D,KAAK,QAAQ,GAAG,CACd,OAAO,EAAE,wBAAwB,EACjC,KAAK,EAAE,gBAAgB,CAAC,MAAM,CAAC,EAC/B,MAAM,EAAE,gBAAgB,CAAC,MAAM,CAAC,EAChC,KAAK,EAAE,MAAM,KACV,IAAI,CAAA;AAET,UAAU,oBAAoB;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,uCAAuC;IACvC,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,OAAO,CAAC,EAAE,gCAAgC,CAAA;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,IAAI,EAAE,QAAQ,CAAA;CACf;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,EAC9B,KAAW,EACX,MAAY,EACZ,KAAK,EACL,YAAoB,EACpB,gBAAuB,EACvB,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,oBAAoB,GACrB,IAAI,CACF,KAAK,CAAC,eAAe,CAAC,iBAAiB,CAAC,GACtC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC/C,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CACrC,oDA6GF"}

package/dist/cjs/types/src/components/Knob/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../packages/react/src/components/Knob/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,SAAS,EAAU,MAAM,gBAAgB,CAAA;AAEvD,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAC1C,OAAO,KAAiB,MAAM,OAAO,CAAA;AAIrC,OAAO,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAA;AAG3D,UAAU,SAAS;IAEjB,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IAGX,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,CAAA;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,CAAA;IAC7B,MAAM,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,CAAA;IAC9B,OAAO,CAAC,EAAE;QACR,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,EAAE,CAAC,EAAE,MAAM,CAAA;QACX,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,WAAW,CAAC,EAAE,MAAM,CAAA;KACrB,CAAA;IAQD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,wBAAwB,CAAC,EAAE,OAAO,CAAA;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC;AAWD;;GAEG;AACH,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,GAAG,EACH,GAAG,EACH,YAAkB,EAClB,UAAgB,EAChB,IAAQ,EACR,IAAQ,EACR,IAAI,EACJ,KAAU,EACV,MAAW,EACX,OAAwB,EAExB,MAAkB,EAClB,KAAK,EACL,YAAmB,EACnB,WAAW,EACX,wBAA+B,EAC/B,QAAQ,EACR,OAAO,EACP,MAAM,EACN,MAAM,EACN,GAAG,KAAK,EACT,EAAE,SAAS,GACV,qBAAqB,GACrB,IAAI,CACF,KAAK,CAAC,eAAe,CAAC,cAAc,CAAC,GACnC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACtC,UAAU,CACX,oDA6LF"}

package/dist/cjs/types/src/components/NumberInput/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../packages/react/src/components/NumberInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAc,KAAK,EAAE,MAAM,oCAAoC,CAAA;AACtE,OAAO,EAAE,WAAW,EAAY,MAAM,OAAO,CAAA;AAE7C,OAAO,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAA;AAE7E,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IAEtB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IAGb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAA;IAEtB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,eAAe,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAA;IAC3C,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACxE,OAAO,CAAC,EAAE,CACR,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,EAAE,OAAO,CAAC,KAC/C,IAAI,CAAA;IACT,MAAM,CAAC,EAAE,CACP,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,EAAE,OAAO,CAAC,KAC/C,IAAI,CAAA;CACV;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,GAAG,EAAE,OAAO;AACZ,GAAG,EAAE,OAAO;AACZ,IAAI,EAAE,OAAO;AACb,KAAK,EACL,QAAgB,EAChB,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,MAAc,EACd,KAAK,EACL,eAAwB,EACxB,aAAoB,EACpB,SAAS,EACT,KAAK,EACL,QAAQ,EACR,OAAO,EACP,MAAM,EACN,GAAG,MAAM,EACV,EAAE,gBAAgB,GAAG,qBAAqB,GAAG,gBAAgB,oDA6E7D"}

package/dist/cjs/types/src/components/Slider/Thumb.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Thumb.d.ts","sourceRoot":"","sources":["../../../../packages/react/src/components/Slider/Thumb.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAO,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAE/C,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,GACN,EAAE,gBAAgB,GAAG,YAAY,CAgCjC"}

package/dist/cjs/types/src/components/Slider/Track.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Track.d.ts","sourceRoot":"","sources":["../../../../packages/react/src/components/Slider/Track.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAEpC,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,CAAC,EAAE,YAAY,CAAA;IACvB,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,KAAK,EACL,KAAK,GACN,EAAE,gBAAgB,GAAG,YAAY,CAMjC"}

package/dist/cjs/types/src/components/Slider/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../packages/react/src/components/Slider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,SAAS,EAAU,MAAM,gBAAgB,CAAA;AACvD,OAAO,EACL,SAAS,EAMT,cAAc,EACd,SAAS,EACV,MAAM,+BAA+B,CAAA;AAEtC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAE1C,OAAc,EAAE,YAAY,EAAU,MAAM,OAAO,CAAA;AAInD,OAAO,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAA;AAI3D,OAAO,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAA;AAEpC,UAAU,WAAW;IAEnB,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IAGX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,cAAc,EAAE,CAAA;IACpE,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,QAAQ,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAA;CAEzC;AAED;;GAEG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,GAAG,EACH,GAAG,EACH,IAAQ,EACR,IAAQ,EACR,MAAY,EACZ,SAAc,EACd,SAAmB,EACnB,KAAK,EACL,WAAW,EACX,KAAiB,EACjB,EAAW,EACX,SAAS,EACT,KAAK,EACL,YAAmB,EACnB,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,GAAG,MAAM,EACV,EAAE,WAAW,GAAG,qBAAqB,oDAwPrC;AAED,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AACrC,cAAc,+BAA+B,CAAA"}

package/dist/cjs/types/src/components/Slider/type.d.ts

@@ -1,6 +0,0 @@
-import { CSSObject } from '@emotion/react';
-import type { ScaleOption as Opt } from 'common/components/Slider/type';
-export type ScaleOption = Opt & {
-    style?: CSSObject;
-};
-//# sourceMappingURL=type.d.ts.map

package/dist/cjs/types/src/components/Slider/type.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../../packages/react/src/components/Slider/type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE1C,OAAO,KAAK,EAAE,WAAW,IAAI,GAAG,EAAE,MAAM,+BAA+B,CAAA;AAEvE,MAAM,MAAM,WAAW,GAAG,GAAG,GAAG;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,CAAA"}

package/dist/cjs/types/src/hooks/useCallbackRef.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useCallbackRef.d.ts","sourceRoot":"","sources":["../../../packages/react/src/hooks/useCallbackRef.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,wBAAgB,cAAc,CAAC,IAAI,SAAS,OAAO,EAAE,EAAE,MAAM,EAC3D,QAAQ,EAAE,CAAC,CAAC,GAAG,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC,GAAG,SAAS,EACjD,IAAI,GAAE,KAAK,CAAC,cAAmB,aAUF,IAAI,wBAClC"}

package/dist/cjs/types/src/hooks/useEventListener.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useEventListener.d.ts","sourceRoot":"","sources":["../../../packages/react/src/hooks/useEventListener.ts"],"names":[],"mappings":"AAIA,KAAK,MAAM,GAAG,WAAW,GAAG,IAAI,GAAG,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,CAAA;AAC7D,KAAK,OAAO,GAAG,OAAO,GAAG,uBAAuB,CAAA;AAEhD,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,gBAAgB,EAC/D,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,CAAC,EACR,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK,IAAI,EAC9C,OAAO,CAAC,EAAE,OAAO,GAChB,YAAY,CAAA;AACf,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,cAAc,EAC7D,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,CAAC,EACR,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,IAAI,EAC5C,OAAO,CAAC,EAAE,OAAO,GAChB,YAAY,CAAA;AACf,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,2BAA2B,EAC1E,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,CAAC,EACR,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,2BAA2B,CAAC,CAAC,CAAC,KAAK,IAAI,EACzD,OAAO,CAAC,EAAE,OAAO,GAChB,YAAY,CAAA"}

package/dist/cjs/types/src/hooks/useRefCallbackEvent.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useRefCallbackEvent.d.ts","sourceRoot":"","sources":["../../../packages/react/src/hooks/useRefCallbackEvent.ts"],"names":[],"mappings":"AAEA,KAAK,OAAO,GAAG,OAAO,GAAG,uBAAuB,CAAA;AAChD,KAAK,YAAY,GAAG,CAAC,GAAG,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;AAErD,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,MAAM,gBAAgB,EAClE,KAAK,EAAE,CAAC,EACR,OAAO,EAAE,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK,IAAI,EAC7C,OAAO,CAAC,EAAE,OAAO,EACjB,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,GAC1B,YAAY,CAAA"}

package/dist/cjs/types/src/index.d.ts

@@ -1,5 +0,0 @@
-export * from 'common/math';
-export type * from 'common/types';
-export { Knob } from './components/Knob';
-export { Slider } from './components/Slider';
-//# sourceMappingURL=index.d.ts.map