@stackvibe-studio/ui 0.0.0-stage → 0.1.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/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,8 @@
+import type { ButtonHTMLAttributes } from 'react';
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'outline';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+}
+export declare function Button({ variant, size, className, ...props }: ButtonProps): import("react").JSX.Element;

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

@@ -0,0 +1,4 @@
+export * from './badge';
+export * from './button';
+export * from './card';
+export * from './input';

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

@@ -0,0 +1,131 @@
+"use strict";
+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, {
+  Badge: () => Badge,
+  Button: () => Button,
+  Card: () => Card,
+  Input: () => Input,
+  cx: () => cx,
+  themeTokens: () => themeTokens
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/badge.tsx
+var import_jsx_runtime = 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)(
+    "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_runtime2 = require("react/jsx-runtime");
+var variantClasses = {
+  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 = {
+  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(" ")
+    }
+  );
+}
+
+// src/components/card.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Card({ as: Component = "div", className = "", ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.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/input.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function Input({ className = "", ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.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/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 = {
+  Badge,
+  Button,
+  Card,
+  Input,
+  cx,
+  themeTokens
+});

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export * from './components/badge';
+export * from './components/button';
+export * from './components/card';
+export * from './components/input';
+export * from './tokens';

package/dist/index.js

@@ -0,0 +1,99 @@
+// src/components/badge.tsx
+import { jsx } 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(
+    "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 jsx2 } from "react/jsx-runtime";
+var variantClasses = {
+  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 = {
+  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(" ")
+    }
+  );
+}
+
+// src/components/card.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Card({ as: Component = "div", className = "", ...props }) {
+  return /* @__PURE__ */ jsx3(
+    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/input.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function Input({ className = "", ...props }) {
+  return /* @__PURE__ */ jsx4(
+    "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/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 {
+  Badge,
+  Button,
+  Card,
+  Input,
+  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.1.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"
+  }
 }

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-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.