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

package/dist/types/stories/atoms/buttons/Button/Button.d.ts

@@ -1,7 +1,7 @@
-import { HTMLAttributeAnchorTarget } from "react";
+import React, { HTMLAttributeAnchorTarget } from "react";
 import { UnifiedIconName, IDynamicIconProps } from "../../icons";
 export type BTNActionType = "primary" | "secondary" | "alternative" | "danger";
-export interface IButtonProps extends React.ComponentPropsWithoutRef<"button"> {
+export interface IButtonProps 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/dist/types/stories/atoms/buttons/Capsule/Capsule.d.ts

@@ -3,7 +3,7 @@ import { BTNActionType } from "../Button/Button";
 /**
  * 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/dist/types/stories/atoms/icons/DynamicIcon.d.ts

@@ -11,7 +11,7 @@ export declare function isHeroIcon(name: UnifiedIconName): name is keyof typeof
 export declare function isTablerIcon(name: UnifiedIconName): name is TablerIconName;
 export declare function isFAIcon(name: UnifiedIconName): name is keyof typeof FA;
 export declare function isUnifiedIconName(name: UnifiedIconName): name is UnifiedIconName;
-export interface IDynamicIconProps extends React.ComponentProps<"i"> {
+export interface IDynamicIconProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
     icon: UnifiedIconName;
     className?: ClassNameWithAutocomplete;
     outline?: boolean;

package/dist/types/stories/atoms/icons/TablerIcon.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { TablerIconName } from "./tablerIconNames";
 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/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, 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 };
+import { IAnimatedLabelInputProps, AnimatedLabelTextArea, IAnimatedLabelTextAreaProps, IButtonDropdownProps, 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, 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/organisms/AnimatedLabelInput/AnimatedLabelInput.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { IInputFieldProps } from "@/stories/molecules/inputs/InputField";
-interface ILabelProps extends React.ComponentPropsWithoutRef<"label"> {
+interface ILabelProps extends React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {
     display: string;
 }
 export interface IAnimatedLabelInputProps extends Omit<IInputFieldProps, "handleChange"> {

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

@@ -10,19 +10,17 @@ export interface IItemProp extends HTMLAttributes<HTMLButtonElement> {
     isEmphasized?: boolean;
     key: React.Key;
 }
-export interface IDropdownClassnames {
-    groupClassname?: ClassNameWithAutocomplete;
-    itemsClassname?: ClassNameWithAutocomplete;
-    itemClassname?: ClassNameWithAutocomplete;
-    activeItemClassname?: ClassNameWithAutocomplete;
-    buttonClassname?: ClassNameWithAutocomplete;
-}
 export interface IDropdownProps extends HTMLAttributes<HTMLDivElement> {
     items: IItemProp[][];
     label: string;
     CustomDropdownTrigger?: React.ReactNode;
     id: string;
-    classNames?: IDropdownClassnames;
+    groupClassname?: ClassNameWithAutocomplete;
+    itemsClassname?: ClassNameWithAutocomplete;
+    itemClassname?: ClassNameWithAutocomplete;
+    activeItemClassname?: ClassNameWithAutocomplete;
+    buttonClassname?: ClassNameWithAutocomplete;
+    iconClassname?: ClassNameWithAutocomplete;
     placement?: Placement;
     offsetOptions?: Partial<{
         mainAxis: number;
@@ -30,7 +28,14 @@ export interface IDropdownProps extends HTMLAttributes<HTMLDivElement> {
         alignmentAxis: number | null;
     }>;
 }
-export declare const defaultClassNames: IDropdownClassnames;
+export declare const defaultClassNames: {
+    groupClassname: string;
+    itemsClassname: string;
+    itemClassname: string;
+    activeItemClassname: string;
+    buttonClassname: string;
+    iconClassname: string;
+};
 /** Comment */
 declare const Dropdown: React.FC<IDropdownProps>;
 export default Dropdown;

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

@@ -1,4 +1,4 @@
-import Dropdown, { IItemProp, IDropdownClassnames, IDropdownProps, defaultClassNames } from "./DropdownComponent";
-export type { IItemProp, IDropdownClassnames, IDropdownProps };
+import Dropdown, { IItemProp, IDropdownProps, defaultClassNames } from "./DropdownComponent";
+export type { IItemProp, IDropdownProps };
 export { defaultClassNames };
 export default Dropdown;

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

@@ -1,9 +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 Dropdown, { IDropdownProps, IItemProp } from "./DropdownComponent";
 import EmptySectionPlaceholder, { IEmptySectionPlaceholderProps } from "./EmptySectionPlaceholder";
 import FormInputWithAddons, { IFormInputWithAddonsProps } from "./FormInputWithAddons";
 import TextInputSelect, { ITextInputSelectProps } from "./TextInputSelect";
-export type { IAnimatedLabelInputProps, IAnimatedLabelTextAreaProps, IButtonDropdownProps, IDropdownClassnames, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, ITextInputSelectProps };
+export type { IAnimatedLabelInputProps, IAnimatedLabelTextAreaProps, IButtonDropdownProps, 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-rc13",
+	"version": "2.0.0-rc15",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/index.js",
@@ -17,10 +17,10 @@
 		"storybook:tw": "tailwindcss -o ./lib/tailwind.css -w ",
 		"storybook": "npm-run-all -p \"storybook:*\" ",
 		"dev": "yarn storybook",
-		"build:tw": "tailwindcss -o ./dist/lib/tailwind.css",
+		"build:tw": "tailwindcss -o ./dist/tailwind.css",
 		"build:tsc": "yarn node build.js",
 		"prepare": "yarn build",
-		"build": "npm run clean && npm-run-all -s \"build:*\" ",
+		"build": "yarn clean && npm-run-all -s \"build:*\" ",
 		"clean": "rimraf dist",
 		"create-component": "node scripts/create-component.js"
 	},
@@ -45,6 +45,7 @@
 		"@tailwindcss/forms": "^0.5.3",
 		"@tailwindcss/typography": "^0.5.9",
 		"@types/node": "18.11.18",
+		"acorn-jsx": "^5.3.2",
 		"autoprefixer": "^10.4.13",
 		"classnames": "^2.3.2",
 		"concurrently": "^7.6.0",
@@ -52,6 +53,7 @@
 		"eslint": "8.32.0",
 		"eslint-config-next": "13.1.6",
 		"eslint-plugin-storybook": "^0.6.13",
+		"fast-glob": "^3.3.1",
 		"next": "13.1.6",
 		"npm-dts": "^1.3.12",
 		"npm-run-all": "^4.1.5",
@@ -59,8 +61,21 @@
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
 		"react-icons": "^4.10.1",
+		"rimraf": "^5.0.1",
 		"storybook": "^7.1.1",
 		"tailwindcss": "^3.2.4",
 		"typescript": "^5.1.6"
+	},
+	"peerDependencies": {
+		"@floating-ui/react": "^0.25.0",
+		"@headlessui/react": "^1.7.10",
+		"@headlessui/tailwindcss": "^0.1.2",
+		"@heroicons/react": "^1.0.5",
+		"@tabler/icons": "^2.26.0",
+		"@tabler/icons-react": "^2.27.0",
+		"classnames": "^2.3.2",
+		"react": "18.2.0",
+		"react-dom": "18.2.0",
+		"react-icons": "^4.10.1"
 	}
 }

