@toriistudio/v0-playground 0.1.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Origin UI
+
+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

@@ -0,0 +1,79 @@
+# ✨ V0 Playground ✨
+
+A lightweight, interactive playground for rapidly testing and showcasing your React components with built-in Tailwind CSS support and live prop controls.
+
+Perfect for prototyping components, sharing usage examples, or building your own version of tools like [v0.dev](https://v0.dev).
+
+---
+
+## ✅ Features
+
+- ⚡️ Minimal setup, works out of the box with Tailwind
+- 🎛️ Live-editable props using `useControls`
+- 🧩 Fully typed, headless playground architecture
+- 🌓 Dark mode compatible
+- 🛠️ Easily themeable with Tailwind and tokens
+- 🧪 Great for testing component variants in isolation
+
+---
+
+## 🚀 Installation
+
+Install the package and its peer dependencies:
+
+```bash
+npm install @toriistudio/v0-playground
+# or
+yarn add @toriistudio/v0-playground
+```
+
+## 🧩 Tailwind Setup
+
+Make sure your `tailwind.config.ts` includes the preset and relevant content paths:
+
+```ts
+import preset from "@toriistudio/v0-playground/preset";
+
+export default {
+  presets: [preset],
+  content: [
+    "./src/**/*.{ts,tsx}",
+    "./node_modules/@toriistudio/**/*.{js,ts,jsx,tsx}", // 👈 Required
+  ],
+};
+```
+
+## 🧪 Usage
+
+Use `Playground` to wrap any component and control props with `useControls`:
+
+```ts
+import { Playground, useControls } from "@toriistudio/v0-playground";
+
+function MyComponent() {
+  const { label } = useControls({
+    label: { type: "string", value: "Click me" },
+  });
+
+  return <button>{label}</button>;
+}
+
+export default function App() {
+  return (
+    <Playground>
+      <MyComponent />
+    </Playground>
+  );
+}
+```
+
+## 💡 Example Use Cases
+
+- Build custom component sandboxes
+- Share interactive component demos
+- Prototype interfaces quickly with real data
+- Debug and test variants visually
+
+## 🤙 License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,45 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React, { ReactNode } from 'react';
+
+declare function Playground({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+type ControlType = {
+    type: "boolean";
+    value: boolean;
+} | {
+    type: "number";
+    value: number;
+    min?: number;
+    max?: number;
+    step?: number;
+} | {
+    type: "string";
+    value: string;
+} | {
+    type: "color";
+    value: string;
+} | {
+    type: "select";
+    value: string;
+    options: string[];
+} | {
+    type: "button";
+    onClick?: () => void;
+    label?: string;
+    render?: () => React.ReactNode;
+};
+type ControlsSchema = Record<string, ControlType>;
+declare const useControls: <T extends ControlsSchema>(schema: T, options?: {
+    componentName?: string;
+}) => { [K in keyof T]: T[K] extends {
+    value: infer V;
+} ? V : never; } & {
+    controls: Record<string, any>;
+    schema: ControlsSchema;
+    setValue: (key: string, value: any) => void;
+    jsx: () => string;
+};
+
+export { type ControlType, type ControlsSchema, Playground, useControls };

package/dist/index.d.ts

@@ -0,0 +1,45 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React, { ReactNode } from 'react';
+
+declare function Playground({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+type ControlType = {
+    type: "boolean";
+    value: boolean;
+} | {
+    type: "number";
+    value: number;
+    min?: number;
+    max?: number;
+    step?: number;
+} | {
+    type: "string";
+    value: string;
+} | {
+    type: "color";
+    value: string;
+} | {
+    type: "select";
+    value: string;
+    options: string[];
+} | {
+    type: "button";
+    onClick?: () => void;
+    label?: string;
+    render?: () => React.ReactNode;
+};
+type ControlsSchema = Record<string, ControlType>;
+declare const useControls: <T extends ControlsSchema>(schema: T, options?: {
+    componentName?: string;
+}) => { [K in keyof T]: T[K] extends {
+    value: infer V;
+} ? V : never; } & {
+    controls: Record<string, any>;
+    schema: ControlsSchema;
+    setValue: (key: string, value: any) => void;
+    jsx: () => string;
+};
+
+export { type ControlType, type ControlsSchema, Playground, useControls };