@agility/plenum-ui 2.1.2 → 2.1.4

package/dist/tailwind.css

@@ -59222,4 +59222,12 @@ select {
     font-size: 0.875rem;
     line-height: 1.25rem;
   }
+}
+
+.\[\&\>path\:first-of-type\]\:stroke-gray-300>path:first-of-type {
+  stroke: #D1D5DB;
+}
+
+.\[\&\>path\:last-of-type\]\:stroke-white>path:last-of-type {
+  stroke: #fff;
 }

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

@@ -32,6 +32,7 @@ export interface IDropdownProps extends HTMLAttributes<HTMLDivElement> {
     disabled?: boolean;
     onFocus?: () => void;
     onBlur?: () => void;
+    showFloatingArrow?: boolean;
 }
 export declare const defaultClassNames: {
     groupClassname: string;

package/package.json

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

package/stories/atoms/Avatar/Avatar.tsx

@@ -44,7 +44,7 @@ const Avatar: FC<IAvatarProps> = ({ src, status, size = "md", alt = "Avatar imag
 		"h-14 w-14": size === "lg",
 		"h-16 w-16": size === "xl"
 	})
-	const fontStyles = cn("font-medium leading-none text-white uppercase", {
+	const fontStyles = cn(" leading-none text-white uppercase", {
 		"text-xs": size === "xxs" || size === "xs",
 		"text-sm": size === "sm",
 		"text-base": size === "md",

package/stories/atoms/badges/Badge.tsx

@@ -31,7 +31,7 @@ const Badge: React.FC<IBadgeProps> = ({
 	actionButton
 }) => {
 	const badgeStyles = cn(
-		"text-sm flex items-center font-medium py-[2px] focus:ring-1 focus:ring-purple-600 focus:ring-offset-2 focus:ring-offset-white outline-0",
+		"text-sm flex items-center py-[2px] focus:ring-1 focus:ring-purple-600 focus:ring-offset-2 focus:ring-offset-white outline-0",
 		{
 			"rounded-[3px]": variant === "rounded",
 			"rounded-full px-[6px]": variant === "pill",

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

@@ -77,7 +77,7 @@ const _Button = (
 				target: asLink.target,
 				title: asLink.title,
 				className: cn(
-					"inline-flex items-center justify-center gap-x-2  font-medium rounded-[3px] !ring-offset-white outline-none   focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2  focus-within:ring-2 focus-within:ring-purple-600 focus-within:ring-offset-2  focus:ring-2 focus:ring-purple-600 focus:ring-offset-2  active:ring-2 active:ring-purple-600 active:ring-offset-2 transition-all",
+					"inline-flex items-center justify-center gap-x-2  font rounded-[3px] !ring-offset-white outline-none   focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2  focus-within:ring-2 focus-within:ring-purple-600 focus-within:ring-offset-2  focus:ring-2 focus:ring-purple-600 focus:ring-offset-2  active:ring-2 active:ring-purple-600 active:ring-offset-2 transition-all",
 					{ "w-full": fullWidth },
 					{ "px-[11px] py-[7px] text-xs": size === "xs" },
 					{ "px-[13px] py-[9px] text-sm": size === "sm" },
@@ -157,7 +157,7 @@ const _Button = (
 		<button
 			type="button"
 			className={cn(
-				"inline-flex items-center justify-center gap-x-2  font-medium rounded-[3px] !ring-offset-white outline-none focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2  focus-within:ring-2 focus-within:ring-purple-600 focus-within:ring-offset-2  focus:ring-2 focus:ring-purple-600 focus:ring-offset-2  active:ring-2 active:ring-purple-600 active:ring-offset-2 transition-all",
+				"inline-flex items-center justify-center gap-x-2 rounded-[3px] !ring-offset-white outline-none focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2  focus-within:ring-2 focus-within:ring-purple-600 focus-within:ring-offset-2  focus:ring-2 focus:ring-purple-600 focus:ring-offset-2  active:ring-2 active:ring-purple-600 active:ring-offset-2 transition-all",
 				{ "w-full": fullWidth },
 				{ "px-[11px] py-[7px] text-xs": size === "xs" },
 				{ "px-[13px] py-[9px] text-sm": size === "sm" },

package/stories/atoms/buttons/Capsule/Capsule.tsx

@@ -54,7 +54,7 @@ const Capsule = ({
 		<button
 			type="button"
 			className={cn(
-				"inline-flex items-center justify-center gap-x-2 text-sm font-medium p-2  !ring-offset-white outline-none   focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2  focus-within:ring-2 focus-within:ring-purple-600 focus-within:ring-offset-2  focus:ring-2 focus:ring-purple-600 focus:ring-offset-2  active:ring-2 active:ring-purple-600 active:ring-offset-2 transition-all",
+				"inline-flex items-center justify-center gap-x-2 text-sm  p-2  !ring-offset-white outline-none   focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2  focus-within:ring-2 focus-within:ring-purple-600 focus-within:ring-offset-2  focus:ring-2 focus:ring-purple-600 focus:ring-offset-2  active:ring-2 active:ring-purple-600 active:ring-offset-2 transition-all",
 				{ "w-full": fullWidth },
 				{ "px-[11px] py-[7px] text-xs rounded-[15px]": size === "xs" },
 				{ "px-[15px] py-[9px] text-sm rounded-[17px]": size === "sm" },

package/stories/molecules/inputs/InputCounter/InputCounter.tsx

@@ -10,7 +10,7 @@ export interface IInputCounterProps {
 /** Primary UI component for user interaction */
 const InputCounter: FC<IInputCounterProps> = ({ current = 0, limit }) => {
 	return (
-		<div className="mt-3 text-center text-xs leading-4 font-medium text-gray-500 flex gap-1">
+		<div className="mt-3 text-center text-xs leading-4  text-gray-500 flex gap-1">
 			<div className="currentCount">{current ?? 0}</div>
 			{(limit || 0) > 0 && (
 				<>

package/stories/molecules/inputs/InputLabel/InputLabel.tsx

@@ -25,13 +25,13 @@ const InputLabel: FC<IInputLabelProps> = ({
 }: IInputLabelProps) => {
 	const labelStyles = cn(
 		"z-[2] ",
-		{ "inline-block font-medium ml-2 relative transition-all": isPlaceholder },
+		{ "inline-block ml-2 relative transition-all": isPlaceholder },
 		{ "text-sm text-gray-400 px-2 top-8": isPlaceholder && !isActive },
 		{ "text-xs text-gray-700 px-1 top-[10px] bg-white": isPlaceholder && isActive },
 		{ "text-xs text-red-500 px-1 top-[10px] bg-white": isPlaceholder && isError },
 		{ "text-red-500 bg-white": !isPlaceholder && isError },
 		{ "text-gray-500/[.5]": isDisabled },
-		{ "inline-block font-medium transition-all text-sm text-gray-700 mb-1": !isPlaceholder }
+		{ "inline-block  transition-all text-sm text-gray-700 mb-1": !isPlaceholder }
 	)
 	if (!label) return null
 	return (

package/stories/molecules/inputs/NestedInputButton/NestedInputButton.tsx

@@ -23,7 +23,7 @@ const NestedInputButton: React.FC<INestedInputButtonProps> = ({
 	const { ...buttonProps } = props
 	const { onClick } = buttonProps
 	const buttonStyle = cn(
-		"relative flex items-center space-x-2 px-4 py-2 leading-5 border border-gray-300 text-sm font-medium focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-purple-500",
+		"relative flex items-center space-x-2 px-4 py-2 leading-5 border border-gray-300 text-sm  focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-purple-500",
 		{
 			"rounded-r text-gray-500 -ml-px": align === "right"
 		},

package/stories/molecules/inputs/combobox/ComboBox.tsx

@@ -87,7 +87,7 @@ const Combobox = <T extends Record<string, unknown>>({
 			: items.filter((item) => {
 					return `${item[displayProperty]}`.toLowerCase().includes(query.toLowerCase())
 			  })
-	const labelStyles = cn("block text-sm font-medium text-gray-700")
+	const labelStyles = cn("block text-sm text-gray-700")
 	const buttonStyles = cn("absolute inset-y-0 right-0 flex items-center rounded-r px-2 focus:outline-none")
 	const optionStyles = cn(
 		"absolute z-30 mt-1 max-h-60 w-full overflow-auto rounded bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
@@ -151,7 +151,7 @@ const Combobox = <T extends Record<string, unknown>>({
 							>
 								{({ active, selected }) => (
 									<>
-										<span className={classNames("block truncate", selected ? "font-semibold" : "")}>
+										<span className={classNames("block truncate", selected ? "font-medium" : "")}>
 											{`${item[displayProperty]}`}
 										</span>
 

package/stories/organisms/DropdownComponent/Dropdown.stories.tsx

@@ -75,4 +75,12 @@ export const WithIcons: Story = {
 		CustomDropdownTrigger: <IconElement />
 	}
 }
+
+export const WithFloatingArrow: Story = {
+	args: {
+		...defaultArgs,
+		showFloatingArrow: true
+	}
+}
+
 export default meta

package/stories/organisms/DropdownComponent/DropdownComponent.tsx

@@ -15,7 +15,9 @@ import {
 	FloatingList,
 	useTransitionStyles,
 	Placement,
-	useListNavigation
+	useListNavigation,
+	FloatingArrow,
+	arrow
 } from "@floating-ui/react"
 
 import { ClassNameWithAutocomplete } from "utils/types"
@@ -54,12 +56,13 @@ export interface IDropdownProps extends HTMLAttributes<HTMLDivElement> {
 	disabled?: boolean
 	onFocus?: () => void
 	onBlur?: () => void
+	showFloatingArrow?: boolean
 }
 export const defaultClassNames = {
 	groupClassname: "flex inline-block text-left",
 	itemsClassname: "mt-2 origin-bottom-right rounded bg-white shadow-lg z-[99999] border border-gray-300  ",
 	itemClassname:
-		"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 ",
+		"group flex font-sans  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] flex items-center  rounded outline-purple-500 transition-all text-gray-400 hover:text-gray-600 ",
@@ -85,6 +88,7 @@ const Dropdown: React.FC<IDropdownProps> = ({
 	disabled,
 	onFocus,
 	onBlur,
+	showFloatingArrow = false,
 	...props
 }: IDropdownProps): JSX.Element | null => {
 	const [isOpen, setIsOpen] = useState(false)
@@ -92,6 +96,7 @@ const Dropdown: React.FC<IDropdownProps> = ({
 	const [activeIndex, setActiveIndex] = useState<number | null>(null)
 
 	const listRef = useRef<(HTMLButtonElement | null)[]>([])
+	const arrowRef = React.useRef(null)
 
 	// Floating UI logic
 	const { refs, floatingStyles, context } = useFloating({
@@ -113,7 +118,11 @@ const Dropdown: React.FC<IDropdownProps> = ({
 			autoPlacement({
 				allowedPlacements: [placement, "bottom-start", "bottom-end", "bottom"]
 			}),
-			shift({ rootBoundary: "document" })
+			shift({ rootBoundary: "document" }),
+			arrow({
+				element: arrowRef,
+				padding: 4
+			})
 		],
 		whileElementsMounted: autoUpdate
 	})
@@ -351,6 +360,9 @@ const Dropdown: React.FC<IDropdownProps> = ({
 								}}
 							>
 								{ItemComponents}
+								{showFloatingArrow && 
+									<FloatingArrow ref={arrowRef} context={context} strokeWidth={1} 
+									className={cn(defaultClassNames.itemsClassname, itemsClassname, "fill-white [&>path:first-of-type]:stroke-gray-300 [&>path:last-of-type]:stroke-white")}/>}
 							</div>
 						</FloatingFocusManager>
 					</FloatingPortal>

package/stories/organisms/EmptySectionPlaceholder/EmptySectionPlaceholder.stories.tsx

@@ -15,7 +15,7 @@ type Story = StoryObj<typeof EmptySectionPlaceholder>
 const MissingAttachmentCTA = () => {
 	const fileInputRef = useRef<HTMLInputElement>(null)
 	return (
-		<div className="mb-2 block text-sm font-medium text-gray-600">
+		<div className="mb-2 block text-sm  text-gray-600">
 			<input type="file" className="hidden" ref={fileInputRef} />
 			<button
 				className="hover:underline hover:text-gray-700 transition-all"

package/stories/organisms/EmptySectionPlaceholder/EmptySectionPlaceholder.tsx

@@ -34,7 +34,7 @@ const EmptySectionPlaceholder: React.FC<IEmptySectionPlaceholderProps> = ({
 			{CallToActionComponent ? (
 				CallToActionComponent
 			) : (
-				<p className="mb-2 block text-sm font-medium text-gray-600">{primaryMessage}</p>
+				<p className="mb-2 block text-sm  text-gray-600">{primaryMessage}</p>
 			)}
 			{actions.length > 0 ? (
 				<div className={cn("mt-2 flex gap-2", isWide ? "" : "flex-col items-center")}>

package/stories/organisms/FormInputWithAddons/FormInputWithAddons.tsx

@@ -62,7 +62,7 @@ const FormInputWithAddons: React.FC<IFormInputWithAddonsProps> = ({
 	return (
 		<div className={cn("group flex flex-col", containerClassName)}>
 			{!leadLabel && !trailLabel && topLabel && (
-				<label htmlFor={id} className={cn("flex items-center text-sm font-medium text-gray-600", labelClass)}>
+				<label htmlFor={id} className={cn("flex items-center text-sm  text-gray-600", labelClass)}>
 					{topLabel}
 				</label>
 			)}

package/stories/organisms/TextInputSelect/InputSelect.tsx

@@ -35,7 +35,7 @@ export const InputSelect: FC<InputSelectProps> = ({
 	return (
 		<select
 			className={cn(
-				"relative z-10 inline-flex items-center space-x-2 border border-gray-300 bg-white px-4 py-2 pr-7 text-sm font-medium",
+				"relative z-10 inline-flex items-center space-x-2 border border-gray-300 bg-white px-4 py-2 pr-7 text-sm ",
 				"focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500",
 				align === "right"
 					? "-ml-px rounded-r border-l-white text-gray-700"

package/stories/organisms/TextInputSelect/TextInputSelect.tsx

@@ -110,7 +110,7 @@ const TextInputSelect: FC<ITextInputSelectProps> = ({
 		setIsFocus(false)
 		// add other focus effects here
 	}
-	const labelStyles = cn("block inline-block font-medium transition-all text-sm text-gray-700 mb-1", {
+	const labelStyles = cn("block inline-block transition-all text-sm text-gray-700 mb-1", {
 		"text-red-500 bg-white": isError
 	})