pika-ux 1.0.0-beta.1 → 1.0.0-beta.10

package/dist/cli/template-files/vite.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig } from 'vite';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import tailwindcss from '@tailwindcss/vite';
+import Icons from 'unplugin-icons/vite';
+
+// https://vite.dev/config/
+export default defineConfig({
+    plugins: [
+        tailwindcss(),
+        svelte(),
+        Icons({
+            compiler: 'svelte'
+        })
+    ],
+    resolve: {
+        alias: {
+            '$icons/': '~icons/'
+        }
+    }
+});

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "pika-ux",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.10",
   "type": "module",
   "exports": {
-    ".": "./src/index.ts",
-    "./pika/*": "./src/pika/*/index.ts",
-    "./shadcn/*": "./src/shadcn/*/index.ts",
+    "./pika/*": "./src/pika/*",
+    "./shadcn/*": "./src/shadcn/*",
     "./icons/*": "./src/icons/*",
     "./app.css": "./src/app.css",
     "./tools/icon-generator": "./dist/icon-generator/generate-icon-ts-indices.js",
     "./tools/shadcn-postinstall": "./dist/shadcn-postinstall/index.js"
   },
   "bin": {
-    "pika-ux-setup": "./scripts/setup.js",
+    "pikaux": "./dist/cli/index.js",
+    "pika-ux": "./dist/cli/index.js",
     "pika-ux-icons": "./dist/icon-generator/generate-icon-ts-indices.js",
     "pika-ux-normalize": "./dist/shadcn-postinstall/index.js"
   },
@@ -22,44 +22,65 @@
     "scripts/**"
   ],
   "devDependencies": {
-    "@lucide/svelte": "^0.482.0",
+    "@iconify-json/ci": "^1.2.2",
+    "@iconify-json/lucide": "^1.2.68",
+    "@lucide/svelte": "^0.544.0",
     "@sveltejs/vite-plugin-svelte": "^6.2.0",
     "@tailwindcss/typography": "^0.5.16",
     "@tailwindcss/vite": "^4.1.13",
     "@tsconfig/svelte": "^5.0.5",
+    "@types/fs-extra": "^11.0.4",
     "@types/indefinite": "^2.3.4",
+    "@types/inquirer": "^9.0.8",
     "@types/node": "^22.15.17",
+    "@types/semver": "^7.7.0",
+    "bits-ui": "^1.8.0",
+    "embla-carousel-svelte": "^8.6.0",
     "eslint": "^9.26.0",
+    "tailwind-merge": "^3.3.1",
     "tailwind-variants": "^3.1.1",
     "tailwindcss": "^4.1.11",
     "tsup": "^8.4.0",
     "tsx": "^4.19.4",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5.9.2",
+    "unplugin-icons": "^22.4.1",
     "vite": "^7.1.7",
     "@pika/typescript-config": "0.0.0"
   },
   "peerDependencies": {
-    "svelte": "^5.0.0"
+    "@iconify-json/ci": "^1.2.2",
+    "@iconify-json/lucide": "^1.2.68",
+    "@tailwindcss/typography": "^0.5.16",
+    "@tailwindcss/vite": "^4.1.13",
+    "svelte": "^5.39.4",
+    "tailwind-merge": "^3.3.1",
+    "tailwind-variants": "^3.1.1",
+    "tailwindcss": "^4.1.11",
+    "unplugin-icons": "^22.4.1"
   },
   "dependencies": {
     "@cartamd/plugin-code": "^4.2.0",
     "@iconify-json/ci": "^1.2.2",
-    "@iconify-json/lucide": "^1.2.44",
+    "@iconify-json/lucide": "^1.2.68",
     "@internationalized/date": "^3.8.1",
     "@tanstack/table-core": "^8.21.3",
-    "bits-ui": "^2.9.1",
     "carta-md": "^4.11.1",
+    "chalk": "^5.4.1",
     "clsx": "^2.1.1",
+    "commander": "^14.0.0",
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",
+    "fs-extra": "^11.3.0",
+    "glob": "^11.0.2",
     "indefinite": "^2.5.1",
+    "inquirer": "^12.6.3",
     "mode-watcher": "^1.0.7",
+    "ora": "^8.2.0",
     "paneforge": "^1.0.2",
     "plur": "^5.1.0",
-    "svelte-sonner": "^1.0.5",
-    "tailwind-merge": "^3.3.1",
-    "unplugin-icons": "^22.3.0"
+    "semver": "^7.7.2",
+    "svelte-sonner": "^1.0.5"
   },
   "keywords": [
     "pika",

package/readme.md

@@ -2,12 +2,83 @@
 
 UI Components library for the Pika project. This package contains both custom Pika components and shadcn/ui components adapted for Svelte.
 
-## Installation
+## Quick Start: Create a Webcomponent Project
+
+The fastest way to create a new webcomponent project with Pika UX:
+
+```bash
+pnpm dlx pika-ux create my-webcomponent
+```
+
+### Global Installation (Optional)
+
+If you'll be creating multiple projects, you can install globally:
+
+```bash
+# pnpm (recommended)
+pnpm add -g pika-ux
+
+# npm
+npm install -g pika-ux
+
+# yarn
+yarn global add pika-ux
+```
+
+Then use the command:
+
+```bash
+pika-ux create my-webcomponent
+# or use the shorter alias
+pikaux create my-webcomponent
+```
+
+Both `pika-ux` and `pikaux` commands work identically - use whichever you prefer!
+
+## Manual Installation
+
+If you prefer to add Pika UX to an existing project:
+
+1. Install the module
 
 ```bash
-npm install pika-ux
-# or
 pnpm install pika-ux
+# or
+npm install pika-ux
+```
+
+2. Install peer dependencies
+
+```bash
+pnpm install @iconify-json/ci @iconify-json/lucide @tailwindcss/vite tailwindcss unplugin-icons
+```
+
+3. Modify `vite.config.ts`
+
+The config below turns on tailwind and also the unplugin-icons to make icons available.
+
+```ts
+import { defineConfig } from 'vite';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import tailwindcss from '@tailwindcss/vite';
+import Icons from 'unplugin-icons/vite';
+
+// https://vite.dev/config/
+export default defineConfig({
+    plugins: [
+        tailwindcss(),
+        svelte(),
+        Icons({
+            compiler: 'svelte'
+        }) as any // necessary since slightly different versions of vite are in use
+    ],
+    resolve: {
+        alias: {
+            // You have to have this
+            '$icons/': '~icons/'
+        }
+    }
+});
 ```
 
 ## Usage

package/src/App.svelte

@@ -1,13 +1,11 @@
 <script lang="ts">
     import './app.css';
     import Navigation from './lib/docsite/Navigation.svelte';
-
-    // Page components
-    import GettingStarted from './lib/docsite/pages/GettingStarted.svelte';
-    import Icons from './lib/docsite/pages/Icons.svelte';
     import Colors from './lib/docsite/pages/Colors.svelte';
     import Components from './lib/docsite/pages/Components.svelte';
     import Button from './lib/docsite/pages/components/Button.svelte';
+    import GettingStarted from './lib/docsite/pages/GettingStarted.svelte';
+    import Icons from './lib/docsite/pages/Icons.svelte';
 
     // Simple routing state
     let currentPage = $state('getting-started');