feat: TimePicker を追加 (#4821)

* feat: TimePicker を追加

* fix: FormControl に紐づくように修正

* fix: 強制カラーモードで余計な装飾が出ないように修正

Author: uknmr

packages/smarthr-ui/src/components/FormControl/FormControl.tsx

@@ -21,6 +21,7 @@ import { Select } from '../Select'
 import { StatusLabel } from '../StatusLabel'
 import { Text, TextProps } from '../Text'
 import { Textarea } from '../Textarea'
+import { TimePicker } from '../TimePicker'
 import { visuallyHiddenText } from '../VisuallyHiddenText/VisuallyHiddenText'
 
 import type { Gap } from '../../types'
@@ -304,6 +305,7 @@ type InputComponent =
   | typeof CurrencyInput
   | typeof Textarea
   | typeof DatePicker
+  | typeof TimePicker
   | typeof Select
   | typeof SingleComboBox
   | typeof MultiComboBox
@@ -327,6 +329,7 @@ const isInputElement = (
     type === CurrencyInput ||
     type === Textarea ||
     type === DatePicker ||
+    type === TimePicker ||
     type === Select ||
     type === SingleComboBox ||
     type === MultiComboBox ||

packages/smarthr-ui/src/components/TimePicker/TimePicker.stories.tsx

@@ -0,0 +1,32 @@
+import { StoryFn } from '@storybook/react/*'
+import React from 'react'
+
+import { FormControl } from '../FormControl'
+
+import { TimePicker } from './TimePicker'
+
+export default {
+  title: 'Forms（フォーム）/TimePicker',
+  component: TimePicker,
+}
+
+const _Template: StoryFn = (args) => (
+  <FormControl title="時刻">
+    <TimePicker {...args} />
+  </FormControl>
+)
+
+export const Default = _Template.bind({})
+
+export const VRTFocus = _Template.bind({})
+VRTFocus.parameters = {
+  controls: { hideNoControlsWarning: true },
+  pseudo: {
+    focusWithin: ['span:has(> input)'],
+  },
+}
+
+export const VRTForcedColors = _Template.bind({})
+VRTForcedColors.parameters = {
+  chromatic: { forcedColors: 'active' },
+}

packages/smarthr-ui/src/components/TimePicker/TimePicker.tsx

@@ -0,0 +1,29 @@
+import React, { ComponentPropsWithoutRef, forwardRef } from 'react'
+import { tv } from 'tailwind-variants'
+
+type Props = ComponentPropsWithoutRef<'input'>
+
+const timePicker = tv({
+  slots: {
+    wrapper: [
+      'smarthr-ui-TimePicker',
+      'shr-inline-block shr-border-shorthand shr-rounded-m shr-bg-white shr-px-0.5 shr-leading-none',
+      'contrast-more:shr-border-high-contrast',
+      'focus-within:shr-focus-indicator',
+    ],
+    input:
+      'shr-border-none shr-text-base shr-text-black shr-outline-none shr-outline-0 shr-p-[unset] shr-py-0.75 shr-h-[theme(fontSize.base)] shr-tabular-nums',
+  },
+})
+
+export const TimePicker: React.FC<Props> = forwardRef<HTMLInputElement, Props>(
+  ({ className, ...rest }, ref) => {
+    const { wrapper, input } = timePicker()
+    return (
+      <span className={wrapper({ className })}>
+        {/* eslint-disable-next-line smarthr/a11y-input-has-name-attribute, smarthr/a11y-input-in-form-control */}
+        <input {...rest} ref={ref} type="time" className={input()} />
+      </span>
+    )
+  },
+)

packages/smarthr-ui/src/components/TimePicker/index.ts

@@ -0,0 +1 @@
+export { TimePicker } from './TimePicker'

packages/smarthr-ui/src/index.ts

@@ -104,6 +104,7 @@ export * from './components/ResponseMessage'
 export * from './components/Badge'
 export * from './components/Switch'
 export * from './components/Stepper'
+export * from './components/TimePicker'
 
 // layout components
 export { Center, Cluster, Reel, Stack, Sidebar } from './components/Layout'