@startupjs-ui/text-input 0.3.1 → 0.3.5

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.3.5](https://github.com/startupjs/startupjs-ui/compare/v0.3.4...v0.3.5) (2026-06-19)
+
+**Note:** Version bump only for package @startupjs-ui/text-input
+
+
+
+
+
+## [0.3.4](https://github.com/startupjs/startupjs-ui/compare/v0.3.3...v0.3.4) (2026-06-18)
+
+**Note:** Version bump only for package @startupjs-ui/text-input
+
+
+
+
+
 ## [0.3.1](https://github.com/startupjs/startupjs-ui/compare/v0.3.0...v0.3.1) (2026-06-08)
 
 **Note:** Version bump only for package @startupjs-ui/text-input

package/README.mdx

@@ -3,7 +3,7 @@ import TextInput, { _PropsJsonSchema as TextInputPropsJsonSchema } from './index
 import Div from '@startupjs-ui/div'
 import Br from '@startupjs-ui/br'
 import { faSearch } from '@fortawesome/free-solid-svg-icons/faSearch'
-import { faTimesCircle } from '@fortawesome/free-solid-svg-icons/faTimesCircle'
+import { faTimesCircle } from '@fortawesome/free-solid-svg-icons'
 import { Sandbox } from '@startupjs-ui/docs'
 import './index.mdx.cssx.styl'
 
@@ -122,6 +122,15 @@ return (
 )
 ```
 
+## Custom styles and theme configuration
+
+Use `style` for the wrapper, `inputStyle` for the underlying input element, `iconStyle` for the primary icon, and `secondaryIconStyle` for the secondary icon.
+
+TextInput also exposes CSSX theme configuration for app-wide visual tuning:
+
+- **$UI.TextInput.iconColor** -- default icon color. It uses `var(--color-text-secondary)` by default.
+- **$UI.TextInput.lineHeights** -- optional per-size line heights. When both `heights[size]` and `lineHeights[size]` are numeric, TextInput uses them to calculate vertical padding and multiline height.
+
 ## Number of lines
 
 Pass `numberOfLines` to set the number of visible lines. This makes the input multiline.

package/index.cssx.styl

@@ -1,6 +1,7 @@
 // ----- CONFIG: $UI.TextInput
 $this = merge({
   textColor: var(--TextInput-text-color),
+  iconColor: var(--color-text-secondary),
   borderWidth: 1,
   heights: {
     s: 2u,
@@ -16,7 +17,8 @@ $this = merge({
     s: 0.5u,
     m: 0.75u,
     l: 1u
-  }
+  },
+  lineHeights: null
 }, $UI.TextInput, true)
 
 $this.caretColor = $this.textColor

package/index.tsx

@@ -23,7 +23,10 @@ import STYLES from './index.cssx.styl'
 const {
   config: {
     caretColor,
+    iconColor,
+    borderWidth,
     heights,
+    lineHeights,
     paddings
   }
 } = STYLES
@@ -92,6 +95,9 @@ export interface UITextInputProps extends Omit<TextInputProps, 'placeholder' | '
 function TextInput ({
   ref,
   style,
+  inputStyle,
+  iconStyle,
+  secondaryIconStyle,
   placeholder,
   value = '',
   size = 'm',
@@ -174,9 +180,29 @@ function TextInput ({
     return resize || numberOfLines > 1
   }, [resize, numberOfLines])
 
+  const legacySizing = useMemo(() => {
+    const inputHeight = heights[size]
+    const lineHeight = lineHeights?.[size]
+    if (typeof inputHeight !== 'number' || typeof lineHeight !== 'number') return
+
+    const inputBorderWidth = typeof borderWidth === 'number' ? borderWidth : 0
+    const verticalPadding = Math.max((inputHeight - lineHeight) / 2 - inputBorderWidth, 0)
+    const fullHeight = currentNumberOfLines * lineHeight + 2 * (verticalPadding + inputBorderWidth)
+
+    return {
+      fullHeight,
+      inputStyle: {
+        lineHeight,
+        paddingTop: verticalPadding,
+        paddingBottom: verticalPadding
+      }
+    }
+  }, [currentNumberOfLines, size])
+
   const fullHeight = useMemo(() => {
+    if (legacySizing) return legacySizing.fullHeight
     return currentNumberOfLines * (heights[size] as number) + (paddings[size] as number) * 2
-  }, [currentNumberOfLines, size])
+  }, [currentNumberOfLines, legacySizing, size])
 
   function onLayoutIcon (e: any) {
     if (IS_WEB) {
@@ -187,6 +213,8 @@ function TextInput ({
 
   const inputExtraProps: Record<string, any> = {}
   if (IS_ANDROID && multiline) inputExtraProps.textAlignVertical = 'top'
+  const inputMinHeightStyle = legacySizing ? null : { minHeight: fullHeight }
+  const resolvedIconColor = getColor(iconColor) || iconColor
 
   const inputStyleName = [
     size,
@@ -206,7 +234,7 @@ function TextInput ({
   }
 
   return _renderWrapper({
-    style: [style]
+    style: legacySizing ? [{ minHeight: fullHeight }, style] : [style]
   }, pug`
     RNTextInput.input-input(
       part=['input', {
@@ -214,7 +242,7 @@ function TextInput ({
         inputIconRight: icon && iconPosition === 'right'
       }]
       ref=inputRef
-      style={ minHeight: fullHeight }
+      style=[inputMinHeightStyle, legacySizing?.inputStyle, inputStyle]
       styleName=inputStyleName
       selectionColor=caretColor
       placeholder=placeholder
@@ -241,6 +269,7 @@ function TextInput ({
           part='icon'
           icon=icon
           size=ICON_SIZES[size]
+          style=[{ color: resolvedIconColor }, iconStyle]
         )
     if secondaryIcon
       Div.input-icon(
@@ -254,6 +283,7 @@ function TextInput ({
           part='secondaryIcon'
           icon=secondaryIcon
           size=ICON_SIZES[size]
+          style=[{ color: resolvedIconColor }, secondaryIconStyle]
         )
   `)
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startupjs-ui/text-input",
-  "version": "0.3.1",
+  "version": "0.3.5",
   "publishConfig": {
     "access": "public"
   },
@@ -9,14 +9,14 @@
   "type": "module",
   "dependencies": {
     "@startupjs-ui/core": "^0.3.0",
-    "@startupjs-ui/div": "^0.3.1",
-    "@startupjs-ui/icon": "^0.3.0",
-    "@startupjs-ui/span": "^0.3.1"
+    "@startupjs-ui/div": "^0.3.4",
+    "@startupjs-ui/icon": "^0.3.5",
+    "@startupjs-ui/span": "^0.3.4"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
     "startupjs": "*"
   },
-  "gitHead": "60311773bdc83f354c797a272774304502d28c58"
+  "gitHead": "8fc799070c16fb24de4ad0dbd6054108fe342d7c"
 }