@una-ui/nuxt 1.0.0-alpha.8 → 1.0.0-alpha.9

package/dist/runtime/components/toggle-group/ToggleGroup.vue

@@ -0,0 +1,70 @@
+<script>
+
+</script>
+
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { ToggleGroupRoot, useForwardPropsEmits } from "reka-ui";
+import { cn } from "../../utils";
+import ToggleGroupItem from "./ToggleGroupItem.vue";
+const props = defineProps({
+  items: { type: null, required: false },
+  _toggleGroupItem: { type: Object, required: false },
+  una: { type: Object, required: false },
+  rovingFocus: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  orientation: { type: String, required: false },
+  dir: { type: String, required: false },
+  loop: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: [String, Object, Function], required: false },
+  name: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  type: { type: String, required: false },
+  modelValue: { type: null, required: false },
+  defaultValue: { type: null, required: false },
+  toggleOff: { type: String, required: false },
+  toggleOn: { type: String, required: false },
+  class: { type: null, required: false },
+  size: { type: null, required: false }
+});
+const emits = defineEmits(["update:modelValue"]);
+const rootProps = reactiveOmit(props, [
+  "class",
+  "size",
+  "toggleOff",
+  "toggleOn",
+  "una"
+]);
+const forwarded = useForwardPropsEmits(rootProps, emits);
+</script>
+
+<template>
+  <ToggleGroupRoot
+    v-slot="slotProps"
+    v-bind="forwarded"
+    data-slot="toggle-group"
+    :class="cn(
+  'toggle-group',
+  props.orientation === 'vertical' ? 'toggle-group-vertical' : 'toggle-group-horizontal',
+  props.class,
+  props.una?.toggleGroup
+)"
+  >
+    <slot v-bind="slotProps">
+      <template v-if="items && items.length">
+        <template v-for="item in items" :key="item.value">
+          <slot :name="item.slot ?? 'item'" v-bind="{ item, value: item.value }">
+            <ToggleGroupItem
+              :una
+              :size
+              :toggle-on
+              :toggle-off
+              v-bind="{ ...item, ..._toggleGroupItem }"
+            />
+          </slot>
+        </template>
+      </template>
+    </slot>
+  </ToggleGroupRoot>
+</template>

package/dist/runtime/components/toggle-group/ToggleGroup.vue.d.ts

@@ -0,0 +1,23 @@
+import type { NToggleGroupItemProps, NToggleGroupProps } from '../../types/index.js';
+declare const _default: <T extends NToggleGroupItemProps, U extends Array<T>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:modelValue"?: ((payload: import("reka-ui").AcceptableValue | import("reka-ui").AcceptableValue[]) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue"> & NToggleGroupProps<U> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {
+        [x: string]: ((props: {
+            item: any;
+            value: any;
+        }) => any) | undefined;
+    } & {
+        default?: (props: any) => any;
+    };
+    emit: (evt: "update:modelValue", payload: import("reka-ui").AcceptableValue | import("reka-ui").AcceptableValue[]) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/runtime/components/toggle-group/ToggleGroupItem.vue

@@ -0,0 +1,75 @@
+<script>
+
+</script>
+
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { ToggleGroupItem, useForwardPropsEmits } from "reka-ui";
+import { cn } from "../../utils";
+import Toggle from "../elements/Toggle.vue";
+const props = defineProps({
+  slot: { type: String, required: false },
+  una: { type: Object, required: false },
+  value: { type: null, required: true },
+  disabled: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: [String, Object, Function], required: false, default: Toggle },
+  toggleOn: { type: String, required: false },
+  toggleOff: { type: String, required: false },
+  defaultValue: { type: Boolean, required: false },
+  modelValue: { type: [Boolean, null], required: false },
+  name: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  type: { type: String, required: false },
+  loadingPlacement: { type: String, required: false },
+  icon: { type: Boolean, required: false, default: true },
+  reverse: { type: Boolean, required: false },
+  loading: { type: Boolean, required: false },
+  block: { type: Boolean, required: false },
+  to: { type: null, required: false },
+  label: { type: String, required: false },
+  btn: { type: String, required: false },
+  leading: { type: String, required: false },
+  trailing: { type: String, required: false },
+  size: { type: String, required: false },
+  square: { type: null, required: false, default: true },
+  rounded: { type: null, required: false },
+  class: { type: null, required: false },
+  breadcrumbActive: { type: String, required: false },
+  breadcrumbInactive: { type: String, required: false },
+  paginationSelected: { type: String, required: false },
+  paginationUnselected: { type: String, required: false },
+  dropdownMenu: { type: String, required: false },
+  tabsActive: { type: String, required: false },
+  tabsInactive: { type: String, required: false },
+  navigationMenu: { type: String, required: false },
+  navigationMenuLink: { type: String, required: false },
+  ariaLabel: { type: String, required: false }
+});
+const emits = defineEmits(["update:modelValue"]);
+const delegatedProps = reactiveOmit(props, [
+  "class",
+  "toggleOff",
+  "toggleOn",
+  "una"
+]);
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <ToggleGroupItem
+    v-slot="slotProps"
+    v-bind="forwarded"
+    data-slot="toggle-group-item"
+    :toggle-on
+    :toggle-off
+    :as="props.as"
+    :class="cn(
+  'toggle-group-item',
+  props.una?.toggleGroupItem,
+  props.class
+)"
+  >
+    <slot v-bind="slotProps" />
+  </ToggleGroupItem>
+</template>

