@agility/plenum-ui 2.2.8 → 2.3.0

package/dist/tailwind.css

@@ -811,10 +811,6 @@ select {
   position: relative;
 }
 
-.inset-0 {
-  inset: 0px;
-}
-
 .inset-y-0 {
   top: 0px;
   bottom: 0px;
@@ -1204,6 +1200,10 @@ select {
   z-index: 99999;
 }
 
+.z-\[9999\] {
+  z-index: 9999;
+}
+
 .-m-10 {
   margin: -2.5rem;
 }
@@ -1288,10 +1288,6 @@ select {
   margin: 0px;
 }
 
-.m-1 {
-  margin: 0.25rem;
-}
-
 .m-10 {
   margin: 2.5rem;
 }
@@ -1680,6 +1676,11 @@ select {
   margin-right: 24rem;
 }
 
+.mx-xxsm {
+  margin-left: 4px;
+  margin-right: 4px;
+}
+
 .my-10 {
   margin-top: 2.5rem;
   margin-bottom: 2.5rem;
@@ -2004,6 +2005,14 @@ select {
   width: 1.5rem;
 }
 
+.w-60 {
+  width: 15rem;
+}
+
+.w-64 {
+  width: 16rem;
+}
+
 .w-8 {
   width: 2rem;
 }
@@ -2068,8 +2077,8 @@ select {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.-rotate-90 {
-  --tw-rotate: -90deg;
+.rotate-180 {
+  --tw-rotate: 180deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
@@ -3123,6 +3132,10 @@ select {
   gap: 24rem;
 }
 
+.gap-xsm {
+  gap: 8px;
+}
+
 .gap-x-2 {
   -moz-column-gap: 0.5rem;
        column-gap: 0.5rem;
@@ -3164,10 +3177,6 @@ select {
   overflow: hidden;
 }
 
-.overflow-visible {
-  overflow: visible;
-}
-
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -3258,10 +3267,6 @@ select {
   border-width: 2px;
 }
 
-.border-4 {
-  border-width: 4px;
-}
-
 .\!border-l-0 {
   border-left-width: 0px !important;
 }
@@ -3278,6 +3283,10 @@ select {
   border-style: dashed;
 }
 
+.border-none {
+  border-style: none;
+}
+
 .\!border-gray-300 {
   --tw-border-opacity: 1 !important;
   border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)) !important;
@@ -12203,6 +12212,14 @@ select {
   border-color: rgb(19 78 74 / 0.95);
 }
 
+.border-transparent-black-20 {
+  border-color: rgba(0, 0, 0, 0.2);
+}
+
+.border-transparent-white-50 {
+  border-color: rgba(255, 255, 255, 0.5);
+}
+
 .border-violet-100 {
   --tw-border-opacity: 1;
   border-color: rgb(237 233 254 / var(--tw-border-opacity, 1));
@@ -35398,6 +35415,11 @@ select {
   border-left-color: rgb(128 102 20 / 0.95);
 }
 
+.border-r-black {
+  --tw-border-opacity: 1;
+  border-right-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
+}
+
 .border-r-blue-100 {
   --tw-border-opacity: 1;
   border-right-color: rgb(219 234 254 / var(--tw-border-opacity, 1));
@@ -65676,6 +65698,10 @@ select {
   background-color: rgb(19 78 74 / 0.95);
 }
 
+.bg-transparent {
+  background-color: transparent;
+}
+
 .bg-transparent-black-03 {
   background-color: rgba(0, 0, 0, 0.03);
 }
@@ -67485,14 +67511,6 @@ select {
   fill: #fff;
 }
 
-.stroke-gray-200 {
-  stroke: #E5E7EB;
-}
-
-.stroke-purple-600 {
-  stroke: #691AD8;
-}
-
 .stroke-1 {
   stroke-width: 1;
 }
@@ -67752,6 +67770,11 @@ select {
   padding-right: 6px;
 }
 
+.px-sm {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -67887,6 +67910,11 @@ select {
   padding-bottom: 9px;
 }
 
+.py-xxsm {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+
 .pl-1 {
   padding-left: 0.25rem;
 }
@@ -67931,6 +67959,10 @@ select {
   padding-right: 10px;
 }
 
+.pt-xxsm {
+  padding-top: 4px;
+}
+
 .text-left {
   text-align: left;
 }
@@ -71690,6 +71722,11 @@ select {
   color: rgb(6 78 59 / 0.95);
 }
 
+.text-neutral-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+}
+
 .text-orange-100 {
   --tw-text-opacity: 1;
   color: rgb(255 237 213 / var(--tw-text-opacity, 1));
@@ -78965,6 +79002,26 @@ select {
   transition-duration: 150ms;
 }
 
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.\[--anchor-gap\:8px\] {
+  --anchor-gap: 8px;
+}
+
+.placeholder\:text-gray-400::-moz-placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+
+.placeholder\:text-gray-400::placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+
 .placeholder\:text-gray-500::-moz-placeholder {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity, 1));
@@ -78988,6 +79045,11 @@ select {
   border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)) !important;
 }
 
+.focus-within\:border-primary-800:focus-within {
+  --tw-border-opacity: 1;
+  border-color: rgb(91 33 182 / var(--tw-border-opacity, 1));
+}
+
 .focus-within\:bg-purple-100:focus-within {
   --tw-bg-opacity: 1;
   background-color: rgb(222 204 246 / var(--tw-bg-opacity, 1));
@@ -78998,6 +79060,12 @@ select {
   outline-offset: 2px;
 }
 
+.focus-within\:ring-1:focus-within {
+  --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);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
 .focus-within\:ring-2:focus-within {
   --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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -79014,6 +79082,11 @@ select {
   --tw-ring-color: rgb(255 203 40 / var(--tw-ring-opacity, 1)) !important;
 }
 
+.focus-within\:ring-primary-800:focus-within {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(91 33 182 / var(--tw-ring-opacity, 1));
+}
+
 .focus-within\:ring-purple-600:focus-within {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(105 26 216 / var(--tw-ring-opacity, 1));

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

@@ -2,9 +2,9 @@ import Avatar, { IAvatarProps } from "./Avatar";
 import Badge, { IBadgeProps } from "./badges";
 import { Button, Capsule, BTNActionType, IButtonProps, ICapsuleProps } from "./buttons";
 import { DynamicIcon, IDynamicIconProps, IIconWithShadowProps, IconName, IconWithShadow, UnifiedIconName, isHeroIcon, isTablerIcon, isUnifiedIconName } from "./icons";
-import { ILoaderProps, IRadialProgressProps, Loader, RadialProgress } from "./loaders";
+import { ILoaderProps, Loader } from "./loaders";
 import { Heading, HeadingProps } from "./Typography/Heading";
 import { Label, LabelProps } from "./Typography/Label";
 import { Paragraph, ParagraphProps } from "./Typography/Paragraph";
-export type { IAvatarProps, IBadgeProps, IButtonProps, ICapsuleProps, IDynamicIconProps, IIconWithShadowProps, ILoaderProps, IRadialProgressProps, HeadingProps, LabelProps, ParagraphProps, UnifiedIconName, IconName, BTNActionType };
-export { Avatar, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, RadialProgress, Heading, Label, Paragraph, isHeroIcon, isTablerIcon, isUnifiedIconName };
+export type { IAvatarProps, IBadgeProps, IButtonProps, ICapsuleProps, IDynamicIconProps, IIconWithShadowProps, ILoaderProps, HeadingProps, LabelProps, ParagraphProps, UnifiedIconName, IconName, BTNActionType };
+export { Avatar, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, Heading, Label, Paragraph, isHeroIcon, isTablerIcon, isUnifiedIconName };

package/dist/types/stories/atoms/loaders/Loader.d.ts

@@ -1,5 +1,7 @@
 import React from "react";
 export interface ILoaderProps {
+    size?: "lg" | "md" | "sm";
+    variant?: "primary" | "black" | "white";
     className?: string;
 }
 declare const Loader: React.FC<ILoaderProps>;

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

@@ -1,4 +1,3 @@
 import Loader, { ILoaderProps } from "./Loader";
-import RadialProgress, { IRadialProgressProps } from "./NProgress";
-export { Loader, RadialProgress };
-export type { ILoaderProps, IRadialProgressProps };
+export { Loader };
+export type { ILoaderProps };

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

@@ -1,5 +1,5 @@
-import { IAvatarProps, IBadgeProps, IButtonProps, ICapsuleProps, IDynamicIconProps, IIconWithShadowProps, ILoaderProps, IRadialProgressProps, UnifiedIconName, IconName, BTNActionType, Avatar, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, RadialProgress, isHeroIcon, isTablerIcon, isUnifiedIconName, Heading, HeadingProps, Label, LabelProps, Paragraph, ParagraphProps } from "./atoms";
+import { IAvatarProps, IBadgeProps, IButtonProps, ICapsuleProps, IDynamicIconProps, IIconWithShadowProps, ILoaderProps, UnifiedIconName, IconName, BTNActionType, Avatar, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, isHeroIcon, isTablerIcon, isUnifiedIconName, Heading, HeadingProps, Label, LabelProps, Paragraph, ParagraphProps } 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, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, AnimatedLabelInput, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, TextInputSelect, ITextInputSelectProps, IAnimatedFormInputWithAddons, AnimatedFormInputWithAddons, DropdownWithMultiSelect, MultiSelectItemProps } 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, BTNActionType, ITextInputProps, ISimpleSelectOptions, IAnimatedFormInputWithAddons, MultiSelectItemProps, HeadingProps, LabelProps, ParagraphProps };
-export { Avatar, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, Textarea, ToggleSwitch, AnimatedLabelInput, AnimatedLabelTextArea, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, RadialProgress, isHeroIcon, isTablerIcon, isUnifiedIconName, TextInput, TextInputSelect, AnimatedFormInputWithAddons, DropdownWithMultiSelect, Heading, Label, Paragraph };
+export type { IAvatarProps, IBadgeProps, IButtonProps, ICapsuleProps, ITextInputSelectProps, IDynamicIconProps, IIconWithShadowProps, ILoaderProps, ICheckboxProps, IComboboxProps, IInputFieldProps, IInputLabelProps, INestedInputButtonProps, IRadioProps, ISelectProps, ITextareaProps, IToggleSwitchProps, AcceptedInputTypes, IAnimatedLabelInputProps, IAnimatedLabelTextAreaProps, IButtonDropdownProps, IDropdownProps, IEmptySectionPlaceholderProps, IItemProp, IFormInputWithAddonsProps, UnifiedIconName, IconName, BTNActionType, ITextInputProps, ISimpleSelectOptions, IAnimatedFormInputWithAddons, MultiSelectItemProps, HeadingProps, LabelProps, ParagraphProps };
+export { Avatar, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, Textarea, ToggleSwitch, AnimatedLabelInput, AnimatedLabelTextArea, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, isHeroIcon, isTablerIcon, isUnifiedIconName, TextInput, TextInputSelect, AnimatedFormInputWithAddons, DropdownWithMultiSelect, Heading, Label, Paragraph };

package/dist/types/stories/molecules/inputs/select/Select.d.ts

@@ -2,6 +2,8 @@ import React from "react";
 export interface ISimpleSelectOptions {
     label: string;
     value: string;
+    emoji?: string;
+    description?: string;
 }
 export interface ISelectProps {
     /** Label */
@@ -12,7 +14,7 @@ export interface ISelectProps {
     name?: string;
     /** List of options to display in the select menu */
     options: ISimpleSelectOptions[];
-    /** Select name prop */
+    /** Called with the selected option's value string */
     onChange?(value: string): void;
     /** Select disabled state */
     isDisabled?: boolean;
@@ -25,6 +27,9 @@ export interface ISelectProps {
     onFocus?: () => void;
     onBlur?: () => void;
     message?: string;
+    inputRef?: React.RefObject<HTMLInputElement>;
+    placeholder?: string;
+    dropdownMaxHeight?: number;
 }
 declare const Select: React.FC<ISelectProps>;
 export default Select;

package/local.sh

@@ -9,7 +9,7 @@ RESET='\033[0m'
 DIR="$PWD"
 
 # The required yarn version to use this script
-REQUIRED_YARN_VERSION="1.22.19"
+REQUIRED_YARN_VERSION="1.22.22"
 
 # Get the installed Yarn version
 INSTALLED_YARN_VERSION=$(yarn --version 2>/dev/null)

package/package.json

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

package/stories/atoms/index.ts

@@ -12,7 +12,7 @@ import {
 	isTablerIcon,
 	isUnifiedIconName
 } from "./icons";
-import { ILoaderProps, IRadialProgressProps, Loader, RadialProgress } from "./loaders";
+import { ILoaderProps, Loader } from "./loaders";
 import { Heading, HeadingProps } from "./Typography/Heading";
 import { Label, LabelProps } from "./Typography/Label";
 import { Paragraph, ParagraphProps } from "./Typography/Paragraph";
@@ -24,7 +24,6 @@ export type {
 	IDynamicIconProps,
 	IIconWithShadowProps,
 	ILoaderProps,
-	IRadialProgressProps,
 	HeadingProps,
 	LabelProps,
 	ParagraphProps,
@@ -40,7 +39,6 @@ export {
 	DynamicIcon,
 	IconWithShadow,
 	Loader,
-	RadialProgress,
 	Heading,
 	Label,
 	Paragraph,

package/stories/atoms/loaders/Loader.stories.ts

@@ -1,15 +1,15 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import Loader from "./Loader"
+import type { Meta, StoryObj } from "@storybook/react";
+import Loader from "./Loader";
 
 const meta: Meta<typeof Loader> = {
 	title: "Design System/atoms/Loaders/Loader",
 	component: Loader
-}
+};
 
-type Story = StoryObj<typeof Loader>
+type Story = StoryObj<typeof Loader>;
 
 export const DefaultLoader: Story = {
-  args: { className: "" },
-}
+	args: { size: "lg", variant: "primary" }
+};
 
-export default meta
+export default meta;

package/stories/atoms/loaders/Loader.tsx

@@ -2,15 +2,23 @@ import React from "react";
 import { default as cn } from "classnames";
 
 export interface ILoaderProps {
+	size?: "lg" | "md" | "sm";
+	variant?: "primary" | "black" | "white";
 	className?: string;
 }
-const Loader: React.FC<ILoaderProps> = ({ className }) => {
+const Loader: React.FC<ILoaderProps> = ({ size = "lg", variant = "primary", className }) => {
 	return (
 		<>
 			<i
 				className={cn(
-					"rounded-full w-16 h-16 inline-block border-4 animate-spinSlower m-auto",
-					className ? className : "border-gray-200 border-r-violet-800"
+					"rounded-full inline-block animate-spinSlower m-auto",
+					size === "lg" ? "w-10 h-10 border-2" : size === "md" ? "w-5 h-5 border" : "w-4 h-4 border",
+					variant === "primary"
+						? "border-transparent-black-20 border-r-violet-800"
+						: variant === "black"
+						? "border-transparent-black-20 border-r-black"
+						: "border-transparent-white-50 border-r-white",
+					className
 				)}
 				role="status"
 			/>

package/stories/atoms/loaders/index.ts

@@ -1,4 +1,3 @@
-import Loader, { ILoaderProps } from "./Loader"
-import RadialProgress, { IRadialProgressProps } from "./NProgress"
-export { Loader, RadialProgress }
-export type { ILoaderProps, IRadialProgressProps }
+import Loader, { ILoaderProps } from "./Loader";
+export { Loader };
+export type { ILoaderProps };

package/stories/index.ts

@@ -7,7 +7,6 @@ import {
 	IDynamicIconProps,
 	IIconWithShadowProps,
 	ILoaderProps,
-	IRadialProgressProps,
 	UnifiedIconName,
 	IconName,
 	BTNActionType,
@@ -18,7 +17,6 @@ import {
 	DynamicIcon,
 	IconWithShadow,
 	Loader,
-	RadialProgress,
 	isHeroIcon,
 	isTablerIcon,
 	isUnifiedIconName,
@@ -86,7 +84,6 @@ export type {
 	IDynamicIconProps,
 	IIconWithShadowProps,
 	ILoaderProps,
-	IRadialProgressProps,
 	ICheckboxProps,
 	IComboboxProps,
 	IInputFieldProps,
@@ -138,7 +135,6 @@ export {
 	DynamicIcon,
 	IconWithShadow,
 	Loader,
-	RadialProgress,
 	isHeroIcon,
 	isTablerIcon,
 	isUnifiedIconName,

package/stories/molecules/inputs/select/Select.stories.tsx

@@ -10,12 +10,16 @@ const meta: Meta<typeof Select> = {
 		(Story, context) => {
 			if (context.name === "Default Select Dark BG") {
 				return (
-					<div className="bg-transparent-black-03 rounded p-6">
+					<div className="bg-transparent-black-03 rounded p-6 w-60">
 						<Story />
 					</div>
 				);
 			}
-			return <Story />;
+			return (
+				<div className="w-64">
+					<Story />
+				</div>
+			);
 		}
 	]
 };
@@ -23,13 +27,41 @@ const meta: Meta<typeof Select> = {
 export default meta;
 type TStory = StoryObj<typeof Select>;
 
+const manyCountries = [
+	{
+		label: "Australia",
+		value: "au",
+		description: "A country and continent"
+	},
+	{ label: "Brazil", value: "br" },
+	{ label: "Canada", value: "ca" },
+	{ label: "China", value: "cn" },
+	{ label: "Denmark", value: "dk" },
+	{ label: "Egypt", value: "eg" },
+	{ label: "France", value: "fr" },
+	{ label: "Germany", value: "de" },
+	{ label: "India", value: "in" },
+	{ label: "Italy", value: "it" },
+	{ label: "Japan", value: "jp" },
+	{ label: "Mexico", value: "mx" },
+	{ label: "Netherlands", value: "nl" },
+	{ label: "New Zealand", value: "nz" },
+	{ label: "Norway", value: "no" },
+	{ label: "Portugal", value: "pt" },
+	{ label: "South Korea", value: "kr" },
+	{ label: "Spain", value: "es" },
+	{ label: "Sweden", value: "se" },
+	{ label: "United Kingdom", value: "gb" },
+	{ label: "United States", value: "us" }
+];
+
 export const DefaultSelect: TStory = {
 	args: {
 		label: "Label",
 		id: "select",
 		name: "select",
 		options: [
-			{ label: "Canada", value: "value1" },
+			{ label: "Canada", value: "value1", description: "A description for Canada." },
 			{ label: "USA", value: "value2" }
 		],
 		isDisabled: false,
@@ -38,6 +70,20 @@ export const DefaultSelect: TStory = {
 		message: "Message"
 	}
 };
+
+export const ManyOptions: TStory = {
+	args: {
+		label: "Country",
+		id: "select-many",
+		name: "select-many",
+		options: manyCountries,
+		isDisabled: false,
+		isError: false,
+		isRequired: false,
+		message: "Scroll to see all options"
+	}
+};
+
 export const DefaultSelectDarkBG: TStory = {
 	args: {
 		label: "Label",