sy-ui-lib 1.0.36 → 1.0.38

package/dist/components/Button/Button.component.d.ts

@@ -11,22 +11,23 @@ import { ButtonProps } from './Button.types';
  * - Customizable icon and text color
  *
  * Props:
- * @param {ButtonSize} [size="medium"] – Controls the padding and size of the button.
- * @param {ButtonVariant} [variant="primary"] – Visual style of the button (e.g., primary, ghost, danger).
- * @param {string} [text] – Optional text content displayed in the button.
- * @param {boolean} [disabled=false] – Whether the button is disabled.
- * @param {IconName} [iconName] – Optional icon to display.
- * @param {AvatarProps} [avatarProps] – Optional avatar to show beside the text/icon.
- * @param {function} [onClick] – Callback function triggered on button click.
- * @param {string} [iconPosition] - icon position when both icon and text are present.
- * @param {boolean} [isLoading] - shown loader and disable button if true.
- * @param {Color} [textColor] - Optional custom text color for the button text (applies to both icon and text). Overrides the default color based on variant.
- * @param {boolean} [fullWidth=false] - If true, the button will stretch to fill the width of its container.
+ * @param {ButtonSize} size Controls the padding and size of the button.
+ * @param {ButtonVariant} variant Visual style of the button (e.g., primary, ghost, danger).
+ * @param {string} text Optional text content displayed in the button.
+ * @param {boolean} disabled Whether the button is disabled.
+ * @param {IconName} iconName Optional icon to display.
+ * @param {AvatarProps} avatarProps Optional avatar to show beside the text/icon.
+ * @param {function} onClick Callback function triggered on button click.
+ * @param {string} iconPosition icon position when both icon and text are present.
+ * @param {boolean} isLoading shown loader and disable button if true.
+ * @param {Color} textColor Optional custom text color for the button text (applies to both icon and text). Overrides the default color based on variant.
+ * @param {boolean} fullWidth If true, the button will stretch to fill the width of its container.
+ * @param {string} disabledMessage Optional Tooltip message displayed when the button is disabled.
  *
- * Example usage:
+ * @example
  * <Button text="Submit" variant="success" iconName="check" iconPosition="left" isLoading={true} />
  * <Button avatarProps={{ src: "/user.png" }} text="Profile" />
- * <Button iconName="edit" size="small" textColor="primary"/>
+ * <Button iconName="edit" size="small" textColor="primary" disabled disabledMessage="Tooltip message" />
  * <Button text="Save" size="large" fullWidth />
  */
 declare const Button: React.FC<ButtonProps>;

package/dist/components/Button/Button.stories.d.ts

@@ -16,3 +16,4 @@ export declare const LoadingButton: Story;
 export declare const TextWithAvatar: Story;
 export declare const DisabledButton: Story;
 export declare const FullWidthButton: Story;
+export declare const DisabledButtonWithTooltip: Story;

package/dist/components/Button/Button.types.d.ts

@@ -1,6 +1,4 @@
-import { AvatarProps } from '../Avatar/Avatar.types';
-import { IconName } from '../Icon/Icon.types';
-import { TypoColor } from '../Typography/Typography.types';
+import { AvatarProps, IconName, TypoColor } from '..';
 export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "success" | "outline";
 export type ButtonSize = "extraSmall" | "small" | "medium" | "large";
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -28,4 +26,6 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     textColor?: TypoColor;
     /** Make the button take full container width when true.*/
     fullWidth?: boolean;
+    /** Tooltip displayed while the button is disabled. */
+    disabledMessage?: string;
 }

package/dist/components/Chip/Chip.component.d.ts

@@ -12,9 +12,10 @@ import { ChipProps } from './Chip.types';
  * @param {boolean} [isEditable=false] - If true, shows an edit icon and enforces "outlined" styling.
  * @param {iconName} [iconName] – Optional icon to display.
  * @param {() => void} [onClick] - Optional handler for when the chip is clicked.
+ * @param {string} tooltipText Tooltip displayed on hover.
  *
  * Example usage:
- * <Chip text="Active" state="active" iconName="timer" />
+ * <Chip text="Active" state="active" iconName="timer" tooltipText="Your account is locked due to multiple failed login attempts." />
  * <Chip text="Locked" state="locked" isEditable onClick={() => console.log("clicked")} />
  */
 declare const Chip: React.FC<ChipProps>;

package/dist/components/Chip/Chip.stories.d.ts

@@ -33,6 +33,9 @@ declare const meta: {
             };
             options: string[];
         };
+        tooltipText: {
+            control: "text";
+        };
     };
 };
 export default meta;
@@ -55,3 +58,7 @@ export declare const PendingWithField: Story;
 export declare const PendingWithOutlined: Story;
 /** Pending with outlined example of Chip */
 export declare const InfoChip: Story;
