@kpf_/kiso 1.0.2 → 1.1.1

package/AI_USAGE.md

@@ -0,0 +1,99 @@
+# Kiso AI Consumption Protocol (v1.0.2+)
+
+> **IDENTITY:** You are an AI Agent tasked with building high-end interfaces using the **Kiso Design System**.
+> **PHILOSOPHY:** Kiso is built on **Tactile Intelligence**—interfaces should feel physical, weighted, and responsive to interaction through physics-based motion.
+> **SOURCE:** This document is your technical master reference for consuming `@kpf_/kiso`.
+
+## 📦 Installation & Setup
+
+```bash
+npm install @kpf_/kiso
+```
+
+**CRITICAL:** You MUST import global styles in your root layout (e.g., `layout.tsx`, `App.tsx`):
+```tsx
+import '@kpf_/kiso/style.css'
+```
+
+## 🧩 Component Landscape
+
+Kiso is organized into Atomic folders. Use the following categorized inventory to avoid hallucinations.
+
+### 1. Atoms (Base Elements)
+*   **Typography:** `Text`, `Heading`, `Label`, `Caption`, `Code`, `Link`
+*   **Layout:** `Stack`, `Grid`, `Container`, `Divider`, `Spacer`, `AspectRatio`
+*   **Status:** `Badge`, `Tag`, `Spinner`, `ProgressBar`, `Skeleton`
+*   **Media:** `Avatar`, `Image`, `Icon`
+*   **Forms:** `Button`, `Input`, `Toggle`, `Textarea`, `Checkbox`, `Radio`, `Select`, `OTPInput`
+*   **Containers:** `Card`
+
+### 2. Molecules (Component Clusters)
+*   **Feedback:** `Toast`, `Toaster`, `Alert`, `Snackbar`, `EmptyState`
+*   **Navigation:** `Dropdown`, `Tabs`, `Breadcrumbs`, `Pagination`, `Stepper`, `Timeline`
+*   **Interaction:** `Modal`, `Popover`, `AccordionItem`, `Tooltip`, `CopyToClipboard`
+*   **Composites:** `FormField`, `PasswordField`, `SearchInput`, `StatCard`, `InfoRow`
+
+### 3. Organisms (Layout & Sections)
+*   **Shell:** `Navbar`, `Sidebar`, `Footer`
+*   **Forms:** `LoginForm`, `SignupForm`, `ProfileForm`
+*   **Content:** `HeroSection`, `FeatureGrid`, `FAQSection`, `PricingTable`
+*   **Data:** `DataTable`, `DashboardStats`, `ActivityFeed`
+*   **Overlays:** `ConfirmationDialog`
+
+### 4. Motion (Tactile Primitives)
+*   **Text:** `StaggerText`, `TextScramble`
+*   **Physics:** `Magnetic`, `Tilt`, `Spotlight`
+*   **Flow:** `HotSlider`, `ViewTransition`
+
+## 🎨 Design System Constraints
+
+Do **NOT** use generic Tailwind colors or utility-first overrides for component cores.
+
+- **Colors:** `bg-kiso-green`, `text-kiso-forest`, `border-kiso-stroke`, `bg-kiso-gray`
+- **Transitions:** `ease-kiso` (Tactile spring timing)
+- **Shadows:** `shadow-kiso-sm`, `shadow-kiso-md`
+- **Rounding:** `rounded-kiso-md`, `rounded-kiso-lg`
+
+## 🛡️ Strict Compliance Rules (The "Kiso Guardrails")
+
+1.  **NO CLASSNAME PROP:** Kiso components do **NOT** accept `className`. Use provided props (`variant`, `size`, `status`, `rounded`).
+2.  **Wrappers for Layout:** If you must apply margin, width, or positioning classes, wrap the Kiso component in a primitive `div` or use Kiso `Stack`/`Grid`.
+3.  **Continuous Build Verification (CBV):** Always run `npm run lint && npm run build` after implementing Kiso components to ensure prop types and exports are valid.
+4.  **No Hallucinations:** If a component is not listed above, it does not exist in Kiso.
+5.  **Motion Preference:** Prioritize `StaggerText` for headings and `Magnetic`/`Tilt` for primary CTAs to maintain "Tactile" feel.
+
+## 📚 Implementation Example
+
+```tsx
+import { 
+  Card, 
+  Heading, 
+  Text, 
+  Button, 
+  Stack, 
+  Magnetic, 
+  Tilt 
+} from '@kpf_/kiso'
+
+export function ProductShowcase() {
+  return (
+    <Tilt max={10}>
+      <Card padding="lg" shadow="md">
+        <Stack gap={6} align="start">
+          <Heading level="h2">The Kiso Modular Kit</Heading>
+          <Text variant="muted">
+            Physics-based components for modern tactile intelligence.
+          </Text>
+          
+          <div className="flex gap-4 mt-2">
+            <Magnetic strength={0.2}>
+              <Button variant="primary" size="lg">Get Started</Button>
+            </Magnetic>
+            <Button variant="outline" size="lg">Documentation</Button>
+          </div>
+        </Stack>
+      </Card>
+    </Tilt>
+  )
+}
+```

