@startupjs-ui/password-input 0.1.3

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.1.3](https://github.com/startupjs/startupjs-ui/compare/v0.1.2...v0.1.3) (2025-12-29)
+
+**Note:** Version bump only for package @startupjs-ui/password-input
+
+
+
+
+
+## [0.1.2](https://github.com/startupjs/startupjs-ui/compare/v0.1.1...v0.1.2) (2025-12-29)
+
+
+### Features
+
+* add mdx and docs packages. Refactor docs to get rid of any @startupjs/ui usage and use startupjs-ui instead ([703c926](https://github.com/startupjs/startupjs-ui/commit/703c92636efb0421ffd11783f692fc892b74018f))
+* **password-input:** refactor PasswordInput component ([f0b711c](https://github.com/startupjs/startupjs-ui/commit/f0b711ce72fd372a8569a39c6d9b636a73a9c67a))

package/README.mdx

@@ -0,0 +1,44 @@
+import { useState } from 'react'
+import PasswordInput, { _PropsJsonSchema as PasswordInputPropsJsonSchema } from './index'
+import { Sandbox } from '@startupjs-ui/docs'
+
+# PasswordInput
+
+PasswordInput provides a text field for entering a password with a button to hide the entered text.
+PasswordInput inherits the properties of the [TextInput](/docs/forms/TextInput).
+
+```jsx
+import { PasswordInput } from 'startupjs-ui'
+```
+
+## Simple example
+
+```jsx example
+const [password, setPassword] = useState()
+
+return (
+  <PasswordInput
+    value={password}
+    onChangeText={setPassword}
+  />
+)
+```
+
+## Disabled
+
+```jsx example
+return (
+  <PasswordInput
+    disabled
+    value='Disabled'
+  />
+)
+```
+
+## Sandbox
+
+<Sandbox
+  Component={PasswordInput}
+  propsJsonSchema={PasswordInputPropsJsonSchema}
+  block
+/>

package/index.d.ts

@@ -0,0 +1,32 @@
+/* eslint-disable */
+// DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
+
+import { type RefObject } from 'react';
+import { type UITextInputProps } from '@startupjs-ui/text-input';
+export declare const _PropsJsonSchema: {};
+export interface PasswordInputProps extends UITextInputProps {
+    /** Ref to access the underlying TextInput */
+    ref?: RefObject<any>;
+    /** Custom styles for the wrapper element */
+    style?: UITextInputProps['style'];
+    /** Custom styles for the input element */
+    inputStyle?: UITextInputProps['inputStyle'];
+    /** Placeholder text */
+    placeholder?: UITextInputProps['placeholder'];
+    /** Input value @default '' */
+    value?: string;
+    /** Size preset @default 'm' */
+    size?: 'l' | 'm' | 's';
+    /** Disable input interactions @default false */
+    disabled?: boolean;
+    /** Focus event handler */
+    onFocus?: UITextInputProps['onFocus'];
+    /** Blur event handler */
+    onBlur?: UITextInputProps['onBlur'];
+    /** Change text handler */
+    onChangeText?: UITextInputProps['onChangeText'];
+    /** Error flag @private */
+    _hasError?: boolean;
+}
+declare const _default: import("react").ComponentType<PasswordInputProps>;
+export default _default;

package/index.tsx

@@ -0,0 +1,67 @@
+import {
+  useState,
+  type ReactNode,
+  type RefObject
+} from 'react'
+import { pug, observer } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import TextInput, { type UITextInputProps } from '@startupjs-ui/text-input'
+import { faEye } from '@fortawesome/free-solid-svg-icons/faEye'
+import { faEyeSlash } from '@fortawesome/free-solid-svg-icons/faEyeSlash'
+
+export const _PropsJsonSchema = {/* PasswordInputProps */}
+
+export interface PasswordInputProps extends UITextInputProps {
+  /** Ref to access the underlying TextInput */
+  ref?: RefObject<any>
+  /** Custom styles for the wrapper element */
+  style?: UITextInputProps['style']
+  /** Custom styles for the input element */
+  inputStyle?: UITextInputProps['inputStyle']
+  /** Placeholder text */
+  placeholder?: UITextInputProps['placeholder']
+  /** Input value @default '' */
+  value?: string
+  /** Size preset @default 'm' */
+  size?: 'l' | 'm' | 's'
+  /** Disable input interactions @default false */
+  disabled?: boolean
+  /** Focus event handler */
+  onFocus?: UITextInputProps['onFocus']
+  /** Blur event handler */
+  onBlur?: UITextInputProps['onBlur']
+  /** Change text handler */
+  onChangeText?: UITextInputProps['onChangeText']
+  /** Error flag @private */
+  _hasError?: boolean
+}
+
+function PasswordInput ({
+  value = '',
+  size = 'm',
+  disabled = false,
+  ref,
+  ...props
+}: PasswordInputProps): ReactNode {
+  const [textHidden, setTextHidden] = useState(true)
+
+  return pug`
+    TextInput(
+      ...props
+      ref=ref
+      autoComplete='password'
+      secureTextEntry=textHidden
+      icon=textHidden ? faEye : faEyeSlash
+      iconPosition='right'
+      numberOfLines=1
+      resize=false
+      readonly=false
+      value=value
+      size=size
+      disabled=disabled
+      onIconPress=() => setTextHidden(!textHidden)
+    )
+  `
+}
+
+export default observer(themed('PasswordInput', PasswordInput))

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@startupjs-ui/password-input",
+  "version": "0.1.3",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "index.tsx",
+  "types": "index.d.ts",
+  "type": "module",
+  "dependencies": {
+    "@startupjs-ui/core": "^0.1.3",
+    "@startupjs-ui/text-input": "^0.1.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "startupjs": "*"
+  },
+  "gitHead": "fd964ebc3892d3dd0a6c85438c0af619cc50c3f0"
+}