sy-ui-lib 1.0.0

package/README.md

@@ -0,0 +1,89 @@
+# SK UI Library
+
+This project is the **UI component library**, built with modern frontend tools and practices. It is a reusable and scalable library developed using **React**, **TypeScript**, **Vite**, **Storybook**, **Biome**  and **Husky**..
+
+All user interfaces within SK projects will be built using these standardized and tested components to ensure design consistency, reusability, and developer efficiency.
+
+---
+
+## 🛠️ Tech Stack
+
+- **React** – Component-based UI
+- **TypeScript** – Type safety and enhanced development experience
+- **Vite** – Fast development build tool
+- **Storybook** – Component-driven development environment
+- **Biome** – Linting, formatting, and code quality enforcement
+- **Husky** – Git hooks management to enforce code quality checks pre-commit
+---
+
+
+### Format and Lint using Biome
+
+To ensure formatting on save and import sorting, configure Biome in your editor (e.g., in VSCode, add the Biome extension and set it as the default formatter).---- 
+
+### Pre-commit Validation with Husky
+As part of our development workflow, Husky enforces code quality by running automated checks before every commit. These checks ensure that only well-formatted, type-safe, and secure code is committed to the repository.
+
+The following validations are run in order:
+
+Biome Lint Check
+Ensures that your code follows formatting and linting rules defined in biome.json. If issues are found, Biome will attempt to auto-fix them. If it cannot, the commit will be blocked until the issues are resolved.
+
+```bash
+echo "Running Biome lint check..."
+npx biome check --write
+```
+
+TypeScript Type Check
+Verifies that your code has no type errors using the TypeScript compiler. This ensures that runtime errors caused by type mismatches are caught early.
+
+```bash
+echo "Running type check..."
+npx tsc --noEmit
+```
+
+Security Audit with npm
+Runs npm audit to detect known vulnerabilities in your dependencies. If any moderate or higher severity issues are found, the commit is blocked until resolved.
+
+```bash
+echo "Running npm audit (security check)..."
+npm audit --audit-level=moderate
+```
+
+These checks are defined in .husky/pre-commit and run automatically—no manual steps are needed. This helps maintain a secure, stable, and high-quality codebase across the team.
+
+### Biome extension setup in VS Code
+
+To enable automatic code formatting and linting with Biome in VS Code, install the **Biome** extension (published by `biomejs`) from the Extensions Marketplace. Then, update your VS Code `settings.json` to set Biome as the default formatter for JavaScript, TypeScript, and JSON files. Also, enable `editor.formatOnSave` to apply formatting automatically on every save. This setup helps enforce consistent code style and import sorting across the project.
+
+---- 
+### Folder structure
+
+```bash
+.
+├── .husky/ #Pre-Commit Hook
+├── .storybook/ # Storybook configuration
+│ ├── main.ts
+│ └── preview.ts
+├── .vscode/ # Editor settings
+│ └── settings.json
+├── src/ # Source files
+│ ├── components/
+│ │ └── Button/
+│ │    ├──── Button.component.tsx
+│ │    └──── Button.stories.tsx
+│ ├── App.css
+│ └── vite-env.d.ts
+├── .gitignore
+├── .nvmrc
+├── biome.json # Formatter config
+├── eslint.config.js # Linting config
+├── index.html
+├── package.json
+├── package-lock.json
+├── tsconfig.json
+├── tsconfig.app.json
+├── tsconfig.node.json
+├── vite.config.ts
+└── README.md
+```

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

