@pushwoosh/dumb-components 1.1.42 → 1.1.44

package/{ai-documentation.mdx → ai-documentation.md}

@@ -23,39 +23,39 @@ import { useElementWidth, useOnClickOutside } from '@pushwoosh/dumb-components/h
 ### Form Components
 | Component | Description | Documentation |
 |-----------|-------------|---------------|
-| [Button](./Button/ai-documentation.mdx) | Interactive buttons with loading states and variants | 📖 |
-| [Checkbox](./Checkbox/ai-documentation.mdx) | Checkbox input with label and tooltip support | 📖 |
-| [EnhancedInput](./EnhancedInput/ai-documentation.mdx) | Enhanced text input with icons and clear functionality | 📖 |
-| [InputFile](./InputFile/ai-documentation.mdx) | File upload component with validation and drag-drop | 📖 |
-| [Radio](./Radio/ai-documentation.mdx) | Radio button component for single choice selection | 📖 |
-| [Select](./Select/ai-documentation.mdx) | Advanced select with async and creatable variants | 📖 |
-| [Switch](./Switch/ai-documentation.mdx) | Toggle switch for boolean state changes | 📖 |
+| [Button](./Button/ai-documentation.md) | Interactive buttons with loading states and variants | 📖 |
+| [Checkbox](./Checkbox/ai-documentation.md) | Checkbox input with label and tooltip support | 📖 |
+| [EnhancedInput](./EnhancedInput/ai-documentation.md) | Enhanced text input with icons and clear functionality | 📖 |
+| [InputFile](./InputFile/ai-documentation.md) | File upload component with validation and drag-drop | 📖 |
+| [Radio](./Radio/ai-documentation.md) | Radio button component for single choice selection | 📖 |
+| [Select](./Select/ai-documentation.md) | Advanced select with async and creatable variants | 📖 |
+| [Switch](./Switch/ai-documentation.md) | Toggle switch for boolean state changes | 📖 |
 
 ### UI Components
 | Component | Description | Documentation |
 |-----------|-------------|---------------|
-| [Alert](./Alert/ai-documentation.mdx) | Alert messages with optional collapsible content | 📖 |
-| [Badge](./Badge/ai-documentation.mdx) | Status badges and indicators with color variants | 📖 |
-| [Chip](./Chip/ai-documentation.mdx) | Interactive tags and filters with remove functionality | 📖 |
-| [Popover](./Popover/ai-documentation.mdx) | Floating overlay component with positioning | 📖 |
-| [ProgressBar](./ProgressBar/ai-documentation.mdx) | Progress indicator with customizable styling | 📖 |
-| [Skeleton](./Skeleton/ai-documentation.mdx) | Loading placeholder components | 📖 |
-| [Spinner](./Spinner/ai-documentation.mdx) | Loading indicator in multiple sizes | 📖 |
-| [Toast](./Toast/ai-documentation.mdx) | Notification system with provider pattern | 📖 |
-| [Tooltip](./Tooltip/ai-documentation.mdx) | Contextual tooltips with multiple positions | 📖 |
+| [Alert](./Alert/ai-documentation.md) | Alert messages with optional collapsible content | 📖 |
+| [Badge](./Badge/ai-documentation.md) | Status badges and indicators with color variants | 📖 |
+| [Chip](./Chip/ai-documentation.md) | Interactive tags and filters with remove functionality | 📖 |
+| [Popover](./Popover/ai-documentation.md) | Floating overlay component with positioning | 📖 |
+| [ProgressBar](./ProgressBar/ai-documentation.md) | Progress indicator with customizable styling | 📖 |
+| [Skeleton](./Skeleton/ai-documentation.md) | Loading placeholder components | 📖 |
+| [Spinner](./Spinner/ai-documentation.md) | Loading indicator in multiple sizes | 📖 |
+| [Toast](./Toast/ai-documentation.md) | Notification system with provider pattern | 📖 |
+| [Tooltip](./Tooltip/ai-documentation.md) | Contextual tooltips with multiple positions | 📖 |
 
 ### Layout Components
 | Component | Description | Documentation |
 |-----------|-------------|---------------|
-| [Modal](./Modal/ai-documentation.mdx) | Modal dialogs with size variants and confirmations | 📖 |
-| [PageHeader](./PageHeader/ai-documentation.mdx) | Page-level header with navigation and actions | 📖 |
-| [Pagination](./Pagination/ai-documentation.mdx) | Navigation component for multi-page content | 📖 |
-| [Tabs](./Tabs/ai-documentation.mdx) | Tabbed interface with multiple tab variants | 📖 |
+| [Modal](./Modal/ai-documentation.md) | Modal dialogs with size variants and confirmations | 📖 |
+| [PageHeader](./PageHeader/ai-documentation.md) | Page-level header with navigation and actions | 📖 |
+| [Pagination](./Pagination/ai-documentation.md) | Navigation component for multi-page content | 📖 |
+| [Tabs](./Tabs/ai-documentation.md) | Tabbed interface with multiple tab variants | 📖 |
 
 ### Base Components
 | Component | Description | Documentation |
 |-----------|-------------|---------------|
-| [Native](./native/ai-documentation.mdx) | Styled native HTML elements (Input, Select, Textarea) | 📖 |
+| [Native](./native/ai-documentation.md) | 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 → ai-documentation.md}

@@ -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.44",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",
@@ -39,10 +39,10 @@
     "@codemirror/lang-liquid": "^6.2.2",
     "@floating-ui/react-dom": "^2.1.2",
     "@lezer/highlight": "^1.2.1",
-    "@pushwoosh/kit-constants": "^1.6.12",
-    "@pushwoosh/kit-helpers": "^4.8.5",
-    "@pushwoosh/kit-icons": "^2.1.8",
-    "@pushwoosh/kit-typography": "^1.7.4",
+    "@pushwoosh/kit-constants": "^1.6.14",
+    "@pushwoosh/kit-helpers": "^4.8.6",
+    "@pushwoosh/kit-icons": "^2.1.9",
+    "@pushwoosh/kit-typography": "^1.7.5",
     "@tippyjs/react": "^4.2.6",
     "@uiw/codemirror-themes": "^4.23.8",
     "@uiw/react-codemirror": "^4.23.8",