@agility/plenum-ui 2.0.0-rc9 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (91) hide show
  1. package/README.md +104 -31
  2. package/build.js +30 -25
  3. package/dist/index.d.ts +101 -61
  4. package/dist/index.js +1 -6295
  5. package/dist/index.js.map +4 -4
  6. package/dist/{lib/tailwind.css → tailwind.css} +3729 -8120
  7. package/dist/types/stories/atoms/buttons/Button/Alternative/Alternative.stories.d.ts +1 -0
  8. package/dist/types/stories/atoms/buttons/Button/Button.d.ts +3 -7
  9. package/dist/types/stories/atoms/buttons/Button/Danger/Danger.stories.d.ts +1 -0
  10. package/dist/types/stories/atoms/buttons/Button/Primary/Primary.stories.d.ts +1 -0
  11. package/dist/types/stories/atoms/buttons/Button/Secondary/Secondary.stories.d.ts +1 -0
  12. package/dist/types/stories/atoms/buttons/Capsule/Capsule.d.ts +1 -1
  13. package/dist/types/stories/atoms/icons/DynamicIcon.d.ts +2 -2
  14. package/dist/types/stories/atoms/icons/TablerIcon.d.ts +1 -1
  15. package/dist/types/stories/index.d.ts +4 -4
  16. package/dist/types/stories/molecules/inputs/InputField/InputField.d.ts +7 -7
  17. package/dist/types/stories/molecules/inputs/TextInput/TextInput.d.ts +1 -1
  18. package/dist/types/stories/molecules/inputs/select/Select.d.ts +4 -2
  19. package/dist/types/stories/molecules/inputs/textArea/TextArea.d.ts +5 -1
  20. package/dist/types/stories/molecules/inputs/toggleSwitch/ToggleSwitch.d.ts +10 -7
  21. package/dist/types/stories/organisms/AnimatedLabelInput/AnimatedLabelInput.d.ts +5 -5
  22. package/dist/types/stories/organisms/AnimatedLabelInput/index.d.ts +1 -1
  23. package/dist/types/stories/organisms/AnimatedLabelTextArea/AnimatedLabelTextArea.d.ts +12 -0
  24. package/dist/types/stories/organisms/AnimatedLabelTextArea/index.d.ts +3 -0
  25. package/dist/types/stories/organisms/ButtonDropdown/ButtonDropdown.d.ts +1 -0
  26. package/dist/types/stories/organisms/DropdownComponent/DropdownComponent.d.ts +24 -13
  27. package/dist/types/stories/organisms/DropdownComponent/index.d.ts +2 -2
  28. package/dist/types/stories/organisms/EmptySectionPlaceholder/index.d.ts +1 -1
  29. package/dist/types/stories/organisms/index.d.ts +4 -3
  30. package/local.sh +100 -0
  31. package/package.json +36 -19
  32. package/rollup.config.mjs +42 -0
  33. package/stories/atoms/badges/Badge.tsx +1 -1
  34. package/stories/atoms/buttons/Button/Alternative/Alternative.stories.ts +10 -0
  35. package/stories/atoms/buttons/Button/Button.tsx +111 -25
  36. package/stories/atoms/buttons/Button/Danger/Danger.stories.ts +14 -2
  37. package/stories/atoms/buttons/Button/Primary/Primary.stories.ts +14 -2
  38. package/stories/atoms/buttons/Button/Secondary/Secondary.stories.ts +13 -1
  39. package/stories/atoms/buttons/Button/defaultArgs.ts +1 -1
  40. package/stories/atoms/buttons/Capsule/Capsule.tsx +2 -1
  41. package/stories/atoms/icons/DynamicIcon.stories.ts +1 -1
  42. package/stories/atoms/icons/DynamicIcon.tsx +7 -7
  43. package/stories/atoms/icons/IconWithShadow.stories.ts +3 -3
  44. package/stories/atoms/icons/TablerIcon.tsx +1 -1
  45. package/stories/atoms/loaders/Loader.tsx +12 -6
  46. package/stories/atoms/loaders/NProgress/RadialProgress.tsx +0 -2
  47. package/stories/index.ts +8 -4
  48. package/stories/molecules/inputs/InputCounter/InputCounter.tsx +2 -2
  49. package/stories/molecules/inputs/InputField/InputField.tsx +31 -29
  50. package/stories/molecules/inputs/InputLabel/InputLabel.tsx +1 -1
  51. package/stories/molecules/inputs/TextInput/TextInput.tsx +12 -6
  52. package/stories/molecules/inputs/checkbox/Checkbox.stories.ts +1 -1
  53. package/stories/molecules/inputs/checkbox/Checkbox.tsx +1 -2
  54. package/stories/molecules/inputs/combobox/ComboBox.tsx +126 -135
  55. package/stories/molecules/inputs/radio/Radio.stories.ts +2 -2
  56. package/stories/molecules/inputs/select/Select.tsx +10 -2
  57. package/stories/molecules/inputs/textArea/TextArea.stories.ts +1 -1
  58. package/stories/molecules/inputs/textArea/TextArea.tsx +57 -27
  59. package/stories/molecules/inputs/toggleSwitch/ToggleSwitch.stories.tsx +15 -16
  60. package/stories/molecules/inputs/toggleSwitch/ToggleSwitch.tsx +63 -57
  61. package/stories/molecules/tabs/index.tsx +2 -3
  62. package/stories/organisms/AnimatedLabelInput/AnimatedLabelInput.stories.tsx +10 -1
  63. package/stories/organisms/AnimatedLabelInput/AnimatedLabelInput.tsx +53 -37
  64. package/stories/organisms/AnimatedLabelInput/index.tsx +1 -1
  65. package/stories/organisms/AnimatedLabelTextArea/AnimatedLabelTextArea.stories.tsx +26 -0
  66. package/stories/organisms/AnimatedLabelTextArea/AnimatedLabelTextArea.tsx +61 -0
  67. package/stories/organisms/AnimatedLabelTextArea/index.tsx +3 -0
  68. package/stories/organisms/ButtonDropdown/ButtonDropdown.stories.tsx +59 -59
  69. package/stories/organisms/ButtonDropdown/ButtonDropdown.tsx +42 -30
  70. package/stories/organisms/DropdownComponent/Dropdown.stories.tsx +26 -2
  71. package/stories/organisms/DropdownComponent/DropdownComponent.tsx +232 -180
  72. package/stories/organisms/DropdownComponent/dropdownItems.ts +30 -9
  73. package/stories/organisms/DropdownComponent/index.ts +2 -2
  74. package/stories/organisms/EmptySectionPlaceholder/EmptySectionPlaceholder.stories.tsx +3 -3
  75. package/stories/organisms/EmptySectionPlaceholder/index.tsx +2 -1
  76. package/stories/organisms/FormInputWithAddons/FormInputWithAddons.stories.tsx +1 -1
  77. package/stories/organisms/FormInputWithAddons/FormInputWithAddons.tsx +7 -2
  78. package/stories/organisms/index.ts +12 -3
  79. package/tailwind.config.js +81 -37
  80. package/tsconfig.lib.json +13 -6
  81. package/watch.js +49 -0
  82. package/.yarnrc.yml +0 -1
  83. package/dist/types/stories/layouts/index.d.ts +0 -0
  84. package/stories/layouts/CardLayout/CardLayout.stories.tsx +0 -18
  85. package/stories/layouts/CardLayout/CardLayout.tsx +0 -22
  86. package/stories/layouts/CardLayout/index.tsx +0 -3
  87. package/stories/layouts/ModalLayout/ModalLayout.stories.tsx +0 -18
  88. package/stories/layouts/ModalLayout/ModalLayout.tsx +0 -22
  89. package/stories/layouts/ModalLayout/index.tsx +0 -3
  90. package/stories/layouts/index.ts +0 -0
  91. package/stories/organisms/DropdownComponent/Dropdown.test.tsx +0 -0
