negodesign 0.0.71 → 0.0.73

package/README.md

@@ -1,42 +1,134 @@
-# sv
+# NegoDesign
 
-Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+<div align="center">
 
-## Creating a project
+**A Svelte 5 component library for building modern, fast and beautiful web applications.**
 
-If you're seeing this, you've probably already done this step. Congrats!
+</div>
 
-```sh
-# create a new project
-npx sv create my-app
+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";
 ```
 
-To recreate this project with the same configuration:
+Or from your root layout:
 
-```sh
-# recreate this project
-npx sv@0.16.5 create --template minimal --types ts --add eslint vitest="usages:unit,component" tailwindcss="plugins:typography,forms" --install npm negodesign
+```svelte
+<script lang="ts">
+  import "negodesign/styles.css";
+  import "../app.css";
+</script>
 ```
 
-## Developing
+### Usage
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+```svelte
+<script lang="ts">
+  import { Menu } from "negodesign";
+  import { Home01Icon, Hotel01Icon } from "@hugeicons/core-free-icons";
 
-```sh
-npm run dev
+  const links = [
+    { label: "Home", url: "/", icon: Home01Icon },
+    { label: "Accommodation", url: "/accommodation", icon: Hotel01Icon },
+  ];
+</script>
 
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
+<Menu isBorder navMenu={{ links }} />
 ```
 
-## Building
+### 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`:
 
-To create a production version of your app:
+- **Getting Started** — `/docs`
+- **Installation** — `/docs/installation`
+- **Components** — `/docs/components` and `/docs/<component>`
 
-```sh
-npm run build
+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
 ```
 
