@stackvibe-studio/ui 0.1.0 → 0.3.0

package/README.md

@@ -0,0 +1,66 @@
+# @stackvibe-studio/ui
+
+> Core accessible UI component library for StackVibe UI. Built for React 19, Tailwind CSS v4, and modern design systems.
+
+[![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)
+
+## Installation
+
+```bash
+npm install @stackvibe-studio/ui
+# or
+pnpm add @stackvibe-studio/ui
+```
+
+## Features
+
+- **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.
+
+## Usage
+
+```tsx
+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 (
+    <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
+
+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/alert.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'react';
+export type AlertVariant = 'info' | 'success' | 'warning' | 'danger';
+export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
+    title?: string;
+    variant?: AlertVariant;
+}
+export declare function Alert({ title, variant, className, children, ...props }: AlertProps): import("react").JSX.Element;

package/dist/components/avatar.d.ts

@@ -0,0 +1,6 @@
+import type { ImgHTMLAttributes } from 'react';
+export interface AvatarProps extends ImgHTMLAttributes<HTMLImageElement> {
+    fallback?: string;
+    size?: 'sm' | 'md' | 'lg';
+}
+export declare function Avatar({ src, alt, fallback, size, className, ...props }: AvatarProps): import("react").JSX.Element;

package/dist/components/button.d.ts

@@ -1,8 +1,19 @@
-import type { ButtonHTMLAttributes } from 'react';
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
 export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'outline';
 export type ButtonSize = 'sm' | 'md' | 'lg';
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+interface BaseButtonProps {
     variant?: ButtonVariant;
     size?: ButtonSize;
+    className?: string;
 }
-export declare function Button({ variant, size, className, ...props }: ButtonProps): import("react").JSX.Element;
+type ButtonAsButtonProps = BaseButtonProps & ButtonHTMLAttributes<HTMLButtonElement> & {
+    as?: 'button';
+    href?: never;
+};
+type ButtonAsAnchorProps = BaseButtonProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'type'> & {
+    as: 'a';
+    href?: string;
+};
+export type ButtonProps = ButtonAsButtonProps | ButtonAsAnchorProps;
+export declare function Button(props: ButtonProps): import("react").JSX.Element;
+export {};

package/dist/components/checkbox.d.ts

@@ -0,0 +1,4 @@
+import type { InputHTMLAttributes } from 'react';
+export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
+}
+export declare function Checkbox({ className, ...props }: CheckboxProps): 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/index.d.ts

@@ -1,4 +1,11 @@
+export * from './alert';
+export * from './avatar';
 export * from './badge';
 export * from './button';
 export * from './card';
+export * from './checkbox';
 export * from './input';
+export * from './select';
+export * from './skeleton';
+export * from './tabs';
+export * from './textarea';

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

@@ -0,0 +1,4 @@
+import type { SelectHTMLAttributes } from 'react';
+export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+}
+export declare function Select({ className, children, ...props }: SelectProps): import("react").JSX.Element;

package/dist/components/skeleton.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'react';
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    rounded?: 'sm' | 'md' | 'lg' | 'full';
+}
+export declare function Skeleton({ className, rounded, ...props }: SkeletonProps): 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/tabs.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react';
+export type TabItem = {
+    id: string;
+    label: string;
+    content: ReactNode;
+};
+export interface TabsProps {
+    items: TabItem[];
+    defaultTab?: string;
+    className?: string;
+}
+export declare function Tabs({ items, defaultTab, className }: TabsProps): import("react").JSX.Element;

package/dist/components/textarea.d.ts

@@ -0,0 +1,4 @@
+import type { TextareaHTMLAttributes } from 'react';
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+}
+export declare function Textarea({ className, ...props }: TextareaProps): 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;