rizzo-css 0.0.73 → 0.0.75

package/README.md

@@ -16,7 +16,7 @@ bun add rizzo-css
 
 The package works with **npm**, **pnpm**, **yarn**, and **bun**. After install, run the CLI with your manager’s runner: `npx` (npm/yarn), `pnpm dlx`, or `bunx`.
 
-**Quick start (no install):** `npx rizzo-css init` — choose **framework** (Vanilla, Astro, Svelte, React, or Vue), then **add to existing** or **create new**. Both flows use the **same template choice**: **Landing** (hero/features), **Docs** (sidebar + sample doc), **Dashboard** (sidebar + stats/table), or **Full** (clone of the docs site). Landing/Docs/Dashboard = component picker (all 53 or pick). We **never overwrite your existing files**; any skipped content is in **RIZZO-SETUP.md**. You must add the `<link>` yourself (CLI prints the exact tag). Non-interactive: `npx rizzo-css init --yes --framework vanilla|astro|svelte|react|vue --template landing|docs|dashboard|full` or `npx rizzo-css add --template landing|docs|dashboard|full`. Optional **rizzo-css.json** and `add --install-package`. All get the **same CSS and component styles**. To use the **official Svelte or Astro create command** plus Rizzo, create the app first, then run `npx rizzo-css add`:
+**Quick start (no install):** `npx rizzo-css init` — choose **framework** (Vanilla, Astro, Svelte, React, or Vue), then **add to existing** or **create new**. Both flows use the **same template choice**: **Landing** (hero/features), **Docs** (sidebar + sample doc), **Dashboard** (sidebar + stats/table), or **Full** (clone of the docs site). Landing/Docs/Dashboard = component picker (all 58 or pick). We **never overwrite your existing files**; any skipped content is in **RIZZO-SETUP.md**. You must add the `<link>` yourself (CLI prints the exact tag). Non-interactive: `npx rizzo-css init --yes --framework vanilla|astro|svelte|react|vue --template landing|docs|dashboard|full` or `npx rizzo-css add --template landing|docs|dashboard|full`. Optional **rizzo-css.json** and `add --install-package`. All get the **same CSS and component styles**. To use the **official Svelte or Astro create command** plus Rizzo, create the app first, then run `npx rizzo-css add`:
 
 ```bash
 npm create svelte@latest my-app && cd my-app && npx rizzo-css add
@@ -25,7 +25,7 @@ npm create astro@latest my-app   && cd my-app && npx rizzo-css add
 
 **Running the CLI:** npm → `npx`; pnpm → `pnpm dlx`; yarn → `npx` (Yarn 1 has no `dlx`; works with Yarn 2+ too); bun → `bunx`. The [docs site](https://rizzo-css.vercel.app/docs/getting-started) tabs show the correct command for each manager.
 
-**Same flow for new and existing:** Both prompt for **Landing** | **Docs** | **Dashboard** | **Full**. Landing/Docs/Dashboard = component picker (all 53 or pick). Full = site clone (no picker); also writes **RIZZO-SNIPPET.txt** (link + theme) unless `--no-snippet`. `npx rizzo-css doctor` checks config and CSS path. `npx rizzo-css theme` lists themes.
+**Same flow for new and existing:** Both prompt for **Landing** | **Docs** | **Dashboard** | **Full**. Landing/Docs/Dashboard = component picker (all 58 or pick). Full = site clone (no picker); also writes **RIZZO-SNIPPET.txt** (link + theme) unless `--no-snippet`. `npx rizzo-css doctor` checks config and CSS path. `npx rizzo-css theme` lists themes.
 
 | | **Create new** (`init` → new) | **Add to existing** (`add` or `init` → existing) |
 |---|------------------------------|--------------------------------------------------|
@@ -72,7 +72,7 @@ import 'rizzo-css';
 **Without a bundler (plain HTML):** Use a CDN. Both unpkg and jsDelivr resolve the package root to the built CSS (via the `unpkg` / `jsdelivr` fields in this package). For reliability or to pin a version, use the explicit path:
 
 ```html
-<!-- unpkg (pin version: replace @latest with @0.0.73 or any version) -->
+<!-- unpkg (pin version: replace @latest with @0.0.75 or any version) -->
 <link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />
 
 <!-- or jsDelivr -->

package/bin/rizzo-css.js

