@retray-dev/ui-kit 3.0.0 → 3.1.0

package/COMPONENTS.md

@@ -1,4 +1,4 @@
-# @retray-dev/ui-kit — Component Reference (v3.0.0)
+# @retray-dev/ui-kit — Component Reference (v3.1.0)
 
 This file is the AI reference for this package. It is shipped inside the npm package so consuming projects can import it into their `CLAUDE.md` with:
 
@@ -713,8 +713,8 @@ All sub-components (`CardHeader`, `CardTitle`, `CardDescription`, `CardContent`,
 
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
-| title | `string` | — | Bold heading |
-| description | `string` | — | Detail text |
+| title | `string` | required | Bold heading |
+| description | `string` | — | Optional detail text below the title |
 | variant | `'default' \| 'destructive' \| 'success'` | `'default'` | Controls border/text color |
 | icon | `ReactNode` | — | Icon placed to the left of the text content. Defaults to a variant-appropriate symbol (`ℹ`, `⚠`, `✓`) |
 | iconName | `string` | — | Icon name from `@expo/vector-icons`. Takes precedence over `icon` (but still falls back to the variant default when neither is set) |

package/dist/index.d.mts

@@ -150,8 +150,10 @@ interface InputProps extends TextInputProps {
     type?: 'text' | 'password';
     /** Style for the outer container \`View\`. Use \`style\` (from \`TextInputProps\`) to style the \`TextInput\` itself. */
     containerStyle?: ViewStyle;
+    /** Style for the inner border wrapper (overrides padding, etc). */
+    inputWrapperStyle?: ViewStyle;
 }
-declare function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type, containerStyle, style, onFocus, onBlur, secureTextEntry, ...props }: InputProps): React.JSX.Element;
+declare function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type, containerStyle, inputWrapperStyle, style, onFocus, onBlur, secureTextEntry, ...props }: InputProps): React.JSX.Element;
 
 type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'successOutline' | 'destructiveOutline';
 type BadgeSize = 'sm' | 'md' | 'lg';
@@ -245,7 +247,7 @@ declare function Avatar({ src, fallback, size, style }: AvatarProps): React.JSX.
 
 type AlertBannerVariant = 'default' | 'destructive' | 'success';
 interface AlertBannerProps {
-    title?: string;
+    title: string;
     description?: string;
     variant?: AlertBannerVariant;
     icon?: React.ReactNode;
@@ -501,12 +503,10 @@ interface CurrencyInputProps {
     hint?: string;
     placeholder?: string;
     editable?: boolean;
-    /** Icon or element rendered at the left edge inside the input field. */
-    prefixIcon?: React.ReactNode;
     containerStyle?: ViewStyle;
     style?: TextStyle;
 }
-declare function CurrencyInput({ value, onChangeText, onChangeValue, prefix, thousandsSeparator, size, label, error, hint, placeholder, editable, prefixIcon, containerStyle, style, }: CurrencyInputProps): React.JSX.Element;
+declare function CurrencyInput({ value, onChangeText, onChangeValue, prefix, thousandsSeparator, size, label, error, hint, placeholder, editable, containerStyle, style, }: CurrencyInputProps): React.JSX.Element;
 
 interface CurrencyDisplayProps {
     value: number | string;

package/dist/index.d.ts

@@ -150,8 +150,10 @@ interface InputProps extends TextInputProps {
     type?: 'text' | 'password';
     /** Style for the outer container \`View\`. Use \`style\` (from \`TextInputProps\`) to style the \`TextInput\` itself. */
     containerStyle?: ViewStyle;
+    /** Style for the inner border wrapper (overrides padding, etc). */
+    inputWrapperStyle?: ViewStyle;
 }
-declare function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type, containerStyle, style, onFocus, onBlur, secureTextEntry, ...props }: InputProps): React.JSX.Element;
+declare function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type, containerStyle, inputWrapperStyle, style, onFocus, onBlur, secureTextEntry, ...props }: InputProps): React.JSX.Element;
 
 type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'successOutline' | 'destructiveOutline';
 type BadgeSize = 'sm' | 'md' | 'lg';
