@pushwoosh/dumb-components 1.1.42 → 1.1.43

package/ai-documentation.mdx

@@ -55,7 +55,7 @@ import { useElementWidth, useOnClickOutside } from '@pushwoosh/dumb-components/h
 ### Base Components
 | Component | Description | Documentation |
 |-----------|-------------|---------------|
-| [Native](./native/ai-documentation.mdx) | Styled native HTML elements (Input, Select, Textarea) | 📖 |
+| [Native](./native/ai-documentation.mdx) | Styled native HTML elements (Input, Select, Textarea, NativeTimeInput) | 📖 |
 
 ## 🤖 AI Agent Quick Reference
 

package/index.d.ts

@@ -30,7 +30,7 @@ export { PushPreview } from './PushPreview';
 export { Toast, ToastProvider, useToast } from './Toast';
 export { AutosizeInput, PageHeader, PageHeaderEditable } from './PageHeader';
 export { ExportResult } from './ExportResult';
-export { NativeInput, NativeTextarea, NativeSelect } from './native';
+export { NativeInput, NativeTextarea, NativeSelect, NativeTimeInput, } from './native';
 export { FieldBox } from './FieldBox';
 export { NumberPicker } from './NumberPicker';
 export { CodeEditor } from './CodeEditor';

package/index.js

@@ -30,7 +30,7 @@ export { PushPreview } from './PushPreview';
 export { Toast, ToastProvider, useToast } from './Toast';
 export { AutosizeInput, PageHeader, PageHeaderEditable } from './PageHeader';
 export { ExportResult } from './ExportResult';
-export { NativeInput, NativeTextarea, NativeSelect } from './native';
+export { NativeInput, NativeTextarea, NativeSelect, NativeTimeInput } from './native';
 export { FieldBox } from './FieldBox';
 export { NumberPicker } from './NumberPicker';
 export { CodeEditor } from './CodeEditor';

package/native/NativeTimeInput.d.ts

@@ -0,0 +1,3 @@
+export declare const NativeTimeInput: import("styled-components").StyledComponent<"input", any, {
+    type: "time";
+}, "type">;

package/native/NativeTimeInput.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import { Color } from '@pushwoosh/kit-constants';
+export const NativeTimeInput = styled.input.attrs({
+  type: 'time'
+}).withConfig({
+  displayName: "NativeTimeInput",
+  componentId: "sc-r1vjhd-0"
+})(["border:1px solid ", ";border-radius:4px;color:", ";font-size:14px;line-height:1.4;padding:8px 12px;height:36px;box-sizing:border-box;appearance:none;&:focus{border-color:", ";outline:none;}&::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none;}"], Color.FORM, Color.MAIN, Color.BRIGHT);

package/native/ai-documentation.mdx

@@ -4,12 +4,13 @@
 > Part of @pushwoosh/dumb-components library
 
 ## Overview
-**Components:** NativeInput, NativeSelect, NativeTextarea
-**Import Path:** `import { NativeInput, NativeSelect, NativeTextarea } from '@pushwoosh/dumb-components'`
-**Files:** 
+**Components:** NativeInput, NativeSelect, NativeTextarea, NativeTimeInput
+**Import Path:** `import { NativeInput, NativeSelect, NativeTextarea, NativeTimeInput } from '@pushwoosh/dumb-components'`
+**Files:**
 - `native/Input.tsx` - Styled native input component
-- `native/Select.tsx` - Styled native select component  
+- `native/Select.tsx` - Styled native select component
 - `native/Textarea.tsx` - Styled native textarea component
+- `native/TimeInput.tsx` - Styled native time input component
 - `native/index.ts` - Main exports
 **Type:** Base Form Components / Styled HTML Elements
 **Description:** Styled-components wrappers around native HTML form elements. These provide consistent Pushwoosh Design System styling while maintaining native HTML behavior. Used internally by enhanced components like EnhancedInput.
