pika-ux 1.0.0-beta.0

package/LICENSE

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2025 Rithum Holdings, Inc., together with its affiliates
+
+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/icon-generator/generate-icon-ts-indices.js

@@ -0,0 +1,78 @@
+#!/usr/bin/env node
+import { existsSync, mkdirSync, writeFileSync, readdirSync, readFileSync } from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+var __filename = fileURLToPath(import.meta.url);
+var __dirname = path.dirname(__filename);
+var iconsDirPath = path.resolve(__dirname, "../../src/icons");
+if (!existsSync(iconsDirPath)) {
+  mkdirSync(iconsDirPath, { recursive: true });
+}
+function getIconNamesFromCollection(collectionName) {
+  try {
+    const collectionPath = path.resolve(__dirname, `../../node_modules/@iconify-json/${collectionName}/icons.json`);
+    if (!existsSync(collectionPath)) {
+      console.log(`Collection ${collectionName} not found at ${collectionPath}`);
+      return [];
+    }
+    const collectionData = JSON.parse(readFileSync(collectionPath, "utf8"));
+    return Object.keys(collectionData.icons || {});
+  } catch (error) {
+    console.error(`Error reading collection ${collectionName}:`, error);
+    return [];
+  }
+}
+function getInstalledCollections() {
+  const nodeModulesPath = path.resolve(__dirname, "../../node_modules/@iconify-json");
+  if (!existsSync(nodeModulesPath)) {
+    console.log("No @iconify-json packages found");
+    return [];
+  }
+  return readdirSync(nodeModulesPath).filter((item) => !item.startsWith("."));
+}
+function generateCollectionDeclarationContent(collection, iconNames) {
+  const declarations = iconNames.map(
+    (iconName) => `declare module '$icons/${collection}/${iconName}' {
+  import type { Component } from 'svelte';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  const component: Component<SvelteHTMLElements['svg']>;
+  export default component;
+}`
+  );
+  return `// ${collection} icons - Type declarations only
+// Auto-generated by tools/icon-generator/generate-icon-ts-indices.ts
+// These declarations provide IDE autocomplete without runtime imports
+// Exported by pika-ux for consumer projects
+
+${declarations.join("\n\n")}
+`;
+}
+function main() {
+  const collections = getInstalledCollections();
+  if (collections.length === 0) {
+    console.log("No Iconify collections found. Please install some with:");
+    console.log("pnpm install @iconify-json/lucide @iconify-json/ci");
+    return;
+  }
+  console.log(`Found ${collections.length} Iconify collections: ${collections.join(", ")}`);
+  const collectionsWithIcons = [];
+  collections.forEach((collection) => {
+    const iconNames = getIconNamesFromCollection(collection);
+    console.log(`Found ${iconNames.length} icons in ${collection}`);
+    if (iconNames.length > 0) {
+      collectionsWithIcons.push(collection);
+      const collectionDirPath = path.resolve(iconsDirPath, collection);
+      if (!existsSync(collectionDirPath)) {
+        mkdirSync(collectionDirPath, { recursive: true });
+      }
+      const collectionFilePath = path.resolve(collectionDirPath, "index.d.ts");
+      const content = generateCollectionDeclarationContent(collection, iconNames);
+      writeFileSync(collectionFilePath, content);
+      console.log(`Created ${collectionFilePath}`);
+    }
+  });
+  console.log(`Icon declaration files generation complete! Generated types for ${collectionsWithIcons.length} collections.`);
+  console.log("These types will be exported by pika-ux and consumed by other projects.");
+}
+main();

package/dist/shadcn-postinstall/index.js