@@ -196,18 +196,18 @@ const THEMES = [...DARK_THEMES, ...LIGHT_THEMES];
 const VALID_THEME_VALUES = ['system', ...THEMES];
 // Components available for scaffold (must match scaffold/svelte and scaffold/astro; missing files are skipped on copy)
 const SVELTE_COMPONENTS = [
-  'Button', 'Badge', 'Card', 'Calendar', 'RangeCalendar', 'Carousel', 'Dashboard', 'Divider', 'DocsSidebar', 'Footer', 'Spinner', 'ProgressBar', 'Avatar', 'Alert',
-  'BackToTop', 'Breadcrumb',   'FormGroup', 'Input', 'InputGroup', 'Checkbox', 'Textarea', 'Select', 'Radio',
-  'CopyToClipboard', 'Tooltip', 'Pagination', 'Tabs', 'Accordion', 'Dropdown',
+  'Button', 'Badge', 'Card', 'Calendar', 'RangeCalendar', 'Carousel', 'Chart', 'Dashboard', 'Divider', 'DocsSidebar', 'Footer', 'Spinner', 'ProgressBar', 'Avatar', 'Alert',
+  'BackToTop', 'Breadcrumb', 'Command', 'FormGroup', 'Input', 'InputGroup', 'InputOtp', 'Checkbox', 'Textarea', 'Select', 'Radio',
+  'CopyToClipboard', 'Tooltip', 'Pagination', 'Tabs', 'Accordion', 'Dropdown', 'Direction', 'Menubar',
   'Modal', 'Toast', 'Table', 'ThemeSwitcher', 'FontSwitcher', 'SoundEffects',
   'Navbar', 'Settings', 'Search', 'Icons', 'Skeleton', 'Switch',
   'Label', 'Kbd', 'Collapsible', 'AlertDialog', 'AspectRatio', 'ButtonGroup', 'Empty', 'Separator',
   'Slider', 'Sheet', 'Popover', 'Toggle', 'ToggleGroup', 'ScrollArea', 'HoverCard', 'ContextMenu', 'ResizablePaneGroup', 'ResizablePane', 'ResizableHandle',
 ];
 const ASTRO_COMPONENTS = [
-  'Button', 'Badge', 'Card', 'Calendar', 'RangeCalendar', 'Carousel', 'Dashboard', 'Divider', 'DocsSidebar', 'Footer', 'Spinner', 'ProgressBar', 'Avatar', 'Alert',
-  'BackToTop', 'Breadcrumb',   'FormGroup', 'Input', 'InputGroup', 'Checkbox', 'Textarea', 'Select', 'Radio',
-  'CopyToClipboard', 'Tooltip', 'Pagination', 'Tabs', 'Accordion', 'Dropdown',
+  'Button', 'Badge', 'Card', 'Calendar', 'RangeCalendar', 'Carousel', 'Chart', 'Dashboard', 'Divider', 'DocsSidebar', 'Footer', 'Spinner', 'ProgressBar', 'Avatar', 'Alert',
+  'BackToTop', 'Breadcrumb', 'Command', 'FormGroup', 'Input', 'InputGroup', 'InputOtp', 'Checkbox', 'Textarea', 'Select', 'Radio',
+  'CopyToClipboard', 'Tooltip', 'Pagination', 'Tabs', 'Accordion', 'Dropdown', 'Direction', 'Menubar',
   'Modal', 'Toast', 'Table', 'ThemeSwitcher', 'FontSwitcher', 'SoundEffects',
   'Navbar', 'Settings', 'Search', 'Icons', 'Skeleton', 'Switch',
   'Label', 'Kbd', 'Collapsible', 'AlertDialog', 'AspectRatio', 'ButtonGroup', 'Empty', 'Separator',
@@ -290,8 +290,8 @@ function logAddedDeps(selected, expanded, framework) {
 // Vanilla scaffold: component name (same as ASTRO_COMPONENTS) -> components/*.html slug. New components (label, kbd, etc.) have stub pages in scaffold/vanilla/components/.
 const VANILLA_COMPONENT_SLUGS = {
   Accordion: 'accordion', Alert: 'alert', AlertDialog: 'alert-dialog', AspectRatio: 'aspect-ratio', Avatar: 'avatar', BackToTop: 'back-to-top', Badge: 'badge', Breadcrumb: 'breadcrumb', Button: 'button', ButtonGroup: 'button-group',
-  Card: 'cards', Calendar: 'calendar', RangeCalendar: 'range-calendar', Carousel: 'carousel', Checkbox: 'forms', Collapsible: 'collapsible', ContextMenu: 'context-menu', CopyToClipboard: 'copy-to-clipboard', Dashboard: 'dashboard', Divider: 'divider', DocsSidebar: 'docs-sidebar', Dropdown: 'dropdown',
-  Empty: 'empty', Footer: 'footer', FormGroup: 'forms', HoverCard: 'hover-card', Input: 'forms', InputGroup: 'input-group', Icons: 'icons', Kbd: 'kbd', Label: 'label',
+  Card: 'cards', Calendar: 'calendar', RangeCalendar: 'range-calendar', Carousel: 'carousel', Chart: 'chart', Checkbox: 'forms', Collapsible: 'collapsible', Command: 'command', ContextMenu: 'context-menu', CopyToClipboard: 'copy-to-clipboard', Dashboard: 'dashboard', Direction: 'direction', Divider: 'divider', DocsSidebar: 'docs-sidebar', Dropdown: 'dropdown',
+  Empty: 'empty', Footer: 'footer', FormGroup: 'forms', HoverCard: 'hover-card', Input: 'forms', InputGroup: 'input-group', InputOtp: 'input-otp', Icons: 'icons', Kbd: 'kbd', Label: 'label', Menubar: 'menubar',
   Modal: 'modal', Navbar: 'navbar', Pagination: 'pagination', Popover: 'popover', ProgressBar: 'progress-bar',
   Radio: 'forms', ResizableHandle: 'resizable', ResizablePane: 'resizable', ResizablePaneGroup: 'resizable', ScrollArea: 'scroll-area', Search: 'search', Separator: 'separator', Select: 'forms', Settings: 'settings', Sheet: 'sheet',
   Skeleton: 'skeleton', Slider: 'slider', SoundEffects: 'sound-effects', Spinner: 'spinner', Switch: 'switch', Table: 'table',
@@ -1124,14 +1124,14 @@ Commands:
 Options (init):
   --yes             Non-interactive: scaffold new in cwd with defaults (framework: astro, template: landing)
   --path <dir>      Project directory (relative to cwd or absolute). Scaffold and run install there. With --yes; interactive: "Enter path" option.
-  --framework <fw>  vanilla | astro | svelte | react | vue (same 53 components each)
+  --framework <fw>  vanilla | astro | svelte | react | vue (same 58 components each)
   --template <t>    create new: css-only | landing | docs | dashboard | full (default: landing). add: same options.
   --package-manager <pm>  npm | pnpm | yarn | bun (with --yes, or skip PM prompt when interactive)
   --install         After scaffolding, run package manager install in project directory (no prompt)
   --no-install      Do not run install; do not prompt (skip "Run <pm> install? (Y/n)")
   --offline        Use package manager cache only (no network). Passed to install/add when running PM.
   --no-git          With --yes, skip initializing a git repository (default with --yes is to run git init)
-  (Git: only init offers or runs git init. Interactive init: "Initialize git? (Y/n)". With --yes, git init runs unless --no-git. Add does not prompt for git. Init (create new): "Run <pm> install? (Y/n)" uses the package manager you selected (npm, pnpm, yarn, bun). Add: "Run <pm> add rizzo-css? (Y/n)" same. Vanilla has no package manager. rizzo-css.json is written only when the project does not already have one.)
+  (Init create-new: we prompt "Run <pm> install? (Y/n)" first when the project has package.json, then "Initialize git? (Y/n)". With --yes we run install when --install and git init unless --no-git. Add does not prompt for git. rizzo-css.json is written only when the project does not already have one.)
 
 Options (add) — run from your existing project root; you will choose a template then select components (or CSS only):
   --template <t>    css-only | landing | docs | dashboard | full (CSS only = stylesheet only; others = component picker)
@@ -1189,7 +1189,7 @@ Component dependencies (Full template):
   Full list of available components and what relies on what: npx rizzo-css help components
 
 Frameworks:
-  Scaffolds (init/add): Vanilla, Astro, Svelte, React, Vue. Same 53 components in each framework’s syntax; same CSS and BEM. Docs: https://rizzo-css.vercel.app/docs/react and Vue.
+  Scaffolds (init/add): Vanilla, Astro, Svelte, React, Vue. Same 58 components in each framework’s syntax; same CSS and BEM. Docs: https://rizzo-css.vercel.app/docs/react and Vue.
 
 Docs: https://rizzo-css.vercel.app
 `);
@@ -3127,7 +3127,7 @@ async function cmdInit(argv) {
   const pm = getPackageManagerCommands({ agent: selectedPm, command: selectedPm });
   const nextStep = pm.install + ' && ' + pm.run('dev');
   const runPrefix = projectDir !== cwd ? 'cd ' + pathRelative(cwd, projectDir) + ' && ' : '';
-  const hasPackageJson = useHandpickAstro || useHandpickSvelte || useAstroBase || useSvelteBase || useReactBase || useVueBase || (selectedVariation === 'css-only' && (framework === 'astro' || framework === 'svelte' || framework === 'react' || framework === 'vue'));
+  const hasPackageJson = useHandpickAstro || useHandpickSvelte || useAstroBase || useSvelteBase || useReactBase || useVueBase || (useFullVariant && framework !== 'vanilla') || (selectedVariation === 'css-only' && (framework === 'astro' || framework === 'svelte' || framework === 'react' || framework === 'vue'));
 
   console.log('\n  Scaffold complete. Summary above.');
 
@@ -3139,17 +3139,7 @@ async function cmdInit(argv) {
     console.log('  - Wrote ' + RIZZO_CONFIG_FILE);
   }
 
-  // Git init: in every scenario — prompt when interactive, run when --yes (unless --no-git)
-  if (!yes) {
-    const shouldGitInit = await confirmGitInit();
-    if (shouldGitInit) {
-      runGitInit(projectDir);
-    }
-  } else if (!hasFlag(argv, '--no-git')) {
-    runGitInit(projectDir);
-  }
-
-  // Package manager install: only for Astro/Svelte (Vanilla has no package.json)
+  // Package manager install: prompt first (when interactive), then run if requested or --install. Only when project has package.json.
   const installCmd = pm.install + (hasFlag(argv, '--offline') ? ' --offline' : '');
   if (runInstallAfterScaffold && !noInstall && hasPackageJson) {
     const dirLabel = projectDir !== cwd ? ' in ' + pathRelative(cwd, projectDir) : ' (current directory)';
@@ -3176,6 +3166,16 @@ async function cmdInit(argv) {
     }
   }
 
+  // Git init: after install prompt — prompt when interactive, run when --yes (unless --no-git)
+  if (!yes) {
+    const shouldGitInit = await confirmGitInit();
+    if (shouldGitInit) {
+      runGitInit(projectDir);
+    }
+  } else if (!hasFlag(argv, '--no-git')) {
+    runGitInit(projectDir);
+  }
+
   if (useHandpickAstro || useHandpickSvelte) {
     const fw = useHandpickAstro ? 'Astro' : 'SvelteKit';
     console.log('  - ' + fw + ' (manual): base + ' + selectedComponents.length + ' component(s). Run: ' + runPrefix + nextStep);
@@ -3192,7 +3192,7 @@ async function cmdInit(argv) {
   if (useVueBase) {
     console.log('  - Vue (Vite): app + ' + (componentsToCopy.length > 0 ? componentsToCopy.length + ' component(s).' : 'base.') + ' Run: ' + runPrefix + nextStep);
   }
-  const hasBaseScaffold = useAstroBase || useSvelteBase || useHandpickAstro || useHandpickSvelte || useReactBase || useVueBase || (selectedVariation === 'css-only' && (framework === 'astro' || framework === 'svelte' || framework === 'react' || framework === 'vue'));
+  const hasBaseScaffold = useAstroBase || useSvelteBase || useHandpickAstro || useHandpickSvelte || useReactBase || useVueBase || useFullVariant || (selectedVariation === 'css-only' && (framework === 'astro' || framework === 'svelte' || framework === 'react' || framework === 'vue'));
   if ((framework === 'astro' || framework === 'svelte' || framework === 'react' || framework === 'vue') && !hasBaseScaffold) {
     const fw = framework === 'svelte' ? 'Svelte' : framework === 'react' ? 'React' : framework === 'vue' ? 'Vue' : 'Astro';
     const createExample = getCreateProjectExample(pm, framework);