canvas-ui-sdk 0.1.0

package/package.json

@@ -0,0 +1,95 @@
+{
+  "name": "canvas-ui-sdk",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "A comprehensive UI component library with design tokens for building beautiful interfaces",
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "default": "./dist/index.mjs"
+    },
+    "./styles": "./styles/tokens.reference.css"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "styles"
+  ],
+  "scripts": {
+    "build": "tsup && node -e \"const fs = require('fs'); const content = fs.readFileSync('dist/index.mjs', 'utf8'); fs.writeFileSync('dist/index.mjs', '\\\"use client\\\";\\n' + content);\"",
+    "dev": "tsup --watch",
+    "lint": "eslint src/",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build",
+    "docs:dev": "cd docs && npm run dev",
+    "docs:build": "cd docs && npm run build",
+    "docs:install": "cd docs && npm install"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@phosphor-icons/react": "^2.1.10",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@radix-ui/react-visually-hidden": "^1.2.4",
+    "@tiptap/extension-image": "^3.14.0",
+    "@tiptap/extension-link": "^3.14.0",
+    "@tiptap/extension-placeholder": "^3.14.0",
+    "@tiptap/pm": "^3.14.0",
+    "@tiptap/react": "^3.14.0",
+    "@tiptap/starter-kit": "^3.14.0",
+    "chart.js": "^4.5.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
+    "lucide-react": "^0.562.0",
+    "react-chartjs-2": "^5.3.1",
+    "react-day-picker": "^9.13.0",
+    "react-zoom-pan-pinch": "^3.7.0",
+    "reactflow": "^11.11.4",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.4.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "tsup": "^8.0.0",
+    "typescript": "^5"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "ui",
+    "design-system",
+    "tailwind",
+    "radix"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/your-org/canvas-ui-sdk.git"
+  }
+}

package/styles/tokens.reference.css

