@ttoss/ui 1.36.1 → 1.36.3

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.3",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "UNLICENSED",
   "author": "ttoss",
@@ -20,7 +20,7 @@
     "@iconify-icon/react": "^1.0.7",
     "@theme-ui/match-media": "^0.15.7",
     "theme-ui": "^0.15.7",
-    "@ttoss/theme": "^1.4.31"
+    "@ttoss/theme": "^1.4.32"
   },
   "peerDependencies": {
     "react": ">=16.8.0"
@@ -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';