@agility/plenum-ui 2.0.0-rc9 → 2.0.0

package/stories/atoms/buttons/Button/Button.tsx

@@ -1,12 +1,14 @@
 import Loader from "stories/atoms/loaders/Loader"
 import { default as cn } from "classnames"
-import { HTMLAttributeAnchorTarget } from "react"
+import React, { HTMLAttributeAnchorTarget, forwardRef } from "react"
 import { DynamicIcon, UnifiedIconName, IDynamicIconProps } from "../../icons"
 
 // import Loader from "../loaders/loader/Loader"
 
 export type BTNActionType = "primary" | "secondary" | "alternative" | "danger"
-export interface IButtonProps extends React.ComponentPropsWithoutRef<"button"> {
+
+export interface IButtonProps
+	extends Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> {
 	/** Is the button a Primary CTA, alternative or danger button? */
 	actionType?: BTNActionType
 	/** How lg should the button be? - Defaults to 'base'. */
@@ -31,30 +33,31 @@ export interface IButtonProps extends React.ComponentPropsWithoutRef<"button"> {
 	isLoading?: boolean
 	className?: string
 	iconObj?: React.ReactNode
-	ref?: React.LegacyRef<HTMLButtonElement>
 }
 /**
  * Primary UI component for user interaction
  */
-const Button = ({
-	actionType = "primary",
-	size = "sm",
-	label,
-	icon,
-	iconObj,
-	CustomSVGIcon,
-	fullWidth = false,
-	iconPosition = "trailing",
-	asLink,
-	isLoading = false,
-	className,
-	ref,
-	...props
-}: IButtonProps) => {
+const _Button = (
+	{
+		actionType = "primary",
+		size = "sm",
+		label,
+		icon,
+		iconObj,
+		CustomSVGIcon,
+		fullWidth = false,
+		iconPosition = "leading",
+		asLink,
+		isLoading = false,
+		className,
+		...props
+	}: IButtonProps,
+	ref: React.LegacyRef<HTMLButtonElement>
+) => {
 	const iconStyles = cn(
 		{ "text-white h-5 w-5": actionType === "primary" || actionType === "danger" },
 		{ "text-purple-700 h-5 w-5 ": actionType === "secondary" },
-		{ "text-gray-700  h-5 w-5": actionType === "alternative" }
+		{ "text-gray-400  h-5 w-5": actionType === "alternative" }
 	)
 	const loaderColors = cn(
 		{ "border-r-white": actionType === "primary" },
@@ -64,11 +67,91 @@ const Button = ({
 	)
 	const loaderSize = cn({ "h-4 w-4": size === "sm" }, { "h-5 w-5": size === "md" }, { "h-6 w-6 ": size === "lg" })
 
-	return (
+	return asLink ? (
+		//@ts-ignore
+		<a
+			{...{
+				href: asLink.href,
+				target: asLink.target,
+				title: asLink.title,
+				className: cn(
+					"inline-flex items-center justify-center gap-x-2  font-medium rounded-[3px] !ring-offset-white outline-none   focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2  focus-within:ring-2 focus-within:ring-purple-600 focus-within:ring-offset-2  focus:ring-2 focus:ring-purple-600 focus:ring-offset-2  active:ring-2 active:ring-purple-600 active:ring-offset-2 transition-all",
+					{ "w-full": fullWidth },
+					{ "px-[11px] py-[7px] text-xs": size === "xs" },
+					{ "px-[13px] py-[9px] text-sm": size === "sm" },
+					{ "px-[17px] py-[9px] text-sm": size === "md" },
+					{ "px-[17px] py-[9px] text-base": size === "lg" },
+					{ "px-[25px] py-[13px] text-base": size === "xl" },
+					{
+						"bg-violet-800 text-white hover:border-violet-700 hover:bg-violet-700 disabled:bg-violet-400 disabled:focus-visible:ring-0":
+							actionType === "primary"
+					},
+					{
+						" bg-purple-50  border-purple-400 border hover:border-purple-500 text-purple-700 hover:bg-purple-100   focus-within:bg-purple-100  focus-visible:bg-purple-100 focus:bg-purple-100 active:bg-purple-100 disabled:bg-purple-50 disabled:text-purple-300 disabled:focus-visible:ring-0":
+							actionType === "secondary"
+					},
+					{
+						"border-gray-300 bg-white border  text-gray-700 hover:bg-gray-50 focus-visible:!border-gray-300 focus-within:!border-gray-300 focus:!border-gray-300 active:!border-gray-300 disabled:bg-gray-50 disabled:text-gray-300 disabled:focus-visible:ring-0":
+							actionType === "alternative"
+					},
+					{
+						" bg-red-600 text-white hover:bg-red-700 <focus-visible:!></focus-visible:!>ring-red-500 focus:!ring-red-500 active:!ring-red-500 focus-within:!ring-red-500 disabled:bg-red-400 disabled:text-gray-50 disabled:focus-visible:ring-0":
+							actionType === "danger"
+					},
+					className ? className : ""
+				),
+				onClick: props.onClick
+			}}
+		>
+			{" "}
+			{CustomSVGIcon &&
+				(isLoading ? (
+					<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
+				) : (
+					<i>{CustomSVGIcon}</i>
+				))}
+			{iconObj &&
+				iconPosition === "leading" &&
+				(!isLoading ? (
+					<>{iconObj}</>
+				) : (
+					<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
+				))}
+			{icon &&
+				iconPosition === "leading" &&
+				(isLoading ? (
+					<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
+				) : typeof icon === "string" ? (
+					<DynamicIcon {...{ icon: icon, className: iconStyles }} />
+				) : (
+					<DynamicIcon {...{ ...icon, className: iconStyles }} />
+				))}
+			{!icon && !CustomSVGIcon && isLoading && (
+				<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
+			)}
+			{label}
+			{icon &&
+				iconPosition === "trailing" &&
+				(isLoading ? (
+					<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
+				) : typeof icon === "string" ? (
+					<DynamicIcon {...{ icon: icon, className: iconStyles }} />
+				) : (
+					<DynamicIcon {...{ ...icon, className: iconStyles }} />
+				))}
+			{iconObj &&
+				iconPosition === "trailing" &&
+				(!isLoading ? (
+					<>{iconObj}</>
+				) : (
+					<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
+				))}
+		</a>
+	) : (
 		<button
 			type="button"
 			className={cn(
-				"inline-flex items-center justify-center gap-x-2  font-medium p-2 rounded-[3px] !ring-offset-white outline-none   focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2  focus-within:ring-2 focus-within:ring-purple-600 focus-within:ring-offset-2  focus:ring-2 focus:ring-purple-600 focus:ring-offset-2  active:ring-2 active:ring-purple-600 active:ring-offset-2 transition-all",
+				"inline-flex items-center justify-center gap-x-2  font-medium rounded-[3px] !ring-offset-white outline-none focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2  focus-within:ring-2 focus-within:ring-purple-600 focus-within:ring-offset-2  focus:ring-2 focus:ring-purple-600 focus:ring-offset-2  active:ring-2 active:ring-purple-600 active:ring-offset-2 transition-all",
 				{ "w-full": fullWidth },
 				{ "px-[11px] py-[7px] text-xs": size === "xs" },
 				{ "px-[13px] py-[9px] text-sm": size === "sm" },
@@ -76,18 +159,19 @@ const Button = ({
 				{ "px-[17px] py-[9px] text-base": size === "lg" },
 				{ "px-[25px] py-[13px] text-base": size === "xl" },
 				{
-					"bg-purple-600 text-white hover:border-purple-700 hover:bg-purple-700 ": actionType === "primary"
+					"bg-violet-800 text-violet-100 hover:border-violet-700 hover:bg-violet-700 disabled:bg-violet-400 disabled:focus-visible:ring-0":
+						actionType === "primary"
 				},
 				{
-					" bg-purple-50 text-purple-700 hover:bg-purple-200   focus-within:bg-purple-100  focus-visible:bg-purple-100 focus:bg-purple-100 active:bg-purple-100":
+					" bg-purple-50  border-purple-400 border hover:border-purple-500 text-purple-700 hover:bg-purple-100   focus-within:bg-purple-100  focus-visible:bg-purple-100 focus:bg-purple-100 active:bg-purple-100 disabled:bg-purple-50 disabled:text-purple-300 disabled:focus-visible:ring-0":
 						actionType === "secondary"
 				},
 				{
-					"border-gray-300 bg-white border  text-gray-700 hover:bg-gray-50 focus-visible:!border-gray-300 focus-within:!border-gray-300 focus:!border-gray-300 active:!border-gray-300":
+					"border-gray-300 bg-white border  text-gray-700 hover:bg-gray-50 focus-visible:!border-gray-300 focus-within:!border-gray-300 focus:!border-gray-300 active:!border-gray-300 disabled:bg-gray-50 disabled:text-gray-300 disabled:focus-visible:ring-0":
 						actionType === "alternative"
 				},
 				{
-					" bg-red-600 text-white hover:bg-red-700 <focus-visible:!></focus-visible:!>ring-red-500 focus:!ring-red-500 active:!ring-red-500 focus-within:!ring-red-500 ":
+					" bg-red-600 text-white hover:bg-red-700 <focus-visible:!></focus-visible:!>ring-red-500 focus:!ring-red-500 active:!ring-red-500 focus-within:!ring-red-500 disabled:bg-red-400 disabled:text-gray-50 disabled:focus-visible:ring-0":
 						actionType === "danger"
 				},
 				className ? className : ""
@@ -143,4 +227,6 @@ const Button = ({
 	)
 }
 
+const Button = forwardRef<HTMLButtonElement, IButtonProps>(_Button)
+
 export default Button

package/stories/atoms/buttons/Button/Danger/Danger.stories.ts

@@ -22,12 +22,24 @@ export const Danger: Story = {
 		}
 	}
 }
+
+export const DangerDisabled: Story = {
+	args: {
+		actionType: "danger",
+		label: "Danger Zone!",
+		disabled: true,
+		onClick: () => {
+			window.alert("Button clicked!")
+		}
+	}
+}
+
 export const DangerTrailingIcon: Story = {
 	args: {
 		...Danger.args,
 		icon: {
 			...defaultIcon,
-			icon: "TrashIcon"
+			icon: "IconTrash"
 		},
 		iconPosition: "trailing"
 	}
@@ -41,7 +53,7 @@ export const DangerLeadingIcon: Story = {
 export const DangerSimpleIconName: Story = {
 	args: {
 		...Danger.args,
-		icon: "TrashIcon",
+		icon: "IconTrash",
 		iconPosition: "leading"
 	}
 }

package/stories/atoms/buttons/Button/Primary/Primary.stories.ts

@@ -28,12 +28,24 @@ export const Primary: Story = {
 		}
 	}
 }
+
+export const PrimaryDisabled: Story = {
+	args: {
+		actionType: "primary",
+		label: "Button",
+		disabled: true,
+		onClick: () => {
+			window.alert("Button clicked!")
+		}
+	}
+}
+
 export const PrimaryLeadingIcon: Story = {
 	args: {
 		...Primary.args,
 		icon: {
 			...defaultIcon,
-			icon: "CheckIcon",
+			icon: "IconCheck",
 			outline: false
 		},
 		iconPosition: "leading"
@@ -42,7 +54,7 @@ export const PrimaryLeadingIcon: Story = {
 export const PrimarySimpleIconName: Story = {
 	args: {
 		...Primary.args,
-		icon: "CheckIcon",
+		icon: "IconCheck",
 		iconPosition: "leading"
 	}
 }

package/stories/atoms/buttons/Button/Secondary/Secondary.stories.ts

@@ -28,6 +28,18 @@ export const Secondary: Story = {
 		}
 	}
 }
+
+export const SecondaryDisabled: Story = {
+	args: {
+		actionType: "secondary",
+		label: "Button",
+		disabled: true,
+		onClick: () => {
+			window.alert("Button clicked!")
+		}
+	}
+}
+
 export const SecondaryTrailingIcon: Story = {
 	args: {
 		...Secondary.args,
@@ -44,7 +56,7 @@ export const SecondaryLeadingIcon: Story = {
 export const SecondarySimpleIconName: Story = {
 	args: {
 		...Secondary.args,
-		icon: "BellIcon",
+		icon: "IconBell",
 		iconPosition: "leading"
 	}
 }

package/stories/atoms/buttons/Button/defaultArgs.ts

@@ -1,7 +1,7 @@
 import { IDynamicIconProps } from "../../icons"
 
 const defaultIcon: IDynamicIconProps = {
-	icon: "BellIcon",
+	icon: "IconBell",
 	className: "w-5 h-5",
 	outline: true
 }

package/stories/atoms/buttons/Capsule/Capsule.tsx

@@ -6,7 +6,8 @@ import { UnifiedIconName } from "../../icons/DynamicIcon"
 /**
  * Capsule Style Button
  */
-export interface ICapsuleProps extends React.ComponentPropsWithoutRef<"button"> {
+export interface ICapsuleProps
+	extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
 	/** Is the button a Primary CTA, alternative or danger button? */
 	actionType: BTNActionType
 	/** How lg should the button be? - Defaults to 'base'. */

package/stories/atoms/icons/DynamicIcon.stories.ts

@@ -29,7 +29,7 @@ export const TablerIconSolid: Story = {
 }
 export const TablerIconOutline: Story = {
 	args: {
-		icon: "TrashIcon",
+		icon: "IconTrash",
 		outline: true
 	}
 }

package/stories/atoms/icons/DynamicIcon.tsx

@@ -1,20 +1,18 @@
 import React from "react"
-// TODO: Fix heroicons support 
+// TODO: Fix heroicons support
 import * as SolidIcons from "@heroicons/react/solid"
 import * as OutlineIcons from "@heroicons/react/outline"
-import * as TablerIconComponents from "@tabler/icons-react"
 import * as FA from "react-icons/fa"
 import { tablerIconNames, TablerIconName } from "./tablerIconNames"
 import { default as cn } from "classnames"
 
-import TablerIcon from "./TablerIcon"
 import { ClassNameWithAutocomplete } from "@/utils/types"
+import TablerIcon from "./TablerIcon"
 
 export type IconName = keyof typeof SolidIcons | keyof typeof OutlineIcons
-
 export type FAIconName = keyof typeof FA
 
-export type UnifiedIconName = IconName | TablerIconName | FAIconName
+export type UnifiedIconName = TablerIconName | IconName | FAIconName
 
 export function isHeroIcon(name: UnifiedIconName): name is keyof typeof SolidIcons | keyof typeof OutlineIcons {
 	return name in SolidIcons || name in OutlineIcons
@@ -27,11 +25,12 @@ export function isTablerIcon(name: UnifiedIconName): name is TablerIconName {
 export function isFAIcon(name: UnifiedIconName): name is keyof typeof FA {
 	return name in FA
 }
+
 export function isUnifiedIconName(name: UnifiedIconName): name is UnifiedIconName {
-	return isTablerIcon(name) || isFAIcon(name)
+	return isTablerIcon(name) // || isHeroIcon(name) || isFAIcon(name)
 }
 
-export interface IDynamicIconProps extends React.ComponentProps<"i"> {
+export interface IDynamicIconProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
 	icon: UnifiedIconName
 	className?: ClassNameWithAutocomplete
 	outline?: boolean
@@ -62,6 +61,7 @@ export const DynamicIcon = ({
 			/>
 		)
 	}
+
 	if (isFAIcon(icon)) {
 		const Icon = FA[icon]
 		return (

package/stories/atoms/icons/IconWithShadow.stories.ts

@@ -11,13 +11,13 @@ type Story = StoryObj<typeof IconWithShadow>
 
 export const HeroIconSolid: Story = {
 	args: {
-		icon: "CubeTransparentIcon",
+		icon: "IconCube",
 		outline: false
 	}
 }
 export const HeroIconOutline: Story = {
 	args: {
-		icon: "CubeTransparentIcon",
+		icon: "IconCube",
 		outline: true
 	}
 }
@@ -35,7 +35,7 @@ export const TablerIconOutline: Story = {
 }
 export const FAIcon: Story = {
 	args: {
-		icon: "FaGithub",
+		icon: "IconBrandGithub",
 		outline: true
 	}
 }

package/stories/atoms/icons/TablerIcon.tsx

@@ -3,7 +3,7 @@ import { TablerIconName } from "./tablerIconNames"
 import * as TablerIcons from "@tabler/icons-react"
 import { ClassNameWithAutocomplete } from "@/utils/types"
 
-export interface ITablerIconProps extends React.ComponentProps<"i"> {
+export interface ITablerIconProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
 	icon: TablerIconName
 	className?: ClassNameWithAutocomplete
 }

package/stories/atoms/loaders/Loader.tsx

@@ -1,15 +1,21 @@
 import React from "react"
-import classNames, { default as cn } from "classnames"
+import { default as cn } from "classnames"
 
 export interface ILoaderProps {
 	className?: string
 }
 const Loader: React.FC<ILoaderProps> = ({ className }) => {
-  const outerLoaderStyles = cn(
-    "rounded-full w-16 h-16 inline-block border-8 animate-spin m-auto",
-    className ? className : "border-purple-700 border-r-gray-200"
-  )
-  return <i className={outerLoaderStyles} role="status" />
+	return (
+		<>
+			<i
+				className={cn(
+					"rounded-full w-16 h-16 inline-block border-8 animate-spin m-auto",
+					className ? className : "border-purple-700 border-r-gray-200"
+				)}
+				role="status"
+			/>
+		</>
+	)
 }
 
 export default Loader

package/stories/atoms/loaders/NProgress/RadialProgress.tsx

@@ -31,8 +31,6 @@ const RadialProgress: React.FC<IRadialProgressProps> = ({
   }
   const drawPercentage = useMemo(() => {
     const roundCircum = Math.round(2 * r * Math.PI)
-    console.log(roundCircum, "circumference")
-    console.log(inputValue, "input value")
     return (inputValue * roundCircum) / 50
   }, [inputValue, r])
 

package/stories/index.ts

@@ -47,13 +47,15 @@ import {
 	Textarea,
 	ToggleSwitch,
 	TextInput,
-	ITextInputProps
+	ITextInputProps,
+	ISimpleSelectOptions
 } from "./molecules"
 // Organism Components, props, and type gaurds.
 import {
 	IAnimatedLabelInputProps,
+	AnimatedLabelTextArea,
+	IAnimatedLabelTextAreaProps,
 	IButtonDropdownProps,
-	IDropdownClassnames,
 	IDropdownProps,
 	IEmptySectionPlaceholderProps,
 	IItemProp,
@@ -88,8 +90,8 @@ export type {
 	IToggleSwitchProps,
 	AcceptedInputTypes,
 	IAnimatedLabelInputProps,
+	IAnimatedLabelTextAreaProps,
 	IButtonDropdownProps,
-	IDropdownClassnames,
 	IDropdownProps,
 	IEmptySectionPlaceholderProps,
 	IItemProp,
@@ -98,7 +100,8 @@ export type {
 	IconName,
 	FAIconName,
 	BTNActionType,
-	ITextInputProps
+	ITextInputProps,
+	ISimpleSelectOptions
 }
 export {
 	Avatar,
@@ -112,6 +115,7 @@ export {
 	Textarea,
 	ToggleSwitch,
 	AnimatedLabelInput,
+	AnimatedLabelTextArea,
 	ButtonDropdown,
 	Dropdown,
 	EmptySectionPlaceholder,

package/stories/molecules/inputs/InputCounter/InputCounter.tsx

@@ -10,8 +10,8 @@ export interface IInputCounterProps {
 /** Primary UI component for user interaction */
 const InputCounter: FC<IInputCounterProps> = ({ current = 0, limit }) => {
 	return (
-		<div className="mt-1 text-center text-sm text-gray-500 flex gap-1">
-			<div className="currentCount">{current}</div>
+		<div className="mt-3 text-center text-xs leading-4 font-medium text-gray-500 flex gap-1">
+			<div className="currentCount">{current ?? 0}</div>
 			{(limit || 0) > 0 && (
 				<>
 					<div>/</div>

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

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { forwardRef } from "react"
 import { default as cn } from "classnames"
 
 export type AcceptedInputTypes =
@@ -15,13 +15,13 @@ export type AcceptedInputTypes =
 	| "url"
 	| "currency"
 
-export interface IInputFieldProps extends React.ComponentPropsWithoutRef<"input"> {
+export interface IInputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
 	/** Callback on change */
 	handleChange: (value: string) => void
 	/** Input ID*/
-	id: string
+	id?: string
 	/** Input Name */
-	name: string
+	name?: string
 	/** Force the focus state on the input */
 	isFocused?: boolean
 	/** Error condition */
@@ -38,49 +38,50 @@ export interface IInputFieldProps extends React.ComponentPropsWithoutRef<"input"
 	required?: boolean
 	/** use input psuedo classes for :valid and :invalid styles. on by default */
 	clientSideCheck?: boolean
+	/** Placeholder text */
+	placeholder?: string
 	/**ref for input */
-	ref?: React.Ref<HTMLInputElement>
 }
 
-const InputField: React.FC<IInputFieldProps> = ({
-	type,
-	id,
-	name,
-	value,
-	isFocused,
-	isError,
-	isReadonly,
-	isDisabled,
-	handleChange,
-	required,
-	clientSideCheck = true,
-	placeholder,
-	className,
-	ref,
-	...rest
-}) => {
-
+const InputField = (
+	{
+		type,
+		id,
+		name,
+		value,
+		isFocused,
+		isError,
+		isReadonly,
+		isDisabled,
+		handleChange,
+		required,
+		clientSideCheck = true,
+		className,
+		placeholder,
+		...rest
+	}: IInputFieldProps,
+	ref: React.Ref<HTMLInputElement>
+) => {
 	return (
 		<input
 			{...{
+				ref,
 				type,
 				id,
-				ref,
 				name,
 				value,
 				onChange: (e) => {
-					console.log(e)
-					handleChange(e.target.value)
+					if (handleChange) handleChange(e.target.value)
 				},
 				autoFocus: isFocused,
 				readOnly: isReadonly,
 				disabled: isDisabled,
-				placeholder: placeholder || " ",
+				placeholder: placeholder || undefined,
 				required,
 				"aria-invalid": isError,
 				"aria-disabled": isDisabled,
 				className: cn(
-					"peer w-full rounded border border-gray-200  px-3 text-sm font-normal  leading-5 outline-offset-0 ring-offset-0 focus:border-purple-600 focus:ring-purple-600   ",
+					"peer w-full rounded border border-gray-300  px-3 text-sm font-normal  leading-5 outline-offset-0 ring-offset-0 focus:border-purple-600 focus:ring-purple-600   ",
 					isError ? "!border-red-600 !text-red-600 focus:!ring-red-600" : "",
 					isReadonly ? "!border-gray-400 !text-gray-500 focus:!ring-gray-400" : "",
 					className
@@ -91,4 +92,5 @@ const InputField: React.FC<IInputFieldProps> = ({
 	)
 }
 
-export default InputField
+const _InputField = forwardRef<HTMLInputElement, IInputFieldProps>(InputField)
+export default _InputField

package/stories/molecules/inputs/InputLabel/InputLabel.tsx

@@ -31,7 +31,7 @@ const InputLabel: FC<IInputLabelProps> = ({
 		{ "text-xs text-gray-700 px-1 top-[10px] bg-white": isPlaceholder && isActive },
 		{ "text-xs text-red-500 px-1 top-[10px] bg-white": isPlaceholder && isError },
 		{ "text-red-500 bg-white": !isPlaceholder && isError },
-		{ "text-gray-700/[.5]": isDisabled }
+		{ "text-gray-500/[.5]": isDisabled }
 	)
 	if (!label) return null
 	return (

package/stories/molecules/inputs/TextInput/TextInput.tsx

@@ -32,7 +32,7 @@ export interface ITextInputProps {
 	/** Max length of input character  */
 	maxLength?: number
 	/** Callback on change */
-	onChange(value: string): void
+	handleChange(value: string): void
 	/** input value */
 	value: string
 	/**Placeholder input text*/
@@ -56,7 +56,7 @@ const TextInput = (
 		message,
 		isShowCounter,
 		maxLength,
-		onChange,
+		handleChange,
 		placeholder,
 		value: externalValue,
 		className,
@@ -116,20 +116,26 @@ const TextInput = (
 			<InputField
 				onFocus={handleInputFocus}
 				onBlur={handleInputBlur}
-				handleChange={(v) => setValue(v)}
+				handleChange={(v: string) => {
+					setValue(v)
+					handleChange(v)
+				}}
 				ref={ref}
 				type={type}
 				name={name}
 				id={id}
 				className={cn(
 					"w-full rounded border py-2 px-3 text-sm font-normal leading-5",
-					{ "border-gray-300": !isFocus && !isError },
+					{ "border-gray-300": !isFocus && !isError && !isDisabled },
 					{
-						"!border-purple-500 shadow-none outline-purple-500 focus:!ring-purple-500": isFocus && !isError
+						"!border-purple-500 shadow-none outline-purple-500 focus:!ring-purple-500": isFocus && !isError && !isDisabled
 					},
 					{
 						"!border-red-500 shadow-none focus:ring-red-500": isError
 					},
+					{
+						"placeholder:text-gray-300 !border-gray-300 !outline-gray-300 focus:!ring-gray-300" : isDisabled
+					},
 					className
 				)}
 				isDisabled={isDisabled}
@@ -150,7 +156,7 @@ const TextInput = (
 				</div>
 				{isShowCounter && (
 					<div className="shrink-0">
-						<InputCounter current={Number(value?.length)} limit={maxLength} />
+						<InputCounter current={Number(value?.length)} limit={maxLength ?? 150} />
 					</div>
 				)}
 			</div>