@@ -0,0 +1,114 @@
+#!/usr/bin/env node
+import { existsSync, readdirSync, statSync, readFileSync, writeFileSync } from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+var __filename = fileURLToPath(import.meta.url);
+var __dirname = path.dirname(__filename);
+var shadcnDirPath = path.resolve(__dirname, "../../src/shadcn");
+function calculateRelativePath(fromFile, toPath) {
+  const fromDir = path.dirname(fromFile);
+  const fromDepth = fromDir.replace(shadcnDirPath, "").split("/").length - 1;
+  const cleanToPath = toPath.startsWith("shadcn/") ? toPath.replace("shadcn/", "") : toPath;
+  const upLevels = fromDepth > 0 ? "../".repeat(fromDepth) : "./";
+  return upLevels + cleanToPath;
+}
+function getAllShadcnFiles(dir = shadcnDirPath) {
+  const files = [];
+  if (!existsSync(dir)) {
+    console.log(`Directory ${dir} does not exist`);
+    return files;
+  }
+  const entries = readdirSync(dir);
+  for (const entry of entries) {
+    const fullPath = path.join(dir, entry);
+    const stat = statSync(fullPath);
+    if (stat.isDirectory()) {
+      files.push(...getAllShadcnFiles(fullPath));
+    } else if (stat.isFile() && (entry.endsWith(".svelte") || entry.endsWith(".ts"))) {
+      files.push(fullPath);
+    }
+  }
+  return files;
+}
+function normalizeImports(content, filePath) {
+  const importPattern = /import\s+(?:(?:\{[^}]*\}|\*\s+as\s+\w+|\w+)(?:\s*,\s*(?:\{[^}]*\}|\*\s+as\s+\w+|\w+))*\s+from\s+['"])([^'"]+)(['"])/g;
+  let updatedContent = content;
+  let match;
+  while ((match = importPattern.exec(content)) !== null) {
+    const [fullMatch, importPath, quote] = match;
+    if (importPath.startsWith("$ui/shadcn/is-mobile.svelte.js")) {
+      const newImport = fullMatch.replace(importPath, "../is-mobile.svelte.js");
+      updatedContent = updatedContent.replace(fullMatch, newImport);
+      console.log(`  ${path.basename(filePath)}: ${importPath} \u2192 ../is-mobile.svelte.js`);
+    } else if (importPath.startsWith("$ui/shadcn/")) {
+      const componentPath = importPath.replace("$ui/shadcn/", "");
+      const relativePath = calculateRelativePath(filePath, componentPath);
+      const newImport = fullMatch.replace(importPath, relativePath);
+      updatedContent = updatedContent.replace(fullMatch, newImport);
+      console.log(`  ${path.basename(filePath)}: ${importPath} \u2192 ${relativePath}`);
+    } else if (importPath.startsWith("$ui/")) {
+      const targetPath = importPath.replace("$ui/", "../");
+      const newImport = fullMatch.replace(importPath, targetPath);
+      updatedContent = updatedContent.replace(fullMatch, newImport);
+      console.log(`  ${path.basename(filePath)}: ${importPath} \u2192 ${targetPath}`);
+    } else if (importPath.startsWith("$lib/")) {
+      const targetPath = importPath.replace("$lib/", "../lib/");
+      const newImport = fullMatch.replace(importPath, targetPath);
+      updatedContent = updatedContent.replace(fullMatch, newImport);
+      console.log(`  ${path.basename(filePath)}: ${importPath} \u2192 ${targetPath}`);
+    }
+  }
+  return updatedContent;
+}
+function processFile(filePath) {
+  try {
+    const originalContent = readFileSync(filePath, "utf8");
+    const normalizedContent = normalizeImports(originalContent, filePath);
+    if (originalContent !== normalizedContent) {
+      writeFileSync(filePath, normalizedContent);
+      return true;
+    }
+    return false;
+  } catch (error) {
+    console.error(`Error processing ${filePath}:`, error);
+    return false;
+  }
+}
+function main() {
+  console.log("\u{1F527} shadcn-svelte Post-Install Normalizer");
+  console.log("Converting alias-based imports to relative imports...\n");
+  const files = getAllShadcnFiles();
+  if (files.length === 0) {
+    console.log("No .svelte or .ts files found in src/shadcn/");
+    return;
+  }
+  console.log(`Found ${files.length} files to process:`);
+  let processedCount = 0;
+  let changedCount = 0;
+  for (const file of files) {
+    console.log(`
+Processing: ${path.relative(shadcnDirPath, file)}`);
+    const wasChanged = processFile(file);
+    processedCount++;
+    if (wasChanged) {
+      changedCount++;
+    }
+  }
+  console.log(`
+Processing complete!`);
+  console.log(`Files processed: ${processedCount}`);
+  console.log(`Files modified: ${changedCount}`);
+  if (changedCount > 0) {
+    console.log("\n All shadcn components now use relative imports!");
+    console.log("They will work correctly in all three scenarios:");
+    console.log("  1. pika-ux project itself");
+    console.log("  2. Monorepo projects (workspace:*)");
+    console.log("  3. External npm projects");
+  } else {
+    console.log("\n All files were already using relative imports.");
+  }
+}
+if (import.meta.url === `file://${process.argv[1]}`) {
+  main();
+}

