diff --git a/src/components/atoms/time/Time.stories.tsx b/src/components/atoms/time/Time.stories.tsx
new file mode 100644
index 00000000..7c42ede7
--- /dev/null
+++ b/src/components/atoms/time/Time.stories.tsx
@@ -0,0 +1,179 @@
+import { action } from '@storybook/addon-actions';
+import type { Meta, StoryObj } from '@storybook/react';
+import Time from './Time';
+
+const meta: Meta<typeof Time> = {
+  title: 'Atoms/Time',
+  component: Time,
+  parameters: {
+    docs: {
+      autodocs: true,
+      description: {
+        component:
+          'A time input component with individually editable segments (hour, minute, optional second). ' +
+          'Segments are keyboard-navigable and support arrow key increment/decrement. ' +
+          'Includes stepper buttons for pointer-based control. ' +
+          'Supports 12h/24h formats, all Input variants, hint states, and rounded style.'
+      }
+    }
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Time>;
+
+export const Default: Story = {
+  args: {
+    id: 'time-default',
+    label: 'Time',
+    onChange: action('time-change')
+  }
+};
+
+export const Disabled: Story = {
+  args: {
+    ...Default.args,
+    id: 'time-disabled',
+    disabled: true
+  }
+};
+
+export const Required: Story = {
+  args: {
+    ...Default.args,
+    id: 'time-required',
+    isRequired: true
+  }
+};
+
+export const WithHintInfo: Story = {
+  args: {
+    ...Default.args,
+    id: 'time-hint-info',
+    hint: { type: 'info', message: 'Enter the start time for the event' }
+  }
+};
+
+export const WithHintError: Story = {
+  args: {
+    ...Default.args,
+    id: 'time-hint-error',
+    hint: { type: 'error', message: 'Please enter a valid time' }
+  }
+};
+
+export const WithHintWarning: Story = {
+  args: {
+    ...Default.args,
+    id: 'time-hint-warning',
+    hint: { type: 'warning', message: 'This time slot may conflict with another event' }
+  }
+};
+
+export const WithHintSuccess: Story = {
+  args: {
+    ...Default.args,
+    id: 'time-hint-success',
+    hint: { type: 'success', message: 'Time slot is available' }
+  }
+};
+
+export const BorderedVariant: Story = {
+  args: {
+    ...Default.args,
+    id: 'time-bordered',
+    variant: 'bordered'
+  }
+};
+
+export const UnderlinedVariant: Story = {
+  args: {
+    ...Default.args,
+    id: 'time-underlined',
+    variant: 'underlined'
+  }
+};
+
+export const LineVariant: Story = {
+  args: {
+    ...Default.args,
+    id: 'time-line',
+    variant: 'line'
+  }
+};
+
+export const Rounded: Story = {
+  args: {
+    ...Default.args,
+    id: 'time-rounded',
+    rounded: true
+  }
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className='flex flex-col gap-4'>
+      <Time id='time-size-sm' label='Small' size='sm' onChange={action('small change')} />
+      <Time id='time-size-md' label='Medium' size='md' onChange={action('medium change')} />
+      <Time id='time-size-lg' label='Large' size='lg' onChange={action('large change')} />
+    </div>
+  )
+};
+
+export const WithSeconds: Story = {
+  args: {
+    ...Default.args,
+    id: 'time-seconds',
+    granularity: 'second',
+    hint: { type: 'info', message: 'Includes hour, minute, and second segments' }
+  }
+};
+
+export const TwelveHourFormat: Story = {
+  args: {
+    ...Default.args,
+    id: 'time-12h',
+    hourCycle: 12,
+    hint: { type: 'info', message: '12-hour format with AM/PM segment' }
+  }
+};
+
+export const WithClockIcon: Story = {
+  args: {
+    ...Default.args,
+    id: 'time-clock-icon',
+    showClockIcon: true
+  }
+};
+
+export const FullWidth: Story = {
+  args: {
+    ...Default.args,
+    id: 'time-fullwidth',
+    isFullWidth: true
+  }
+};
+
+export const WithSteppers: Story = {
+  args: {
+    ...Default.args,
+    id: 'time-steppers',
+    showSteppers: true,
+    hint: { type: 'info', message: 'Use the arrows or keyboard to adjust the time' }
+  }
+};
+
+export const CombinedStates: Story = {
+  args: {
+    ...Default.args,
+    id: 'time-combined',
+    label: 'Meeting Time',
+    variant: 'bordered',
+    size: 'md',
+    isRequired: true,
+    showSteppers: true,
+    showClockIcon: true
+  }
+};
diff --git a/src/components/atoms/time/Time.test.tsx b/src/components/atoms/time/Time.test.tsx
new file mode 100644
index 00000000..aaf6e05e
--- /dev/null
+++ b/src/components/atoms/time/Time.test.tsx
@@ -0,0 +1,212 @@
+/**
+ * Time.test.tsx — Tests for Stack-and-Flow Design System Time component
+ *
+ * STRATEGY:
+ * - Hook (useTime): tested with renderHook → pure logic, no DOM rendering
+ * - Component (Time): tested with render + screen + userEvent → observable behavior
+ *
+ * WHAT we test: segment state, navigation, ARIA attrs, disabled states, keyboard behavior, hint system
+ * WHAT we do NOT test: specific CSS class strings, internal refs
+ */
+
+import { render, renderHook, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+
+// --- Mocks (declared before component import) ---
+
+vi.mock('lucide-react/dynamic', () => ({
+  // biome-ignore lint/style/useNamingConvention: must match library export name
+  DynamicIcon: () => null
+}));
+
+vi.mock('spinners-react', () => ({
+  // biome-ignore lint/style/useNamingConvention: must match library export name
+  SpinnerCircular: () => null
+}));
+
+// --- Imports after mocks ---
+
+import Time from './Time';
+import { useTime } from './useTime';
+
+// ─────────────────────────────────────────────
+// HOOK TESTS — useTime
+// ─────────────────────────────────────────────
+
+describe('useTime — logic', () => {
+  it('returns disabled: false by default', () => {
+    const { result } = renderHook(() => useTime({ id: 'test-time' }));
+    expect(result.current.disabled).toBe(false);
+  });
+
+  it('returns isInvalid: false by default', () => {
+    const { result } = renderHook(() => useTime({ id: 'test-time' }));
+    expect(result.current.isInvalid).toBe(false);
+  });
+
+  it('returns isInvalid: true when hint type is error', () => {
+    const { result } = renderHook(() => useTime({ id: 'test-time', hint: { type: 'error', message: 'Error' } }));
+    expect(result.current.isInvalid).toBe(true);
+  });
+
+  it('returns disabled: true when disabled prop is true', () => {
+    const { result } = renderHook(() => useTime({ id: 'test-time', disabled: true }));
+    expect(result.current.disabled).toBe(true);
+  });
+
+  it('returns default granularity as minute', () => {
+    const { result } = renderHook(() => useTime({ id: 'test-time' }));
+    expect(result.current.granularity).toBe('minute');
+  });
+
+  it('returns default hourCycle as 24', () => {
+    const { result } = renderHook(() => useTime({ id: 'test-time' }));
+    expect(result.current.hourCycle).toBe(24);
+  });
+
+  it('passes id correctly to return value', () => {
+    const { result } = renderHook(() => useTime({ id: 'appointment-time' }));
+    expect(result.current.id).toBe('appointment-time');
+  });
+
+  it('returns segments with empty values by default', () => {
+    const { result } = renderHook(() => useTime({ id: 'test-time' }));
+    expect(result.current.segments.hour).toBe('');
+    expect(result.current.segments.minute).toBe('');
+  });
+
+  it('returns hasHint: false when no hint is provided', () => {
+    const { result } = renderHook(() => useTime({ id: 'test-time' }));
+    expect(result.current.hasHint).toBe(false);
+  });
+
+  it('returns hasHint: true when hint is provided', () => {
+    const { result } = renderHook(() => useTime({ id: 'test-time', hint: { type: 'info', message: 'Enter time' } }));
+    expect(result.current.hasHint).toBe(true);
+  });
+});
+
+// ─────────────────────────────────────────────
+// COMPONENT TESTS — Time
+// ─────────────────────────────────────────────
+
+describe('Time — component behavior', () => {
+  it('renders a time input group in the DOM', () => {
+    render(<Time id='test-time' />);
+    expect(screen.getByRole('group', { name: 'Time' })).toBeInTheDocument();
+  });
+
+  it('renders hour and minute segments', () => {
+    render(<Time id='test-time' />);
+    expect(screen.getByRole('spinbutton', { name: 'Hours' })).toBeInTheDocument();
+    expect(screen.getByRole('spinbutton', { name: 'Minutes' })).toBeInTheDocument();
+  });
+
+  it('does NOT render second segment by default', () => {
+    render(<Time id='test-time' />);
+    expect(screen.queryByRole('spinbutton', { name: 'Seconds' })).not.toBeInTheDocument();
+  });
+
+  it('renders second segment when granularity is second', () => {
+    render(<Time id='test-time' granularity='second' />);
+    expect(screen.getByRole('spinbutton', { name: 'Seconds' })).toBeInTheDocument();
+  });
+
+  it('displays the label when provided', () => {
+    render(<Time id='test-time' label='Appointment Time' />);
+    expect(screen.getByText('Appointment Time')).toBeInTheDocument();
+  });
+
+  it('renders required indicator when isRequired is true', () => {
+    render(<Time id='test-time' label='Meeting Time' isRequired={true} />);
+    expect(screen.getByText('*')).toBeInTheDocument();
+  });
+
+  it('is disabled when disabled prop is true', () => {
+    render(<Time id='test-time' label='Disabled Time' disabled={true} />);
+    expect(screen.getByRole('spinbutton', { name: 'Hours' })).toBeDisabled();
+  });
+
+  it('applies aria-invalid when hint type is error', () => {
+    render(<Time id='test-time' label='Invalid Time' hint={{ type: 'error', message: 'Error' }} />);
+    expect(screen.getByRole('spinbutton', { name: 'Hours' })).toHaveAttribute('aria-invalid', 'true');
+  });
+
+  it('applies aria-required when isRequired is true', () => {
+    render(<Time id='test-time' label='Required Time' isRequired={true} />);
+    expect(screen.getByRole('spinbutton', { name: 'Hours' })).toHaveAttribute('aria-required', 'true');
+  });
+
+  it('displays error hint message when hint type is error', () => {
+    render(<Time id='test-time' hint={{ type: 'error', message: 'Please enter a valid time' }} />);
+    expect(screen.getByText('Please enter a valid time')).toBeInTheDocument();
+  });
+
+  it('displays info hint message when hint type is info', () => {
+    render(<Time id='test-time' hint={{ type: 'info', message: 'Enter the meeting start time' }} />);
+    expect(screen.getByText('Enter the meeting start time')).toBeInTheDocument();
+  });
+
+  it('accepts numeric input in hour segment', async () => {
+    const user = userEvent.setup();
+    render(<Time id='test-time' />);
+    const hourInput = screen.getByRole('spinbutton', { name: 'Hours' });
+
+    await user.click(hourInput);
+    await user.type(hourInput, '14');
+
+    expect(hourInput).toHaveValue('14');
+  });
+
+  it('calls onChange when segment value changes', async () => {
+    const handleChange = vi.fn();
+    const user = userEvent.setup();
+    render(<Time id='test-time' onChange={handleChange} />);
+    const hourInput = screen.getByRole('spinbutton', { name: 'Hours' });
+
+    await user.click(hourInput);
+    await user.type(hourInput, '10');
+
+    expect(handleChange).toHaveBeenCalled();
+  });
+
+  it('renders dayPeriod segment when hourCycle is 12', () => {
+    render(<Time id='test-time' hourCycle={12} />);
+    expect(screen.getByRole('spinbutton', { name: 'AM or PM' })).toBeInTheDocument();
+  });
+
+  it('does NOT render dayPeriod segment when hourCycle is 24', () => {
+    render(<Time id='test-time' hourCycle={24} />);
+    expect(screen.queryByRole('spinbutton', { name: 'AM or PM' })).not.toBeInTheDocument();
+  });
+
+  it('renders with full width when isFullWidth is true', () => {
+    const { container } = render(<Time id='test-time' label='Full Width' isFullWidth={true} />);
+    expect(container.querySelector('[data-time-wrapper]')).toHaveClass('w-full');
+  });
+
+  it('renders label inside the container when label is provided', () => {
+    const { container } = render(<Time id='test-time' label='Start Time' />);
+    const wrapper = container.querySelector('[data-time-wrapper]');
+    expect(wrapper).toContainElement(screen.getByText('Start Time'));
+  });
+
+  it('does NOT render stepper buttons by default', () => {
+    render(<Time id='test-time' />);
+    expect(screen.queryByRole('button', { name: 'Increase value' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Decrease value' })).not.toBeInTheDocument();
+  });
+
+  it('renders increment and decrement stepper buttons when showSteppers is true', () => {
+    render(<Time id='test-time' showSteppers={true} />);
+    expect(screen.getByRole('button', { name: 'Increase value' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Decrease value' })).toBeInTheDocument();
+  });
+
+  it('stepper buttons are disabled when the component is disabled', () => {
+    render(<Time id='test-time' showSteppers={true} disabled={true} />);
+    expect(screen.getByRole('button', { name: 'Increase value' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Decrease value' })).toBeDisabled();
+  });
+});
diff --git a/src/components/atoms/time/Time.tsx b/src/components/atoms/time/Time.tsx
new file mode 100644
index 00000000..f0e963c9
--- /dev/null
+++ b/src/components/atoms/time/Time.tsx
@@ -0,0 +1,182 @@
+import type { FC } from 'react';
+import { cn } from '@/lib/utils';
+import { Icon } from '../icon';
+import type { TimeComponentProps } from './types';
+import { useTime } from './useTime';
+
+const Time: FC<TimeComponentProps> = (props) => {
+  const {
+    containerRef,
+    containerClassName,
+    wrapperClassName,
+    labelClassName,
+    adornmentClassName,
+    contentClassName,
+    stepButtonGroupClassName,
+    hasLabel,
+    label,
+    id,
+    size,
+    disabled,
+    isRequired,
+    startContent,
+    endContent,
+    granularity,
+    hourCycle,
+    name,
+    segments,
+    activeSegment,
+    hourRef,
+    minuteRef,
+    secondRef,
+    dayPeriodRef,
+    describedBy,
+    labelledBy,
+    isInvalid,
+    hasHint,
+    hintIconProps,
+    hintMessage,
+    hintMessageClassName,
+    handleContainerClick,
+    handleSegmentFocus,
+    handleSegmentBlur,
+    handleSegmentKeyDown,
+    handleSegmentInput,
+    getPlaceholder,
+    getLabelForSegment,
+    getSegmentDisplayValue,
+    incrementButtonProps,
+    decrementButtonProps,
+    showSteppers,
+    showClockIcon,
+    ...rest
+  } = useTime(props);
+
+  const renderSegment = (segmentName: string) => {
+    const isActive = activeSegment === segmentName;
+    const ref =
+      segmentName === 'hour'
+        ? hourRef
+        : segmentName === 'minute'
+          ? minuteRef
+          : segmentName === 'second'
+            ? secondRef
+            : dayPeriodRef;
+
+    return (
+      <input
+        ref={ref}
+        type='text'
+        inputMode={segmentName === 'dayPeriod' ? 'text' : 'numeric'}
+        value={getSegmentDisplayValue(segmentName)}
+        placeholder={getPlaceholder(segmentName)}
+        disabled={disabled}
+        name={name ? `${name}-${segmentName}` : undefined}
+        aria-label={getLabelForSegment(segmentName)}
+        aria-valuemin={segmentName === 'dayPeriod' ? undefined : 0}
+        aria-valuemax={
+          segmentName === 'dayPeriod' ? undefined : segmentName === 'hour' ? (hourCycle === 12 ? 12 : 23) : 59
+        }
+        aria-valuenow={
+          segmentName === 'dayPeriod' ? undefined : parseInt(getSegmentDisplayValue(segmentName), 10) || undefined
+        }
+        aria-invalid={isInvalid ? 'true' : 'false'}
+        aria-describedby={describedBy}
+        aria-required={isRequired}
+        aria-labelledby={labelledBy}
+        role='spinbutton'
+        className={cn(
+          'text-center bg-transparent outline-none border-none font-medium',
+          'text-text-light dark:text-text-dark',
+          'placeholder:text-text-muted-light dark:placeholder:text-text-muted-dark',
+          segmentName === 'dayPeriod' ? 'w-10' : 'w-8',
+          size === 'sm' && 'fs-small',
+          size === 'md' && 'fs-base',
+          size === 'lg' && 'fs-h6',
+          isActive && 'shadow-glow-focus-light dark:shadow-glow-focus-dark rounded-sm',
+          disabled && 'cursor-not-allowed'
+        )}
+        maxLength={2}
+        onChange={(e) => handleSegmentInput(segmentName, e.target.value)}
+        onFocus={(e) => handleSegmentFocus(segmentName, e)}
+        onBlur={handleSegmentBlur}
+        onKeyDown={(e) => handleSegmentKeyDown(segmentName, e)}
+      />
+    );
+  };
+
+  return (
+    <div className={wrapperClassName}>
+      <div
+        ref={containerRef}
+        data-time-wrapper={true}
+        className={containerClassName}
+        onClick={handleContainerClick}
+        {...rest}
+      >
+        {hasLabel && (
+          <label id={`${id}-label`} htmlFor={`${id}-hour`} className={labelClassName}>
+            {label}{' '}
+            {isRequired && (
+              <span className='text-brand-light dark:text-brand-dark' aria-hidden={true}>
+                *
+              </span>
+            )}
+          </label>
+        )}
+        <div className={contentClassName}>
+          {(showClockIcon || startContent) && (
+            <span className={adornmentClassName}>
+              {showClockIcon ? (
+                <Icon name='clock' tone='muted' size={size === 'lg' ? 20 : 18} decorative={true} />
+              ) : (
+                startContent
+              )}
+            </span>
+          )}
+          <div
+            className='flex items-center gap-0.5'
+            role='group'
+            aria-labelledby={hasLabel ? `${id}-label` : undefined}
+            aria-label={hasLabel ? undefined : 'Time'}
+          >
+            {renderSegment('hour')}
+            <span className='select-none text-text-muted-light dark:text-text-muted-dark font-medium'>:</span>
+            {renderSegment('minute')}
+            {granularity === 'second' && (
+              <>
+                <span className='select-none text-text-muted-light dark:text-text-muted-dark font-medium'>:</span>
+                {renderSegment('second')}
+              </>
+            )}
+            {hourCycle === 12 && (
+              <>
+                <span className='w-1.5' aria-hidden={true} />
+                {renderSegment('dayPeriod')}
+              </>
+            )}
+          </div>
+          {showSteppers && (
+            <div className={stepButtonGroupClassName}>
+              <button {...incrementButtonProps}>
+                <Icon name='chevron-up' tone='default' size={16} decorative={true} />
+              </button>
+              <button {...decrementButtonProps}>
+                <Icon name='chevron-down' tone='default' size={16} decorative={true} />
+              </button>
+            </div>
+          )}
+          {endContent && <span className={adornmentClassName}>{endContent}</span>}
+        </div>
+      </div>
+      {hasHint && (
+        <div id={`${id}-hint`} className='flex items-center gap-2 py-0.5'>
+          {hintIconProps && <Icon {...hintIconProps} decorative={true} />}
+          <span className={hintMessageClassName}>{hintMessage}</span>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Time;
diff --git a/src/components/atoms/time/index.ts b/src/components/atoms/time/index.ts
new file mode 100644
index 00000000..df40b1c3
--- /dev/null
+++ b/src/components/atoms/time/index.ts
@@ -0,0 +1,2 @@
+export { default as Time } from './Time';
+export type { TimeComponentProps, TimeGranularity, TimeHourCycle, TimeProps, TimeSegments } from './types';
diff --git a/src/components/atoms/time/types.ts b/src/components/atoms/time/types.ts
new file mode 100644
index 00000000..d1486b98
--- /dev/null
+++ b/src/components/atoms/time/types.ts
@@ -0,0 +1,207 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import type { ComponentProps, ReactNode } from 'react';
+
+export const timeVariants = cva(
+  [
+    'relative flex max-w-full justify-between overflow-hidden border py-2',
+    'cursor-text transition-[background,border-color,box-shadow] duration-200 ease-[ease]',
+    'focus-within:outline-none'
+  ],
+  {
+    variants: {
+      variant: {
+        regular: [
+          'bg-surface-light border-border-light hover:bg-surface-raised-light hover:border-border-strong-light',
+          'dark:bg-surface-dark dark:border-border-dark dark:hover:bg-surface-raised-dark dark:hover:border-border-strong-dark'
+        ],
+        underlined: [
+          'bg-transparent border-border-light hover:border-border-strong-light',
+          'dark:border-border-dark dark:hover:border-border-strong-dark'
+        ],
+        line: [
+          'bg-transparent border-t-transparent border-l-transparent border-r-transparent rounded-none!',
+          'border-b-border-light hover:border-b-border-strong-light',
+          'dark:border-b-border-dark dark:hover:border-b-border-strong-dark'
+        ],
+        bordered: [
+          'bg-surface-light border-border-strong-light hover:bg-surface-raised-light',
+          'dark:bg-surface-dark dark:border-border-strong-dark dark:hover:bg-surface-raised-dark'
+        ]
+      },
+      rounded: {
+        true: 'rounded-full',
+        false: 'rounded-md'
+      },
+      size: {
+        sm: 'h-12 px-3 fs-small',
+        md: 'h-14 px-4 fs-base',
+        lg: 'h-16 px-4 fs-h6'
+      },
+      status: {
+        default: '',
+        error:
+          'border-error-light shadow-glow-input-error-light hover:!border-error-light dark:border-error dark:shadow-glow-input-error dark:hover:!border-error',
+        warning:
+          'border-warning-light shadow-glow-input-warning-light hover:!border-warning-light dark:border-warning dark:shadow-glow-input-warning dark:hover:!border-warning',
+        success:
+          'border-success-light shadow-glow-input-success-light hover:!border-success-light dark:border-success dark:shadow-glow-input-success dark:hover:!border-success',
+        info: ''
+      },
+      focused: {
+        true: '!border-brand-light/50 shadow-glow-input-focus-light dark:!border-brand-dark/50 dark:shadow-glow-input-focus',
+        false: ''
+      },
+      fullWidth: {
+        true: 'w-full',
+        false: 'w-auto'
+      }
+    },
+    compoundVariants: [
+      { focused: true, status: 'error', class: '!border-error-light dark:!border-error' },
+      { focused: true, status: 'warning', class: '!border-warning-light dark:!border-warning' },
+      { focused: true, status: 'success', class: '!border-success-light dark:!border-success' }
+    ],
+    defaultVariants: {
+      variant: 'regular',
+      rounded: false,
+      size: 'md',
+      status: 'default',
+      focused: false,
+      fullWidth: false
+    }
+  }
+);
+
+export const timeStepButtonVariants = cva(
+  [
+    'cursor-pointer rounded-sm bg-surface-light px-1 text-text-light hover:bg-surface-raised-light',
+    'dark:bg-surface-dark dark:text-text-dark dark:hover:bg-surface-raised-dark',
+    'focus-visible:outline-none focus-visible:shadow-glow-focus-light dark:focus-visible:shadow-glow-focus-dark',
+    'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-40'
+  ],
+  {
+    variants: {
+      shape: {
+        top: 'rounded-b-none',
+        bottom: 'rounded-t-none'
+      }
+    },
+    defaultVariants: { shape: 'top' }
+  }
+);
+
+export const labelVariants = cva(
+  ['absolute w-auto line-clamp-1 pt-0.5 text-text-light dark:text-text-dark font-semibold'],
+  {
+    variants: {
+      size: {
+        sm: 'left-3 top-0.5 fs-xs',
+        md: 'left-4 top-1.5 fs-small',
+        lg: 'left-4 top-2 fs-small'
+      }
+    },
+    defaultVariants: { size: 'md' }
+  }
+);
+
+export const hintMessageVariants = cva('fs-small', {
+  variants: {
+    tone: {
+      info: 'text-text-secondary-light dark:text-text-secondary-dark',
+      warning: 'text-warning-light dark:text-warning',
+      error: 'text-error-light dark:text-error',
+      success: 'text-success-light dark:text-success'
+    }
+  },
+  defaultVariants: { tone: 'info' }
+});
+
+export type TimeVariant = VariantProps<typeof timeVariants>['variant'];
+export type TimeSize = VariantProps<typeof timeVariants>['size'];
+export type TimeGranularity = 'minute' | 'second';
+export type TimeHourCycle = 12 | 24;
+export type TimeHintType = 'error' | 'warning' | 'success' | 'info';
+
+export type TimeHint = {
+  message: string;
+  type: TimeHintType;
+};
+
+export type TimeSegments = {
+  hour: string;
+  minute: string;
+  second?: string;
+  dayPeriod?: 'AM' | 'PM';
+};
+
+export type TimeProps = {
+  /** @control text */
+  id: string;
+  /** @control text */
+  label?: string;
+  /**
+   * @control boolean
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * @control boolean
+   * @default false
+   */
+  isRequired?: boolean;
+  /**
+   * @control boolean
+   * @default false
+   */
+  rounded?: boolean;
+  /**
+   * @control select
+   * @default regular
+   */
+  variant?: TimeVariant;
+  /**
+   * @control select
+   * @default md
+   */
+  size?: TimeSize;
+  /**
+   * @control select
+   * @default minute
+   */
+  granularity?: TimeGranularity;
+  /**
+   * @control radio
+   * @default 24
+   */
+  hourCycle?: TimeHourCycle;
+  /** @control text */
+  name?: string;
+  /**
+   * @control boolean
+   * @default false
+   */
+  isFullWidth?: boolean;
+  /** @control text */
+  className?: string;
+  startContent?: ReactNode;
+  endContent?: ReactNode;
+  /**
+   * @control boolean
+   * @default false
+   */
+  showSteppers?: boolean;
+  /**
+   * @control boolean
+   * @default false
+   */
+  showClockIcon?: boolean;
+  /** @control object */
+  hint?: TimeHint;
+  onChange?: (value: TimeSegments | null) => void;
+};
+
+export type TimeComponentProps = TimeProps &
+  Omit<ComponentProps<'div'>, 'id' | 'onChange' | 'size'> & {
+    ariaDescribedBy?: string | string[];
+    ariaLabelledBy?: string | string[];
+  };
diff --git a/src/components/atoms/time/useTime.ts b/src/components/atoms/time/useTime.ts
new file mode 100644
index 00000000..84a69257
--- /dev/null
+++ b/src/components/atoms/time/useTime.ts
@@ -0,0 +1,390 @@
+import {
+  type FocusEvent,
+  type KeyboardEvent,
+  type MouseEvent,
+  type RefObject,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
+import { cn } from '@/lib/utils';
+import type { DynamicIconName } from '@/types';
+import type { IconTone } from '../icon';
+import {
+  hintMessageVariants,
+  labelVariants,
+  type TimeComponentProps,
+  type TimeHintType,
+  type TimeSegments,
+  timeStepButtonVariants,
+  timeVariants
+} from './types';
+
+type HintIconProps = {
+  name: DynamicIconName;
+  tone: IconTone;
+  size: 16;
+};
+
+const formatAriaIds = (ids?: string | string[]) => (Array.isArray(ids) ? ids.join(' ') : ids);
+
+const getHintIconProps = (type?: TimeHintType): HintIconProps | undefined => {
+  switch (type) {
+    case 'error':
+      return { name: 'circle-alert', tone: 'danger', size: 16 };
+    case 'warning':
+      return { name: 'triangle-alert', tone: 'warning', size: 16 };
+    case 'success':
+      return { name: 'circle-check', tone: 'success', size: 16 };
+    case 'info':
+      return { name: 'info', tone: 'muted', size: 16 };
+    default:
+      return undefined;
+  }
+};
+
+const getAdornmentSizeClassName = (size: NonNullable<TimeComponentProps['size']>) =>
+  size === 'lg' ? 'fs-base' : 'fs-small';
+
+const getContentGapClassName = (size: NonNullable<TimeComponentProps['size']>) => (size === 'sm' ? 'gap-2' : 'gap-3');
+
+export const useTime = ({
+  size = 'md',
+  label,
+  id,
+  variant = 'regular',
+  rounded = false,
+  className,
+  startContent,
+  endContent,
+  showSteppers = false,
+  showClockIcon = false,
+  isFullWidth = false,
+  isRequired = false,
+  hint,
+  disabled = false,
+  granularity = 'minute',
+  hourCycle = 24,
+  name,
+  onChange,
+  onFocus,
+  onBlur,
+  onKeyDown,
+  ariaDescribedBy,
+  ariaLabelledBy,
+  ...props
+}: TimeComponentProps) => {
+  const [segments, setSegments] = useState<TimeSegments>({
+    hour: '',
+    minute: '',
+    second: granularity === 'second' ? '' : undefined,
+    dayPeriod: hourCycle === 12 ? 'AM' : undefined
+  });
+
+  const [activeSegment, setActiveSegment] = useState<string | null>(null);
+  const [isFocused, setIsFocused] = useState(false);
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const hourRef = useRef<HTMLInputElement>(null);
+  const minuteRef = useRef<HTMLInputElement>(null);
+  const secondRef = useRef<HTMLInputElement>(null);
+  const dayPeriodRef = useRef<HTMLInputElement>(null);
+
+  const getRefForSegment = (segmentName: string): RefObject<HTMLInputElement | null> => {
+    switch (segmentName) {
+      case 'hour':
+        return hourRef;
+      case 'minute':
+        return minuteRef;
+      case 'second':
+        return secondRef;
+      case 'dayPeriod':
+        return dayPeriodRef;
+      default:
+        return hourRef;
+    }
+  };
+
+  const getSegmentOrder = (): string[] => {
+    const order = ['hour', 'minute'];
+    if (granularity === 'second') {
+      order.push('second');
+    }
+    if (hourCycle === 12) {
+      order.push('dayPeriod');
+    }
+    return order;
+  };
+
+  const focusSegment = (segmentName: string): void => {
+    const ref = getRefForSegment(segmentName);
+    ref.current?.focus();
+    ref.current?.select();
+  };
+
+  const focusNextSegment = (current: string): void => {
+    const order = getSegmentOrder();
+    const idx = order.indexOf(current);
+    focusSegment(order[(idx + 1) % order.length]);
+  };
+
+  const focusPrevSegment = (current: string): void => {
+    const order = getSegmentOrder();
+    const idx = order.indexOf(current);
+    focusSegment(order[(idx - 1 + order.length) % order.length]);
+  };
+
+  const getMaxValue = (segmentName: string): number => {
+    if (segmentName === 'hour') {
+      return hourCycle === 12 ? 12 : 23;
+    }
+    if (segmentName === 'dayPeriod') {
+      return 1;
+    }
+    return 59;
+  };
+
+  const getMinValue = (segmentName: string): number => (segmentName === 'hour' && hourCycle === 12 ? 1 : 0);
+
+  const updateSegment = (segmentName: string, value: string): void => {
+    setSegments((prev) => {
+      const next = { ...prev, [segmentName]: value };
+      if (segmentName === 'hour') {
+        const max = hourCycle === 12 ? 12 : 23;
+        if ((parseInt(next.hour, 10) || 0) > max) {
+          next.hour = String(max);
+        }
+      }
+      if (segmentName === 'minute' && (parseInt(value, 10) || 0) > 59) {
+        next.minute = '59';
+      }
+      if (segmentName === 'second' && next.second !== undefined && (parseInt(value, 10) || 0) > 59) {
+        next.second = '59';
+      }
+      return next;
+    });
+    onChange?.({ ...segments, [segmentName]: value });
+  };
+
+  const handleSegmentFocus = (segmentName: string, e: FocusEvent<HTMLInputElement>): void => {
+    setActiveSegment(segmentName);
+    setIsFocused(true);
+    onFocus?.(e);
+  };
+
+  const handleSegmentBlur = (e: FocusEvent<HTMLInputElement>): void => {
+    const related = e.relatedTarget as HTMLElement | null;
+    if (related && containerRef.current?.contains(related)) {
+      return;
+    }
+    setActiveSegment(null);
+    setIsFocused(false);
+    onBlur?.(e);
+  };
+
+  const handleSegmentKeyDown = (segmentName: string, e: KeyboardEvent<HTMLInputElement>): void => {
+    const max = getMaxValue(segmentName);
+    const min = getMinValue(segmentName);
+    const current = parseInt((segments[segmentName as keyof TimeSegments] as string) || '0', 10) || min;
+
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      updateSegment(segmentName, String(current >= max ? min : current + 1));
+      return;
+    }
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      updateSegment(segmentName, String(current <= min ? max : current - 1));
+      return;
+    }
+    if (e.key === 'ArrowRight') {
+      e.preventDefault();
+      focusNextSegment(segmentName);
+      return;
+    }
+    if (e.key === 'ArrowLeft') {
+      e.preventDefault();
+      focusPrevSegment(segmentName);
+      return;
+    }
+    if (e.key === 'Backspace') {
+      e.preventDefault();
+      updateSegment(segmentName, '');
+      return;
+    }
+    onKeyDown?.(e);
+  };
+
+  const handleSegmentInput = (segmentName: string, value: string): void => {
+    if (segmentName !== 'dayPeriod' && !/^\d*$/.test(value)) {
+      return;
+    }
+    const sanitized = value.slice(0, 2);
+    updateSegment(segmentName, sanitized);
+    if (sanitized.length === 2 && segmentName !== 'dayPeriod') {
+      const max = getMaxValue(segmentName);
+      if (parseInt(sanitized, 10) <= max) {
+        requestAnimationFrame(() => focusNextSegment(segmentName));
+      }
+    }
+  };
+
+  const handleContainerClick = (e: MouseEvent<HTMLDivElement>): void => {
+    const target = e.target as HTMLElement;
+    if (target === containerRef.current || target.closest('[data-time-wrapper]')) {
+      hourRef.current?.focus();
+    }
+  };
+
+  const stepActiveSegment = (direction: 'up' | 'down'): void => {
+    const target = activeSegment ?? getSegmentOrder()[0];
+    const max = getMaxValue(target);
+    const min = getMinValue(target);
+    const current = parseInt((segments[target as keyof TimeSegments] as string) || '0', 10);
+    const next = direction === 'up' ? (current >= max ? min : current + 1) : current <= min ? max : current - 1;
+    updateSegment(target, String(next));
+    requestAnimationFrame(() => getRefForSegment(target).current?.focus());
+  };
+
+  const getPlaceholder = (segmentName: string): string => {
+    if (segmentName === 'hour') {
+      return hourCycle === 12 ? '12' : '00';
+    }
+    if (segmentName === 'dayPeriod') {
+      return 'AM';
+    }
+    return '00';
+  };
+
+  const getLabelForSegment = (segmentName: string): string => {
+    switch (segmentName) {
+      case 'hour':
+        return 'Hours';
+      case 'minute':
+        return 'Minutes';
+      case 'second':
+        return 'Seconds';
+      case 'dayPeriod':
+        return 'AM or PM';
+      default:
+        return '';
+    }
+  };
+
+  const getSegmentDisplayValue = (segmentName: string): string =>
+    (segments[segmentName as keyof TimeSegments] as string | undefined) ?? '';
+
+  useEffect(() => {
+    if (granularity === 'second' && segments.second === undefined) {
+      setSegments((prev) => ({ ...prev, second: '' }));
+    }
+    if (granularity === 'minute' && segments.second !== undefined) {
+      setSegments((prev) => {
+        const { second: _second, ...rest } = prev;
+        return rest as TimeSegments;
+      });
+    }
+  }, [granularity]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    if (hourCycle === 12 && segments.dayPeriod === undefined) {
+      setSegments((prev) => ({ ...prev, dayPeriod: 'AM' }));
+    }
+    if (hourCycle === 24 && segments.dayPeriod !== undefined) {
+      setSegments((prev) => {
+        const { dayPeriod: _dayPeriod, ...rest } = prev;
+        return rest as TimeSegments;
+      });
+    }
+  }, [hourCycle]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Only use external labelledBy — label-derived ID goes on the group, not individual segments
+  const labelledBy = formatAriaIds(ariaLabelledBy);
+  const describedBy =
+    [formatAriaIds(ariaDescribedBy), hint?.message ? `${id}-hint` : undefined].filter(Boolean).join(' ') || undefined;
+
+  const hasLabel = Boolean(label);
+
+  const containerClassName = cn(
+    timeVariants({
+      size,
+      rounded,
+      variant,
+      status: hint?.type ?? 'default',
+      focused: isFocused,
+      fullWidth: isFullWidth
+    }),
+    hasLabel ? 'items-end' : 'items-center',
+    disabled && 'pointer-events-none cursor-not-allowed opacity-40',
+    className
+  );
+
+  const hintIconProps = useMemo(() => getHintIconProps(hint?.type), [hint?.type]);
+
+  return {
+    containerRef,
+    containerClassName,
+    wrapperClassName: cn('flex flex-col gap-2', isFullWidth && 'w-full'),
+    labelClassName: cn(labelVariants({ size }), disabled && 'opacity-40'),
+    adornmentClassName: cn(
+      'flex shrink-0 items-center font-medium text-text-secondary-light dark:text-text-secondary-dark',
+      getAdornmentSizeClassName(size ?? 'md')
+    ),
+    contentClassName: cn(
+      'flex w-full items-center justify-between',
+      getContentGapClassName(size ?? 'md'),
+      showSteppers && 'pr-6'
+    ),
+    stepButtonGroupClassName: 'absolute right-2 top-0 bottom-0 z-10 flex flex-col items-center justify-center gap-0.5',
+    hasLabel,
+    label,
+    id,
+    size,
+    disabled,
+    isRequired,
+    startContent,
+    endContent,
+    granularity,
+    hourCycle,
+    name,
+    segments,
+    activeSegment,
+    hourRef,
+    minuteRef,
+    secondRef,
+    dayPeriodRef,
+    describedBy,
+    labelledBy,
+    isInvalid: hint?.type === 'error',
+    hasHint: Boolean(hint?.message),
+    hintIconProps,
+    hintMessage: hint?.message,
+    hintMessageClassName: hintMessageVariants({ tone: hint?.type ?? 'info' }),
+    handleContainerClick,
+    handleSegmentFocus,
+    handleSegmentBlur,
+    handleSegmentKeyDown,
+    handleSegmentInput,
+    getPlaceholder,
+    getLabelForSegment,
+    getSegmentDisplayValue,
+    incrementButtonProps: {
+      type: 'button' as const,
+      'aria-label': 'Increase value',
+      className: timeStepButtonVariants({ shape: 'top' }),
+      disabled,
+      onClick: () => stepActiveSegment('up')
+    },
+    decrementButtonProps: {
+      type: 'button' as const,
+      'aria-label': 'Decrease value',
+      className: timeStepButtonVariants({ shape: 'bottom' }),
+      disabled,
+      onClick: () => stepActiveSegment('down')
+    },
+    showSteppers,
+    showClockIcon,
+    ...props
+  };
+};