@stackvibe-studio/ui 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 StackVibe
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,55 @@
-# Temporary Holding Version
+# @stackvibe-studio/ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+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/badge.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'react';
+export type BadgeVariant = 'primary' | 'secondary' | 'outline';
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    variant?: BadgeVariant;
+}
+export declare function Badge({ variant, className, ...props }: BadgeProps): import("react").JSX.Element;

package/dist/components/button.d.ts

@@ -0,0 +1,19 @@
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'outline';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+interface BaseButtonProps {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    className?: string;
+}
+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/card.d.ts

@@ -0,0 +1,5 @@
+import type { ElementType, HTMLAttributes } from 'react';
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    as?: ElementType;
+}
+export declare function Card({ as: Component, className, ...props }: CardProps): import("react").JSX.Element;

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

@@ -0,0 +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/input.d.ts

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

@@ -0,0 +1,283 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// 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/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_runtime3.jsx)(
+    "span",
+    {
+      ...props,
+      className: ["inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium", variants[variant], className].join(" ")
+    }
+  );
+}
+
+// src/components/button.tsx
+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 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(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_runtime5 = require("react/jsx-runtime");
+function Card({ as: Component = "div", className = "", ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    Component,
+    {
+      ...props,
+      className: [
+        "rounded-2xl border border-white/10 bg-slate-950/50 p-4 shadow-lg shadow-slate-950/20 backdrop-blur-sm",
+        className
+      ].join(" ")
+    }
+  );
+}
+
+// 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_runtime7 = require("react/jsx-runtime");
+function Input({ className = "", ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "input",
+    {
+      ...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/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: {
+    primary: "var(--sv-primary, 139 92 246)",
+    background: "var(--sv-background, 15 23 42)",
+    foreground: "var(--sv-foreground, 248 250 252)",
+    accent: "var(--sv-accent, 34 211 238)"
+  },
+  radius: {
+    sm: "var(--sv-radius-sm, 0.5rem)",
+    md: "var(--sv-radius-md, 0.75rem)",
+    lg: "var(--sv-radius-lg, 1rem)",
+    xl: "var(--sv-radius-xl, 1.25rem)"
+  }
+};
+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

@@ -0,0 +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

@@ -0,0 +1,245 @@
+"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 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__ */ jsx3(
+    "span",
+    {
+      ...props,
+      className: ["inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium", variants[variant], className].join(" ")
+    }
+  );
+}
+
+// src/components/button.tsx
+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 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(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 jsx5 } from "react/jsx-runtime";
+function Card({ as: Component = "div", className = "", ...props }) {
+  return /* @__PURE__ */ jsx5(
+    Component,
+    {
+      ...props,
+      className: [
+        "rounded-2xl border border-white/10 bg-slate-950/50 p-4 shadow-lg shadow-slate-950/20 backdrop-blur-sm",
+        className
+      ].join(" ")
+    }
+  );
+}
+
+// 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 jsx7 } from "react/jsx-runtime";
+function Input({ className = "", ...props }) {
+  return /* @__PURE__ */ jsx7(
+    "input",
+    {
+      ...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/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: {
+    primary: "var(--sv-primary, 139 92 246)",
+    background: "var(--sv-background, 15 23 42)",
+    foreground: "var(--sv-foreground, 248 250 252)",
+    accent: "var(--sv-accent, 34 211 238)"
+  },
+  radius: {
+    sm: "var(--sv-radius-sm, 0.5rem)",
+    md: "var(--sv-radius-md, 0.75rem)",
+    lg: "var(--sv-radius-lg, 1rem)",
+    xl: "var(--sv-radius-xl, 1.25rem)"
+  }
+};
+var cx = (...classes) => classes.filter(Boolean).join(" ");
+export {
+  Alert,
+  Avatar,
+  Badge,
+  Button,
+  Card,
+  Checkbox,
+  Input,
+  Select,
+  Skeleton,
+  Tabs,
+  Textarea,
+  cx,
+  themeTokens
+};

package/dist/tokens/index.d.ts

@@ -0,0 +1,16 @@
+export declare const themeTokens: {
+    colors: {
+        primary: string;
+        background: string;
+        foreground: string;
+        accent: string;
+    };
+    radius: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+};
+declare const cx: (...classes: Array<string | false | undefined | null>) => string;
+export { cx };

package/package.json

@@ -1,6 +1,47 @@
 {
   "name": "@stackvibe-studio/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.0",
+  "type": "module",
+  "description": "Core React component library for StackVibe UI.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/StackVibe-Studio/stackvibe-ui.git"
+  },
+  "homepage": "https://stackvibe-studio.github.io/stackvibe-ui/",
+  "bugs": {
+    "url": "https://github.com/StackVibe-Studio/stackvibe-ui/issues"
+  },
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "tsup": "^8.1.0",
+    "typescript": "^5.7.0"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --clean && tsc --project tsconfig.json --emitDeclarationOnly",
+    "typecheck": "tsc --noEmit"
+  }
 }