@stackvibe-studio/ui 0.2.0 → 0.3.0

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,13 @@
+import { type ReactNode } from 'react';
+export interface AccordionItemData {
+    id: string;
+    title: ReactNode;
+    content: ReactNode;
+}
+export interface AccordionProps {
+    items: AccordionItemData[];
+    type?: 'single' | 'multiple';
+    defaultOpen?: string[];
+    className?: string;
+}
+export declare function Accordion({ items, type, defaultOpen, className, }: AccordionProps): import("react").JSX.Element;

package/dist/components/button.d.ts

@@ -12,7 +12,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/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").JSX.Element | 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").JSX.Element | 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/progress.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'react';
+export interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
+    value?: number;
+    max?: number;
+    variant?: 'primary' | 'secondary' | 'success' | 'warning';
+    showLabel?: boolean;
+}
+export declare function Progress({ value, max, variant, showLabel, className, ...props }: ProgressProps): import("react").JSX.Element;

package/dist/components/switch.d.ts

@@ -0,0 +1,10 @@
+export interface SwitchProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    className?: string;
+    id?: string;
+    'aria-label'?: string;
+}
+export declare function Switch({ checked, defaultChecked, onCheckedChange, disabled, className, id, 'aria-label': ariaLabel, }: SwitchProps): import("react").JSX.Element;

package/dist/components/toast.d.ts

@@ -0,0 +1,15 @@
+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;
+    dismiss(id: string): void;
+};
+export declare function Toaster(): import("react").JSX.Element | null;

package/dist/components/tooltip.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+export interface TooltipProps {
+    content: ReactNode;
+    children: ReactNode;
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    className?: string;
+}
+export declare function Tooltip({ content, children, side, className, }: TooltipProps): import("react").JSX.Element;