@@ -0,0 +1,32 @@
+import { AdminBetSlipProps } from './AdminBetSlip.types';
+/**
+ * AdminBetSlip component renders a list of grouped bet slips with details like type, time, reference, odds, stakes, and profits.
+ * It displays each group with a title and separates individual slips using borders for clarity.
+ *
+ * @param {AdminBetSlipProps} props - Contains grouped bet slip data to render.
+ * @returns {JSX.Element} The structured layout of all bet slips.
+ *
+ * @example
+ * const betSlipData = [
+ *   {
+ *     title: "Premier League Bets",
+ *     betSlipDetails: [
+ *       {
+ *         subTitle: "Match 1 - Team A vs Team B",
+ *         type: "Back",
+ *         time: { title: "Time:", value: "2025-09-08 14:30" },
+ *         reference: { title: "Ref:", value: "REF12345" },
+ *         oddsDetails: [
+ *           { title: "Runs/Odds", value: "2.5/1.80" },
+ *           { title: "Stakes", value: 100 },
+ *           { title: "Profits", value: 80, color: true }
+ *         ]
+ *       }
+ *     ]
+ *   }
+ * ];
+ *
+ * <AdminBetSlip betSlipData={betSlipData} />
+ */
+declare const AdminBetSlip: React.FC<AdminBetSlipProps>;
+export default AdminBetSlip;

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

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite/*';
+import { default as AdminBetSlip } from './AdminBetSlip.component';
+declare const meta: Meta<typeof AdminBetSlip>;
+/** Type alias for the story object of AdminBetSlip */
+type Story = StoryObj<typeof AdminBetSlip>;
+/** Default story configuration for AdminBetSlip */
+export declare const Default: Story;
+export default meta;

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

@@ -0,0 +1,50 @@
+/** Types of bets allowed */
+export type BetType = "Back" | "Lay";
+/** Represents a title and its corresponding value (e.g., time or reference) */
+export interface TimeAndRef {
+    /** Label for the field */
+    title: string;
+    /** Value associated with the label */
+    value: string;
+}
+/** Details for a particular odds entry */
+export interface OddsDetails {
+    /** Title of the odds field */
+    title: string;
+    /** Value of the odds, can be a number or string */
+    value: string | number;
+    /** Optional flag to apply color styling */
+    color?: boolean;
+}
+/** Defines a key mapping for odds-related data */
+export interface OddsKeys {
+    /** Title of the odds key */
+    title: string;
+    /** Identifier for the odds key */
+    key: string;
+}
+/** Details of a single bet slip entry */
+export interface BetSlipDetails {
+    /** Subtitle or description of the bet */
+    subTitle: string;
+    /** Bet type: 'Back' or 'Lay' */
+    type: BetType;
+    /** Time information with title and value */
+    time: TimeAndRef;
+    /** Reference information with title and value */
+    reference: TimeAndRef;
+    /** List of odds-related details */
+    oddsDetails: OddsDetails[];
+}
+/** Data structure for admin view containing multiple bet slips */
+export interface AdminBetSlipData {
+    /** Group or category title */
+    title: string;
+    /** Array of bet slip details */
+    betSlipDetails: BetSlipDetails[];
+}
+/** Props for the AdminBetSlip component */
+export interface AdminBetSlipProps {
+    /** Array of grouped bet slip data */
+    betSlipData: AdminBetSlipData[];
+}

package/dist/components/AdminBetSlip/index.d.ts

@@ -0,0 +1,3 @@
+import { default as AdminBetSlip } from './AdminBetSlip.component';
+export { AdminBetSlip };
+export * from './AdminBetSlip.types';

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

@@ -0,0 +1,18 @@
+import { AvatarProps } from './Avatar.types';
+/**
+ * Avatar Component
+ *
+ * Renders a user avatar with optional fallback initials.
+ * Can be used to display profile pictures throughout the app.
+ *
+ * Props:
+ *  @param {string} src URL of the avatar image.
+ *  @param {string} alt  Alt text for the image (accessibility).
+ *  @param {"sm" | "md" | "lg"} size Size of the avatar.
+ *  @param {string} fallbackText  Text to show if image fails to load (initials).
+ *
+ * Example usage:
+ * <Avatar src="/user.jpg" alt="John Doe" fallbackText="JD" size="md" />
+ */
+declare const Avatar: React.FC<AvatarProps>;
+export default Avatar;

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

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { default as Avatar } from './Avatar.component';
+declare const meta: Meta<typeof Avatar>;
+export default meta;
+type Story = StoryObj<typeof Avatar>;
+export declare const AvatarGallery: Story;

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

@@ -0,0 +1,13 @@
+/** Props associated with Avatar component*/
+export type AvatarProps = {
+    /** URL of the avatar image */
+    src?: string;
+    /** Alt text for the image (accessibility). */
+    alt?: string;
+    /** Size of the avatar  */
+    size?: "sm" | "md" | "lg";
+    /** Text to show if image fails to load
+     * (Give us the name we will convert it to initials)
+     */
+    fallbackText: string;
+};

