@kpf_/kiso 1.0.2 → 1.1.0

package/README.md

@@ -36,20 +36,20 @@ import '@kpf/kiso/dist/style.css';
 The system requires a global context for feedback loops (Toasts). Wrap your application root:
 
 ```typescript
-import { KisoToastProvider } from '@kpf/kiso';
+import { ToastProvider } from '@kpf/kiso';
 
 function App() {
   return (
-    <KisoToastProvider>
+    <ToastProvider>
       <YourApplication />
-    </KisoToastProvider>
+    </ToastProvider>
   );
 }
 ```
 
 ## Component Architecture
 
-Kiso uses a specific naming convention (`Kiso[Component]`) and favors **Compound Component** patterns for complex molecules to keep the API surface minimal.
+Kiso favors **Compound Component** patterns for complex molecules to keep the API surface minimal.
 
 ### Atoms
 
@@ -57,25 +57,25 @@ Kiso uses a specific naming convention (`Kiso[Component]`) and favors **Compound
 Utilizes tactile press physics (`scale-96`) and custom easing.
 
 ```typescript
-import { KisoButton } from '@kpf/kiso';
+import { Button } from '@kpf/kiso';
 
-<KisoButton variant='primary' onClick={handleClick}>
+<Button variant='primary' onClick={handleClick}>
   Confirm Action
-</KisoButton>
+</Button>
 
-<KisoButton variant='destructive' isLoading={isDeleting}>
+<Button variant='destructive' isLoading={isDeleting}>
   Delete Item
-</KisoButton>
+</Button>
 ```
 
 #### Input
 Includes slot support for icons and right-aligned actions.
 
 ```typescript
-import { KisoInput } from '@kpf/kiso';
+import { Input } from '@kpf/kiso';
 import { MagnifyingGlass } from '@phosphor-icons/react';
 
-<KisoInput 
+<Input 
   placeholder='Search...' 
   leftIcon={<MagnifyingGlass />} 
   error={hasError}
@@ -88,23 +88,23 @@ import { MagnifyingGlass } from '@phosphor-icons/react';
 Uses a compound pattern. The `Content` component handles the entrance animation automatically based on the `variant` prop (`standard` | `sheet` | `bottom`).
 
 ```typescript
-import { KisoModal } from '@kpf/kiso';
+import { Modal } from '@kpf/kiso';
 
-<KisoModal open={isOpen} onOpenChange={setIsOpen}>
-  <KisoModal.Content variant='sheet'>
-    <KisoModal.Header>
+<Modal.Root open={isOpen} onOpenChange={setIsOpen}>
+  <Modal.Content variant='sheet'>
+    <Modal.Header>
       <h2>Transaction Details</h2>
-    </KisoModal.Header>
+    </Modal.Header>
     
     <div className='p-6'>
       {/* Content */}
     </div>
 
-    <KisoModal.Footer>
-       <KisoButton variant='secondary' onClick={close}>Close</KisoButton>
-    </KisoModal.Footer>
-  </KisoModal.Content>
-</KisoModal>
+    <Modal.Footer>
+       <Button variant='secondary' onClick={close}>Close</Button>
+    </Modal.Footer>
+  </Modal.Content>
+</Modal.Root>
 ```
 
 #### Toast Feedback
@@ -133,24 +133,25 @@ Kiso provides pre-configured motion primitives powered by Framer Motion. These u
 Splits strings into characters and cascades them in.
 
 ```typescript
-import { KisoStaggerText } from '@kpf/kiso';
+import { StaggerText } from '@kpf/kiso';
 
-<h1 className='text-4xl font-bold text-kiso-forest'>
-  <KisoStaggerText text='Welcome Back' />
-</h1>
+<StaggerText 
+  text='Welcome Back' 
+  className='text-4xl font-bold text-kiso-forest' 
+/>
 ```
 
 #### View Transition (Wizard)
 Handles the exit/enter overlap logic for multi-step forms.
 
 ```typescript
-import { KisoViewTransition } from '@kpf/kiso';
+import { ViewTransition } from '@kpf/kiso';
 
 // direction is 'forward' | 'backward'
-<KisoViewTransition direction={navDirection}>
+<ViewTransition direction={navDirection}>
   {step === 1 && <StepOne key='step1' />}
   {step === 2 && <StepTwo key='step2' />}