@@ -245,7 +247,7 @@ declare function Avatar({ src, fallback, size, style }: AvatarProps): React.JSX.
 
 type AlertBannerVariant = 'default' | 'destructive' | 'success';
 interface AlertBannerProps {
-    title?: string;
+    title: string;
     description?: string;
     variant?: AlertBannerVariant;
     icon?: React.ReactNode;
@@ -501,12 +503,10 @@ interface CurrencyInputProps {
     hint?: string;
     placeholder?: string;
     editable?: boolean;
-    /** Icon or element rendered at the left edge inside the input field. */
-    prefixIcon?: React.ReactNode;
     containerStyle?: ViewStyle;
     style?: TextStyle;
 }
-declare function CurrencyInput({ value, onChangeText, onChangeValue, prefix, thousandsSeparator, size, label, error, hint, placeholder, editable, prefixIcon, containerStyle, style, }: CurrencyInputProps): React.JSX.Element;
+declare function CurrencyInput({ value, onChangeText, onChangeValue, prefix, thousandsSeparator, size, label, error, hint, placeholder, editable, containerStyle, style, }: CurrencyInputProps): React.JSX.Element;
 
 interface CurrencyDisplayProps {
     value: number | string;

package/dist/index.js

@@ -393,7 +393,7 @@ function Text2({ variant = "body", color, style, children, ...props }) {
   );
 }
 var webInputResetStyle = reactNative.Platform.OS === "web" ? { outlineStyle: "none", outlineWidth: 0, outlineColor: "transparent", boxShadow: "none" } : {};
-function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type = "text", containerStyle, style, onFocus, onBlur, secureTextEntry, ...props }) {
+function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type = "text", containerStyle, inputWrapperStyle, style, onFocus, onBlur, secureTextEntry, ...props }) {
   const { colors } = useTheme();
   const [focused, setFocused] = React25.useState(false);
   const [showPassword, setShowPassword] = React25.useState(false);
@@ -409,7 +409,8 @@ function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, p
         {
           borderColor: error ? colors.destructive : focused ? colors.ring ?? colors.primary : colors.border,
           backgroundColor: colors.background
-        }
+        },
+        inputWrapperStyle
       ]
     },
     effectivePrefix ? typeof effectivePrefix === "string" ? /* @__PURE__ */ React25__default.default.createElement(reactNative.Text, { style: [styles3.prefixText, { color: colors.mutedForeground }, prefixStyle], allowFontScaling: true }, effectivePrefix) : /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: styles3.prefixContainer }, effectivePrefix) : null,
@@ -2199,10 +2200,10 @@ function CurrencyInput({
   hint,
   placeholder,
   editable,
-  prefixIcon,
   containerStyle,
   style
 }) {
+  const { colors } = useTheme();
   const handleChange = (text) => {
     const withoutPrefix = prefix && text.startsWith(prefix) ? text.slice(prefix.length) : text;
     const formatted = formatCurrency(withoutPrefix, thousandsSeparator);
@@ -2213,6 +2214,7 @@ function CurrencyInput({
     onChangeValue?.(isNaN(raw) ? 0 : raw);
   };
   const inputStyle = size === "large" ? { fontFamily: "Poppins-Regular", fontSize: ms(36) } : { fontFamily: "Poppins-Regular" };
+  const dollarIcon = renderIcon("dollar-sign", size === "large" ? 24 : 16, colors.mutedForeground);
   const displayValue = value && prefix && value.startsWith(prefix) ? value.slice(prefix.length) : value;
   return /* @__PURE__ */ React25__default.default.createElement(
     Input,
@@ -2225,8 +2227,9 @@ function CurrencyInput({
       hint,
       placeholder: placeholder ?? "0",
       editable,
-      prefix: prefixIcon,
+      prefix: dollarIcon,
       containerStyle,
+      inputWrapperStyle: size === "large" ? { paddingVertical: 10 } : void 0,
       style: [inputStyle, style]
     }
   );

package/dist/index.mjs

@@ -380,7 +380,7 @@ function Text2({ variant = "body", color, style, children, ...props }) {
   );
 }
 var webInputResetStyle = Platform.OS === "web" ? { outlineStyle: "none", outlineWidth: 0, outlineColor: "transparent", boxShadow: "none" } : {};
-function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type = "text", containerStyle, style, onFocus, onBlur, secureTextEntry, ...props }) {
+function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type = "text", containerStyle, inputWrapperStyle, style, onFocus, onBlur, secureTextEntry, ...props }) {
   const { colors } = useTheme();
   const [focused, setFocused] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
@@ -396,7 +396,8 @@ function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, p
         {
           borderColor: error ? colors.destructive : focused ? colors.ring ?? colors.primary : colors.border,
           backgroundColor: colors.background
-        }
+        },
+        inputWrapperStyle
       ]
     },
     effectivePrefix ? typeof effectivePrefix === "string" ? /* @__PURE__ */ React25.createElement(Text, { style: [styles3.prefixText, { color: colors.mutedForeground }, prefixStyle], allowFontScaling: true }, effectivePrefix) : /* @__PURE__ */ React25.createElement(View, { style: styles3.prefixContainer }, effectivePrefix) : null,