package/dist/components/Avatar/index.d.ts

@@ -0,0 +1,3 @@
+import { default as Avatar } from './Avatar.component';
+export { Avatar };
+export type * from './Avatar.types';

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

@@ -0,0 +1,3 @@
+import { BannerCardProps } from './BannerCard.types';
+declare const BannerCard: React.FC<BannerCardProps>;
+export default BannerCard;

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

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { default as BannerCard } from './BannerCard.component';
+declare const meta: Meta<typeof BannerCard>;
+export default meta;
+type Story = StoryObj<typeof BannerCard>;
+export declare const Default: Story;

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

@@ -0,0 +1,12 @@
+import { ButtonProps, IconProps } from '..';
+/** Props for BannerCard component */
+export interface BannerCardProps {
+    /** Title text displayed on the banner */
+    title: string;
+    /** Background image URL for the banner */
+    image: string;
+    /** Optional button configuration shown on the banner */
+    buttonProps?: ButtonProps;
+    /** Optional icon configuration displayed next to the title */
+    iconProps?: IconProps;
+}

package/dist/components/BannerCard/index.d.ts

@@ -0,0 +1,3 @@
+import { default as BannerCard } from './BannerCard.component';
+export { BannerCard };
+export * from './BannerCard.types';

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

@@ -0,0 +1,88 @@
+import { BetSlipProps } from './BetSlip.types';
+/**
+ * BetSlip Component
+ *
+ * A UI component for placing bets (Back / Lay / "Yes"/ "No"/ "Even"/"Odd).
+ * Displays bet info, odds, stake input, quick amount buttons,
+ * min/max bet info, P&L calculation, and customizable footer actions.
+ *
+ * Props:
+ * @param {"Back" | "Lay" | "Yes" | "No" | "Even" | "Odd"} betSlipVariant Controls the bet slip style (background/border colors). Options: "back" (Bet For) | "lay" (Bet Against).
+ * @param {string} slipTitle Main heading text (shown in the top bar).
+ * @param {object} betDetails Object containing the title and description of the bet.
+ * @param {string} betDetails.betTitle Title of the bet (e.g., Match name).
+ * @param {string} betDetails.betDescription Description of the bet (e.g., Market type).
+ * @param {number[]} betButtonAmounts List of quick-select stake amounts (e.g., [100, 500, 1000, 5000]).
+ * @param {number} defaultStake Initial stake value displayed in the stake input.
+ * @param {number} [defaultOdds] Odds value (displayed in input, defaults can be numeric/string).
+ * @param {object} minBet Object containing the minimum allowed bet value and its title.
+ * @param {string} minBet.title Label displayed for the minimum bet section (e.g., "Min Bet").
+ * @param {number} minBet.amount Minimum allowed bet value.
+ * @param {string} minBet.errorMessage Error message for validation failure.
+ * @param {object} [maxBet] Optional maximum allowed stake.
+ * @param {string} maxBet.title Label displayed for max bet (e.g., "Max Bet").
+ * @param {number} maxBet.amount Maximum stake allowed.
+ * @param {string} maxBet.errorMessage Error message for validation failure.
+ * @param {object} betSlipLabels Labels for the input fields, which are displayed in the second bar.
+ * @param {string} betSlipLabels.stakeTitle Title for the stake input field.
+ * @param {string} betSlipLabels.oddsTitle Title for the odds input field.
+ * @param {string} betSlipLabels.pLValueTitle Title for the profit and loss (P&L) input field.
+ * @param {string} errorMessage error message describing what went wrong
+ * @param {ButtonProps[]} footerCTA Array of button configurations (e.g., Cancel, Place Bet).
+ * @param {string} footerCTA.text Text of the button.
+ * @param {string} footerCTA.variant Variant style of the button (e.g., "primary", "outline").
+ * @param {function} footerCTA.onClick Function triggered when the button is clicked.
+ * @param {string} footerCTA.size Size of the button (e.g., "small", "large").
+ * @param {string} [footerCTA.type] Type of the button (e.g., "submit").
+ * @param {function} handleBetPlacement Function triggered when the bet is placed or bet is submitted.
+ * @param {function} onClose Callback function triggered when the bet slip is closed.
+ * @param {number} pLValue Profit and loss value (displayed in the input area).
+ *
+ * @example
+ * <BetSlip
+ *   betSlipVariant="back"
+ *   slipTitle="Back (Bet For)"
+ *   betDetails={{
+ *     betTitle: "Sri Lanka vs Bangladesh",
+ *     betDescription: "The Draw Match Odds"
+ *   }}
+ *   betButtonAmounts={[100, 500, 1000, 5000]}
+ *   defaultStake={500}
+ *   defaultOdds={1.25}
+ *   minBet={{
+ *     amount: 100,
+ *     title: "Min Bet",
+ *      errorMessage: "Minimum bet allowed is 100"
+ *   }}
+ *  maxBet={{
+ *     amount: 5000,
+ *     title: "Max Bet",
+ *     errorMessage: "Maximum bet allowed is 5000"
+ *   }}
+ *   betSlipLabels={{
+ *     stakeTitle: "Stake",
+ *     oddsTitle: "Odds",
+ *     pLValueTitle: "P&L"
+ *   }}
+ *   handleBetPlacement={() => console.log("Bet placed")}
+ *   footerCTA={[
+ *     {
+ *       text: "Cancel",
+ *       variant: "outline",
+ *       onClick: () => console.log("Bet Slip Closed"),
+ *       size: "small"
+ *     },
+ *     {
+ *       text: "Place Bet",
+ *       variant: "primary",
+ *       onClick: () => console.log("Placing Bet"),
+ *       size: "small",
+ *       type: "submit"
+ *     }
+ *   ]}
+ *   onClose={() => console.log("Closed")}
+ *   pLValue={0}
+ * />
+ */
+declare const BetSlip: React.FC<BetSlipProps>;
+export default BetSlip;

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

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { default as BetSlip } from './BetSlip.component';
+declare const meta: Meta<typeof BetSlip>;
+export default meta;
+type Story = StoryObj<typeof BetSlip>;
+/** Basic Back BetSlip */
+export declare const BasicBetSlip: Story;
+/** Lay Variant */
+export declare const LayBetSlip: Story;
+/** Basic Lay BetSlip with error message*/
+export declare const BasicBetSlipWithErrorMsg: Story;
+/** Custom Stake Example */
+export declare const CustomStakeBetSlip: Story;

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