@@ -47,6 +48,13 @@ interface NativeTextareaProps {
 // value, onChange, placeholder, rows, cols, disabled, etc.
 ```
 
+### NativeTimeInputProps
+```typescript
+// NativeTimeInput is a styled input[type="time"] element
+// Extends all standard HTMLInputElement attributes:
+// value, onChange, disabled, readOnly, min, max, step, etc.
+```
+
 ## Import & Usage
 
 ### NativeInput
@@ -94,7 +102,7 @@ import { NativeTextarea } from '@pushwoosh/dumb-components';
 
 function BasicTextarea() {
   const [value, setValue] = useState('');
-  
+
   return (
     <NativeTextarea
       value={value}
@@ -106,6 +114,22 @@ function BasicTextarea() {
 }
 ```
 
+### NativeTimeInput
+```tsx
+import { NativeTimeInput } from '@pushwoosh/dumb-components';
+
+function BasicTimeInput() {
+  const [time, setTime] = useState('09:00');
+
+  return (
+    <NativeTimeInput
+      value={time}
+      onChange={(e) => setTime(e.target.value)}
+    />
+  );
+}
+```
+
 ## Advanced Examples
 
 ### Form with Validation
@@ -186,7 +210,7 @@ function ValidationForm() {
 
 ### Different Input Types
 ```tsx
-import { NativeInput } from '@pushwoosh/dumb-components';
+import { NativeInput, NativeTimeInput } from '@pushwoosh/dumb-components';
 
 function InputTypes() {
   const [formData, setFormData] = useState({
@@ -194,9 +218,10 @@ function InputTypes() {
     password: '',
     number: '',
     date: '',
+    time: '09:00',
     url: ''
   });
-  
+
   return (
     <div>
       <NativeInput
@@ -205,14 +230,14 @@ function InputTypes() {
         onChange={(e) => setFormData({ ...formData, email: e.target.value })}
         placeholder="email@example.com"
       />
-      
+
       <NativeInput
         type="password"
         value={formData.password}
         onChange={(e) => setFormData({ ...formData, password: e.target.value })}
         placeholder="Password"
       />
-      
+
       <NativeInput
         type="number"
         value={formData.number}
@@ -221,13 +246,18 @@ function InputTypes() {
         min="0"
         max="100"
       />
-      
+
       <NativeInput
         type="date"
         value={formData.date}
         onChange={(e) => setFormData({ ...formData, date: e.target.value })}
       />
-      
+
+      <NativeTimeInput
+        value={formData.time}
+        onChange={(e) => setFormData({ ...formData, time: e.target.value })}
+      />
+
       <NativeInput
         type="url"
         value={formData.url}
@@ -308,7 +338,7 @@ function GroupedSelect() {
 
 ### Disabled and ReadOnly States
 ```tsx
-import { NativeInput, NativeSelect, NativeTextarea } from '@pushwoosh/dumb-components';
+import { NativeInput, NativeSelect, NativeTextarea, NativeTimeInput } from '@pushwoosh/dumb-components';
 
 function DisabledStates() {
   return (
@@ -319,23 +349,33 @@ function DisabledStates() {
         disabled
         placeholder="This is disabled"
       />
-      
+
       <NativeSelect disabled>
         <option>Disabled select</option>
       </NativeSelect>
-      
+
       <NativeTextarea
         value="Disabled textarea"
         disabled
         rows={3}
       />
-      
+
+      <NativeTimeInput
+        value="09:00"
+        disabled
+      />
+
       {/* Read-only inputs */}
       <NativeInput
         value="Read-only input"
         readOnly
       />
-      
+
+      <NativeTimeInput
+        value="09:00"
+        readOnly
+      />
+
       <NativeTextarea
         value="Read-only textarea content"
         readOnly
@@ -385,6 +425,17 @@ function DisabledStates() {
 | `wrap` | `'soft' \| 'hard'` | - | `'soft'` | Text wrapping behavior |
 | `resize` | `string` | - | - | CSS resize property |
 
+### NativeTimeInput Specific Props
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `value` | `string` | - | - | Time value in HH:MM format |
+| `onChange` | `(e: ChangeEvent) => void` | - | - | Change handler |
+| `min` | `string` | - | - | Minimum time value |
+| `max` | `string` | - | - | Maximum time value |
+| `step` | `number` | - | - | Step value in seconds |
+| `disabled` | `boolean` | - | `false` | Disable the input |
+| `readOnly` | `boolean` | - | `false` | Make input read-only |
+
 ## AI Agent Guidelines
 
 ### ✅ Recommended Patterns
@@ -417,11 +468,12 @@ function DisabledStates() {
 
 ### Styling Notes
 - Components use `styled-components` with design system constants
-- Border radius uses `ShapeRadius.CONTROL`
+- Border radius uses `ShapeRadius.CONTROL` (4px for TimeInput)
 - Colors are from Pushwoosh color palette
 - Font sizes and line heights are from typography scale
-- Input height is standardized using `UnitSize.FIELD_HEIGHT`
+- Input height is standardized using `UnitSize.FIELD_HEIGHT` (36px for NativeTimeInput)
 - Focus outline is removed in favor of border styling
+- NativeTimeInput hides the native calendar picker indicator for consistent styling
 
 ## Related Components
 - **EnhancedInput** - Uses NativeInput internally with icons and clear functionality

package/native/index.d.ts

@@ -1,3 +1,4 @@
 export { NativeInput } from './Input';
 export { NativeTextarea } from './Textarea';
 export { NativeSelect } from './Select';
+export { NativeTimeInput } from './NativeTimeInput';

package/native/index.js

@@ -1,3 +1,4 @@
 export { NativeInput } from './Input';
 export { NativeTextarea } from './Textarea';
-export { NativeSelect } from './Select';
+export { NativeSelect } from './Select';
+export { NativeTimeInput } from './NativeTimeInput';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.1.42",
+  "version": "1.1.43",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",