package/dist/runtime/components/toggle-group/ToggleGroupItem.vue.d.ts

@@ -0,0 +1,18 @@
+import type { NToggleGroupItemProps } from '../../types/index.js';
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<NToggleGroupItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<NToggleGroupItemProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    icon: boolean;
+    square: import("vue").HTMLAttributes["class"];
+    as: import("reka-ui").AsTag | import("vue").Component;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: any) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -38,11 +38,13 @@ export * from './sheet.js';
 export * from './sidebar.js';
 export * from './skeleton.js';
 export * from './slider.js';
+export * from './stepper.js';
 export * from './switch.js';
 export * from './table.js';
 export * from './tabs.js';
 export * from './toast.js';
 export * from './toggle.js';
+export * from './toggle-group.js';
 export * from './tooltip.js';
 export interface Colors {
     [key: string]: string;

package/dist/runtime/types/index.js

@@ -38,9 +38,11 @@ export * from "./sheet.js";
 export * from "./sidebar.js";
 export * from "./skeleton.js";
 export * from "./slider.js";
+export * from "./stepper.js";
 export * from "./switch.js";
 export * from "./table.js";
 export * from "./tabs.js";
 export * from "./toast.js";
 export * from "./toggle.js";
+export * from "./toggle-group.js";
 export * from "./tooltip.js";

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

@@ -0,0 +1,129 @@
+import type { StepperDescriptionProps, StepperIndicatorProps, StepperItemProps, StepperRootEmits, StepperRootProps, StepperSeparatorProps, StepperTitleProps, StepperTriggerProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+interface BaseExtensions {
+    /** CSS class for the component */
+    class?: HTMLAttributes['class'];
+    /** Size of the component */
+    size?: HTMLAttributes['class'];
+}
+export interface NStepperProps<T> extends StepperRootProps, Pick<StepperItemProps, 'disabled'>, BaseExtensions {
+    /**
+     * The array of steps that is passed to the stepper.
+     *
+     * @default []
+     */
+    items?: T[];
+    /**
+     * Allows you to add `UnaUI` stepper preset properties,
+     * Think of it as a shortcut for adding options or variants to the preset if available.
+     *
+     * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/stepper.ts
+     * @example
+     * stepper="solid-yellow"
+     */
+    stepper?: string;
+    /** Props for the stepper item */
+    _stepperItem?: Partial<NStepperItemProps>;
+    /** Props for the stepper trigger */
+    _stepperTrigger?: Partial<NStepperTriggerProps>;
+    /** Props for the stepper separator */
+    _stepperSeparator?: Partial<NStepperSeparatorProps>;
+    /** Props for the stepper title */
+    _stepperTitle?: Partial<NStepperTitleProps>;
+    /** Props for the stepper description */
+    _stepperDescription?: Partial<NStepperDescriptionProps>;
+    /** Props for the stepper indicator */
+    _stepperIndicator?: Partial<NStepperIndicatorProps>;
+    /** Props for the stepper header */
+    _stepperHeader?: Partial<NStepperHeaderProps>;
+    /** Props for the stepper wrapper */
+    _stepperWrapper?: Partial<NStepperWrapperProps>;
+    /** Props for the stepper container */
+    _stepperContainer?: Partial<NStepperContainerProps>;
+    /**
+     * `UnaUI` preset configuration
+     *
+     * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/stepper.ts
+     */
+    una?: NStepperUnaProps;
+}
+export type NStepperEmits<T> = StepperRootEmits & {
+    next: [payload: T];
+    prev: [payload: T];
+};
+export interface NStepperItemProps extends StepperItemProps, Pick<NStepperProps<NStepperItemProps>, 'orientation'>, BaseExtensions {
+    /** Slot of the stepper item */
+    slot?: string;
+    /** Title of the stepper item. */
+    title?: string;
+    /** Description of the stepper item. */
+    description?: string;
+    value?: string | number;
+    /**
+     * Icon name
+     * @see @IconifyIcon
+     *
+     * @example
+     * 'i-heroicons-book-open-20-solid'
+     */
+    icon?: string;
+    /** Additional properties for the una component */
+    una?: Pick<NStepperUnaProps, 'stepperItem'>;
+}
+export interface NStepperTriggerProps extends StepperTriggerProps, Pick<NStepperProps<StepperItemProps>, 'stepper'>, BaseExtensions {
+    /** Additional properties for the una component */
+    una?: Pick<NStepperUnaProps, 'stepperTrigger' | 'stepperMenuDefaultVariant'>;
+}
+export interface NStepperSeparatorProps extends StepperSeparatorProps, Pick<NStepperProps<StepperItemProps>, 'stepper'>, Pick<BaseExtensions, 'class'> {
+    /** Additional properties for the una component */
+    una?: Pick<NStepperUnaProps, 'stepperSeparator'>;
+}
+export interface NStepperIndicatorProps extends StepperIndicatorProps, Pick<NStepperProps<StepperItemProps>, 'stepper'>, BaseExtensions {
+    /** Additional properties for the una component */
+    una?: Pick<NStepperUnaProps, 'stepperIndicator'>;
+}
+export interface NStepperHeaderProps extends Pick<BaseExtensions, 'class'>, Pick<NStepperProps<StepperItemProps>, 'orientation'> {
+    /** Additional properties for the una component */
+    una?: Pick<NStepperUnaProps, 'stepperHeader'>;
+}
+export interface NStepperTitleProps extends StepperTitleProps, BaseExtensions {
+    /** Additional properties for the una component */
+    una?: Pick<NStepperUnaProps, 'stepperTitle'>;
+}
+export interface NStepperDescriptionProps extends StepperDescriptionProps, BaseExtensions {
+    /** Additional properties for the una component */
+    una?: Pick<NStepperUnaProps, 'stepperDescription'>;
+}
+export interface NStepperContainerProps extends Pick<BaseExtensions, 'class'>, Pick<NStepperProps<StepperItemProps>, 'orientation'> {
+    /** Additional properties for the una component */
+    una?: Pick<NStepperUnaProps, 'stepperContainer'>;
+}
+export interface NStepperWrapperProps extends Pick<BaseExtensions, 'class'>, Pick<NStepperProps<StepperItemProps>, 'orientation'> {
+    /** Additional properties for the una component */
+    una?: Pick<NStepperUnaProps, 'stepperWrapper'>;
+}
+interface NStepperUnaProps {
+    /** CSS class for the stepper */
+    stepper?: HTMLAttributes['class'];
+    /** CSS class for the stepper trigger */
+    stepperTrigger?: HTMLAttributes['class'];
+    /** CSS class for the stepper trigger default variant */
+    stepperMenuDefaultVariant?: HTMLAttributes['class'];
+    /** CSS class for the stepper item */
+    stepperItem?: HTMLAttributes['class'];
+    /** CSS class for the stepper title */
+    stepperTitle?: HTMLAttributes['class'];
+    /** CSS class for the stepper description */
+    stepperDescription?: HTMLAttributes['class'];
+    /** CSS class for the stepper indicator */
+    stepperIndicator?: HTMLAttributes['class'];
+    /** CSS class for the stepper separator */
+    stepperSeparator?: HTMLAttributes['class'];
+    /** CSS class for the stepper header */
+    stepperHeader?: HTMLAttributes['class'];
+    /** CSS class for the stepper container */
+    stepperContainer?: HTMLAttributes['class'];
+    /** CSS class for the stepper wrapper */
+    stepperWrapper?: HTMLAttributes['class'];
+}
+export {};

package/dist/runtime/types/toggle-group.d.ts

@@ -0,0 +1,39 @@
+import type { ToggleGroupItemProps, ToggleGroupRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import type { NButtonProps } from './button.js';
+import type { NToggleProps } from './toggle.js';
+interface BaseExtensions {
+    /** CSS class for the component */
+    class?: HTMLAttributes['class'];
+    /** Size of the component */
+    size?: HTMLAttributes['class'];
+}
+export interface NToggleGroupProps<T> extends ToggleGroupRootProps, Pick<NToggleProps, 'toggleOff' | 'toggleOn'>, BaseExtensions {
+    /**
+     * The array of items that is passed to the toggle group.
+     *
+     * @default []
+     */
+    items?: T;
+    /** Props for the toggle group item */
+    _toggleGroupItem?: Partial<NToggleGroupItemProps>;
+    /**
+     * `UnaUI` preset configuration
+     *
+     * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/toggle-group.ts
+     */
+    una?: NToggleGroupUnaProps;
+}
+export interface NToggleGroupItemProps extends ToggleGroupItemProps, Omit<NToggleProps, 'una'>, Pick<BaseExtensions, 'class'> {
+    /** Slot of the toggle group item */
+    slot?: string;
+    /** Additional properties for the una component */
+    una?: Pick<NToggleGroupUnaProps, 'toggleGroupItem'> & NButtonProps['una'];
+}
+interface NToggleGroupUnaProps {
+    /** CSS class for the navigation menu */
+    toggleGroup?: HTMLAttributes['class'];
+    /** CSS class for the navigation menu content */
+    toggleGroupItem?: HTMLAttributes['class'];
+}
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@una-ui/nuxt",
   "type": "module",
-  "version": "1.0.0-alpha.8",
+  "version": "1.0.0-alpha.9",
   "description": "Nuxt module for @una-ui",
   "author": "Phojie Rengel <phojrengel@gmail.com>",
   "license": "MIT",
@@ -38,13 +38,13 @@
   "dependencies": {
     "@headlessui/vue": "^1.7.23",
     "@iconify/utils": "^2.3.0",
-    "@nuxt/kit": "^3.17.7",
+    "@nuxt/kit": "^3.18.1",
     "@nuxtjs/color-mode": "^3.5.2",
     "@tanstack/vue-table": "^8.21.3",
-    "@unocss/core": "^66.2.0",
-    "@unocss/nuxt": "^66.2.0",
-    "@unocss/preset-attributify": "^66.2.0",
-    "@unocss/preset-icons": "^66.2.0",
+    "@unocss/core": "^66.4.2",
+    "@unocss/nuxt": "^66.4.2",
+    "@unocss/preset-attributify": "^66.4.2",
+    "@unocss/preset-icons": "^66.4.2",
     "@vee-validate/nuxt": "^4.15.1",
     "@vee-validate/zod": "^4.15.1",
     "@vueuse/core": "^12.8.2",
@@ -53,21 +53,21 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "ohash": "^1.1.6",
-    "reka-ui": "^2.3.2",
+    "reka-ui": "^2.4.1",
     "tailwind-merge": "^3.3.1",
-    "unocss": "^66.2.0",
+    "unocss": "^66.4.2",
     "unocss-preset-animations": "^1.2.1",
     "vaul-vue": "^0.4.1",
-    "@una-ui/preset": "^1.0.0-alpha.8",
-    "@una-ui/extractor-vue-script": "^1.0.0-alpha.8"
+    "@una-ui/preset": "^1.0.0-alpha.9",
+    "@una-ui/extractor-vue-script": "^1.0.0-alpha.9"
   },
   "devDependencies": {
-    "@iconify-json/lucide": "^1.2.57",
-    "@iconify-json/radix-icons": "^1.2.2",
-    "@iconify-json/tabler": "^1.2.19",
-    "@nuxt/module-builder": "^1.0.1",
-    "@nuxt/schema": "^3.17.7",
-    "nuxt": "^3.17.7",
+    "@iconify-json/lucide": "^1.2.62",
+    "@iconify-json/radix-icons": "^1.2.4",
+    "@iconify-json/tabler": "^1.2.22",
+    "@nuxt/module-builder": "^1.0.2",
+    "@nuxt/schema": "^3.18.1",
+    "nuxt": "^3.18.1",
     "zod": "^3.25.76"
   },
   "publishConfig": {