@@ -0,0 +1,51 @@
+import { ButtonProps } from '../Button';
+/**  Types of bet slip variants */
+export type BetSlipVariantType = "Back" | "Lay" | "Yes" | "No" | "Even" | "Odd";
+export interface BetSlipPlacementData {
+    stake: number;
+    odds: number;
+}
+/**  Props for BetSlip component*/
+export interface BetSlipProps {
+    /** Variant of bet slip (back or lay) */
+    betSlipVariant: BetSlipVariantType;
+    /** Heading shown at the top (main header) */
+    slipTitle: string;
+    /** Title and the description of the bet */
+    betDetails: {
+        betTitle: string;
+        betDescription: string;
+    };
+    /** List of quick-select stake amounts (e.g., ["100", "500", "1000"]) */
+    betButtonAmounts: number[];
+    /** Default stake value shown in the input */
+    defaultStake: number;
+    /** Odds value for the bet (optional, defaults can be provided in component) */
+    defaultOdds: number;
+    /** Projected PL value*/
+    projectedPL: number;
+    /** Minimum allowed bet amount and title*/
+    minBet: {
+        title: string;
+        amount: number;
+        errorMessage: string;
+    };
+    /** Maximum allowed bet amount and title (optional) */
+    maxBet?: {
+        title: string;
+        amount: number;
+        errorMessage: string;
+    };
+    /** headers for the input fields */
+    betSlipLabels: {
+        stakeTitle: string;
+        oddsTitle: string;
+        pLValueTitle: string;
+    };
+    /** Optional error message describing what went wrong */
+    errorMessage?: string;
+    /** Optional list of footer call-to-action buttons. */
+    footerCTA: ButtonProps[];
+    /** handle BetSlipPlacementData */
+    handleBetPlacement: (data: BetSlipPlacementData) => void;
+}