package/README.md

@@ -1,168 +1,86 @@
 # Kiso Design System
 
-Package: `@kpf/kiso`
-Version: `1.0.0`
-Framework: React 19 / TypeScript
+Package: `@kpf_/kiso`  
+Version: `1.0.2` (Build Verified)  
+Philosophy: **Tactile Intelligence**
 
-**Kiso** (Japanese for *Foundation*) is a strict, atomic UI library built for tactile interaction and precise motion. It enforces a specific set of physics curves (`ease-kiso`) and a hardcoded token system to ensure visual consistency across applications.
+**Kiso** (Japanese for *Foundation*) is a high-performance UI library built for physical interaction and precise motion. It enforces physics-based behaviors through custom springs and the signature `ease-kiso` bezier curve.
 
-## Integration
-
-### 1. Installation
+## 🚀 Installation
 
 ```bash
-npm install @kpf/kiso framer-motion
+npm install @kpf_/kiso framer-motion @phosphor-icons/react
 ```
 
-### 2. Styles & Fonts
-
-Kiso relies on **Plus Jakarta Sans** and a compiled CSS file for token injection.
-
-In your root entry file (e.g., `main.tsx` or `layout.tsx`):
+## 🔌 Setup
 
-```typescript
-// 1. Import the Font
-import '@fontsource/plus-jakarta-sans/400.css';
-import '@fontsource/plus-jakarta-sans/500.css';
-import '@fontsource/plus-jakarta-sans/600.css';
-import '@fontsource/plus-jakarta-sans/700.css';
+### 1. Global Styles
+In your root layout (e.g., `layout.tsx` or `App.tsx`):
 
-// 2. Import Kiso Core Styles
-import '@kpf/kiso/dist/style.css';
+```tsx
+import '@kpf_/kiso/style.css'
 ```
 
-### 3. Provider Setup
+### 2. Fonts
+Kiso is designed around **Plus Jakarta Sans** (Primary) and **JetBrains Mono** (Code).
 
-The system requires a global context for feedback loops (Toasts). Wrap your application root:
-
-```typescript
-import { KisoToastProvider } from '@kpf/kiso';
-
-function App() {
-  return (
-    <KisoToastProvider>
-      <YourApplication />
-    </KisoToastProvider>
-  );
-}
+```tsx
+// Example using Google Fonts or Fontsource
+import '@fontsource/plus-jakarta-sans/400.css';
+import '@fontsource/plus-jakarta-sans/700.css';
+import '@fontsource/jetbrains-mono/500.css';
 ```
 
-## Component Architecture
+## 🧩 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 is organized into Atomic tiers for maximum composability.
 
 ### Atoms
