@ttoss/ui 1.36.1 → 1.36.2

package/dist/esm/index.js

@@ -571,4 +571,53 @@ Stack.displayName = "Stack";
 
 // src/components/Paragraph.tsx
 import { Paragraph } from "theme-ui";
-export { Badge, BaseStyles, Box, Button, Card, Checkbox, CloseButton, Container, Divider, Flex, Global2 as Global, Grid, Heading, HelpText, Icon, IconButton, Image, InfiniteLinearProgress, Input, InputNumber, Label, Progress as LinearProgress, Link, Paragraph, Radio, Select, Slider, Spinner, Stack, Text, Textarea, ThemeProvider, keyframes, useBreakpointIndex, useResponsiveValue, useTheme };
+
+// src/components/InputPassword/InputPassword.tsx
+import * as React14 from "react";
+
+// src/components/InputPassword/useHidePassInput.ts
+import * as React13 from "react";
+var useHidePassInput = (defaultValue = true) => {
+  const [hidePass, setHidePass] = React13.useState(Boolean(defaultValue));
+  const {
+    icon,
+    inputType
+  } = React13.useMemo(() => {
+    return {
+      icon: hidePass ? "view-off" : "view-on",
+      inputType: hidePass ? "password" : "text"
+    };
+  }, [hidePass]);
+  const handleClick = () => {
+    setHidePass(prev => {
+      return !prev;
+    });
+  };
+  return {
+    handleClick,
+    icon,
+    inputType
+  };
+};
+
+// src/components/InputPassword/InputPassword.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+var InputPassword = /*#__PURE__*/React14.forwardRef(({
+  showPasswordByDefault,
+  ...inputPasswordProps
+}, ref) => {
+  const {
+    handleClick,
+    icon,
+    inputType
+  } = useHidePassInput(!showPasswordByDefault);
+  return /* @__PURE__ */jsx16(Input, {
+    ref,
+    ...inputPasswordProps,
+    trailingIcon: icon,
+    onTrailingIconClick: handleClick,
+    type: inputType
+  });
+});
+InputPassword.displayName = "InputPassword";
+export { Badge, BaseStyles, Box, Button, Card, Checkbox, CloseButton, Container, Divider, Flex, Global2 as Global, Grid, Heading, HelpText, Icon, IconButton, Image, InfiniteLinearProgress, Input, InputNumber, InputPassword, Label, Progress as LinearProgress, Link, Paragraph, Radio, Select, Slider, Spinner, Stack, Text, Textarea, ThemeProvider, keyframes, useBreakpointIndex, useResponsiveValue, useTheme };

package/dist/index.d.ts

@@ -91,4 +91,9 @@ type StackProps = FlexProps;
  */
 declare const Stack: React.ForwardRefExoticComponent<theme_ui.BoxProps & React.RefAttributes<HTMLElement>>;
 
-export { Badge, BadgeProps, Button, ButtonProps, CloseButton, CloseButtonProps, HelpText, HelpTextProps, Icon, IconButton, IconProps, IconType, InfiniteLinearProgress, Input, InputNumber, InputNumberProps, InputProps, Label, LabelProps, Link, LinkProps, Select, Stack, StackProps, Textarea, TextareaProps, ThemeProvider, ThemeProviderProps, useTheme };
+type InputPasswordProps = Omit<InputProps, 'trailingIcon' | 'onTrailingIconClick' | 'type'> & {
+    showPasswordByDefault?: boolean;
+};
+declare const InputPassword: React.ForwardRefExoticComponent<Omit<InputPasswordProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+
+export { Badge, BadgeProps, Button, ButtonProps, CloseButton, CloseButtonProps, HelpText, HelpTextProps, Icon, IconButton, IconProps, IconType, InfiniteLinearProgress, Input, InputNumber, InputNumberProps, InputPassword, InputPasswordProps, InputProps, Label, LabelProps, Link, LinkProps, Select, Stack, StackProps, Textarea, TextareaProps, ThemeProvider, ThemeProviderProps, useTheme };

package/dist/index.js