@@ -0,0 +1,283 @@
+/**
+ * Canvas UI SDK - CSS Variable Reference
+ * 
+ * This file documents all CSS variables used by the SDK components.
+ * Copy these to your project's globals.css and customize as needed.
+ * 
+ * Components read these variables at runtime, so changes are instant.
+ */
+
+:root {
+  /* ============================================
+   * COLOR TOKENS
+   * ============================================ */
+  
+  /* Brand Colors */
+  --canvas-primary: #1165ef;
+  --canvas-primary-dark: #093378;
+  --canvas-primary-foreground: #ffffff;
+  --canvas-flair-bg: #093378;
+  --canvas-destructive: #ef4444;
+  --canvas-transparent: transparent;
+  
+  /* Text Colors */
+  --canvas-text: #0d121c;
+  --canvas-text-muted: #4b5565;
+  --canvas-text-placeholder: #6c7684;
+  
+  /* Surface Colors */
+  --canvas-background: #ffffff;
+  --canvas-surface: #f8fafc;
+  --canvas-surface-hover: #eef1f5;
+  --canvas-surface-brand: #ebf2ff;
+  --canvas-outline-bg: #ffffff;
+  
+  /* Border Colors */
+  --canvas-border: #e9eef3;
+  --canvas-border-input: #d1d9e0;
+  --canvas-border-input-focus: #1165ef;
+  --canvas-border-input-invalid: #ef4444;
+  --canvas-border-disabled: #e3e8ef;
+  
+  /* Light Sidebar */
+  --canvas-sidebar-light-bg: #ffffff;
+  --canvas-sidebar-light-active-bg: #ebf2ff;
+  --canvas-sidebar-light-active-text: #1165ef;
+  --canvas-sidebar-light-text: #4b5565;
+  --canvas-sidebar-light-border: #e9eef3;
+  
+  /* Dark Sidebar */
+  --canvas-sidebar-dark-bg: #152135;
+  --canvas-sidebar-dark-active-bg: #091222;
+  --canvas-sidebar-dark-active-text: #ffffff;
+  --canvas-sidebar-dark-text: #7e92b0;
+  --canvas-sidebar-dark-border: #1e3a5f;
+
+  /* ============================================
+   * TYPOGRAPHY TOKENS
+   * ============================================ */
+  
+  /* Global Font */
+  --typo-global-font: "Inter";
+  
+  /* H1 - Hero Headlines */
+  --typo-h1-font: "";
+  --typo-h1-size: 72px;
+  --typo-h1-size-mobile: 48px;
+  --typo-h1-weight: 700;
+  --typo-h1-spacing: -0.02em;
+  --typo-h1-line-height: 1.1;
+  --typo-h1-color: var(--canvas-text);
+  --typo-h1-color-muted: var(--canvas-text-muted);
+  
+  /* H2 - Major Section Headers */
+  --typo-h2-font: "";
+  --typo-h2-size: 60px;
+  --typo-h2-size-mobile: 40px;
+  --typo-h2-weight: 700;
+  --typo-h2-spacing: -0.02em;
+  --typo-h2-line-height: 1.15;
+  --typo-h2-color: var(--canvas-text);
+  --typo-h2-color-muted: var(--canvas-text-muted);
+  
+  /* H3 - Banner Titles */
+  --typo-h3-font: "";
+  --typo-h3-size: 48px;
+  --typo-h3-size-mobile: 32px;
+  --typo-h3-weight: 700;
+  --typo-h3-spacing: -0.01em;
+  --typo-h3-line-height: 1.25;
+  --typo-h3-color: var(--canvas-text);
+  --typo-h3-color-muted: var(--canvas-text-muted);
+  
+  /* H4 - Page Titles */
+  --typo-h4-font: "";
+  --typo-h4-size: 36px;
+  --typo-h4-size-mobile: 28px;
+  --typo-h4-weight: 600;
+  --typo-h4-spacing: -0.01em;
+  --typo-h4-line-height: 1.25;
+  --typo-h4-color: var(--canvas-text);
+  --typo-h4-color-muted: var(--canvas-text-muted);
+  
+  /* H5 - Large Section Headers */
+  --typo-h5-font: "";
+  --typo-h5-size: 30px;
+  --typo-h5-size-mobile: 24px;
+  --typo-h5-weight: 600;
+  --typo-h5-spacing: 0em;
+  --typo-h5-line-height: 1.3;
+  --typo-h5-color: var(--canvas-text);
+  --typo-h5-color-muted: var(--canvas-text-muted);
+  
+  /* H6 - Section Titles */
+  --typo-h6-font: "";
+  --typo-h6-size: 24px;
+  --typo-h6-size-mobile: 20px;
+  --typo-h6-weight: 600;
+  --typo-h6-spacing: 0em;
+  --typo-h6-line-height: 1.25;
+  --typo-h6-color: var(--canvas-text);
+  --typo-h6-color-muted: var(--canvas-text-muted);
+  
+  /* Body XL - Lead Paragraphs */
+  --typo-body-xl-font: "";
+  --typo-body-xl-size: 20px;
+  --typo-body-xl-size-mobile: 18px;
+  --typo-body-xl-weight: 400;
+  --typo-body-xl-spacing: 0em;
+  --typo-body-xl-line-height: 1.5;
+  --typo-body-xl-color: var(--canvas-text);
+  --typo-body-xl-color-muted: var(--canvas-text-muted);
+  
+  /* Body L - Descriptions */
+  --typo-body-l-font: "";
+  --typo-body-l-size: 18px;
+  --typo-body-l-size-mobile: 16px;
+  --typo-body-l-weight: 400;
+  --typo-body-l-spacing: 0em;
+  --typo-body-l-line-height: 1.55;
+  --typo-body-l-color: var(--canvas-text);
+  --typo-body-l-color-muted: var(--canvas-text-muted);
+  
+  /* Body M - Standard Body Text */
+  --typo-body-m-font: "";
+  --typo-body-m-size: 16px;
+  --typo-body-m-size-mobile: 15px;
+  --typo-body-m-weight: 400;
+  --typo-body-m-spacing: 0em;
+  --typo-body-m-line-height: 1.5;
+  --typo-body-m-color: var(--canvas-text);
+  --typo-body-m-color-muted: var(--canvas-text-muted);
+  
+  /* Body S - Captions, Metadata */
+  --typo-body-s-font: "";
+  --typo-body-s-size: 14px;
+  --typo-body-s-size-mobile: 13px;
+  --typo-body-s-weight: 400;
+  --typo-body-s-spacing: 0em;
+  --typo-body-s-line-height: 1.4;
+  --typo-body-s-color: var(--canvas-text);
+  --typo-body-s-color-muted: var(--canvas-text-muted);
+  
+  /* Body XS - Fine Print, Labels */
+  --typo-body-xs-font: "";
+  --typo-body-xs-size: 12px;
+  --typo-body-xs-size-mobile: 11px;
+  --typo-body-xs-weight: 400;
+  --typo-body-xs-spacing: 0em;
+  --typo-body-xs-line-height: 1.4;
+  --typo-body-xs-color: var(--canvas-text);
+  --typo-body-xs-color-muted: var(--canvas-text-muted);
+  
+  /* UI Typography */
+  --typo-menu-label-font: "";
+  --typo-menu-label-size: 18px;
+  --typo-sidebar-label-font: "";
+  --typo-sidebar-label-size: 12px;
+  --typo-sidebar-tab-font: "";
+  --typo-sidebar-tab-size: 14px;
+  --typo-sidebar-subtab-font: "";
+  --typo-sidebar-subtab-size: 14px;
+  --typo-header-font: "";
+  --typo-header-size: 14px;
+  --typo-input-label-font: "";
+  --typo-input-label-size: 14px;
+  --typo-button-font: "";
+  --typo-button-size: 14px;
+
+  /* ============================================
+   * BUTTON SIZE TOKENS
+   * ============================================ */
+  
+  /* Mini */
+  --btn-mini-height: 28px;
+  --btn-mini-font-size: 12px;
+  --btn-mini-px: 10px;
+  --btn-mini-radius: 4px;
+  
+  /* Small */
+  --btn-small-height: 32px;
+  --btn-small-font-size: 14px;
+  --btn-small-px: 12px;
+  --btn-small-radius: 6px;
+  
+  /* Standard */
+  --btn-standard-height: 40px;
+  --btn-standard-font-size: 14px;
+  --btn-standard-px: 16px;
+  --btn-standard-radius: 8px;
+  
+  /* Large */
+  --btn-large-height: 48px;
+  --btn-large-font-size: 16px;
+  --btn-large-px: 20px;
+  --btn-large-radius: 10px;
+
+  /* ============================================
+   * BUTTON COLOR TOKENS
+   * ============================================ */
+  
+  /* Primary */
+  --btn-primary-bg: var(--canvas-primary);
+  --btn-primary-text: var(--canvas-primary-foreground);
+  --btn-primary-border: var(--canvas-primary);
+  --btn-primary-bg-hover: var(--canvas-primary-dark);
+  --btn-primary-text-hover: var(--canvas-primary-foreground);
+  --btn-primary-border-hover: var(--canvas-primary-dark);
+  
+  /* Primary Outline */
+  --btn-primary-outline-bg: var(--canvas-outline-bg);
+  --btn-primary-outline-text: var(--canvas-primary);
+  --btn-primary-outline-border: var(--canvas-primary);
+  --btn-primary-outline-bg-hover: var(--canvas-surface-brand);
+  --btn-primary-outline-text-hover: var(--canvas-primary);
+  --btn-primary-outline-border-hover: var(--canvas-primary);
+  
+  /* Neutral */
+  --btn-neutral-bg: var(--canvas-background);
+  --btn-neutral-text: var(--canvas-text);
+  --btn-neutral-border: var(--canvas-border-input);
+  --btn-neutral-bg-hover: var(--canvas-surface-brand);
+  --btn-neutral-text-hover: var(--canvas-text);
+  --btn-neutral-border-hover: var(--canvas-border-input);
+  
+  /* Disabled */
+  --btn-disabled-bg: var(--canvas-background);
+  --btn-disabled-text: var(--canvas-text-muted);
+  --btn-disabled-border: var(--canvas-border);
+  
+  /* Delete */
+  --btn-delete-bg: var(--canvas-destructive);
+  --btn-delete-text: var(--canvas-primary-foreground);
+  --btn-delete-border: var(--canvas-destructive);
+  --btn-delete-bg-hover: #dc2626;
+
+  /* ============================================
+   * INPUT SIZE TOKENS
+   * ============================================ */
+  
+  /* Small */
+  --input-small-height: 30px;
+  --input-small-font-size: 13px;
+  --input-small-px: 10px;
+  --input-small-radius: 6px;
+  
+  /* Standard */
+  --input-standard-height: 40px;
+  --input-standard-font-size: 14px;
+  --input-standard-px: 14px;
+  --input-standard-radius: 8px;
+  
+  /* Large */
+  --input-large-height: 64px;
+  --input-large-font-size: 18px;
+  --input-large-px: 20px;
+  --input-large-radius: 12px;
+  
+  /* Expandable */
+  --input-expandable-height: 80px;
+  --input-expandable-font-size: 14px;
+  --input-expandable-px: 14px;
+  --input-expandable-radius: 8px;
+}