@revojs/ui 0.2.12 → 0.2.14

package/dist/components/button.d.ts

@@ -16,4 +16,5 @@ export interface ButtonProps {
     variant?: ButtonVariant;
     type?: ButtonType;
     disabled?: boolean;
+    loading?: boolean;
 }

package/dist/components/card.d.ts

@@ -1,3 +1,11 @@
+import type { StackProps } from "./stack";
 export interface CardProps {
     label?: string;
+    labelId?: string;
+    bodyPadding?: StackProps["padding"];
+    bodyGap?: StackProps["gap"];
+    bodyDirection?: StackProps["direction"];
+    bodyAlign?: StackProps["align"];
+    bodyJustify?: StackProps["justify"];
+    bodyWrap?: StackProps["wrap"];
 }

package/dist/components/collection.d.ts

@@ -1,6 +1,9 @@
+import type { StackProps } from "./stack";
 export type CollectionColumns = 1 | 2 | 3 | 4;
 export interface CollectionProps<T = unknown> {
     items?: Array<T>;
     columns?: CollectionColumns;
+    gap?: StackProps["gap"];
+    itemKey?: keyof T | ((item: T, index: number) => string | number);
     emptyLabel?: string;
 }

package/dist/components/container.d.ts

@@ -1,6 +1,5 @@
-import type { StackGap } from "./stack";
+import type { StackProps } from "./stack";
 export type ContainerSize = "3xl" | "5xl" | "7xl";
