zabi-components 5.0.22 → 6.0.0

package/THEMING.md

@@ -0,0 +1,248 @@
+# Theming Guide
+
+## 🎨 Single Source of Truth
+
+**All theming is done in one file: `src/app.css`**
+
+This file contains:
+- All color scales (brand, citron, pine, iris, base)
+- Semantic color tokens (primary, secondary, success, error, etc.)
+- Action colors (for buttons and interactive elements)
+- Dark mode overrides
+- Typography settings
+- Spacing, border radius, and z-index values
+
+## 📍 Where to Make Changes
+
+### Main Theme (Light Mode)
+Edit the `@theme` block in `src/app.css`.
+
+### Dark Mode Theme
+Edit the `.dark` block in `src/app.css`.
+
+## ⚠️ Important: Don't Edit These Files
+
+### Generated Files (in `dist/` folder)
+These files are **automatically generated** from `src/app.css` by the build script:
+- ❌ `dist/zabi-components.css` - Full compiled CSS (generated)
+- ❌ `dist/zabi-components-theme.css` - Theme with Tailwind import (generated)
+- ❌ `dist/zabi-components-theme-only.css` - Theme only, no Tailwind (generated)
+- ❌ `dist/zabi-components-theme-dark.css` - Dark mode theme (generated)
+- ❌ `dist/zabi-components-theme-dark-only.css` - Dark mode theme only (generated)
+- ❌ `dist/zabi-components-colors.css` - Standalone colors (generated from app.css)
+
+**These files are overwritten every time you run `npm run build:css`**
+
+### Example Files
+- ❌ `examples/theme-extensions/02-custom-brand-colors.css` - Just an example, not your actual theme
+- ❌ `examples/theme-extensions/03-custom-semantic-colors.css` - Just an example, not your actual theme
+
+### Source Files (Edit These)
+- ✅ `src/app.css` - **THIS IS THE ONLY FILE YOU NEED TO EDIT**
+- ✅ Removed deprecated files (`src/styles/colors.css`, `src/styles/base.css`, `src/styles/simple.css`, `src/app-simple.css`)
+
+## 📦 What Are the Dist Files For?
+
+The `dist/` files are **for consumers** of your library who want to import the theme separately.
+
+**Full import matrix, export paths, and examples:** [docs/theme-imports.md](./docs/theme-imports.md)
+
+### For Library Developers (You)
+- **Edit**: `src/app.css` only
+- **Build**: Run `npm run build:css` to regenerate all dist files (or `npm run build:lib` before publish)
+- **After token edits**: run `node scripts/verify-build.js` to confirm outputs (also runs as part of `build:lib`)
+- **Base scale source**: use `tokens/base-scale.js`; run `npm run sync:tokens` (or `npm run build:css`) to render token blocks back into `src/app.css`
+
+### For Library Consumers
+
+Use **package exports** (preferred):
+
+| Need | Import |
+|------|--------|
+| Tailwind + full `@theme` (app has no Tailwind yet) | `zabi-components/theme` |
+| Tailwind already in app — merge `@theme` only | `zabi-components/theme-only` |
+| Dark overrides (+ Tailwind import in file) | `zabi-components/theme-dark` |
+| Dark overrides only (Tailwind already loaded) | `zabi-components/theme-dark-only` |
+| CSS variables only, no Tailwind | `zabi-components/colors` |
+| Full compiled CSS (utilities + everything) | `zabi-components/css` |
+
+Examples:
+
+```css
+@import "zabi-components/theme-only";
+@import "zabi-components/theme-dark-only";
+```
+
+```css
+@import "zabi-components/colors";
+```
+
+```css
+@import "zabi-components/css";
+```
+
+Canonical recommendation for most apps remains:
+
+```css
+@import "tailwindcss";
+@import "zabi-components/theme-only";
+@import "zabi-components/theme-dark-only";
+```
+
+Dark mapping rule reference:
+- Physical ramp tokens are `--zabi-base-50 ... --zabi-base-950`.
+- Semantic dark mapping is generated with `S -> 1000 - S` (for example `50 <-> 950`, `75 <-> 925`, `500` unchanged).
+
+## 🎯 Common Customizations
+
+### Change Brand Colors
+
+```css
+@theme {
+  /* Replace the brand color scale */
+  --color-brand-50: #f0f9ff;
+  --color-brand-100: #e0f2fe;
+  --color-brand-200: #bae6fd;
+  --color-brand-300: #7dd3fc;
+  --color-brand-400: #38bdf8;
+  --color-brand-500: #0ea5e9;
+  --color-brand-600: #0284c7;
+  --color-brand-700: #0369a1;
+  --color-brand-800: #075985;
+  --color-brand-900: #0c4a6e;
+  --color-brand-950: #082f49;
+}
+```
+
+### Change Primary Button Color
+
+The primary button uses `--color-action-primary` which defaults to `brand-800`. To change it:
+
+```css
+@theme {
+  /* Use a different brand shade */
+  --color-action-primary: theme(colors.brand.600);
+  
+  /* Or use a completely custom color */
+  --color-action-primary: #your-color-here;
+}
+```
+
+### Brand Scale Usage
+
+The brand scale is used throughout the system:
+
+- **brand-50 to brand-100**: Subtle backgrounds, hover states
+- **brand-300 to brand-400**: Light accents, disabled states
+- **brand-500**: Focus rings, medium emphasis
+- **brand-600**: Primary color, links
+- **brand-700**: Link hover, primary hover
+- **brand-800**: **Primary buttons** (`action-primary`)
+- **brand-900**: Primary button hover
+- **brand-950**: Darkest brand shade
+
+### Dark Mode
+
+Dark mode automatically inverts the brand scale:
+- `brand-50` becomes `brand-950` (darkest)
+- `brand-950` becomes `brand-50` (lightest)
+
+This happens automatically in the `.dark` block, so you typically don't need to override action colors in dark mode.
+
+## 🌙 Dark Mode Action Colors
+
+Dark mode action colors are handled in `src/app.css` in the `.dark` block (lines 393-404):
+
+### Primary Actions
+- **No explicit dark mode override needed** - Brand colors are automatically inverted
+- `brand-800` (light mode) → `brand-200` (dark mode) automatically
+
+### Secondary Actions  
+- **No explicit dark mode override needed** - Base colors are automatically inverted
+- `base-600` (light mode) → `base-400` (dark mode) automatically
+
+### Danger Actions
+- **Has explicit dark mode overrides** (lines 399-404) because red colors aren't automatically inverted:
+  ```css
+  .dark {
+    --color-action-danger: theme(colors.red.500);
+    --color-action-danger-hover: theme(colors.red.600);
+    --color-action-danger-active: theme(colors.red.700);
+    /* ... */
+  }
+  ```
+
+### In Generated Files
+
+- **`dist/zabi-components.css`**: Has dark mode at line 2178, danger actions at lines 2264-2269
+- **`dist/zabi-components-theme-dark-only.css`**: Has dark mode action colors at lines 119-130 (only danger has explicit overrides)
+- **`dist/zabi-components-theme-only.css`**: Only has light mode (@theme block), no dark mode
+- **`dist/zabi-components-theme.css`**: Only has light mode (@theme block), no dark mode
+
+## 📁 File Structure
+
+```
+src/
+└── app.css          ← 🎯 EDIT THIS FILE FOR ALL THEMING (single source of truth)
+
+dist/                 ← ⚠️ GENERATED FILES - DON'T EDIT
+├── zabi-components.css              (full CSS with dark mode)
+├── zabi-components-theme.css       (light mode only)
+├── zabi-components-theme-only.css  (light mode only)
+├── zabi-components-theme-dark.css   (dark mode only)
+├── zabi-components-theme-dark-only.css (dark mode only)
+└── zabi-components-colors.css       (standalone, both modes)
+
+examples/             ← ⚠️ EXAMPLES ONLY - DON'T EDIT
+└── theme-extensions/
+    ├── 02-custom-brand-colors.css
+    └── 03-custom-semantic-colors.css
+```
+
+## ⚠️ Important Notes
+
+1. **Never edit files in `dist/`** - These are automatically generated from `src/app.css` by `scripts/build-css.js`
+2. **All theming is in `src/app.css`** - This is the single source of truth
+3. **Always edit `src/app.css`** - This is your single source of truth
+4. The `examples/` folder contains examples, not your actual theme
+5. **Dist files are overwritten** every time you run `npm run build:css`
+
+## 🔄 Build Process
+
+When you edit `src/app.css`:
+
+1. **Development**: Changes are automatically reflected (no build needed)
+2. **Production**: Run `npm run build:css` to regenerate dist files
+3. The build script (`scripts/build-css.js`) reads `src/app.css` and generates:
+   - `zabi-components.css` - Full compiled CSS with Tailwind processed (includes dark mode)
+   - `zabi-components-theme.css` - Theme block with Tailwind import (light mode only)
+   - `zabi-components-theme-only.css` - Theme block only (light mode only)
+   - `zabi-components-theme-dark.css` - Dark mode theme with Tailwind import
+   - `zabi-components-theme-dark-only.css` - Dark mode theme only
+   - `zabi-components-colors.css` - Standalone CSS custom properties (both light and dark)
+
+## 🔄 After Making Changes
+
+### For Development
+After editing `src/app.css`, changes are automatically reflected in your app. No build needed!
+
+### For Production/Library Build
+If you're building the library for distribution:
+```bash
+npm run build:css  # Regenerates all dist CSS files from src/app.css
+```
+
+## Optional perceptual midpoint generation (OKLCH)
+
+Base midpoints are frozen hex by default (`fixed` mode).  
+For experimentation, you can generate midpoint steps in OKLCH interpolation and commit the resulting frozen values:
+
+```bash
+ZABI_BASE_SCALE_MODE=oklch npm run sync:tokens
+npm run build:css
+```
+
+Notes:
+- Primary anchors (`50, 100, 200 ... 950`) stay fixed.
+- Midpoints (`75, 150, 250 ... 925`) are generated from adjacent anchors.
+- Commit updated `src/app.css` and regenerated `dist/` outputs together.