+/** Chip with a tooltip explaining its current state. */
+export declare const WithTooltip: Story;
+/** Editable chip with a tooltip. */
+export declare const EditableWithTooltip: Story;

package/dist/components/Chip/Chip.types.d.ts

@@ -1,4 +1,4 @@
-import { IconName } from '../Icon/Icon.types';
+import { IconName } from '..';
 /** Defines the available chip statuses */
 export type ChipType = "active" | "suspended" | "locked" | "pending" | "info";
 /** Defines the chip variant styles */
@@ -22,4 +22,6 @@ export interface ChipProps {
     iconName?: IconName;
     /** Size of the chip, affecting padding and minimum dimensions */
     size?: ChipSize;
+    /** Tooltip content displayed on hover. */
+    tooltipText?: string;
 }

package/dist/components/EventDisplayCard/EventDisplayCard.component.d.ts

@@ -10,7 +10,7 @@ import { EventDisplayCardProps } from './EventDisplayCard.types';
  * @param {string} title - The main heading or event label.
  * @param {ButtonProps[]} [actions] - An optional array of button props to render CTAs.
  *
- * Example usage:
+ * @example
  * <EventDisplayCard
  *   iconName="cricketBat"
  *   title="Bangladesh Emerg v/s South Africa Emerg"

package/dist/components/Icon/Icon.component.d.ts

@@ -12,9 +12,11 @@ import { IconProps } from './Icon.types';
  * @param {string} color Color of the icon (fill/stroke). Defaults to design system color
  * @param {function} onClick If provided, icon becomes clickable and renders as a <button>
  * @param {boolean} cursorPointer Enables pointer cursor styling when true. Defaults to true.
+ * @param {boolean} disabled Disabled pointer cursor styling when true. Defaults to false.
+ * @param {string} tooltipText Tooltip displayed on hover.
  *
- * Example usage:
- *  <Icon icon='view' size={24} size={20} color="smokyblack" onClick={()=> console.log("clicked")} />
+ * @example
+ *  <Icon icon='view' size={24} size={20} color="smokyblack" onClick={()=> console.log("clicked")} tooltipText="View account details." />
  */
 declare const Icon: React.FC<IconProps>;
 export default Icon;

package/dist/components/Icon/Icon.types.d.ts

@@ -4,28 +4,8 @@ import { icons } from './SvgIcons';
  * This ensures type-safe usage of icon names throughout the app.
  */
 export type IconName = keyof typeof icons;
-/**
- * IconSize defines the supported icon sizes in pixels.
- */
+/** Supported icon sizes (in pixels). */
 export type IconSize = 12 | 16 | 20 | 24;