package/package.json

@@ -0,0 +1,102 @@
+{
+  "name": "pika-ux",
+  "version": "1.0.0-beta.0",
+  "type": "module",
+  "exports": {
+    ".": "./src/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",
+    "pika-ux-icons": "./dist/icon-generator/generate-icon-ts-indices.js",
+    "pika-ux-normalize": "./dist/shadcn-postinstall/index.js"
+  },
+  "files": [
+    "src/**",
+    "dist/**",
+    "scripts/**"
+  ],
+  "devDependencies": {
+    "@lucide/svelte": "^0.482.0",
+    "@sveltejs/vite-plugin-svelte": "^6.2.0",
+    "@tailwindcss/typography": "^0.5.16",
+    "@tailwindcss/vite": "^4.1.13",
+    "@tsconfig/svelte": "^5.0.5",
+    "@types/indefinite": "^2.3.4",
+    "@types/node": "^22.15.17",
+    "eslint": "^9.26.0",
+    "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",
+    "vite": "^7.1.7",
+    "@pika/typescript-config": "0.0.0"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "dependencies": {
+    "@cartamd/plugin-code": "^4.2.0",
+    "@iconify-json/ci": "^1.2.2",
+    "@iconify-json/lucide": "^1.2.44",
+    "@internationalized/date": "^3.8.1",
+    "@tanstack/table-core": "^8.21.3",
+    "bits-ui": "^2.9.1",
+    "carta-md": "^4.11.1",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
+    "date-fns-tz": "^3.2.0",
+    "indefinite": "^2.5.1",
+    "mode-watcher": "^1.0.7",
+    "paneforge": "^1.0.2",
+    "plur": "^5.1.0",
+    "svelte-sonner": "^1.0.5",
+    "tailwind-merge": "^3.3.1",
+    "unplugin-icons": "^22.3.0"
+  },
+  "keywords": [
+    "pika",
+    "ui",
+    "components",
+    "svelte",
+    "shadcn",
+    "design-system"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rithum/pika.git",
+    "directory": "packages/pika-ux"
+  },
+  "bugs": {
+    "url": "https://github.com/rithum/pika/issues"
+  },
+  "homepage": "https://github.com/rithum/pika#readme",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "pnpm run icons:generate && tsup",
+    "setup": "node scripts/setup.js",
+    "icons:generate": "tsx tools/icon-generator/generate-icon-ts-indices.ts",
+    "shadcn:normalize": "tsx tools/shadcn-postinstall/index.ts",
+    "lint": "eslint src/",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+    "check-types": "tsc --noEmit",
+    "version:patch": "pnpm version patch --git-tag-version=true",
+    "version:minor": "pnpm version minor --git-tag-version=true",
+    "version:major": "pnpm version major --git-tag-version=true",
+    "release:patch": "pnpm run build && pnpm run version:patch && pnpm publish && git push && git push --tags",
+    "release:minor": "pnpm run build && pnpm run version:minor && pnpm publish && git push && git push --tags",
+    "release:major": "pnpm run build && pnpm run version:major && pnpm publish && git push && git push --tags",
+    "release:dry": "pnpm run build && pnpm publish --dry-run"
+  }
+}

package/readme.md