package/dist/components/BetSlip/index.d.ts

@@ -0,0 +1,3 @@
+import { default as BetSlip } from './BetSlip.component';
+export { BetSlip };
+export type * from './BetSlip.types';

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

@@ -0,0 +1,24 @@
+import { BetSlipModalProps } from './BetSlipModal.types';
+/**
+ * BetSlipModal
+ *
+ * Modal wrapper around the BetSlip component.
+ * Allows users to enter stake and odds, view profit/loss,
+ * and place or clear a bet.
+ *
+ * @param isOpen - Controls modal visibility (true = open, false = closed)
+ * @param onClose - Callback triggered when user closes the modal
+ * @param betSlipVariant - Variant of bet slip ("back" | "lay")
+ * @param slipTitle - Heading displayed in the modal header
+ * @param betSlipLabels - Labels for odds, stake, and P&L fields
+ * @param betDetails - Bet title and description details
+ * @param betButtonAmounts - Quick-add stake button values
+ * @param defaultStake - Initial stake value shown in the input
+ * @param defaultOdds - Initial odds value shown in the input
+ * @param minBet - Minimum allowed bet configuration and validation message
+ * @param maxBet - Maximum allowed bet configuration and validation message (optional)
+ * @param footerCTA - Footer call-to-action buttons (e.g. Place Bet)
+ * @param handleBetPlacement - Callback fired when stake or odds changes
+ */
+declare const BetSlipModal: React.FC<BetSlipModalProps>;
+export default BetSlipModal;

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

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { BetSlipModal } from '..';
+declare const meta: Meta<typeof BetSlipModal>;
+export default meta;
+type Story = StoryObj<typeof BetSlipModal>;
+export declare const BackBet: Story;
+export declare const LayBet: Story;
+export declare const YesBet: Story;
+export declare const NoBet: Story;
+export declare const OddBet: Story;
+export declare const EvenBet: Story;

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

@@ -0,0 +1,8 @@
+import { BetSlipProps } from '..';
+/** Props associated with Modal component */
+export interface BetSlipModalProps extends BetSlipProps {
+    /** Controls modal visibility (true = open) */
+    isOpen: boolean;
+    /** method use to close the modal by click on cancel and cross icon button   */
+    onClose: () => void;
+}

package/dist/components/BetSlipModal/index.d.ts

@@ -0,0 +1,3 @@
+import { default as BetSlipModal } from './BetSlipModal.component';
+export type * from './BetSlipModal.types';
+export { BetSlipModal };

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

@@ -0,0 +1,33 @@
+import { default as React } from 'react';
+import { ButtonProps } from './Button.types';
+/**
+ * Button Component
+ *
+ * A flexible and reusable button component that supports:
+ * - Text, icon, and avatar combinations
+ * - Multiple size and variant styles
+ * - Disabled state
+ * - Full-width option independent of size
+ * - 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.
+ *
+ * Example usage:
+ * <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 text="Save" size="large" fullWidth />
+ */
+declare const Button: React.FC<ButtonProps>;
+export default Button;

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

@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { default as Button } from './Button.component';
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof Button>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Ghost: Story;
+export declare const Danger: Story;
+export declare const Success: Story;
+export declare const Outline: Story;
+export declare const IconOnlyOutlineButton: Story;
+export declare const TextWithIcon: Story;
+export declare const TextWithLeftIcon: Story;
+export declare const LoadingButton: Story;
+export declare const TextWithAvatar: Story;
+export declare const DisabledButton: Story;
+export declare const FullWidthButton: Story;

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

