pixelplay 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,18 @@
+# Changelog
+
+All notable changes to **PixelPlay UI** are documented here.
+
+This project adheres to [Semantic Versioning](https://semver.org/).
+
+---
+
+## [1.0.0] — 2026-03-30
+
+### Added
+
+- Initial public release of PixelPlay UI
+- Base components: `Button`, `ButtonGroup`, `Input`, `Textarea`, `Badge`, `BadgeGroup`, `Tag`, `Card`, `Spinner`, `Avatar`, `SocialButton`, `StoreButton`, `DropdownMenu`, `Select`, `Toggle`, `Checkbox`, `CheckboxGroup`, `Progress`, `CircularProgress`, `Slider`, `Tooltip`
+- Application components: `Modal`, `Chart`, `Pagination`, `Messaging`, `DataTable`, `Tabs`, `Breadcrumb`, `Alert`, `Toast`, `DatePicker`, `Calendar`, `FileTypeIcon`, `FileUpload`
+- Full TypeScript type definitions
+- Tailwind CSS 4 theme token system with light/dark mode support
+- Three built-in themes: Rosewood, Botanica, Inkwell

package/README.md

@@ -0,0 +1,91 @@
+# PixelPlay UI
+
+> A scalable React component library with production-ready components, layouts, and themes for SaaS products.
+
+Built by [Dennis Isaac](https://dennisisaac.com) · [Live Docs](https://dennisisaac.com/ui-kit)
+
+---
+
+## Installation
+
+```bash
+npm install pixelplay
+```
+
+```bash
+yarn add pixelplay
+```
+
+```bash
+pnpm add pixelplay
+```
+
+## Requirements
+
+- React 18+
+- Tailwind CSS 4+
+- TypeScript 5+ (recommended)
+
+## Quick Start
+
+```tsx
+import { Button, Badge, Avatar, Input } from "pixelplay";
+
+export function MyComponent() {
+  return (
+    <div>
+      <Avatar name="Dennis Isaac" size="md" />
+      <Badge color="purple">New</Badge>
+      <Button color="primary" variant="solid">Get Started</Button>
+    </div>
+  );
+}
+```
+
+## Theme Setup
+
+Add the PixelPlay theme tokens to your global CSS:
+
+```css
+@import "pixelplay/styles";
+
+:root {
+  /* Override theme tokens as needed */
+  --primary: oklch(55% 0.22 264);
+}
+```
+
+## Components
+
+| Component | Description |
+|-----------|-------------|
+| `Button` | Versatile button with variants, sizes, and states |
+| `Input` | Text input with labels, validation, and add-ons |
+| `Badge` | Status and label badges with colors |
+| `Avatar` | User avatars with initials, images, and status |
+| `Card` | Content container with header, body, and footer |
+| `Toggle` | Boolean toggle switch |
+| `Checkbox` | Checkbox with variants and groups |
+| `Select` | Dropdown select with search |
+| `Slider` | Range slider with dual handles |
+| `Tooltip` | Contextual tooltips |
+| `Modal` | Dialog modals |
+| `Spinner` | Loading indicators |
+| `Tag` | Dismissable tags |
+| `Progress` | Progress bars and circular indicators |
+
+[View all components →](https://dennisisaac.com/ui-kit)
+
+## Versioning
+
+PixelPlay UI follows [Semantic Versioning](https://semver.org/):
+
+- **Patch** (`x.x.1`) — bug fixes and minor adjustments
+- **Minor** (`x.1.0`) — new components, non-breaking additions
+- **Major** (`1.0.0`) — breaking API changes
+
+See [CHANGELOG.md](./CHANGELOG.md) for the full release history.
+
+## License
+
+MIT © [Dennis Isaac](https://dennisisaac.com)

package/dist/index.d.mts

@@ -0,0 +1,3 @@
+declare const PIXELPLAY_VERSION = "1.0.0";
+
+export { PIXELPLAY_VERSION };

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+declare const PIXELPLAY_VERSION = "1.0.0";
+
+export { PIXELPLAY_VERSION };

package/dist/index.js

@@ -0,0 +1,30 @@
+"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, {
+  PIXELPLAY_VERSION: () => PIXELPLAY_VERSION
+});
+module.exports = __toCommonJS(index_exports);
+var PIXELPLAY_VERSION = "1.0.0";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PIXELPLAY_VERSION
+});

package/dist/index.mjs

@@ -0,0 +1,5 @@
+// src/index.ts
+var PIXELPLAY_VERSION = "1.0.0";
+export {
+  PIXELPLAY_VERSION
+};

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "pixelplay",
+  "version": "1.0.0",
+  "description": "PixelPlay UI — A scalable React component library with production-ready components, layouts, and themes for SaaS products.",
+  "keywords": [
+    "react",
+    "ui",
+    "components",
+    "design-system",
+    "tailwindcss",
+    "typescript",
+    "saas"
+  ],
+  "author": "Dennis Isaac",
+  "license": "MIT",
+  "homepage": "https://dennisisaac.com/ui-kit",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/iamdennisisaac/dennis-website-gravity.git",
+    "directory": "packages/pixelplay"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --external react --external react-dom",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --external react --external react-dom --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "tailwindcss": ">=4.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}