-
-#### Button
-Utilizes tactile press physics (`scale-96`) and custom easing.
-
-```typescript
-import { KisoButton } from '@kpf/kiso';
-
-<KisoButton variant='primary' onClick={handleClick}>
-  Confirm Action
-</KisoButton>
-
-<KisoButton variant='destructive' isLoading={isDeleting}>
-  Delete Item
-</KisoButton>
-```
-
-#### Input
-Includes slot support for icons and right-aligned actions.
-
-```typescript
-import { KisoInput } from '@kpf/kiso';
-import { MagnifyingGlass } from '@phosphor-icons/react';
-
-<KisoInput 
-  placeholder='Search...' 
-  leftIcon={<MagnifyingGlass />} 
-  error={hasError}
-/>
-```
-
-### Molecules (Stateful)
-
-#### Modal System
-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';
-
-<KisoModal open={isOpen} onOpenChange={setIsOpen}>
-  <KisoModal.Content variant='sheet'>
-    <KisoModal.Header>
-      <h2>Transaction Details</h2>
-    </KisoModal.Header>
-    
-    <div className='p-6'>
-      {/* Content */}
-    </div>
-
-    <KisoModal.Footer>
-       <KisoButton variant='secondary' onClick={close}>Close</KisoButton>
-    </KisoModal.Footer>
-  </KisoModal.Content>
-</KisoModal>
-```
-
-#### Toast Feedback
-Triggered via hook.
-
-```typescript
-import { useToast } from '@kpf/kiso';
-
-const { success, error } = useToast();
-
-const handleSubmit = () => {
-  try {
-    saveData();
-    success('Changes saved successfully.');
-  } catch (err) {
-    error('Failed to save data.');
-  }
-};
-```
-
-### Motion System
-
-Kiso provides pre-configured motion primitives powered by Framer Motion. These use the **wise-drama** bezier curve (`0.1, 0.9, 0.2, 1`).
-
-#### Stagger Text
-Splits strings into characters and cascades them in.
-
-```typescript
-import { KisoStaggerText } from '@kpf/kiso';
-
-<h1 className='text-4xl font-bold text-kiso-forest'>
-  <KisoStaggerText text='Welcome Back' />
-</h1>
-```
-
-#### View Transition (Wizard)
-Handles the exit/enter overlap logic for multi-step forms.
-
-```typescript
-import { KisoViewTransition } from '@kpf/kiso';
-
-// direction is 'forward' | 'backward'
-<KisoViewTransition direction={navDirection}>
-  {step === 1 && <StepOne key='step1' />}
-  {step === 2 && <StepTwo key='step2' />}
-</KisoViewTransition>
+Primitive build blocks:
+- **Typography:** `Text`, `Heading`, `Label`, `Code`, `Link`
+- **Forms:** `Button`, `Input`, `Toggle`, `Checkbox`, `Radio`, `OTPInput`
+- **Layout:** `Stack`, `Grid`, `Container`, `Spacer`, `AspectRatio`
+- **Visual:** `Avatar`, `Badge`, `Tag`, `Spinner`, `Card`
+
+### Molecules
+Stateful interaction patterns:
+- **Navigation:** `Tabs`, `Stepper`, `Timeline`, `Breadcrumbs`, `Pagination`
+- **Feedback:** `Toaster`, `useToast`, `Alert`, `Snackbar`, `EmptyState`
+- **Overlays:** `Modal`, `Popover`, `Tooltip`, `AccordionItem`
+- **Composites:** `FormField`, `PasswordField`, `StatCard`
+
+### Organisms
+High-level production-ready sections:
+- **Forms:** `LoginForm`, `SignupForm`, `ProfileForm`
+- **Marketing:** `HeroSection`, `FeatureGrid`, `PricingTable`
+- **Data:** `DataTable`, `DashboardStats`, `ActivityFeed`
+- **Shell:** `Navbar`, `Sidebar`, `Footer`
+
+## ✨ Motion (Tactile Intelligence)
+
+Kiso includes physics-based primitives that go beyond simple transitions:
+
+- **Magnetic:** Wraps elements to pull them toward the cursor.
+- **Tilt:** Adds reactive 3D depth to containers on hover.
+- **Spotlight:** A tracking radial reveal layer.
+- **StaggerText:** Character-by-character entrance sequences.
+- **TextScramble:** Decoding animations for headlines.
+
+```tsx
+import { Tilt, Card, StaggerText } from '@kpf_/kiso'
+
+<Tilt>
+  <Card padding="lg">
+    <StaggerText text="Tactile Logic" />
+  </Card>
+</Tilt>
 ```
 
-## Design Tokens
+## 🛡️ Strict Guidelines
 
-Do not use arbitrary values. Use the Kiso token set for consistency.
+- **No className:** Kiso components do **NOT** accept a `className` prop. All styling is variant/prop-driven to maintain design integrity.
+- **Layout Wrappers:** Use `Stack`, `Grid`, or standard `div` elements to handle external positioning.
+- **Tokens:** Always use `kiso` prefixed tailwind tokens for custom elements (`bg-kiso-green`, `text-kiso-forest`).
 
-| Category | Token | Value |
-| --- | --- | --- |
-| **Color** | `text-kiso-forest` | Primary Text (#163300) |
-| | `bg-kiso-green` | Primary Action (#9FE870) |
-| | `bg-kiso-gray` | Backgrounds (#F2F4F8) |
-| | `border-kiso-stroke` | Borders (#D3D5D8) |
-| **Shadow** | `shadow-kiso-modal` | Deep elevation for dialogs |
-| **Ease** | `ease-kiso` | Standard interaction curve |
-| **Ease** | `ease-drama` | Long-form motion curve |
+## 📄 License
+MIT © Kim Fajardo

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>;