@@ -2186,10 +2187,10 @@ function CurrencyInput({
   hint,
   placeholder,
   editable,
-  prefixIcon,
   containerStyle,
   style
 }) {
+  const { colors } = useTheme();
   const handleChange = (text) => {
     const withoutPrefix = prefix && text.startsWith(prefix) ? text.slice(prefix.length) : text;
     const formatted = formatCurrency(withoutPrefix, thousandsSeparator);
@@ -2200,6 +2201,7 @@ function CurrencyInput({
     onChangeValue?.(isNaN(raw) ? 0 : raw);
   };
   const inputStyle = size === "large" ? { fontFamily: "Poppins-Regular", fontSize: ms(36) } : { fontFamily: "Poppins-Regular" };
+  const dollarIcon = renderIcon("dollar-sign", size === "large" ? 24 : 16, colors.mutedForeground);
   const displayValue = value && prefix && value.startsWith(prefix) ? value.slice(prefix.length) : value;
   return /* @__PURE__ */ React25.createElement(
     Input,
@@ -2212,8 +2214,9 @@ function CurrencyInput({
       hint,
       placeholder: placeholder ?? "0",
       editable,
-      prefix: prefixIcon,
+      prefix: dollarIcon,
       containerStyle,
+      inputWrapperStyle: size === "large" ? { paddingVertical: 10 } : void 0,
       style: [inputStyle, style]
     }
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retray-dev/ui-kit",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "Personal UI Kit for React Native / Expo",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/components/AlertBanner/AlertBanner.tsx

@@ -8,7 +8,7 @@ import { renderIcon } from '../../utils/icons'
 export type AlertBannerVariant = 'default' | 'destructive' | 'success'
 
 export interface AlertBannerProps {
-  title?: string
+  title: string
   description?: string
   variant?: AlertBannerVariant
   icon?: React.ReactNode

package/src/components/CurrencyInput/CurrencyInput.tsx

@@ -2,6 +2,8 @@ import React from 'react'
 import { ViewStyle, TextStyle } from 'react-native'
 import { Input } from '../Input'
 import { ms } from '../../utils/scaling'
+import { renderIcon } from '../../utils/icons'
+import { useTheme } from '../../theme'
 
 export interface CurrencyInputProps {
   value?: string
@@ -20,8 +22,6 @@ export interface CurrencyInputProps {
   hint?: string
   placeholder?: string
   editable?: boolean
-  /** Icon or element rendered at the left edge inside the input field. */
-  prefixIcon?: React.ReactNode
   containerStyle?: ViewStyle
   style?: TextStyle
 }
@@ -44,10 +44,10 @@ export function CurrencyInput({
   hint,
   placeholder,
   editable,
-  prefixIcon,
   containerStyle,
   style,
 }: CurrencyInputProps) {
+  const { colors } = useTheme()
   const handleChange = (text: string) => {
     const withoutPrefix = prefix && text.startsWith(prefix) ? text.slice(prefix.length) : text
     const formatted = formatCurrency(withoutPrefix, thousandsSeparator)
@@ -60,6 +60,8 @@ export function CurrencyInput({
 
   const inputStyle: TextStyle = size === 'large' ? { fontFamily: 'Poppins-Regular', fontSize: ms(36) } : { fontFamily: 'Poppins-Regular' }
 
+  const dollarIcon = renderIcon('dollar-sign', size === 'large' ? 24 : 16, colors.mutedForeground)
+
   // Remove prefix from display value if present
   const displayValue = value && prefix && value.startsWith(prefix) ? value.slice(prefix.length) : value
 
@@ -73,8 +75,9 @@ export function CurrencyInput({
       hint={hint}
       placeholder={placeholder ?? '0'}
       editable={editable}
-      prefix={prefixIcon}
+      prefix={dollarIcon}
       containerStyle={containerStyle}
+      inputWrapperStyle={size === 'large' ? { paddingVertical: 10 } : undefined}
       style={[inputStyle, style]}
     />
   )

package/src/components/Input/Input.tsx

@@ -42,9 +42,11 @@ export interface InputProps extends TextInputProps {
   type?: 'text' | 'password'
   /** Style for the outer container \`View\`. Use \`style\` (from \`TextInputProps\`) to style the \`TextInput\` itself. */
   containerStyle?: ViewStyle
+  /** Style for the inner border wrapper (overrides padding, etc). */
+  inputWrapperStyle?: ViewStyle
 }
 
-export function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type = 'text', containerStyle, style, onFocus, onBlur, secureTextEntry, ...props }: InputProps) {
+export function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type = 'text', containerStyle, inputWrapperStyle, style, onFocus, onBlur, secureTextEntry, ...props }: InputProps) {
   const { colors } = useTheme()
   const [focused, setFocused] = useState(false)
   const [showPassword, setShowPassword] = useState(false)
@@ -79,6 +81,7 @@ export function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixS
                 : colors.border,
             backgroundColor: colors.background,
           },
+          inputWrapperStyle,
         ]}
       >
         {effectivePrefix ? (