@xsolla/xui-input-time 0.148.0 → 0.148.1

package/README.md

@@ -0,0 +1,164 @@
+# Input Time
+
+A structured time input component for entering hours, minutes, and optionally seconds. Supports 12h and 24h formats with an optional AM/PM toggle. Cross-platform (web and React Native).
+
+## Installation
+
+```bash
+npm install @xsolla/xui-input-time
+# or
+yarn add @xsolla/xui-input-time
+```
+
+## Demo
+
+### Basic Usage
+
+```tsx
+import * as React from 'react';
+import { InputTime } from '@xsolla/xui-input-time';
+import type { TimeValue } from '@xsolla/xui-input-time';
+
+export default function BasicTime() {
+  const [value, setValue] = React.useState<TimeValue | null>(null);
+
+  return <InputTime value={value} onChange={setValue} />;
+}
+```
+
+### With Seconds
+
+```tsx
+import * as React from 'react';
+import { InputTime } from '@xsolla/xui-input-time';
+import type { TimeValue } from '@xsolla/xui-input-time';
+
+export default function WithSeconds() {
+  const [value, setValue] = React.useState<TimeValue | null>(null);
+
+  return <InputTime value={value} onChange={setValue} showSeconds />;
+}
+```
+
+### 12-Hour Format with AM/PM
+
+```tsx
+import * as React from 'react';
+import { InputTime } from '@xsolla/xui-input-time';
+import type { TimeValue } from '@xsolla/xui-input-time';
+
+export default function TwelveHour() {
+  const [value, setValue] = React.useState<TimeValue | null>({
+    hours: 3,
+    minutes: 30,
+    period: 'pm',
+  });
+
+  return (
+    <InputTime
+      value={value}
+      onChange={setValue}
+      hourCycle={12}
+      showPeriod
+    />
+  );
+}
+```
+
+### Custom Icon
+
+A Clock icon is displayed by default. Pass a custom icon via the `icon` prop, or set `icon={null}` to hide it.
+
+```tsx
+import * as React from 'react';
+import { InputTime } from '@xsolla/xui-input-time';
+import { Clock } from '@xsolla/xui-icons-base';
+import type { TimeValue } from '@xsolla/xui-input-time';
+
+export default function CustomIcon() {
+  const [value, setValue] = React.useState<TimeValue | null>(null);
+
+  return (
+    <InputTime
+      value={value}
+      onChange={setValue}
+      icon={<Clock variant="solid" />}
+    />
+  );
+}
+```
+
+### Different Sizes
+
+```tsx
+import * as React from 'react';
+import { InputTime } from '@xsolla/xui-input-time';
+
+export default function Sizes() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <InputTime size="xl" />
+      <InputTime size="lg" />
+      <InputTime size="md" />
+      <InputTime size="sm" />
+      <InputTime size="xs" />
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### InputTime
+
+**InputTimeProps:**
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| value | `TimeValue \| null` | - | Current time value. |
+| onChange | `(value: TimeValue \| null) => void` | - | Time change callback. |
+| showSeconds | `boolean` | `false` | Show seconds segment (HH:MM:SS). |
+| showPeriod | `boolean` | `false` | Show AM/PM toggle. |
+| hourCycle | `12 \| 24` | `24` | Hour format (12h or 24h). |
+| icon | `ReactNode` | `<Clock />` | Icon displayed on the left. Set to `null` to hide. |
+| size | `"xl" \| "lg" \| "md" \| "sm" \| "xs"` | `"md"` | Input size variant. |
+| disabled | `boolean` | `false` | Disable the input. |
+| error | `string` | - | Error message (shows error state). |
+| aria-label | `string` | `"Time input"` | Accessible label. |
+| testID | `string` | - | Test identifier. |
+
+### TimeValue
+
+| Property | Type | Description |
+| :--- | :--- | :---------- |
+| hours | `number` | Hours (0-23 for 24h, 1-12 for 12h). |
+| minutes | `number` | Minutes (0-59). |
+| seconds | `number` (optional) | Seconds (0-59). Present when `showSeconds` is true. |
+| period | `"am" \| "pm"` (optional) | Time period. Present when `showPeriod` is true. |
+
+## Keyboard Navigation
+
+| Key | Action |
+| :--- | :--- |
+| 0-9 | Type digit. Auto-advances to next segment after 2 digits. |
+| Tab | Move to next segment. |
+| Shift+Tab | Move to previous segment. |
+| ArrowUp | Increment focused segment by 1. |
+| ArrowDown | Decrement focused segment by 1. |
+| ArrowRight | Move to next segment. |
+| ArrowLeft | Move to previous segment. |
+| Backspace | Clear segment and move back. |
+
+## Validation
+
+Values are clamped to valid ranges automatically:
+- Hours: 0-23 (24h) or 1-12 (12h)
+- Minutes: 0-59
+- Seconds: 0-59
+
+## Accessibility
+
+- Each segment has an `aria-label` ("Hours", "Minutes", "Seconds")
+- Error messages use `role="alert"`
+- AM/PM toggle is a button with descriptive `aria-label`
+- Segments are grouped with `role="group"`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-input-time",
-  "version": "0.148.0",
+  "version": "0.148.1",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",
@@ -13,9 +13,9 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@xsolla/xui-core": "0.148.0",
-    "@xsolla/xui-icons-base": "0.148.0",
-    "@xsolla/xui-primitives-core": "0.148.0"
+    "@xsolla/xui-core": "0.148.1",
+    "@xsolla/xui-icons-base": "0.148.1",
+    "@xsolla/xui-primitives-core": "0.148.1"
   },
   "peerDependencies": {
     "react": ">=16.8.0",