@agility/plenum-ui 2.0.0-rc6 → 2.0.0-rc8

package/dist/lib/tailwind.css

@@ -746,6 +746,10 @@ select {
   border-width: 0;
 }
 
+.pointer-events-none {
+  pointer-events: none;
+}
+
 .static {
   position: static;
 }
@@ -1015,6 +1019,10 @@ select {
   bottom: 24rem;
 }
 
+.left-0 {
+  left: 0px;
+}
+
 .left-1 {
   left: 0.25rem;
 }
@@ -2033,10 +2041,6 @@ select {
           user-select: none;
 }
 
-.resize-y {
-  resize: vertical;
-}
-
 .-scroll-m-10 {
   scroll-margin: -2.5rem;
 }
@@ -27912,6 +27916,11 @@ select {
   border-left-color: rgb(76 29 149 / 0.95);
 }
 
+.border-l-white {
+  --tw-border-opacity: 1;
+  border-left-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
+
 .border-l-yellow-100 {
   --tw-border-opacity: 1;
   border-left-color: rgb(255 245 212 / var(--tw-border-opacity));
@@ -54353,6 +54362,10 @@ select {
   padding-left: 0.75rem;
 }
 
+.pl-7 {
+  padding-left: 1.75rem;
+}
+
 .pl-\[10px\] {
   padding-left: 10px;
 }
@@ -54369,6 +54382,10 @@ select {
   padding-right: 1rem;
 }
 
+.pr-7 {
+  padding-right: 1.75rem;
+}
+
 .pr-9 {
   padding-right: 2.25rem;
 }
@@ -54377,10 +54394,6 @@ select {
   padding-right: 10px;
 }
 
-.pt-2 {
-  padding-top: 0.5rem;
-}
-
 .text-left {
   text-align: left;
 }
@@ -63039,6 +63052,10 @@ select {
   outline-color: #7933DD;
 }
 
+.outline-red-500 {
+  outline-color: #EF4444;
+}
+
 .\!ring-0 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
@@ -63142,6 +63159,14 @@ select {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
 
+.focus-within\:z-10:focus-within {
+  z-index: 10;
+}
+
+.focus-within\:z-20:focus-within {
+  z-index: 20;
+}
+
 .focus-within\:\!border-gray-300:focus-within {
   --tw-border-opacity: 1 !important;
   border-color: rgb(209 213 219 / var(--tw-border-opacity)) !important;

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

@@ -1,5 +1,5 @@
 import { IAvatarProps, IBadgeProps, IButtonProps, ICapsuleProps, IDynamicIconProps, IIconWithShadowProps, ILoaderProps, IRadialProgressProps, UnifiedIconName, IconName, FAIconName, BTNActionType, Avatar, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, RadialProgress, isFAIcon, isHeroIcon, isTablerIcon, isUnifiedIconName } from "./atoms";
-import { ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextAreaFieldProps, IToggleSwitchProps, AcceptedInputTypes, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, TextAreaField, ToggleSwitch, TextInput, ITextInputProps } from "./molecules";
-import { IAnimatedLabelInputProps, IButtonDropdownProps, IDropdownClassnames, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, AnimatedLabelInput, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons } from "./organisms";
-export type { IAvatarProps, IBadgeProps, IButtonProps, ICapsuleProps, IDynamicIconProps, IIconWithShadowProps, ILoaderProps, IRadialProgressProps, ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextAreaFieldProps, IToggleSwitchProps, AcceptedInputTypes, IAnimatedLabelInputProps, IButtonDropdownProps, IDropdownClassnames, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, UnifiedIconName, IconName, FAIconName, BTNActionType, ITextInputProps };
-export { Avatar, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, TextAreaField, ToggleSwitch, AnimatedLabelInput, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, RadialProgress, isFAIcon, isHeroIcon, isTablerIcon, isUnifiedIconName, TextInput };
+import { ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextareaProps, IToggleSwitchProps, AcceptedInputTypes, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, Textarea, ToggleSwitch, TextInput, ITextInputProps } from "./molecules";
+import { IAnimatedLabelInputProps, IButtonDropdownProps, IDropdownClassnames, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, AnimatedLabelInput, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, TextInputSelect, ITextInputSelectProps } from "./organisms";
+export type { IAvatarProps, IBadgeProps, IButtonProps, ICapsuleProps, ITextInputSelectProps, IDynamicIconProps, IIconWithShadowProps, ILoaderProps, IRadialProgressProps, ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextareaProps, IToggleSwitchProps, AcceptedInputTypes, IAnimatedLabelInputProps, IButtonDropdownProps, IDropdownClassnames, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, UnifiedIconName, IconName, FAIconName, BTNActionType, ITextInputProps };
+export { Avatar, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, Textarea, ToggleSwitch, AnimatedLabelInput, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, RadialProgress, isFAIcon, isHeroIcon, isTablerIcon, isUnifiedIconName, TextInput, TextInputSelect };

package/dist/types/stories/molecules/index.d.ts

@@ -1,3 +1,3 @@
-import { ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextAreaFieldProps, IToggleSwitchProps, AcceptedInputTypes, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, TextAreaField, ToggleSwitch, ITextInputProps, TextInput } from "./inputs";
-export type { ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextAreaFieldProps, IToggleSwitchProps, AcceptedInputTypes, ITextInputProps };
-export { Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, TextAreaField, ToggleSwitch, TextInput };
+import { ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextareaProps, IToggleSwitchProps, AcceptedInputTypes, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, Textarea, ToggleSwitch, ITextInputProps, TextInput } from "./inputs";
+export type { ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextareaProps, IToggleSwitchProps, AcceptedInputTypes, ITextInputProps };
+export { Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, Textarea, ToggleSwitch, TextInput };

package/dist/types/stories/molecules/inputs/InputField/InputField.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-export type AcceptedInputTypes = "date" | "datetime-local" | "email" | "month" | "number" | "password" | "search" | "submit" | "tel" | "text" | "url";
+export type AcceptedInputTypes = "date" | "datetime-local" | "email" | "month" | "number" | "password" | "search" | "submit" | "tel" | "text" | "url" | "currency";
 export interface IInputFieldProps extends React.ComponentPropsWithoutRef<"input"> {
     /** Callback on change */
     handleChange: (value: string) => void;

package/dist/types/stories/molecules/inputs/index.d.ts

@@ -5,8 +5,8 @@ import InputLabel, { IInputLabelProps } from "./InputLabel";
 import NestedInputButton, { INestedInputButtonProps } from "./NestedInputButton";
 import Radio, { IRadioProps } from "./radio";
 import Select, { ISelectProps } from "./select";
-import TextAreaField, { ITextAreaFieldProps } from "./textArea";
+import Textarea, { ITextareaProps } from "./textArea";
 import TextInput, { ITextInputProps } from "./TextInput";
 import ToggleSwitch, { IToggleSwitchProps } from "./toggleSwitch";
-export type { ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextAreaFieldProps, ITextInputProps, IToggleSwitchProps, AcceptedInputTypes };
-export { Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, TextAreaField, ToggleSwitch, TextInput };
+export type { ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextareaProps, ITextInputProps, IToggleSwitchProps, AcceptedInputTypes };
+export { Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, Textarea, ToggleSwitch, TextInput };

package/dist/types/stories/molecules/inputs/textArea/TextArea.d.ts

@@ -1,26 +1,35 @@
-/// <reference types="react" />
-export interface ITextAreaFieldProps extends React.ComponentPropsWithoutRef<"textarea"> {
-    /** Callback on change */
-    handleChange: (value: string) => void;
-    /** textarea ID*/
-    id: string;
-    /** textarea Name */
-    name: string;
-    /** Force the focus state on the textarea */
-    isFocused?: boolean;
-    /** Error condition */
+import React from "react";
+export interface ITextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> {
+    /** Input ID */
+    id?: string;
+    /** Input Name */
+    name?: string;
+    /** Label for the input */
+    label?: string;
+    /** Error state */
     isError?: boolean;
+    /** If field is required */
+    isRequired?: boolean;
     /** Disabled state */
     isDisabled?: boolean;
-    /** Readonly state */
-    isReadonly?: boolean;
-    /** textarea value */
-    value: string;
-    /** If field is required */
-    required?: boolean;
-    /**Allow Text Area Resize*/
-    textAreaResize?: boolean;
+    /** Set default value */
+    defaultValue?: string;
+    value?: string;
+    /** Message shown under the text field */
+    message?: string;
+    /** Input character counter */
+    isShowCounter?: boolean;
+    /** Max length of input character  */
+    maxLength?: number;
+    /** Callback on change */
+    onChange?(value: string): void;
+    /** Number of rows */
+    rows?: number;
+    /** Number of cols */
+    cols?: number;
+    placeholder?: string;
     className?: string;
+    ref?: React.LegacyRef<HTMLTextAreaElement>;
 }
-declare const TextAreaField: React.FC<ITextAreaFieldProps>;
-export default TextAreaField;
+declare const Textarea: React.FC<ITextareaProps>;
+export default Textarea;

package/dist/types/stories/molecules/inputs/textArea/TextArea.stories.d.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import TextArea from "./TextArea";
-declare const meta: Meta<typeof TextArea>;
-type Story = StoryObj<typeof TextArea>;
-export declare const DefaultTextArea: Story;
+import Textarea from "./TextArea";
+declare const meta: Meta<typeof Textarea>;
+type Story = StoryObj<typeof Textarea>;
+export declare const DefaultTextarea: Story;
 export default meta;

package/dist/types/stories/molecules/inputs/textArea/index.d.ts

@@ -1,3 +1,3 @@
-import TextAreaField, { ITextAreaFieldProps } from "./TextArea";
-export type { ITextAreaFieldProps };
-export default TextAreaField;
+import TextArea, { ITextareaProps } from "./TextArea";
+export type { ITextareaProps };
+export default TextArea;

package/dist/types/stories/organisms/AnimatedLabelInput/AnimatedLabelInput.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { IInputFieldProps } from "@/stories/molecules/inputs/InputField";
-import { ITextAreaFieldProps } from "@/stories/molecules/inputs/textArea/TextArea";
+import { ITextareaProps } from "@/stories/molecules/inputs/textArea/TextArea";
 interface ILabelProps extends React.ComponentPropsWithoutRef<"label"> {
     display: string;
 }
@@ -9,7 +9,7 @@ export interface IAnimatedLabelInputProps {
     containerStyles?: string;
     message?: string;
     input?: IInputFieldProps;
-    textarea?: ITextAreaFieldProps;
+    textarea?: ITextareaProps;
     required?: boolean;
     isError?: boolean;
     label: ILabelProps;

package/dist/types/stories/organisms/TextInputSelect/InputSelect.d.ts

@@ -0,0 +1,16 @@
+import { FC } from "react";
+export type SelectOptions = {
+    label: string;
+    value: string;
+};
+export interface InputSelectProps {
+    align: "left" | "right";
+    /** Show the CTA without Background color and a border seperator */
+    inputOptions: SelectOptions[];
+    /** Onclick callback */
+    onSelectOption?(value: string): void;
+    className?: string;
+    isDisabled?: boolean;
+}
+/** Comment */
+export declare const InputSelect: FC<InputSelectProps>;

package/dist/types/stories/organisms/TextInputSelect/TextInputSelect.d.ts

@@ -0,0 +1,48 @@
+import { FC } from "react";
+import { AcceptedInputTypes } from "@/stories/molecules";
+export type SelectOptions = {
+    label: string;
+    value: string;
+};
+export interface ITextInputSelectProps {
+    /** Input type*/
+    type: AcceptedInputTypes;
+    /** Input ID */
+    id?: string;
+    /** Input Name */
+    name?: string;
+    /** Label for the input */
+    label?: string;
+    /** placeholder for the input */
+    placeholder?: string;
+    /** Force the focus state on the input */
+    isFocused?: boolean;
+    /** Error state */
+    isError?: boolean;
+    /** If field is required */
+    isRequired?: boolean;
+    /** Disabled state */
+    isDisabled?: boolean;
+    /** Set default value */
+    defaultValue?: string;
+    /** Set value */
+    value: string;
+    /** Message shown under the text field */
+    message?: string;
+    /** Input character counter */
+    isShowCounter?: boolean;
+    /** Max length of input character  */
+    maxLength?: number;
+    /** Select input location  */
+    selectLocation?: "left" | "right";
+    /** Prefix  */
+    prefix?: string;
+    /** List of options to show on the select field  */
+    inputOptions?: SelectOptions[];
+    /** Callback on base input */
+    onChange?(value: string): void;
+    /** Callback on input select field */
+    onSelectOption?(value: string): void;
+}
+declare const TextInputSelect: FC<ITextInputSelectProps>;
+export default TextInputSelect;

package/dist/types/stories/organisms/TextInputSelect/index.d.ts

@@ -0,0 +1,3 @@
+import TextInputSelect, { ITextInputSelectProps } from "./TextInputSelect";
+export type { ITextInputSelectProps };
+export default TextInputSelect;

package/dist/types/stories/organisms/index.d.ts

@@ -3,5 +3,6 @@ import ButtonDropdown, { IButtonDropdownProps } from "./ButtonDropdown";
 import Dropdown, { IDropdownClassnames, IDropdownProps, IItemProp } from "./DropdownComponent";
 import EmptySectionPlaceholder, { IEmptySectionPlaceholderProps } from "./EmptySectionPlaceholder";
 import FormInputWithAddons, { IFormInputWithAddonsProps } from "./FormInputWithAddons";
-export type { IAnimatedLabelInputProps, IButtonDropdownProps, IDropdownClassnames, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps };
-export { AnimatedLabelInput, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons };
+import TextInputSelect, { ITextInputSelectProps } from "./TextInputSelect";
+export type { IAnimatedLabelInputProps, IButtonDropdownProps, IDropdownClassnames, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, ITextInputSelectProps };
+export { AnimatedLabelInput, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, TextInputSelect };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agility/plenum-ui",
-	"version": "2.0.0-rc6",
+	"version": "2.0.0-rc8",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/index.js",

package/stories/index.ts

@@ -34,7 +34,7 @@ import {
 	INestedInputButtonProps,
 	IRadioProps,
 	ISelectProps,
-	ITextAreaFieldProps,
+	ITextareaProps,
 	IToggleSwitchProps,
 	AcceptedInputTypes,
 	Checkbox,
@@ -44,7 +44,7 @@ import {
 	NestedInputButton,
 	Radio,
 	Select,
-	TextAreaField,
+	Textarea,
 	ToggleSwitch,
 	TextInput,
 	ITextInputProps
@@ -62,7 +62,9 @@ import {
 	ButtonDropdown,
 	Dropdown,
 	EmptySectionPlaceholder,
-	FormInputWithAddons
+	FormInputWithAddons,
+	TextInputSelect,
+	ITextInputSelectProps
 } from "./organisms"
 
 export type {
@@ -70,6 +72,7 @@ export type {
 	IBadgeProps,
 	IButtonProps,
 	ICapsuleProps,
+	ITextInputSelectProps,
 	IDynamicIconProps,
 	IIconWithShadowProps,
 	ILoaderProps,
@@ -81,7 +84,7 @@ export type {
 	INestedInputButtonProps,
 	IRadioProps,
 	ISelectProps,
-	ITextAreaFieldProps,
+	ITextareaProps,
 	IToggleSwitchProps,
 	AcceptedInputTypes,
 	IAnimatedLabelInputProps,
@@ -106,7 +109,7 @@ export {
 	NestedInputButton,
 	Radio,
 	Select,
-	TextAreaField,
+	Textarea,
 	ToggleSwitch,
 	AnimatedLabelInput,
 	ButtonDropdown,
@@ -124,5 +127,6 @@ export {
 	isHeroIcon,
 	isTablerIcon,
 	isUnifiedIconName,
-	TextInput
+	TextInput,
+	TextInputSelect
 }

package/stories/molecules/index.ts

@@ -6,7 +6,7 @@ import {
 	INestedInputButtonProps,
 	IRadioProps,
 	ISelectProps,
-	ITextAreaFieldProps,
+	ITextareaProps,
 	IToggleSwitchProps,
 	AcceptedInputTypes,
 	Checkbox,
@@ -16,7 +16,7 @@ import {
 	NestedInputButton,
 	Radio,
 	Select,
-	TextAreaField,
+	Textarea,
 	ToggleSwitch,
 	ITextInputProps,
 	TextInput
@@ -30,7 +30,7 @@ export type {
 	INestedInputButtonProps,
 	IRadioProps,
 	ISelectProps,
-	ITextAreaFieldProps,
+	ITextareaProps,
 	IToggleSwitchProps,
 	AcceptedInputTypes,
 	ITextInputProps
@@ -43,7 +43,7 @@ export {
 	NestedInputButton,
 	Radio,
 	Select,
-	TextAreaField,
+	Textarea,
 	ToggleSwitch,
 	TextInput
 }

package/stories/molecules/inputs/InputField/InputField.tsx

@@ -13,6 +13,7 @@ export type AcceptedInputTypes =
 	| "tel"
 	| "text"
 	| "url"
+	| "currency"
 
 export interface IInputFieldProps extends React.ComponentPropsWithoutRef<"input"> {
 	/** Callback on change */

package/stories/molecules/inputs/index.ts

@@ -5,7 +5,7 @@ import InputLabel, { IInputLabelProps } from "./InputLabel"
 import NestedInputButton, { INestedInputButtonProps } from "./NestedInputButton"
 import Radio, { IRadioProps } from "./radio"
 import Select, { ISelectProps } from "./select"
-import TextAreaField, { ITextAreaFieldProps } from "./textArea"
+import Textarea, { ITextareaProps } from "./textArea"
 import TextInput, { ITextInputProps } from "./TextInput"
 import ToggleSwitch, { IToggleSwitchProps } from "./toggleSwitch"
 
@@ -17,7 +17,7 @@ export type {
 	INestedInputButtonProps,
 	IRadioProps,
 	ISelectProps,
-	ITextAreaFieldProps,
+	ITextareaProps,
 	ITextInputProps,
 	IToggleSwitchProps,
 	AcceptedInputTypes
@@ -31,7 +31,7 @@ export {
 	NestedInputButton,
 	Radio,
 	Select,
-	TextAreaField,
+	Textarea,
 	ToggleSwitch,
 	TextInput
 }

package/stories/molecules/inputs/textArea/TextArea.stories.ts

@@ -1,19 +1,21 @@
 import type { Meta, StoryObj } from "@storybook/react"
-import TextArea from "./TextArea"
-const meta: Meta<typeof TextArea> = {
+import Textarea from "./TextArea"
+const meta: Meta<typeof Textarea> = {
 	title: "Design System/Molecules/Inputs/TextArea",
-	component: TextArea,
+	component: Textarea,
 	tags: ["autodocs"]
 }
 const dummyText: string = `Checkmate... Life finds a way. Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? You're a very talented young man, with your own clever thoughts and ideas. Do you need a manager? Is this my espresso machine? Wh-what is-h-how did you get my espresso machine?
 
 I was part of something special. Just my luck, no ice. You really think you can fly that thing? Must go faster... go, go, go, go, go! God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs. Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should.`
-type Story = StoryObj<typeof TextArea>
-export const DefaultTextArea: Story = {
+type Story = StoryObj<typeof Textarea>
+export const DefaultTextarea: Story = {
 	args: {
 		id: "appDescription",
 		name: "description",
 		rows: 12,
+		cols: 18,
+		label: "Description",
 		placeholder: dummyText
 	}
 }