@revojs/ui 0.2.61 → 0.2.63

package/dist/components/accordion.d.ts

@@ -0,0 +1,13 @@
+import type { IconComponent } from "./icon";
+export type AccordionValue = string | number;
+export interface AccordionItem<Value extends AccordionValue = AccordionValue> {
+    value: Value;
+    label: string;
+    iconPrefix?: IconComponent;
+    disabled?: boolean;
+}
+export interface AccordionProps<Value extends AccordionValue = AccordionValue> {
+    modelValue?: Array<Value>;
+    items: Array<AccordionItem<Value>>;
+    multiple?: boolean;
+}

package/dist/components/accordion.js

@@ -0,0 +1 @@
+export {};

package/dist/components/checkbox.d.ts

@@ -1,5 +1,6 @@
 export interface CheckboxProps {
     modelValue?: boolean;
+    indeterminate?: boolean;
     label?: string;
     description?: string;
     name?: string;

package/dist/components/collapsible.d.ts

@@ -0,0 +1,11 @@
+import type { IconComponent } from "./icon";
+import type { StackProps } from "./stack";
+export interface CollapsibleProps {
+    modelValue?: boolean;
+    label: string;
+    iconPrefix?: IconComponent;
+    name?: string;
+    disabled?: boolean;
+    bodyPadding?: StackProps["padding"];
+    bodyGap?: StackProps["gap"];
+}

package/dist/components/collapsible.js

@@ -0,0 +1 @@
+export {};

package/dist/components/confirm.d.ts

@@ -0,0 +1,12 @@
+export type ConfirmVariant = "primary" | "destructive";
+export interface ConfirmOptions {
+    label: string;
+    description?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    variant?: ConfirmVariant;
+}
+export interface ConfirmRequest {
+    options: ConfirmOptions;
+    resolve: (value: boolean) => void;
+}

package/dist/components/confirm.js

@@ -0,0 +1 @@
+export {};

package/dist/components/counter.d.ts

@@ -4,5 +4,10 @@ export interface CounterProps {
     min?: number;
     max?: number;
     step?: number;
+    largeStep?: number;
+    name?: string;
+    placeholder?: string;
+    required?: boolean;
     disabled?: boolean;
+    invalid?: boolean;
 }

package/dist/components/labels.d.ts

@@ -0,0 +1,24 @@
+export interface UiLabels {
+    open: string;
+    close: string;
+    menu: string;
+    select: string;
+    selectRequired: string;
+    noResults: string;
+    empty: string;
+    previous: string;
+    next: string;
+    pagination: string;
+    pageNavigation: string;
+    fileSelected: string;
+    dropFile: string;
+    browseFiles: string;
+    removeFile: string;
+    decrease: string;
+    increase: string;
+    rating: (value: number, max: number) => string;
+    notifications: string;
+    confirm: string;
+    cancel: string;
+    remove: (label: string) => string;
+}

package/dist/components/labels.js

@@ -0,0 +1 @@
+export {};

package/dist/components/menu.d.ts

@@ -2,6 +2,7 @@ import type { ButtonSize } from "./button";
 import type { IconComponent } from "./icon";
 import type { PopoverProps } from "./popover";
 export type MenuItemVariant = "default" | "destructive";
+export type MenuRadioValue = string | number;
 export interface MenuProps extends Omit<PopoverProps, "contentRole" | "contentDirection" | "contentAlign" | "contentJustify" | "contentWrap"> {
     itemSize?: ButtonSize;
 }
@@ -14,3 +15,36 @@ export interface MenuItemProps {
     size?: ButtonSize;
     disabled?: boolean;
 }
+export interface MenuCheckboxItemProps {
+    modelValue?: boolean;
+    label?: string;
+    iconPrefix?: IconComponent;
+    size?: ButtonSize;
+    disabled?: boolean;
+}
+export interface MenuRadioGroupProps<Value extends MenuRadioValue = MenuRadioValue> {
+    modelValue?: Value;
+    label?: string;
+}
+export interface MenuRadioItemProps<Value extends MenuRadioValue = MenuRadioValue> {
+    value: Value;
+    label?: string;
+    iconPrefix?: IconComponent;
+    size?: ButtonSize;
+    disabled?: boolean;
+}
+export interface MenuGroupProps {
+    label?: string;
+    size?: ButtonSize;
+}
+export interface MenuLayerProps {
+    label: string;
+    iconPrefix?: IconComponent;
+    size?: ButtonSize;
+    disabled?: boolean;
+}
+export interface ContextMenuProps {
+    itemSize?: ButtonSize;
+    contentClass?: string;
+    disabled?: boolean;
+}

package/dist/components/radio-group.d.ts

@@ -0,0 +1,17 @@
+import type { RadioValue } from "./radio";
+export type RadioGroupOrientation = "vertical" | "horizontal";
+export interface RadioGroupOption<Value extends RadioValue = RadioValue> {
+    value: Value;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+}
+export interface RadioGroupProps<Value extends RadioValue = RadioValue> {
+    modelValue?: Value;
+    options: Array<RadioGroupOption<Value>>;
+    label?: string;
+    name?: string;
+    orientation?: RadioGroupOrientation;
+    required?: boolean;
+    disabled?: boolean;
+}

package/dist/components/radio-group.js

@@ -0,0 +1 @@
+export {};

package/dist/components/range.d.ts

@@ -4,5 +4,7 @@ export interface RangeProps {
     min?: number;
     max?: number;
     step?: number;
+    largeStep?: number;
+    valueText?: (value: number) => string;
     disabled?: boolean;
 }

package/dist/components/roving-focus.d.ts

@@ -0,0 +1,7 @@
+export type RovingFocusOrientation = "horizontal" | "vertical" | "both";
+export interface RovingFocusOptions {
+    selector?: string;
+    orientation?: RovingFocusOrientation;
+    loop?: boolean;
+    onMove?: (element: HTMLElement) => void;
+}

package/dist/components/roving-focus.js

@@ -0,0 +1 @@
+export {};

package/dist/components/select.d.ts

@@ -8,6 +8,7 @@ export type SelectWidth = "full" | "fit";
 export interface SelectOption<Value extends SelectValue = SelectValue> {
     label: string;
     value: Value;
+    group?: string;
     disabled?: boolean;
 }
 export interface SelectProps<Value extends SelectValue = SelectValue> {

package/dist/components/stepper.d.ts

@@ -0,0 +1,16 @@
+export type StepperValue = string | number;
+export type StepperOrientation = "horizontal" | "vertical";
+export type StepperState = "complete" | "current" | "upcoming";
+export interface StepperItem<Value extends StepperValue = StepperValue> {
+    value: Value;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+}
+export interface StepperProps<Value extends StepperValue = StepperValue> {
+    modelValue?: Value;
+    items: Array<StepperItem<Value>>;
+    label?: string;
+    orientation?: StepperOrientation;
+    linear?: boolean;
+}

package/dist/components/stepper.js

@@ -0,0 +1 @@
+export {};

package/dist/components/tabs.d.ts

@@ -1,6 +1,8 @@
 import type { IconComponent } from "./icon";
 export type TabsValue = string | number;
-export type TabsSize = "md" | "xs";
+export type TabsSize = "md" | "sm" | "xs";
+export type TabsOrientation = "horizontal" | "vertical";
+export type TabsActivation = "automatic" | "manual";
 export interface TabsItem<Value extends TabsValue = TabsValue> {
     value: Value;
     label: string;
@@ -12,4 +14,6 @@ export interface TabsProps<Value extends TabsValue = TabsValue> {
     items: Array<TabsItem<Value>>;
     label?: string;
     size?: TabsSize;
+    orientation?: TabsOrientation;
+    activation?: TabsActivation;
 }

package/dist/components/tags-input.d.ts

@@ -0,0 +1,10 @@
+export interface TagsInputProps {
+    modelValue?: Array<string>;
+    label?: string;
+    placeholder?: string;
+    name?: string;
+    max?: number;
+    required?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+}

package/dist/components/tags-input.js

@@ -0,0 +1 @@
+export {};

package/dist/components/toast.d.ts

@@ -0,0 +1,19 @@
+import type { NotificationVariant } from "./notification";
+export interface ToastAction {
+    label: string;
+    onSelect: () => void;
+}
+export interface ToastOptions {
+    label: string;
+    subtext?: string;
+    variant?: NotificationVariant;
+    duration?: number;
+    action?: ToastAction;
+}
+export interface Toast extends ToastOptions {
+    id: string;
+}
+export interface ToastRegionProps {
+    label?: string;
+    hotkey?: string;
+}

package/dist/components/toast.js

@@ -0,0 +1 @@
+export {};

package/dist/components/toggle-group.d.ts

@@ -1,16 +1,19 @@
 import type { IconComponent } from "./icon";
+import type { RovingFocusOrientation } from "./roving-focus";
 export type ToggleGroupValue = string | number;
-export type ToggleGroupSize = "md" | "xs";
+export type ToggleGroupSize = "md" | "sm" | "xs";
 export interface ToggleGroupItem<Value extends ToggleGroupValue = ToggleGroupValue> {
     value: Value;
     label?: string;
     iconPrefix?: IconComponent;
     disabled?: boolean;
 }
-export interface ToggleGroupProps<Value extends ToggleGroupValue = ToggleGroupValue> {
-    modelValue?: Value;
+export interface ToggleGroupProps<Value extends ToggleGroupValue = ToggleGroupValue, Model extends Value | Array<Value> = Value> {
+    modelValue?: Model;
     items: Array<ToggleGroupItem<Value>>;
     label?: string;
     size?: ToggleGroupSize;
     wrap?: boolean;
+    multiple?: boolean;
+    orientation?: Exclude<RovingFocusOrientation, "both">;
 }

package/dist/components/toolbar.d.ts

@@ -0,0 +1,12 @@
+import type { RovingFocusOrientation } from "./roving-focus";
+import type { StackProps } from "./stack";
+export interface ToolbarProps {
+    label?: string;
+    orientation?: Exclude<RovingFocusOrientation, "both">;
+    gap?: StackProps["gap"];
+    padding?: StackProps["padding"];
+    align?: StackProps["align"];
+    justify?: StackProps["justify"];
+    wrap?: boolean;
+    loop?: boolean;
+}

package/dist/components/toolbar.js

@@ -0,0 +1 @@
+export {};

package/dist/components/tooltip.d.ts

@@ -4,5 +4,6 @@ export interface TooltipProps {
     label: string;
     placement?: TooltipPlacement;
     align?: TooltipAlign;
+    delay?: number;
     disabled?: boolean;
 }

package/dist/index.d.ts

@@ -1,37 +1,47 @@
+export type * from "./components/accordion";
 export type * from "./components/badge";
 export type * from "./components/breadcrumb";
 export type * from "./components/button";
 export type * from "./components/card";
 export type * from "./components/checkbox";
+export type * from "./components/collapsible";
 export type * from "./components/collection";
+export type * from "./components/confirm";
 export type * from "./components/container";
 export type * from "./components/control";
 export type * from "./components/counter";
 export type * from "./components/dialog";
+export type * from "./components/entry";
 export type * from "./components/field";
 export type * from "./components/heading";
-export type * from "./components/shell";
 export type * from "./components/icon";
 export type * from "./components/input";
+export type * from "./components/labels";
 export type * from "./components/link";
 export type * from "./components/markdown";
 export type * from "./components/menu";
-export type * from "./components/entry";
-export type * from "./components/notification";
 export type * from "./components/navigate";
-export type * from "./components/popover";
+export type * from "./components/notification";
 export type * from "./components/pagination";
+export type * from "./components/popover";
 export type * from "./components/progress";
 export type * from "./components/radio";
+export type * from "./components/radio-group";
 export type * from "./components/range";
 export type * from "./components/rating";
+export type * from "./components/roving-focus";
 export type * from "./components/select";
 export type * from "./components/separator";
 export type * from "./components/sheet";
+export type * from "./components/shell";
 export type * from "./components/stack";
+export type * from "./components/stepper";
 export type * from "./components/switch";
 export type * from "./components/tabs";
-export type * from "./components/upload";
+export type * from "./components/tags-input";
 export type * from "./components/textarea";
+export type * from "./components/toast";
 export type * from "./components/toggle-group";
+export type * from "./components/toolbar";
 export type * from "./components/tooltip";
+export type * from "./components/upload";

package/dist/style.css

@@ -49,6 +49,10 @@
 }
 
 @layer base {
+    :root {
+        color-scheme: light dark;
+    }
+
     * {
         @apply border-border outline-ring;
     }

package/dist/vue/components/accordion.vue

@@ -0,0 +1,57 @@
+<template>
+    <Stack gap="1">
+        <Collapsible
+            v-for="item in items"
+            :key="item.value"
+            :model-value="opened.includes(item.value)"
+            :label="item.label"
+            :icon-prefix="item.iconPrefix"
+            :disabled="item.disabled"
+            :name="multiple ? undefined : name"
+            @update:model-value="toggle(item.value, $event)"
+        >
+            <slot :item="item" />
+        </Collapsible>
+    </Stack>
+</template>
+
+<script setup lang="ts" generic="Value extends AccordionValue = AccordionValue">
+import { ref, useId, watch } from "vue";
+import type { AccordionProps, AccordionValue } from "../../components/accordion";
+import Collapsible from "./collapsible.vue";
+import Stack from "./stack.vue";
+
+const { modelValue, items, multiple = false } = defineProps<AccordionProps<Value>>();
+
+const emit = defineEmits<{
+    "update:modelValue": [value: Array<Value>];
+}>();
+
+const name = useId();
+
+const opened = ref<Array<AccordionValue>>([...(modelValue ?? [])]);
+
+function toggle(value: Value, open: boolean) {
+    const values: Array<Value> = [];
+
+    for (const entry of opened.value as Array<Value>) {
+        if (entry !== value && (multiple || open === false)) {
+            values.push(entry);
+        }
+    }
+
+    if (open) {
+        values.push(value);
+    }
+
+    opened.value = values;
+    emit("update:modelValue", values);
+}
+
+watch(
+    () => modelValue,
+    (value) => {
+        opened.value = [...(value ?? [])];
+    },
+);
+</script>

package/dist/vue/components/checkbox.vue

@@ -8,9 +8,11 @@
         :class="interactionVariants[interaction]"
     >
         <input
+            ref="input"
             class="peer sr-only"
             type="checkbox"
             :checked="modelValue"
+            :data-state="state"
             :name="name"
             :required="required"
             :disabled="disabled"
@@ -21,16 +23,17 @@
             aria-hidden="true"
             class="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-ui border peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-ring"
             :class="[
-                modelValue ? 'border-transparent bg-primary' : 'border-input bg-background',
+                modelValue || indeterminate ? 'border-transparent bg-primary' : 'border-input bg-background',
                 disabled
                     ? ''
-                    : modelValue
+                    : modelValue || indeterminate
                       ? 'group-hover:bg-primary-hover group-active:bg-primary-active'
                       : 'group-hover:bg-secondary-hover group-active:bg-secondary-active',
             ]"
         >
+            <span v-if="indeterminate" class="h-0.5 w-2.5 bg-primary-foreground" />
             <span
-                v-if="modelValue"
+                v-else-if="modelValue"
                 class="mb-px h-2.5 w-1.5 rotate-45 border-b-2 border-r-2 border-primary-foreground"
             />
         </span>
@@ -45,13 +48,14 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, useTemplateRef, watchEffect } from "vue";
 import type { CheckboxProps } from "../../components/checkbox";
 import type { ControlInteraction } from "../../components/control.ts";
 import Stack from "./stack.vue";
 
 const {
     modelValue = false,
+    indeterminate = false,
     label,
     description,
     name,
@@ -63,6 +67,22 @@ defineEmits<{
     "update:modelValue": [value: boolean];
 }>();
 
+const input = useTemplateRef("input");
+
+const state = computed(() => {
+    if (indeterminate) {
+        return "indeterminate";
+    }
+
+    return modelValue ? "checked" : "unchecked";
+});
+
+watchEffect(() => {
+    if (input.value) {
+        input.value.indeterminate = indeterminate;
+    }
+});
+
 const interaction = computed<ControlInteraction>(() => (disabled ? "disabled" : "enabled"));
 
 const interactionVariants: Record<ControlInteraction, string> = {

package/dist/vue/components/collapsible.vue

@@ -0,0 +1,72 @@
+<template>
+    <details
+        :name="name"
+        :open="isOpen"
+        class="group/collapsible w-full rounded-ui"
+        :data-state="isOpen ? 'open' : 'closed'"
+        :data-disabled="disabled ? '' : undefined"
+        @toggle="handleToggle"
+    >
+        <summary
+            class="flex cursor-pointer list-none items-center gap-1 rounded-ui p-3 text-sm font-medium outline-ring select-none hover:bg-ghost-hover active:bg-ghost-active focus-visible:outline-2 focus-visible:outline-offset-[-2px] [&::-webkit-details-marker]:hidden"
+            :class="disabled ? 'cursor-not-allowed opacity-50 hover:bg-transparent active:bg-transparent' : ''"
+            :tabindex="disabled ? -1 : undefined"
+            :aria-disabled="disabled || undefined"
+            @click="disabled && $event.preventDefault()"
+        >
+            <Icon v-if="iconPrefix" :is="iconPrefix" :size="20" />
+
+            <span class="min-w-0 flex-1 truncate px-1">{{ label }}</span>
+
+            <Icon :is="ArrowDownIcon" :size="20" class="shrink-0 group-open/collapsible:rotate-180" />
+        </summary>
+
+        <Stack :padding="bodyPadding">
+            <Stack :gap="bodyGap" class="px-1">
+                <slot />
+            </Stack>
+        </Stack>
+    </details>
+</template>
+
+<script setup lang="ts">
+import ArrowDownIcon from "~icons/hugeicons/arrow-down-01";
+import { ref, watch } from "vue";
+import type { CollapsibleProps } from "../../components/collapsible";
+import Icon from "./icon.vue";
+import Stack from "./stack.vue";
+
+const {
+    modelValue = undefined,
+    label,
+    iconPrefix,
+    name,
+    disabled = false,
+    bodyPadding = "3",
+    bodyGap = "3",
+} = defineProps<CollapsibleProps>();
+
+const emit = defineEmits<{
+    "update:modelValue": [value: boolean];
+}>();
+
+const isOpen = ref(modelValue ?? false);
+
+function handleToggle(event: Event) {
+    const value = (event.currentTarget as HTMLDetailsElement).open;
+
+    if (value !== isOpen.value) {
+        isOpen.value = value;
+        emit("update:modelValue", value);
+    }
+}
+
+watch(
+    () => modelValue,
+    (value) => {
+        if (value !== undefined) {
+            isOpen.value = value;
+        }
+    },
+);
+</script>

package/dist/vue/components/collection.vue

@@ -12,7 +12,7 @@
         <slot v-else name="empty">
             <Stack padding="1">
                 <Stack padding="3" align="center" class="text-sm text-muted-foreground">
-                    <span>{{ emptyLabel }}</span>
+                    <span>{{ emptyLabel ?? labels.empty }}</span>
                 </Stack>
             </Stack>
         </slot>
@@ -25,9 +25,12 @@
 <script setup generic="T" lang="ts">
 import type { CollectionColumns, CollectionProps } from "../../components/collection";
 import type { StackGap } from "../../components/stack";
+import { useUiLabels } from "../utilities/labels";
 import Stack from "./stack.vue";
 
-const { items, columns = 1, gap = "5", itemKey, emptyLabel = "Nothing found" } = defineProps<CollectionProps<T>>();
+const { items, columns = 1, gap = "5", itemKey, emptyLabel } = defineProps<CollectionProps<T>>();
+
+const labels = useUiLabels();
 
 defineSlots<{
     default: (() => unknown) & ((props: { item: T; index: number }) => unknown);

package/dist/vue/components/confirm-dialog.vue

@@ -0,0 +1,45 @@
+<template>
+    <Dialog
+        :model-value="request !== undefined"
+        role="alertdialog"
+        :label="request?.options.label"
+        :aria-describedby="request?.options.description ? descriptionId : undefined"
+        @update:model-value="!$event && answer(false)"
+    >
+        <p v-if="request?.options.description" :id="descriptionId" class="text-sm text-muted-foreground">
+            {{ request.options.description }}
+        </p>
+
+        <template #footer>
+            <Stack direction="horizontal" justify="end" gap="1" wrap class="w-full">
+                <Button
+                    autofocus
+                    variant="outline"
+                    :label="request?.options.cancelLabel ?? labels.cancel"
+                    @click="answer(false)"
+                />
+
+                <Button
+                    :variant="request?.options.variant ?? 'primary'"
+                    :label="request?.options.confirmLabel ?? labels.confirm"
+                    @click="answer(true)"
+                />
+            </Stack>
+        </template>
+    </Dialog>
+</template>
+
+<script setup lang="ts">
+import { useId } from "vue";
+import { useUiLabels } from "../utilities/labels";
+import { useConfirm } from "../utilities/use-confirm";
+import Button from "./button.vue";
+import Dialog from "./dialog.vue";
+import Stack from "./stack.vue";
+
+const labels = useUiLabels();
+
+const { request, answer } = useConfirm();
+
+const descriptionId = useId();
+</script>