@@ -0,0 +1,29 @@
+import { AvatarProps } from '../Avatar/Avatar.types';
+import { IconName } from '../Icon/Icon.types';
+import { TypoColor } from '../Typography/Typography.types';
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "success" | "outline";
+export type ButtonSize = "extraSmall" | "small" | "medium" | "large";
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Size of the button*/
+    size?: ButtonSize;
+    /** Visual style of the button*/
+    variant?: ButtonVariant;
+    /** Text to show inside the button*/
+    text?: string;
+    /** To disable the button*/
+    disabled?: boolean;
+    /** Name of the icon to display in the button*/
+    iconName?: IconName;
+    /** Avatar configuration to display inside the button*/
+    avatarProps?: AvatarProps;
+    /** Handle function calls when the button is clicked*/
+    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+    /** Optional icon position when both icon and text can present (default is right)*/
+    iconPosition?: "left" | "right";
+    /** Show loading spinner instead of icon */
+    isLoading?: boolean;
+    /** Optional custom text color for the button text.*/
+    textColor?: TypoColor;
+    /** Make the button take full container width when true.*/
+    fullWidth?: boolean;
+}

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

@@ -0,0 +1,3 @@
+import { default as Button } from './Button.component';
+export { Button };
+export type * from './Button.types';

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

@@ -0,0 +1,27 @@
+import { CheckboxProps } from './Checkbox.types';
+/**
+ * Reusable Checkbox component with controlled and uncontrolled support.
+ *
+ * - Supports disabled state
+ * - Shows tick icon when checked
+ * - Can be fully controlled or uncontrolled (with `initialChecked`)
+ *
+ * @component
+ *
+ * @param {IconName} [initialIcon] - Optional icon to display as the initial state.
+ * @param {boolean} [checked] - Controlled checkbox state (overrides internal state)
+ * @param {boolean} [initialChecked=false] - Initial value for uncontrolled checkbox
+ * @param {(checked: boolean) => void} [onChange] - Called when checked state changes
+ * @param {boolean} [disabled=false] - Whether the checkbox is disabled
+ *
+ * @example
+ * // Uncontrolled checkbox
+ * <Checkbox initialChecked />
+ *
+ * @example
+ * // Controlled checkbox
+ * const [checked, setChecked] = useState(false);
+ * <Checkbox checked={checked} onChange={setChecked} />
+ */
+declare const Checkbox: ({ initialIcon, checked, initialChecked, onChange, disabled, }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export default Checkbox;

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

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { default as Checkbox } from './Checkbox.component';
+/** Storybook metadata for the Checkbox component.*/
+declare const meta: Meta<typeof Checkbox>;
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+export declare const BasicCheckbox: Story;
+export declare const InitialCheckbox: Story;
+export declare const CheckedCheckbox: Story;
+export declare const DisableCheckbox: Story;
+export declare const DisableWithInitialCheckbox: Story;
+export declare const DisableWithCheckedCheckbox: Story;

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

@@ -0,0 +1,16 @@
+import { IconName } from '..';
+/**
+ * Props for the reusable Checkbox component.
+ */
+export interface CheckboxProps {
+    /** Optional icon to display as the initial state. */
+    initialIcon?: IconName;
+    /** Controlled checked state (used when parent fully controls the checkbox) Default value is 'false' */
+    checked?: boolean;
+    /** Initial checked state for uncontrolled usage.  Default value is 'false' */
+    initialChecked?: boolean;
+    /** Callback that runs when the checkbox is toggled. */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /** When true, the checkbox becomes non-interactive and grayed out. */
+    disabled?: boolean;
+}

package/dist/components/Checkbox/index.d.ts

@@ -0,0 +1,3 @@
+import { default as Checkbox } from './Checkbox.component';
+export { Checkbox };
+export type * from './Checkbox.types';

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

@@ -0,0 +1,21 @@
+import { ChipProps } from './Chip.types';
+/**
+ * Chip Component
+ *
+ * Renders a customizable status chip/tag that visually represents a state
+ * (e.g., Active, Suspended, Locked) and supports optional edit functionality.
+ *
+ * Props:
+ * @param {string} text - Text to display inside the chip.
+ * @param {"active" | "suspended" | "locked" | "pending" | "info"} state - The visual and semantic state of the chip.
+ * @param {"filled" | "outlined"} [variant="filled"] - Controls the visual appearance (background & border).
+ * @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.
+ *
+ * Example usage:
+ * <Chip text="Active" state="active" iconName="timer" />
+ * <Chip text="Locked" state="locked" isEditable onClick={() => console.log("clicked")} />
+ */
+declare const Chip: React.FC<ChipProps>;
+export default Chip;