@bricks-toolkit/toolkit 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 ITProfound
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,214 @@
+# bricks
+
+[![npm version](https://img.shields.io/npm/v/@bricks-toolkit/toolkit.svg)](https://www.npmjs.com/package/@bricks-toolkit/toolkit)
+[![TypeScript](https://img.shields.io/badge/TypeScript-strict-blue)](https://www.typescriptlang.org/)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](./LICENSE)
+
+> Micro-modularized, fully independent, type-safe UI component library built with TypeScript and Tailwind CSS.
+
+---
+
+## ✨ Features
+
+- 🔷 **Fully TypeScript** — strict mode, all props fully typed and exported
+- 🎨 **Tailwind CSS** — utility-first, zero CSS-in-JS
+- 📦 **Dual ESM + CJS** — works in any modern bundler (Vite, Webpack, Rollup, esbuild)
+- 🌲 **Tree-shakeable** — sub-path imports (`bricks/text-input`)
+- 📖 **Storybook** — interactive docs for every component and variant
+- 🧪 **Fully tested** — Vitest + @testing-library/react (≥ 80% coverage)
+- ♿ **Accessible** — ARIA attributes, roles, and keyboard support built-in
+- 🔄 **forwardRef** — full DOM access on every component
+- 🔒 **Strict ESLint** — typescript-eslint strict + react + jsx-a11y
+- 📏 **Prettier** — consistent formatting enforced via pre-commit hook
+
+---
+
+## 📦 Installation
+
+```bash
+# npm
+npm install @bricks-toolkit/toolkit
+
+# Or with yarn
+yarn add @bricks-toolkit/toolkit
+
+# Or with pnpm
+pnpm add @bricks-toolkit/toolkit
+```
+
+**Peer dependencies** (must be installed by the consumer):
+
+```bash
+pnpm add react react-dom
+```
+
+---
+
+## 🎨 Tailwind CSS Setup
+
+This library ships Tailwind class names. You have two options:
+
+### Option A — Consumer runs Tailwind (recommended)
+
+Add the library's source to your Tailwind `content` paths so Tailwind
+generates the required utilities:
+
+```ts
+// tailwind.config.ts
+import type { Config } from 'tailwindcss'
+
+export default {
+  content: [
+    './src/**/*.{ts,tsx}',
+    // Add the library's dist path:
+    './node_modules/@bricks-toolkit/toolkit/dist/**/*.js',
+  ],
+} satisfies Config
+```
+
+### Option B — Use the pre-built CSS
+
+```ts
+// In your entry file (e.g. main.tsx)
+import '@bricks-toolkit/toolkit/styles.css'
+```
+
+---
+
+## 🚀 Usage
+
+### Named import (full bundle)
+
+```tsx
+import { TextInput } from '@bricks-toolkit/toolkit'
+
+function App() {
+  return (
+    <TextInput
+      label="Email address"
+      placeholder="you@example.com"
+      type="email"
+      state="error"
+      errorMessage="Please enter a valid email"
+    />
+  )
+}
+```
+
+### Sub-path import (tree-shakeable)
+
+```tsx
+import { TextInput } from '@bricks-toolkit/toolkit/text-input'
+```
+
+---
+
+## 📖 TextInput
+
+### Props
+
+| Prop                  | Type                                               | Default     | Description                        |
+| --------------------- | -------------------------------------------------- | ----------- | ---------------------------------- |
+| `label`               | `string`                                           | —           | Visible label above the input      |
+| `required`            | `boolean`                                          | `false`     | Shows a `*` on the label           |
+| `helperText`          | `string`                                           | —           | Help text below the input          |
+| `errorMessage`        | `string`                                           | —           | Shown when `state="error"`         |
+| `successMessage`      | `string`                                           | —           | Shown when `state="success"`       |
+| `warningMessage`      | `string`                                           | —           | Shown when `state="warning"`       |
+| `variant`             | `'default' \| 'filled' \| 'flushed' \| 'unstyled'` | `'default'` | Visual style                       |
+| `size`                | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`             | `'md'`      | Field size                         |
+| `state`               | `'default' \| 'error' \| 'success' \| 'warning'`   | `'default'` | Validation state                   |
+| `fullWidth`           | `boolean`                                          | `true`      | Span container width               |
+| `leftElement`         | `ReactNode`                                        | —           | Inline icon/element on left        |
+| `rightElement`        | `ReactNode`                                        | —           | Inline icon/element on right       |
+| `prefix`              | `ReactNode`                                        | —           | Addon label attached outside-left  |
+| `suffix`              | `ReactNode`                                        | —           | Addon label attached outside-right |
+| `wrapperClassName`    | `string`                                           | —           | Classes on the outer wrapper       |
+| `inputGroupClassName` | `string`                                           | —           | Classes on the input group         |
+| `inputClassName`      | `string`                                           | —           | Classes on the `<input>` element   |
+| `labelClassName`      | `string`                                           | —           | Classes on the label               |
+| `helperClassName`     | `string`                                           | —           | Classes on the helper text         |
+
+> All native `<input>` attributes (`placeholder`, `name`, `value`, `onChange`, `onBlur`, `type`, `maxLength`, `autoComplete`, ...) are supported via prop spread.
+
+### Exported Types
+
+```ts
+import type { TextInputProps, TextInputVariant, TextInputSize, TextInputState } from '@bricks-toolkit/toolkit'
+```
+
+### Examples
+
+```tsx
+// Variants
+<TextInput variant="filled" label="Filled" placeholder="..." />
+<TextInput variant="flushed" label="Flushed" placeholder="..." />
+
+// Sizes
+<TextInput size="xs" placeholder="Extra small" />
+<TextInput size="xl" placeholder="Extra large" />
+
+// Validation
+<TextInput state="error" errorMessage="This field is required" />
+<TextInput state="success" successMessage="Looks good!" />
+
+// Icons
+<TextInput leftElement={<SearchIcon />} placeholder="Search…" />
+
+// Addons
+<TextInput prefix="https://" suffix=".com" placeholder="yoursite" />
+
+// Ref
+const ref = useRef<HTMLInputElement>(null)
+<TextInput ref={ref} placeholder="Focus me" />
+```
+
+---
+
+## 🛠 Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Start Storybook
+pnpm storybook
+
+# Run tests
+pnpm test
+
+# Run tests with coverage
+pnpm test:coverage
+
+# Build
+pnpm build
+
+# Lint
+pnpm lint
+
+# Format
+pnpm format
+```
+
+---
+
+## 🔖 Versioning
+
+This project uses [Changesets](https://github.com/changesets/changesets) for versioning and changelog generation.
+
+```bash
+# Create a changeset
+pnpm changeset
+
+# Version packages
+pnpm changeset version
+
+# Publish
+pnpm changeset publish
+```
+
+---
+
+## 📄 License
+
+MIT © [elaachiadmin](https://bitbucket.org/elaachiadmin/itprofound-ui-kit)

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,5 @@
+import type { AccordionProps, AccordionItemProps, AccordionTriggerProps, AccordionContentProps } from './Accordion.types';
+export declare const AccordionItem: ({ children, className, isOpen: controlledIsOpen, onToggle, disabled, }: AccordionItemProps) => React.ReactElement;
+export declare const AccordionTrigger: ({ children, className, hideChevron, icon, rightContent, }: AccordionTriggerProps) => React.ReactElement;
+export declare const AccordionContent: ({ children, className, }: AccordionContentProps) => React.ReactElement | null;
+export declare const Accordion: ({ children, className, allowMultiple, defaultOpenIndices, }: AccordionProps) => React.ReactElement;

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

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react';
+export interface AccordionProps {
+    children: ReactNode;
+    className?: string;
+    allowMultiple?: boolean;
+    defaultOpenIndices?: number[];
+}
+export interface AccordionItemProps {
+    children: ReactNode;
+    className?: string;
+    /**
+     * Optional manual control over open state.
+     * If provided, the Accordion's internal group logic is ignored for this item.
+     */
+    isOpen?: boolean;
+    onToggle?: () => void;
+    disabled?: boolean;
+}
+export interface AccordionTriggerProps {
+    children: ReactNode;
+    className?: string;
+    /** Hide the default chevron icon */
+    hideChevron?: boolean;
+    /** Provide a custom icon instead of the default chevron */
+    icon?: ReactNode;
+    /** Extra content rendered on the right, independent of the toggle button */
+    rightContent?: ReactNode;
+}
+export interface AccordionContentProps {
+    children: ReactNode;
+    className?: string;
+}

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

@@ -0,0 +1,2 @@
+export * from './Accordion';
+export * from './Accordion.types';

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

@@ -0,0 +1,2 @@
+import type { AvatarProps } from './Avatar.types';
+export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Avatar } from './Avatar';
+declare const meta: Meta<typeof Avatar>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Initials: Story;
+export declare const Sizes: Story;
+export declare const Variants: Story;
+export declare const StateBadges: Story;
+export declare const StateBorders: Story;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,24 @@
+import type { ImgHTMLAttributes, ReactNode } from 'react';
+export type AvatarSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+export type AvatarVariant = 'circle' | 'square' | 'rounded';
+export type AvatarState = 'default' | 'error' | 'success' | 'warning' | 'offline' | 'online' | 'busy' | 'away';
+export interface AvatarProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'size'> {
+    /** Size of the avatar */
+    size?: AvatarSize;
+    /** Shape variant of the avatar */
+    variant?: AvatarVariant;
+    /** State indicator for the avatar (e.g. online status or validation) */
+    state?: AvatarState;
+    /** Determines if the state indicator should be a border or a dot (badge). Default is border. */
+    stateType?: 'border' | 'badge';
+    /** Fallback content when image is not provided or fails to load. Can be initials string or a ReactNode */
+    fallback?: ReactNode;
+    /** Alt text for the image, also used to generate initials if fallback string is not provided */
+    alt?: string;
+    /** Image source URL */
+    src?: string;
+    /** Class name applied to the outer container */
+    containerClassName?: string;
+    /** Class name applied to the fallback element */
+    fallbackClassName?: string;
+}

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

@@ -0,0 +1,2 @@
+export { Avatar } from './Avatar';
+export type { AvatarProps, AvatarSize, AvatarVariant, AvatarState } from './Avatar.types';

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,11 @@
+import type { BadgeProps } from './Badge.types';
+/**
+ * `Badge` — a highly composable inline label component.
+ *
+ * @example
+ * <Badge color="green" variant="soft">Active</Badge>
+ * <Badge color="red" variant="gradient" size="lg" shape="rounded">Critical</Badge>
+ * <Badge color="blue" variant="dot" pulse>Live</Badge>
+ * <Badge count={42} color="red" variant="solid" shape="pill" />
+ */
+export declare function Badge({ children, variant, color, size, shape, icon, trailingIcon, onRemove, pulse, count, maxCount, uppercase, tracking, as: Tag, className, ...rest }: BadgeProps): React.JSX.Element;

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

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Badge } from './Badge';
+declare const meta: Meta<typeof Badge>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Variants: Story;
+export declare const Colors: Story;
+export declare const GradientColors: Story;
+export declare const SolidColors: Story;
+export declare const Sizes: Story;
+export declare const Shapes: Story;
+export declare const StatusBadges: Story;
+export declare const PulseDot: Story;
+export declare const WithLeadingIcon: Story;
+export declare const WithTrailingIcon: Story;
+export declare const Removable: Story;
+export declare const CountBadge: Story;
+export declare const TextStyling: Story;
+export declare const PolymorphicAnchor: Story;
+export declare const KitchenSink: Story;

package/dist/components/Badge/Badge.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,43 @@
+import type { ElementType, ReactNode } from 'react';
+/** Visual style of the badge. */
+export type BadgeVariant = 'solid' | 'soft' | 'outline' | 'dot' | 'gradient';
+/** Color palette for the badge. */
+export type BadgeColor = 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'accent' | 'gray' | 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'pink' | 'orange' | 'cyan' | 'teal' | 'indigo';
+/** Size token for the badge. */
+export type BadgeSize = 'xs' | 'sm' | 'md' | 'lg';
+/** Border-radius shape. */
+export type BadgeShape = 'rounded' | 'pill' | 'square';
+export interface BadgeProps {
+    /** Text or content inside the badge. */
+    children?: ReactNode;
+    /** Visual style. Defaults to `'soft'`. */
+    variant?: BadgeVariant;
+    /** Color scheme. Defaults to `'blue'`. */
+    color?: BadgeColor;
+    /** Size. Defaults to `'md'`. */
+    size?: BadgeSize;
+    /** Border-radius shape. Defaults to `'pill'`. */
+    shape?: BadgeShape;
+    /** Optional icon rendered before the label. */
+    icon?: ReactNode;
+    /** Optional icon rendered after the label (before the remove button). */
+    trailingIcon?: ReactNode;
+    /** When provided, renders a remove (×) button and calls this on click. */
+    onRemove?: () => void;
+    /** Adds a pulsing animation to the dot indicator (only works with `variant="dot"`). */
+    pulse?: boolean;
+    /** Renders a numeric count instead of (or alongside) children. When > maxCount, shows `{maxCount}+`. */
+    count?: number;
+    /** Maximum count before the overflow label is shown. Defaults to 99. */
+    maxCount?: number;
+    /** Uppercases the badge text. */
+    uppercase?: boolean;
+    /** Adds a soft letter-spacing for label readability. */
+    tracking?: boolean;
+    /** Polymorphic element override (e.g. `'a'`, `'button'`, `'li'`). Defaults to `'span'`. */
+    as?: ElementType;
+    /** Additional class name. */
+    className?: string;
+    /** Any other HTML / element props (e.g. `href`, `onClick`, `aria-*`). */
+    [key: string]: unknown;
+}

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

@@ -0,0 +1,2 @@
+export * from './Badge';
+export * from './Badge.types';

package/dist/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,2 @@
+import type { BreadcrumbsProps } from './Breadcrumbs.types';
+export declare function Breadcrumbs({ items, separator, size, collapsible, maxItems, className, }: BreadcrumbsProps): React.JSX.Element | null;

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

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Breadcrumbs } from './Breadcrumbs';
+declare const meta: Meta<typeof Breadcrumbs>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const SlashSeparator: Story;
+export declare const DotSeparator: Story;
+export declare const CustomSeparator: Story;
+export declare const Sizes: Story;
+export declare const Collapsible: Story;
+export declare const WithDisabledCrumb: Story;
+export declare const OnClickNavigation: Story;

package/dist/components/Breadcrumbs/Breadcrumbs.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,27 @@
+import type { ReactNode, ReactElement } from 'react';
+export interface BreadcrumbItem {
+    /** The label shown for this crumb. */
+    label: ReactNode;
+    /** When provided the crumb renders as a link. */
+    href?: string;
+    /** onClick handler (use instead of href for SPA navigation). */
+    onClick?: () => void;
+    /** When true the crumb is shown but not clickable. */
+    disabled?: boolean;
+}
+export type BreadcrumbSeparator = 'slash' | 'chevron' | 'dot' | ReactElement;
+export type BreadcrumbSize = 'xs' | 'sm' | 'md' | 'lg';
+export interface BreadcrumbsProps {
+    /** The list of crumb items. The last item is treated as the current page. */
+    items: BreadcrumbItem[];
+    /** Separator between crumbs. Defaults to 'chevron'. */
+    separator?: BreadcrumbSeparator;
+    /** Text size. Defaults to 'sm'. */
+    size?: BreadcrumbSize;
+    /** When true collapses middle items into an ellipsis button. Defaults to false. */
+    collapsible?: boolean;
+    /** Maximum number of items to show when collapsible=true. Defaults to 4. */
+    maxItems?: number;
+    /** Additional class for the <nav> wrapper. */
+    className?: string;
+}

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

@@ -0,0 +1,2 @@
+export * from './Breadcrumbs';
+export * from './Breadcrumbs.types';

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

@@ -0,0 +1,2 @@
+import type { ButtonProps } from './Button.types';
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from './Button';
+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 Outline: Story;
+export declare const Ghost: Story;
+export declare const Danger: Story;
+export declare const Success: Story;
+export declare const Warning: Story;
+export declare const Info: Story;
+export declare const Loading: Story;
+export declare const LoadingWithText: Story;
+export declare const Disabled: Story;
+export declare const WithIcons: Story;
+export declare const FullWidth: Story;
+export declare const Sizes: Story;
+export declare const WithTooltip: Story;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,24 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import type { TooltipPlacement } from '../Tooltip/Tooltip.types';
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'success' | 'warning' | 'info';
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'prefix'> {
+    /** The variant style of the button */
+    variant?: ButtonVariant;
+    /** The size of the button */
+    size?: ButtonSize;
+    /** Whether the button should take up the full width of its container */
+    fullWidth?: boolean;
+    /** Whether the button is currently in a loading state */
+    isLoading?: boolean;
+    /** Optional text to display alongside the spinner when loading */
+    loadingText?: string;
+    /** An icon element to display before the button content */
+    leftIcon?: ReactNode;
+    /** An icon element to display after the button content */
+    rightIcon?: ReactNode;
+    /** Optional tooltip text or element to display on hover */
+    tooltip?: ReactNode;
+    /** Preferred placement of the tooltip relative to the button */
+    tooltipPlacement?: TooltipPlacement;
+}

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

@@ -0,0 +1,2 @@
+export * from './Button';
+export type * from './Button.types';

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,25 @@
+import type { CardProps, CardHeaderProps, CardTitleProps, CardDescriptionProps, CardContentProps, CardFooterProps } from './Card.types';
+/**
+ * Root Card wrapper containing styles, border radiuses, and shadow mappings.
+ */
+export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Card Header segment, ideal for stacking Titles, actions, and meta data.
+ */
+export declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Semantically native Header 3 representation ensuring text harmony generically.
+ */
+export declare const CardTitle: React.ForwardRefExoticComponent<CardTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+/**
+ * Muted paragraph utility explicitly meant for text trailing a Title internally.
+ */
+export declare const CardDescription: React.ForwardRefExoticComponent<CardDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+/**
+ * Physical payload payload explicitly anchoring generic HTML spacing between a header and a footer correctly.
+ */
+export declare const CardContent: React.ForwardRefExoticComponent<CardContentProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Spaced flex container automatically injecting actions aligned horizontally below content natively.
+ */
+export declare const CardFooter: React.ForwardRefExoticComponent<CardFooterProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Card } from './Card';
+declare const meta: Meta<typeof Card>;
+export default meta;
+type Story = StoryObj<typeof Card>;
+export declare const Basic: Story;
+export declare const Variants: Story;
+export declare const LoginExample: Story;

package/dist/components/Card/Card.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'react';
+export type CardVariant = 'default' | 'outlined' | 'elevated' | 'filled';
+export type CardPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    /** The overall visual style of the card */
+    variant?: CardVariant;
+    /** Internal padding scale to apply strictly to the overall wrapper */
+    padding?: CardPadding;
+}
+export type CardHeaderProps = HTMLAttributes<HTMLDivElement>;
+export type CardTitleProps = HTMLAttributes<HTMLHeadingElement>;
+export type CardDescriptionProps = HTMLAttributes<HTMLParagraphElement>;
+export type CardContentProps = HTMLAttributes<HTMLDivElement>;
+export type CardFooterProps = HTMLAttributes<HTMLDivElement>;

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

@@ -0,0 +1,2 @@
+export * from './Card';
+export type * from './Card.types';

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

@@ -0,0 +1,2 @@
+import type { CheckboxProps } from './Checkbox.types';
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Checkbox } from './Checkbox';
+declare const meta: Meta<typeof Checkbox>;
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+export declare const Basic: Story;
+export declare const Checked: Story;
+export declare const Indeterminate: Story;
+export declare const Disabled: Story;
+export declare const DisabledChecked: Story;
+export declare const WithHelperText: Story;
+export declare const ErrorState: Story;
+export declare const SuccessState: Story;
+export declare const WarningState: Story;
+export declare const Sizes: Story;
+export declare const IndeterminateController: Story;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,31 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+export type CheckboxSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type CheckboxState = 'default' | 'error' | 'success' | 'warning';
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+    /** The primary label to display next to the checkbox */
+    label?: ReactNode;
+    /** Additional helper text displayed beneath the checkbox */
+    helperText?: ReactNode;
+    /** Error message displayed beneath the checkbox when state is 'error' */
+    errorMessage?: ReactNode;
+    /** Success message displayed beneath the checkbox when state is 'success' */
+    successMessage?: ReactNode;
+    /** Warning message displayed beneath the checkbox when state is 'warning' */
+    warningMessage?: ReactNode;
+    /** The size of the checkbox and its associated text */
+    size?: CheckboxSize;
+    /** The validation state of the checkbox */
+    state?: CheckboxState;
+    /** Whether the checkbox represents a mixed or indeterminate state */
+    indeterminate?: boolean;
+    /** Custom class for the outermost container */
+    containerClassName?: string;
+    /** Alias for containerClassName to match other components */
+    wrapperClassName?: string;
+    /** Custom class for the underlying input element */
+    inputClassName?: string;
+    /** Custom class for the label element */
+    labelClassName?: string;
+    /** Custom class for the helper/message text element */
+    messageClassName?: string;
+}

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

@@ -0,0 +1,2 @@
+export * from './Checkbox';
+export type * from './Checkbox.types';