negodesign 0.0.80 → 0.0.82

package/README.md

@@ -1,134 +1,134 @@
-# NegoDesign
-
-<div align="center">
-
-**A Svelte 5 component library for building modern, fast and beautiful web applications.**
-
-</div>
-
-NegoDesign is an open-source collection of accessible, copy-paste-friendly UI components
-for [Svelte](https://svelte.dev) and [SvelteKit](https://svelte.dev/docs/kit). It follows the
-[shadcn](https://ui.shadcn.com) philosophy: components are built with Svelte's runes API,
-styled with [Tailwind CSS](https://tailwindcss.com), and ship as plain `.svelte` files you
-own — no lock-in, no black box.
-
-From low-level primitives (buttons, badges, carousels, dropdowns, inputs, sidebars) to
-complete, production-ready pages (admin panel, login, company profile, product details),
-everything is designed to be dropped into your project and customized.
-
----
-
-## Features
-
-- **Svelte 5 runes** — components use `$state`, `$derived`, `$props`, snippets and
-  bindable props. No legacy APIs.
-- **shadcn-style workflow** — copy the component, read the prop table, ship it.
-- **Tailwind CSS v4** — utility-first styling with CSS variables for theming and dark mode.
-- **Theming** — CSS variables for colors and a built-in light/dark switch.
-- **i18n ready** — language switcher and translation helpers included.
-- **Composable** — low-level UI primitives and high-level composite components.
-- **TypeScript** — all components ship with full type definitions.
-
-## Requirements
-
-- [Svelte](https://svelte.dev) `>= 5`
-- [SvelteKit](https://svelte.dev/docs/kit) `>= 2` (recommended)
-
-Tailwind CSS is not a hard dependency, but the components are designed for it and the
-built-in `styles.css` expects the shadcn design tokens.
-
-## Installation
-
-```bash
-npm install negodesign
-```
-
-Import the compiled styles once, in your global stylesheet:
-
-```css
-@import "tailwindcss";
-@import "negodesign/styles.css";
-```
-
-Or from your root layout:
-
-```svelte
-<script lang="ts">
-  import "negodesign/styles.css";
-  import "../app.css";
-</script>
-```
-
-### Usage
-
-```svelte
-<script lang="ts">
-  import { Menu } from "negodesign";
-  import { Home01Icon, Hotel01Icon } from "@hugeicons/core-free-icons";
-
-  const links = [
-    { label: "Home", url: "/", icon: Home01Icon },
-    { label: "Accommodation", url: "/accommodation", icon: Hotel01Icon },
-  ];
-</script>
-
-<Menu isBorder navMenu={{ links }} />
-```
-
-### Package exports
-
-| Export                    | Description                                            |
-| ------------------------- | ------------------------------------------------------ |
-| `negodesign`              | All components, types and utilities                    |
-| `negodesign/styles.css`   | Compiled global styles (design tokens, base, theme)    |
-| `negodesign/types`        | Shared TypeScript types                                |
-| `negodesign/i18n`         | Translation helpers and dictionaries                   |
-
-## Component categories
-
-- **Navigation** — `Menu`, `SearchInput`, `Navbar`
-- **Hero** — `SimpleHero`, `CarouselHero`
-- **Banners** — `CtaCardImageBanner`, `CtaCardBanner`, `AdCardBanner`, `NotificationBanner`
-- **Cards** — `CardMedia`, `CardProfile`, `CardProduct`, `CardPromotion`, `CardHighlight`
-- **Carousels** — `CarouselBadge`, `CarouselHighlights`, `CarouselPromotion`,  `CarouselGridMedia/Product/Profile/Promotion`
-- **Item Grid** — `ItemsSimpleGrid`, `ItemsPanel`
-- **Footer** — `Footer`
-- **Admin Panel** — `AdminPanel`, `MenuBarSidebar`, `DataTableCore`
-- **Login / Security** — `PageLogin`, `PageOtpVerification`, `PageForgetPassword`, `PageResetPassword`
-- **Full Pages** — `CompanyProfile`, `ProductDetails`, `ProfileUser`, `PrivacyPolicyOrTermsOfUse`
-
-## Documentation
-
-During development, a full documentation site is available at `/docs`:
-
-- **Getting Started** — `/docs`
-- **Installation** — `/docs/installation`
-- **Components** — `/docs/components` and `/docs/<component>`
-
-Each component page includes its description, a copy-paste example, a link to a live demo
-and a complete API reference (props table).
-
-## Development
-
-Clone the repository and install dependencies:
-
-```bash
-git clone <repository-url>
-cd negodesign
-npm install
-```
-
-Useful scripts:
-
-| Command           | Description                                  |
-| ----------------- | -------------------------------------------- |
-| `npm run dev`     | Start the SvelteKit dev server               |
-| `npm run check`   | Run `svelte-check` for type/compile errors   |
-| `npm run lint`    | Run ESLint                                   |
-| `npm test`        | Run the Vitest unit/browser tests            |
-| `npm run build`   | Build the demo app                           |
-| `npm run package` | Build the distributable package into `dist/` |
-
-## License
-
+# NegoDesign
+
+<div align="center">
+
+**A Svelte 5 component library for building modern, fast and beautiful web applications.**
+
+</div>
+
+NegoDesign is an open-source collection of accessible, copy-paste-friendly UI components
+for [Svelte](https://svelte.dev) and [SvelteKit](https://svelte.dev/docs/kit). It follows the
+[shadcn](https://ui.shadcn.com) philosophy: components are built with Svelte's runes API,
+styled with [Tailwind CSS](https://tailwindcss.com), and ship as plain `.svelte` files you
+own — no lock-in, no black box.
+
+From low-level primitives (buttons, badges, carousels, dropdowns, inputs, sidebars) to
+complete, production-ready pages (admin panel, login, company profile, product details),
+everything is designed to be dropped into your project and customized.
+
+---
+
+## Features
+
+- **Svelte 5 runes** — components use `$state`, `$derived`, `$props`, snippets and
+  bindable props. No legacy APIs.
+- **shadcn-style workflow** — copy the component, read the prop table, ship it.
+- **Tailwind CSS v4** — utility-first styling with CSS variables for theming and dark mode.
+- **Theming** — CSS variables for colors and a built-in light/dark switch.
+- **i18n ready** — language switcher and translation helpers included.
+- **Composable** — low-level UI primitives and high-level composite components.
+- **TypeScript** — all components ship with full type definitions.
+
+## Requirements
+
+- [Svelte](https://svelte.dev) `>= 5`
+- [SvelteKit](https://svelte.dev/docs/kit) `>= 2` (recommended)
+
+Tailwind CSS is not a hard dependency, but the components are designed for it and the
+built-in `styles.css` expects the shadcn design tokens.
+
+## Installation
+
+```bash
+npm install negodesign
+```
+
+Import the compiled styles once, in your global stylesheet:
+
+```css
+@import "tailwindcss";
+@import "negodesign/styles.css";
+```
+
+Or from your root layout:
+
+```svelte
+<script lang="ts">
+  import "negodesign/styles.css";
+  import "../app.css";
+</script>
+```
+
+### Usage
+
+```svelte
+<script lang="ts">
+  import { Menu } from "negodesign";
+  import { Home01Icon, Hotel01Icon } from "@hugeicons/core-free-icons";
+
+  const links = [
+    { label: "Home", url: "/", icon: Home01Icon },
+    { label: "Accommodation", url: "/accommodation", icon: Hotel01Icon },
+  ];
+</script>
+
+<Menu isBorder navMenu={{ links }} />
+```
+
+### Package exports
+
+| Export                    | Description                                            |
+| ------------------------- | ------------------------------------------------------ |
+| `negodesign`              | All components, types and utilities                    |
+| `negodesign/styles.css`   | Compiled global styles (design tokens, base, theme)    |
+| `negodesign/types`        | Shared TypeScript types                                |
+| `negodesign/i18n`         | Translation helpers and dictionaries                   |
+
+## Component categories
+
+- **Navigation** — `Menu`, `SearchInput`, `Navbar`
+- **Hero** — `SimpleHero`, `CarouselHero`
+- **Banners** — `CtaCardImageBanner`, `CtaCardBanner`, `AdCardBanner`, `NotificationBanner`
+- **Cards** — `CardMedia`, `CardProfile`, `CardProduct`, `CardPromotion`, `CardHighlight`
+- **Carousels** — `CarouselBadge`, `CarouselHighlights`, `CarouselPromotion`,  `CarouselGridMedia/Product/Profile/Promotion`
+- **Item Grid** — `ItemsSimpleGrid`, `ItemsPanel`
+- **Footer** — `Footer`
+- **Admin Panel** — `AdminPanel`, `MenuBarSidebar`, `DataTableCore`
+- **Login / Security** — `PageLogin`, `PageOtpVerification`, `PageForgetPassword`, `PageResetPassword`
+- **Full Pages** — `CompanyProfile`, `ProductDetails`, `ProfileUser`, `PrivacyPolicyOrTermsOfUse`
+
+## Documentation
+
+During development, a full documentation site is available at `/docs`:
+
+- **Getting Started** — `/docs`
+- **Installation** — `/docs/installation`
+- **Components** — `/docs/components` and `/docs/<component>`
+
+Each component page includes its description, a copy-paste example, a link to a live demo
+and a complete API reference (props table).
+
+## Development
+
+Clone the repository and install dependencies:
+
+```bash
+git clone <repository-url>
+cd negodesign
+npm install
+```
+
+Useful scripts:
+
+| Command           | Description                                  |
+| ----------------- | -------------------------------------------- |
+| `npm run dev`     | Start the SvelteKit dev server               |
+| `npm run check`   | Run `svelte-check` for type/compile errors   |
+| `npm run lint`    | Run ESLint                                   |
+| `npm test`        | Run the Vitest unit/browser tests            |
+| `npm run build`   | Build the demo app                           |
+| `npm run package` | Build the distributable package into `dist/` |
+
+## License
+
 Licensed under the [MIT](https://opensource.org/license/mit) License.

package/dist/components/NegoDesign.svelte

@@ -1,21 +1,21 @@
-<script lang="ts">
-  import { setUserTranslations } from "../i18n/config";
-  import type { NegoDesignProps } from "../types";
-  import { applyTheme, theme } from "../theme.svelte";
-
-  let { translations, children }: NegoDesignProps = $props();
-
-  $effect(() => {
-    if (translations) {
-      setUserTranslations(translations);
-    }
-  });
-
-  $effect(() => {
-    if (typeof document !== "undefined") {
-      applyTheme(theme.current);
-    }
-  });
-</script>
-
-{@render children()}
+<script lang="ts">
+  import { setUserTranslations } from "../i18n/config";
+  import type { NegoDesignProps } from "../types";
+  import { applyTheme, theme } from "../theme.svelte";
+
+  let { translations, children }: NegoDesignProps = $props();
+
+  $effect(() => {
+    if (translations) {
+      setUserTranslations(translations);
+    }
+  });
+
+  $effect(() => {
+    if (typeof document !== "undefined") {
+      applyTheme(theme.current);
+    }
+  });
+</script>
+
+{@render children()}

package/dist/components/pages/admin/01/ui/AdminContent.svelte

@@ -1,14 +1,14 @@
-<script lang="ts">
-  import type { Snippet } from "svelte";
-
-  /** Content wrapper for admin pages. */
-  type Props = {
-    children?: Snippet;
-  };
-
-  let { children }: Props = $props();
-</script>
-
-<div class="flex flex-1 flex-col gap-4 p-4 pt-0">
-  {@render children?.()}
-</div>
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  /** Content wrapper for admin pages. */
+  type Props = {
+    children?: Snippet;
+  };
+
+  let { children }: Props = $props();
+</script>
+
+<div class="flex flex-1 flex-col gap-4 p-4 pt-0">
+  {@render children?.()}
+</div>

package/dist/components/pages/admin/01/ui/AdminPanel.svelte

@@ -1,46 +1,46 @@
-<script lang="ts">
-  import LanguageSwitcher from "../../../../ui/language-switcher/language-switcher.svelte";
-  import LightSwitch from "../../../../ui/light-switch/light-switch.svelte";
-  import { Separator } from "../../../../ui/separator/index.js";
-  import * as Sidebar from "../../../../ui/sidebar/index.js";
-  import type { Snippet } from "svelte";
-
-  /**
-   * Admin layout with sidebar, header, and content.
-   * @property {Snippet} appsidebar - Application sidebar
-   * @property {Snippet} content - Main content
-   * @property {Snippet} breadcrumb - Breadcrumb navigation
-   */
-  type Props = {
-    appsidebar?: Snippet;
-    content?: Snippet;
-    breadcrumb?: Snippet;
-  };
-
-  let { appsidebar, content, breadcrumb }: Props = $props();
-</script>
-
-<Sidebar.Provider>
-  {@render appsidebar?.()}
-  <Sidebar.Inset>
-    <header
-      class="flex h-16 shrink-0 items-center md:justify-between gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12"
-    >
-      <div class="flex items-center gap-2 px-4">
-        <Sidebar.Trigger class="-ms-1" />
-        <Separator
-          orientation="vertical"
-          class="me-2 data-[orientation=vertical]:h-4"
-        />
-        {@render breadcrumb?.()}
-      </div>
-      <div class="pr-5">
-        <div class="flex gap-3">
-          <LanguageSwitcher />
-          <LightSwitch />
-        </div>
-      </div>
-    </header>
-    {@render content?.()}
-  </Sidebar.Inset>
-</Sidebar.Provider>
+<script lang="ts">
+  import LanguageSwitcher from "../../../../ui/language-switcher/language-switcher.svelte";
+  import LightSwitch from "../../../../ui/light-switch/light-switch.svelte";
+  import { Separator } from "../../../../ui/separator/index.js";
+  import * as Sidebar from "../../../../ui/sidebar/index.js";
+  import type { Snippet } from "svelte";
+
+  /**
+   * Admin layout with sidebar, header, and content.
+   * @property {Snippet} appsidebar - Application sidebar
+   * @property {Snippet} content - Main content
+   * @property {Snippet} breadcrumb - Breadcrumb navigation
+   */
+  type Props = {
+    appsidebar?: Snippet;
+    content?: Snippet;
+    breadcrumb?: Snippet;
+  };
+
+  let { appsidebar, content, breadcrumb }: Props = $props();
+</script>
+
+<Sidebar.Provider>
+  {@render appsidebar?.()}
+  <Sidebar.Inset>
+    <header
+      class="flex h-16 shrink-0 items-center md:justify-between gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12"
+    >
+      <div class="flex items-center gap-2 px-4">
+        <Sidebar.Trigger class="-ms-1" />
+        <Separator
+          orientation="vertical"
+          class="me-2 data-[orientation=vertical]:h-4"
+        />
+        {@render breadcrumb?.()}
+      </div>
+      <div class="pr-5">
+        <div class="flex gap-3">
+          <LanguageSwitcher />
+          <LightSwitch />
+        </div>
+      </div>
+    </header>
+    {@render content?.()}
+  </Sidebar.Inset>
+</Sidebar.Provider>

package/dist/components/pages/product-details/shared/ProductDetailFilesVertical.svelte

@@ -1,103 +1,103 @@
-<script lang="ts" module>
-  /**
-   * Lista vertical de ficheiros/thumbnails do produto com seleção de imagem/vídeo.
-   * Quando `isLoading` é true, exibe Skeletons.
-   * Se houver um item do tipo "video", ele é priorizado (aparece primeiro).
-   * @component
-   * @example
-   * ```svelte
-   * <ProductDetailFilesVertical files={data.gallery} />
-   * ```
-   */
-</script>
-
-<script lang="ts">
-  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
-  import type { ProductDetailsImage } from "../types";
-
-  let {
-    files,
-    className,
-    isLoading = false,
-  }: {
-    files: ProductDetailsImage[];
-    className?: string;
-    isLoading?: boolean;
-  } = $props();
-
-  // Vídeo primeiro, mantendo a ordem relativa do resto
-  const sortedFiles = $derived(
-    [...(files ?? [])].sort(
-      (a, b) => (a.type === "video" ? 0 : 1) - (b.type === "video" ? 0 : 1),
-    ),
-  );
-
-  let activeIndex = $state(0);
-  const active = $derived(sortedFiles[activeIndex]);
-</script>
-
-{#snippet media(file: ProductDetailsImage, cls: string)}
-  {#if file.type === "video"}
-    <video src={file.src} class={cls} muted playsinline></video>
-  {:else}
-    <img src={file.src} alt={file.alt ?? ""} class={cls} />
-  {/if}
-{/snippet}
-
-<div class="flex flex-col gap-3 {className}">
-  {#if isLoading}
-    <div class="flex gap-3">
-      <div class="flex shrink-0 flex-col gap-2">
-        {#each Array.from( { length: Math.min(files.length || 3, 4) }, ) as _, i (i)}
-          <Skeleton class="h-16 w-16 rounded-md" />
-        {/each}
-      </div>
-      <Skeleton class="aspect-4/3 min-w-0 flex-1 rounded-lg" />
-    </div>
-  {:else if sortedFiles.length > 0}
-    <div class="flex gap-3">
-      <div class="flex shrink-0 flex-col gap-2">
-        {#each sortedFiles as file, i (file.src)}
-          <button
-            type="button"
-            aria-label={file.alt ?? `Item ${i + 1}`}
-            onclick={() => (activeIndex = i)}
-            class="relative overflow-hidden rounded-md border transition-opacity {i ===
-            activeIndex
-              ? 'border-foreground opacity-100'
-              : 'border-muted opacity-60 hover:opacity-100'}"
-          >
-            {@render media(file, "h-16 w-16 object-cover")}
-            {#if file.type === "video"}
-              <span
-                class="absolute inset-0 flex items-center justify-center bg-black/30"
-              >
-                <svg
-                  viewBox="0 0 24 24"
-                  class="h-4 w-4 fill-white"
-                  aria-hidden="true"
-                >
-                  <path d="M8 5v14l11-7z" />
-                </svg>
-              </span>
-            {/if}
-          </button>
-        {/each}
-      </div>
-
-      <div class="min-w-0 flex-1 overflow-hidden rounded-lg border">
-        {#if active.type === "video"}
-          <!-- svelte-ignore a11y_media_has_caption -->
-          <video
-            src={active.src}
-            class="aspect-4/3 w-full object-cover"
-            controls
-            playsinline
-          ></video>
-        {:else}
-          {@render media(active, "aspect-4/3 w-full object-cover")}
-        {/if}
-      </div>
-    </div>
-  {/if}
-</div>
+<script lang="ts" module>
+  /**
+   * Lista vertical de ficheiros/thumbnails do produto com seleção de imagem/vídeo.
+   * Quando `isLoading` é true, exibe Skeletons.
+   * Se houver um item do tipo "video", ele é priorizado (aparece primeiro).
+   * @component
+   * @example
+   * ```svelte
+   * <ProductDetailFilesVertical files={data.gallery} />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+  import type { ProductDetailsImage } from "../types";
+
+  let {
+    files,
+    className,
+    isLoading = false,
+  }: {
+    files: ProductDetailsImage[];
+    className?: string;
+    isLoading?: boolean;
+  } = $props();
+
+  // Vídeo primeiro, mantendo a ordem relativa do resto
+  const sortedFiles = $derived(
+    [...(files ?? [])].sort(
+      (a, b) => (a.type === "video" ? 0 : 1) - (b.type === "video" ? 0 : 1),
+    ),
+  );
+
+  let activeIndex = $state(0);
+  const active = $derived(sortedFiles[activeIndex]);
+</script>
+
+{#snippet media(file: ProductDetailsImage, cls: string)}
+  {#if file.type === "video"}
+    <video src={file.src} class={cls} muted playsinline></video>
+  {:else}
+    <img src={file.src} alt={file.alt ?? ""} class={cls} />
+  {/if}
+{/snippet}
+
+<div class="flex flex-col gap-3 {className}">
+  {#if isLoading}
+    <div class="flex gap-3">
+      <div class="flex shrink-0 flex-col gap-2">
+        {#each Array.from( { length: Math.min(files.length || 3, 4) }, ) as _, i (i)}
+          <Skeleton class="h-16 w-16 rounded-md" />
+        {/each}
+      </div>
+      <Skeleton class="aspect-4/3 min-w-0 flex-1 rounded-lg" />
+    </div>
+  {:else if sortedFiles.length > 0}
+    <div class="flex gap-3">
+      <div class="flex shrink-0 flex-col gap-2">
+        {#each sortedFiles as file, i (file.src)}
+          <button
+            type="button"
+            aria-label={file.alt ?? `Item ${i + 1}`}
+            onclick={() => (activeIndex = i)}
+            class="relative overflow-hidden rounded-md border transition-opacity {i ===
+            activeIndex
+              ? 'border-foreground opacity-100'
+              : 'border-muted opacity-60 hover:opacity-100'}"
+          >
+            {@render media(file, "h-16 w-16 object-cover")}
+            {#if file.type === "video"}
+              <span
+                class="absolute inset-0 flex items-center justify-center bg-black/30"
+              >
+                <svg
+                  viewBox="0 0 24 24"
+                  class="h-4 w-4 fill-white"
+                  aria-hidden="true"
+                >
+                  <path d="M8 5v14l11-7z" />
+                </svg>
+              </span>
+            {/if}
+          </button>
+        {/each}
+      </div>
+
+      <div class="min-w-0 flex-1 overflow-hidden rounded-lg border">
+        {#if active.type === "video"}
+          <!-- svelte-ignore a11y_media_has_caption -->
+          <video
+            src={active.src}
+            class="aspect-4/3 w-full object-cover"
+            controls
+            playsinline
+          ></video>
+        {:else}
+          {@render media(active, "aspect-4/3 w-full object-cover")}
+        {/if}
+      </div>
+    </div>
+  {/if}
+</div>