package/rollup.config.mjs

@@ -0,0 +1,42 @@
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
+
+
+const config = [
+	{
+
+		input: 'stories/index.ts',
+
+		output: [
+			{
+				file: "lib/index.js",
+				format: 'cjs',
+				sourcemap: true
+			},
+			{
+				file: "lib/index.esm.js",
+				format: 'esm',
+				sourcemap: true
+			}
+		],
+		external: ["react", "react-dom"],
+		plugins: [
+			peerDepsExternal(),
+			resolve(),
+			commonjs(),
+			typescript({
+				tsconfig: "./tsconfig.lib.json",
+			})
+		]
+	},
+	{
+		input: "lib/esm/types/index.d.ts",
+		output: [{ file: "dist/index.d.ts", format: "esm" }],
+		plugins: [dts()],
+		external: ["react", "react-dom"],
+	},
+];
+
+export default config;

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

@@ -1,12 +1,13 @@
 import Loader from "stories/atoms/loaders/Loader"
 import { default as cn } from "classnames"
-import { HTMLAttributeAnchorTarget } from "react"
+import React, { HTMLAttributeAnchorTarget } 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 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/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.tsx

@@ -1,5 +1,5 @@
 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"
@@ -31,7 +31,7 @@ export function isUnifiedIconName(name: UnifiedIconName): name is UnifiedIconNam
 	return isTablerIcon(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

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/index.ts

@@ -56,7 +56,6 @@ import {
 	AnimatedLabelTextArea,
 	IAnimatedLabelTextAreaProps,
 	IButtonDropdownProps,
-	IDropdownClassnames,
 	IDropdownProps,
 	IEmptySectionPlaceholderProps,
 	IItemProp,
@@ -93,7 +92,6 @@ export type {
 	IAnimatedLabelInputProps,
 	IAnimatedLabelTextAreaProps,
 	IButtonDropdownProps,
-	IDropdownClassnames,
 	IDropdownProps,
 	IEmptySectionPlaceholderProps,
 	IItemProp,

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

@@ -51,29 +51,16 @@ const Textarea: React.FC<ITextareaProps> = ({
 	rows = 12,
 	cols = 48,
 	onChange,
-	value: externalValue,
+	value,
 	placeholder,
 	className,
 	ref,
 	...rest
 }) => {
 	const uniqueID = useId()
-	const [value, setValue] = useState<string | undefined>(externalValue || defaultValue || "")
-	const handleOnchange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-		const targetValue = e.currentTarget.value
-		typeof onChange === "function" && onChange(targetValue)
-		setValue(targetValue)
-	}
 
 	const discriptionStyles = cn("text-sm mt-1 block", { "text-gray-500": !isError }, { "text-red-500": isError })
 
-	useEffect(() => {
-		//if the external value is updated by the parent component, reset the value in here...
-		if (externalValue !== undefined && externalValue !== null) {
-			setValue(externalValue)
-		}
-	}, [externalValue])
-
 	if (!id) id = `ta-${uniqueID}`
 
 	if (!label) {
@@ -81,7 +68,12 @@ const Textarea: React.FC<ITextareaProps> = ({
 			<textarea
 				ref={ref}
 				maxLength={maxLength}
-				onChange={handleOnchange}
+				onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
+					const targetValue = e.target.value
+					if (onChange) {
+						onChange(targetValue)
+					}
+				}}
 				rows={rows}
 				name={name}
 				id={id}
@@ -120,7 +112,12 @@ const Textarea: React.FC<ITextareaProps> = ({
 				<textarea
 					ref={ref}
 					maxLength={maxLength}
-					onChange={handleOnchange}
+					onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
+						const targetValue = e.target.value
+						if (onChange) {
+							onChange(targetValue)
+						}
+					}}
 					rows={rows}
 					name={name}
 					id={id}

package/stories/organisms/AnimatedLabelInput/AnimatedLabelInput.tsx

@@ -2,7 +2,7 @@ import React from "react"
 import { default as cn } from "classnames"
 import InputField, { IInputFieldProps } from "@/stories/molecules/inputs/InputField"
 
-interface ILabelProps extends React.ComponentPropsWithoutRef<"label"> {
+interface ILabelProps extends React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {
 	display: string
 }
 
@@ -22,42 +22,44 @@ const AnimatedLabelInput: React.FC<IAnimatedLabelInputProps> = (props: IAnimated
 	const [hasValue, setHasValue] = React.useState<boolean>(!!value)
 
 	return (
-		<div className={cn("group relative", containerStyles ? containerStyles : "")}>
-			<InputField
-				id={id}
-				isError={isError}
-				value={value}
-				handleChange={(v) => {
-					setHasValue(!!v)
-					if (handleChange) handleChange(v)
-				}}
-				{...input}
-			/>
-			<label
-				className={cn(
-					"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",
+		<>
+			<div className={cn("group relative", containerStyles ? containerStyles : "")}>
+				<InputField
+					id={id}
+					isError={isError}
+					value={value}
+					handleChange={(v) => {
+						setHasValue(!!v)
+						if (handleChange) handleChange(v)
+					}}
+					{...input}
+				/>
+				<label
+					className={cn(
+						"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 ml-1">*</span>}
-			</label>
-
-			<div className="flex flex-row space-x-3">
-				<div className="grow transition-all">
-					{message && (
-						<span className={cn("mt-1 block text-sm", isError ? "text-red-500" : "text-gray-500")}>
-							{message}
-						</span>
+						isError && "!text-red-600"
 					)}
+					htmlFor={id}
+				>
+					{label.display}
+					{required && <span className="text-red-600 ml-1">*</span>}
+				</label>
+
+				<div className="flex flex-row space-x-3">
+					<div className="grow transition-all">
+						{message && (
+							<span className={cn("mt-1 block text-sm", isError ? "text-red-500" : "text-gray-500")}>
+								{message}
+							</span>
+						)}
+					</div>
 				</div>
 			</div>
-		</div>
+		</>
 	)
 }
 

package/stories/organisms/AnimatedLabelTextArea/AnimatedLabelTextArea.tsx

@@ -13,7 +13,7 @@ export interface IAnimatedLabelTextAreaProps extends ITextareaProps {
 }
 
 const AnimatedLabelTextArea: React.FC<IAnimatedLabelTextAreaProps> = (props: IAnimatedLabelTextAreaProps) => {
-	const { id, containerStyles, message, required, isError, label, value, handleChange, ...input } = props
+	const { id, containerStyles, message, required, isError, label, value, handleChange, onChange, ...input } = props
 
 	const [hasValue, setHasValue] = React.useState<boolean>(!!value)
 
@@ -23,11 +23,11 @@ const AnimatedLabelTextArea: React.FC<IAnimatedLabelTextAreaProps> = (props: IAn
 				id={id}
 				isError={isError}
 				value={value}
+				{...input}
 				onChange={(v) => {
 					setHasValue(!!v)
 					if (handleChange) handleChange(v)
 				}}
-				{...input}
 				label={undefined}
 			/>
 			<label
@@ -41,7 +41,7 @@ const AnimatedLabelTextArea: React.FC<IAnimatedLabelTextAreaProps> = (props: IAn
 				)}
 				htmlFor={id}
 			>
-				{label}
+				{label} {`${hasValue}`}
 				{required && <span className="text-red-600 ml-1">*</span>}
 			</label>
 

package/stories/organisms/ButtonDropdown/ButtonDropdown.tsx

@@ -16,21 +16,7 @@ export interface IButtonDropdownProps {
  * Primary UI component for user interaction
  */
 const ButtonDropdown: FC<IButtonDropdownProps> = ({ button, dropDown, placement, offsetOptions }) => {
-	const dropDownClasses: IDropdownProps["classNames"] = {
-		...defaultClassNames,
-		groupClassname: cn(
-			"flex items-center justify-center rounded-l-none border !border-l-0 rounded-r  px-2 transition-all hover:!border-l-0",
-			button.actionType === "primary"
-				? "border-purple-600 bg-purple-600  !text-white  hover:border-purple-700 hover:bg-purple-700 active:!border-purple-800 active:!bg-purple-800 fill-white"
-				: "",
-			button.actionType === "secondary"
-				? "border-purple-50 bg-purple-50 !text-purple-700  hover:border-purple-100 hover:bg-purple-100 active:!border-purple-300 active:!bg-purple-300 fill-purple-700"
-				: "",
-			button.actionType === "alternative"
-				? "border-gray-300 bg-white !text-gray-700 fill-gray-700  hover:border-gray-300 hover:bg-gray-50 active:bg-gray-100"
-				: ""
-		)
-	}
+
 	return (
 		<div className="flex items-stretch focus-within:ring-purple-600 focus-within:ring-2 focus-within:ring-offset-white focus-within:ring-offset-2 rounded-[3px]">
 			<Button
@@ -65,7 +51,18 @@ const ButtonDropdown: FC<IButtonDropdownProps> = ({ button, dropDown, placement,
 							}}
 						/>
 					),
-					classNames: dropDownClasses,
+					groupClassname: cn(
+						"flex items-center justify-center rounded-l-none border !border-l-0 rounded-r  px-2 transition-all hover:!border-l-0",
+						button.actionType === "primary"
+							? "border-purple-600 bg-purple-600  !text-white  hover:border-purple-700 hover:bg-purple-700 active:!border-purple-800 active:!bg-purple-800 fill-white"
+							: "",
+						button.actionType === "secondary"
+							? "border-purple-50 bg-purple-50 !text-purple-700  hover:border-purple-100 hover:bg-purple-100 active:!border-purple-300 active:!bg-purple-300 fill-purple-700"
+							: "",
+						button.actionType === "alternative"
+							? "border-gray-300 bg-white !text-gray-700 fill-gray-700  hover:border-gray-300 hover:bg-gray-50 active:bg-gray-100"
+							: ""
+					),
 					offsetOptions: offsetOptions ?? {
 						crossAxis: 0,
 						mainAxis: 5, //up/down

package/stories/organisms/DropdownComponent/DropdownComponent.tsx

@@ -28,19 +28,17 @@ export interface IItemProp extends HTMLAttributes<HTMLButtonElement> {
 	isEmphasized?: boolean
 	key: React.Key
 }
-export interface IDropdownClassnames {
-	groupClassname?: ClassNameWithAutocomplete
-	itemsClassname?: ClassNameWithAutocomplete
-	itemClassname?: ClassNameWithAutocomplete
-	activeItemClassname?: ClassNameWithAutocomplete
-	buttonClassname?: ClassNameWithAutocomplete
-}
 export interface IDropdownProps extends HTMLAttributes<HTMLDivElement> {
 	items: IItemProp[][]
 	label: string
 	CustomDropdownTrigger?: React.ReactNode
 	id: string
-	classNames?: IDropdownClassnames
+	groupClassname?: ClassNameWithAutocomplete
+	itemsClassname?: ClassNameWithAutocomplete
+	itemClassname?: ClassNameWithAutocomplete
+	activeItemClassname?: ClassNameWithAutocomplete
+	buttonClassname?: ClassNameWithAutocomplete
+	iconClassname?: ClassNameWithAutocomplete
 	placement?: Placement
 	offsetOptions?: Partial<{
 		mainAxis: number
@@ -48,7 +46,7 @@ export interface IDropdownProps extends HTMLAttributes<HTMLDivElement> {
 		alignmentAxis: number | null
 	}>
 }
-export const defaultClassNames: IDropdownClassnames = {
+export const defaultClassNames = {
 	groupClassname: "flex inline-block text-left",
 	itemsClassname:
 		"mt-2 origin-bottom-right rounded bg-white shadow-lg z-20 divide-y divide-gray-100  border border-gray-300  ",
@@ -56,7 +54,8 @@ export const defaultClassNames: IDropdownClassnames = {
 		"group flex font-muli  cursor-pointer items-center px-4 py-2 text-sm transition-all hover:bg-gray-100 hover:text-gray-900 justify-between gap-4 ",
 	activeItemClassname: "block px-4 py-2 text-sm text-gray-700 bg-gray-100 hover:bg-gray-200 hover:text-gray-900",
 	buttonClassname:
-		"py-[2px] z-20 flex items-center  rounded outline-purple-500 transition-all   text-gray-400 hover:text-gray-600 "
+		"py-[2px] z-20 flex items-center  rounded outline-purple-500 transition-all   text-gray-400 hover:text-gray-600 ",
+	iconClassname: "ml-1 h-5 w-6"
 }
 
 /** Comment */
@@ -64,7 +63,12 @@ const Dropdown: React.FC<IDropdownProps> = ({
 	items,
 	id,
 	label,
-	classNames = defaultClassNames,
+	groupClassname = defaultClassNames.groupClassname,
+	itemsClassname = defaultClassNames.itemsClassname,
+	itemClassname = defaultClassNames.itemClassname,
+	activeItemClassname = defaultClassNames.activeItemClassname,
+	buttonClassname = defaultClassNames.buttonClassname,
+	iconClassname = defaultClassNames.iconClassname,
 	CustomDropdownTrigger,
 	placement = "bottom-start",
 	offsetOptions,
@@ -104,8 +108,6 @@ const Dropdown: React.FC<IDropdownProps> = ({
 		}
 	})
 
-	const { groupClassname, buttonClassname, itemsClassname, itemClassname, activeItemClassname } = classNames
-
 	return (
 		<div
 			{...{
@@ -132,7 +134,7 @@ const Dropdown: React.FC<IDropdownProps> = ({
 				) : (
 					<>
 						<span className="pl-1">{label}</span>
-						<DynamicIcon icon="ChevronDownIcon" className="ml-1 h-5 w-6 " />
+						<DynamicIcon icon="ChevronDownIcon" className={iconClassname} />
 					</>
 				)}
 			</button>
@@ -215,7 +217,7 @@ const Dropdown: React.FC<IDropdownProps> = ({
 																		setActiveItem(key)
 																		onClick && onClick()
 																	},
-																	key,
+																	key: key,
 																	className: cn(itemClass, "w-full"),
 																	...rest
 																}}

package/stories/organisms/DropdownComponent/index.ts

@@ -1,4 +1,4 @@
-import Dropdown, { IItemProp, IDropdownClassnames, IDropdownProps, defaultClassNames } from "./DropdownComponent"
-export type { IItemProp, IDropdownClassnames, IDropdownProps }
+import Dropdown, { IItemProp, IDropdownProps, defaultClassNames } from "./DropdownComponent"
+export type { IItemProp, IDropdownProps }
 export { defaultClassNames }
 export default Dropdown