@agility/plenum-ui 2.1.28 → 2.2.1

package/dist/tailwind.css

@@ -67985,6 +67985,34 @@ select {
   line-height: 3.75rem;
 }
 
+.text-\[10px\] {
+  font-size: 10px;
+}
+
+.text-\[20px\] {
+  font-size: 20px;
+}
+
+.text-\[24px\] {
+  font-size: 24px;
+}
+
+.text-\[28px\] {
+  font-size: 28px;
+}
+
+.text-\[32px\] {
+  font-size: 32px;
+}
+
+.text-\[36px\] {
+  font-size: 36px;
+}
+
+.text-\[40px\] {
+  font-size: 40px;
+}
+
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -68031,7 +68059,7 @@ select {
 }
 
 .font-medium {
-  font-weight: 600;
+  font-weight: 500;
 }
 
 .font-normal {
@@ -68058,10 +68086,46 @@ select {
   line-height: 1.25rem;
 }
 
+.leading-\[14px\] {
+  line-height: 14px;
+}
+
+.leading-\[20px\] {
+  line-height: 20px;
+}
+
+.leading-\[28px\] {
+  line-height: 28px;
+}
+
+.leading-\[32px\] {
+  line-height: 32px;
+}
+
+.leading-\[36px\] {
+  line-height: 36px;
+}
+
+.leading-\[40px\] {
+  line-height: 40px;
+}
+
+.leading-\[44px\] {
+  line-height: 44px;
+}
+
+.leading-\[48px\] {
+  line-height: 48px;
+}
+
 .leading-none {
   line-height: 1;
 }
 
+.tracking-\[-0\.8px\] {
+  letter-spacing: -0.8px;
+}
+
 .\!text-gray-500 {
   --tw-text-opacity: 1 !important;
   color: rgb(107 114 128 / var(--tw-text-opacity, 1)) !important;

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

@@ -0,0 +1,8 @@
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export interface HeadingProps {
+    level: HeadingLevel;
+    children: React.ReactNode;
+    className?: string;
+}
+export default function Heading({ level, children, className }: HeadingProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Heading from "./Heading";
+declare const meta: Meta<typeof Heading>;
+type Story = StoryObj<typeof Heading>;
+export declare const Heading1: Story;
+export declare const Heading2: Story;
+export declare const Heading3: Story;
+export declare const Heading4: Story;
+export declare const Heading5: Story;
+export declare const Heading6: Story;
+export declare const HeadingWithCustomClassName: Story;
+export default meta;

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

@@ -0,0 +1,3 @@
+import Heading, { HeadingProps } from "./Heading";
+export { Heading };
+export type { HeadingProps };

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

@@ -0,0 +1,10 @@
+type LabelAs = "span" | "p" | "label" | "strong" | "em";
+type LabelSize = "xl" | "lg" | "md" | "sm" | "xs";
+export interface LabelProps {
+    as?: LabelAs;
+    size?: LabelSize;
+    children: React.ReactNode;
+    className?: string;
+}
+export default function Label({ as, size, children, className }: LabelProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Label from "./Label";
+declare const meta: Meta<typeof Label>;
+type Story = StoryObj<typeof Label>;
+export declare const DefaultLabel: Story;
+export declare const ExtraLargeLabel: Story;
+export declare const LargeLabel: Story;
+export declare const MediumLabel: Story;
+export declare const SmallLabel: Story;
+export declare const ExtraSmallLabel: Story;
+export declare const LabelWithCustomStyle: Story;
+export default meta;

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

@@ -0,0 +1,3 @@
+import Label, { LabelProps } from "./Label";
+export { Label };
+export type { LabelProps };

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

@@ -0,0 +1,10 @@
+type ParagraphAs = "span" | "p" | "label" | "strong" | "em";
+type ParagraphSize = "lg" | "md" | "sm" | "xs";
+export interface ParagraphProps {
+    as?: ParagraphAs;
+    size?: ParagraphSize;
+    children: React.ReactNode;
+    className?: string;
+}
+export default function Paragraph({ as, size, children, className }: ParagraphProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Paragraph from "./Paragraph";
+declare const meta: Meta<typeof Paragraph>;
+type Story = StoryObj<typeof Paragraph>;
+export declare const DefaultParagraph: Story;
+export declare const LargeParagraph: Story;
+export declare const MediumParagraph: Story;
+export declare const SmallParagraph: Story;
+export declare const ExtraSmallParagraph: Story;
+export declare const ParagraphWithCustomStyle: Story;
+export default meta;

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

@@ -0,0 +1,3 @@
+import Paragraph, { ParagraphProps } from "./Paragraph";
+export { Paragraph };
+export type { ParagraphProps };

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

@@ -3,5 +3,8 @@ import Badge, { IBadgeProps } from "./badges";
 import { Button, Capsule, BTNActionType, IButtonProps, ICapsuleProps } from "./buttons";
 import { DynamicIcon, FAIconName, IDynamicIconProps, IIconWithShadowProps, IconName, IconWithShadow, UnifiedIconName, isFAIcon, isHeroIcon, isTablerIcon, isUnifiedIconName } from "./icons";
 import { ILoaderProps, IRadialProgressProps, Loader, RadialProgress } from "./loaders";
-export type { IAvatarProps, IBadgeProps, IButtonProps, ICapsuleProps, IDynamicIconProps, IIconWithShadowProps, ILoaderProps, IRadialProgressProps, UnifiedIconName, IconName, FAIconName, BTNActionType };
-export { Avatar, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, RadialProgress, isFAIcon, isHeroIcon, isTablerIcon, isUnifiedIconName };
+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, FAIconName, BTNActionType };
+export { Avatar, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, RadialProgress, Heading, Label, Paragraph, isFAIcon, isHeroIcon, isTablerIcon, isUnifiedIconName };

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

@@ -1,5 +1,5 @@
-import { IAvatarProps, IBadgeProps, IButtonProps, ICapsuleProps, IDynamicIconProps, IIconWithShadowProps, ILoaderProps, IRadialProgressProps, UnifiedIconName, IconName, FAIconName, BTNActionType, Avatar, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, RadialProgress, isFAIcon, isHeroIcon, isTablerIcon, isUnifiedIconName } from "./atoms";
+import { IAvatarProps, IBadgeProps, IButtonProps, ICapsuleProps, IDynamicIconProps, IIconWithShadowProps, ILoaderProps, IRadialProgressProps, UnifiedIconName, IconName, FAIconName, BTNActionType, Avatar, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, RadialProgress, isFAIcon, 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, FAIconName, BTNActionType, ITextInputProps, ISimpleSelectOptions, IAnimatedFormInputWithAddons, MultiSelectItemProps };
-export { Avatar, Checkbox, Combobox, InputField, InputLabel, NestedInputButton, Radio, Select, Textarea, ToggleSwitch, AnimatedLabelInput, AnimatedLabelTextArea, ButtonDropdown, Dropdown, EmptySectionPlaceholder, FormInputWithAddons, Badge, Button, Capsule, DynamicIcon, IconWithShadow, Loader, RadialProgress, isFAIcon, isHeroIcon, isTablerIcon, isUnifiedIconName, TextInput, TextInputSelect, AnimatedFormInputWithAddons, DropdownWithMultiSelect };
+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, FAIconName, 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, isFAIcon, isHeroIcon, isTablerIcon, isUnifiedIconName, TextInput, TextInputSelect, AnimatedFormInputWithAddons, DropdownWithMultiSelect, Heading, Label, Paragraph };

package/dist/types/stories/molecules/inputs/TextInput/TextInput.d.ts

@@ -34,6 +34,10 @@ export interface ITextInputProps {
     /**Placeholder input text*/
     placeholder?: string;
     className?: string;
+    /** Callback on focus */
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    /** Callback on blur */
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
 }
 declare const _TextInput: React.ForwardRefExoticComponent<ITextInputProps & React.RefAttributes<HTMLInputElement>>;
 export default _TextInput;

package/package.json

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

package/stories/atoms/Typography/Heading/Heading.stories.ts

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Heading from "./Heading";
+
+const meta: Meta<typeof Heading> = {
+	title: "Design System/atoms/Typography/Heading",
+	component: Heading,
+	tags: ["autodocs"]
+};
+
+type Story = StoryObj<typeof Heading>;
+
+export const Heading1: Story = {
+	args: { level: 1, children: "Heading 1", className: "" }
+};
+
+export const Heading2: Story = {
+	args: { level: 2, children: "Heading 2", className: "" }
+};
+
+export const Heading3: Story = {
+	args: { level: 3, children: "Heading 3", className: "" }
+};
+
+export const Heading4: Story = {
+	args: { level: 4, children: "Heading 4", className: "" }
+};
+
+export const Heading5: Story = {
+	args: { level: 5, children: "Heading 5", className: "" }
+};
+
+export const Heading6: Story = {
+	args: { level: 6, children: "Heading 6", className: "" }
+};
+
+export const HeadingWithCustomClassName: Story = {
+	args: { level: 1, children: "Heading 1", className: "text-red-500" }
+};
+
+export default meta;

package/stories/atoms/Typography/Heading/Heading.tsx

@@ -0,0 +1,26 @@
+import { default as cn } from "classnames";
+
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+
+export interface HeadingProps {
+	level: HeadingLevel;
+	children: React.ReactNode;
+	className?: string;
+}
+
+const headingStyles: Record<HeadingLevel, string> = {
+	1: "text-[40px] leading-[48px]",
+	2: "text-[36px] leading-[44px]",
+	3: "text-[32px] leading-[40px]",
+	4: "text-[28px] leading-[36px]",
+	5: "text-[24px] leading-[32px]",
+	6: "text-[20px] leading-[28px]"
+};
+
+export default function Heading({ level, children, className }: HeadingProps) {
+	const Tag = `h${level}` as const;
+
+	return (
+		<Tag className={cn("gray-900 font-medium tracking-[-0.8px]", headingStyles[level], className)}>{children}</Tag>
+	);
+}

package/stories/atoms/Typography/Heading/index.ts

@@ -0,0 +1,3 @@
+import Heading, { HeadingProps } from "./Heading";
+export { Heading };
+export type { HeadingProps };

package/stories/atoms/Typography/Label/Label.stories.ts

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Label from "./Label";
+
+const meta: Meta<typeof Label> = {
+	title: "Design System/atoms/Typography/Label",
+	component: Label,
+	tags: ["autodocs"]
+};
+
+type Story = StoryObj<typeof Label>;
+
+export const DefaultLabel: Story = {
+	args: { children: "Default Label" }
+};
+
+export const ExtraLargeLabel: Story = {
+	args: { children: "Extra Large Label", size: "xl" }
+};
+
+export const LargeLabel: Story = {
+	args: { children: "Large Label", size: "lg" }
+};
+
+export const MediumLabel: Story = {
+	args: { children: "Medium Label", size: "md" }
+};
+
+export const SmallLabel: Story = {
+	args: { children: "Small Label", size: "sm" }
+};
+
+export const ExtraSmallLabel: Story = {
+	args: { children: "Extra Small Label", size: "xs" }
+};
+
+export const LabelWithCustomStyle: Story = {
+	args: { children: "Label With Custom Style", className: "text-red-500" }
+};
+
+export default meta;

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

@@ -0,0 +1,25 @@
+import { default as cn } from "classnames";
+
+type LabelAs = "span" | "p" | "label" | "strong" | "em";
+type LabelSize = "xl" | "lg" | "md" | "sm" | "xs";
+
+export interface LabelProps {
+	as?: LabelAs;
+	size?: LabelSize;
+	children: React.ReactNode;
+	className?: string;
+}
+
+const labelStyles: Record<LabelSize, string> = {
+	xl: "text-lg tracking[-0.36px]",
+	lg: "text-base tracking[-0.32px]",
+	md: "text-sm tracking[-0.28px]",
+	sm: "text-xs tracking[-0.24px]",
+	xs: "text-[10px] leading-[14px] tracking[-0.2px]"
+};
+
+export default function Label({ as = "span", size = "md", children, className }: LabelProps) {
+	const Tag = as;
+
+	return <Tag className={cn("gray-900 font-medium", labelStyles[size], className)}>{children}</Tag>;
+}

package/stories/atoms/Typography/Label/index.ts

@@ -0,0 +1,3 @@
+import Label, { LabelProps } from "./Label";
+export { Label };
+export type { LabelProps };

package/stories/atoms/Typography/Paragraph/Paragraph.stories.ts

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Paragraph from "./Paragraph";
+
+const meta: Meta<typeof Paragraph> = {
+	title: "Design System/atoms/Typography/Paragraph",
+	component: Paragraph,
+	tags: ["autodocs"]
+};
+
+type Story = StoryObj<typeof Paragraph>;
+
+export const DefaultParagraph: Story = {
+	args: { children: "Default Paragraph" }
+};
+
+export const LargeParagraph: Story = {
+	args: { children: "Large Paragraph", size: "lg" }
+};
+
+export const MediumParagraph: Story = {
+	args: { children: "Medium Paragraph", size: "md" }
+};
+
+export const SmallParagraph: Story = {
+	args: { children: "Small Paragraph", size: "sm" }
+};
+
+export const ExtraSmallParagraph: Story = {
+	args: { children: "Extra Small Paragraph", size: "xs" }
+};
+
+export const ParagraphWithCustomStyle: Story = {
+	args: { children: "Paragraph With Custom Style", className: "text-red-500" }
+};
+
+export default meta;

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

@@ -0,0 +1,24 @@
+import { default as cn } from "classnames";
+
+type ParagraphAs = "span" | "p" | "label" | "strong" | "em";
+type ParagraphSize = "lg" | "md" | "sm" | "xs";
+
+export interface ParagraphProps {
+	as?: ParagraphAs;
+	size?: ParagraphSize;
+	children: React.ReactNode;
+	className?: string;
+}
+
+const paragraphStyles: Record<ParagraphSize, string> = {
+	lg: "text-lg",
+	md: "text-base",
+	sm: "text-sm",
+	xs: "text-xs leading-[20px]"
+};
+
+export default function Paragraph({ as = "p", size = "md", children, className }: ParagraphProps) {
+	const Tag = as;
+
+	return <Tag className={cn("gray-900 font-normal", paragraphStyles[size], className)}>{children}</Tag>;
+}

package/stories/atoms/Typography/Paragraph/index.ts

@@ -0,0 +1,3 @@
+import Paragraph, { ParagraphProps } from "./Paragraph";
+export { Paragraph };
+export type { ParagraphProps };

package/stories/atoms/index.ts

@@ -1,6 +1,6 @@
-import Avatar, { IAvatarProps } from "./Avatar"
-import Badge, { IBadgeProps } from "./badges"
-import { Button, Capsule, BTNActionType, IButtonProps, ICapsuleProps } from "./buttons"
+import Avatar, { IAvatarProps } from "./Avatar";
+import Badge, { IBadgeProps } from "./badges";
+import { Button, Capsule, BTNActionType, IButtonProps, ICapsuleProps } from "./buttons";
 import {
 	DynamicIcon,
 	FAIconName,
@@ -13,9 +13,11 @@ import {
 	isHeroIcon,
 	isTablerIcon,
 	isUnifiedIconName
-} from "./icons"
-import { ILoaderProps, IRadialProgressProps, Loader, RadialProgress } from "./loaders"
-
+} from "./icons";
+import { ILoaderProps, IRadialProgressProps, Loader, RadialProgress } from "./loaders";
+import { Heading, HeadingProps } from "./Typography/Heading";
+import { Label, LabelProps } from "./Typography/Label";
+import { Paragraph, ParagraphProps } from "./Typography/Paragraph";
 export type {
 	IAvatarProps,
 	IBadgeProps,
@@ -25,11 +27,14 @@ export type {
 	IIconWithShadowProps,
 	ILoaderProps,
 	IRadialProgressProps,
+	HeadingProps,
+	LabelProps,
+	ParagraphProps,
 	UnifiedIconName,
 	IconName,
 	FAIconName,
 	BTNActionType
-}
+};
 export {
 	Avatar,
 	Badge,
@@ -39,8 +44,11 @@ export {
 	IconWithShadow,
 	Loader,
 	RadialProgress,
+	Heading,
+	Label,
+	Paragraph,
 	isFAIcon,
 	isHeroIcon,
 	isTablerIcon,
 	isUnifiedIconName
-}
+};

package/stories/index.ts

@@ -23,7 +23,13 @@ import {
 	isFAIcon,
 	isHeroIcon,
 	isTablerIcon,
-	isUnifiedIconName
+	isUnifiedIconName,
+	Heading,
+	HeadingProps,
+	Label,
+	LabelProps,
+	Paragraph,
+	ParagraphProps
 } from "./atoms";
 // Molecular Components, props, and type guards.
 import {
@@ -107,7 +113,10 @@ export type {
 	ITextInputProps,
 	ISimpleSelectOptions,
 	IAnimatedFormInputWithAddons,
-	MultiSelectItemProps
+	MultiSelectItemProps,
+	HeadingProps,
+	LabelProps,
+	ParagraphProps
 };
 export {
 	Avatar,
@@ -140,5 +149,8 @@ export {
 	TextInput,
 	TextInputSelect,
 	AnimatedFormInputWithAddons,
-	DropdownWithMultiSelect
+	DropdownWithMultiSelect,
+	Heading,
+	Label,
+	Paragraph
 };