@stackvibe-studio/ui 0.1.0 → 0.2.0

package/README.md

@@ -0,0 +1,55 @@
+# @stackvibe-studio/ui
+
+Core React component library for product teams building premium SaaS experiences.
+
+## Highlights
+
+- 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
+
+```bash
+npm install @stackvibe-studio/ui
+```
+
+## Included components
+
+- Button
+- Badge
+- Card
+- Input
+- Textarea
+- Select
+- Checkbox
+- Alert
+- Avatar
+- Tabs
+- Skeleton
+
+## Example
+
+```tsx
+import { Button, Card, Tabs } from '@stackvibe-studio/ui';
+
+export function Example() {
+  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>
+  );
+}
+```
+
+## Documentation
+
+- Docs: https://stackvibe-studio.github.io/stackvibe-ui/
+- Playground: https://stackvibe-studio.github.io/stackvibe-ui/playground/

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/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/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/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/index.cjs

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -20,24 +21,79 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  Alert: () => Alert,
+  Avatar: () => Avatar,
   Badge: () => Badge,
   Button: () => Button,
   Card: () => Card,
+  Checkbox: () => Checkbox,
   Input: () => Input,
+  Select: () => Select,
+  Skeleton: () => Skeleton,
+  Tabs: () => Tabs,
+  Textarea: () => Textarea,
   cx: () => cx,
   themeTokens: () => themeTokens
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/components/badge.tsx
+// src/components/alert.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+var variantClasses = {
+  info: "border-cyan-500/40 bg-cyan-500/10 text-cyan-50",
+  success: "border-emerald-500/40 bg-emerald-500/10 text-emerald-50",
+  warning: "border-amber-500/40 bg-amber-500/10 text-amber-50",
+  danger: "border-rose-500/40 bg-rose-500/10 text-rose-50"
+};
+function Alert({ title, variant = "info", className = "", children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ...props,
+      className: ["rounded-2xl border p-4 text-sm", variantClasses[variant], className].join(" "),
+      role: "alert",
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mb-1 font-medium", children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children })
+      ]
+    }
+  );
+}
+
+// src/components/avatar.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var sizeClasses = {
+  sm: "h-9 w-9 text-xs",
+  md: "h-12 w-12 text-sm",
+  lg: "h-16 w-16 text-base"
+};
+function Avatar({ src, alt = "avatar", fallback = "SV", size = "md", className = "", ...props }) {
+  return src ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "img",
+    {
+      ...props,
+      src,
+      alt,
+      className: ["rounded-full object-cover ring-1 ring-white/10", sizeClasses[size], className].join(" ")
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      className: ["flex items-center justify-center rounded-full bg-violet-500/20 font-semibold text-violet-100 ring-1 ring-violet-400/20", sizeClasses[size], className].join(" "),
+      children: fallback
+    }
+  );
+}
+
+// src/components/badge.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var variants = {
   primary: "bg-violet-500/20 text-violet-200 ring-1 ring-violet-400/20",
   secondary: "bg-cyan-500/15 text-cyan-200 ring-1 ring-cyan-400/20",
   outline: "bg-transparent text-slate-200 ring-1 ring-white/10"
 };
 function Badge({ variant = "primary", className = "", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "span",
     {
       ...props,
@@ -47,37 +103,38 @@ function Badge({ variant = "primary", className = "", ...props }) {
 }
 
 // src/components/button.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var variantClasses = {
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var variantClasses2 = {
   primary: "bg-violet-500 text-white hover:bg-violet-400",
   secondary: "bg-cyan-500 text-slate-950 hover:bg-cyan-400",
   ghost: "bg-white/5 text-white hover:bg-white/10",
   outline: "border border-white/15 bg-transparent text-white hover:bg-white/5"
 };
-var sizeClasses = {
+var sizeClasses2 = {
   sm: "px-3 py-1.5 text-sm",
   md: "px-4 py-2 text-sm",
   lg: "px-5 py-3 text-base"
 };
-function Button({ variant = "primary", size = "md", className = "", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "button",
-    {
-      ...props,
-      className: [
-        "inline-flex items-center justify-center rounded-xl font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-400",
-        variantClasses[variant],
-        sizeClasses[size],
-        className
-      ].join(" ")
-    }
-  );
+function Button(props) {
+  const { as = "button", variant = "primary", size = "md", className = "", ...rest } = props;
+  const commonClassName = [
+    "inline-flex items-center justify-center rounded-xl font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-400",
+    variantClasses2[variant],
+    sizeClasses2[size],
+    className
+  ].join(" ");
+  if (as === "a") {
+    const { href, ...anchorProps } = rest;
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("a", { ...anchorProps, href, className: commonClassName });
+  }
+  const { type = "button", ...buttonProps } = rest;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { ...buttonProps, type, className: commonClassName });
 }
 
 // src/components/card.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function Card({ as: Component = "div", className = "", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     Component,
     {
       ...props,
@@ -89,10 +146,23 @@ function Card({ as: Component = "div", className = "", ...props }) {
   );
 }
 
+// src/components/checkbox.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function Checkbox({ className = "", ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "input",
+    {
+      ...props,
+      type: "checkbox",
+      className: ["h-4 w-4 rounded border border-white/20 bg-slate-900 text-violet-500 focus:ring-violet-400/40", className].join(" ")
+    }
+  );
+}
+
 // src/components/input.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function Input({ className = "", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "input",
     {
       ...props,
@@ -104,6 +174,81 @@ function Input({ className = "", ...props }) {
   );
 }
 
+// src/components/select.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function Select({ className = "", children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "select",
+    {
+      ...props,
+      className: [
+        "w-full rounded-xl border border-white/10 bg-slate-900 px-3 py-2 text-sm text-white focus:border-violet-400 focus:outline-none focus:ring-2 focus:ring-violet-400/30",
+        className
+      ].join(" "),
+      children
+    }
+  );
+}
+
+// src/components/skeleton.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var roundedClasses = {
+  sm: "rounded-md",
+  md: "rounded-xl",
+  lg: "rounded-2xl",
+  full: "rounded-full"
+};
+function Skeleton({ className = "", rounded = "md", ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    {
+      ...props,
+      className: ["animate-pulse bg-slate-700/70", roundedClasses[rounded], className].join(" "),
+      "aria-hidden": "true"
+    }
+  );
+}
+
+// src/components/tabs.tsx
+var import_react = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function Tabs({ items, defaultTab, className = "" }) {
+  const initialTab = defaultTab ?? items[0]?.id ?? "";
+  const [activeTab, setActiveTab] = (0, import_react.useState)(initialTab);
+  const activeItem = items.find((item) => item.id === activeTab) ?? items[0];
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mb-4 flex flex-wrap gap-2", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: () => setActiveTab(item.id),
+        className: [
+          "rounded-full px-3 py-1.5 text-sm transition",
+          item.id === activeItem?.id ? "bg-violet-500 text-white shadow-lg shadow-violet-500/20" : "bg-slate-800 text-slate-300 hover:bg-slate-700 hover:text-white"
+        ].join(" "),
+        children: item.label
+      },
+      item.id
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "rounded-2xl border border-white/10 bg-slate-950/60 p-4 text-sm text-slate-200", children: activeItem?.content })
+  ] });
+}
+
+// src/components/textarea.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function Textarea({ className = "", ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "textarea",
+    {
+      ...props,
+      className: [
+        "w-full rounded-xl border border-white/10 bg-slate-900 px-3 py-2 text-sm text-white placeholder:text-slate-400 focus:border-violet-400 focus:outline-none focus:ring-2 focus:ring-violet-400/30",
+        className
+      ].join(" ")
+    }
+  );
+}
+
 // src/tokens/index.ts
 var themeTokens = {
   colors: {
@@ -122,10 +267,17 @@ var themeTokens = {
 var cx = (...classes) => classes.filter(Boolean).join(" ");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Alert,
+  Avatar,
   Badge,
   Button,
   Card,
+  Checkbox,
   Input,
+  Select,
+  Skeleton,
+  Tabs,
+  Textarea,
   cx,
   themeTokens
 });

package/dist/index.d.ts

@@ -1,5 +1,12 @@
+export * from './components/alert';
+export * from './components/avatar';
 export * from './components/badge';
 export * from './components/button';
 export * from './components/card';
+export * from './components/checkbox';
 export * from './components/input';
+export * from './components/select';
+export * from './components/skeleton';
+export * from './components/tabs';
+export * from './components/textarea';
 export * from './tokens';

package/dist/index.js

@@ -1,12 +1,62 @@
+"use client";
+
+// src/components/alert.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var variantClasses = {
+  info: "border-cyan-500/40 bg-cyan-500/10 text-cyan-50",
+  success: "border-emerald-500/40 bg-emerald-500/10 text-emerald-50",
+  warning: "border-amber-500/40 bg-amber-500/10 text-amber-50",
+  danger: "border-rose-500/40 bg-rose-500/10 text-rose-50"
+};
+function Alert({ title, variant = "info", className = "", children, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      className: ["rounded-2xl border p-4 text-sm", variantClasses[variant], className].join(" "),
+      role: "alert",
+      children: [
+        title ? /* @__PURE__ */ jsx("p", { className: "mb-1 font-medium", children: title }) : null,
+        /* @__PURE__ */ jsx("div", { children })
+      ]
+    }
+  );
+}
+
+// src/components/avatar.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var sizeClasses = {
+  sm: "h-9 w-9 text-xs",
+  md: "h-12 w-12 text-sm",
+  lg: "h-16 w-16 text-base"
+};
+function Avatar({ src, alt = "avatar", fallback = "SV", size = "md", className = "", ...props }) {
+  return src ? /* @__PURE__ */ jsx2(
+    "img",
+    {
+      ...props,
+      src,
+      alt,
+      className: ["rounded-full object-cover ring-1 ring-white/10", sizeClasses[size], className].join(" ")
+    }
+  ) : /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: ["flex items-center justify-center rounded-full bg-violet-500/20 font-semibold text-violet-100 ring-1 ring-violet-400/20", sizeClasses[size], className].join(" "),
+      children: fallback
+    }
+  );
+}
+
 // src/components/badge.tsx
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var variants = {
   primary: "bg-violet-500/20 text-violet-200 ring-1 ring-violet-400/20",
   secondary: "bg-cyan-500/15 text-cyan-200 ring-1 ring-cyan-400/20",
   outline: "bg-transparent text-slate-200 ring-1 ring-white/10"
 };
 function Badge({ variant = "primary", className = "", ...props }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx3(
     "span",
     {
       ...props,
@@ -16,37 +66,38 @@ function Badge({ variant = "primary", className = "", ...props }) {
 }
 
 // src/components/button.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var variantClasses = {
+import { jsx as jsx4 } from "react/jsx-runtime";
+var variantClasses2 = {
   primary: "bg-violet-500 text-white hover:bg-violet-400",
   secondary: "bg-cyan-500 text-slate-950 hover:bg-cyan-400",
   ghost: "bg-white/5 text-white hover:bg-white/10",
   outline: "border border-white/15 bg-transparent text-white hover:bg-white/5"
 };
-var sizeClasses = {
+var sizeClasses2 = {
   sm: "px-3 py-1.5 text-sm",
   md: "px-4 py-2 text-sm",
   lg: "px-5 py-3 text-base"
 };
-function Button({ variant = "primary", size = "md", className = "", ...props }) {
-  return /* @__PURE__ */ jsx2(
-    "button",
-    {
-      ...props,
-      className: [
-        "inline-flex items-center justify-center rounded-xl font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-400",
-        variantClasses[variant],
-        sizeClasses[size],
-        className
-      ].join(" ")
-    }
-  );
+function Button(props) {
+  const { as = "button", variant = "primary", size = "md", className = "", ...rest } = props;
+  const commonClassName = [
+    "inline-flex items-center justify-center rounded-xl font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-400",
+    variantClasses2[variant],
+    sizeClasses2[size],
+    className
+  ].join(" ");
+  if (as === "a") {
+    const { href, ...anchorProps } = rest;
+    return /* @__PURE__ */ jsx4("a", { ...anchorProps, href, className: commonClassName });
+  }
+  const { type = "button", ...buttonProps } = rest;
+  return /* @__PURE__ */ jsx4("button", { ...buttonProps, type, className: commonClassName });
 }
 
 // src/components/card.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function Card({ as: Component = "div", className = "", ...props }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx5(
     Component,
     {
       ...props,
@@ -58,10 +109,23 @@ function Card({ as: Component = "div", className = "", ...props }) {
   );
 }
 
+// src/components/checkbox.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function Checkbox({ className = "", ...props }) {
+  return /* @__PURE__ */ jsx6(
+    "input",
+    {
+      ...props,
+      type: "checkbox",
+      className: ["h-4 w-4 rounded border border-white/20 bg-slate-900 text-violet-500 focus:ring-violet-400/40", className].join(" ")
+    }
+  );
+}
+
 // src/components/input.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function Input({ className = "", ...props }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx7(
     "input",
     {
       ...props,
@@ -73,6 +137,81 @@ function Input({ className = "", ...props }) {
   );
 }
 
+// src/components/select.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function Select({ className = "", children, ...props }) {
+  return /* @__PURE__ */ jsx8(
+    "select",
+    {
+      ...props,
+      className: [
+        "w-full rounded-xl border border-white/10 bg-slate-900 px-3 py-2 text-sm text-white focus:border-violet-400 focus:outline-none focus:ring-2 focus:ring-violet-400/30",
+        className
+      ].join(" "),
+      children
+    }
+  );
+}
+
+// src/components/skeleton.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var roundedClasses = {
+  sm: "rounded-md",
+  md: "rounded-xl",
+  lg: "rounded-2xl",
+  full: "rounded-full"
+};
+function Skeleton({ className = "", rounded = "md", ...props }) {
+  return /* @__PURE__ */ jsx9(
+    "div",
+    {
+      ...props,
+      className: ["animate-pulse bg-slate-700/70", roundedClasses[rounded], className].join(" "),
+      "aria-hidden": "true"
+    }
+  );
+}
+
+// src/components/tabs.tsx
+import { useState } from "react";
+import { jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
+function Tabs({ items, defaultTab, className = "" }) {
+  const initialTab = defaultTab ?? items[0]?.id ?? "";
+  const [activeTab, setActiveTab] = useState(initialTab);
+  const activeItem = items.find((item) => item.id === activeTab) ?? items[0];
+  return /* @__PURE__ */ jsxs2("div", { className, children: [
+    /* @__PURE__ */ jsx10("div", { className: "mb-4 flex flex-wrap gap-2", children: items.map((item) => /* @__PURE__ */ jsx10(
+      "button",
+      {
+        type: "button",
+        onClick: () => setActiveTab(item.id),
+        className: [
+          "rounded-full px-3 py-1.5 text-sm transition",
+          item.id === activeItem?.id ? "bg-violet-500 text-white shadow-lg shadow-violet-500/20" : "bg-slate-800 text-slate-300 hover:bg-slate-700 hover:text-white"
+        ].join(" "),
+        children: item.label
+      },
+      item.id
+    )) }),
+    /* @__PURE__ */ jsx10("div", { className: "rounded-2xl border border-white/10 bg-slate-950/60 p-4 text-sm text-slate-200", children: activeItem?.content })
+  ] });
+}
+
+// src/components/textarea.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+function Textarea({ className = "", ...props }) {
+  return /* @__PURE__ */ jsx11(
+    "textarea",
+    {
+      ...props,
+      className: [
+        "w-full rounded-xl border border-white/10 bg-slate-900 px-3 py-2 text-sm text-white placeholder:text-slate-400 focus:border-violet-400 focus:outline-none focus:ring-2 focus:ring-violet-400/30",
+        className
+      ].join(" ")
+    }
+  );
+}
+
 // src/tokens/index.ts
 var themeTokens = {
   colors: {
@@ -90,10 +229,17 @@ var themeTokens = {
 };
 var cx = (...classes) => classes.filter(Boolean).join(" ");
 export {
+  Alert,
+  Avatar,
   Badge,
   Button,
   Card,
+  Checkbox,
   Input,
+  Select,
+  Skeleton,
+  Tabs,
+  Textarea,
   cx,
   themeTokens
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackvibe-studio/ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "description": "Core React component library for StackVibe UI.",
   "repository": {