@agility/plenum-ui 2.2.8 → 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,6 +1,6 @@
 {
 	"name": "@agility/plenum-ui",
-	"version": "2.2.8",
+	"version": "2.2.9",
 	"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/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 }