@una-ui/nuxt-edge 1.0.0-alpha.0-29172721.c5fd9aa → 1.0.0-alpha.0-29173950.b6a8c03

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@una-ui/nuxt-edge",
   "configKey": "una",
-  "version": "1.0.0-alpha.0-29172721.c5fd9aa",
+  "version": "1.0.0-alpha.0-29173950.b6a8c03",
   "compatibility": {
     "nuxt": ">=3.0.0"
   },

package/dist/module.mjs

@@ -8,7 +8,7 @@ import 'unocss';
 import 'unocss-preset-animations';
 
 const name = "@una-ui/nuxt-edge";
-const version = "1.0.0-alpha.0-29172721.c5fd9aa";
+const version = "1.0.0-alpha.0-29173950.b6a8c03";
 
 const module = defineNuxtModule({
   meta: {
@@ -33,7 +33,7 @@ const module = defineNuxtModule({
       ...{
         primary: "yellow",
         gray: "stone",
-        radius: 0.5,
+        radius: 0.625,
         fontSize: 16
       },
       ...nuxt.options.appConfig.una || {}

package/dist/runtime/components/alert-dialog/AlertDialogCancel.vue

@@ -15,7 +15,7 @@ const props = defineProps({
   block: { type: Boolean, required: false },
   to: { type: null, required: false },
   label: { type: String, required: false, default: "Cancel" },
-  btn: { type: String, required: false, default: "solid-gray" },
+  btn: { type: String, required: false, default: "outline-gray" },
   leading: { type: String, required: false },
   trailing: { type: String, required: false },
   size: { type: String, required: false },

package/dist/runtime/components/combobox/Combobox.vue

@@ -206,8 +206,9 @@ function isItemSelected(item) {
           <slot name="input-wrapper" :model-value :open>
             <ComboboxInput
               v-if="$slots.trigger || $slots.triggerRoot"
+              input="~"
               :class="cn(
-  'border-0 border-b-1 rounded-none text-1em focus-visible:ring-0',
+  'border-b-1 rounded-none text-1em',
   props._comboboxInput?.class
 )"
               leading="combobox-input-leading-icon"

package/dist/runtime/components/combobox/ComboboxTrigger.vue

@@ -20,7 +20,7 @@ const props = defineProps({
   block: { type: Boolean, required: false },
   to: { type: null, required: false },
   label: { type: String, required: false },
-  btn: { type: String, required: false, default: "solid-white" },
+  btn: { type: String, required: false, default: "outline-gray" },
   leading: { type: String, required: false },
   trailing: { type: String, required: false },
   size: { type: String, required: false },

package/dist/runtime/components/elements/Skeleton.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { cn } from "../../utils";
 const props = defineProps({
-  skeleton: { type: null, required: false },
+  skeleton: { type: null, required: false, default: "gray" },
   size: { type: null, required: false },
   rounded: { type: null, required: false },
   una: { type: Object, required: false },

package/dist/runtime/components/elements/Skeleton.vue.d.ts

@@ -3,7 +3,9 @@ declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<NSkeletonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NSkeletonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<NSkeletonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NSkeletonProps> & Readonly<{}>, {
+    skeleton: import("vue").HTMLAttributes["class"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/runtime/components/elements/tabs/TabsTrigger.vue

@@ -31,7 +31,7 @@ const props = defineProps({
   dropdownMenu: { type: String, required: false },
   toggleOn: { type: String, required: false },
   toggleOff: { type: String, required: false },
-  tabsActive: { type: String, required: false, default: "soft-black" },
+  tabsActive: { type: String, required: false, default: "outline-gray" },
   tabsInactive: { type: String, required: false },
   navigationMenu: { type: String, required: false },
   navigationMenuLink: { type: String, required: false },

package/dist/runtime/components/forms/Checkbox.vue

@@ -9,9 +9,9 @@ defineOptions({
   inheritAttrs: false
 });
 const props = defineProps({
-  checkbox: { type: String, required: false },
+  checkbox: { type: String, required: false, default: "primary" },
   label: { type: String, required: false },
-  size: { type: String, required: false },
+  size: { type: String, required: false, default: "md" },
   reverse: { type: Boolean, required: false },
   forceMount: { type: Boolean, required: false, default: true },
   _checkboxIndicator: { type: Object, required: false },

package/dist/runtime/components/forms/Checkbox.vue.d.ts

@@ -10,7 +10,9 @@ declare const __VLS_component: import("vue").DefineComponent<NCheckboxProps, {},
 }, string, import("vue").PublicProps, Readonly<NCheckboxProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean | "indeterminate") => any) | undefined;
 }>, {
+    size: string;
     forceMount: boolean;
+    checkbox: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/runtime/components/forms/FormGroup.vue

@@ -25,7 +25,7 @@ const statusClassVariants = computed(() => {
     success: "text-success",
     warning: "text-warning",
     error: "text-error",
-    default: "text-muted"
+    default: "text-muted-foreground"
   };
   return text[props.status ?? "default"];
 });

package/dist/runtime/components/forms/Slider.vue

@@ -1,11 +1,10 @@
 <script setup>
 import { reactiveOmit } from "@vueuse/core";
 import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from "reka-ui";
-import { computed } from "vue";
 import { cn } from "../../utils";
 const props = defineProps({
   slider: { type: String, required: false, default: "primary" },
-  size: { type: String, required: false },
+  size: { type: String, required: false, default: "md" },
   una: { type: Object, required: false },
   defaultValue: { type: Array, required: false },
   modelValue: { type: [Array, null], required: false },
@@ -25,37 +24,39 @@ const props = defineProps({
   class: { type: null, required: false }
 });
 const emits = defineEmits(["update:modelValue", "valueCommit"]);
-const rootProps = reactiveOmit(props, ["class", "una", "slider", "una"]);
+const rootProps = reactiveOmit(props, ["class", "una", "slider"]);
 const forwarded = useForwardPropsEmits(rootProps, emits);
-const isVertical = computed(() => props.orientation === "vertical");
 </script>
 
 <template>
   <SliderRoot
     v-slot="{ modelValue }"
+    data-slot="slider-root"
     :class="cn(
-  'slider-root',
-  isVertical && 'slider-root-vertical',
+  'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
+  // \'slider-root\',
   props.class,
-  props.una?.sliderRoot,
-  disabled && 'slider-disabled'
+  props.una?.sliderRoot
 )"
     v-bind="forwarded"
     :slider="slider"
+    :size="size"
   >
     <slot name="slider-track">
       <SliderTrack
+        data-slot="slider-track"
         :class="cn(
   'slider-track',
-  isVertical && 'slider-track-vertical',
   props.una?.sliderTrack
 )"
+        :size
       >
         <slot name="slider-range">
           <SliderRange
+            data-slot="slider-range"
+            :size
             :class="cn(
   'slider-range',
-  isVertical && 'slider-range-vertical',
   props.una?.sliderRange
 )"
           />
@@ -67,9 +68,10 @@ const isVertical = computed(() => props.orientation === "vertical");
       <SliderThumb
         v-for="(_, key) in modelValue"
         :key="key"
+        data-slot="slider-thumb"
+        :size
         :class="cn(
   'slider-thumb',
-  isVertical && 'slider-thumb-vertical',
   props.una?.sliderThumb
 )"
       />

package/dist/runtime/components/forms/Slider.vue.d.ts

@@ -14,6 +14,7 @@ declare const __VLS_component: import("vue").DefineComponent<NSliderProps, {}, {
     "onUpdate:modelValue"?: ((payload: number[] | undefined) => any) | undefined;
     onValueCommit?: ((payload: number[]) => any) | undefined;
 }>, {
+    size: string;
     slider: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/runtime/components/forms/form/FormField.vue

@@ -32,7 +32,7 @@ const statusClassVariants = computed(() => {
     success: "text-success",
     warning: "text-warning",
     error: "text-error",
-    default: "text-muted"
+    default: "text-muted-foreground"
   };
   return text[props.status ?? "default"];
 });

package/dist/runtime/components/forms/select/SelectTrigger.vue

@@ -7,7 +7,7 @@ import Button from "../../elements/Button.vue";
 import Icon from "../../elements/Icon.vue";
 const props = defineProps({
   id: { type: String, required: false },
-  select: { type: String, required: false, default: "solid-white" },
+  select: { type: String, required: false, default: "outline-gray" },
   status: { type: String, required: false },
   una: { type: Object, required: false },
   disabled: { type: Boolean, required: false },

package/dist/runtime/components/misc/ThemeSwitcher.vue

@@ -6,27 +6,41 @@ import { useUnaSettings } from "../../composables/useUnaSettings";
 import { useUnaThemes } from "../../composables/useUnaThemes";
 import { RADIUS } from "../../constants";
 import Button from "../elements/Button.vue";
+import Icon from "../elements/Icon.vue";
 import Label from "../elements/Label.vue";
 import Popover from "../elements/popover/Popover.vue";
 import Separator from "../elements/Separator.vue";
 const colorMode = useColorMode();
 const [value, toggle] = useToggle();
-const { primaryThemes, grayThemes } = useUnaThemes();
+const { primaryThemes, grayThemes, predefinedThemes } = useUnaThemes();
 const { settings, reset } = useUnaSettings();
 const currentPrimaryThemeHex = computed(() => settings.value.primaryColors?.["--una-primary-hex"]);
 const currentPrimaryThemeName = computed(() => {
+  if (settings.value.theme) {
+    return settings.value.theme.name;
+  }
   const theme = primaryThemes.find(([, theme2]) => theme2["--una-primary-hex"] === currentPrimaryThemeHex.value);
   return theme ? theme[0] : "";
 });
 const currentGrayThemeHex = computed(() => settings.value.grayColors?.["--una-gray-hex"]);
 const currentGrayThemeName = computed(() => {
+  if (settings.value.theme !== null) {
+    return false;
+  }
   const theme = grayThemes.find(([, theme2]) => theme2["--una-gray-hex"] === currentGrayThemeHex.value);
   return theme ? theme[0] : "";
 });
+function updateColor(theme) {
+  settings.value.theme = theme;
+  settings.value.primary = "";
+  settings.value.gray = "";
+}
 function updatePrimaryTheme(theme) {
+  settings.value.theme = null;
   settings.value.primary = theme;
 }
 function updateGrayTheme(theme) {
+  settings.value.theme = null;
   settings.value.gray = theme;
 }
 function shuffleTheme() {
@@ -62,8 +76,7 @@ function shuffleTheme() {
       <slot name="trigger" :open="open">
         <Button
           btn="soft"
-          square
-          icon
+          icon square
           label="i-lucide-paintbrush"
         />
       </slot>
@@ -72,32 +85,77 @@ function shuffleTheme() {
     <slot name="content">
       <div class="flex flex-col">
         <div class="grid space-y-1">
-          <h1 class="text-md text-base font-semibold">
+          <h1 class="text-md text-foreground font-semibold">
             Customize
           </h1>
-          <p class="text-xs text-muted">
+          <p class="text-xs text-muted-foreground">
             Pick a style and color for your components.
           </p>
         </div>
 
         <Separator />
 
+        <div class="space-y-2">
+          <Label for="color" class="text-xs"> Themes</Label>
+          <div class="grid grid-cols-2 gap-3">
+            <template
+              v-for="theme in predefinedThemes"
+              :key="theme.name"
+            >
+              <Button
+                v-if="theme"
+                btn="solid-gray"
+                size="xs"
+                :title="capitalize(theme?.name)"
+                class="justify-start gap-2 ring-primary"
+                :aria-label="`Theme: ${theme.name}`"
+                :class="currentPrimaryThemeName === theme?.name && 'ring-2'"
+                @click="updateColor(theme)"
+              >
+                <template #leading>
+                  <Icon
+                    name="i-tabler-circle-filled"
+                    square="4.5"
+                    :style="{
+  '--c-primary': `oklch(${theme?.cssVars.dark['--una-primary']})`,
+  '--c-primary-foreground': `oklch(${theme?.cssVars.dark['--una-background']})`
+}"
+                    class="shrink-0 rounded-full from-$c-primary to-$c-primary-foreground from-20% bg-gradient-to-b"
+                  />
+                </template>
+
+                <span class="truncate text-xs">
+                  {{ theme.name }}
+                </span>
+              </Button>
+            </template>
+          </div>
+        </div>
+
+        <Separator />
+
         <div class="space-y-2">
           <Label for="color" class="text-xs"> Primary Color</Label>
           <div class="grid grid-cols-7 gap-3">
-            <button
+            <template
               v-for="[key, theme] in primaryThemes"
               :key="key"
-              :title="capitalize(key)"
-              :style="{ background: theme['--una-primary-hex'] }"
-              class="transition-all"
-              rounded="full"
-              square="6.5"
-              :class="[currentPrimaryThemeName === key ? 'ring-2' : 'scale-93']"
-              ring="primary offset-4 offset-base"
-              :aria-label="`Primary Color: ${key}`"
-              @click="updatePrimaryTheme(key)"
-            />
+            >
+              <button
+                :title="capitalize(key)"
+                :style="{
+  '--c-primary': `oklch(${theme['--una-primary-600']})`,
+  '--c-primary-foreground': `oklch(${theme['--una-primary-500']})`
+}"
+                class="bg-$c-primary transition-all dark:bg-$c-primary-foreground"
+                rounded="full"
+                square="6.5"
+                :class="[currentPrimaryThemeName === key ? 'ring-2' : 'scale-93']"
+                ring="primary offset-4 offset-background"
+                :aria-label="`Primary Color: ${key}`"
+                @click="updatePrimaryTheme(key)"
+              />
+            </template>
           </div>
         </div>
 
@@ -116,7 +174,7 @@ function shuffleTheme() {
               rounded="full"
               square="6.5"
               :aria-label="`Gray Color: ${key}`"
-              ring="gray offset-4 offset-base"
+              ring="gray offset-4 offset-background"
               @click="updateGrayTheme(key)"
             />
           </div>

package/dist/runtime/components/navigation/breadcrumb/BreadcrumbPage.vue

@@ -10,7 +10,7 @@ const props = defineProps({
     role="link"
     aria-disabled="true"
     aria-current="page"
-    :class="cn('font-normal text-base', props.class)"
+    :class="cn('font-normal text-foreground', props.class)"
   >
     <slot />
   </span>

package/dist/runtime/components/sidebar/SidebarMenuSubButton.vue

@@ -1,13 +1,14 @@
 <script setup>
 import { Primitive } from "reka-ui";
 import { cn } from "../../utils";
+import NLink from "../elements/Link.vue";
 const props = defineProps({
   isActive: { type: Boolean, required: false },
   size: { type: String, required: false, default: "md" },
   class: { type: null, required: false },
   una: { type: Object, required: false },
   asChild: { type: Boolean, required: false },
-  as: { type: [String, Object, Function], required: false, default: "a" }
+  as: { type: [String, Object, Function], required: false, default: NLink }
 });
 </script>
 

package/dist/runtime/composables/useUnaSettings.js

@@ -1,7 +1,6 @@
-import { useAppConfig } from "#imports";
+import { useAppConfig, watch } from "#imports";
 import { useStorage } from "@vueuse/core";
 import { defu } from "defu";
-import { watchEffect } from "vue";
 import { useUnaThemes } from "./useUnaThemes.js";
 export function useUnaSettings() {
   const { una } = useAppConfig();
@@ -12,15 +11,20 @@ export function useUnaSettings() {
     primary: una.primary,
     gray: una.gray,
     radius: una.radius,
-    fontSize: una.fontSize
+    fontSize: una.fontSize,
+    theme: null
   };
   const settings = useStorage("una-settings", defaultSettings, void 0, {
     mergeDefaults: defu
   });
-  watchEffect(() => {
-    settings.value.primaryColors = getPrimaryColors(settings.value.primary || una.primary);
-    settings.value.grayColors = getGrayColors(settings.value.gray || una.gray);
-  });
+  watch(
+    () => [settings.value.primary, settings.value.gray],
+    ([primary, gray]) => {
+      settings.value.primaryColors = getPrimaryColors(primary, una.primary);
+      settings.value.grayColors = getGrayColors(gray, una.gray);
+    },
+    { immediate: true }
+  );
   function reset() {
     settings.value.primary = defaultSettings.primary;
     settings.value.gray = defaultSettings.gray;

package/dist/runtime/composables/useUnaThemes.d.ts

@@ -1,8 +1,80 @@
 import type { Colors } from '../types/index.js';
-export interface UseUnaThemesReturn {
+export declare function useUnaThemes(): {
     primaryThemes: [string, Colors][];
     grayThemes: [string, Colors][];
-    getPrimaryColors: (color: string) => Colors;
-    getGrayColors: (color: string) => Colors;
-}
-export declare function useUnaThemes(): UseUnaThemesReturn;
+    predefinedThemes: {
+        name: string;
+        cssVars: {
+            light: {
+                '--una-background': string;
+                '--una-foreground': string;
+                '--una-card': string;
+                '--una-card-foreground': string;
+                '--una-popover': string;
+                '--una-popover-foreground': string;
+                '--una-primary': string;
+                '--una-primary-foreground': string;
+                '--una-secondary': string;
+                '--una-secondary-foreground': string;
+                '--una-muted': string;
+                '--una-muted-foreground': string;
+                '--una-accent': string;
+                '--una-accent-foreground': string;
+                '--una-destructive': string;
+                '--una-destructive-foreground': string;
+                '--una-border': string;
+                '--una-input': string;
+                '--una-ring': string;
+                '--una-chart-1': string;
+                '--una-chart-2': string;
+                '--una-chart-3': string;
+                '--una-chart-4': string;
+                '--una-chart-5': string;
+                '--una-sidebar': string;
+                '--una-sidebar-foreground': string;
+                '--una-sidebar-primary': string;
+                '--una-sidebar-primary-foreground': string;
+                '--una-sidebar-accent': string;
+                '--una-sidebar-accent-foreground': string;
+                '--una-sidebar-border': string;
+                '--una-sidebar-ring': string;
+            };
+            dark: {
+                '--una-background': string;
+                '--una-foreground': string;
+                '--una-card': string;
+                '--una-card-foreground': string;
+                '--una-popover': string;
+                '--una-popover-foreground': string;
+                '--una-primary': string;
+                '--una-primary-foreground': string;
+                '--una-secondary': string;
+                '--una-secondary-foreground': string;
+                '--una-muted': string;
+                '--una-muted-foreground': string;
+                '--una-accent': string;
+                '--una-accent-foreground': string;
+                '--una-destructive': string;
+                '--una-destructive-foreground': string;
+                '--una-border': string;
+                '--una-input': string;
+                '--una-ring': string;
+                '--una-chart-1': string;
+                '--una-chart-2': string;
+                '--una-chart-3': string;
+                '--una-chart-4': string;
+                '--una-chart-5': string;
+                '--una-sidebar': string;
+                '--una-sidebar-foreground': string;
+                '--una-sidebar-primary': string;
+                '--una-sidebar-primary-foreground': string;
+                '--una-sidebar-accent': string;
+                '--una-sidebar-accent-foreground': string;
+                '--una-sidebar-border': string;
+                '--una-sidebar-ring': string;
+            };
+        };
+    }[];
+    getPrimaryColors: (color: string, defaultColor?: string) => Colors;
+    getGrayColors: (color: string, defaultColor?: string) => Colors;
+};

package/dist/runtime/composables/useUnaThemes.js

@@ -1,100 +1,39 @@
-import { colors } from "@unocss/preset-mini/colors";
-import { hexToRgb } from "../utils/index.js";
-const filteredPrimaryColors = Object.fromEntries(
-  Object.entries(colors).filter(([key]) => [
-    "blue",
-    "cyan",
-    "sky",
-    "amber",
-    "yellow",
-    "emerald",
-    "lime",
-    "orange",
-    "purple",
-    "indigo",
-    "pink",
-    "tomato",
-    "green",
-    "fuchsia",
-    "violet",
-    "rose",
-    "amber",
-    "red",
-    "teal"
-  ].includes(key)).map(([key, value]) => [key, Object.fromEntries(
-    Object.entries(value).filter(([key2]) => ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "950"].includes(key2))
-  )])
-);
-filteredPrimaryColors.tomato = {
-  50: "#fdf2f2",
-  100: "#fde8e8",
-  200: "#fbd5d5",
-  300: "#f8b4b4",
-  400: "#f98080",
-  500: "#f05252",
-  600: "#e02424",
-  700: "#c81e1e",
-  800: "#9b1c1c",
-  900: "#771d1d",
-  950: "#3f0708"
-};
+import { colors } from "@unocss/preset-wind4/colors";
+const filteredPrimaryColors = (() => {
+  const primaryColors = Object.fromEntries(
+    Object.entries(colors).filter(([key]) => [
+      "blue",
+      "cyan",
+      "sky",
+      "amber",
+      "yellow",
+      "emerald",
+      "lime",
+      "orange",
+      "purple",
+      "indigo",
+      "pink",
+      "tomato",
+      "green",
+      "fuchsia",
+      "violet",
+      "rose",
+      "red",
+      "teal"
+    ].includes(key)).map(([key, value]) => [
+      key,
+      Object.fromEntries(
+        Object.entries(value).filter(([key2]) => ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "950"].includes(key2))
+      )
+    ])
+  );
+  return primaryColors;
+})();
 const filteredGrayColors = Object.fromEntries(
   Object.entries(colors).filter(([key]) => ["slate", "gray", "zinc", "neutral", "stone"].includes(key)).map(([key, value]) => [key, Object.fromEntries(
     Object.entries(value).filter(([key2]) => ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "950"].includes(key2))
   )])
 );
-filteredGrayColors.sage = {
-  50: "#f2f2f2",
-  100: "#e6e6e6",
-  200: "#d9d9d9",
-  300: "#b8b8b8",
-  400: "#939393",
-  500: "#6f6f6f",
-  600: "#4b4b4b",
-  700: "#323232",
-  800: "#1f1f1f",
-  900: "#0b0b0b",
-  950: "#000000"
-};
-filteredGrayColors.ash = {
-  50: "#f9f9f8",
-  100: "#f1f0ee",
-  200: "#dad7d3",
-  300: "#c3beb8",
-  400: "#a9a49e",
-  500: "#908c84",
-  600: "#777168",
-  700: "#5e5950",
-  800: "#45403a",
-  900: "#2c2823",
-  950: "#161511"
-};
-filteredGrayColors.olive = {
-  50: "#fafaf2",
-  100: "#f5f5e6",
-  200: "#ebebd9",
-  300: "#d6d6b8",
-  400: "#b3b393",
-  500: "#8f8f6f",
-  600: "#6b6b4b",
-  700: "#4a4a32",
-  800: "#2a2a1f",
-  900: "#0e0e0b",
-  950: "#000000"
-};
-filteredGrayColors.leaf = {
-  50: "#f2faf2",
-  100: "#e6f5e6",
-  200: "#d9ebd9",
-  300: "#b8d6b8",
-  400: "#93b393",
-  500: "#6f8f6f",
-  600: "#4b6b4b",
-  700: "#326432",
-  800: "#1f2a1f",
-  900: "#0b0e0b",
-  950: "#000000"
-};
 const filteredColors = {
   ...filteredPrimaryColors,
   ...filteredGrayColors
@@ -113,20 +52,397 @@ export function useUnaThemes() {
     if (!colorPalette)
       throw new Error(`Invalid primary color: ${color}`);
     const colors2 = {};
+    for (const shade of Object.keys(colorPalette)) {
+      const value = colorPalette[shade];
+      if (value.startsWith("oklch("))
+        colors2[`--una-${prefix}-${shade}`] = value.replace("oklch(", "").replace(")", "");
+    }
     colors2[`--una-${prefix}-hex`] = colorPalette[600];
-    for (const shade of Object.keys(colorPalette))
-      colors2[`--una-${prefix}-${shade}`] = hexToRgb(colorPalette[shade]).join(", ");
     return colors2;
   }
-  function getPrimaryColors(color) {
-    return primaryThemes.filter(([colorName, _]) => colorName === color)[0][1];
+  function getPrimaryColors(color, defaultColor = "yellow") {
+    const theme = primaryThemes.find(([colorName, _]) => colorName === color);
+    if (!theme)
+      return getPrimaryColors(defaultColor);
+    return theme[1];
   }
-  function getGrayColors(color) {
-    return grayThemes.filter(([colorName, _]) => colorName === color)[0][1];
+  function getGrayColors(color, defaultColor = "stone") {
+    const theme = grayThemes.find(([colorName, _]) => colorName === color);
+    if (!theme)
+      return getGrayColors(defaultColor);
+    return theme[1];
   }
+  const predefinedThemes = [
+    {
+      name: "T3-Chat",
+      cssVars: {
+        light: {
+          "--una-background": "0.9754 0.0084 325.6414",
+          "--una-foreground": "0.3257 0.1161 325.0372",
+          "--una-card": "0.9754 0.0084 325.6414",
+          "--una-card-foreground": "0.3257 0.1161 325.0372",
+          "--una-popover": "1.0000 0 0",
+          "--una-popover-foreground": "0.3257 0.1161 325.0372",
+          "--una-primary": "0.5316 0.1409 355.1999",
+          "--una-primary-foreground": "1.0000 0 0",
+          "--una-secondary": "0.8696 0.0675 334.8991",
+          "--una-secondary-foreground": "0.4448 0.1341 324.7991",
+          "--una-muted": "0.9395 0.0260 331.5454",
+          "--una-muted-foreground": "0.4924 0.1244 324.4523",
+          "--una-accent": "0.8696 0.0675 334.8991",
+          "--una-accent-foreground": "0.4448 0.1341 324.7991",
+          "--una-destructive": "0.5248 0.1368 20.8317",
+          "--una-destructive-foreground": "1.0000 0 0",
+          "--una-border": "0.8568 0.0829 328.9110",
+          "--una-input": "0.8517 0.0558 336.6002",
+          "--una-ring": "0.5916 0.2180 0.5844",
+          "--una-chart-1": "0.6038 0.2363 344.4657",
+          "--una-chart-2": "0.4445 0.2251 300.6246",
+          "--una-chart-3": "0.3790 0.0438 226.1538",
+          "--una-chart-4": "0.8330 0.1185 88.3461",
+          "--una-chart-5": "0.7843 0.1256 58.9964",
+          "--una-sidebar": "0.9360 0.0288 320.5788",
+          "--una-sidebar-foreground": "0.4948 0.1909 354.5435",
+          "--una-sidebar-primary": "0.3963 0.0251 285.1962",
+          "--una-sidebar-primary-foreground": "0.9668 0.0124 337.5228",
+          "--una-sidebar-accent": "0.9789 0.0013 106.4235",
+          "--una-sidebar-accent-foreground": "0.3963 0.0251 285.1962",
+          "--una-sidebar-border": "0.8568 0.0829 328.9110",
+          "--una-sidebar-ring": "0.5916 0.2180 0.5844"
+        },
+        dark: {
+          "--una-background": "0.2409 0.0201 307.5346",
+          "--una-foreground": "0.8398 0.0387 309.5391",
+          "--una-card": "0.2803 0.0232 307.5413",
+          "--una-card-foreground": "0.8456 0.0302 341.4597",
+          "--una-popover": "0.1548 0.0132 338.9015",
+          "--una-popover-foreground": "0.9647 0.0091 341.8035",
+          "--una-primary": "0.4607 0.1853 4.0994",
+          "--una-primary-foreground": "0.8560 0.0618 346.3684",
+          "--una-secondary": "0.3137 0.0306 310.0610",
+          "--una-secondary-foreground": "0.8483 0.0382 307.9613",
+          "--una-muted": "0.2634 0.0219 309.4748",
+          "--una-muted-foreground": "0.7940 0.0372 307.1032",
+          "--una-accent": "0.3649 0.0508 308.4911",
+          "--una-accent-foreground": "0.9647 0.0091 341.8035",
+          "--una-destructive": "0.2258 0.0524 12.6119",
+          "--una-destructive-foreground": "1.0000 0 0",
+          "--una-border": "0.3286 0.0154 343.4461",
+          "--una-input": "0.3387 0.0195 332.8347",
+          "--una-ring": "0.5916 0.2180 0.5844",
+          "--una-chart-1": "0.5316 0.1409 355.1999",
+          "--una-chart-2": "0.5633 0.1912 306.8561",
+          "--una-chart-3": "0.7227 0.1502 60.5799",
+          "--una-chart-4": "0.6193 0.2029 312.7422",
+          "--una-chart-5": "0.6118 0.2093 6.1387",
+          "--una-sidebar": "0.1893 0.0163 331.0475",
+          "--una-sidebar-foreground": "0.8607 0.0293 343.6612",
+          "--una-sidebar-primary": "0.4882 0.2172 264.3763",
+          "--una-sidebar-primary-foreground": "1.0000 0 0",
+          "--una-sidebar-accent": "0.2337 0.0261 338.1961",
+          "--una-sidebar-accent-foreground": "0.9674 0.0013 286.3752",
+          "--una-sidebar-border": "0.3286 0.0154 343.4461",
+          "--una-sidebar-ring": "0.5916 0.2180 0.5844"
+        }
+      }
+    },
+    {
+      name: "Vercel",
+      cssVars: {
+        light: {
+          "--una-background": "0.9900 0 0",
+          "--una-foreground": "0 0 0",
+          "--una-card": "1 0 0",
+          "--una-card-foreground": "0 0 0",
+          "--una-popover": "0.9900 0 0",
+          "--una-popover-foreground": "0 0 0",
+          "--una-primary": "0 0 0",
+          "--una-primary-foreground": "1 0 0",
+          "--una-secondary": "0.9400 0 0",
+          "--una-secondary-foreground": "0 0 0",
+          "--una-muted": "0.9700 0 0",
+          "--una-muted-foreground": "0.4400 0 0",
+          "--una-accent": "0.9400 0 0",
+          "--una-accent-foreground": "0 0 0",
+          "--una-destructive": "0.6300 0.1900 23.0300",
+          "--una-destructive-foreground": "1 0 0",
+          "--una-border": "0.9200 0 0",
+          "--una-input": "0.9400 0 0",
+          "--una-ring": "0 0 0",
+          "--una-chart-1": "0.8100 0.1700 75.3500",
+          "--una-chart-2": "0.5500 0.2200 264.5300",
+          "--una-chart-3": "0.7200 0 0",
+          "--una-chart-4": "0.9200 0 0",
+          "--una-chart-5": "0.5600 0 0",
+          "--una-sidebar": "0.9900 0 0",
+          "--una-sidebar-foreground": "0 0 0",
+          "--una-sidebar-primary": "0 0 0",
+          "--una-sidebar-primary-foreground": "1 0 0",
+          "--una-sidebar-accent": "0.9400 0 0",
+          "--una-sidebar-accent-foreground": "0 0 0",
+          "--una-sidebar-border": "0.9400 0 0",
+          "--una-sidebar-ring": "0 0 0"
+        },
+        dark: {
+          "--una-background": "0 0 0",
+          "--una-foreground": "1 0 0",
+          "--una-card": "0.1400 0 0",
+          "--una-card-foreground": "1 0 0",
+          "--una-popover": "0.1800 0 0",
+          "--una-popover-foreground": "1 0 0",
+          "--una-primary": "1 0 0",
+          "--una-primary-foreground": "0 0 0",
+          "--una-secondary": "0.2500 0 0",
+          "--una-secondary-foreground": "1 0 0",
+          "--una-muted": "0.2300 0 0",
+          "--una-muted-foreground": "0.7200 0 0",
+          "--una-accent": "0.3200 0 0",
+          "--una-accent-foreground": "1 0 0",
+          "--una-destructive": "0.6900 0.2000 23.9100",
+          "--una-destructive-foreground": "0 0 0",
+          "--una-border": "0.2600 0 0",
+          "--una-input": "0.3200 0 0",
+          "--una-ring": "0.7200 0 0",
+          "--una-chart-1": "0.8100 0.1700 75.3500",
+          "--una-chart-2": "0.5800 0.2100 260.8400",
+          "--una-chart-3": "0.5600 0 0",
+          "--una-chart-4": "0.4400 0 0",
+          "--una-chart-5": "0.9200 0 0",
+          "--una-sidebar": "0.1800 0 0",
+          "--una-sidebar-foreground": "1 0 0",
+          "--una-sidebar-primary": "1 0 0",
+          "--una-sidebar-primary-foreground": "0 0 0",
+          "--una-sidebar-accent": "0.3200 0 0",
+          "--una-sidebar-accent-foreground": "1 0 0",
+          "--una-sidebar-border": "0.3200 0 0",
+          "--una-sidebar-ring": "0.7200 0 0"
+        }
+      }
+    },
+    {
+      name: "Notebook",
+      cssVars: {
+        light: {
+          "--una-background": "0.9821 0 0",
+          "--una-foreground": "0.3485 0 0",
+          "--una-card": "1.0000 0 0",
+          "--una-card-foreground": "0.3485 0 0",
+          "--una-popover": "1.0000 0 0",
+          "--una-popover-foreground": "0.3485 0 0",
+          "--una-primary": "0.4891 0 0",
+          "--una-primary-foreground": "0.9551 0 0",
+          "--una-secondary": "0.9006 0 0",
+          "--una-secondary-foreground": "0.3485 0 0",
+          "--una-muted": "0.9158 0 0",
+          "--una-muted-foreground": "0.4313 0 0",
+          "--una-accent": "0.9354 0.0456 94.8549",
+          "--una-accent-foreground": "0.4015 0.0436 37.9587",
+          "--una-destructive": "0.6627 0.0978 20.0041",
+          "--una-destructive-foreground": "1.0000 0 0",
+          "--una-border": "0.5538 0.0025 17.2320",
+          "--una-input": "1.0000 0 0",
+          "--una-ring": "0.7058 0 0",
+          "--una-chart-1": "0.3211 0 0",
+          "--una-chart-2": "0.4495 0 0",
+          "--una-chart-3": "0.5693 0 0",
+          "--una-chart-4": "0.6830 0 0",
+          "--una-chart-5": "0.7921 0 0",
+          "--una-sidebar": "0.9551 0 0",
+          "--una-sidebar-foreground": "0.3485 0 0",
+          "--una-sidebar-primary": "0.4891 0 0",
+          "--una-sidebar-primary-foreground": "0.9551 0 0",
+          "--una-sidebar-accent": "0.9354 0.0456 94.8549",
+          "--una-sidebar-accent-foreground": "0.4015 0.0436 37.9587",
+          "--una-sidebar-border": "0.8078 0 0",
+          "--una-sidebar-ring": "0.7058 0 0"
+        },
+        dark: {
+          "--una-background": "0.2891 0 0",
+          "--una-foreground": "0.8945 0 0",
+          "--una-card": "0.3211 0 0",
+          "--una-card-foreground": "0.8945 0 0",
+          "--una-popover": "0.3211 0 0",
+          "--una-popover-foreground": "0.8945 0 0",
+          "--una-primary": "0.7572 0 0",
+          "--una-primary-foreground": "0.2891 0 0",
+          "--una-secondary": "0.4676 0 0",
+          "--una-secondary-foreground": "0.8078 0 0",
+          "--una-muted": "0.3904 0 0",
+          "--una-muted-foreground": "0.7058 0 0",
+          "--una-accent": "0.9067 0 0",
+          "--una-accent-foreground": "0.3211 0 0",
+          "--una-destructive": "0.7915 0.0491 18.2410",
+          "--una-destructive-foreground": "0.2891 0 0",
+          "--una-border": "0.4276 0 0",
+          "--una-input": "0.3211 0 0",
+          "--una-ring": "0.8078 0 0",
+          "--una-chart-1": "0.9521 0 0",
+          "--una-chart-2": "0.8576 0 0",
+          "--una-chart-3": "0.7572 0 0",
+          "--una-chart-4": "0.6534 0 0",
+          "--una-chart-5": "0.5452 0 0",
+          "--una-sidebar": "0.2478 0 0",
+          "--una-sidebar-foreground": "0.8945 0 0",
+          "--una-sidebar-primary": "0.7572 0 0",
+          "--una-sidebar-primary-foreground": "0.2478 0 0",
+          "--una-sidebar-accent": "0.9067 0 0",
+          "--una-sidebar-accent-foreground": "0.3211 0 0",
+          "--una-sidebar-border": "0.4276 0 0",
+          "--una-sidebar-ring": "0.8078 0 0"
+        }
+      }
+    },
+    {
+      name: "Sunset Horizon",
+      cssVars: {
+        light: {
+          "--una-background": "0.9856 0.0084 56.3169",
+          "--una-foreground": "0.3353 0.0132 2.7676",
+          "--una-card": "1.0000 0 0",
+          "--una-card-foreground": "0.3353 0.0132 2.7676",
+          "--una-popover": "1.0000 0 0",
+          "--una-popover-foreground": "0.3353 0.0132 2.7676",
+          "--una-primary": "0.7357 0.1641 34.7091",
+          "--una-primary-foreground": "1.0000 0 0",
+          "--una-secondary": "0.9596 0.0200 28.9029",
+          "--una-secondary-foreground": "0.5587 0.1294 32.7364",
+          "--una-muted": "0.9656 0.0176 39.4009",
+          "--una-muted-foreground": "0.5534 0.0116 58.0708",
+          "--una-accent": "0.8278 0.1131 57.9984",
+          "--una-accent-foreground": "0.3353 0.0132 2.7676",
+          "--una-destructive": "0.6122 0.2082 22.2410",
+          "--una-destructive-foreground": "1.0000 0 0",
+          "--una-border": "0.9296 0.0370 38.6868",
+          "--una-input": "0.9296 0.0370 38.6868",
+          "--una-ring": "0.7357 0.1641 34.7091",
+          "--una-chart-1": "0.7357 0.1641 34.7091",
+          "--una-chart-2": "0.8278 0.1131 57.9984",
+          "--una-chart-3": "0.8773 0.0763 54.9314",
+          "--una-chart-4": "0.8200 0.1054 40.8859",
+          "--una-chart-5": "0.6368 0.1306 32.0721",
+          "--una-sidebar": "0.9656 0.0176 39.4009",
+          "--una-sidebar-foreground": "0.3353 0.0132 2.7676",
+          "--una-sidebar-primary": "0.7357 0.1641 34.7091",
+          "--una-sidebar-primary-foreground": "1.0000 0 0",
+          "--una-sidebar-accent": "0.8278 0.1131 57.9984",
+          "--una-sidebar-accent-foreground": "0.3353 0.0132 2.7676",
+          "--una-sidebar-border": "0.9296 0.0370 38.6868",
+          "--una-sidebar-ring": "0.7357 0.1641 34.7091"
+        },
+        dark: {
+          "--una-background": "0.2569 0.0169 352.4042",
+          "--una-foreground": "0.9397 0.0119 51.3156",
+          "--una-card": "0.3184 0.0176 341.4465",
+          "--una-card-foreground": "0.9397 0.0119 51.3156",
+          "--una-popover": "0.3184 0.0176 341.4465",
+          "--una-popover-foreground": "0.9397 0.0119 51.3156",
+          "--una-primary": "0.7357 0.1641 34.7091",
+          "--una-primary-foreground": "1.0000 0 0",
+          "--una-secondary": "0.3637 0.0203 342.2664",
+          "--una-secondary-foreground": "0.9397 0.0119 51.3156",
+          "--una-muted": "0.3184 0.0176 341.4465",
+          "--una-muted-foreground": "0.8378 0.0237 52.6346",
+          "--una-accent": "0.8278 0.1131 57.9984",
+          "--una-accent-foreground": "0.2569 0.0169 352.4042",
+          "--una-destructive": "0.6122 0.2082 22.2410",
+          "--una-destructive-foreground": "1.0000 0 0",
+          "--una-border": "0.3637 0.0203 342.2664",
+          "--una-input": "0.3637 0.0203 342.2664",
+          "--una-ring": "0.7357 0.1641 34.7091",
+          "--una-chart-1": "0.7357 0.1641 34.7091",
+          "--una-chart-2": "0.8278 0.1131 57.9984",
+          "--una-chart-3": "0.8773 0.0763 54.9314",
+          "--una-chart-4": "0.8200 0.1054 40.8859",
+          "--una-chart-5": "0.6368 0.1306 32.0721",
+          "--una-sidebar": "0.2569 0.0169 352.4042",
+          "--una-sidebar-foreground": "0.9397 0.0119 51.3156",
+          "--una-sidebar-primary": "0.7357 0.1641 34.7091",
+          "--una-sidebar-primary-foreground": "1.0000 0 0",
+          "--una-sidebar-accent": "0.8278 0.1131 57.9984",
+          "--una-sidebar-accent-foreground": "0.2569 0.0169 352.4042",
+          "--una-sidebar-border": "0.3637 0.0203 342.2664",
+          "--una-sidebar-ring": "0.7357 0.1641 34.7091"
+        }
+      }
+    },
+    {
+      name: "Claude",
+      cssVars: {
+        light: {
+          "--una-background": "0.9818 0.0054 95.0986",
+          "--una-foreground": "0.3438 0.0269 95.7226",
+          "--una-card": "0.9818 0.0054 95.0986",
+          "--una-card-foreground": "0.1908 0.0020 106.5859",
+          "--una-popover": "1.0000 0 0",
+          "--una-popover-foreground": "0.2671 0.0196 98.9390",
+          "--una-primary": "0.6171 0.1375 39.0427",
+          "--una-primary-foreground": "1.0000 0 0",
+          "--una-secondary": "0.9245 0.0138 92.9892",
+          "--una-secondary-foreground": "0.4334 0.0177 98.6048",
+          "--una-muted": "0.9341 0.0153 90.2390",
+          "--una-muted-foreground": "0.6059 0.0075 97.4233",
+          "--una-accent": "0.9245 0.0138 92.9892",
+          "--una-accent-foreground": "0.2671 0.0196 98.9390",
+          "--una-destructive": "0.1908 0.0020 106.5859",
+          "--una-destructive-foreground": "1.0000 0 0",
+          "--una-border": "0.8847 0.0069 97.3627",
+          "--una-input": "0.7621 0.0156 98.3528",
+          "--una-ring": "0.5937 0.1673 253.0630",
+          "--una-chart-1": "0.5583 0.1276 42.9956",
+          "--una-chart-2": "0.6898 0.1581 290.4107",
+          "--una-chart-3": "0.8816 0.0276 93.1280",
+          "--una-chart-4": "0.8822 0.0403 298.1792",
+          "--una-chart-5": "0.5608 0.1348 42.0584",
+          "--una-sidebar": "0.9663 0.0080 98.8792",
+          "--una-sidebar-foreground": "0.3590 0.0051 106.6524",
+          "--una-sidebar-primary": "0.6171 0.1375 39.0427",
+          "--una-sidebar-primary-foreground": "0.9881 0 0",
+          "--una-sidebar-accent": "0.9245 0.0138 92.9892",
+          "--una-sidebar-accent-foreground": "0.3250 0 0",
+          "--una-sidebar-border": "0.9401 0 0",
+          "--una-sidebar-ring": "0.7731 0 0"
+        },
+        dark: {
+          "--una-background": "0.2679 0.0036 106.6427",
+          "--una-foreground": "0.8074 0.0142 93.0137",
+          "--una-card": "0.2679 0.0036 106.6427",
+          "--una-card-foreground": "0.9818 0.0054 95.0986",
+          "--una-popover": "0.3085 0.0035 106.6039",
+          "--una-popover-foreground": "0.9211 0.0040 106.4781",
+          "--una-primary": "0.6724 0.1308 38.7559",
+          "--una-primary-foreground": "1.0000 0 0",
+          "--una-secondary": "0.9818 0.0054 95.0986",
+          "--una-secondary-foreground": "0.3085 0.0035 106.6039",
+          "--una-muted": "0.2213 0.0038 106.7070",
+          "--una-muted-foreground": "0.7713 0.0169 99.0657",
+          "--una-accent": "0.2130 0.0078 95.4245",
+          "--una-accent-foreground": "0.9663 0.0080 98.8792",
+          "--una-destructive": "0.6368 0.2078 25.3313",
+          "--una-destructive-foreground": "1.0000 0 0",
+          "--una-border": "0.3618 0.0101 106.8928",
+          "--una-input": "0.4336 0.0113 100.2195",
+          "--una-ring": "0.5937 0.1673 253.0630",
+          "--una-chart-1": "0.5583 0.1276 42.9956",
+          "--una-chart-2": "0.6898 0.1581 290.4107",
+          "--una-chart-3": "0.2130 0.0078 95.4245",
+          "--una-chart-4": "0.3074 0.0516 289.3230",
+          "--una-chart-5": "0.5608 0.1348 42.0584",
+          "--una-sidebar": "0.2357 0.0024 67.7077",
+          "--una-sidebar-foreground": "0.8074 0.0142 93.0137",
+          "--una-sidebar-primary": "0.3250 0 0",
+          "--una-sidebar-primary-foreground": "0.9881 0 0",
+          "--una-sidebar-accent": "0.1680 0.0020 106.6177",
+          "--una-sidebar-accent-foreground": "0.8074 0.0142 93.0137",
+          "--una-sidebar-border": "0.3618 0.0101 106.8928",
+          "--una-sidebar-ring": "0.7731 0 0"
+        }
+      }
+    }
+  ];
   return {
     primaryThemes,
     grayThemes,
+    predefinedThemes,
     getPrimaryColors,
     getGrayColors
   };

package/dist/runtime/plugins/theme.client.js

@@ -10,6 +10,18 @@ export default defineNuxtPlugin(() => {
   const html = document.documentElement;
   html.removeAttribute("style");
   const computedStyles = computed(() => {
+    if (settings.value.theme) {
+      return `
+      :root {
+        ${Object.entries(settings.value.theme.cssVars.light).map(([k, v]) => `${k}: ${v};`).join("\n")}
+        --una-radius: ${settings.value.radius}rem;
+        --una-font-size: ${settings.value.fontSize}px;
+      }
+      .dark {
+        ${Object.entries(settings.value.theme.cssVars.dark).map(([k, v]) => `${k}: ${v};`).join("\n")}
+      }
+      `;
+    }
     return `
     :root {
         ${Object.entries(settings.value.primaryColors).map(([k, v]) => `${k}: ${v};`).join("\n")}

package/dist/runtime/plugins/theme.server.js

@@ -16,6 +16,15 @@ export default defineNuxtPlugin(() => {
           const html = document.documentElement
           ${process.dev ? "console.log({ settings })" : ""}
 
+          if (settings.theme) {
+            Object.entries(settings.theme.cssVars.light).map(i => html.style.setProperty(i[0], i[1])) 
+            Object.entries(settings.theme.cssVars.dark).map(i => html.style.setProperty(i[0], i[1]))
+
+            html.style.setProperty('--una-radius', settings.radius + 'rem')
+            html.style.setProperty('--una-font-size', settings.fontSize + 'px')
+            return
+          }
+
           if (settings.primary)
             Object.entries(settings.primaryColors).map(i => html.style.setProperty(i[0], i[1]))
           if (settings.gray)

package/dist/runtime/types/index.d.ts

@@ -61,6 +61,13 @@ export interface ColorPalette {
 export interface UnaSettings {
     primaryColors: Colors;
     grayColors: Colors;
+    theme: {
+        name: string;
+        cssVars: {
+            light: Colors;
+            dark: Colors;
+        };
+    } | null | false | undefined;
     primary: string;
     gray: string;
     fontSize: number;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@una-ui/nuxt-edge",
   "type": "module",
-  "version": "1.0.0-alpha.0-29172721.c5fd9aa",
+  "version": "1.0.0-alpha.0-29173950.b6a8c03",
   "description": "Nuxt module for @una-ui",
   "author": "Phojie Rengel <phojrengel@gmail.com>",
   "license": "MIT",
@@ -41,12 +41,12 @@
     "@nuxt/kit": "^3.17.5",
     "@nuxtjs/color-mode": "^3.5.2",
     "@tanstack/vue-table": "^8.21.3",
-    "@una-ui/extractor-vue-script": "npm:@una-ui/extractor-vue-script-edge@1.0.0-alpha.0-29172721.c5fd9aa",
-    "@una-ui/preset": "npm:@una-ui/preset-edge@1.0.0-alpha.0-29172721.c5fd9aa",
-    "@unocss/core": "^66.0.0",
-    "@unocss/nuxt": "^66.0.0",
-    "@unocss/preset-attributify": "^66.0.0",
-    "@unocss/preset-icons": "^66.0.0",
+    "@una-ui/extractor-vue-script": "npm:@una-ui/extractor-vue-script-edge@1.0.0-alpha.0-29173950.b6a8c03",
+    "@una-ui/preset": "npm:@una-ui/preset-edge@1.0.0-alpha.0-29173950.b6a8c03",
+    "@unocss/core": "^66.2.0",
+    "@unocss/nuxt": "^66.2.0",
+    "@unocss/preset-attributify": "^66.2.0",
+    "@unocss/preset-icons": "^66.2.0",
     "@vee-validate/nuxt": "^4.15.1",
     "@vee-validate/zod": "^4.15.1",
     "@vueuse/core": "^12.8.2",
@@ -57,7 +57,7 @@
     "ohash": "^1.1.6",
     "reka-ui": "^2.3.1",
     "tailwind-merge": "^3.3.1",
-    "unocss": "^66.0.0",
+    "unocss": "^66.2.0",
     "unocss-preset-animations": "^1.2.1",
     "vaul-vue": "^0.4.1"
   },
@@ -77,7 +77,7 @@
     "build": "nuxt-build-module build",
     "stub": "nuxt-build-module build --stub && pnpm nuxt-module-build prepare",
     "dev": "nuxi dev playground",
-    "playground:build": "nuxi generate playground",
+    "playground:build": "nuxi build playground",
     "playground:preview": "nuxi preview playground"
   }
 }