@@ -58,6 +58,7 @@ __export(src_exports, {
   InfiniteLinearProgress: () => InfiniteLinearProgress,
   Input: () => Input,
   InputNumber: () => InputNumber,
+  InputPassword: () => InputPassword,
   Label: () => Label,
   LinearProgress: () => import_theme_ui15.Progress,
   Link: () => Link,
@@ -646,6 +647,55 @@ Stack.displayName = "Stack";
 
 // src/components/Paragraph.tsx
 var import_theme_ui27 = require("theme-ui");
+
+// src/components/InputPassword/InputPassword.tsx
+var React14 = __toESM(require("react"));
+
+// src/components/InputPassword/useHidePassInput.ts
+var React13 = __toESM(require("react"));
+var useHidePassInput = (defaultValue = true) => {
+  const [hidePass, setHidePass] = React13.useState(Boolean(defaultValue));
+  const {
+    icon,
+    inputType
+  } = React13.useMemo(() => {
+    return {
+      icon: hidePass ? "view-off" : "view-on",
+      inputType: hidePass ? "password" : "text"
+    };
+  }, [hidePass]);
+  const handleClick = () => {
+    setHidePass(prev => {
+      return !prev;
+    });
+  };
+  return {
+    handleClick,
+    icon,
+    inputType
+  };
+};
+
+// src/components/InputPassword/InputPassword.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var InputPassword = React14.forwardRef(({
+  showPasswordByDefault,
+  ...inputPasswordProps
+}, ref) => {
+  const {
+    handleClick,
+    icon,
+    inputType
+  } = useHidePassInput(!showPasswordByDefault);
+  return /* @__PURE__ */(0, import_jsx_runtime16.jsx)(Input, {
+    ref,
+    ...inputPasswordProps,
+    trailingIcon: icon,
+    onTrailingIconClick: handleClick,
+    type: inputType
+  });
+});
+InputPassword.displayName = "InputPassword";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Badge,
@@ -668,6 +718,7 @@ var import_theme_ui27 = require("theme-ui");
   InfiniteLinearProgress,
   Input,
   InputNumber,
+  InputPassword,
   Label,
   LinearProgress,
   Link,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "1.36.1",
+  "version": "1.36.2",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "UNLICENSED",
   "author": "ttoss",
@@ -33,8 +33,8 @@
     "jest": "^29.5.0",
     "react": "^18.2.0",
     "tsup": "^6.7.0",
-    "@ttoss/test-utils": "^1.23.0",
-    "@ttoss/config": "^1.30.0"
+    "@ttoss/config": "^1.30.0",
+    "@ttoss/test-utils": "^1.23.0"
   },
   "keywords": [
     "React",

package/src/components/InputPassword/InputPassword.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { Input } from '../Input';
+import { type InputProps } from '../Input';
+import { useHidePassInput } from './useHidePassInput';
+
+export type InputPasswordProps = Omit<
+  InputProps,
+  'trailingIcon' | 'onTrailingIconClick' | 'type'
+> & {
+  showPasswordByDefault?: boolean;
+};
+
+export const InputPassword = React.forwardRef<
+  HTMLInputElement,
+  InputPasswordProps
+>(({ showPasswordByDefault, ...inputPasswordProps }, ref) => {
+  const { handleClick, icon, inputType } = useHidePassInput(
+    !showPasswordByDefault
+  );
+
+  return (
+    <Input
+      ref={ref}
+      {...inputPasswordProps}
+      trailingIcon={icon}
+      onTrailingIconClick={handleClick}
+      type={inputType}
+    />
+  );
+});
+
+InputPassword.displayName = 'InputPassword';

package/src/components/InputPassword/useHidePassInput.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+export const useHidePassInput = (defaultValue = true) => {
+  const [hidePass, setHidePass] = React.useState<boolean>(
+    Boolean(defaultValue)
+  );
+
+  const { icon, inputType } = React.useMemo(() => {
+    return {
+      icon: hidePass ? 'view-off' : 'view-on',
+      inputType: hidePass ? 'password' : 'text',
+    };
+  }, [hidePass]);
+
+  const handleClick = () => {
+    setHidePass((prev) => {
+      return !prev;
+    });
+  };
+
+  return {
+    handleClick,
+    icon,
+    inputType,
+  };
+};

package/src/index.ts

@@ -38,3 +38,7 @@ export { CloseButton, type CloseButtonProps } from './components/CloseButton';
 export { InputNumber, type InputNumberProps } from './components/InputNumber';
 export { Stack, type StackProps } from './components/Stack';
 export { Paragraph, type ParagraphProps } from './components/Paragraph';
+export {
+  InputPassword,
+  type InputPasswordProps,
+} from './components/InputPassword/InputPassword';