package/dist/index.d.ts CHANGED
@@ -72,6 +72,7 @@ declare module '@agility/plenum-ui/stories/atoms/buttons/Button/Alternative/Alte
72
72
  export default meta;
73
73
  type Story = StoryObj<typeof Button>;
74
74
  export const Alternative: Story;
75
+ export const AlternativeDisabled: Story;
75
76
  export const AlternativeTrailingIcon: Story;
76
77
  export const AlternativeLeadingIcon: Story;
77
78
  export const AlternativeExtraSmall: Story;
@@ -83,10 +84,10 @@ declare module '@agility/plenum-ui/stories/atoms/buttons/Button/Alternative/Alte
83
84
 
84
85
  }
85
86
  declare module '@agility/plenum-ui/stories/atoms/buttons/Button/Button' {
86
- import { HTMLAttributeAnchorTarget } from "react";
87
+ import React, { HTMLAttributeAnchorTarget } from "react";
87
88
  import { UnifiedIconName, IDynamicIconProps } from "@agility/plenum-ui/stories/atoms/icons/index";
88
89
  export type BTNActionType = "primary" | "secondary" | "alternative" | "danger";
89
- export interface IButtonProps extends React.ComponentPropsWithoutRef<"button"> {
90
+ export interface IButtonProps extends Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> {
90
91
  /** Is the button a Primary CTA, alternative or danger button? */
91
92
  actionType?: BTNActionType;
92
93
  /** How lg should the button be? - Defaults to 'base'. */
@@ -111,12 +112,8 @@ declare module '@agility/plenum-ui/stories/atoms/buttons/Button/Button' {
111
112
  isLoading?: boolean;
112
113
  className?: string;
113
114
  iconObj?: React.ReactNode;
114
- ref?: React.LegacyRef<HTMLButtonElement>;
115
115
  }
116
- /**
117
- * Primary UI component for user interaction
118
- */
119
- const Button: ({ actionType, size, label, icon, iconObj, CustomSVGIcon, fullWidth, iconPosition, asLink, isLoading, className, ref, ...props }: IButtonProps) => import("react/jsx-runtime").JSX.Element;
116
+ const Button: React.ForwardRefExoticComponent<IButtonProps & React.RefAttributes<HTMLButtonElement>>;
120
117
  export default Button;
121
118
 
122
119
  }
@@ -127,6 +124,7 @@ declare module '@agility/plenum-ui/stories/atoms/buttons/Button/Danger/Danger.st
127
124
  export default meta;
128
125
  type Story = StoryObj<typeof Button>;
129
126
  export const Danger: Story;
127
+ export const DangerDisabled: Story;
130
128
  export const DangerTrailingIcon: Story;
131
129
  export const DangerLeadingIcon: Story;
132
130
  export const DangerSimpleIconName: Story;
@@ -144,6 +142,7 @@ declare module '@agility/plenum-ui/stories/atoms/buttons/Button/Primary/Primary.
144
142
  export default meta;
145
143
  type Story = StoryObj<typeof Button>;
146
144
  export const Primary: Story;
145
+ export const PrimaryDisabled: Story;
147
146
  export const PrimaryLeadingIcon: Story;
148
147
  export const PrimarySimpleIconName: Story;
149
148
  export const PrimaryTrailingIcon: Story;
@@ -161,6 +160,7 @@ declare module '@agility/plenum-ui/stories/atoms/buttons/Button/Secondary/Second
161
160
  export default meta;
162
161
  type Story = StoryObj<typeof Button>;
163
162
  export const Secondary: Story;
163
+ export const SecondaryDisabled: Story;
164
164
  export const SecondaryTrailingIcon: Story;
165
165
  export const SecondaryLeadingIcon: Story;
166
166
  export const SecondarySimpleIconName: Story;
@@ -198,7 +198,7 @@ declare module '@agility/plenum-ui/stories/atoms/buttons/Capsule/Capsule' {
198
198
  /**
199
199
  * Capsule Style Button
200
200
  */
201
- export interface ICapsuleProps extends React.ComponentPropsWithoutRef<"button"> {
201
+ export interface ICapsuleProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
202
202
  /** Is the button a Primary CTA, alternative or danger button? */
203
203
  actionType: BTNActionType;
204
204
  /** How lg should the button be? - Defaults to 'base'. */
@@ -271,12 +271,12 @@ declare module '@agility/plenum-ui/stories/atoms/icons/DynamicIcon' {
271
271
  import { ClassNameWithAutocomplete } from "@/utils/types";
272
272
  export type IconName = keyof typeof SolidIcons | keyof typeof OutlineIcons;
273
273
  export type FAIconName = keyof typeof FA;
274
- export type UnifiedIconName = IconName | TablerIconName | FAIconName;
274
+ export type UnifiedIconName = TablerIconName | IconName | FAIconName;
275
275
  export function isHeroIcon(name: UnifiedIconName): name is keyof typeof SolidIcons | keyof typeof OutlineIcons;
276
276
  export function isTablerIcon(name: UnifiedIconName): name is TablerIconName;
277
277
  export function isFAIcon(name: UnifiedIconName): name is keyof typeof FA;
278
278
  export function isUnifiedIconName(name: UnifiedIconName): name is UnifiedIconName;
279
- export interface IDynamicIconProps extends React.ComponentProps<"i"> {
279
+ export interface IDynamicIconProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
280
280
  icon: UnifiedIconName;
281
281
  className?: ClassNameWithAutocomplete;
282
282
  outline?: boolean;
@@ -324,7 +324,7 @@ declare module '@agility/plenum-ui/stories/atoms/icons/TablerIcon' {
324
324
  import React from "react";
325
325
  import { TablerIconName } from "@agility/plenum-ui/stories/atoms/icons/tablerIconNames";
326
326
  import { ClassNameWithAutocomplete } from "@/utils/types";
327
- export interface ITablerIconProps extends React.ComponentProps<"i"> {
327
+ export interface ITablerIconProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
328
328
  icon: TablerIconName;
329
329
  className?: ClassNameWithAutocomplete;
330
330
  }
@@ -401,13 +401,10 @@ declare module '@agility/plenum-ui/stories/atoms/loaders/index' {
401
401
  }
402
402
  declare module '@agility/plenum-ui/stories/index' {
403
403
  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 "@agility/plenum-ui/stories/atoms/index";
404
- import { ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextareaProps, IToggleSwitchProps, AcceptedInputTypes, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, Textarea, ToggleSwitch, TextInput, ITextInputProps } from "@agility/plenum-ui/stories/molecules/index";
405
- import { IAnimatedLabelInputProps, IButtonDropdownProps, IDropdownClassnames, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, AnimatedLabelInput, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, TextInputSelect, ITextInputSelectProps } from "@agility/plenum-ui/stories/organisms/index";
406
- 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 };
407
- 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 };
408
-
409
- }
410
- declare module '@agility/plenum-ui/stories/layouts/index' {
404
+ import { ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextareaProps, IToggleSwitchProps, AcceptedInputTypes, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, Textarea, ToggleSwitch, TextInput, ITextInputProps, ISimpleSelectOptions } from "@agility/plenum-ui/stories/molecules/index";
405
+ import { IAnimatedLabelInputProps, AnimatedLabelTextArea, IAnimatedLabelTextAreaProps, IButtonDropdownProps, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, AnimatedLabelInput, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, TextInputSelect, ITextInputSelectProps } from "@agility/plenum-ui/stories/organisms/index";
406
+ 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 };
407
+ 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 };
411
408
 
412
409
  }
413
410
  declare module '@agility/plenum-ui/stories/molecules/index' {
@@ -437,13 +434,13 @@ declare module '@agility/plenum-ui/stories/molecules/inputs/InputCounter/index'
437
434
  declare module '@agility/plenum-ui/stories/molecules/inputs/InputField/InputField' {
438
435
  import React from "react";
439
436
  export type AcceptedInputTypes = "date" | "datetime-local" | "email" | "month" | "number" | "password" | "search" | "submit" | "tel" | "text" | "url" | "currency";
440
- export interface IInputFieldProps extends React.ComponentPropsWithoutRef<"input"> {
437
+ export interface IInputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
441
438
  /** Callback on change */
442
439
  handleChange: (value: string) => void;
443
440
  /** Input ID*/
444
- id: string;
441
+ id?: string;
445
442
  /** Input Name */
446
- name: string;
443
+ name?: string;
447
444
  /** Force the focus state on the input */
448
445
  isFocused?: boolean;
449
446
  /** Error condition */
@@ -460,11 +457,11 @@ declare module '@agility/plenum-ui/stories/molecules/inputs/InputField/InputFiel
460
457
  required?: boolean;
461
458
  /** use input psuedo classes for :valid and :invalid styles. on by default */
462
459
  clientSideCheck?: boolean;
463
- /**ref for input */
464
- ref?: React.Ref<HTMLInputElement>;
460
+ /** Placeholder text */
461
+ placeholder?: string;
465
462
  }
466
- const InputField: React.FC<IInputFieldProps>;
467
- export default InputField;
463
+ const _InputField: React.ForwardRefExoticComponent<IInputFieldProps & React.RefAttributes<HTMLInputElement>>;
464
+ export default _InputField;
468
465
 
469
466
  }
470
467
  declare module '@agility/plenum-ui/stories/molecules/inputs/InputField/index' {
@@ -554,7 +551,7 @@ declare module '@agility/plenum-ui/stories/molecules/inputs/TextInput/TextInput'
554
551
  /** Max length of input character */
555
552
  maxLength?: number;
556
553
  /** Callback on change */
557
- onChange(value: string): void;
554
+ handleChange(value: string): void;
558
555
  /** input value */
559
556
  value: string;
560
557
  /**Placeholder input text*/
@@ -732,10 +729,10 @@ declare module '@agility/plenum-ui/stories/molecules/inputs/radio/index' {
732
729
  }
733
730
  declare module '@agility/plenum-ui/stories/molecules/inputs/select/Select' {
734
731
  import React from "react";
735
- export type ISimpleSelectOptions = {
732
+ export interface ISimpleSelectOptions {
736
733
  label: string;
737
734
  value: string;
738
- };
735
+ }
739
736
  export interface ISelectProps {
740
737
  /** Label */
741
738
  label?: string;
@@ -755,6 +752,8 @@ declare module '@agility/plenum-ui/stories/molecules/inputs/select/Select' {
755
752
  isRequired?: boolean;
756
753
  value?: string;
757
754
  className?: string;
755
+ onFocus?: () => void;
756
+ onBlur?: () => void;
758
757
  }
759
758
  const Select: React.FC<ISelectProps>;
760
759
  export default Select;
@@ -777,13 +776,17 @@ declare module '@agility/plenum-ui/stories/molecules/inputs/select/index' {
777
776
  }
778
777
  declare module '@agility/plenum-ui/stories/molecules/inputs/textArea/TextArea' {
779
778
  import React from "react";
779
+ interface ILabelProps extends React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {
780
+ display: string;
781
+ htmlFor?: string;
782
+ }
780
783
  export interface ITextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> {
781
784
  /** Input ID */
782
785
  id?: string;
783
786
  /** Input Name */
784
787
  name?: string;
785
788
  /** Label for the input */
786
- label?: string;
789
+ label?: ILabelProps;
787
790
  /** Error state */
788
791
  isError?: boolean;
789
792
  /** If field is required */
@@ -831,19 +834,22 @@ declare module '@agility/plenum-ui/stories/molecules/inputs/textArea/index' {
831
834
  declare module '@agility/plenum-ui/stories/molecules/inputs/toggleSwitch/ToggleSwitch' {
832
835
  import React from "react";
833
836
  import { IDynamicIconProps } from "@/stories/atoms";
837
+ interface ToggleSwitchLabel {
838
+ text: string | JSX.Element;
839
+ className?: string;
840
+ xPosition?: "left" | "right";
841
+ }
834
842
  export interface IToggleSwitchProps {
835
843
  isChecked: boolean;
836
844
  onChange: (isChecked: boolean) => void;
837
- label?: {
838
- text: string | JSX.Element;
839
- className?: string;
840
- xPosition?: "left" | "right";
841
- };
842
- screenReaderLabel: string;
845
+ label?: ToggleSwitchLabel;
846
+ screenReaderLabel?: string;
843
847
  name: string;
844
848
  id: string;
845
- variant: "base" | "short";
849
+ variant?: "base" | "short";
846
850
  withIcon?: IDynamicIconProps;
851
+ disabled?: boolean;
852
+ groupClassName?: string;
847
853
  }
848
854
  const ToggleSwitch: React.FC<IToggleSwitchProps>;
849
855
  export default ToggleSwitch;
@@ -858,19 +864,19 @@ declare module '@agility/plenum-ui/stories/molecules/inputs/toggleSwitch/index'
858
864
  declare module '@agility/plenum-ui/stories/organisms/AnimatedLabelInput/AnimatedLabelInput' {
859
865
  import React from "react";
860
866
  import { IInputFieldProps } from "@/stories/molecules/inputs/InputField";
861
- import { ITextareaProps } from "@/stories/molecules/inputs/textArea/TextArea";
862
- interface ILabelProps extends React.ComponentPropsWithoutRef<"label"> {
867
+ interface ILabelProps extends React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {
863
868
  display: string;
864
869
  }
865
- export interface IAnimatedLabelInputProps {
870
+ export interface IAnimatedLabelInputProps extends Omit<IInputFieldProps, "handleChange"> {
866
871
  id: string;
867
872
  containerStyles?: string;
868
873
  message?: string;
869
- input?: IInputFieldProps;
870
- textarea?: ITextareaProps;
871
874
  required?: boolean;
872
875
  isError?: boolean;
876
+ isShowCounter?: boolean;
877
+ maxLength?: number;
873
878
  label: ILabelProps;
879
+ handleChange: (value: string) => void;
874
880
  }
875
881
  const AnimatedLabelInput: React.FC<IAnimatedLabelInputProps>;
876
882
  export default AnimatedLabelInput;
@@ -878,8 +884,29 @@ declare module '@agility/plenum-ui/stories/organisms/AnimatedLabelInput/Animated
878
884
  }
879
885
  declare module '@agility/plenum-ui/stories/organisms/AnimatedLabelInput/index' {
880
886
  import AnimatedLabelInput, { IAnimatedLabelInputProps } from "@agility/plenum-ui/stories/organisms/AnimatedLabelInput/AnimatedLabelInput";
881
- export default AnimatedLabelInput;
882
887
  export type { IAnimatedLabelInputProps };
888
+ export default AnimatedLabelInput;
889
+
890
+ }
891
+ declare module '@agility/plenum-ui/stories/organisms/AnimatedLabelTextArea/AnimatedLabelTextArea' {
892
+ import React from "react";
893
+ import { ITextareaProps } from "@/stories/molecules/inputs/textArea";
894
+ export interface IAnimatedLabelTextAreaProps extends ITextareaProps {
895
+ id: string;
896
+ containerStyles?: string;
897
+ message?: string;
898
+ required?: boolean;
899
+ isError?: boolean;
900
+ handleChange: (value: string) => void;
901
+ }
902
+ const AnimatedLabelTextArea: React.FC<IAnimatedLabelTextAreaProps>;
903
+ export default AnimatedLabelTextArea;
904
+
905
+ }
906
+ declare module '@agility/plenum-ui/stories/organisms/AnimatedLabelTextArea/index' {
907
+ import AnimatedLabelTextArea, { IAnimatedLabelTextAreaProps } from "@agility/plenum-ui/stories/organisms/AnimatedLabelTextArea/AnimatedLabelTextArea";
908
+ export type { IAnimatedLabelTextAreaProps };
909
+ export default AnimatedLabelTextArea;
883
910
 
884
911
  }
885
912
  declare module '@agility/plenum-ui/stories/organisms/ButtonDropdown/ButtonDropdown' {
@@ -889,6 +916,7 @@ declare module '@agility/plenum-ui/stories/organisms/ButtonDropdown/ButtonDropdo
889
916
  export interface IButtonDropdownProps {
890
917
  button: IButtonProps;
891
918
  dropDown: IDropdownProps;
919
+ hideDivider?: boolean;
892
920
  placement?: IDropdownProps["placement"];
893
921
  offsetOptions?: IDropdownProps["offsetOptions"];
894
922
  }
@@ -909,36 +937,47 @@ declare module '@agility/plenum-ui/stories/organisms/DropdownComponent/DropdownC
909
937
  import React, { HTMLAttributes } from "react";
910
938
  import { Placement } from "@floating-ui/react";
911
939
  import { ClassNameWithAutocomplete } from "utils/types";
912
- import { IDynamicIconProps, UnifiedIconName } from "@/stories/atoms/icons";
913
- export interface IItemProp extends HTMLAttributes<HTMLButtonElement> {
914
- icon?: IDynamicIconProps | UnifiedIconName;
940
+ import { IDynamicIconProps } from "@/stories/atoms/icons";
941
+ export interface IItemProp {
942
+ icon?: IDynamicIconProps;
915
943
  iconPosition?: "trailing" | "leading";
916
- label: string;
944
+ label: string | JSX.Element;
917
945
  onClick?(): void;
918
946
  isEmphasized?: boolean;
919
947
  key: React.Key;
920
- }
921
- export interface IDropdownClassnames {
922
- groupClassname?: ClassNameWithAutocomplete;
923
- itemsClassname?: ClassNameWithAutocomplete;
924
- itemClassname?: ClassNameWithAutocomplete;
925
- activeItemClassname?: ClassNameWithAutocomplete;
926
- buttonClassname?: ClassNameWithAutocomplete;
948
+ iconObj?: JSX.Element;
927
949
  }
928
950
  export interface IDropdownProps extends HTMLAttributes<HTMLDivElement> {
929
951
  items: IItemProp[][];
930
952
  label: string;
931
953
  CustomDropdownTrigger?: React.ReactNode;
932
954
  id: string;
933
- classNames?: IDropdownClassnames;
955
+ groupClassname?: ClassNameWithAutocomplete;
956
+ itemsClassname?: ClassNameWithAutocomplete;
957
+ itemClassname?: ClassNameWithAutocomplete;
958
+ activeItemClassname?: ClassNameWithAutocomplete;
959
+ buttonClassname?: ClassNameWithAutocomplete;
960
+ iconClassname?: ClassNameWithAutocomplete;
961
+ iconSpacingClassname?: ClassNameWithAutocomplete;
934
962
  placement?: Placement;
935
963
  offsetOptions?: Partial<{
936
964
  mainAxis: number;
937
965
  crossAxis: number;
938
966
  alignmentAxis: number | null;
939
967
  }>;
968
+ disabled?: boolean;
969
+ onFocus?: () => void;
970
+ onBlur?: () => void;
940
971
  }
941
- export const defaultClassNames: IDropdownClassnames;
972
+ export const defaultClassNames: {
973
+ groupClassname: string;
974
+ itemsClassname: string;
975
+ itemClassname: string;
976
+ activeItemClassname: string;
977
+ buttonClassname: string;
978
+ iconClassname: string;
979
+ iconSpacingClassname: string;
980
+ };
942
981
  /** Comment */
943
982
  const Dropdown: React.FC<IDropdownProps>;
944
983
  export default Dropdown;
@@ -951,8 +990,8 @@ declare module '@agility/plenum-ui/stories/organisms/DropdownComponent/dropdownI
951
990
 
952
991
  }
953
992
  declare module '@agility/plenum-ui/stories/organisms/DropdownComponent/index' {
954
- import Dropdown, { IItemProp, IDropdownClassnames, IDropdownProps, defaultClassNames } from "@agility/plenum-ui/stories/organisms/DropdownComponent/DropdownComponent";
955
- export type { IItemProp, IDropdownClassnames, IDropdownProps };
993
+ import Dropdown, { IItemProp, IDropdownProps, defaultClassNames } from "@agility/plenum-ui/stories/organisms/DropdownComponent/DropdownComponent";
994
+ export type { IItemProp, IDropdownProps };
956
995
  export { defaultClassNames };
957
996
  export default Dropdown;
958
997
 
@@ -981,8 +1020,8 @@ declare module '@agility/plenum-ui/stories/organisms/EmptySectionPlaceholder/Emp
981
1020
  }
982
1021
  declare module '@agility/plenum-ui/stories/organisms/EmptySectionPlaceholder/index' {
983
1022
  import EmptySectionPlaceholder, { IEmptySectionPlaceholderProps } from "@agility/plenum-ui/stories/organisms/EmptySectionPlaceholder/EmptySectionPlaceholder";
984
- export default EmptySectionPlaceholder;
985
1023
  export type { IEmptySectionPlaceholderProps };
1024
+ export default EmptySectionPlaceholder;
986
1025
 
987
1026
  }
988
1027
  declare module '@agility/plenum-ui/stories/organisms/FormInputWithAddons/FormInputWithAddons' {
@@ -1093,13 +1132,14 @@ declare module '@agility/plenum-ui/stories/organisms/TextInputSelect/index' {
1093
1132
  }
1094
1133
  declare module '@agility/plenum-ui/stories/organisms/index' {
1095
1134
  import AnimatedLabelInput, { IAnimatedLabelInputProps } from "@agility/plenum-ui/stories/organisms/AnimatedLabelInput/index";
1135
+ import AnimatedLabelTextArea, { IAnimatedLabelTextAreaProps } from "@agility/plenum-ui/stories/organisms/AnimatedLabelTextArea/index";
1096
1136
  import ButtonDropdown, { IButtonDropdownProps } from "@agility/plenum-ui/stories/organisms/ButtonDropdown/index";
1097
- import Dropdown, { IDropdownClassnames, IDropdownProps, IItemProp } from "@agility/plenum-ui/stories/organisms/DropdownComponent/index";
1137
+ import Dropdown, { IDropdownProps, IItemProp } from "@agility/plenum-ui/stories/organisms/DropdownComponent/index";
1098
1138
  import EmptySectionPlaceholder, { IEmptySectionPlaceholderProps } from "@agility/plenum-ui/stories/organisms/EmptySectionPlaceholder/index";
1099
1139
  import FormInputWithAddons, { IFormInputWithAddonsProps } from "@agility/plenum-ui/stories/organisms/FormInputWithAddons/index";
1100
1140
  import TextInputSelect, { ITextInputSelectProps } from "@agility/plenum-ui/stories/organisms/TextInputSelect/index";
1101
- export type { IAnimatedLabelInputProps, IButtonDropdownProps, IDropdownClassnames, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, ITextInputSelectProps };
1102
- export { AnimatedLabelInput, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, TextInputSelect };
1141
+ export type { IAnimatedLabelInputProps, IAnimatedLabelTextAreaProps, IButtonDropdownProps, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, ITextInputSelectProps };
1142
+ export { AnimatedLabelInput, AnimatedLabelTextArea, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, TextInputSelect };
1103
1143
 
1104
1144
  }
1105
1145
  declare module '@agility/plenum-ui/utils/types' {