Feat:New Component - Time Picker

[aquamarine-z]

Time Picker

Background

There are a lot of situations that we need to let the users to select a time period, but there is only Calendar Component to select time or time period connecting to the date.So I want to add a component that can select the time

Docs

I already add the docs page for my Time Picker Component.

Description

The Time Picker is a group of sliders which uses the TimePickerContext to share the total time(milliseconds). The TimePickerContainer provides the total times added by all Time Pickers inside the container. And each TimePick needs a prop called timeMilliseconds meaning how many milliseconds will be added when the slider value add 1(e.g. 1000 for Seconds TimePicker, 1000*60 for Minute TimePicker).
You can also control the TimePicker value with a value(number) state in you component. There is a callback(onValueChange) to update your value

Usage

import {useState} from "react";
const [time,setTime]=useState(0)
return <TimePickerContainer onTimeChange={(v)=>setTime(v)}>
    <TimePicker
        timeMilliseconds={1}
        minValue={0}
        maxValue={1000}
        prefixLabel={<span>Milliseconds:</span>}
        suffixLabel={<span>ms</span>}
        step={1}
        onValueChange={(value)=>console.log("Time value change to : "+value)}
    />
</TimePickerContainer >

To Repo Managers

It is my first time to send PR in this repo, if I made some mistakes or my code needs to improve, I'll appreciate that if you can tell me my problems in my code to help my improve my code

[vercel]

@aquamarine-z is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

[Jacksonmills]

I am not sure I find sliders like this very intuitive for picking a time, maybe something closer to this: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time

[aquamarine-z]

Ok, it seems to be not so intuitive for picking a time, maybe I will try to find a better UI of Time Picker. But the function of Time Picker may be better than (I think), it can choose a time range given by users freely. I will continue to improve it