@sparrowengg/twigs-mobile 0.1.0 → 0.1.1

package/lib/typescript/text-area/types.d.ts

@@ -0,0 +1,37 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { TextInputProps as RNTextInputProps } from 'react-native';
+import type { CommonStyleProps, BaseAccessibilityProps } from '../utils';
+export type TextAreaSize = 'lg' | 'xl';
+export type TextAreaVariant = 'default' | 'filled';
+export interface TextAreaProps extends Omit<RNTextInputProps, 'style' | 'multiline'>, CommonStyleProps, BaseAccessibilityProps {
+    /** Size preset controlling font size, border radius, and padding. @default 'lg' */
+    size?: TextAreaSize;
+    /** Visual variant. @default 'default' */
+    variant?: TextAreaVariant;
+    /** Number of visible text lines. Sets the initial height. @default 3 */
+    rows?: number;
+    /** Maximum number of rows before scrolling when autoGrow is enabled. */
+    maxRows?: number;
+    /** Whether the textarea automatically grows with content. @default true */
+    autoGrow?: boolean;
+    /** Whether the input is disabled. @default false */
+    disabled?: boolean;
+    /** Error message shown below the textarea. When present, error border styling is applied. */
+    errorMessage?: string;
+    /** Label text rendered above the textarea. */
+    label?: string;
+    /** Helper text rendered below the textarea (hidden when errorMessage is present). */
+    helperText?: string;
+    /** Show character count next to the label. Requires `maxLength` to be set. @default false */
+    showCount?: boolean;
+    /** Show a required indicator next to the label. Pass `true` for default "*" or a custom ReactElement. @default false */
+    requiredIndicator?: boolean | ReactElement;
+    /** Custom renderer for the character counter. Overrides the default `{length}/{maxLength}` display. */
+    renderCounter?: (info: {
+        length: number;
+        maxLength: number;
+    }) => ReactNode;
+    /** Set to `true` when this textarea is rendered inside a BottomSheet. Swaps the underlying input to BottomSheetTextInput for proper keyboard handling. @default false */
+    insideBottomSheet?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/text-input/constants.d.ts

@@ -1,12 +1,25 @@
 import type { TextInputSize } from './types';
 export interface TextInputSizeConfig {
+    /** Input field height in dp. */
     height: number;
+    /** Border radius in dp. */
     borderRadius: number;
+    /** Placeholder / input text font size in dp. */
     fontSize: number;
+    /** Horizontal padding inside the input in dp. */
     paddingHorizontal: number;
-    leftIconPadding: number;
-    rightIconPadding: number;
+    /** Font size for the label text above the input. */
+    labelFontSize: number;
+    /** Line height for label text. */
+    labelLineHeight: number;
+    /** Letter spacing for label text. */
+    labelLetterSpacing: number;
+    /** Line height for placeholder / input text. */
+    inputLineHeight: number;
+    /** Icon width & height in dp. */
     iconSize: number;
+    /** Gap between icon and text inside the input. */
+    iconTextGap: number;
 }
 /** Resolved size config for a given text-input size. */
 export declare const getSizeConfig: (size: TextInputSize) => TextInputSizeConfig;

package/lib/typescript/text-input/styles.d.ts

@@ -1,57 +1,43 @@
-import type { TwigsTheme } from '../theme';
-export declare const createTextInputStyles: (theme: TwigsTheme) => {
+/** Static layout styles — no theme colors here. Theme-dependent styles go in helpers or component. */
+export declare const styles: {
     container: {
         position: "relative";
         width: "100%";
     };
-    containerDisabled: {
-        opacity: number;
+    fullWidth: {
+        width: "100%";
     };
     inputWrapper: {
         position: "relative";
         width: "100%";
         borderWidth: number;
         borderStyle: "solid";
-    };
-    inputWrapperDisabled: {
-        backgroundColor: string;
-        opacity: number;
+        flexDirection: "row";
+        alignItems: "center";
     };
     textInput: {
-        borderWidth: number;
-        backgroundColor: string;
-        textAlignVertical: "center";
-        fontFamily?: string | undefined | undefined;
-        fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "light" | "medium" | "regular" | "semibold" | "condensedBold" | "condensed" | "heavy" | "black" | undefined | undefined;
+        outlineStyle?: string | undefined;
+        outlineWidth?: number | undefined;
+        outlineColor?: string | undefined;
         flex: number;
         margin: number;
         padding: number;
-        color: string;
+        borderWidth: number;
+        backgroundColor: string;
+        textAlignVertical: "center";
     };
     iconContainer: {
-        position: "absolute";
-        height: "100%";
-        zIndex: number;
-    };
-    iconContainerLeft: {
-        left: number;
-    };
-    iconContainerLeftElement: {
-        left: number;
-    };
-    iconContainerRight: {
-        right: number;
-    };
-    iconContainerRightElement: {
-        right: number;
+        justifyContent: "center";
+        alignItems: "center";
     };
-    iconButtonContainer: {
-        display: "flex";
+    labelRow: {
+        flexDirection: "row";
+        justifyContent: "space-between";
         alignItems: "center";
-        justifyContent: "center";
     };
-    fullWidth: {
-        width: "100%";
+    labelWithIndicator: {
+        flexDirection: "row";
+        alignItems: "center";
     };
 };
 //# sourceMappingURL=styles.d.ts.map

package/lib/typescript/text-input/text-input.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TextInput as RNTextInput } from 'react-native';
 import type { TextInputProps } from './types';
-/** Themed text input with size/variant presets, icon slots, error state, and password toggle. */
+/** Themed text input with size/variant presets, icon slots, label, error state, and helper text. */
 export declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<RNTextInput>>;
 //# sourceMappingURL=text-input.d.ts.map

package/lib/typescript/text-input/types.d.ts

@@ -1,57 +1,38 @@
 import type { ReactElement, ReactNode } from 'react';
-import type { TextInputProps as RNTextInputProps, TextStyle } from 'react-native';
-import type { MarginProps, PaddingProps, CommonStyleProps, BaseAccessibilityProps } from '../utils';
-export type TextInputSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+import type { TextInputProps as RNTextInputProps } from 'react-native';
+import type { CommonStyleProps, BaseAccessibilityProps } from '../utils';
+export type TextInputSize = 'lg' | 'xl';
 export type TextInputVariant = 'default' | 'filled';
-export interface TextInputProps extends MarginProps, PaddingProps, CommonStyleProps, BaseAccessibilityProps {
-    /** Size preset controlling height, font size, and icon dimensions. @default 'md' */
+export interface TextInputProps extends Omit<RNTextInputProps, 'style'>, CommonStyleProps, BaseAccessibilityProps {
+    /** Size preset controlling height, font size, and icon dimensions. @default 'lg' */
     size?: TextInputSize;
     /** Visual variant. @default 'default' */
     variant?: TextInputVariant;
-    placeholder?: string;
-    value?: string;
-    defaultValue?: string;
-    onChangeText?: (text: string) => void;
     /** Icon rendered inside the input on the left. */
     leftIcon?: ReactElement;
-    /** Icon rendered inside the input on the right. Acts as password toggle when `secureTextEntry` is set. */
+    /** Icon rendered inside the input on the right. */
     rightIcon?: ReactElement;
     /** Arbitrary element rendered on the right (outside the icon slot). */
     rightElement?: ReactElement;
     /** Arbitrary element rendered on the left (outside the icon slot). */
     leftElement?: ReactElement;
     disabled?: boolean;
-    /** When true, the bottom border turns red to indicate a validation error. */
-    errorBorder?: boolean;
-    placeholderTextColor?: string;
-    cursorColor?: string;
-    secureTextEntry?: boolean;
-    /** Controlled password visibility state — pair with `setShowPassword`. */
-    showPassword?: boolean;
-    /** Toggle callback for password visibility. */
-    setShowPassword?: (show: boolean) => void;
-    /** Style overrides applied to the inner RNTextInput. */
-    inputStyle?: TextStyle;
-    readOnly?: boolean;
-    autoCapitalize?: RNTextInputProps['autoCapitalize'];
-    autoCorrect?: RNTextInputProps['autoCorrect'];
-    autoFocus?: RNTextInputProps['autoFocus'];
-    blurOnSubmit?: RNTextInputProps['blurOnSubmit'];
-    editable?: RNTextInputProps['editable'];
-    keyboardType?: RNTextInputProps['keyboardType'];
-    maxLength?: RNTextInputProps['maxLength'];
-    multiline?: RNTextInputProps['multiline'];
-    numberOfLines?: RNTextInputProps['numberOfLines'];
-    onBlur?: RNTextInputProps['onBlur'];
-    onFocus?: RNTextInputProps['onFocus'];
-    onSubmitEditing?: RNTextInputProps['onSubmitEditing'];
-    returnKeyType?: RNTextInputProps['returnKeyType'];
-    textContentType?: RNTextInputProps['textContentType'];
-    /** Content rendered below the input (e.g. helper text). */
-    children?: ReactNode;
-    /** Error message shown below the input with `accessibilityRole="alert"`. */
+    /** Error message shown below the input. When present, error border styling is applied automatically. */
     errorMessage?: string;
-    accessibilityLabel?: string;
-    accessibilityHint?: string;
+    /** Label text rendered above the input. */
+    label?: string;
+    /** Helper text rendered below the input (hidden when errorMessage is present). */
+    helperText?: string;
+    /** Show character count next to the label. Requires `maxLength` to be set. @default false */
+    showCount?: boolean;
+    /** Show a required indicator next to the label. Pass `true` for default "*" or a custom ReactElement. @default false */
+    requiredIndicator?: boolean | ReactElement;
+    /** Custom renderer for the character counter. Overrides the default `{length}/{maxLength}` display. */
+    renderCounter?: (info: {
+        length: number;
+        maxLength: number;
+    }) => ReactNode;
+    /** Set to `true` when this input is rendered inside a BottomSheet. Swaps the underlying input to BottomSheetTextInput for proper keyboard handling. @default false */
+    insideBottomSheet?: boolean;
 }
 //# sourceMappingURL=types.d.ts.map

package/lib/typescript/toast/toast-content.d.ts

@@ -4,5 +4,5 @@ import type { ToastContentProps } from './types';
  * Visual content renderer for a single toast. Consumed by ToastItem.
  * Not exported from the public API — consumers interact via toast() and ToastProvider.
  */
-export declare const ToastContent: ({ title, description, variant: variantProp, icon, action }: ToastContentProps) => React.JSX.Element;
+export declare const ToastContent: ({ title, description, variant: variantProp, icon, action, }: ToastContentProps) => React.JSX.Element;
 //# sourceMappingURL=toast-content.d.ts.map

package/lib/typescript/utils/index.d.ts

@@ -1,7 +1,13 @@
 import type { AccessibilityRole, ViewProps, ViewStyle, TextStyle } from 'react-native';
+import { TextInput as RNTextInput } from 'react-native';
 import type { AnimatedProps } from 'react-native-reanimated';
 /** @see https://reactnative.dev/docs/accessibility */
 export interface BaseAccessibilityProps {
+    /**
+     * Used to locate a component in end-to-end tests.
+     * @see https://reactnative.dev/docs/view#testid
+     */
+    testID?: string;
     accessible?: boolean;
     accessibilityRole?: AccessibilityRole;
     accessibilityLabel?: string;
@@ -87,5 +93,6 @@ export declare const colorOpacity: (color: string, opacity: number) => string;
  * name so the property is omitted to avoid Android rendering issues.
  */
 export declare const createTextStyle: (fontFamily: string, fontWeight?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "normal" | "bold") => Pick<TextStyle, "fontFamily" | "fontWeight">;
+export declare function getBottomSheetTextInput(): typeof RNTextInput;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sparrowengg/twigs-mobile",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Twigs React Native component library",
   "main": "./lib/commonjs/index.js",
   "module": "./lib/module/index.js",
@@ -45,7 +45,8 @@
     "release:dry": "release-it --dry-run"
   },
   "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
   },
   "keywords": [
     "react-native",