@beydesign/storybook 0.0.88 → 0.0.90

package/dist/stories/Form/TextInput.js

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { Box } from '@mui/material';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { HintBubble, HintBubbleSize } from '../UI';
-export const TextInput = ({ label, value, onChange, placeholder, hintText, errorText, disabled, trailingText, style, hintBubbleText, hintBubbleProps, required, labelTrailingElement, labelContainerStyle, }) => {
+export const TextInput = ({ label, value, onChange, placeholder, type = 'text', hintText, errorText, disabled, trailingText, style, hintBubbleText, hintBubbleProps, required, labelTrailingElement, labelContainerStyle, }) => {
     const [focused, setFocused] = useState(false);
     return (_jsx(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: style, children: _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', minWidth: '260px', children: [label && (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: labelContainerStyle, children: [_jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, required: required, children: label }), labelTrailingElement] })), hintBubbleText && (_jsx(HintBubble, { text: hintBubbleText, size: HintBubbleSize.sm, ...hintBubbleProps })), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', bgcolor: 'var(--colors-light-background-bg-component)', border: errorText
                         ? 'none'
@@ -11,7 +11,7 @@ export const TextInput = ({ label, value, onChange, placeholder, hintText, error
                                 ? '1px solid var(--colors-light-border-border-error)'
                                 : focused
                                     ? '1px solid var(--colors-light-border-border-component-active)'
-                                    : 'transparent'}`, children: _jsx("input", { type: "text", value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, disabled: disabled, style: {
+                                    : 'transparent'}`, children: _jsx("input", { type: type, value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, disabled: disabled, style: {
                                     border: 'none',
                                     outline: 'none',
                                     width: '100%',

package/dist/stories/Form/TextInput.stories.d.ts

@@ -34,6 +34,16 @@ declare const meta: {
                 };
             };
         };
+        type: {
+            control: "select";
+            description: string;
+            options: string[];
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
         hintText: {
             control: "text";
             description: string;
@@ -128,3 +138,5 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const Password: Story;
+export declare const Email: Story;

package/dist/stories/Form/TextInput.stories.js

@@ -28,6 +28,14 @@ const meta = {
                 type: { summary: 'string' },
             },
         },
+        type: {
+            control: 'select',
+            description: 'The type of the text input',
+            options: ['text', 'password', 'email', 'number', 'tel', 'url'],
+            table: {
+                type: { summary: 'string' },
+            },
+        },
         hintText: {
             control: 'text',
             description: 'The hint text of the text input',
@@ -108,3 +116,21 @@ export const Default = {
         hintBubbleText: 'This is a hint bubble',
     },
 };
+export const Password = {
+    args: {
+        label: 'Password',
+        value: 'password',
+        type: 'password',
+        onChange: () => { },
+        hintBubbleText: 'This is a hint bubble',
+    },
+};
+export const Email = {
+    args: {
+        label: 'Email',
+        value: 'email',
+        type: 'email',
+        onChange: () => { },
+        hintBubbleText: 'This is a hint bubble',
+    },
+};

package/dist/stories/Form/types.d.ts

@@ -1,6 +1,7 @@
 import { SxProps, Theme } from '@mui/material';
 import { HintBubbleProps } from '../UI';
 import { IconName } from '../../utils';
+import React from 'react';
 /**
  * Text area component props
  */
@@ -52,6 +53,8 @@ export type TextInputProps = {
     onChange: (value: string) => void;
     /** Text input placeholder */
     placeholder?: string;
+    /** Text input type */
+    type?: React.InputHTMLAttributes<HTMLInputElement>['type'];
     /** Text input hint */
     hintText?: string;
     /** Text input error */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beydesign/storybook",
   "private": false,
-  "version": "0.0.88",
+  "version": "0.0.90",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",