package/dist/atoms/Card.svelte

@@ -1,70 +1,64 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
     import type { CardVariant, SizeVariant } from "../../types/variants.js";
-    import CardHeader from "./CardHeader.svelte";
-    import CardContent from "./CardContent.svelte";
 
     interface Props {
-        title?: string;
-        description?: string;
-        image?: string;
         onclick?: (event: MouseEvent) => void | Promise<void>;
         size?: SizeVariant;
         variant?: CardVariant;
         fullWidth?: boolean;
+        className?: string;
+        /** Required when card is interactive (has onclick) for accessibility */
+        ariaLabel?: string;
         children?: Snippet;
     }
 
     let {
-        title = "",
-        description = "",
-        image = "",
         onclick,
         size = "md",
         variant = "default",
         fullWidth = true,
+        className = "",
+        ariaLabel,
         children,
         ...restProps
     }: Props = $props();
 
-    const sizeClass = $derived(() => {
-        return size === "sm" ? "p-4" : size === "lg" ? "p-8" : "p-6";
-    });
-
-    const variantClasses = $derived(() => {
-        switch (variant) {
-            case "elevated":
-                return "bg-card shadow-lg";
-            case "outlined":
-                return "bg-card border-2 border-base-200 shadow-none";
-            case "flat":
-                return "bg-card shadow-none border-none";
-            default:
-                return "bg-card shadow-sm";
-        }
-    });
-
-    const useOldAPI = $derived(
-        title !== "" || description !== "" || image !== "",
+    const sizeClass = $derived(
+        size === "sm" ? "p-4" : size === "lg" ? "p-8" : "p-6",
     );
 
-    const cardClasses = $derived(() => {
-        const baseClasses = `rounded-lg transition-all duration-200 ${variantClasses()}`;
-        const interactiveClasses = onclick
-            ? variant === "elevated"
-                ? "cursor-pointer hover:shadow-xl hover:bg-card-hover"
-                : variant === "outlined"
-                  ? "cursor-pointer hover:border-brand-500 hover:bg-card-hover"
-                  : variant === "flat"
-                    ? "cursor-pointer hover:bg-card-hover"
-                    : "cursor-pointer hover:shadow-lg hover:bg-card-hover"
-            : "";
-        const widthClasses = fullWidth ? "w-full" : "";
-        const minWidthClass = useOldAPI ? "min-w-64" : "";
-        const paddingClass = useOldAPI ? sizeClass() : "";
+    const variantClasses = $derived(
+        variant === "elevated"
+            ? "bg-card shadow-lg"
+            : variant === "outlined"
+              ? "bg-card border-2 border-base-200 shadow-none"
+              : variant === "flat"
+                ? "bg-card shadow-none border-none"
+                : "bg-card shadow-sm",
+    );
 
-        return `${baseClasses} ${interactiveClasses} ${widthClasses} ${minWidthClass} ${paddingClass}`.trim();
-    });
+    const cardClasses = $derived(
+        [
+            "rounded-lg transition-all duration-200",
+            variantClasses,
+            onclick
+                ? variant === "elevated"
+                    ? "cursor-pointer hover:shadow-xl hover:bg-card-hover"
+                    : variant === "outlined"
+                      ? "cursor-pointer hover:border-brand-500 hover:bg-card-hover"
+                      : variant === "flat"
+                        ? "cursor-pointer hover:bg-card-hover"
+                        : "cursor-pointer hover:shadow-lg hover:bg-card-hover"
+                : "",
+            fullWidth ? "w-full" : "",
+            sizeClass,
+            className,
+        ]
+            .filter(Boolean)
+            .join(" ")
+            .trim(),
+    );
 
     function handleKeydown(event: KeyboardEvent) {
         if (onclick && (event.key === "Enter" || event.key === " ")) {
@@ -74,37 +68,16 @@
     }
 
     const cardRole = $derived(onclick ? "button" : undefined);
-    const cardAriaLabel = $derived(onclick && title ? title : undefined);
 </script>
 
 <div
-    class={cardClasses()}
+    class={cardClasses}
     {onclick}
     role={cardRole}
     {...onclick ? { tabindex: 0 } : {}}
-    aria-label={cardAriaLabel}
+    aria-label={ariaLabel}
     onkeydown={onclick ? handleKeydown : undefined}
     {...restProps}
 >
-    {#if useOldAPI}
-        <!-- Old API: Using title/description/image props -->
-        {#if title || description}
-            <CardHeader {title} {description} />
-        {/if}
-
-        {#if image || children}
-            <CardContent {image} imageAlt={title}>
-                {#if children}
-                    {@render children()}
-                {/if}
-            </CardContent>
-        {/if}
-    {:else}
-        <!-- New API: Using compound components (CardHeader, CardContent, CardFooter) -->
-        {#if children}
-            <CardContent className="pt-6">
-                {@render children()}
-            </CardContent>
-        {/if}
-    {/if}
+    {@render children?.()}
 </div>

package/dist/atoms/Card.svelte.d.ts

@@ -1,13 +1,13 @@
 import type { Snippet } from "svelte";
 import type { CardVariant, SizeVariant } from "../../types/variants.js";
 interface Props {
-    title?: string;
-    description?: string;
-    image?: string;
     onclick?: (event: MouseEvent) => void | Promise<void>;
     size?: SizeVariant;
     variant?: CardVariant;
     fullWidth?: boolean;
+    className?: string;
+    /** Required when card is interactive (has onclick) for accessibility */
+    ariaLabel?: string;
     children?: Snippet;
 }
 declare const Card: import("svelte").Component<Props, {}, "">;

package/dist/atoms/CardHeader.svelte

@@ -3,6 +3,9 @@
 
     interface Props {
         title?: string;
+        /** Short secondary text displayed directly under the title */
+        subtitle?: string;
+        /** Longer supporting text displayed below the subtitle */
         description?: string;
         level?: 1 | 2 | 3 | 4 | 5 | 6;
         className?: string;
@@ -11,6 +14,7 @@
 
     let {
         title = "",
+        subtitle = "",
         description = "",
         level = 3,
         className = "",
@@ -24,7 +28,7 @@
     });
 </script>
 
-<header class="flex flex-col space-y-1.5 pb-4{className}" {...restProps}>
+<header class={`flex flex-col space-y-1.5 pb-4 ${className}`.trim()} {...restProps}>
     {#if title}
         <svelte:element this={headingTag} class={headingClasses()}>
             {title}
@@ -33,6 +37,11 @@
     {#if children}
         {@render children()}
     {/if}
+    {#if subtitle}
+        <p class="text-sm text-description">
+            {subtitle}
+        </p>
+    {/if}
     {#if description}
         <p class="text-sm text-description">
             {description}

package/dist/atoms/CardHeader.svelte.d.ts

@@ -1,6 +1,9 @@
 import type { Snippet } from "svelte";
 interface Props {
     title?: string;
+    /** Short secondary text displayed directly under the title */
+    subtitle?: string;
+    /** Longer supporting text displayed below the subtitle */
     description?: string;
     level?: 1 | 2 | 3 | 4 | 5 | 6;
     className?: string;

package/dist/atoms/CodeBlock.svelte

@@ -44,7 +44,7 @@
         {#if showCopyButton}
             <button
                 onclick={copyToClipboard}
-                class="flex items-center gap-2 px-3 py-1 text-xs text-base-300 hover:text-white hover:bg-base-700 rounded transition-colors duration-200"
+                class="flex cursor-pointer items-center gap-2 rounded px-3 py-1 text-xs text-base-300 transition-colors duration-200 hover:bg-base-700 hover:text-white"
                 aria-label="Copy code to clipboard"
             >
                 {#if copied}

package/dist/atoms/ColorPicker.svelte

@@ -293,7 +293,7 @@
             {#if isOpen}
                 <div
                     use:setPickerContainer
-                    class="absolute top-12 right-0 z-50 bg-input rounded-2xl shadow-lg p-4 w-80"
+                    class="absolute top-12 right-0 z-50 border border-input-border bg-input rounded-2xl shadow-lg p-4 w-80"
                     role="dialog"
                     aria-label="Color picker"
                 >

package/dist/atoms/Input.svelte

@@ -68,13 +68,13 @@
               ? "border-warning focus:border-warning focus:ring-warning"
               : variant === "error"
                 ? "border-error focus:border-error focus:ring-error"
-                : "border-0 focus:ring-2 focus:ring-brand-500"; // default - no border
+                : "border-input-border focus:border-input-border focus:ring-2 focus:ring-brand-500";
     });
 
     const inputClasses = $derived(() => {
         const sizeStyles = sizeClass();
         const baseClasses =
-            "w-full min-w-48 bg-input hover:bg-input-hover focus:bg-input-focus disabled:bg-input-disabled rounded-lg transition-all duration-200 placeholder:text-description text-body focus:outline-none focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed";
+            "w-full min-w-48 border bg-input hover:bg-input-hover focus:bg-input-focus disabled:bg-input-disabled rounded-lg transition-all duration-200 placeholder:text-description text-body focus:outline-none focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed";
 
         return `${baseClasses} ${sizeStyles.padding} ${sizeStyles.text} ${sizeStyles.leading} ${variantClass()} ${className}`.trim();
     });

package/dist/atoms/Progress.svelte

@@ -39,7 +39,7 @@
 
     <div
         id={progressId}
-        class="w-full bg-input rounded-full overflow-hidden {sizeClasses[size]}"
+        class="w-full border border-input-border bg-input rounded-full overflow-hidden {sizeClasses[size]}"
         role="progressbar"
         aria-valuenow={value}
         aria-valuemin="0"

package/dist/atoms/Select.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import Dropdown from "../molecules/Dropdown.svelte";
     import Button from "./Button.svelte";
+    import Input from "./Input.svelte";
     import {
         ChevronDown,
         CheckCircle,
@@ -105,13 +106,13 @@
               ? "border-warning focus:border-warning focus:ring-warning"
               : variant === "error"
                 ? "border-error focus:border-error focus:ring-error"
-                : "border-0 focus:ring-2 focus:ring-brand-500"; // default - no border
+                : "border-input-border focus:ring-2 focus:ring-brand-500";
     });
 
     const triggerClasses = $derived(() => {
         const sizeStyles = sizeClass();
         const baseClasses =
-            "w-full bg-input hover:bg-input-hover focus:bg-input-focus disabled:bg-input-disabled rounded-lg transition-all duration-200 text-body focus:outline-none focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-between";
+            "flex w-full cursor-pointer items-center justify-between rounded-lg border bg-input text-body transition-all duration-200 hover:bg-input-hover focus:bg-input-focus focus:outline-none focus:ring-offset-0 disabled:cursor-not-allowed disabled:bg-input-disabled disabled:opacity-50";
 
         return `${baseClasses} ${sizeStyles.padding} ${sizeStyles.text} ${sizeStyles.leading} ${variantClass()}`.trim();
     });
@@ -277,9 +278,10 @@
             <div class="px-2 pb-2 pt-1" style:width={menuWidth}>
                 {#if searchable && !isLoading}
                     <div class="px-1 pb-2">
-                        <input
+                        <Input
                             type="text"
-                            class="w-full rounded-md bg-input hover:bg-input-hover focus:bg-input-focus text-body placeholder:text-description px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500 disabled:opacity-50 disabled:cursor-not-allowed"
+                            size="sm"
+                            class="min-w-0"
                             placeholder={searchPlaceholder}
                             bind:value={searchQuery}
                             aria-label={searchPlaceholder}
@@ -328,7 +330,7 @@
                             {#if emptyStateActionLabel && onEmptyStateAction}
                                 <button
                                     type="button"
-                                    class="mt-3 inline-flex min-h-11 items-center rounded-lg bg-action-primary px-3 py-2 text-sm text-action-primary"
+                                    class="mt-3 inline-flex min-h-11 cursor-pointer items-center rounded-lg bg-action-primary px-3 py-2 text-sm text-action-primary"
                                     onclick={onEmptyStateAction}
                                 >
                                     {emptyStateActionLabel}

package/dist/atoms/Textarea.svelte

@@ -40,12 +40,12 @@
               ? "border-warning focus:border-warning focus:ring-warning"
               : variant === "error"
                 ? "border-error focus:border-error focus:ring-error"
-                : "border-0 focus:ring-2 focus:ring-brand-500"; // default - no border
+                : "border-input-border focus:ring-2 focus:ring-brand-500";
     });
 
     const textareaClasses = $derived(() => {
         const baseClasses =
-            "w-full bg-input hover:bg-input-hover focus:bg-input-focus disabled:bg-input-disabled rounded-lg transition-all duration-200 placeholder:text-description text-body focus:outline-none focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed resize-y px-4 py-2.5 text-base leading-6";
+            "w-full border bg-input hover:bg-input-hover focus:bg-input-focus disabled:bg-input-disabled rounded-lg transition-all duration-200 placeholder:text-description text-body focus:outline-none focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed resize-y px-4 py-2.5 text-base leading-6";
 
         return `${baseClasses} ${variantClass()}`.trim();
     });

package/dist/atoms/Toast.svelte

@@ -45,7 +45,7 @@
             {#if closable}
                 <button
                     type="button"
-                    class="ml-3 text-base-400 hover:text-base-600"
+                    class="ml-3 cursor-pointer text-base-400 hover:text-base-600"
                     onclick={closeToast}
                     aria-label="Close notification"
                 >

package/dist/components/index.d.ts

@@ -20,9 +20,8 @@ export { default as Modal } from './molecules/Modal.svelte';
 export { default as SlideUp } from './molecules/SlideUp.svelte';
 export { default as Tabs } from './molecules/Tabs.svelte';
 export { default as Navbar } from './organisms/Navbar.svelte';
-export { default as Navigation } from './organisms/Navigation.svelte';
 export { default as SidebarNavigation } from './organisms/SidebarNavigation.svelte';
-export { default as SidebarProjectPanel } from './organisms/SidebarProjectPanel.svelte';
+export { default as SidebarPanel } from './organisms/SidebarPanel.svelte';
 export declare const createId: (prefix?: string) => string;
 export declare const cn: (...classes: (string | undefined | null | false)[]) => string;
 export declare const getFormData: (form: HTMLFormElement) => Record<string, any>;

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEpE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE1D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAE1E,eAAO,MAAM,QAAQ,GAAI,SAAQ,MAAa,KAAG,MAA4B,CAAC;AAE9E,eAAO,MAAM,EAAE,GAAI,GAAG,SAAS,CAAC,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,KAAK,CAAC,EAAE,KAAG,MAClC,CAAC;AAEtC,eAAO,MAAM,WAAW,GAAI,MAAM,eAAe,KAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAGrE,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,OAAO,MAAM,KAAG,OAG7C,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,OAAO,GAAG,KAAG,OAE7C,CAAC;AAEF,eAAO,MAAM,SAAS,QAAO,OAE5B,CAAC;AAEF,eAAO,MAAM,UAAU,QAAO,MAAM,GAAG,SAEtC,CAAC;AAEF,eAAO,MAAM,YAAY,QAAO,QAAQ,GAAG,SAE1C,CAAC;AAEF,eAAO,MAAM,gBAAgB,QAAO,OAAO,GAAG,SAE7C,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,SAAQ,MAAa,KAAG,MAKlD,CAAC;AAEF,OAAO,EACH,GAAG,EACH,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,WAAW,EACX,YAAY,EACZ,GAAG,EACH,SAAS,EACT,SAAS,EACT,QAAQ,EACX,MAAM,gBAAgB,CAAC"}

package/dist/components/organisms/index.d.ts

@@ -1,5 +1,4 @@
 export { default as Navbar } from './Navbar.svelte';
-export { default as Navigation } from './Navigation.svelte';
 export { default as SidebarNavigation } from './SidebarNavigation.svelte';
-export { default as SidebarProjectPanel } from './SidebarProjectPanel.svelte';
+export { default as SidebarPanel } from './SidebarPanel.svelte';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/organisms/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/organisms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/organisms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/index.d.ts

@@ -20,9 +20,8 @@ export { default as Modal } from './molecules/Modal.svelte';
 export { default as SlideUp } from './molecules/SlideUp.svelte';
 export { default as Tabs } from './molecules/Tabs.svelte';
 export { default as Navbar } from './organisms/Navbar.svelte';
-export { default as Navigation } from './organisms/Navigation.svelte';
 export { default as SidebarNavigation } from './organisms/SidebarNavigation.svelte';
-export { default as SidebarProjectPanel } from './organisms/SidebarProjectPanel.svelte';
+export { default as SidebarPanel } from './organisms/SidebarPanel.svelte';
 export declare const createId: (prefix?: string) => string;
 export declare const cn: (...classes: (string | undefined | null | false)[]) => string;
 export declare const getFormData: (form: HTMLFormElement) => Record<string, any>;

package/dist/index.js

@@ -20,9 +20,8 @@ export { default as Modal } from './molecules/Modal.svelte';
 export { default as SlideUp } from './molecules/SlideUp.svelte';
 export { default as Tabs } from './molecules/Tabs.svelte';
 export { default as Navbar } from './organisms/Navbar.svelte';
-export { default as Navigation } from './organisms/Navigation.svelte';
 export { default as SidebarNavigation } from './organisms/SidebarNavigation.svelte';
-export { default as SidebarProjectPanel } from './organisms/SidebarProjectPanel.svelte';
+export { default as SidebarPanel } from './organisms/SidebarPanel.svelte';
 export const createId = (prefix = 'id') => generateId(prefix);
 export const cn = (...classes) => classes.filter(Boolean).join(' ');
 export const getFormData = (form) => {

package/dist/lib/showcase/components-catalog.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentMetadata } from "../../types/page.types";
+export declare const componentsCatalog: Record<string, ComponentMetadata[]>;
+//# sourceMappingURL=components-catalog.d.ts.map

package/dist/lib/showcase/components-catalog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"components-catalog.d.ts","sourceRoot":"","sources":["../../../src/lib/showcase/components-catalog.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAEhE,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,iBAAiB,EAAE,CAq1CjE,CAAC"}