-export interface ContainerProps {
+export interface ContainerProps extends StackProps {
     size?: ContainerSize;
-    padding?: StackGap;
 }

package/dist/components/dialog.d.ts

@@ -1,5 +1,6 @@
-export interface DialogProps {
+import type { CardProps } from "./card";
+export interface DialogProps extends CardProps {
     modelValue?: boolean;
-    label?: string;
     closeLabel?: string;
+    dismissible?: boolean;
 }

package/dist/components/entry.d.ts

@@ -0,0 +1,6 @@
+import type { StackProps } from "./stack";
+export interface EntryProps extends StackProps {
+    href?: string;
+    label?: string;
+    active?: boolean;
+}

package/dist/components/entry.js

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

package/dist/components/field.d.ts

@@ -6,4 +6,6 @@ export interface FieldProps {
     text?: FieldText;
     required?: boolean;
     disabled?: boolean;
+    for?: string;
+    is?: "div" | "fieldset";
 }

package/dist/components/input.d.ts

@@ -12,4 +12,5 @@ export interface InputProps {
     required?: boolean;
     readonly?: boolean;
     disabled?: boolean;
+    invalid?: boolean;
 }

package/dist/components/notification.d.ts

@@ -0,0 +1,9 @@
+import type { IconComponent } from "./icon";
+export type NotificationVariant = "error" | "attention" | "success" | "info";
+export interface NotificationProps {
+    label?: string;
+    subtext?: string;
+    icon?: IconComponent;
+    variant?: NotificationVariant;
+    announce?: boolean;
+}

package/dist/components/notification.js

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

package/dist/components/pagination.d.ts

@@ -0,0 +1,8 @@
+export interface PaginationProps {
+    hasPrevious?: boolean;
+    hasNext?: boolean;
+    loading?: boolean;
+    previousLabel?: string;
+    nextLabel?: string;
+    label?: string;
+}

package/dist/components/pagination.js

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

package/dist/components/popover.d.ts

@@ -1,10 +1,18 @@
-import type { ButtonLayout } from "./button";
+import type { ButtonLayout, ButtonVariant } from "./button";
+import type { StackProps } from "./stack";
 export interface PopoverProps {
     modelValue?: boolean;
     triggerLabel?: string;
     triggerClass?: string;
     triggerLayout?: ButtonLayout;
+    triggerVariant?: ButtonVariant;
     contentClass?: string;
+    contentPadding?: StackProps["padding"];
+    contentGap?: StackProps["gap"];
+    contentDirection?: StackProps["direction"];
+    contentAlign?: StackProps["align"];
+    contentJustify?: StackProps["justify"];
+    contentWrap?: StackProps["wrap"];
     matchTriggerWidth?: boolean;
     disabled?: boolean;
 }

package/dist/components/select.d.ts

@@ -1,17 +1,20 @@
 export type SelectValue = string | number;
 export type SelectValueState = "placeholder" | "selected";
-export interface SelectOption {
+export interface SelectOption<Value extends SelectValue = SelectValue> {
     label: string;
-    value: SelectValue;
+    value: Value;
     disabled?: boolean;
 }
-export interface SelectProps {
-    modelValue?: SelectValue;
-    options: Array<SelectOption>;
+export interface SelectProps<Value extends SelectValue = SelectValue> {
+    modelValue?: Value;
+    options: Array<SelectOption<Value>>;
     label?: string;
     placeholder?: string;
     emptyLabel?: string;
     name?: string;
     required?: boolean;
     disabled?: boolean;
+    searchable?: boolean;
+    invalid?: boolean;
+    requiredLabel?: string;
 }

package/dist/components/sheet.d.ts

@@ -1,7 +1,8 @@
+import type { CardProps } from "./card";
 export type SheetSide = "top" | "right" | "bottom" | "left";
-export interface SheetProps {
+export interface SheetProps extends CardProps {
     modelValue?: boolean;
     side?: SheetSide;
-    label?: string;
     closeLabel?: string;
+    dismissible?: boolean;
 }

package/dist/components/shell.d.ts

@@ -0,0 +1,6 @@
+export interface ShellProps {
+    label?: string;
+    headingLabel?: string;
+    sticky?: boolean;
+    navigationLabel?: string;
+}

package/dist/components/shell.js

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

package/dist/components/textarea.d.ts

@@ -0,0 +1,13 @@
+export type TextareaText = "sm" | "md";
+export type TextareaResize = "none" | "vertical" | "horizontal" | "both";
+export type TextareaVariant = "default" | "plain";
+export interface TextareaProps {
+    modelValue?: string;
+    text?: TextareaText;
+    resize?: TextareaResize;
+    variant?: TextareaVariant;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+}

package/dist/components/textarea.js

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

package/dist/index.d.ts

@@ -9,11 +9,15 @@ export type * from "./components/counter";
 export type * from "./components/dialog";
 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/link";
+export type * from "./components/entry";
+export type * from "./components/notification";
 export type * from "./components/navigate";
 export type * from "./components/popover";
+export type * from "./components/pagination";
 export type * from "./components/progress";
 export type * from "./components/radio";
 export type * from "./components/range";
@@ -24,3 +28,4 @@ export type * from "./components/sheet";
 export type * from "./components/stack";
 export type * from "./components/switch";
 export type * from "./components/upload";
+export type * from "./components/textarea";

package/dist/module/index.d.ts

@@ -30,6 +30,14 @@ export interface UiTheme {
     destructiveHover: TailwindColor;
     destructiveActive: TailwindColor;
     destructiveForeground: TailwindColor;
+    attention: TailwindColor;
+    attentionHover: TailwindColor;
+    attentionActive: TailwindColor;
+    attentionForeground: TailwindColor;
+    success: TailwindColor;
+    successHover: TailwindColor;
+    successActive: TailwindColor;
+    successForeground: TailwindColor;
     border: TailwindColor;
     input: TailwindColor;
     ring: TailwindColor;

package/dist/module/index.js

@@ -54,6 +54,14 @@ var module_default = defineModule({
 			destructiveHover: "red-600",
 			destructiveActive: "red-700",
 			destructiveForeground: "zinc-50",
+			attention: "yellow-700",
+			attentionHover: "yellow-800",
+			attentionActive: "yellow-900",
+			attentionForeground: "white",
+			success: "green-700",
+			successHover: "green-800",
+			successActive: "green-900",
+			successForeground: "white",
 			border: "zinc-200",
 			input: "zinc-200",
 			ring: "zinc-400"
@@ -83,6 +91,14 @@ var module_default = defineModule({
 			destructiveHover: "red-600",
 			destructiveActive: "red-700",
 			destructiveForeground: "zinc-50",
+			attention: "yellow-400",
+			attentionHover: "yellow-500",
+			attentionActive: "yellow-600",
+			attentionForeground: "zinc-950",
+			success: "green-400",
+			successHover: "green-500",
+			successActive: "green-600",
+			successForeground: "zinc-950",
 			border: "zinc-700",
 			input: "zinc-700",
 			ring: "zinc-700"

package/dist/style.css

@@ -27,6 +27,14 @@
     --color-destructive-hover: var(--ui-destructive-hover);
     --color-destructive-active: var(--ui-destructive-active);
     --color-destructive-foreground: var(--ui-destructive-foreground);
+    --color-attention: var(--ui-attention);
+    --color-attention-hover: var(--ui-attention-hover);
+    --color-attention-active: var(--ui-attention-active);
+    --color-attention-foreground: var(--ui-attention-foreground);
+    --color-success: var(--ui-success);
+    --color-success-hover: var(--ui-success-hover);
+    --color-success-active: var(--ui-success-active);
+    --color-success-foreground: var(--ui-success-foreground);
     --color-border: var(--ui-border);
     --color-input: var(--ui-input);
     --color-ring: var(--ui-ring);

package/dist/vue/components/breadcrumb.vue

@@ -11,7 +11,12 @@
             >
                 <span v-if="index" aria-hidden="true" class="opacity-40"> / </span>
 
-                <Link :href="href" :label="label" :variant="index === routes.length - 1 ? 'primary' : 'muted'" />
+                <Link
+                    :href="href"
+                    :label="label"
+                    :variant="index === routes.length - 1 ? 'primary' : 'muted'"
+                    :aria-current="index === routes.length - 1 ? 'page' : undefined"
+                />
             </Stack>
         </Stack>
     </nav>

package/dist/vue/components/button.vue

@@ -3,10 +3,19 @@
         :is="is"
         class="inline-flex shrink-0 cursor-pointer items-center justify-center gap-1 truncate rounded-ui font-[inherit] no-underline outline-ring select-none focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50"
         :class="[fonts[font], layouts[layout], sizes[size], texts[text], variants[variant]]"
-        :type="attributes.type ?? 'button'"
-        :disabled="disabled"
+        :type="is === 'a' ? undefined : (attributes.type ?? 'button')"
+        :disabled="is === 'a' ? undefined : disabled || loading"
+        :aria-disabled="disabled || loading || undefined"
+        :aria-busy="loading || undefined"
+        @click="click"
     >
-        <Icon v-if="iconPrefix" :is="iconPrefix" :size="iconSize[text]" />
+        <span
+            v-if="loading"
+            aria-hidden="true"
+            class="size-5 shrink-0 animate-spin rounded-full border-2 border-current border-r-transparent"
+        />
+
+        <Icon v-else-if="iconPrefix" :is="iconPrefix" :size="iconSize[text]" />
 
         <slot>
             <span v-if="label" class="truncate px-1" :class="labelLayouts[layout]">{{ label }}</span>
@@ -39,6 +48,7 @@ const {
     text = "sm",
     variant = "primary",
     disabled = false,
+    loading = false,
 } = defineProps<
     Omit<ButtonProps, "type"> & {
         is?: string | Component;
@@ -47,6 +57,18 @@ const {
 
 const attributes = useAttrs();
 
+const emit = defineEmits<{ click: [event: MouseEvent] }>();
+
+function click(event: MouseEvent) {
+    if (disabled || loading) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        return;
+    }
+
+    emit("click", event);
+}
+
 const fonts: Record<ButtonFont, string> = {
     normal: "font-normal",
     medium: "font-medium",

package/dist/vue/components/card.vue

@@ -9,7 +9,9 @@
             class="shrink-0 border-b border-border"
         >
             <slot name="header">
-                <span v-if="label" class="min-w-0 flex-1 px-5 py-3 text-sm/5 font-normal"> {{ label }} </span>
+                <span v-if="label" :id="labelId" class="min-w-0 flex-1 px-5 py-3 text-sm/5 font-normal">
+                    {{ label }}
+                </span>
             </slot>
 
             <Stack v-if="$slots.actions" direction="horizontal" align="center" class="ml-auto shrink-0">
@@ -17,7 +19,15 @@
             </Stack>
         </Stack>
 
-        <Stack gap="5" padding="5" class="min-h-0 flex-1">
+        <Stack
+            :gap="bodyGap"
+            :padding="bodyPadding"
+            :direction="bodyDirection"
+            :align="bodyAlign"
+            :justify="bodyJustify"
+            :wrap="bodyWrap"
+            class="min-h-0 flex-1"
+        >
             <slot />
         </Stack>
 
@@ -31,5 +41,14 @@
 import type { CardProps } from "../../components/card";
 import Stack from "./stack.vue";
 
-const { label } = defineProps<CardProps>();
+const {
+    label,
+    labelId,
+    bodyPadding = "5",
+    bodyGap = "5",
+    bodyDirection,
+    bodyAlign,
+    bodyJustify,
+    bodyWrap,
+} = defineProps<CardProps>();
 </script>

package/dist/vue/components/collection.vue

@@ -5,17 +5,22 @@
         class="w-full divide-y divide-border overflow-hidden rounded-ui border border-border bg-card"
     >
         <template v-if="items.length">
-            <div v-for="(item, index) in items" :key="index">
+            <div
+                v-for="(item, index) in items"
+                :key="typeof itemKey === 'function' ? itemKey(item, index) : itemKey ? String(item[itemKey]) : index"
+            >
                 <slot :item="item" :index="index" />
             </div>
         </template>
-        <Stack v-else align="center" padding="5">
-            <Icon :is="SearchIcon" class="text-2xl" />
+        <slot v-else name="empty">
+            <Stack align="center" padding="5">
+                <Icon :is="SearchIcon" class="text-2xl" />
 
-            <span>{{ emptyLabel }}</span>
-        </Stack>
+                <span>{{ emptyLabel }}</span>
+            </Stack>
+        </slot>
     </Stack>
-    <div v-else class="grid gap-5" :class="columnsClass[columns]">
+    <div v-else class="grid" :class="[columnsClass[columns], gaps[gap]]">
         <slot />
     </div>
 </template>
@@ -23,13 +28,15 @@
 <script setup generic="T" lang="ts">
 import SearchIcon from "~icons/hugeicons/search-01";
 import type { CollectionColumns, CollectionProps } from "../../components/collection";
+import type { StackGap } from "../../components/stack";
 import Icon from "./icon.vue";
 import Stack from "./stack.vue";
 
-const { items, columns = 1, emptyLabel = "Nothing found" } = defineProps<CollectionProps<T>>();
+const { items, columns = 1, gap = "5", itemKey, emptyLabel = "Nothing found" } = defineProps<CollectionProps<T>>();
 
 defineSlots<{
     default: (() => unknown) & ((props: { item: T; index: number }) => unknown);
+    empty?: () => unknown;
 }>();
 
 const columnsClass: Record<CollectionColumns, string> = {
@@ -38,4 +45,12 @@ const columnsClass: Record<CollectionColumns, string> = {
     3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
     4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
 };
+
+const gaps: Record<StackGap, string> = {
+    "0": "gap-0",
+    "1": "gap-1",
+    "3": "gap-3",
+    "5": "gap-5",
+    "7": "gap-7",
+};
 </script>

package/dist/vue/components/container.vue

@@ -1,7 +1,11 @@
 <template>
     <Stack
-        gap="5"
+        :gap="gap"
         :padding="padding"
+        :direction="direction"
+        :align="align"
+        :justify="justify"
+        :wrap="wrap"
         :class="sizes[size]"
         class="mx-auto w-full overflow-y-scroll [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
     >
@@ -13,7 +17,7 @@
 import type { ContainerProps, ContainerSize } from "../../components/container";
 import Stack from "./stack.vue";
 
-const { size = "5xl", padding = "5" } = defineProps<ContainerProps>();
+const { size = "5xl", padding = "5", gap = "5", direction, align, justify, wrap } = defineProps<ContainerProps>();
 
 const sizes: Record<ContainerSize, string> = {
     "3xl": "max-w-3xl",

package/dist/vue/components/dialog.vue

@@ -2,13 +2,39 @@
     <dialog
         ref="dialog"
         class="fixed inset-0 m-0 h-full max-h-none w-full max-w-none flex-col items-center overflow-y-auto border-0 bg-transparent p-5 backdrop:bg-black/50 open:flex [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
-        @close="$emit('update:modelValue', false)"
-        @click="$event.target === $event.currentTarget && ($event.currentTarget as HTMLDialogElement).close()"
+        :aria-labelledby="label && !$slots.header ? (labelId ?? id) : ($attrs as HTMLAttributes)['aria-labelledby']"
+        @close="handleClose"
+        @cancel="dismiss"
+        @click="$event.target === $event.currentTarget && dismiss($event)"
     >
-        <Card :label="label" class="my-auto max-w-3xl shrink-0 shadow-2xl">
+        <Card
+            :label="label"
+            :label-id="labelId ?? id"
+            :body-padding="bodyPadding"
+            :body-gap="bodyGap"
+            :body-direction="bodyDirection"
+            :body-align="bodyAlign"
+            :body-justify="bodyJustify"
+            :body-wrap="bodyWrap"
+            class="my-auto max-w-3xl shrink-0 shadow-2xl"
+        >
+            <template v-if="$slots.header" #header>
+                <slot name="header" />
+            </template>
+
             <template #actions>
-                <Button size="icon" variant="ghost" :icon-prefix="CloseIcon" :aria-label="closeLabel" @click="close" />
+                <slot name="actions" />
+
+                <Button
+                    size="icon"
+                    variant="ghost"
+                    :icon-prefix="CloseIcon"
+                    :aria-label="closeLabel"
+                    :disabled="!dismissible"
+                    @click="dismiss"
+                />
             </template>
+
             <slot :open="open" :close="close" :toggle="toggle" />
 
             <template v-if="$slots.footer" #footer>
@@ -20,14 +46,25 @@
 
 <script setup lang="ts">
 import CloseIcon from "~icons/hugeicons/multiplication-sign";
-import { useTemplateRef, watchEffect } from "vue";
+import { useId, useTemplateRef, type HTMLAttributes } from "vue";
 import type { DialogProps } from "../../components/dialog";
 import Button from "./button.vue";
 import Card from "./card.vue";
-import { useFocusTrap } from "../utilities/use-focus-trap";
-import { useScrollLock } from "../utilities/use-scroll-lock";
+import { useModalDialog } from "../utilities/use-modal-dialog";
 
-const { modelValue = false, label, closeLabel = "Close" } = defineProps<DialogProps>();
+const {
+    modelValue = undefined,
+    label,
+    labelId,
+    bodyPadding,
+    bodyGap,
+    bodyDirection,
+    bodyAlign,
+    bodyJustify,
+    bodyWrap,
+    closeLabel = "Close",
+    dismissible = true,
+} = defineProps<DialogProps>();
 
 const emit = defineEmits<{
     "update:modelValue": [value: boolean];
@@ -35,34 +72,14 @@ const emit = defineEmits<{
 
 const dialog = useTemplateRef("dialog");
 
-useFocusTrap(dialog, () => modelValue);
-
-useScrollLock(() => modelValue);
-
-function open() {
-    emit("update:modelValue", true);
-}
-
-function close() {
-    dialog.value?.close();
-    emit("update:modelValue", false);
-}
-
-function toggle() {
-    if (modelValue) {
-        close();
-    } else {
-        open();
-    }
-}
+const id = `dialog-${useId()}`;
 
-watchEffect(() => {
-    if (modelValue && !dialog.value?.open) {
-        dialog.value?.showModal();
-    } else if (!modelValue && dialog.value?.open) {
-        dialog.value.close();
-    }
-});
+const { open, close, toggle, dismiss, handleClose } = useModalDialog(
+    dialog,
+    () => modelValue,
+    (value) => emit("update:modelValue", value),
+    () => dismissible,
+);
 
 defineExpose({ open, close, toggle });
 </script>

package/dist/vue/components/entry.vue

@@ -0,0 +1,52 @@
+<template>
+    <Stack
+        :is="href ? 'a' : is"
+        :href="href"
+        :padding="padding"
+        :gap="gap"
+        :direction="direction"
+        :align="align"
+        :justify="justify"
+        :wrap="wrap"
+        :aria-current="active && href ? 'page' : undefined"
+        class="min-w-0 text-sm"
+        :class="[
+            href
+                ? 'cursor-pointer outline-ring hover:bg-ghost-hover active:bg-ghost-active focus-visible:outline-2 focus-visible:outline-offset-[-2px]'
+                : '',
+            active ? 'bg-secondary text-secondary-foreground' : '',
+        ]"
+    >
+        <Stack v-if="$slots.prefix" gap="0" class="shrink-0">
+            <slot name="prefix" />
+        </Stack>
+
+        <Stack gap="0" class="min-w-0 flex-1">
+            <slot
+                ><span class="truncate">{{ label }}</span></slot
+            >
+        </Stack>
+
+        <Stack v-if="$slots.suffix" gap="0" class="shrink-0">
+            <slot name="suffix" />
+        </Stack>
+    </Stack>
+</template>
+
+<script setup lang="ts">
+import type { EntryProps } from "../../components/entry";
+import Stack from "./stack.vue";
+
+const {
+    is = "div",
+    href,
+    label,
+    active = false,
+    padding = "5",
+    gap = "3",
+    direction = "horizontal",
+    align = "center",
+    justify = "between",
+    wrap = false,
+} = defineProps<EntryProps & { is?: string }>();
+</script>