@agility/plenum-ui 2.2.7 → 2.2.9

package/dist/tailwind.css

@@ -811,10 +811,6 @@ select {
   position: relative;
 }
 
-.inset-0 {
-  inset: 0px;
-}
-
 .inset-y-0 {
   top: 0px;
   bottom: 0px;
@@ -1288,10 +1284,6 @@ select {
   margin: 0px;
 }
 
-.m-1 {
-  margin: 0.25rem;
-}
-
 .m-10 {
   margin: 2.5rem;
 }
@@ -2068,11 +2060,6 @@ 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;
-  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));
-}
-
 .transform {
   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));
 }
@@ -3164,10 +3151,6 @@ select {
   overflow: hidden;
 }
 
-.overflow-visible {
-  overflow: visible;
-}
-
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -3258,10 +3241,6 @@ select {
   border-width: 2px;
 }
 
-.border-4 {
-  border-width: 4px;
-}
-
 .\!border-l-0 {
   border-left-width: 0px !important;
 }
@@ -12203,6 +12182,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 +35385,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));
@@ -67485,14 +67477,6 @@ select {
   fill: #fff;
 }
 
-.stroke-gray-200 {
-  stroke: #E5E7EB;
-}
-
-.stroke-purple-600 {
-  stroke: #691AD8;
-}
-
 .stroke-1 {
   stroke-width: 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/package.json

@@ -1,11 +1,13 @@
 {
 	"name": "@agility/plenum-ui",
-	"version": "2.2.7",
+	"version": "2.2.9",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/index.js",
 	"types": "dist/index.d.ts",
-	"sideEffects": ["**/*.css"],
+	"sideEffects": [
+		"**/*.css"
+	],
 	"engines": {
 		"node": ">= 18.0.0"
 	},

package/stories/atoms/icons/TablerIcon.tsx

@@ -1,65 +1,21 @@
-import React from "react";
+import React, { useState, useEffect, type ComponentType } from "react";
 import { TablerIconName } from "./tablerIconNames";
-import {
-	IconArrowDown,
-	IconArrowUp,
-	IconBan,
-	IconBell,
-	IconBrandGithub,
-	IconCheck,
-	IconChevronDown,
-	IconCode,
-	IconConfetti,
-	IconCopy,
-	IconCube,
-	IconDotsVertical,
-	IconEye,
-	IconEyeCheck,
-	IconEyeOff,
-	IconFolderPlus,
-	IconGridDots,
-	IconPaperclip,
-	IconPencil,
-	IconPlus,
-	IconSearch,
-	IconSelector,
-	IconThumbUp,
-	IconTrash,
-	IconTrashFilled,
-	IconUpload,
-	IconX,
-} from "@tabler/icons-react";
 import { ClassNameWithAutocomplete } from "@/utils/types";
 
-const tablerIconMap = {
-	IconArrowDown,
-	IconArrowUp,
-	IconBan,
-	IconBell,
-	IconBrandGithub,
-	IconCheck,
-	IconChevronDown,
-	IconCode,
-	IconConfetti,
-	IconCopy,
-	IconCube,
-	IconDotsVertical,
-	IconEye,
-	IconEyeCheck,
-	IconEyeOff,
-	IconFolderPlus,
-	IconGridDots,
-	IconPaperclip,
-	IconPencil,
-	IconPlus,
-	IconSearch,
-	IconSelector,
-	IconThumbUp,
-	IconTrash,
-	IconTrashFilled,
-	IconUpload,
-	IconX,
-} as const;
+let iconRegistry: Record<string, ComponentType<any>> | null = null;
+let registryPromise: Promise<void> | null = null;
+
+function loadIconRegistry(): Promise<void> {
+	if (!registryPromise) {
+		registryPromise = import("@tabler/icons-react").then((mod) => {
+			iconRegistry = mod as unknown as Record<string, ComponentType<any>>;
+		});
+	}
+	return registryPromise;
+}
+
+// Kick off load eagerly on module import
+loadIconRegistry();
 
 export interface ITablerIconProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
 	icon: TablerIconName;
@@ -69,9 +25,18 @@ export interface ITablerIconProps extends React.DetailedHTMLProps<React.HTMLAttr
 const TablerIcon: React.FC<ITablerIconProps> = ({
 	icon,
 	className = "w-6 h-6 text-gray-600"
-}: ITablerIconProps): JSX.Element => {
-	const Icon = tablerIconMap[icon as keyof typeof tablerIconMap];
-	if (!Icon) return <></>;
+}: ITablerIconProps): JSX.Element | null => {
+	const [Icon, setIcon] = useState<ComponentType<any> | null>(
+		iconRegistry && icon ? (iconRegistry[icon] ?? null) : null
+	);
+
+	useEffect(() => {
+		if (!icon) { setIcon(null); return; }
+		if (iconRegistry) { setIcon(iconRegistry[icon] ?? null); return; }
+		loadIconRegistry().then(() => setIcon(iconRegistry![icon] ?? null));
+	}, [icon]);
+
+	if (!Icon) return null;
 	return (
 		<i>
 			<Icon className={className} />

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/organisms/DropdownWithMultiSelect/tests/DropdownWithMultiSelect.test.tsx

@@ -39,12 +39,11 @@ describe("DropdownWithMultiSelect", () => {
 		vi.stubGlobal("ResizeObserver", ResizeObserver);
 	});
 
-	it("renders a button", () => {
+	it("renders a button", async () => {
 		const { container } = render(<DropdownWithMultiSelect {...defaultProps} />);
 		const button = screen.getByRole("button", { name: /Filters/i });
 		expect(button).toBeInTheDocument();
-		const icon = container.querySelector("svg");
-		expect(icon).toBeInTheDocument();
+		await waitFor(() => expect(container.querySelector("svg")).toBeInTheDocument());
 	});
 
 	it("opens the popover and shows options", async () => {

package/dist/types/stories/atoms/loaders/NProgress/RadialProgress.d.ts

@@ -1,11 +0,0 @@
-import React from "react";
-export interface IRadialProgressProps extends React.PropsWithChildren {
-    /** Percentage value to display */
-    inputValue: number;
-    /** Radius for the circle - Max value of 100 */
-    radius: number;
-    /** Additional classnames */
-    className?: string;
-}
-declare const RadialProgress: React.FC<IRadialProgressProps>;
-export default RadialProgress;

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

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

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

@@ -1,19 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import RadialProgress from "./RadialProgress"
-
-const meta: Meta<typeof RadialProgress> = {
-	title: "Design System/atoms/Loaders/NProgress/RadialProgress",
-	component: RadialProgress
-}
-
-type Story = StoryObj<typeof RadialProgress>
-
-export const DefaultRadialProgress: Story = {
-	args: {
-		inputValue: 33,
-		radius: 20,
-		children: <></>
-	}
-}
-
-export default meta

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

@@ -1,74 +0,0 @@
-import React, { useMemo } from "react"
-import { default as cn } from "classnames"
-export interface IRadialProgressProps extends React.PropsWithChildren {
-	/** Percentage value to display */
-	inputValue: number
-	/** Radius for the circle - Max value of 100 */
-	radius: number
-	/** Additional classnames */
-	className?: string
-}
-
-const RadialProgress: React.FC<IRadialProgressProps> = ({
-  inputValue,
-  radius,
-  children,
-  className,
-}) => {
-  const r = radius / 2
-
-  if (inputValue < 0) {
-    inputValue = 0
-  }
-  if (inputValue > 100) {
-    inputValue = 100
-  }
-  if (radius < 0) {
-    radius = 0
-  }
-  if (radius > 100) {
-    radius = 100
-  }
-  const drawPercentage = useMemo(() => {
-    const roundCircum = Math.round(2 * r * Math.PI)
-    return (inputValue * roundCircum) / 50
-  }, [inputValue, r])
-
-  const xyPos = (radius + 2) * -1
-  const viewPortXY = (radius + 2) * 2
-  return (
-    <div
-      className={cn(`overflow-visible`, className && className)}
-      style={{ height: `${viewPortXY}px`, width: `${viewPortXY}px` }}
-    >
-      <svg
-        viewBox={`${xyPos} ${xyPos} ${viewPortXY} ${viewPortXY}`}
-        data-percent={drawPercentage}
-        fill="none"
-      >
-        <circle
-          className="-rotate-90 stroke-gray-200 stroke-1"
-          cx={0}
-          cy={0}
-          r={radius}
-        ></circle>
-        <circle
-          strokeDasharray={`${drawPercentage} 999`}
-          className="m-1 -rotate-90 stroke-purple-600 stroke-1 transition-all"
-          cx={0}
-          cy={0}
-          r={radius}
-        ></circle>
-      </svg>
-      <div
-        className={cn(
-          `h-[${viewPortXY}px] w-[${viewPortXY}px] absolute inset-0 flex items-center justify-center overflow-hidden `
-        )}
-      >
-        {children}
-      </div>
-    </div>
-  )
-}
-
-export default RadialProgress

package/stories/atoms/loaders/NProgress/index.ts

@@ -1,3 +0,0 @@
-import RadialProgress, { IRadialProgressProps } from "./RadialProgress"
-export default RadialProgress
-export type { IRadialProgressProps }