@agility/plenum-ui 2.2.1 → 2.2.3

package/dist/tailwind.css

@@ -1180,10 +1180,6 @@ select {
   top: 24rem;
 }
 
-.top-\[10px\] {
-  top: 10px;
-}
-
 .top-\[1px\] {
   top: 1px;
 }
@@ -1204,10 +1200,6 @@ select {
   z-index: 40;
 }
 
-.z-\[2\] {
-  z-index: 2;
-}
-
 .z-\[99999\] {
   z-index: 99999;
 }
@@ -1841,10 +1833,6 @@ select {
   margin-top: 0.5rem;
 }
 
-.mt-3 {
-  margin-top: 0.75rem;
-}
-
 .line-clamp-1 {
   overflow: hidden;
   display: -webkit-box;
@@ -3300,11 +3288,6 @@ select {
   border-color: rgb(156 163 175 / var(--tw-border-opacity, 1)) !important;
 }
 
-.\!border-purple-500 {
-  --tw-border-opacity: 1 !important;
-  border-color: rgb(121 51 221 / var(--tw-border-opacity, 1)) !important;
-}
-
 .\!border-red-500 {
   --tw-border-opacity: 1 !important;
   border-color: rgb(239 68 68 / var(--tw-border-opacity, 1)) !important;
@@ -3315,6 +3298,11 @@ select {
   border-color: rgb(220 38 38 / var(--tw-border-opacity, 1)) !important;
 }
 
+.\!border-violet-700 {
+  --tw-border-opacity: 1 !important;
+  border-color: rgb(109 40 217 / var(--tw-border-opacity, 1)) !important;
+}
+
 .border-blue-100 {
   --tw-border-opacity: 1;
   border-color: rgb(219 234 254 / var(--tw-border-opacity, 1));
@@ -67947,10 +67935,6 @@ select {
   text-align: left;
 }
 
-.text-center {
-  text-align: center;
-}
-
 .font-sans {
   font-family: TTInterphasesPro, sans-serif;
 }
@@ -68078,20 +68062,16 @@ select {
   text-transform: uppercase;
 }
 
-.leading-4 {
-  line-height: 1rem;
-}
-
 .leading-5 {
   line-height: 1.25rem;
 }
 
-.leading-\[14px\] {
-  line-height: 14px;
+.leading-\[12px\] {
+  line-height: 12px;
 }
 
-.leading-\[20px\] {
-  line-height: 20px;
+.leading-\[14px\] {
+  line-height: 14px;
 }
 
 .leading-\[28px\] {
@@ -78921,11 +78901,6 @@ select {
   --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity, 1)) !important;
 }
 
-.\!ring-purple-500 {
-  --tw-ring-opacity: 1 !important;
-  --tw-ring-color: rgb(121 51 221 / var(--tw-ring-opacity, 1)) !important;
-}
-
 .ring-black {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity, 1));
@@ -78990,14 +78965,14 @@ select {
   transition-duration: 150ms;
 }
 
-.placeholder\:text-gray-300::-moz-placeholder {
+.placeholder\:text-gray-500::-moz-placeholder {
   --tw-text-opacity: 1;
-  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
 }
 
-.placeholder\:text-gray-300::placeholder {
+.placeholder\:text-gray-500::placeholder {
   --tw-text-opacity: 1;
-  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
 }
 
 .focus-within\:z-10:focus-within {
@@ -79065,6 +79040,11 @@ select {
   border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
 }
 
+.hover\:border-gray-500:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
+}
+
 .hover\:border-purple-500:hover {
   --tw-border-opacity: 1;
   border-color: rgb(121 51 221 / var(--tw-border-opacity, 1));
@@ -79173,9 +79153,9 @@ select {
   border-color: rgb(121 51 221 / var(--tw-border-opacity, 1));
 }
 
-.focus\:border-purple-600:focus {
+.focus\:border-violet-700:focus {
   --tw-border-opacity: 1;
-  border-color: rgb(105 26 216 / var(--tw-border-opacity, 1));
+  border-color: rgb(109 40 217 / var(--tw-border-opacity, 1));
 }
 
 .focus\:bg-purple-100:focus {
@@ -79193,6 +79173,12 @@ select {
   outline-offset: 2px;
 }
 
+.focus\:ring-0:focus {
+  --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(0px + 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\:ring-1:focus {
   --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);
@@ -79215,11 +79201,6 @@ select {
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity, 1)) !important;
 }
 
-.focus\:\!ring-purple-500:focus {
-  --tw-ring-opacity: 1 !important;
-  --tw-ring-color: rgb(121 51 221 / var(--tw-ring-opacity, 1)) !important;
-}
-
 .focus\:\!ring-red-500:focus {
   --tw-ring-opacity: 1 !important;
   --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1)) !important;

package/dist/types/stories/atoms/Typography/Label/Label.d.ts

@@ -5,6 +5,7 @@ export interface LabelProps {
     size?: LabelSize;
     children: React.ReactNode;
     className?: string;
+    htmlFor?: string;
 }
-export default function Label({ as, size, children, className }: LabelProps): import("react/jsx-runtime").JSX.Element;
+export default function Label({ as, size, children, className, htmlFor }: LabelProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/stories/atoms/Typography/Paragraph/Paragraph.d.ts

@@ -1,5 +1,5 @@
 type ParagraphAs = "span" | "p" | "label" | "strong" | "em";
-type ParagraphSize = "lg" | "md" | "sm" | "xs";
+type ParagraphSize = "xl" | "lg" | "md" | "sm" | "xs";
 export interface ParagraphProps {
     as?: ParagraphAs;
     size?: ParagraphSize;

package/package.json

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

package/stories/atoms/Typography/Label/Label.tsx

@@ -8,6 +8,7 @@ export interface LabelProps {
 	size?: LabelSize;
 	children: React.ReactNode;
 	className?: string;
+	htmlFor?: string;
 }
 
 const labelStyles: Record<LabelSize, string> = {
@@ -18,8 +19,12 @@ const labelStyles: Record<LabelSize, string> = {
 	xs: "text-[10px] leading-[14px] tracking[-0.2px]"
 };
 
-export default function Label({ as = "span", size = "md", children, className }: LabelProps) {
+export default function Label({ as = "span", size = "md", children, className, htmlFor = "" }: LabelProps) {
 	const Tag = as;
 
-	return <Tag className={cn("gray-900 font-medium", labelStyles[size], className)}>{children}</Tag>;
+	return (
+		<Tag htmlFor={htmlFor} className={cn("gray-900 font-normal", labelStyles[size], className)}>
+			{children}
+		</Tag>
+	);
 }

package/stories/atoms/Typography/Paragraph/Paragraph.tsx

@@ -1,7 +1,7 @@
 import { default as cn } from "classnames";
 
 type ParagraphAs = "span" | "p" | "label" | "strong" | "em";
-type ParagraphSize = "lg" | "md" | "sm" | "xs";
+type ParagraphSize = "xl" | "lg" | "md" | "sm" | "xs";
 
 export interface ParagraphProps {
 	as?: ParagraphAs;
@@ -11,10 +11,11 @@ export interface ParagraphProps {
 }
 
 const paragraphStyles: Record<ParagraphSize, string> = {
-	lg: "text-lg",
-	md: "text-base",
-	sm: "text-sm",
-	xs: "text-xs leading-[20px]"
+	xl: "text-lg",
+	lg: "text-base",
+	md: "text-sm",
+	sm: "text-xs",
+	xs: "text-[10px] leading-[12px]"
 };
 
 export default function Paragraph({ as = "p", size = "md", children, className }: ParagraphProps) {

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

@@ -1,4 +1,5 @@
 import { FC } from "react";
+import Paragraph from "../../../atoms/Typography/Paragraph/Paragraph";
 
 export interface IInputCounterProps {
 	/** Counter limit */
@@ -9,16 +10,11 @@ export interface IInputCounterProps {
 
 /** Primary UI component for user interaction */
 const InputCounter: FC<IInputCounterProps> = ({ current = 0, limit }) => {
+	if (!limit) return null;
 	return (
-		<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 && (
-				<>
-					<div>/</div>
-					<div className="limitCount">{limit}</div>
-				</>
-			)}
-		</div>
+		<Paragraph size="md" className="text-gray-500">
+			{current ?? 0} / {limit}
+		</Paragraph>
 	);
 };
 export default InputCounter;

package/stories/molecules/inputs/InputField/InputField.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from "react"
-import { default as cn } from "classnames"
+import React, { forwardRef } from "react";
+import { default as cn } from "classnames";
 
 export type AcceptedInputTypes =
 	| "date"
@@ -13,33 +13,33 @@ export type AcceptedInputTypes =
 	| "tel"
 	| "text"
 	| "url"
-	| "currency"
+	| "currency";
 
 export interface IInputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
 	/** Callback on change */
-	handleChange: (value: string) => void
+	handleChange: (value: string) => void;
 	/** Input ID*/
-	id?: string
+	id?: string;
 	/** Input Name */
-	name?: string
+	name?: string;
 	/** Force the focus state on the input */
-	isFocused?: boolean
+	isFocused?: boolean;
 	/** Error condition */
-	isError?: boolean
+	isError?: boolean;
 	/** Disabled state */
-	isDisabled?: boolean
+	isDisabled?: boolean;
 	/** Readonly state */
-	isReadonly?: boolean
+	isReadonly?: boolean;
 	/** Input value */
-	value: string
+	value: string;
 	/** Type of Text Input to Render eg. "text", "email" */
-	type: AcceptedInputTypes
+	type: AcceptedInputTypes;
 	/** If field is required */
-	required?: boolean
+	required?: boolean;
 	/** use input psuedo classes for :valid and :invalid styles. on by default */
-	clientSideCheck?: boolean
+	clientSideCheck?: boolean;
 	/** Placeholder text */
-	placeholder?: string
+	placeholder?: string;
 	/**ref for input */
 }
 
@@ -71,7 +71,7 @@ const InputField = (
 				name,
 				value,
 				onChange: (e) => {
-					if (handleChange) handleChange(e.target.value)
+					if (handleChange) handleChange(e.target.value);
 				},
 				autoFocus: isFocused,
 				readOnly: isReadonly,
@@ -81,7 +81,7 @@ const InputField = (
 				"aria-invalid": isError,
 				"aria-disabled": isDisabled,
 				className: cn(
-					"peer w-full rounded border border-gray-300  px-3 text-sm font-normal  leading-5 outline-offset-0 ring-offset-0 focus:border-purple-600 focus:ring-purple-600   ",
+					"peer w-full rounded border border-gray-300 px-3 text-sm font-normal leading-5 outline-offset-0 ring-offset-0 focus:border-violet-700 focus:ring-0   ",
 					isError ? "!border-red-600 !text-red-600 focus:!ring-red-600" : "",
 					isReadonly ? "!border-gray-400 !text-gray-500 focus:!ring-gray-400" : "",
 					className
@@ -89,8 +89,8 @@ const InputField = (
 				...rest
 			}}
 		/>
-	)
-}
+	);
+};
 
-const _InputField = forwardRef<HTMLInputElement, IInputFieldProps>(InputField)
-export default _InputField
+const _InputField = forwardRef<HTMLInputElement, IInputFieldProps>(InputField);
+export default _InputField;

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

@@ -3,6 +3,7 @@
 //@ts-ignore
 import React, { FC } from "react";
 import { default as cn } from "classnames";
+import Label from "../../../atoms/Typography/Label/Label";
 
 export interface IInputLabelProps {
 	/** Prop comment */
@@ -26,33 +27,27 @@ const InputLabel: FC<IInputLabelProps> = ({
 	isRequired,
 	isDisabled,
 	isActive,
-	isError,
 	label,
 	truncateLabel = false,
 	fullWidthLabel = false,
 	noMarginBottom = false
 }: IInputLabelProps) => {
 	const labelStyles = cn(
-		"z-[2] inline-flex gap-1",
-		{ "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 },
+		"inline-flex gap-1 text-gray-700",
+		{ "text-gray-400 top-8": !isActive },
+		{ "text-gray-700 bg-white": isActive },
 		{ "text-gray-500/[.5]": isDisabled },
-		{ "inline-block  transition-all text-sm text-gray-700": !isPlaceholder },
 		{ "block w-full": fullWidthLabel },
-		{ "mb-1": !noMarginBottom }
+		{ "mb-1": !noMarginBottom },
+		{ "break-all line-clamp-1": truncateLabel }
 	);
 
 	if (!label) return null;
 	return (
-		<label htmlFor={id} className={labelStyles}>
-			<div className={truncateLabel ? "break-all line-clamp-1" : ""} title={label}>
-				{label}
-			</div>
-			{isRequired && <span className="text-red-500"> *</span>}
-		</label>
+		<Label as="label" size="md" className={labelStyles} htmlFor={id}>
+			{label}
+			{isRequired && <span className="text-red-600"> *</span>}
+		</Label>
 	);
 };
 

package/stories/molecules/inputs/TextInput/TextInput.tsx

@@ -3,6 +3,7 @@ import { default as cn } from "classnames";
 import InputLabel from "../InputLabel";
 import InputField, { AcceptedInputTypes } from "../InputField";
 import InputCounter from "../InputCounter";
+import Paragraph from "../../../atoms/Typography/Paragraph/Paragraph";
 
 export interface ITextInputProps {
 	/** Input type*/
@@ -118,15 +119,7 @@ const TextInput = (
 
 	return (
 		<div className="relative group">
-			<InputLabel
-				isPlaceholder={true}
-				label={label}
-				isRequired={isRequired}
-				id={id}
-				isError={isError}
-				isActive={true}
-				isDisabled={isDisabled}
-			/>
+			<InputLabel label={label} isRequired={isRequired} id={id} isActive={true} isDisabled={isDisabled} />
 			<InputField
 				onFocus={handleInputFocus}
 				onBlur={handleInputBlur}
@@ -139,17 +132,16 @@ const TextInput = (
 				name={name}
 				id={id}
 				className={cn(
-					"w-full rounded border py-2 px-3 text-sm font-normal leading-5",
+					"w-full rounded border py-2 px-3 text-sm font-normal leading-5 hover:border-gray-500 placeholder:text-gray-500 ",
 					{ "border-gray-300": !isFocus && !isError && !isDisabled },
 					{
-						"!border-purple-500 shadow-none outline-purple-500 focus:!ring-purple-500":
-							isFocus && !isError && !isDisabled
+						"!border-violet-700 shadow-none": isFocus && !isError && !isDisabled
 					},
 					{
 						"!border-red-500 shadow-none focus:ring-red-500": isError
 					},
 					{
-						"placeholder:text-gray-300 !border-gray-300 !outline-gray-300 focus:!ring-gray-300": isDisabled
+						"!border-gray-300 !outline-gray-300 focus:!ring-gray-300": isDisabled
 					},
 					className
 				)}
@@ -164,9 +156,9 @@ const TextInput = (
 			<div className="flex flex-row space-x-3">
 				<div className="grow">
 					{message && (
-						<span className={cn("mt-1 block text-sm", isError ? "text-red-500" : "text-gray-500")}>
+						<Paragraph size="md" className={isError ? "text-red-600" : "text-gray-500"}>
 							{message}
-						</span>
+						</Paragraph>
 					)}
 				</div>
 				{isShowCounter && (

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

@@ -102,15 +102,7 @@ const Combobox = <T extends Record<string, unknown>>({
 		>
 			{label && (
 				<HeadlessUICombobox.Label className={labelStyles}>
-					<InputLabel
-						isPlaceholder
-						isActive
-						label={label}
-						isRequired={isRequired}
-						id={id}
-						isError={isError}
-						isDisabled={isDisabled}
-					/>
+					<InputLabel isActive label={label} isRequired={isRequired} id={id} isDisabled={isDisabled} />
 				</HeadlessUICombobox.Label>
 			)}
 			<div className="relative">

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

@@ -62,17 +62,7 @@ const Select: React.FC<ISelectProps> = ({
 	const wrapperStyle = cn("group", { "opacity-50": isDisabled });
 	return (
 		<div className={wrapperStyle}>
-			{label && (
-				<InputLabel
-					isPlaceholder
-					isActive
-					label={label}
-					isRequired={isRequired}
-					id={id}
-					isError={isError}
-					isDisabled={isDisabled}
-				/>
-			)}
+			{label && <InputLabel isActive label={label} isRequired={isRequired} id={id} isDisabled={isDisabled} />}
 			<select
 				id={id}
 				name={name}

package/stories/molecules/inputs/textArea/TextArea.tsx

@@ -104,15 +104,7 @@ const Textarea: React.FC<ITextareaProps> = ({
 	//with label
 	return (
 		<div className="group">
-			<InputLabel
-				isPlaceholder
-				isActive
-				label={label.display}
-				isRequired={isRequired}
-				id={id}
-				isError={isError}
-				isDisabled={isDisabled}
-			/>
+			<InputLabel isActive label={label.display} isRequired={isRequired} id={id} isDisabled={isDisabled} />
 
 			<div>
 				<textarea