@kpf_/kiso 1.0.1 → 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/Button.d.ts

@@ -2,10 +2,12 @@ import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const buttonVariants: (props?: ({
     variant?: "primary" | "secondary" | "destructive" | "ghost" | "inverse" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "sm" | "md" | "lg" | "icon" | null | undefined;
+    rounded?: "sm" | "md" | "lg" | "none" | "xl" | "full" | null | undefined;
+    fullWidth?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className">, VariantProps<typeof buttonVariants> {
     isLoading?: boolean;
 }
-declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+declare const Button: React.MemoExoticComponent<React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>>;
 export { Button, buttonVariants };

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/Input.d.ts

@@ -1,8 +1,15 @@
+import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+declare const inputVariants: (props?: ({
+    status?: "default" | "error" | "success" | "warning" | null | undefined;
+    inputSize?: "sm" | "md" | "lg" | null | undefined;
+    fullWidth?: boolean | null | undefined;
+    rounded?: "sm" | "md" | "lg" | "none" | "xl" | "full" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "className" | "size">, VariantProps<typeof inputVariants> {
     leftIcon?: React.ReactNode;
     rightAction?: React.ReactNode;
     error?: boolean;
 }
-declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+declare const Input: React.MemoExoticComponent<React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>>;
 export { Input };

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/Toggle.d.ts

@@ -3,7 +3,7 @@ export interface ToggleProps {
     checked: boolean;
     onChange: (checked: boolean) => void;
     disabled?: boolean;
-    className?: string;
+    size?: 'sm' | 'md' | 'lg';
 }
-declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLButtonElement>>;
+declare const Toggle: React.MemoExoticComponent<React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLButtonElement>>>;
 export { Toggle };

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/Modal.d.ts

@@ -1,23 +1,24 @@
 import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 type ModalVariant = "standard" | "sheet" | "bottom";
-interface ModalContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+interface ModalContentProps extends Omit<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, "className"> {
     variant?: ModalVariant;
+    rounded?: "none" | "sm" | "md" | "lg" | "xl" | "full";
 }
-export declare const KisoModal: {
+export declare const Modal: {
     Root: React.FC<DialogPrimitive.DialogProps>;
     Trigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
     Content: React.ForwardRefExoticComponent<ModalContentProps & React.RefAttributes<HTMLDivElement>>;
     Header: {
-        ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+        ({ ...props }: Omit<React.HTMLAttributes<HTMLDivElement>, "className">): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Footer: {
-        ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+        ({ ...props }: Omit<React.HTMLAttributes<HTMLDivElement>, "className">): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
-    Title: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
-    Description: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+    Title: React.ForwardRefExoticComponent<Omit<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref">, "className"> & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<Omit<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref">, "className"> & React.RefAttributes<HTMLParagraphElement>>;
     Close: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
 };
 export {};

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/molecules/Stepper.d.ts

@@ -1,8 +1,7 @@
 import * as React from "react";
-interface KisoStepperProps {
+interface StepperProps {
     currentStep: number;
     steps: string[];
-    className?: string;
 }
-export declare const KisoStepper: React.ForwardRefExoticComponent<KisoStepperProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Stepper: React.MemoExoticComponent<React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLDivElement>>>;
 export {};

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

@@ -5,9 +5,8 @@ interface TimelineItem {
     description: string;
     status: 'active' | 'complete' | 'pending';
 }
-interface KisoTimelineProps {
+interface TimelineProps {
     items: TimelineItem[];
-    className?: string;
 }
-export declare const KisoTimeline: React.ForwardRefExoticComponent<KisoTimelineProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Timeline: React.MemoExoticComponent<React.ForwardRefExoticComponent<TimelineProps & React.RefAttributes<HTMLDivElement>>>;
 export {};

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

@@ -1,19 +1,28 @@
 import * as React from "react";
 import * as ToastPrimitives from "@radix-ui/react-toast";
-export type KisoToastVariant = "success" | "error" | "warning" | "info";
-declare const KisoToast: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastProps & React.RefAttributes<HTMLLIElement>, "ref"> & {
-    variant?: KisoToastVariant;
-} & React.RefAttributes<HTMLLIElement>>;
-type ToastProps = React.ComponentPropsWithoutRef<typeof KisoToast>;
+export type ToastVariant = "success" | "error" | "warning" | "info";
+declare const radiusClasses: {
+    none: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    full: string;
+};
+declare const Toast: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<Omit<ToastPrimitives.ToastProps & React.RefAttributes<HTMLLIElement>, "ref">, "className"> & {
+    variant?: ToastVariant;
+    rounded?: keyof typeof radiusClasses;
+} & React.RefAttributes<HTMLLIElement>>>;
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
 interface ToastContextType {
     toast: (props: ToastProps & {
         title?: string;
         description?: string;
-        variant?: KisoToastVariant;
+        variant?: ToastVariant;
     }) => void;
 }
 declare const useToast: () => ToastContextType;
-declare const KisoToaster: ({ children }: {
+declare const Toaster: ({ children }: {
     children: React.ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;
-export { KisoToast, KisoToaster, useToast };
+export { Toast, Toaster, useToast };

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

@@ -1,3 +1,4 @@
+import * as React from "react";
 interface HotSliderProps {
     min?: number;
     max?: number;
@@ -6,5 +7,5 @@ interface HotSliderProps {
     onChange: (value: number) => void;
     className?: string;
 }
-export declare function HotSlider({ min, max, step, value, onChange, className, }: 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>;