@thewhileloop/whileui 0.2.6 → 0.2.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -266,19 +266,19 @@ function MyScreen() {
|
|
|
266
266
|
|
|
267
267
|
### Layout
|
|
268
268
|
|
|
269
|
-
| Block | Description
|
|
270
|
-
| ---------------------- |
|
|
271
|
-
| **ActionBar** | Sticky bottom action row with safe-area padding
|
|
272
|
-
| **ConfirmActionSheet** | Reusable destructive confirmation sheet
|
|
273
|
-
| **FormModalScreen** | Modal scaffold for forms with loading states
|
|
274
|
-
| **EmptyState** | Empty content placeholder
|
|
275
|
-
| **ErrorState** | Error display with retry
|
|
276
|
-
| **LoadingScreen** | Full-screen loading indicator
|
|
277
|
-
| **SmartInput** | Keyboard-aware compose input
|
|
278
|
-
| **OnboardingScreen** | Onboarding flow screen
|
|
279
|
-
| **SplashScreen** | Branded splash (fade/scale/slide variants)
|
|
280
|
-
| **MinimalSplash** | Minimal monochrome splash
|
|
281
|
-
| **BrandedSplash** | Splash with brand imagery
|
|
269
|
+
| Block | Description |
|
|
270
|
+
| ---------------------- | ----------------------------------------------------------------------- |
|
|
271
|
+
| **ActionBar** | Sticky bottom action row with safe-area padding |
|
|
272
|
+
| **ConfirmActionSheet** | Reusable destructive confirmation sheet |
|
|
273
|
+
| **FormModalScreen** | Modal scaffold for forms with loading states |
|
|
274
|
+
| **EmptyState** | Empty content placeholder |
|
|
275
|
+
| **ErrorState** | Error display with retry |
|
|
276
|
+
| **LoadingScreen** | Full-screen loading indicator |
|
|
277
|
+
| **SmartInput** | Keyboard-aware compose input: left/center/right slots, bar/card variant |
|
|
278
|
+
| **OnboardingScreen** | Onboarding flow screen |
|
|
279
|
+
| **SplashScreen** | Branded splash (fade/scale/slide variants) |
|
|
280
|
+
| **MinimalSplash** | Minimal monochrome splash |
|
|
281
|
+
| **BrandedSplash** | Splash with brand imagery |
|
|
282
282
|
|
|
283
283
|
### Chat
|
|
284
284
|
|
|
@@ -1092,7 +1092,7 @@ import { ActionBar, Button, ButtonText } from '@thewhileloop/whileui';
|
|
|
1092
1092
|
|
|
1093
1093
|
## SmartInput
|
|
1094
1094
|
|
|
1095
|
-
Keyboard-aware compose input.
|
|
1095
|
+
Keyboard-aware compose input. `variant`: "bar" (sticky bottom) or "card" (floating). Slots: `leftSlot`, `centerSlot` (intent selector), `rightSlot`. `submitBehavior`: "newline" (default) or "submit"/"blurAndSubmit". Forwards ref to `TextInput`.
|
|
1096
1096
|
|
|
1097
1097
|
```tsx
|
|
1098
1098
|
import { SmartInput, Button, ButtonText } from '@thewhileloop/whileui';
|
|
@@ -1139,19 +1139,19 @@ const [value, setValue] = useState('');
|
|
|
1139
1139
|
/>;
|
|
1140
1140
|
```
|
|
1141
1141
|
|
|
1142
|
-
| Prop
|
|
1143
|
-
|
|
|
1144
|
-
| `messages`
|
|
1145
|
-
| `value`
|
|
1146
|
-
| `onChangeText`
|
|
1147
|
-
| `onSend`
|
|
1148
|
-
| `suggestions`
|
|
1149
|
-
| `leftSlot` / `rightSlot`
|
|
1150
|
-
| `exampleMessage`
|
|
1151
|
-
| `renderMessage`
|
|
1152
|
-
| `loadingIndicator`
|
|
1153
|
-
| `inputSafeArea`
|
|
1154
|
-
| `keyboardVerticalOffset`
|
|
1142
|
+
| Prop | Type | Description |
|
|
1143
|
+
| ------------------------ | -------------------- | ------------------------------------------------- |
|
|
1144
|
+
| `messages` | `ChatMessage[]` | `{ id, role, content, secondary?, contentSize? }` |
|
|
1145
|
+
| `value` | `string` | Input value |
|
|
1146
|
+
| `onChangeText` | `(text) => void` | Input change |
|
|
1147
|
+
| `onSend` | `() => void` | Send handler |
|
|
1148
|
+
| `suggestions` | `string[]` | Chips when empty |
|
|
1149
|
+
| `leftSlot` / `rightSlot` | `ReactNode` | Attach, send, etc. |
|
|
1150
|
+
| `exampleMessage` | `ChatMessage` | Shown in empty state |
|
|
1151
|
+
| `renderMessage` | `(msg) => ReactNode` | Custom message (markdown, code, images) |
|
|
1152
|
+
| `loadingIndicator` | `ReactNode` | Shown when loading (typing dots) |
|
|
1153
|
+
| `inputSafeArea` | `boolean` | SmartInput safe-area (default `true`) |
|
|
1154
|
+
| `keyboardVerticalOffset` | `number` | For header offset when keyboard opens |
|
|
1155
1155
|
|
|
1156
1156
|
## ConfirmActionSheet
|
|
1157
1157
|
|
|
@@ -3,12 +3,18 @@ import { TextInput, type TextInputProps } from 'react-native';
|
|
|
3
3
|
export interface SmartInputProps extends TextInputProps {
|
|
4
4
|
/** Left slot: emoji, attach, etc. */
|
|
5
5
|
leftSlot?: React.ReactNode;
|
|
6
|
+
/** Center slot: intent selector, model picker, etc. */
|
|
7
|
+
centerSlot?: React.ReactNode;
|
|
6
8
|
/** Right slot: send button, etc. */
|
|
7
9
|
rightSlot?: React.ReactNode;
|
|
10
|
+
/** Bar = sticky bottom with border-t. Card = floating, no top border, rounded. */
|
|
11
|
+
variant?: 'bar' | 'card';
|
|
8
12
|
/** Container className */
|
|
9
13
|
className?: string;
|
|
10
14
|
/** Input field className */
|
|
11
15
|
inputClassName?: string;
|
|
16
|
+
/** 'newline' = Enter adds newline. 'submit' = Enter triggers onSubmitEditing. Default 'newline'. */
|
|
17
|
+
submitBehavior?: 'newline' | 'submit' | 'blurAndSubmit';
|
|
12
18
|
/** Use safe area insets for bottom padding */
|
|
13
19
|
safeArea?: boolean;
|
|
14
20
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"smart-input.d.ts","sourceRoot":"","sources":["../../../src/blocks/layout/smart-input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAQ,SAAS,EAAkC,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAIpG,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD,qCAAqC;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,oCAAoC;IACpC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,
|
|
1
|
+
{"version":3,"file":"smart-input.d.ts","sourceRoot":"","sources":["../../../src/blocks/layout/smart-input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAQ,SAAS,EAAkC,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAIpG,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD,qCAAqC;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,uDAAuD;IACvD,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,oCAAoC;IACpC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,kFAAkF;IAClF,OAAO,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IACzB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oGAAoG;IACpG,cAAc,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,eAAe,CAAC;IACxD,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,mFAqDrB,CAAC"}
|
|
@@ -3,9 +3,9 @@ import { forwardRef } from 'react';
|
|
|
3
3
|
import { View, TextInput, KeyboardAvoidingView, Platform } from 'react-native';
|
|
4
4
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
5
5
|
import { cn } from '../../lib/cn';
|
|
6
|
-
export const SmartInput = forwardRef(function SmartInput({ leftSlot, rightSlot, className, inputClassName, safeArea = true, placeholderTextColor, editable = true, ...props }, ref) {
|
|
6
|
+
export const SmartInput = forwardRef(function SmartInput({ leftSlot, centerSlot, rightSlot, variant = 'bar', className, inputClassName, submitBehavior = 'newline', safeArea = true, placeholderTextColor, editable = true, ...props }, ref) {
|
|
7
7
|
const insets = useSafeAreaInsets();
|
|
8
8
|
const bottomPadding = safeArea ? Math.max(insets.bottom, 12) : 12;
|
|
9
|
-
return (_jsx(KeyboardAvoidingView, { behavior: Platform.OS === 'ios' ? 'padding' : undefined, className: "w-full", children: _jsxs(View, { className: cn('w-full flex-row items-center gap-2 border-t border-border
|
|
9
|
+
return (_jsx(KeyboardAvoidingView, { behavior: Platform.OS === 'ios' ? 'padding' : undefined, className: "w-full", children: _jsxs(View, { className: cn('w-full flex-row items-center gap-2 px-3 py-2 bg-background', variant === 'bar' && 'border-t border-border', variant === 'card' && 'rounded-2xl border border-border shadow-md', className), style: { paddingBottom: bottomPadding }, children: [leftSlot && _jsx(View, { className: "shrink-0", children: leftSlot }), centerSlot && _jsx(View, { className: "shrink-0", children: centerSlot }), _jsx(TextInput, { ref: ref, className: cn('flex-1 min-h-11 max-h-[120px] rounded-xl border border-input bg-background px-4 py-3 text-sm text-foreground placeholder:text-muted-foreground', !editable && 'opacity-50', inputClassName), multiline: true, submitBehavior: submitBehavior, textAlignVertical: "top", placeholderTextColor: placeholderTextColor, editable: editable, ...props }), rightSlot && _jsx(View, { className: "shrink-0", children: rightSlot })] }) }));
|
|
10
10
|
});
|
|
11
11
|
//# sourceMappingURL=smart-input.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"smart-input.js","sourceRoot":"","sources":["../../../src/blocks/layout/smart-input.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,oBAAoB,EAAE,QAAQ,EAAuB,MAAM,cAAc,CAAC;AACpG,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"smart-input.js","sourceRoot":"","sources":["../../../src/blocks/layout/smart-input.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,oBAAoB,EAAE,QAAQ,EAAuB,MAAM,cAAc,CAAC;AACpG,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAqBlC,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAA6B,SAAS,UAAU,CAClF,EACE,QAAQ,EACR,UAAU,EACV,SAAS,EACT,OAAO,GAAG,KAAK,EACf,SAAS,EACT,cAAc,EACd,cAAc,GAAG,SAAS,EAC1B,QAAQ,GAAG,IAAI,EACf,oBAAoB,EACpB,QAAQ,GAAG,IAAI,EACf,GAAG,KAAK,EACT,EACD,GAAG;IAEH,MAAM,MAAM,GAAG,iBAAiB,EAAE,CAAC;IACnC,MAAM,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAElE,OAAO,CACL,KAAC,oBAAoB,IACnB,QAAQ,EAAE,QAAQ,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACvD,SAAS,EAAC,QAAQ,YAElB,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,CACX,4DAA4D,EAC5D,OAAO,KAAK,KAAK,IAAI,wBAAwB,EAC7C,OAAO,KAAK,MAAM,IAAI,4CAA4C,EAClE,SAAS,CACV,EACD,KAAK,EAAE,EAAE,aAAa,EAAE,aAAa,EAAE,aAEtC,QAAQ,IAAI,KAAC,IAAI,IAAC,SAAS,EAAC,UAAU,YAAE,QAAQ,GAAQ,EACxD,UAAU,IAAI,KAAC,IAAI,IAAC,SAAS,EAAC,UAAU,YAAE,UAAU,GAAQ,EAC7D,KAAC,SAAS,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,gJAAgJ,EAChJ,CAAC,QAAQ,IAAI,YAAY,EACzB,cAAc,CACf,EACD,SAAS,QACT,cAAc,EAAE,cAAc,EAC9B,iBAAiB,EAAC,KAAK,EACvB,oBAAoB,EAAE,oBAAoB,EAC1C,QAAQ,EAAE,QAAQ,KACd,KAAK,GACT,EACD,SAAS,IAAI,KAAC,IAAI,IAAC,SAAS,EAAC,UAAU,YAAE,SAAS,GAAQ,IACtD,GACc,CACxB,CAAC;AACJ,CAAC,CAAC,CAAC"}
|