@@ -0,0 +1,50 @@
+# pika-ux
+
+UI Components library for the Pika project. This package contains both custom Pika components and shadcn/ui components adapted for Svelte.
+
+## Installation
+
+```bash
+npm install pika-ux
+# or
+pnpm install pika-ux
+```
+
+## Usage
+
+### Importing Components
+
+You can import components from either the `pika` or `shadcn` collections:
+
+```typescript
+// Pika custom components
+import { Chip } from 'pika-ux/pika/chip';
+import { PikaAlert } from 'pika-ux/pika/pika-alert';
+
+// shadcn/ui components
+import { Button } from 'pika-ux/shadcn/button';
+import { Card } from 'pika-ux/shadcn/card';
+```
+
+## Component Collections
+
+### Pika Components
+
+Custom UI components designed specifically for the Pika framework.
+
+### shadcn Components
+
+Svelte implementations of popular shadcn/ui components.
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Build the library
+pnpm run build
+
+# Watch for changes during development
+pnpm run dev
+```

package/scripts/setup.js

@@ -0,0 +1,100 @@
+#!/usr/bin/env node
+
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Default components.json configuration
+const defaultComponentsConfig = {
+    $schema: 'https://shadcn-svelte.com/schema.json',
+    tailwind: {
+        css: 'src/app.css',
+        baseColor: 'slate'
+    },
+    aliases: {
+        components: '$lib/components',
+        utils: '$lib/utils',
+        ui: '$lib/components/ui',
+        hooks: '$lib/hooks',
+        lib: '$lib'
+    },
+    typescript: true,
+    registry: 'https://tw3.shadcn-svelte.com/registry/new-york'
+};
+
+// Default alias configuration for svelte.config.js
+const svelteAliases = {
+    $ui: 'node_modules/pika-ux/src'
+};
+
+function findProjectRoot() {
+    let currentDir = process.cwd();
+
+    while (currentDir !== path.parse(currentDir).root) {
+        if (fs.existsSync(path.join(currentDir, 'package.json'))) {
+            return currentDir;
+        }
+        currentDir = path.dirname(currentDir);
+    }
+
+    throw new Error('Could not find project root (no package.json found)');
+}
+
+function setupComponentsJson(projectRoot) {
+    const componentsJsonPath = path.join(projectRoot, 'components.json');
+
+    if (!fs.existsSync(componentsJsonPath)) {
+        console.log('Creating components.json...');
+        fs.writeFileSync(componentsJsonPath, JSON.stringify(defaultComponentsConfig, null, 4));
+        console.log('✅ Created components.json');
+    } else {
+        console.log('✅ components.json already exists');
+    }
+}
+
+function updateSvelteConfig(projectRoot) {
+    const svelteConfigPath = path.join(projectRoot, 'svelte.config.js');
+
+    if (fs.existsSync(svelteConfigPath)) {
+        console.log('Found svelte.config.js - please add these aliases manually:');
+        console.log(JSON.stringify(svelteAliases, null, 2));
+        console.log('Add them to your kit.alias configuration');
+    }
+}
+
+function updateViteConfig(projectRoot) {
+    const viteConfigPath = path.join(projectRoot, 'vite.config.js');
+    const viteConfigTsPath = path.join(projectRoot, 'vite.config.ts');
+
+    if (fs.existsSync(viteConfigPath) || fs.existsSync(viteConfigTsPath)) {
+        console.log('Found vite config - please add these aliases manually:');
+        console.log(JSON.stringify(svelteAliases, null, 2));
+        console.log('Add them to your resolve.alias configuration');
+    }
+}
+
+function main() {
+    try {
+        console.log('🔧 Setting up pika-ux...');
+
+        const projectRoot = findProjectRoot();
+        console.log(`Project root: ${projectRoot}`);
+
+        setupComponentsJson(projectRoot);
+        updateSvelteConfig(projectRoot);
+        updateViteConfig(projectRoot);
+
+        console.log('\n✅ Setup complete!');
+        console.log('\nNext steps:');
+        console.log('1. Update your svelte.config.js or vite.config.js with the suggested aliases');
+        console.log('2. Import components: import { Button } from "pika-ux/shadcn/button"');
+    } catch (error) {
+        console.error('❌ Setup failed:', error.message);
+        process.exit(1);
+    }
+}
+
+main();

package/src/App.svelte

@@ -0,0 +1,51 @@
+<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';
+
+    // Simple routing state
+    let currentPage = $state('getting-started');
+
+    function handleNavigate(page: string) {
+        currentPage = page;
+    }
+
+    // Component mapping
+    const pageComponents = {
+        'getting-started': GettingStarted,
+        icons: Icons,
+        colors: Colors,
+        components: Components,
+        'components/button': Button
+    } as const;
+
+    // Derived component based on current page
+    const CurrentComponent = $derived(pageComponents[currentPage as keyof typeof pageComponents] || GettingStarted);
+</script>
+
+<div class="flex h-screen bg-background">
+    <!-- Navigation Sidebar -->
+    <div class="w-64 flex-shrink-0">
+        <!-- @ts-expect-error SimpleNavigation props working correctly -->
+        <Navigation {currentPage} onNavigate={handleNavigate} />
+    </div>
+
+    <!-- Main Content Area -->
+    <main class="flex-1 overflow-auto">
+        <CurrentComponent />
+    </main>
+</div>
+
+<style>
+    :global(html, body) {
+        height: 100%;
+        margin: 0;
+        padding: 0;
+    }
+</style>