Duration Picker

1'use client'
2 
3import { Slot } from '@radix-ui/react-slot'
4import { getSvgPath } from 'figma-squircle'
5import { interpolate } from 'flubber'
6import { motion, useMotionValue, useReducedMotion, useSpring, useTransform, useVelocity, type MotionStyle, type MotionValue } from 'motion/react'
7import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'
8import useMeasure from 'react-use-measure'
9 
10import { cn } from '@/lib/utils'
11 
12const PEN_PATH = 'M3.78181 16.3092L3 21L7.69086 20.2182C8.50544 20.0825 9.25725 19.6956 9.84119 19.1116L20.4198 8.53288C21.1934 7.75922 21.1934 6.5049 20.4197 5.73126L18.2687 3.58024C17.495 2.80658 16.2406 2.80659 15.4669 3.58027L4.88841 14.159C4.30447 14.7429 3.91757 15.4947 3.78181 16.3092Z'
13const TICK_PATH = 'M7.959 20.513L1.592 12.872L3.128 11.592L8.041 17.487L20.947 3.587L22.413 4.948L7.959 20.513Z'
14 
15const OPEN_GAP = 8
16const CORNER_RADIUS = 12
17const GAP_SPRING = { stiffness: 200, damping: 28, mass: 1 }
18const ICON_SPRING = { stiffness: 200, damping: 28 }
19const WIDTH_SPRING = { stiffness: 250, damping: 31 }
20const SWAY_SPRING = { stiffness: 200, damping: 24 }
21const ERROR_SPRING = { stiffness: 700, damping: 9 }
22 
23export type DurationValue = {
24    hours: number
25    minutes: number
26}
27 
28export type DurationPickerProps = Omit<
29    React.ComponentProps<'div'>,
30    'onChange' | 'defaultValue' | 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onAnimationStart' | 'onAnimationEnd'
31> & {
32    value?: DurationValue
33    defaultValue?: DurationValue
34    onChange?: (value: DurationValue) => void
35    onConfirm?: (value: DurationValue) => void
36    onEditingChange?: (editing: boolean) => void
37    defaultEditing?: boolean
38    maxHours?: number
39    maxMinutes?: number
40    hoursLabel?: string
41    minutesLabel?: string
42    disabled?: boolean
43}
44 
45type SquircleSegmentProps = {
46    asChild?: boolean
47    cornerSmoothing?: number
48    leftRadius: number | MotionValue<number>
49    rightRadius: number | MotionValue<number>
50    className?: string
51    style?: MotionStyle
52    children: React.ReactNode
53}
54 
55const MotionSlot = motion.create(Slot)
56 
57const radiusValue = (radius: number | MotionValue<number>) =>
58    typeof radius === 'number' ? radius : radius.get()
59 
60const SquircleSegment = ({ asChild, cornerSmoothing = 1, leftRadius, rightRadius, className, style, children }: SquircleSegmentProps) => {
61    const Component = asChild ? MotionSlot : motion.div
62    const [ref, bounds] = useMeasure()
63    const width = useMotionValue(0)
64    const height = useMotionValue(0)
65 
66// … truncated