-You can preview the production build with `npm run preview`.
+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
 
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+Licensed under the [MIT](https://opensource.org/license/mit) License.

package/dist/components/NegoDesign.svelte

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

package/dist/components/core/carousel/badge/ui/CarouselBadge.svelte

@@ -32,6 +32,7 @@
   const responsive = useDevice();
   const skeletonCount = $derived(responsive.isMobile ? 2 : 8);
 
+  // svelte-ignore state_referenced_locally
   let selectedValue = $state<string | undefined>(menuKey ?? "");
 
   function isSelected(item: (typeof items)[number]) {
@@ -73,12 +74,9 @@
         </div>
       {:else}
         {#each items as item, i (`badge-${i}-${item.value ?? item.label ?? i}`)}
-          <Carousel.Item
-            class="basis-auto relative"
-            onclick={() => selectItem(item)}
-          >
+          <Carousel.Item onclick={() => selectItem(item)}>
             <div
-              class="flex gap-1 mx-2 p-1 justify-center items-center cursor-pointer relative hover:text-lg hover:font-bold
+              class="flex gap-1 mx-2 p-1 justify-center w-min items-center cursor-pointer relative hover:text-lg hover:font-bold
             {isSelected(item)
                 ? isInlineBorder
                   ? 'text-gradient font-bold'

package/dist/components/core/carousel/grid/shared/ui/CarouselGridSlot.svelte

@@ -3,7 +3,7 @@
   import CarouselSlot from "../../../../panel/CarouselSlot.svelte";
   import type { CarouselSlotProps } from "../../../../panel/type";
   import { useDevice } from "../../../../../../hooks/responsive.svelte";
-  import Autoplay from "embla-carousel-autoplay";
+  import { autoplay } from "../../../../../ui/carousel/autoplay.js";
   import type { GridProps } from "../../../../grid/data/types";
   import SimpleGrid from "../../../../grid/ui/ItemsSimpleGrid.svelte";
 
@@ -25,7 +25,7 @@
 {#if responsive.isMobile}
   <CarouselSlot
     {...slotProps}
-    plugins={[Autoplay({ delay: 4000, stopOnInteraction: true })]}
+    plugins={[autoplay({ delay: 4000, stopOnInteraction: true })]}
   >
     {@render children()}
   </CarouselSlot>

package/dist/components/core/carousel/highlights/ui/CarouselHighlights.svelte

@@ -7,7 +7,7 @@
   import type { CarouselHighlightsProps } from "../types";
   import { useDevice } from "../../../../../hooks/responsive.svelte";
   import { t } from "../../../../../i18n";
-  import Autoplay from "embla-carousel-autoplay";
+  import { autoplay } from "../../../../ui/carousel/autoplay.js";
 
   const {
     headerProps,
@@ -34,7 +34,7 @@
   {:else}
     <CarouselSlot
       {...slotProps}
-      plugins={[Autoplay({ delay: 4000, stopOnInteraction: true })]}
+      plugins={[autoplay({ delay: 4000, stopOnInteraction: true })]}
     >
       {#if isLoading}
         {#each Array.from( { length: responsive.isMobile ? 5 : 10 }, ) as _, i (`loading-${i}`)}

package/dist/components/core/carousel/product/ui/CarouselProduct.svelte

@@ -6,7 +6,7 @@
   import CarouselHeader from "../../shared/ui/CarouselHeader.svelte";
   import { useDevice } from "../../../../../hooks/responsive.svelte";
   import { t } from "../../../../../i18n";
-  import Autoplay from "embla-carousel-autoplay";
+  import { autoplay } from "../../../../ui/carousel/autoplay.js";
   import CardProduct from "../../../card/product/CardProduct.svelte";
 
   const {
@@ -32,7 +32,7 @@
     <CarouselSlot
       {...slotProps}
       containerClass="w-full"
-      plugins={[Autoplay({ delay: 4000, stopOnInteraction: true })]}
+      plugins={[autoplay({ delay: 4000, stopOnInteraction: true })]}
     >
       {#if isLoading}
         {#each Array.from( { length: responsive.isMobile ? 5 : 10 }, ) as _, i (`loading-${i}`)}

package/dist/components/core/carousel/promotion/ui/CarouselPromotion.svelte

@@ -7,7 +7,7 @@
   import CarouselHeader from "../../shared/ui/CarouselHeader.svelte";
   import { useDevice } from "../../../../../hooks/responsive.svelte";
   import { t } from "../../../../../i18n";
-  import Autoplay from "embla-carousel-autoplay";
+  import { autoplay } from "../../../../ui/carousel/autoplay.js";
 
   const {
     headerProps,
@@ -35,7 +35,7 @@
     <CarouselSlot
       {...slotProps}
       containerClass="w-full"
-      plugins={[Autoplay({ delay: 4000, stopOnInteraction: true })]}
+      plugins={[autoplay({ delay: 4000, stopOnInteraction: true })]}
     >
       {#if isLoading}
         {#each Array.from( { length: responsive.isMobile ? 5 : 10 }, ) as _, i (`loading-${i}`)}

package/dist/components/core/datatable/data/columns-create.d.ts

@@ -1,3 +1,3 @@
-import type { ColumnDef } from "@tanstack/table-core";
+import type { ColumnDef } from "../../../ui/data-table";
 export declare function createDragColumn<T>(): ColumnDef<T>;
 export declare function createSelectColumn<T>(): ColumnDef<T>;

package/dist/components/core/datatable/data/data-table.d.ts

@@ -1,4 +1,4 @@
-import type { CellContext, HeaderContext } from "@tanstack/table-core";
+import type { CellContext, HeaderContext } from "../../../ui/data-table";
 import type { Component } from "svelte";
 /**
  * Definição completa de uma tabela de dados genérica.
@@ -13,9 +13,9 @@ export interface DataTableItem<T = unknown> {
         /** Chave de acesso ao valor na linha (ex: "name", "email") */
         accessorKey: string;
         /** Cabeçalho da coluna: string estática ou função que renderiza componente customizado */
-        header: string | ((context: HeaderContext<T, unknown>) => any);
+        header: string | ((context: HeaderContext<T, unknown>) => unknown);
         /** Conteúdo da célula: string (valor simples) ou função que renderiza componente customizado */
-        cell: string | ((context: CellContext<T, unknown>) => any);
+        cell: string | ((context: CellContext<T, unknown>) => unknown);
         /** Habilita/desabilita ordenação nesta coluna */
         enableSorting?: boolean;
         /** Habilita/desabilita ocultação da coluna */

package/dist/components/core/datatable/data/resolve-cell-badge.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { CellContext } from "@tanstack/table-core";
+import type { CellContext } from "../../../ui/data-table";
 type BadgeConfig = {
     className?: string;
     value: string;
     label?: string;
 };
-export declare function resolveCellBadge<T>(configCell: string | ((context: CellContext<T, unknown>) => any), badge?: BadgeConfig[]): (context: CellContext<T, unknown>) => any;
+export declare function resolveCellBadge<T>(configCell: string | ((context: CellContext<T, unknown>) => unknown), badge?: BadgeConfig[]): (context: CellContext<T, unknown>) => unknown;
 export {};

package/dist/components/core/datatable/data/resolve-cell-badge.svelte.js

@@ -1,11 +1,12 @@
 import { renderComponent, renderSnippet } from "../../../ui/data-table";
 import { createRawSnippet } from "svelte";
+import { SvelteMap } from "svelte/reactivity";
 import { Badge } from "../../../ui/badge";
 import { resolveCell } from "./resolve-cell.svelte";
 export function resolveCellBadge(configCell, badge) {
     if (typeof configCell === "string" && badge && badge.length > 0) {
         const key = configCell;
-        const badgeMap = new Map(badge.map((b) => [b.value, b]));
+        const badgeMap = new SvelteMap(badge.map((b) => [b.value, b]));
         return ({ row }) => {
             const cellValue = String(row.original[key]);
             const matchedBadge = badgeMap.get(cellValue);

package/dist/components/core/datatable/data/resolve-cell.svelte.d.ts

@@ -1,2 +1,2 @@
-import type { CellContext } from "@tanstack/table-core";
-export declare function resolveCell<T>(configCell: string | ((context: CellContext<T, unknown>) => any)): (context: CellContext<T, unknown>) => any;
+import type { CellContext } from "../../../ui/data-table";
+export declare function resolveCell<T>(configCell: string | ((context: CellContext<T, unknown>) => unknown)): (context: CellContext<T, unknown>) => unknown;

package/dist/components/core/datatable/data/resolve-header.svelte.d.ts

@@ -1,2 +1,2 @@
-import type { HeaderContext } from "@tanstack/table-core";
-export declare function resolveHeader<T>(configHeader: string | ((context: HeaderContext<T, unknown>) => any)): (context: HeaderContext<T, unknown>) => any;
+import type { HeaderContext } from "../../../ui/data-table";
+export declare function resolveHeader<T>(configHeader: string | ((context: HeaderContext<T, unknown>) => unknown)): (context: HeaderContext<T, unknown>) => unknown;

package/dist/components/core/datatable/ui/DataTableActions.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" generics="T">
-    import type { CellContext } from "@tanstack/table-core";
+    import type { CellContext } from "../../../ui/data-table";
     import * as DropdownMenu from "../../../ui/dropdown-menu/index.js";
     import Button from "../../../ui/button/button.svelte";
     import { MoreHorizontalIcon } from "@hugeicons/core-free-icons";

package/dist/components/core/datatable/ui/DataTableActions.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { CellContext } from "@tanstack/table-core";
+import type { CellContext } from "../../../ui/data-table";
 declare function $$render<T>(): {
     props: CellContext<T, unknown>;
     exports: {};

package/dist/components/core/datatable/ui/DataTableContent.svelte

@@ -2,7 +2,7 @@
     import type {
         ColumnDef,
         Table as TanstackTable,
-    } from "@tanstack/table-core";
+    } from "../../../ui/data-table";
     import * as Table from "../../../ui/table/index.js";
     import FlexRender from "../../../ui/data-table/flex-render.svelte";
 

package/dist/components/core/datatable/ui/DataTableContent.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ColumnDef, Table as TanstackTable } from "@tanstack/table-core";
+import type { ColumnDef, Table as TanstackTable } from "../../../ui/data-table";
 declare function $$render<T>(): {
     props: {
         table: TanstackTable<T>;

package/dist/components/core/datatable/ui/DataTableCore.svelte

@@ -11,7 +11,7 @@
         getFilteredRowModel,
         getPaginationRowModel,
         getSortedRowModel,
-    } from "@tanstack/table-core";
+    } from "../../../ui/data-table";
     import type { DataTableItem } from "../data/data-table";
     import { resolveHeader } from "../data/resolve-header.svelte";
     import { resolveCellBadge } from "../data/resolve-cell-badge.svelte";
@@ -92,53 +92,50 @@
                     | PaginationState
                     | ((arg0: PaginationState) => PaginationState),
             ) => {
-                if (typeof updater === "function") {
-                    pagination = updater(pagination);
-                } else {
-                    pagination = updater;
-                }
+                pagination =
+                    typeof updater === "function"
+                        ? updater(pagination)
+                        : updater;
+                return pagination;
             },
             onSortingChange: (
                 updater: SortingState | ((arg0: SortingState) => SortingState),
             ) => {
-                if (typeof updater === "function") {
-                    sorting = updater(sorting);
-                } else {
-                    sorting = updater;
-                }
+                sorting = typeof updater === "function" ? updater(sorting) : updater;
+                return sorting;
             },
             onColumnFiltersChange: (
                 updater:
                     | ColumnFiltersState
                     | ((arg0: ColumnFiltersState) => ColumnFiltersState),
             ) => {
-                if (typeof updater === "function") {
-                    columnFilters = updater(columnFilters);
-                } else {
-                    columnFilters = updater;
-                }
+                columnFilters =
+                    typeof updater === "function"
+                        ? updater(columnFilters)
+                        : updater;
+                return columnFilters;
             },
             onColumnVisibilityChange: (
                 updater:
                     | VisibilityState
                     | ((arg0: VisibilityState) => VisibilityState),
             ) => {
-                if (typeof updater === "function") {
-                    columnVisibility = updater(columnVisibility);
-                } else {
-                    columnVisibility = updater;
-                }
+                columnVisibility =
+                    typeof updater === "function"
+                        ? updater(columnVisibility)
+                        : updater;
+                return columnVisibility;
             },
             onRowSelectionChange: (
                 updater:
                     | RowSelectionState
                     | ((arg0: RowSelectionState) => RowSelectionState),
             ) => {
-                if (typeof updater === "function") {
-                    rowSelection = updater(rowSelection);
-                } else {
-                    rowSelection = updater;
-                }
+                rowSelection =
+                    typeof updater === "function"
+                        ? updater(rowSelection)
+                        : updater;
+                return rowSelection;
             },
         }),
     );

package/dist/components/core/datatable/ui/DataTableListFilter.svelte

@@ -4,7 +4,7 @@
     import { Input } from "../../../ui/input/index.js";
     import { ArrowDown01Icon } from "@hugeicons/core-free-icons";
     import { HugeiconsIcon } from "@hugeicons/svelte";
-    import type { Table } from "@tanstack/table-core";
+    import type { Table } from "../../../ui/data-table";
 
     type Props = {
         table: Table<T>;
@@ -24,8 +24,9 @@
             column &&
             table.getColumn(column)?.setFilterValue(e.currentTarget.value)}
         onchange={(e) => {
-            column &&
+            if (column) {
                 table.getColumn(column)?.setFilterValue(e.currentTarget.value);
+            }
         }}
         class="max-w-sm"
     />

package/dist/components/core/datatable/ui/DataTableListFilter.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Table } from "@tanstack/table-core";
+import type { Table } from "../../../ui/data-table";
 declare function $$render<T>(): {
     props: {
         table: Table<T>;

package/dist/components/core/datatable/ui/DataTableListPagination.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" generics="T">
     import Button from "../../../ui/button/button.svelte";
-    import type { Table } from "@tanstack/table-core";
+    import type { Table } from "../../../ui/data-table";
 
     type Props = {
         table: Table<T>;

package/dist/components/core/datatable/ui/DataTableListPagination.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Table } from "@tanstack/table-core";
+import type { Table } from "../../../ui/data-table";
 declare function $$render<T>(): {
     props: {
         table: Table<T>;

package/dist/components/core/datatable/ui/columns-create.svelte.d.ts

@@ -1,3 +1,3 @@
-import type { ColumnDef } from "@tanstack/table-core";
+import type { ColumnDef } from "../../../ui/data-table";
 export declare function createDragColumn<T>(): ColumnDef<T>;
 export declare function createSelectColumn<T>(): ColumnDef<T>;

package/dist/components/core/panel/LeftHero.svelte

@@ -57,12 +57,12 @@
       {#if currentItem}
         {#key currentIndex}
           <div
-            class="text-xl md:text-2xl font-bold tracking-tight mb-4 leading-tight animate-in fade-in duration-300"
+            class="text-xl md:text-2xl font-bold tracking-tight mb-4 leading-tight animate-fade-in duration-300"
           >
             {currentItem.title}
           </div>
           <p
-            class=" text-sm mb-6 leading-relaxed animate-in fade-in duration-300"
+            class=" text-sm mb-6 leading-relaxed animate-fade-in duration-300"
           >
             {currentItem.description}
           </p>

package/dist/components/core/sidebar/data/nav-top-bar-sidebar.d.ts

@@ -1,21 +1,30 @@
+import type { Component } from "svelte";
 export interface NavTopBarSidebarItem {
     content: {
-        logo?: any;
+        logo?: Component<{
+            class?: string;
+        }>;
         title: string;
         subtitle: string;
     };
     dropdownMenu?: {
         header: {
-            icon?: any;
+            icon?: Component<{
+                class?: string;
+            }>;
             text: string;
         };
         items?: {
-            icon: any;
+            icon: Component<{
+                class?: string;
+            }>;
             text: string;
             onclick?: () => void;
         }[];
         footer?: {
-            icon?: any;
+            icon?: Component<{
+                class?: string;
+            }>;
             text: string;
         };
     };

package/dist/components/core/sidebar/ui/navbar/NavMenuBarSidebar.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-  /* eslint-disable @typescript-eslint/no-explicit-any */
   import * as Collapsible from "../../../../ui/collapsible/index.js";
   import * as Sidebar from "../../../../ui/sidebar/index.js";
-  import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+  import { ChevronRightIcon } from "@hugeicons/core-free-icons";
   import { HugeiconsIcon } from "@hugeicons/svelte";
   import type {
     NavMenuAndSubmenuSidebarProps,
@@ -43,7 +42,8 @@
                   <HugeiconsIcon icon={item.icon} />
                 {/if}
                 <span>{item.title}</span>
-                <ChevronRightIcon
+                <HugeiconsIcon
+                  icon={ChevronRightIcon}
                   class="ms-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
                 />
               </Sidebar.MenuButton>

package/dist/components/core/sidebar/ui/navbar/NavMenuTopBarSidebar.svelte

@@ -6,8 +6,6 @@
 	import { HugeiconsIcon } from "@hugeicons/svelte";
 	import { UnfoldMoreIcon } from "@hugeicons/core-free-icons";
 
-	// This should be `Component` after @lucide/svelte updates types
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	let { content, dropdownMenu }: NavTopBarSidebarItem = $props();
 	const sidebar = useSidebar();
 </script>

package/dist/components/core/sidebar/ui/navbar/nav-menu-header-sidebar.svelte

@@ -2,10 +2,9 @@
   import * as DropdownMenu from "../../../../ui/dropdown-menu/index.js";
   import * as Sidebar from "../../../../ui/sidebar/index.js";
   import { useSidebar } from "../../../../ui/sidebar/index.js";
-  import ChevronsUpDownIcon from "@lucide/svelte/icons/chevrons-up-down";
-  import PlusIcon from "@lucide/svelte/icons/plus";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { PlusSignIcon, UnfoldMoreIcon } from "@hugeicons/core-free-icons";
 
-  // This should be `Component` after @lucide/svelte updates types
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   let { teams }: { teams: { name: string; logo: any; plan: string }[] } =
     $props();
@@ -36,7 +35,7 @@
               </span>
               <span class="truncate text-xs">{activeTeam.plan}</span>
             </div>
-            <ChevronsUpDownIcon class="ms-auto" />
+            <HugeiconsIcon icon={UnfoldMoreIcon} class="ms-auto" />
           </Sidebar.MenuButton>
         {/snippet}
       </DropdownMenu.Trigger>
@@ -68,7 +67,7 @@
           <div
             class="flex size-6 items-center justify-center rounded-md border bg-transparent"
           >
-            <PlusIcon class="size-4" />
+            <HugeiconsIcon icon={PlusSignIcon} class="size-4" />
           </div>
           <div class="text-muted-foreground font-medium">Add team</div>
         </DropdownMenu.Item>

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

@@ -38,7 +38,6 @@
 
 {#snippet media(file: ProductDetailsImage, cls: string)}
   {#if file.type === "video"}
-    <!-- svelte-ignore a11y_media_has_caption -->
     <video src={file.src} class={cls} muted playsinline></video>
   {:else}
     <img src={file.src} alt={file.alt ?? ""} class={cls} />