@brumaombra/ui-vintage 0.9.0 → 0.9.1

package/AGENTS.md

@@ -30,7 +30,7 @@ Only build something new when no entry point fits, and compose it from library p
 - Customize components through their props and the `class` prop (merged with tailwind-merge) rather than wrapping them in extra styled elements.
 - Keep corners at `rounded` (the library's square look) and use `shadow-elevated-sm|md|lg|xl` for elevation, without glows or gradients.
 - For motion, reuse the library utilities (`ease-spring`, `ease-out-expo`, `animate-uv-fade-up`, `animate-uv-pop`, `uv-floating-motion`). In custom transitions, name `scale`, `rotate`, and `translate` explicitly; Tailwind v4 doesn't animate them through `transform`.
-- Icons are Hugeicons definitions: import them from `@hugeicons/core-free-icons` and pass them to `:icon` props, or render them with `HugeiconsIcon` from `@hugeicons/vue`. Both packages are peer dependencies, so the app must list them in its own `package.json`.
+- Icons are Hugeicons definitions: import each one from its own module (`import Rocket01Icon from '@hugeicons/core-free-icons/Rocket01Icon'`, never the `@hugeicons/core-free-icons` barrel, which makes the build parse the whole icon set) and pass them to `:icon` props, or render them with `HugeiconsIcon` from `@hugeicons/vue`. Both packages are peer dependencies, so the app must list them in its own `package.json`.
 - Form controls use `v-model`. Mark invalid fields with `aria-invalid` and show messages with `FieldError`.
 - Library strings are translated through vue-i18n (`uiVintage.*` keys). App copy belongs in the app's own locale files.
 

package/COMPONENTS.md

@@ -10,7 +10,7 @@ This file lists every public entry point of the package with its components, pro
 - Import from explicit subpaths only (for example `@brumaombra/ui-vintage/button`). There is no root barrel, and `src/` paths are internal.
 - Style with the semantic Tailwind tokens: `bg-background`, `bg-card`, `bg-surface`, `bg-accent`, `bg-primary`, `hover:bg-primary-hover`, `text-foreground`, `text-muted-foreground`, `border-border`, `border-border-strong`, `text-destructive`, `text-success`, `text-warning`, `text-info`. They switch automatically in dark mode, so do not add `dark:` color overrides.
 - Reuse the motion utilities from the stylesheet instead of custom animations: `ease-spring`, `ease-bounce`, `ease-out-expo`, `ease-snappy`, `uv-floating-motion`, `uv-modal-motion`, `uv-overlay-motion`, `uv-collapsible-motion`, `uv-field`, `animate-uv-pop`, `animate-uv-fade-up`, `animate-uv-shake`, `animate-uv-shimmer`, `animate-uv-float`, `animate-uv-ping-soft`, and elevation via `shadow-elevated-sm|md|lg|xl`. Tailwind v4 animates `scale`, `rotate`, and `translate` as separate properties, so name them (not `transform`) in custom transitions.
-- Icons are Hugeicons definitions passed as values: `import { Rocket01Icon } from '@hugeicons/core-free-icons'` then `:icon="Rocket01Icon"`, or render one with `<HugeiconsIcon :icon="Rocket01Icon" />` from `@hugeicons/vue`.
+- Icons are Hugeicons definitions passed as values, each imported from its own module: `import Rocket01Icon from '@hugeicons/core-free-icons/Rocket01Icon'` then `:icon="Rocket01Icon"`, or render one with `<HugeiconsIcon :icon="Rocket01Icon" />` from `@hugeicons/vue`.
 - Every component accepts `class`, merged with `tailwind-merge`, so utility overrides win over the defaults.
 
 ## Contents

package/README.md

@@ -101,7 +101,7 @@ Import components from their public subpath:
 <script setup>
 import { Button } from '@brumaombra/ui-vintage/button';
 import { SingleValueCard } from '@brumaombra/ui-vintage/single-value-card';
-import { Money03Icon } from '@hugeicons/core-free-icons';
+import Money03Icon from '@hugeicons/core-free-icons/Money03Icon';
 </script>
 
 <template>
@@ -364,7 +364,7 @@ demo-app/       Private showcase app (not published)
 
 `demo-app/` is a documentation-style Nuxt 4 app that shows every component with a live preview and a copyable code tab, a live mini-app on the overview page, a complete blog built with Nuxt Content, and a command palette (`Ctrl/⌘ + K`) to jump to any section. It imports the package through `file:..`, so it runs the same source that is published to npm.
 
-It needs Node.js 22.19 or newer, because Nuxt Content uses the built-in `node:sqlite` module instead of a native SQLite build.
+It needs Node.js 24.21 or newer. Nuxt Content uses the built-in `node:sqlite` module instead of a native SQLite build.
 
 ```bash
 # Install and start the demo
@@ -401,7 +401,7 @@ New entry points need an export in `package.json` and a description and category
 
 - Nuxt 4 and Vue 3.5 or newer.
 - Tailwind CSS v4 with `@tailwindcss/vite` registered in `vite.plugins`.
-- `@hugeicons/core-free-icons` 4 and `@hugeicons/vue` 1 (the icons you pass to `:icon` props, and the ones the components render).
+- `@hugeicons/core-free-icons` 4.3 or newer and `@hugeicons/vue` 1 (the icons you pass to `:icon` props, and the ones the components render). Import each icon from its own module, as in the example above: the package barrel makes the build parse the whole icon set.
 - `vue-i18n` 9, 10, or 11 with an i18n setup, such as `@nuxtjs/i18n` (the components call `useI18n()`).
 - `@nuxt/image` 2 for image components (the module installs it when needed).
 - `@nuxt/content` 3, only for the `blog` and `content` components.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@brumaombra/ui-vintage",
-    "version": "0.9.0",
+    "version": "0.9.1",
     "description": "Source-published Nuxt UI runtime with shared theme tokens and built-in Nuxt integrations.",
     "private": false,
     "author": "Mauro Brambilla",
@@ -134,7 +134,7 @@
         "test": "npm --prefix demo-app run test"
     },
     "peerDependencies": {
-        "@hugeicons/core-free-icons": "^4.1.0",
+        "@hugeicons/core-free-icons": "^4.3.0",
         "@hugeicons/vue": "^1.0.0",
         "@nuxt/content": "^3.0.0",
         "@nuxt/image": "^2.0.0",
@@ -159,8 +159,8 @@
         "tailwind-merge": "3.5.0"
     },
     "devDependencies": {
-        "@hugeicons/core-free-icons": "4.1.1",
-        "@hugeicons/vue": "1.0.5",
+        "@hugeicons/core-free-icons": "4.3.5",
+        "@hugeicons/vue": "1.0.8",
         "nuxt": "4.5.2",
         "tailwindcss": "4.2.4",
         "typescript": "5.9.3",

package/src/components/blog/BlogFAQSection.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { HelpCircleIcon } from '@hugeicons/core-free-icons';
+import HelpCircleIcon from '@hugeicons/core-free-icons/HelpCircleIcon';
 import { Accordion } from '../ui/accordion';
 import BlogSectionTitle from './BlogSectionTitle.vue';
 

package/src/components/blog/BlogHeaderSection.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { ArrowRight01Icon } from '@hugeicons/core-free-icons';
+import ArrowRight01Icon from '@hugeicons/core-free-icons/ArrowRight01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import type { HugeiconsIconDefinition } from '../../lib/common-types';
 import type { ToneColor } from '../../lib/color-tokens';

package/src/components/blog/BlogInfoSection.vue

@@ -2,7 +2,9 @@
 import { NuxtImg } from '#components';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { ArrowUpRight01Icon, Calendar03Icon, RefreshIcon } from '@hugeicons/core-free-icons';
+import ArrowUpRight01Icon from '@hugeicons/core-free-icons/ArrowUpRight01Icon';
+import Calendar03Icon from '@hugeicons/core-free-icons/Calendar03Icon';
+import RefreshIcon from '@hugeicons/core-free-icons/RefreshIcon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { Card } from '../ui/card';
 import { formatDateLongItalyTimezone } from '../../lib/utils';

package/src/components/blog/CategoryCard.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { NuxtImg } from '#components';
-import { ArrowRight01Icon, Folder01Icon } from '@hugeicons/core-free-icons';
+import ArrowRight01Icon from '@hugeicons/core-free-icons/ArrowRight01Icon';
+import Folder01Icon from '@hugeicons/core-free-icons/Folder01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { Card } from '../ui/card';
 

package/src/components/blog/HeaderCarousel.vue

@@ -2,7 +2,8 @@
 import { NuxtImg } from '#components';
 import { computed, onMounted, onUnmounted, ref, useId, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { ArrowLeft01Icon, ArrowRight01Icon } from '@hugeicons/core-free-icons';
+import ArrowLeft01Icon from '@hugeicons/core-free-icons/ArrowLeft01Icon';
+import ArrowRight01Icon from '@hugeicons/core-free-icons/ArrowRight01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { Badge } from '../ui/badge';
 import { Button } from '../ui/button';

package/src/components/blog/PostCard.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { NuxtImg } from '#components';
 import { useI18n } from 'vue-i18n';
-import { ArrowRight01Icon } from '@hugeicons/core-free-icons';
+import ArrowRight01Icon from '@hugeicons/core-free-icons/ArrowRight01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { Card } from '../ui/card';
 

package/src/components/blog/SocialShareSidebar.vue

@@ -1,7 +1,14 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { Facebook01Icon, Link01Icon, Linkedin01Icon, NewTwitterIcon, Share08Icon, TelegramIcon, Tick02Icon, WhatsappIcon } from '@hugeicons/core-free-icons';
+import Facebook01Icon from '@hugeicons/core-free-icons/Facebook01Icon';
+import Link01Icon from '@hugeicons/core-free-icons/Link01Icon';
+import Linkedin01Icon from '@hugeicons/core-free-icons/Linkedin01Icon';
+import NewTwitterIcon from '@hugeicons/core-free-icons/NewTwitterIcon';
+import Share08Icon from '@hugeicons/core-free-icons/Share08Icon';
+import TelegramIcon from '@hugeicons/core-free-icons/TelegramIcon';
+import Tick02Icon from '@hugeicons/core-free-icons/Tick02Icon';
+import WhatsappIcon from '@hugeicons/core-free-icons/WhatsappIcon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 
 // Props

package/src/components/blog/TableOfContents.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { ArrowRight01Icon, Bookmark01Icon, Cancel01Icon } from '@hugeicons/core-free-icons';
+import ArrowRight01Icon from '@hugeicons/core-free-icons/ArrowRight01Icon';
+import Bookmark01Icon from '@hugeicons/core-free-icons/Bookmark01Icon';
+import Cancel01Icon from '@hugeicons/core-free-icons/Cancel01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { Accordion } from '../ui/accordion';
 import { Button } from '../ui/button';

package/src/components/card-grid/CardGrid.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts" generic="T extends { id: PropertyKey }">
-import { PackageIcon } from '@hugeicons/core-free-icons';
+import PackageIcon from '@hugeicons/core-free-icons/PackageIcon';
 import { EmptyStateCard } from '../empty-state-card';
 import { LoadMoreButton } from '../load-more-button';
 import { LoadingStateCard } from '../loading-state-card';

package/src/components/chip/Chip.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Cancel01Icon } from '@hugeicons/core-free-icons';
+import Cancel01Icon from '@hugeicons/core-free-icons/Cancel01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { computed } from 'vue';
 import type { HTMLAttributes } from 'vue';

package/src/components/confirm-dialog/ConfirmDialog.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { computed, ref } from 'vue';
-import { InformationCircleIcon } from '@hugeicons/core-free-icons';
+import InformationCircleIcon from '@hugeicons/core-free-icons/InformationCircleIcon';
 import { AlertDialog, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '../ui/alert-dialog';
 import { Button } from '../ui/button';
 import { cancelActiveConfirmDialog, closeConfirmDialog, confirmActiveDialog, confirmDialogState } from './confirm-dialog-state';

package/src/components/content/BlogList.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { Cancel01Icon, Tick02Icon } from '@hugeicons/core-free-icons';
+import Cancel01Icon from '@hugeicons/core-free-icons/Cancel01Icon';
+import Tick02Icon from '@hugeicons/core-free-icons/Tick02Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { Card } from '../ui/card';
 

package/src/components/content/CodeBlock.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { CheckmarkCircle02Icon, Copy01Icon, CodeIcon } from '@hugeicons/core-free-icons';
+import CheckmarkCircle02Icon from '@hugeicons/core-free-icons/CheckmarkCircle02Icon';
+import CodeIcon from '@hugeicons/core-free-icons/CodeIcon';
+import Copy01Icon from '@hugeicons/core-free-icons/Copy01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';

package/src/components/content/ProseHr.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ChartLineData02Icon } from '@hugeicons/core-free-icons';
+import ChartLineData02Icon from '@hugeicons/core-free-icons/ChartLineData02Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import type { HugeiconsIconDefinition } from '../../lib/common-types';
 

package/src/components/content/Terminal.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { CheckmarkCircle02Icon, Copy01Icon, TerminalIcon } from '@hugeicons/core-free-icons';
+import CheckmarkCircle02Icon from '@hugeicons/core-free-icons/CheckmarkCircle02Icon';
+import Copy01Icon from '@hugeicons/core-free-icons/Copy01Icon';
+import TerminalIcon from '@hugeicons/core-free-icons/TerminalIcon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';

package/src/components/empty-state-card/EmptyStateCard.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { PackageIcon } from '@hugeicons/core-free-icons';
+import PackageIcon from '@hugeicons/core-free-icons/PackageIcon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { Card, CardContent } from '../ui/card';
 import type { HeadingLevel, HugeiconsIconDefinition } from '../../lib/common-types';

package/src/components/error-page/ErrorPage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ArrowLeft01Icon } from '@hugeicons/core-free-icons';
+import ArrowLeft01Icon from '@hugeicons/core-free-icons/ArrowLeft01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { computed, type HTMLAttributes } from 'vue';
 import { useI18n } from 'vue-i18n';

package/src/components/landing/landing-footer/LandingFooter.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { NuxtImg } from '#components';
-import { FavouriteIcon } from '@hugeicons/core-free-icons';
+import FavouriteIcon from '@hugeicons/core-free-icons/FavouriteIcon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { computed, type Component, type HTMLAttributes } from 'vue';
 import { useI18n } from 'vue-i18n';

package/src/components/language-selector/LanguageSelector.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, defineAsyncComponent, ref, type Component } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { Tick02Icon } from '@hugeicons/core-free-icons';
+import Tick02Icon from '@hugeicons/core-free-icons/Tick02Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { Button } from '../ui/button';
 import { Command, CommandGroup, CommandItem, CommandList } from '../ui/command';

package/src/components/load-more-button/LoadMoreButton.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { ArrowDown01Icon, RefreshIcon } from '@hugeicons/core-free-icons';
+import ArrowDown01Icon from '@hugeicons/core-free-icons/ArrowDown01Icon';
+import RefreshIcon from '@hugeicons/core-free-icons/RefreshIcon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { Button } from '../ui/button';
 

package/src/components/loading-state-card/LoadingStateCard.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { Loading03Icon } from '@hugeicons/core-free-icons';
+import Loading03Icon from '@hugeicons/core-free-icons/Loading03Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { Card, CardContent } from '../ui/card';
 import type { HeadingLevel, HugeiconsIconDefinition } from '../../lib/common-types';

package/src/components/message-dialog/MessageDialog.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { computed } from 'vue';
-import { AlertCircleIcon, InformationCircleIcon, Tick02Icon } from '@hugeicons/core-free-icons';
+import AlertCircleIcon from '@hugeicons/core-free-icons/AlertCircleIcon';
+import InformationCircleIcon from '@hugeicons/core-free-icons/InformationCircleIcon';
+import Tick02Icon from '@hugeicons/core-free-icons/Tick02Icon';
 import { AlertDialog, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '../ui/alert-dialog';
 import { Button } from '../ui/button';
 import { getUiVintageRuntimeMessage } from '../../lib/i18n';

package/src/components/message-toast/MessageToast.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
-import { AlertCircleIcon, Cancel01Icon, CheckmarkCircle02Icon, InformationCircleIcon } from '@hugeicons/core-free-icons';
+import AlertCircleIcon from '@hugeicons/core-free-icons/AlertCircleIcon';
+import Cancel01Icon from '@hugeicons/core-free-icons/Cancel01Icon';
+import CheckmarkCircle02Icon from '@hugeicons/core-free-icons/CheckmarkCircle02Icon';
+import InformationCircleIcon from '@hugeicons/core-free-icons/InformationCircleIcon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { computed, onBeforeUnmount, reactive, ref, watch } from 'vue';
 import { getUiVintageRuntimeMessage } from '../../lib/i18n';

package/src/components/single-value-card/SingleValueCard.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { HTMLAttributes } from 'vue';
-import { ArrowDownRight01Icon, ArrowUpRight01Icon } from '@hugeicons/core-free-icons';
+import ArrowDownRight01Icon from '@hugeicons/core-free-icons/ArrowDownRight01Icon';
+import ArrowUpRight01Icon from '@hugeicons/core-free-icons/ArrowUpRight01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { AnimatedNumber } from '../ui/animated-number';
 import { Card } from '../ui/card';

package/src/components/theme-selector/ThemeSelector.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { LaptopIcon, Moon01Icon, Sun01Icon, Tick02Icon } from '@hugeicons/core-free-icons';
+import LaptopIcon from '@hugeicons/core-free-icons/LaptopIcon';
+import Moon01Icon from '@hugeicons/core-free-icons/Moon01Icon';
+import Sun01Icon from '@hugeicons/core-free-icons/Sun01Icon';
+import Tick02Icon from '@hugeicons/core-free-icons/Tick02Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { Button } from '../ui/button';
 import { Command, CommandGroup, CommandItem, CommandList } from '../ui/command';

package/src/components/ui/accordion/Accordion.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
 import { computed, ref, useId } from 'vue';
-import { ArrowDown01Icon } from '@hugeicons/core-free-icons';
+import ArrowDown01Icon from '@hugeicons/core-free-icons/ArrowDown01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { Card } from '../card';
 import { cn } from '../../../lib/utils';

package/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
-import { MoreHorizontalIcon } from '@hugeicons/core-free-icons';
+import MoreHorizontalIcon from '@hugeicons/core-free-icons/MoreHorizontalIcon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { useI18n } from 'vue-i18n';
 import { cn } from '../../../lib/utils';

package/src/components/ui/calendar/CalendarNextButton.vue

@@ -2,7 +2,7 @@
 import type { CalendarNextProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
-import { ArrowRight01Icon } from '@hugeicons/core-free-icons';
+import ArrowRight01Icon from '@hugeicons/core-free-icons/ArrowRight01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { CalendarNext, useForwardProps } from 'reka-ui';
 import { cn } from '../../../lib/utils';

package/src/components/ui/calendar/CalendarPrevButton.vue

@@ -2,7 +2,7 @@
 import type { CalendarPrevProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
-import { ArrowLeft01Icon } from '@hugeicons/core-free-icons';
+import ArrowLeft01Icon from '@hugeicons/core-free-icons/ArrowLeft01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { CalendarPrev, useForwardProps } from 'reka-ui';
 import { cn } from '../../../lib/utils';

package/src/components/ui/combobox/ComboboxItem.vue

@@ -2,7 +2,7 @@
 import type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
-import { Tick02Icon } from '@hugeicons/core-free-icons';
+import Tick02Icon from '@hugeicons/core-free-icons/Tick02Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { ComboboxItem, ComboboxItemIndicator, useForwardPropsEmits } from 'reka-ui';
 import { cn } from '../../../lib/utils';

package/src/components/ui/combobox/ComboboxSelect.vue

@@ -2,7 +2,8 @@
 import type { HTMLAttributes } from 'vue';
 import type { AcceptableValue } from 'reka-ui';
 import { computed, ref } from 'vue';
-import { Cancel01Icon, Search01Icon } from '@hugeicons/core-free-icons';
+import Cancel01Icon from '@hugeicons/core-free-icons/Cancel01Icon';
+import Search01Icon from '@hugeicons/core-free-icons/Search01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { useI18n } from 'vue-i18n';
 import { cn } from '../../../lib/utils';

package/src/components/ui/combobox/ComboboxTrigger.vue

@@ -2,7 +2,7 @@
 import type { ComboboxTriggerProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
-import { ArrowDown01Icon } from '@hugeicons/core-free-icons';
+import ArrowDown01Icon from '@hugeicons/core-free-icons/ArrowDown01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { ComboboxTrigger, useForwardProps } from 'reka-ui';
 import { cn } from '../../../lib/utils';

package/src/components/ui/command/CommandInput.vue

@@ -2,7 +2,7 @@
 import type { ListboxFilterProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
-import { Search01Icon } from '@hugeicons/core-free-icons';
+import Search01Icon from '@hugeicons/core-free-icons/Search01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { ListboxFilter, useForwardProps } from 'reka-ui';
 import { cn } from '../../../lib/utils';

package/src/components/ui/data-table/DataTable.vue

@@ -2,7 +2,8 @@
 import type { HTMLAttributes } from 'vue';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { ArrowUp01Icon, PackageIcon } from '@hugeicons/core-free-icons';
+import ArrowUp01Icon from '@hugeicons/core-free-icons/ArrowUp01Icon';
+import PackageIcon from '@hugeicons/core-free-icons/PackageIcon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { cn } from '../../../lib/utils';
 import { Checkbox } from '../checkbox';

package/src/components/ui/date-picker/DatePicker.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
 import { DateFormatter, getLocalTimeZone, today, } from '@internationalized/date';
-import { Calendar03Icon } from '@hugeicons/core-free-icons';
+import Calendar03Icon from '@hugeicons/core-free-icons/Calendar03Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import type { DateValue } from 'reka-ui';
 import { computed, ref } from 'vue';

package/src/components/ui/dialog/DialogContent.vue

@@ -3,7 +3,7 @@ import type { DialogContentEmits, DialogContentProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
 import { DialogClose, DialogContent, DialogPortal, useForwardPropsEmits } from 'reka-ui';
-import { Cancel01Icon } from '@hugeicons/core-free-icons';
+import Cancel01Icon from '@hugeicons/core-free-icons/Cancel01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { useI18n } from 'vue-i18n';
 import { cn } from '../../../lib/utils';

package/src/components/ui/dialog/DialogScrollContent.vue

@@ -3,7 +3,7 @@ import type { DialogContentEmits, DialogContentProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
 import { DialogClose, DialogContent, DialogOverlay, DialogPortal, useForwardPropsEmits } from 'reka-ui';
-import { Cancel01Icon } from '@hugeicons/core-free-icons';
+import Cancel01Icon from '@hugeicons/core-free-icons/Cancel01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { useI18n } from 'vue-i18n';
 import { cn } from '../../../lib/utils';

package/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -2,7 +2,7 @@
 import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
-import { Tick02Icon } from '@hugeicons/core-free-icons';
+import Tick02Icon from '@hugeicons/core-free-icons/Tick02Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { DropdownMenuCheckboxItem, DropdownMenuItemIndicator, useForwardPropsEmits } from 'reka-ui';
 import { cn } from '../../../lib/utils';

package/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue

@@ -2,7 +2,7 @@
 import type { DropdownMenuSubTriggerProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
-import { ArrowRight01Icon } from '@hugeicons/core-free-icons';
+import ArrowRight01Icon from '@hugeicons/core-free-icons/ArrowRight01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { DropdownMenuSubTrigger, useForwardProps } from 'reka-ui';
 import { cn } from '../../../lib/utils';

package/src/components/ui/file-dropzone/FileDropzone.vue

@@ -2,7 +2,16 @@
 import type { HTMLAttributes } from 'vue';
 import type { HugeiconsIconDefinition } from '../../../lib/common-types';
 import type { FileRejection } from '.';
-import { Cancel01Icon, CloudUploadIcon, Doc01Icon, File01Icon, FileZipIcon, Image01Icon, MusicNote01Icon, Pdf01Icon, Video01Icon, Xls01Icon } from '@hugeicons/core-free-icons';
+import Cancel01Icon from '@hugeicons/core-free-icons/Cancel01Icon';
+import CloudUploadIcon from '@hugeicons/core-free-icons/CloudUploadIcon';
+import Doc01Icon from '@hugeicons/core-free-icons/Doc01Icon';
+import File01Icon from '@hugeicons/core-free-icons/File01Icon';
+import FileZipIcon from '@hugeicons/core-free-icons/FileZipIcon';
+import Image01Icon from '@hugeicons/core-free-icons/Image01Icon';
+import MusicNote01Icon from '@hugeicons/core-free-icons/MusicNote01Icon';
+import Pdf01Icon from '@hugeicons/core-free-icons/Pdf01Icon';
+import Video01Icon from '@hugeicons/core-free-icons/Video01Icon';
+import Xls01Icon from '@hugeicons/core-free-icons/Xls01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { computed, onBeforeUnmount, ref } from 'vue';
 import { useI18n } from 'vue-i18n';

package/src/components/ui/native-select/NativeSelect.vue

@@ -2,7 +2,7 @@
 import type { AcceptableValue } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit, useVModel } from '@vueuse/core';
-import { ArrowDown01Icon } from '@hugeicons/core-free-icons';
+import ArrowDown01Icon from '@hugeicons/core-free-icons/ArrowDown01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { cn } from '../../../lib/utils';
 import { useFieldControlId } from '../field/field-context';

package/src/components/ui/number-field/NumberField.vue

@@ -3,7 +3,8 @@ import type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { computed, nextTick, ref, watch } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
-import { MinusSignIcon, PlusSignIcon } from '@hugeicons/core-free-icons';
+import MinusSignIcon from '@hugeicons/core-free-icons/MinusSignIcon';
+import PlusSignIcon from '@hugeicons/core-free-icons/PlusSignIcon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot, useForwardPropsEmits } from 'reka-ui';
 import { useI18n } from 'vue-i18n';

package/src/components/ui/pagination/PaginationEllipsis.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { PaginationEllipsisProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
-import { MoreHorizontalIcon } from '@hugeicons/core-free-icons';
+import MoreHorizontalIcon from '@hugeicons/core-free-icons/MoreHorizontalIcon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { reactiveOmit } from '@vueuse/core';
 import { PaginationEllipsis } from 'reka-ui';

package/src/components/ui/pagination/PaginationFirst.vue

@@ -2,7 +2,7 @@
 import type { PaginationFirstProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import type { ButtonVariants } from '../button';
-import { ArrowLeftDoubleIcon } from '@hugeicons/core-free-icons';
+import ArrowLeftDoubleIcon from '@hugeicons/core-free-icons/ArrowLeftDoubleIcon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { reactiveOmit } from '@vueuse/core';
 import { PaginationFirst } from 'reka-ui';

package/src/components/ui/pagination/PaginationLast.vue

@@ -2,7 +2,7 @@
 import type { PaginationLastProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import type { ButtonVariants } from '../button';
-import { ArrowRightDoubleIcon } from '@hugeicons/core-free-icons';
+import ArrowRightDoubleIcon from '@hugeicons/core-free-icons/ArrowRightDoubleIcon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { reactiveOmit } from '@vueuse/core';
 import { PaginationLast } from 'reka-ui';

package/src/components/ui/pagination/PaginationNext.vue

@@ -2,7 +2,7 @@
 import type { PaginationNextProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import type { ButtonVariants } from '../button';
-import { ArrowRight01Icon } from '@hugeicons/core-free-icons';
+import ArrowRight01Icon from '@hugeicons/core-free-icons/ArrowRight01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { reactiveOmit } from '@vueuse/core';
 import { PaginationNext } from 'reka-ui';

package/src/components/ui/pagination/PaginationPrevious.vue

@@ -2,7 +2,7 @@
 import type { PaginationPrevProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import type { ButtonVariants } from '../button';
-import { ArrowLeft01Icon } from '@hugeicons/core-free-icons';
+import ArrowLeft01Icon from '@hugeicons/core-free-icons/ArrowLeft01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { reactiveOmit } from '@vueuse/core';
 import { PaginationPrev } from 'reka-ui';

package/src/components/ui/select/SelectItem.vue

@@ -2,7 +2,7 @@
 import type { SelectItemProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
-import { Tick02Icon } from '@hugeicons/core-free-icons';
+import Tick02Icon from '@hugeicons/core-free-icons/Tick02Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { SelectItem, SelectItemIndicator, SelectItemText, useForwardProps } from 'reka-ui';
 import { cn } from '../../../lib/utils';

package/src/components/ui/select/SelectScrollDownButton.vue

@@ -2,7 +2,7 @@
 import type { SelectScrollDownButtonProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
-import { ArrowDown01Icon } from '@hugeicons/core-free-icons';
+import ArrowDown01Icon from '@hugeicons/core-free-icons/ArrowDown01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { SelectScrollDownButton, useForwardProps } from 'reka-ui';
 import { cn } from '../../../lib/utils';

package/src/components/ui/select/SelectScrollUpButton.vue

@@ -2,7 +2,7 @@
 import type { SelectScrollUpButtonProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
-import { ArrowUp01Icon } from '@hugeicons/core-free-icons';
+import ArrowUp01Icon from '@hugeicons/core-free-icons/ArrowUp01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { SelectScrollUpButton, useForwardProps } from 'reka-ui';
 import { cn } from '../../../lib/utils';

package/src/components/ui/select/SelectTrigger.vue

@@ -2,7 +2,7 @@
 import type { SelectTriggerProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
-import { ArrowDown01Icon } from '@hugeicons/core-free-icons';
+import ArrowDown01Icon from '@hugeicons/core-free-icons/ArrowDown01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { SelectIcon, SelectTrigger, useForwardProps } from 'reka-ui';
 import { cn } from '../../../lib/utils';

package/src/components/ui/sidebar/SidebarTrigger.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
-import { PanelLeftIcon } from '@hugeicons/core-free-icons';
+import PanelLeftIcon from '@hugeicons/core-free-icons/PanelLeftIcon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { useI18n } from 'vue-i18n';
 import { cn } from '../../../lib/utils';

package/src/components/ui/stepper/SimpleStepper.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
 import type { StepperStep } from '.';
-import { Tick02Icon } from '@hugeicons/core-free-icons';
+import Tick02Icon from '@hugeicons/core-free-icons/Tick02Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { computed } from 'vue';
 import { cn } from '../../../lib/utils';

package/src/components/ui/stepper/StepperIndicator.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { StepperIndicatorProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
-import { Tick02Icon } from '@hugeicons/core-free-icons';
+import Tick02Icon from '@hugeicons/core-free-icons/Tick02Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { reactiveOmit } from '@vueuse/core';
 import { injectStepperItemContext, StepperIndicator } from 'reka-ui';

package/src/components/ui/tags-input/TagsInputItemDelete.vue

@@ -2,7 +2,7 @@
 import type { TagsInputItemDeleteProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
-import { Cancel01Icon } from '@hugeicons/core-free-icons';
+import Cancel01Icon from '@hugeicons/core-free-icons/Cancel01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { TagsInputItemDelete, useForwardProps } from 'reka-ui';
 import { cn } from '../../../lib/utils';

package/src/lib/color-tokens.ts

@@ -32,7 +32,7 @@ export const getInteractiveSurfaceToneClasses = (color: ToneColor) => {
 // Return the list of classes for button variants
 export const buttonVariantClasses: Record<ButtonVariantName, string> = {
     // Custom button variants
-    primary: "bg-primary text-primary-foreground shadow-elevated-sm hover:bg-primary-hover",
+    primary: "bg-primary text-primary-foreground shadow-elevated-sm hover:bg-primary-hover before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:-translate-x-full before:bg-[linear-gradient(105deg,transparent_35%,rgb(255_255_255/0.38)_50%,transparent_65%)] before:transition-[translate] before:duration-700 before:ease-out-expo hover:before:translate-x-full motion-reduce:before:hidden",
     secondary: "border border-border bg-secondary text-foreground shadow-elevated-sm hover:border-border-strong hover:bg-accent",
     ghost: "text-muted-foreground hover:bg-accent hover:text-foreground",
     link: "text-primary underline-offset-4 decoration-2 hover:underline enabled:active:scale-100",