-/** A constant mapping of semantic color names to their corresponding CSS variable tokens */
-export declare const iconColor: {
-    readonly primary: "--color-primary";
-    readonly secondary: "--color-secondary";
-    readonly success: "--color-success";
-    readonly error: "--color-error";
-    readonly black: "--color-black";
-    readonly smokyblack: "--color-smokyblack";
-    readonly slategray: "--color-slategray";
-    readonly brightgray: "--color-brightgray";
-    readonly offwhite: "--color-offwhite";
-    readonly white: "--color-white";
-    readonly goldenYellow: "--color-goldenYellow";
-    readonly neutralGray: "--color-neutralGray";
-    readonly techBlue: "--color-techBlue";
-};
-/** A union type representing all valid theme color names used in the iconColor map */
-export type IconColor = keyof typeof iconColor;
 /** Props associated with Icon Component */
 export type IconProps = {
     /** The name of the Icon to be rendered */
@@ -33,11 +13,15 @@ export type IconProps = {
     /** Optional size of the icon (in px). Defaults to 20 */
     size?: IconSize;
     /** Optional fill or stroke color. Defaults to icon's native color */
-    color?: IconColor;
+    color?: string;
     /** Optional click handler for the icon  */
     onClick?: (e: React.MouseEvent<HTMLElement>) => void;
     /** Optional. Enables pointer cursor styling (default: true). */
     cursorPointer?: boolean;
     /** Optional Tailwind or custom class */
     className?: string;
+    /** Disables interaction and applies disabled styling. */
+    disabled?: boolean;
+    /** Tooltip content displayed on hover. */
+    tooltipText?: string;
 };

package/dist/components/NullState/NullState.types.d.ts

@@ -1,4 +1,4 @@
-import { IconName } from '../Icon/Icon.types';
+import { ButtonProps } from '..';
 export interface NullStateProps {
     /** Optional image URL to show. If not provided, a default image will be shown.*/
     image?: {
@@ -11,12 +11,5 @@ export interface NullStateProps {
     /** Optional descriptive text providing more context about the null state.*/
     description?: string;
     /** Here it is a CTA that can lead to change the state from null to something different.*/
-    buttonProps?: {
-        /** Text to display on the CTA button. */
-        text: string;
-        /** Optional icon to accompany the CTA button text. */
-        iconName?: IconName;
-        /** Optional click handler for the CTA button*/
-        onClick?: () => void;
-    };
+    buttonProps?: ButtonProps;
 }

package/dist/components/SearchBar/SearchBar.component.d.ts

@@ -1,18 +1,19 @@
 import { SearchBarProps } from './SearchBar.types';
 /**
- * SearchBar Component
+ * SearchBar
  *
- * This component use for getting searching input text
+ * A reusable search input with configurable sizes, optional full-width
+ * layout, and built-in debounced search support.
  *
  * Props:
- *  @param {string} placeholder Placeholder text shown when the input is empty.
- *  @param {"sm" | "lg" | "full"} size Defines the size of the input ("small", "large" or "fullWidth"). Default: "small".
- *  @param {void} onSearch  Callback triggered on input value change.
- *  @param {number} debounceTime Set debounce time default value is "500" milliseconds.
- *  @param {string} className  Additional Tailwind CSS classes for custom styling. Default: "".
+ * @param {string} placeholder Placeholder text displayed when the input is empty.
+ * @param {"xs" | "sm" | "md" | "lg"} size Controls the size of the search bar.
+ * @param {boolean} fullWidth Expands the search bar to fill its container.
+ * @param {(value: string) => void} onSearch Callback invoked after the debounce delay.
+ * @param {number} debounceTime Debounce delay in milliseconds.
  *
- * Example usage:
- * <SearchBar placeholder='Search here' size = 'sm' />
+ * @example
+ * <SearchBar placeholder="Search here" size="sm" fullWidth />
  */
 declare const SearchBar: React.FC<SearchBarProps>;
 export default SearchBar;

package/dist/components/SearchBar/SearchBar.stories.d.ts

@@ -3,6 +3,9 @@ import { SearchBarProps } from './SearchBar.types';
 declare const meta: Meta<SearchBarProps>;
 export default meta;
 type Story = StoryObj<SearchBarProps>;
+export declare const ExtraSmallSize: Story;
 export declare const SmallSize: Story;
+export declare const MediumSize: Story;
 export declare const LargeSize: Story;
+export declare const FullWidthTrue: Story;
 export declare const SearchWithDebounce: Story;

package/dist/components/SearchBar/SearchBar.types.d.ts

@@ -3,7 +3,9 @@ export interface SearchBarProps {
     /** Placeholder text shown when the input is empty. */
     placeholder?: string;
     /** Defines the size of the input ("sm" or "lg"). */
-    size?: "sm" | "lg" | "full";
+    size?: "xs" | "sm" | "md" | "lg";
+    /** Make the search bar take full container width when true.*/
+    fullWidth?: boolean;
     /** Callback triggered on input value change. */
     onSearch?: (value: string) => void;
     /** Set debounce time and default time is "500" milliseconds. */

package/dist/components/Toggle/Toggle.component.d.ts

@@ -11,6 +11,7 @@ import { ToggleProps } from './Toggle.types';
  * @param {boolean} [disabled=false] Optional If true, the toggle is non-interactive and visually muted.
  * @param {string} [ariaLabel="Toggle"] Optional Accessibility label for the toggle button.
  * @param {"sm" | "md"} [size="md"] Controls toggle dimensions
+ * @param {string} disabledMessage Optional Tooltip message displayed when the toggle is disabled.
  *
  * @param {Object} [content] Optional state-based UI configuration
  * @param {{ icon?: IconName; text?: string; color?: string }} [content.on] UI for "on" state
@@ -35,6 +36,8 @@ import { ToggleProps } from './Toggle.types';
  * <Toggle
  *   checked={isOn}
  *   onChange={toggleHandler}
+ *   disabled
+ *   disabledMessage="Tooltip message"
  *   content={{
  *     on: { icon: "sun" },
  *     off: { icon: "moon" }

package/dist/components/Toggle/Toggle.stories.d.ts

@@ -5,5 +5,6 @@ export default meta;
 type Story = StoryObj<ToggleProps>;
 export declare const ControlledToggle: Story;
 export declare const DisabledToggle: Story;
+export declare const DisabledToggleWithTooltip: Story;
 export declare const CustomColorsToggle: Story;
 export declare const CompoundToggle: Story;

package/dist/components/Toggle/Toggle.types.d.ts

@@ -1,4 +1,4 @@
-import { IconName } from '../Icon';
+import { IconName } from '..';
 /** Available visual variants of the toggle component:-
  *  "compound" shows icon + text inside track, "default" is simple switch */
 export type ToggleVarinat = "default" | "compound";
@@ -25,4 +25,6 @@ export interface ToggleProps {
         /** UI (icon/text) to render when toggle is OFF */
         off?: ToggleStateContent;
     };
+    /** Tooltip displayed while the toggle is disabled. */
+    disabledMessage?: string;
 }