-</KisoViewTransition>
+</ViewTransition>
 ```
 
 ## Design Tokens

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

@@ -0,0 +1,12 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const cardVariants: (props?: ({
+    variant?: "default" | "flat" | "outline" | "glass" | null | undefined;
+    rounded?: "sm" | "md" | "lg" | "none" | "xl" | null | undefined;
+    hoverable?: boolean | null | undefined;
+    padding?: "sm" | "md" | "lg" | "none" | "xl" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className">, VariantProps<typeof cardVariants> {
+}
+export declare const Card: React.MemoExoticComponent<React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>>;
+export {};

package/dist/components/atoms/FormControls.d.ts

@@ -0,0 +1,26 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const textareaVariants: (props?: ({
+    status?: "default" | "error" | "success" | "warning" | null | undefined;
+    rounded?: "sm" | "md" | "lg" | "none" | "xl" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type TextareaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "className"> & VariantProps<typeof textareaVariants>;
+export declare const Textarea: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "className"> & VariantProps<(props?: ({
+    status?: "default" | "error" | "success" | "warning" | null | undefined;
+    rounded?: "sm" | "md" | "lg" | "none" | "xl" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string> & React.RefAttributes<HTMLTextAreaElement>>>;
+export type CheckboxProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "className" | "type">;
+export declare const Checkbox: React.MemoExoticComponent<React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>>;
+export type RadioProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "className" | "type">;
+export declare const Radio: React.MemoExoticComponent<React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>>;
+declare const selectVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "className">, VariantProps<typeof selectVariants> {
+}
+export declare const Select: React.MemoExoticComponent<React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>>;
+export interface OTPInputProps {
+    length?: number;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+}
+export declare const OTPInput: React.MemoExoticComponent<({ length, onChange, disabled }: OTPInputProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/dist/components/atoms/Layout.d.ts

@@ -0,0 +1,39 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const dividerVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface DividerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className">, VariantProps<typeof dividerVariants> {
+}
+export declare const Divider: React.MemoExoticComponent<React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<HTMLDivElement>>>;
+export interface SpacerProps {
+    size?: number | string;
+    axis?: 'horizontal' | 'vertical';
+}
+export declare const Spacer: React.MemoExoticComponent<({ size, axis }: SpacerProps) => import("react/jsx-runtime").JSX.Element>;
+export interface ContainerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className"> {
+    center?: boolean;
+}
+export declare const Container: React.MemoExoticComponent<React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>>;
+declare const stackVariants: (props?: ({
+    direction?: "row" | "column" | "row-reverse" | "column-reverse" | null | undefined;
+    align?: "center" | "end" | "start" | "baseline" | "stretch" | null | undefined;
+    justify?: "center" | "end" | "start" | "between" | "around" | "evenly" | null | undefined;
+    gap?: 0 | 1 | 2 | 3 | 16 | 4 | 5 | 6 | 8 | 10 | 12 | null | undefined;
+    wrap?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface StackProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className">, VariantProps<typeof stackVariants> {
+}
+export declare const Stack: React.MemoExoticComponent<React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLDivElement>>>;
+declare const gridVariants: (props?: ({
+    cols?: 1 | 2 | 3 | 4 | 5 | 6 | 12 | null | undefined;
+    gap?: 0 | 1 | 2 | 3 | 16 | 4 | 5 | 6 | 8 | 10 | 12 | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface GridProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className">, VariantProps<typeof gridVariants> {
+}
+export declare const Grid: React.MemoExoticComponent<React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>>;
+export interface AspectRatioProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className"> {
+    ratio?: number;
+}
+export declare const AspectRatio: React.MemoExoticComponent<React.ForwardRefExoticComponent<AspectRatioProps & React.RefAttributes<HTMLDivElement>>>;
+export {};

package/dist/components/atoms/Media.d.ts

@@ -0,0 +1,22 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const avatarVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | "xs" | "2xl" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface AvatarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className">, VariantProps<typeof avatarVariants> {
+    src?: string;
+    alt?: string;
+    fallback?: React.ReactNode;
+}
+export declare const Avatar: React.MemoExoticComponent<React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>>;
+export interface ImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "className"> {
+    aspectRatio?: number;
+    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+}
+export declare const Image: React.MemoExoticComponent<React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLImageElement>>>;
+export interface IconProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "className"> {
+    size?: number | string;
+    color?: string;
+}
+export declare const Icon: React.MemoExoticComponent<React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLSpanElement>>>;
+export {};

package/dist/components/atoms/Status.d.ts

@@ -0,0 +1,34 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const badgeVariants: (props?: ({
+    variant?: "secondary" | "destructive" | "default" | "success" | "outline" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className">, VariantProps<typeof badgeVariants> {
+}
+export declare const Badge: React.MemoExoticComponent<React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>>;
+declare const tagVariants: (props?: ({
+    variant?: "primary" | "default" | "forest" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface TagProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className">, VariantProps<typeof tagVariants> {
+    onClose?: () => void;
+}
+export declare const Tag: React.MemoExoticComponent<React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLDivElement>>>;
+declare const spinnerVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface SpinnerProps extends Omit<React.HTMLAttributes<SVGSVGElement>, "className">, VariantProps<typeof spinnerVariants> {
+}
+export declare const Spinner: React.MemoExoticComponent<React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<SVGSVGElement>>>;
+export interface ProgressBarProps {
+    value?: number;
+    max?: number;
+    variant?: 'primary' | 'success' | 'destructive';
+}
+export declare const ProgressBar: React.MemoExoticComponent<({ value, max, variant }: ProgressBarProps) => import("react/jsx-runtime").JSX.Element>;
+declare const skeletonVariants: (props?: ({
+    variant?: "default" | "circle" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface SkeletonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className">, VariantProps<typeof skeletonVariants> {
+}
+export declare const Skeleton: React.MemoExoticComponent<React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>>;
+export {};

package/dist/components/atoms/Typography.d.ts

@@ -0,0 +1,34 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const textVariants: (props?: ({
+    variant?: "inverse" | "default" | "error" | "success" | "muted" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
+    weight?: "bold" | "normal" | "medium" | "semibold" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface TextProps extends Omit<React.HTMLAttributes<HTMLParagraphElement>, "className">, VariantProps<typeof textVariants> {
+    as?: "p" | "span" | "div";
+}
+export declare const Text: React.MemoExoticComponent<React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLParagraphElement>>>;
+declare const headingVariants: (props?: ({
+    level?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type HeadingProps = Omit<React.HTMLAttributes<HTMLHeadingElement>, "className"> & VariantProps<typeof headingVariants>;
+export declare const Heading: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLHeadingElement>, "className"> & VariantProps<(props?: ({
+    level?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string> & React.RefAttributes<HTMLHeadingElement>>>;
+declare const labelVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export type LabelProps = Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "className"> & VariantProps<typeof labelVariants>;
+export declare const Label: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "className"> & VariantProps<(props?: import('class-variance-authority/types').ClassProp | undefined) => string> & React.RefAttributes<HTMLLabelElement>>>;
+export declare const Caption: React.MemoExoticComponent<React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLSpanElement>>>;
+export type CodeProps = Omit<React.HTMLAttributes<HTMLElement>, "className">;
+export declare const Code: React.MemoExoticComponent<React.ForwardRefExoticComponent<CodeProps & React.RefAttributes<HTMLElement>>>;
+declare const linkVariants: (props?: ({
+    variant?: "primary" | "default" | "muted" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type LinkProps = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "className"> & VariantProps<typeof linkVariants>;
+export declare const Link: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "className"> & VariantProps<(props?: ({
+    variant?: "primary" | "default" | "muted" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string> & React.RefAttributes<HTMLAnchorElement>>>;
+export {};

package/dist/components/molecules/CardSections.d.ts

@@ -0,0 +1,28 @@
+import { CardProps } from '../atoms/Card';
+import * as React from "react";
+export declare const CardHeader: React.MemoExoticComponent<({ children, ...props }: Omit<React.HTMLAttributes<HTMLDivElement>, "className">) => import("react/jsx-runtime").JSX.Element>;
+export declare const CardTitle: React.MemoExoticComponent<({ children, ...props }: Omit<React.HTMLAttributes<HTMLHeadingElement>, "className">) => import("react/jsx-runtime").JSX.Element>;
+export declare const CardDescription: React.MemoExoticComponent<({ children, ...props }: Omit<React.HTMLAttributes<HTMLParagraphElement>, "className">) => import("react/jsx-runtime").JSX.Element>;
+export declare const CardContent: React.MemoExoticComponent<({ children, ...props }: Omit<React.HTMLAttributes<HTMLDivElement>, "className">) => import("react/jsx-runtime").JSX.Element>;
+export declare const CardFooter: React.MemoExoticComponent<({ children, ...props }: Omit<React.HTMLAttributes<HTMLDivElement>, "className">) => import("react/jsx-runtime").JSX.Element>;
+export interface StatCardProps extends CardProps {
+    label: string;
+    value: string | number;
+    trend?: {
+        value: string | number;
+        positive?: boolean;
+    };
+    icon?: React.ReactNode;
+}
+export declare const StatCard: React.MemoExoticComponent<({ label, value, trend, icon, ...props }: StatCardProps) => import("react/jsx-runtime").JSX.Element>;
+export interface InfoRowProps {
+    label: string;
+    value: React.ReactNode;
+    horizontal?: boolean;
+}
+export declare const InfoRow: React.MemoExoticComponent<({ label, value, horizontal }: InfoRowProps) => import("react/jsx-runtime").JSX.Element>;
+export interface CopyToClipboardProps {
+    text: string;
+    children?: React.ReactNode;
+}
+export declare const CopyToClipboard: React.MemoExoticComponent<({ text, children }: CopyToClipboardProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/components/molecules/Feedback.d.ts

@@ -0,0 +1,26 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const alertVariants: (props?: ({
+    variant?: "error" | "success" | "warning" | "info" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className">, VariantProps<typeof alertVariants> {
+    title?: string;
+    onClose?: () => void;
+}
+export declare const Alert: React.MemoExoticComponent<React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>>;
+export interface SnackbarProps {
+    open?: boolean;
+    message: string;
+    action?: React.ReactNode;
+    onClose?: () => void;
+    duration?: number;
+}
+export declare const Snackbar: React.MemoExoticComponent<({ open, message, action, onClose, duration }: SnackbarProps) => import("react/jsx-runtime").JSX.Element | null>;
+export interface EmptyStateProps {
+    icon?: React.ReactNode;
+    title: string;
+    description?: string;
+    action?: React.ReactNode;
+}
+export declare const EmptyState: React.MemoExoticComponent<({ icon, title, description, action }: EmptyStateProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/dist/components/molecules/FormFields.d.ts

@@ -0,0 +1,46 @@
+import * as React from "react";
+export interface FormFieldProps {
+    label?: string;
+    error?: string;
+    hint?: string;
+    required?: boolean;
+    children: React.ReactNode;
+}
+export declare const FormField: React.MemoExoticComponent<({ label, error, hint, required, children }: FormFieldProps) => import("react/jsx-runtime").JSX.Element>;
+export interface PasswordFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "className" | "type"> {
+    label?: string;
+    error?: string;
+}
+export declare const PasswordField: React.MemoExoticComponent<React.ForwardRefExoticComponent<PasswordFieldProps & React.RefAttributes<HTMLInputElement>>>;
+export type SearchInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "className">;
+export declare const SearchInput: React.MemoExoticComponent<React.ForwardRefExoticComponent<SearchInputProps & React.RefAttributes<HTMLInputElement>>>;
+export interface SelectFieldProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "className"> {
+    label?: string;
+    error?: string;
+    options?: {
+        label: string;
+        value: string;
+    }[];
+}
+export declare const SelectField: React.MemoExoticComponent<React.ForwardRefExoticComponent<SelectFieldProps & React.RefAttributes<HTMLSelectElement>>>;
+export interface CheckboxGroupProps {
+    label?: string;
+    options: {
+        label: string;
+        value: string;
+    }[];
+    value?: string[];
+    onChange?: (value: string[]) => void;
+}
+export declare const CheckboxGroup: React.MemoExoticComponent<({ label, options, value, onChange }: CheckboxGroupProps) => import("react/jsx-runtime").JSX.Element>;
+export interface RadioGroupProps {
+    label?: string;
+    name: string;
+    options: {
+        label: string;
+        value: string;
+    }[];
+    value?: string;
+    onChange?: (value: string) => void;
+}
+export declare const RadioGroup: React.MemoExoticComponent<({ label, name, options, value, onChange }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/components/molecules/Interaction.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+export interface PopoverProps {
+    trigger: React.ReactNode;
+    children: React.ReactNode;
+}
+export declare const Popover: React.MemoExoticComponent<({ trigger, children }: PopoverProps) => import("react/jsx-runtime").JSX.Element>;
+export interface AccordionItemProps {
+    title: string;
+    children: React.ReactNode;
+    defaultOpen?: boolean;
+}
+export declare const AccordionItem: React.MemoExoticComponent<({ title, children, defaultOpen }: AccordionItemProps) => import("react/jsx-runtime").JSX.Element>;
+export interface TooltipProps {
+    content: string;
+    children: React.ReactNode;
+}
+export declare const Tooltip: React.MemoExoticComponent<({ content, children }: TooltipProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/components/molecules/Navigation.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+export interface DropdownProps {
+    trigger: React.ReactNode;
+    items: {
+        label: string;
+        onClick?: () => void;
+        icon?: React.ReactNode;
+        destructive?: boolean;
+    }[];
+}
+export declare const Dropdown: React.MemoExoticComponent<({ trigger, items }: DropdownProps) => import("react/jsx-runtime").JSX.Element>;
+export interface TabsProps {
+    tabs: {
+        label: string;
+        content: React.ReactNode;
+    }[];
+}
+export declare const Tabs: React.MemoExoticComponent<({ tabs }: TabsProps) => import("react/jsx-runtime").JSX.Element>;
+export interface BreadcrumbsProps {
+    items: {
+        label: string;
+        href?: string;
+        active?: boolean;
+    }[];
+}
+export declare const Breadcrumbs: React.MemoExoticComponent<({ items }: BreadcrumbsProps) => import("react/jsx-runtime").JSX.Element>;
+export interface PaginationProps {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+}
+export declare const Pagination: React.MemoExoticComponent<({ currentPage, totalPages, onPageChange }: PaginationProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/components/motion/HotSlider.d.ts

@@ -5,6 +5,7 @@ interface HotSliderProps {
     step?: number;
     value: number;
     onChange: (value: number) => void;
+    className?: string;
 }
-export declare const HotSlider: React.MemoExoticComponent<({ min, max, step, value, onChange, }: HotSliderProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const HotSlider: React.MemoExoticComponent<({ min, max, step, value, onChange, className, }: HotSliderProps) => import("react/jsx-runtime").JSX.Element>;
 export {};

package/dist/components/motion/Magnetic.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+export interface MagneticProps {
+    children: React.ReactNode;
+    strength?: number;
+}
+export declare const Magnetic: React.MemoExoticComponent<({ children, strength }: MagneticProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/components/motion/Spotlight.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+export interface SpotlightProps {
+    children: React.ReactNode;
+    size?: number;
+    color?: string;
+    opacity?: number;
+}
+export declare const Spotlight: React.MemoExoticComponent<({ children, size, color, opacity }: SpotlightProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/components/motion/StaggerText.d.ts

@@ -1,13 +1,7 @@
-import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
-declare const textVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | null | undefined;
-    weight?: "bold" | "medium" | "normal" | "semibold" | null | undefined;
-    tracking?: "normal" | "tight" | "wide" | null | undefined;
-    color?: "gray" | "green" | "white" | "forest" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-interface StaggerTextProps extends VariantProps<typeof textVariants> {
+interface StaggerTextProps {
     text: string;
+    className?: string;
 }
-export declare const StaggerText: React.MemoExoticComponent<({ text, size, weight, tracking, color }: StaggerTextProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const StaggerText: React.MemoExoticComponent<({ text, className }: StaggerTextProps) => import("react/jsx-runtime").JSX.Element>;
 export {};

package/dist/components/motion/TextScramble.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+export interface TextScrambleProps {
+    text: string;
+    speed?: number;
+    scrambleDuration?: number;
+    characterSet?: string;
+    revealOnInView?: boolean;
+}
+export declare const TextScramble: React.MemoExoticComponent<({ text, speed, scrambleDuration, characterSet, revealOnInView, }: TextScrambleProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/components/motion/Tilt.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+export interface TiltProps {
+    children: React.ReactNode;
+    max?: number;
+    perspective?: number;
+}
+export declare const Tilt: React.MemoExoticComponent<({ children, max, perspective }: TiltProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/components/motion/ViewTransition.d.ts

@@ -2,6 +2,7 @@ interface ViewTransitionProps {
     children: React.ReactNode;
     direction?: "forward" | "backward";
     layoutId?: string;
+    className?: string;
 }
-export declare function ViewTransition({ children, direction, layoutId }: ViewTransitionProps): import("react/jsx-runtime").JSX.Element;
+export declare function ViewTransition({ children, direction, layoutId, className }: ViewTransitionProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/organisms/ContentOrganisms.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+export declare const HeroSection: React.MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export declare const FeatureGrid: React.MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export declare const FAQSection: React.MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export declare const PricingTable: React.MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;

package/dist/components/organisms/DataOrganisms.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+export interface DataTableProps {
+    columns: string[];
+    data: Record<string, unknown>[];
+}
+export declare const DataTable: React.MemoExoticComponent<({ columns, data }: DataTableProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const DashboardStats: React.MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export declare const ActivityFeed: React.MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;

package/dist/components/organisms/FormOrganisms.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+export declare const LoginForm: React.MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export declare const SignupForm: React.MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export declare const ProfileForm: React.MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;

package/dist/components/organisms/NavigationOrganisms.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+export interface NavbarProps {
+    logo?: React.ReactNode;
+    links?: {
+        label: string;
+        href: string;
+    }[];
+    user?: {
+        name: string;
+        avatar?: string;
+    };
+}
+export declare const Navbar: React.MemoExoticComponent<({ logo, links, user }: NavbarProps) => import("react/jsx-runtime").JSX.Element>;
+export interface SidebarProps {
+    className?: string;
+}
+export declare const Sidebar: React.MemoExoticComponent<({ className }: SidebarProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const Footer: React.MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;

package/dist/components/organisms/OverlayOrganisms.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+export interface ConfirmationDialogProps {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    title: string;
+    description: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+    variant?: "destructive" | "primary";
+    trigger?: React.ReactNode;
+}
+export declare const ConfirmationDialog: React.MemoExoticComponent<({ open, onOpenChange, title, description, confirmLabel, cancelLabel, onConfirm, onCancel, variant, trigger }: ConfirmationDialogProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/index.d.ts

@@ -1,10 +1,30 @@
 export { Button } from './components/atoms/Button';
 export { Input } from './components/atoms/Input';
 export { Toggle } from './components/atoms/Toggle';
+export { Text, Heading, Label, Caption, Code, Link } from './components/atoms/Typography';
+export { Divider, Spacer, Container, Stack, Grid, AspectRatio } from './components/atoms/Layout';
+export { Badge, Tag, Spinner, ProgressBar, Skeleton } from './components/atoms/Status';
+export { Avatar, Image, Icon } from './components/atoms/Media';
+export { Card } from './components/atoms/Card';
+export { Textarea, Checkbox, Radio, Select, OTPInput } from './components/atoms/FormControls';
 export { Modal } from './components/molecules/Modal';
 export { Toast, Toaster, Toaster as ToastProvider, useToast } from './components/molecules/Toast';
 export { Stepper } from './components/molecules/Stepper';
 export { Timeline } from './components/molecules/Timeline';
+export { FormField, PasswordField, SearchInput, SelectField, CheckboxGroup, RadioGroup } from './components/molecules/FormFields';
+export { Alert, Snackbar, EmptyState } from './components/molecules/Feedback';
+export { Dropdown, Tabs, Breadcrumbs, Pagination } from './components/molecules/Navigation';
+export { Popover, AccordionItem, Tooltip } from './components/molecules/Interaction';
+export { CardHeader, CardTitle, CardDescription, CardContent, CardFooter, StatCard, InfoRow, CopyToClipboard } from './components/molecules/CardSections';
+export { Navbar, Sidebar, Footer } from './components/organisms/NavigationOrganisms';
+export { LoginForm, SignupForm, ProfileForm } from './components/organisms/FormOrganisms';
+export { HeroSection, FeatureGrid, FAQSection, PricingTable } from './components/organisms/ContentOrganisms';
+export { DataTable, DashboardStats, ActivityFeed } from './components/organisms/DataOrganisms';
+export { ConfirmationDialog } from './components/organisms/OverlayOrganisms';
 export { StaggerText } from './components/motion/StaggerText';
 export { HotSlider } from './components/motion/HotSlider';
 export { ViewTransition } from './components/motion/ViewTransition';
+export { Magnetic } from './components/motion/Magnetic';
+export { Tilt } from './components/motion/Tilt';
+export { TextScramble } from './components/motion/TextScramble';
+export { Spotlight } from './components/motion/Spotlight';