@stackvibe-studio/ui 0.2.0 → 0.3.1

package/README.md

@@ -1,55 +1,66 @@
 # @stackvibe-studio/ui
 
-Core React component library for product teams building premium SaaS experiences.
+> Core accessible UI component library for StackVibe UI. Built for React 19, Tailwind CSS v4, and modern design systems.
 
-## Highlights
+[![npm version](https://img.shields.io/npm/v/@stackvibe-studio/ui.svg)](https://www.npmjs.com/package/@stackvibe-studio/ui)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-- Accessible defaults for forms, cards, alerts, and calls to action
-- Flexible primitives with utility-friendly props
-- Tailwind-ready styling with a compact design language
-- New additions in v0.2.0: Tabs and Skeleton loaders
-
-## Install
+## Installation
 
 ```bash
 npm install @stackvibe-studio/ui
+# or
+pnpm add @stackvibe-studio/ui
 ```
 
-## Included components
+## Features
 
-- Button
-- Badge
-- Card
-- Input
-- Textarea
-- Select
-- Checkbox
-- Alert
-- Avatar
-- Tabs
-- Skeleton
+- **19+ Production Primitives**: Dialog, Drawer, Tooltip, Accordion, Switch, Progress, Toast, DropdownMenu, Button, Input, Textarea, Select, Checkbox, Card, Alert, Badge, Avatar, Skeleton, Tabs.
+- **Accessible (WAI-ARIA)**: Full keyboard navigation, focus management, and screen-reader support.
+- **Tailwind Native**: Styled with modular tokens and high-contrast dark theme defaults.
+- **Tree-shakeable**: Dual ESM and CJS bundle exports with zero unnecessary dependencies.
 
-## Example
+## Usage
 
 ```tsx
-import { Button, Card, Tabs } from '@stackvibe-studio/ui';
+import {
+  Button,
+  Dialog,
+  DialogHeader,
+  DialogTitle,
+  toast,
+  Toaster,
+  Switch,
+  Progress,
+} from '@stackvibe-studio/ui';
+import { useState } from 'react';
 
 export function Example() {
+  const [open, setOpen] = useState(false);
+
   return (
-    <Card className="p-5">
-      <Tabs
-        items={[
-          { id: 'overview', label: 'Overview', content: 'Overview content' },
-          { id: 'activity', label: 'Activity', content: 'Activity content' },
-        ]}
-      />
-      <Button className="mt-4">Launch</Button>
-    </Card>
+    <div>
+      <Toaster />
+      <Button onClick={() => setOpen(true)}>Open Modal</Button>
+      <Switch defaultChecked onCheckedChange={(val) => toast.info(`Toggled: ${val}`)} />
+      <Progress value={80} variant="primary" showLabel />
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogHeader>
+          <DialogTitle>Modal Dialog</DialogTitle>
+        </DialogHeader>
+        <p>Dialog body content</p>
+      </Dialog>
+    </div>
   );
 }
 ```
 
 ## Documentation
 
-- Docs: https://stackvibe-studio.github.io/stackvibe-ui/
-- Playground: https://stackvibe-studio.github.io/stackvibe-ui/playground/
+Full documentation, props specifications, and live examples:
+[https://stackvibe-studio.github.io/stackvibe-ui/docs](https://stackvibe-studio.github.io/stackvibe-ui/docs)
+
+## License
+
+MIT © [StackVibe Studio](https://github.com/StackVibe-Studio)

package/dist/components/accordion.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+export interface AccordionItemData {
+    id: string;
+    title: ReactNode;
+    content: ReactNode;
+    icon?: ReactNode;
+}
+export type AccordionVariant = 'bordered' | 'separated' | 'ghost';
+export type AccordionRadius = 'sm' | 'md' | 'lg' | 'xl';
+export interface AccordionProps {
+    items: AccordionItemData[];
+    type?: 'single' | 'multiple';
+    variant?: AccordionVariant;
+    radius?: AccordionRadius;
+    defaultOpen?: string[];
+    className?: string;
+    customIcon?: (isOpen: boolean) => ReactNode;
+}
+export declare function Accordion({ items, type, variant, radius, defaultOpen, className, customIcon, }: AccordionProps): import("react").JSX.Element;

package/dist/components/alert.d.ts

@@ -1,7 +1,12 @@
-import type { HTMLAttributes } from 'react';
-export type AlertVariant = 'info' | 'success' | 'warning' | 'danger';
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type AlertVariant = 'info' | 'success' | 'warning' | 'destructive' | 'primary';
+export type AlertRadius = 'sm' | 'md' | 'lg' | 'xl';
 export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
     title?: string;
     variant?: AlertVariant;
+    radius?: AlertRadius;
+    icon?: ReactNode;
+    dismissible?: boolean;
+    onDismiss?: () => void;
 }
-export declare function Alert({ title, variant, className, children, ...props }: AlertProps): import("react").JSX.Element;
+export declare function Alert({ title, variant, radius, icon, dismissible, onDismiss, className, children, ...props }: AlertProps): import("react").JSX.Element | null;

package/dist/components/avatar.d.ts

@@ -1,6 +1,11 @@
 import type { ImgHTMLAttributes } from 'react';
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export type AvatarShape = 'circle' | 'rounded' | 'square';
+export type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';
 export interface AvatarProps extends ImgHTMLAttributes<HTMLImageElement> {
     fallback?: string;
-    size?: 'sm' | 'md' | 'lg';
+    size?: AvatarSize;
+    shape?: AvatarShape;
+    status?: AvatarStatus;
 }
-export declare function Avatar({ src, alt, fallback, size, className, ...props }: AvatarProps): import("react").JSX.Element;
+export declare function Avatar({ src, alt, fallback, size, shape, status, className, ...props }: AvatarProps): import("react").JSX.Element;

package/dist/components/badge.d.ts

@@ -1,6 +1,13 @@
-import type { HTMLAttributes } from 'react';
-export type BadgeVariant = 'primary' | 'secondary' | 'outline';
+import type { HTMLAttributes, ReactNode } from 'react';
+export type BadgeVariant = 'primary' | 'secondary' | 'outline' | 'destructive' | 'success' | 'warning' | 'glass';
+export type BadgeSize = 'sm' | 'md' | 'lg';
+export type BadgeRadius = 'sm' | 'md' | 'lg' | 'full';
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
     variant?: BadgeVariant;
+    size?: BadgeSize;
+    radius?: BadgeRadius;
+    dot?: boolean;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
 }
-export declare function Badge({ variant, className, ...props }: BadgeProps): import("react").JSX.Element;
+export declare function Badge({ variant, size, radius, dot, leftIcon, rightIcon, children, className, ...props }: BadgeProps): import("react").JSX.Element;

package/dist/components/button.d.ts

@@ -1,9 +1,17 @@
-import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
-export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'outline';
-export type ButtonSize = 'sm' | 'md' | 'lg';
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'outline' | 'destructive' | 'glass' | 'gradient';
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type ButtonRadius = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
 interface BaseButtonProps {
     variant?: ButtonVariant;
     size?: ButtonSize;
+    radius?: ButtonRadius;
+    fullWidth?: boolean;
+    loading?: boolean;
+    loadingText?: string;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    disabled?: boolean;
     className?: string;
 }
 type ButtonAsButtonProps = BaseButtonProps & ButtonHTMLAttributes<HTMLButtonElement> & {
@@ -12,7 +20,7 @@ type ButtonAsButtonProps = BaseButtonProps & ButtonHTMLAttributes<HTMLButtonElem
 };
 type ButtonAsAnchorProps = BaseButtonProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'type'> & {
     as: 'a';
-    href: string;
+    href?: string;
 };
 export type ButtonProps = ButtonAsButtonProps | ButtonAsAnchorProps;
 export declare function Button(props: ButtonProps): import("react").JSX.Element;

package/dist/components/card.d.ts

@@ -1,5 +1,12 @@
 import type { ElementType, HTMLAttributes } from 'react';
+export type CardVariant = 'default' | 'glass' | 'gradient' | 'bordered' | 'interactive' | 'elevated';
+export type CardRadius = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+export type CardPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';
 export interface CardProps extends HTMLAttributes<HTMLDivElement> {
     as?: ElementType;
+    variant?: CardVariant;
+    radius?: CardRadius;
+    padding?: CardPadding;
+    glow?: boolean;
 }
-export declare function Card({ as: Component, className, ...props }: CardProps): import("react").JSX.Element;
+export declare function Card({ as: Component, variant, radius, padding, glow, className, style, ...props }: CardProps): import("react").JSX.Element;

package/dist/components/dialog.d.ts

@@ -0,0 +1,24 @@
+import { type ReactNode } from 'react';
+export interface DialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    children: ReactNode;
+    className?: string;
+}
+export declare function Dialog({ open, onOpenChange, children, className }: DialogProps): import("react").ReactPortal | null;
+export declare function DialogHeader({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function DialogTitle({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function DialogDescription({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function DialogFooter({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/drawer.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from 'react';
+export interface DrawerProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    position?: 'left' | 'right' | 'bottom';
+    children: ReactNode;
+    className?: string;
+}
+export declare function Drawer({ open, onOpenChange, position, children, className, }: DrawerProps): import("react").ReactPortal | null;
+export declare function DrawerHeader({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function DrawerTitle({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/dropdown-menu.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from 'react';
+export interface DropdownMenuItem {
+    id: string;
+    label: ReactNode;
+    icon?: ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    destructive?: boolean;
+}
+export interface DropdownMenuProps {
+    trigger: ReactNode;
+    items: DropdownMenuItem[];
+    align?: 'left' | 'right';
+    className?: string;
+}
+export declare function DropdownMenu({ trigger, items, align, className, }: DropdownMenuProps): import("react").JSX.Element;

package/dist/components/input.d.ts

@@ -1,4 +1,14 @@
-import type { InputHTMLAttributes } from 'react';
-export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+import type { InputHTMLAttributes, ReactNode } from 'react';
+export type InputVariant = 'default' | 'filled' | 'flushed';
+export type InputSize = 'sm' | 'md' | 'lg';
+export type InputRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    variant?: InputVariant;
+    size?: InputSize;
+    radius?: InputRadius;
+    leftElement?: ReactNode;
+    rightElement?: ReactNode;
+    error?: boolean | string;
+    fullWidth?: boolean;
 }
-export declare function Input({ className, ...props }: InputProps): import("react").JSX.Element;
+export declare function Input({ variant, size, radius, leftElement, rightElement, error, fullWidth, className, disabled, ...props }: InputProps): import("react").JSX.Element;

package/dist/components/progress.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'react';
+export type ProgressVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'destructive' | 'gradient';
+export type ProgressSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
+    value?: number;
+    max?: number;
+    variant?: ProgressVariant;
+    size?: ProgressSize;
+    striped?: boolean;
+    animated?: boolean;
+    showLabel?: boolean;
+    label?: string;
+}
+export declare function Progress({ value, max, variant, size, striped, animated, showLabel, label, className, ...props }: ProgressProps): import("react").JSX.Element;

package/dist/components/select.d.ts

@@ -1,4 +1,12 @@
-import type { SelectHTMLAttributes } from 'react';
-export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+import type { ReactNode, SelectHTMLAttributes } from 'react';
+export type SelectVariant = 'default' | 'filled';
+export type SelectSize = 'sm' | 'md' | 'lg';
+export type SelectRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
+export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+    variant?: SelectVariant;
+    size?: SelectSize;
+    radius?: SelectRadius;
+    error?: boolean | string;
+    icon?: ReactNode;
 }
-export declare function Select({ className, children, ...props }: SelectProps): import("react").JSX.Element;
+export declare function Select({ variant, size, radius, error, icon, className, children, disabled, ...props }: SelectProps): import("react").JSX.Element;

package/dist/components/skeleton.d.ts

@@ -1,5 +1,8 @@
 import type { HTMLAttributes } from 'react';
+export type SkeletonRounded = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+export type SkeletonAnimation = 'pulse' | 'shimmer' | 'none';
 export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
-    rounded?: 'sm' | 'md' | 'lg' | 'full';
+    rounded?: SkeletonRounded;
+    animation?: SkeletonAnimation;
 }
-export declare function Skeleton({ className, rounded, ...props }: SkeletonProps): import("react").JSX.Element;
+export declare function Skeleton({ className, rounded, animation, ...props }: SkeletonProps): import("react").JSX.Element;

package/dist/components/switch.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+export type SwitchSize = 'sm' | 'md' | 'lg';
+export interface SwitchProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    size?: SwitchSize;
+    color?: string;
+    checkedIcon?: ReactNode;
+    uncheckedIcon?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+    id?: string;
+    'aria-label'?: string;
+}
+export declare function Switch({ checked, defaultChecked, onCheckedChange, size, color, checkedIcon, uncheckedIcon, disabled, className, id, 'aria-label': ariaLabel, }: SwitchProps): import("react").JSX.Element;

package/dist/components/tabs.d.ts

@@ -2,11 +2,18 @@ import { type ReactNode } from 'react';
 export type TabItem = {
     id: string;
     label: string;
+    icon?: ReactNode;
+    badge?: ReactNode;
     content: ReactNode;
 };
+export type TabsVariant = 'pills' | 'underline' | 'bordered' | 'segmented';
+export type TabsSize = 'sm' | 'md' | 'lg';
 export interface TabsProps {
     items: TabItem[];
     defaultTab?: string;
+    variant?: TabsVariant;
+    size?: TabsSize;
+    fullWidth?: boolean;
     className?: string;
 }
-export declare function Tabs({ items, defaultTab, className }: TabsProps): import("react").JSX.Element;
+export declare function Tabs({ items, defaultTab, variant, size, fullWidth, className, }: TabsProps): import("react").JSX.Element;

package/dist/components/textarea.d.ts

@@ -1,4 +1,13 @@
 import type { TextareaHTMLAttributes } from 'react';
+export type TextareaVariant = 'default' | 'filled';
+export type TextareaSize = 'sm' | 'md' | 'lg';
+export type TextareaRadius = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+export type TextareaResize = 'none' | 'vertical' | 'horizontal' | 'both';
 export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    variant?: TextareaVariant;
+    size?: TextareaSize;
+    radius?: TextareaRadius;
+    resize?: TextareaResize;
+    error?: boolean | string;
 }
-export declare function Textarea({ className, ...props }: TextareaProps): import("react").JSX.Element;
+export declare function Textarea({ variant, size, radius, resize, error, className, disabled, ...props }: TextareaProps): import("react").JSX.Element;

package/dist/components/toast.d.ts

@@ -0,0 +1,19 @@
+export interface ToastMessage {
+    id: string;
+    title?: string;
+    message: string;
+    type?: 'success' | 'error' | 'info' | 'warning';
+    duration?: number;
+}
+export declare const toast: {
+    show(message: string, options?: Partial<Omit<ToastMessage, "id" | "message">>): string;
+    success(message: string, title?: string): string;
+    error(message: string, title?: string): string;
+    info(message: string, title?: string): string;
+    warning(message: string, title?: string): string;
+    dismiss(id: string): void;
+};
+export type ToasterPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'top-center' | 'bottom-center';
+export declare function Toaster({ position }: {
+    position?: ToasterPosition;
+}): import("react").ReactPortal | null;

package/dist/components/tooltip.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from 'react';
+export type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
+export type TooltipTheme = 'dark' | 'light' | 'primary';
+export interface TooltipProps {
+    content: ReactNode;
+    children: ReactNode;
+    side?: TooltipSide;
+    position?: TooltipSide;
+    theme?: TooltipTheme;
+    arrow?: boolean;
+    delay?: number;
+    className?: string;
+}
+export declare function Tooltip({ content, children, side, position, theme, arrow, delay, className, }: TooltipProps): import("react").JSX.Element;