@una-ui/nuxt-edge 0.61.0-29182246.bc2c328 → 1.0.0-alpha.0-29173950.b6a8c03

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@una-ui/nuxt-edge",
   "configKey": "una",
-  "version": "0.61.0-29182246.bc2c328",
+  "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 = "0.61.0-29182246.bc2c328";
+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/data/table/Table.vue

@@ -213,7 +213,6 @@ const table = useVueTable({
   getFilteredRowModel: getFilteredRowModel(),
   getPaginationRowModel: getPaginationRowModel(),
   getRowId: (row) => props.rowId ? row[props.rowId] : row.id,
-  getSubRows: (row) => row.subRows,
   getExpandedRowModel: getExpandedRowModel(),
   onSortingChange: (updaterOrValue) => valueUpdater(updaterOrValue, sorting),
   onRowSelectionChange: (updaterOrValue) => valueUpdater(updaterOrValue, rowSelection),

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;
+};