@agility/plenum-ui 2.0.0-rc11 → 2.0.0-rc13

package/dist/lib/tailwind.css

@@ -771,6 +771,10 @@ select {
   bottom: 0px;
 }
 
+.\!-top-\[8px\] {
+  top: -8px !important;
+}
+
 .-bottom-10 {
   bottom: -2.5rem;
 }
@@ -931,10 +935,6 @@ select {
   top: -24rem;
 }
 
-.-top-\[9px\] {
-  top: -9px;
-}
-
 .bottom-0 {
   bottom: 0px;
 }
@@ -1139,6 +1139,10 @@ select {
   top: 1px;
 }
 
+.top-\[9px\] {
+  top: 9px;
+}
+
 .z-10 {
   z-index: 10;
 }
@@ -1736,6 +1740,10 @@ select {
   margin-bottom: 24rem;
 }
 
+.\!ml-\[\.172rem\] {
+  margin-left: .172rem !important;
+}
+
 .-ml-px {
   margin-left: -1px;
 }
@@ -1764,8 +1772,8 @@ select {
   margin-left: 0.75rem;
 }
 
-.ml-\[\.172rem\] {
-  margin-left: .172rem;
+.ml-\[3px\] {
+  margin-left: 3px;
 }
 
 .mr-4 {
@@ -54406,6 +54414,11 @@ select {
   font-family: Mulish, sans-serif;
 }
 
+.\!text-xs {
+  font-size: 0.75rem !important;
+  line-height: 1rem !important;
+}
+
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
@@ -63463,12 +63476,8 @@ select {
   --tw-ring-offset-width: 2px;
 }
 
-.group:focus-within .group-focus-within\:\!-top-\[12px\] {
-  top: -12px !important;
-}
-
-.group:focus-within .group-focus-within\:\!left-1 {
-  left: 0.25rem !important;
+.group:focus-within .group-focus-within\:\!-top-\[8px\] {
+  top: -8px !important;
 }
 
 .group:focus-within .group-focus-within\:\!ml-\[\.172rem\] {
@@ -63480,6 +63489,11 @@ select {
   line-height: 1rem !important;
 }
 
+.group:focus-within .group-focus-within\:text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
+}
+
 .group:focus-within .group-focus-within\:ring-1 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -63499,22 +63513,30 @@ select {
   --tw-ring-offset-color: #fff;
 }
 
-.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:top-2 {
-  top: 0.5rem;
+.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:\!-top-\[8px\] {
+  top: -8px !important;
 }
 
-.peer:placeholder-shown ~ .peer-placeholder-shown\:top-2 {
-  top: 0.5rem;
+.peer:placeholder-shown ~ .peer-placeholder-shown\:\!-top-\[8px\] {
+  top: -8px !important;
 }
 
-.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:text-sm {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:\!ml-\[\.172rem\] {
+  margin-left: .172rem !important;
 }
 
-.peer:placeholder-shown ~ .peer-placeholder-shown\:text-sm {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+.peer:placeholder-shown ~ .peer-placeholder-shown\:\!ml-\[\.172rem\] {
+  margin-left: .172rem !important;
+}
+
+.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:\!text-xs {
+  font-size: 0.75rem !important;
+  line-height: 1rem !important;
+}
+
+.peer:placeholder-shown ~ .peer-placeholder-shown\:\!text-xs {
+  font-size: 0.75rem !important;
+  line-height: 1rem !important;
 }
 
 .peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:text-gray-600 {

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, ITextareaProps, IToggleSwitchProps, AcceptedInputTypes, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, Textarea, ToggleSwitch, TextInput, ITextInputProps, ISimpleSelectOptions } 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, ISimpleSelectOptions };
-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 };
+import { IAnimatedLabelInputProps, AnimatedLabelTextArea, IAnimatedLabelTextAreaProps, 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, IAnimatedLabelTextAreaProps, IButtonDropdownProps, IDropdownClassnames, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, UnifiedIconName, IconName, FAIconName, BTNActionType, ITextInputProps, ISimpleSelectOptions };
+export { Avatar, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, Textarea, ToggleSwitch, AnimatedLabelInput, AnimatedLabelTextArea, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, RadialProgress, isFAIcon, isHeroIcon, isTablerIcon, isUnifiedIconName, TextInput, TextInputSelect };

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

@@ -1,12 +1,12 @@
 import React from "react";
 export type AcceptedInputTypes = "date" | "datetime-local" | "email" | "month" | "number" | "password" | "search" | "submit" | "tel" | "text" | "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 */
@@ -23,6 +23,8 @@ 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>;
 }

package/dist/types/stories/molecules/inputs/toggleSwitch/ToggleSwitch.d.ts

@@ -1,18 +1,20 @@
 import React from "react";
 import { IDynamicIconProps } from "@/stories/atoms";
+interface ToggleSwitchLabel {
+    text: string | JSX.Element;
+    className?: string;
+    xPosition?: "left" | "right";
+}
 export interface IToggleSwitchProps {
     isChecked: boolean;
     onChange: (isChecked: boolean) => void;
-    label?: {
-        text: string | JSX.Element;
-        className?: string;
-        xPosition?: "left" | "right";
-    };
-    screenReaderLabel: string;
+    label?: ToggleSwitchLabel;
+    screenReaderLabel?: string;
     name: string;
     id: string;
-    variant: "base" | "short";
+    variant?: "base" | "short";
     withIcon?: IDynamicIconProps;
+    disabled?: boolean;
 }
 declare const ToggleSwitch: React.FC<IToggleSwitchProps>;
 export default ToggleSwitch;

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

@@ -1,18 +1,16 @@
 import React from "react";
 import { IInputFieldProps } from "@/stories/molecules/inputs/InputField";
-import { ITextareaProps } from "@/stories/molecules/inputs/textArea/TextArea";
 interface ILabelProps extends React.ComponentPropsWithoutRef<"label"> {
     display: string;
 }
-export interface IAnimatedLabelInputProps {
+export interface IAnimatedLabelInputProps extends Omit<IInputFieldProps, "handleChange"> {
     id: string;
     containerStyles?: string;
     message?: string;
-    input?: IInputFieldProps;
-    textarea?: ITextareaProps;
     required?: boolean;
     isError?: boolean;
     label: ILabelProps;
+    handleChange: (value: string) => void;
 }
 declare const AnimatedLabelInput: React.FC<IAnimatedLabelInputProps>;
 export default AnimatedLabelInput;

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { ITextareaProps } from "@/stories/molecules/inputs/textArea";
+export interface IAnimatedLabelTextAreaProps extends ITextareaProps {
+    id: string;
+    containerStyles?: string;
+    message?: string;
+    required?: boolean;
+    isError?: boolean;
+    handleChange: (value: string) => void;
+}
+declare const AnimatedLabelTextArea: React.FC<IAnimatedLabelTextAreaProps>;
+export default AnimatedLabelTextArea;

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

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

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

@@ -1,8 +1,9 @@
 import AnimatedLabelInput, { IAnimatedLabelInputProps } from "./AnimatedLabelInput";
+import AnimatedLabelTextArea, { IAnimatedLabelTextAreaProps } from "./AnimatedLabelTextArea";
 import ButtonDropdown, { IButtonDropdownProps } from "./ButtonDropdown";
 import Dropdown, { IDropdownClassnames, IDropdownProps, IItemProp } from "./DropdownComponent";
 import EmptySectionPlaceholder, { IEmptySectionPlaceholderProps } from "./EmptySectionPlaceholder";
 import FormInputWithAddons, { IFormInputWithAddonsProps } from "./FormInputWithAddons";
 import TextInputSelect, { ITextInputSelectProps } from "./TextInputSelect";
-export type { IAnimatedLabelInputProps, IButtonDropdownProps, IDropdownClassnames, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, ITextInputSelectProps };
-export { AnimatedLabelInput, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, TextInputSelect };
+export type { IAnimatedLabelInputProps, IAnimatedLabelTextAreaProps, IButtonDropdownProps, IDropdownClassnames, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, ITextInputSelectProps };
+export { AnimatedLabelInput, AnimatedLabelTextArea, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, TextInputSelect };

package/package.json

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

package/stories/index.ts

@@ -53,6 +53,8 @@ import {
 // Organism Components, props, and type gaurds.
 import {
 	IAnimatedLabelInputProps,
+	AnimatedLabelTextArea,
+	IAnimatedLabelTextAreaProps,
 	IButtonDropdownProps,
 	IDropdownClassnames,
 	IDropdownProps,
@@ -89,6 +91,7 @@ export type {
 	IToggleSwitchProps,
 	AcceptedInputTypes,
 	IAnimatedLabelInputProps,
+	IAnimatedLabelTextAreaProps,
 	IButtonDropdownProps,
 	IDropdownClassnames,
 	IDropdownProps,
@@ -114,6 +117,7 @@ export {
 	Textarea,
 	ToggleSwitch,
 	AnimatedLabelInput,
+	AnimatedLabelTextArea,
 	ButtonDropdown,
 	Dropdown,
 	EmptySectionPlaceholder,

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

@@ -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,6 +38,8 @@ 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>
 }
@@ -54,28 +56,26 @@ const InputField: React.FC<IInputFieldProps> = ({
 	handleChange,
 	required,
 	clientSideCheck = true,
-	placeholder,
 	className,
+	placeholder,
 	ref,
 	...rest
 }) => {
-
 	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,

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

@@ -76,19 +76,46 @@ const Textarea: React.FC<ITextareaProps> = ({
 
 	if (!id) id = `ta-${uniqueID}`
 
+	if (!label) {
+		return (
+			<textarea
+				ref={ref}
+				maxLength={maxLength}
+				onChange={handleOnchange}
+				rows={rows}
+				name={name}
+				id={id}
+				cols={cols}
+				className={cn(
+					"peer block w-full rounded focus:border-purple-500 focus:ring-purple-500 sm:text-sm",
+					{ "border-gray-300 ": !isError },
+					{
+						"border-red-500 outline-red-500 focus:ring-red-500": isError
+					},
+					className
+				)}
+				disabled={isDisabled}
+				defaultValue={defaultValue}
+				value={value}
+				placeholder={placeholder}
+				{...rest}
+			/>
+		)
+	}
+
+	//with label
 	return (
 		<div>
-			{label && (
-				<InputLabel
-					isPlaceholder
-					isActive
-					label={label}
-					isRequired={isRequired}
-					id={id}
-					isError={isError}
-					isDisabled={isDisabled}
-				/>
-			)}
+			<InputLabel
+				isPlaceholder
+				isActive
+				label={label}
+				isRequired={isRequired}
+				id={id}
+				isError={isError}
+				isDisabled={isDisabled}
+			/>
+
 			<div>
 				<textarea
 					ref={ref}

package/stories/molecules/inputs/toggleSwitch/ToggleSwitch.tsx

@@ -2,74 +2,78 @@ import React, { useEffect, useState } from "react"
 import { default as cn } from "classnames"
 import { Switch } from "@headlessui/react"
 import { DynamicIcon, IDynamicIconProps } from "@/stories/atoms"
+
+interface ToggleSwitchLabel {
+	text: string | JSX.Element
+	className?: string
+	xPosition?: "left" | "right"
+}
+
 export interface IToggleSwitchProps {
 	isChecked: boolean
 	onChange: (isChecked: boolean) => void
-	label?: {
-		text: string | JSX.Element
-		className?: string
-		xPosition?: "left" | "right"
-	}
-	screenReaderLabel: string
+	label?: ToggleSwitchLabel
+	screenReaderLabel?: string
 	name: string
 	id: string
-	variant: "base" | "short"
+	variant?: "base" | "short"
 	withIcon?: IDynamicIconProps
+	disabled?: boolean
 }
 
 const ToggleSwitch: React.FC<IToggleSwitchProps> = ({
-  isChecked,
-  onChange,
-  label,
-  screenReaderLabel,
-  name,
-  id,
-  variant = "base",
-  withIcon,
+	isChecked,
+	onChange,
+	label,
+	screenReaderLabel,
+	name,
+	id,
+	variant = "base",
+	withIcon,
+	disabled
 }) => {
-  const [checked, setChecked] = useState<boolean>(isChecked)
-  useEffect(() => setChecked(isChecked), [isChecked])
+	const [checked, setChecked] = useState<boolean>(isChecked)
+	useEffect(() => setChecked(isChecked), [isChecked])
 
-  return (
-    <Switch.Group as={"div"} className={"flex items-center gap-2"}>
-      {label && label.xPosition === "left" && (
-        <Switch.Label className={label.className}>{label.text}</Switch.Label>
-      )}
-      <Switch
-        name={name}
-        id={id}
-        checked={checked}
-        onChange={(v: boolean) => {
-          onChange(v)
-          setChecked(v)
-        }}
-        className={cn(
-          { "w-9 h-4": variant === "short", " h-6 w-11": variant === "base" },
-          checked ? "bg-purple-600" : "bg-gray-200",
-          "relative inline-flex items-center rounded-full 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"
-        )}
-      >
-        <span className="sr-only">{screenReaderLabel}</span>
-        <span
-          className={cn(
-            checked ? "translate-x-[22px]" : "translate-x-[2px]",
-            {
-              "border border-gray-200 translate-x-0": variant === "short",
-              "!translate-x-[22px]": checked && variant === "short",
-            },
-            " h-5 w-5 transform rounded-full bg-white transition shadow-sm drop-shadow flex items-center justify-center"
-          )}
-        >
-          {withIcon && (
-            <DynamicIcon {...withIcon} className={"text-gray-400 m-[2px]"} />
-          )}
-        </span>
-      </Switch>
-      {label && label.xPosition === "right" && (
-        <Switch.Label className={label.className}>{label.text}</Switch.Label>
-      )}
-    </Switch.Group>
-  )
+	return (
+		<Switch.Group as={"div"} className={"flex items-center gap-2"}>
+			{label && label.xPosition === "left" && (
+				<Switch.Label className={label.className}>{label.text}</Switch.Label>
+			)}
+			<Switch
+				name={name}
+				id={id}
+				checked={checked}
+				onChange={(v: boolean) => {
+					onChange(v)
+					setChecked(v)
+				}}
+				className={cn(
+					{ "w-9 h-4 transition-all": variant === "short", " h-6 w-11": variant === "base" },
+					checked && disabled ? "bg-purple-200" : checked ? "bg-purple-600" : "bg-gray-200",
+					"relative inline-flex items-center rounded-full 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"
+				)}
+				disabled={disabled}
+			>
+				{screenReaderLabel && <span className="sr-only">{screenReaderLabel}</span>}
+				<span
+					className={cn(
+						checked ? "translate-x-[22px]" : "translate-x-[2px]",
+						{
+							"border border-gray-200 translate-x-0": variant === "short",
+							"!translate-x-[22px]": checked && variant === "short"
+						},
+						" h-5 w-5 transform rounded-full bg-white transition shadow-sm drop-shadow flex items-center justify-center"
+					)}
+				>
+					{withIcon && <DynamicIcon {...withIcon} className={"text-gray-400 m-[2px]"} />}
+				</span>
+			</Switch>
+			{label && label.xPosition === "right" && (
+				<Switch.Label className={label.className}>{label.text}</Switch.Label>
+			)}
+		</Switch.Group>
+	)
 }
 
 export default ToggleSwitch

package/stories/organisms/AnimatedLabelInput/AnimatedLabelInput.stories.tsx

@@ -11,11 +11,20 @@ const meta: Meta<typeof AnimatedLabelInput> = {
 export default meta
 type Story = StoryObj<typeof AnimatedLabelInput>
 export const DefaultAnimatedLabelInputsStory: Story = {
+	args: {
+		id: "test",
+		label: {
+			display: "Label"
+		}
+	} as IAnimatedLabelInputProps
+}
+
+export const DefaultAnimatedLabelInputsStoryWithPlaceHolder: Story = {
 	args: {
 		id: "test",
 		label: {
 			display: "Label"
 		},
-		input: {}
+		placeholder: "Placeholder"
 	} as IAnimatedLabelInputProps
 }

package/stories/organisms/AnimatedLabelInput/AnimatedLabelInput.tsx

@@ -1,47 +1,51 @@
 import React from "react"
 import { default as cn } from "classnames"
 import InputField, { IInputFieldProps } from "@/stories/molecules/inputs/InputField"
-import Textarea, { ITextareaProps } from "@/stories/molecules/inputs/textArea/TextArea"
 
 interface ILabelProps extends React.ComponentPropsWithoutRef<"label"> {
 	display: string
 }
 
-export interface IAnimatedLabelInputProps {
+export interface IAnimatedLabelInputProps extends Omit<IInputFieldProps, "handleChange"> {
 	id: string
 	containerStyles?: string
 	message?: string
-	input?: IInputFieldProps
-	textarea?: ITextareaProps
 	required?: boolean
 	isError?: boolean
 	label: ILabelProps
+	handleChange: (value: string) => void
 }
 
-const AnimatedLabelInput: React.FC<IAnimatedLabelInputProps> = ({
-	id,
-	label,
-	input,
-	message,
-	textarea,
-	required,
-	isError,
-	containerStyles
-}) => {
+const AnimatedLabelInput: React.FC<IAnimatedLabelInputProps> = (props: IAnimatedLabelInputProps) => {
+	const { id, containerStyles, message, required, isError, label, value, handleChange, ...input } = props
+
+	const [hasValue, setHasValue] = React.useState<boolean>(!!value)
+
 	return (
 		<div className={cn("group relative", containerStyles ? containerStyles : "")}>
-			{input && <InputField isError={isError} {...input} />}
-			{textarea && <Textarea isError={isError} {...textarea} />}
+			<InputField
+				id={id}
+				isError={isError}
+				value={value}
+				handleChange={(v) => {
+					setHasValue(!!v)
+					if (handleChange) handleChange(v)
+				}}
+				{...input}
+			/>
 			<label
 				className={cn(
-					"absolute left-1 z-10 ml-[.172rem] inline-block bg-white px-1 text-xs  transition-all peer-placeholder-shown:top-2 peer-placeholder-shown:text-sm peer-placeholder-shown:text-gray-600",
-					"-top-[9px] group-focus-within:!-top-[12px] group-focus-within:!left-1  group-focus-within:!ml-[.172rem]  group-focus-within:!text-xs",
+					"absolute z-10 ml-[3px] inline-block bg-white text-sm transition-all text-gray-500 left-1 px-1",
+					hasValue ? "!-top-[8px] !ml-[.172rem] !text-xs text-gray-600" : "top-[9px]",
+					"peer-placeholder-shown:!-top-[8px] peer-placeholder-shown:!ml-[.172rem] peer-placeholder-shown:!text-xs peer-placeholder-shown:text-gray-600",
+					"group-focus-within:!-top-[8px] group-focus-within:!ml-[.172rem] group-focus-within:!text-xs group-focus-within:text-gray-600",
+
 					isError && "!text-red-600"
 				)}
 				htmlFor={id}
 			>
 				{label.display}
-				{required && <span className="text-red-600">*</span>}
+				{required && <span className="text-red-600 ml-1">*</span>}
 			</label>
 
 			<div className="flex flex-row space-x-3">

package/stories/organisms/AnimatedLabelTextArea/AnimatedLabelTextArea.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import AnimatedLabelTextArea, { IAnimatedLabelTextAreaProps } from "./AnimatedLabelTextArea"
+
+const meta: Meta<typeof AnimatedLabelTextArea> = {
+	title: "Design System/organisms/Animated Label Text Area",
+	component: AnimatedLabelTextArea,
+	tags: ["autodocs"],
+	argTypes: {}
+}
+
+export default meta
+type Story = StoryObj<typeof AnimatedLabelTextArea>
+export const DefaultAnimatedLabelTextAreasStory: Story = {
+	args: {
+		id: "test",
+		label: "Label"
+	} as IAnimatedLabelTextAreaProps
+}
+
+export const DefaultAnimatedLabelTextAreasStoryWithPlaceholder: Story = {
+	args: {
+		id: "test",
+		label: "Label",
+		placeholder: "Placeholder"
+	} as IAnimatedLabelTextAreaProps
+}