@revojs/ui 0.2.11 → 0.2.13

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,5 +1,11 @@
+import type { StackProps } from "./stack";
 export interface CardProps {
     label?: string;
-    title?: string;
-    description?: 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,6 +1,6 @@
-export interface DialogProps {
+import type { CardProps } from "./card";
+export interface DialogProps extends CardProps {
     modelValue?: boolean;
-    title?: string;
-    description?: 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

@@ -1,7 +1,11 @@
+export type FieldText = "sm" | "md";
 export interface FieldProps {
     label?: string;
     description?: string;
     error?: string;
+    text?: FieldText;
     required?: boolean;
     disabled?: boolean;
+    for?: string;
+    is?: "div" | "fieldset";
 }

package/dist/components/input.d.ts

@@ -1,7 +1,9 @@
 import type { IconComponent } from "./icon";
+export type InputText = "sm" | "md";
 export interface InputProps {
     modelValue?: string | number;
     type?: string;
+    text?: InputText;
     iconPrefix?: IconComponent;
     iconSuffix?: IconComponent;
     placeholder?: string;
@@ -10,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,8 +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;
-    title?: string;
-    description?: 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/components/upload.d.ts

@@ -1,8 +1,10 @@
 export type UploadState = "idle" | "over";
+export type UploadText = "sm" | "md";
 export interface UploadProps {
     modelValue?: Blob | File;
     label?: string;
     description?: string;
+    text?: UploadText;
     accept?: string;
     name?: string;
     required?: boolean;

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

@@ -13,15 +13,31 @@ export interface UiTheme {
     popover: TailwindColor;
     popoverForeground: TailwindColor;
     primary: TailwindColor;
+    primaryHover: TailwindColor;
+    primaryActive: TailwindColor;
     primaryForeground: TailwindColor;
     secondary: TailwindColor;
+    secondaryHover: TailwindColor;
+    secondaryActive: TailwindColor;
     secondaryForeground: TailwindColor;
     muted: TailwindColor;
     mutedForeground: TailwindColor;
     accent: TailwindColor;
     accentForeground: TailwindColor;
+    ghostHover: TailwindColor;
+    ghostActive: TailwindColor;
     destructive: TailwindColor;
+    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

@@ -37,15 +37,31 @@ var module_default = defineModule({
 			popover: "white",
 			popoverForeground: "zinc-950",
 			primary: "zinc-950",
+			primaryHover: "zinc-900",
+			primaryActive: "zinc-800",
 			primaryForeground: "white",
 			secondary: "zinc-100",
+			secondaryHover: "zinc-200",
+			secondaryActive: "zinc-300",
 			secondaryForeground: "zinc-900",
 			muted: "zinc-100",
 			mutedForeground: "zinc-500",
 			accent: "zinc-100",
 			accentForeground: "zinc-900",
+			ghostHover: "zinc-100",
+			ghostActive: "zinc-200",
 			destructive: "red-500",
+			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"
@@ -58,15 +74,31 @@ var module_default = defineModule({
 			popover: "zinc-950",
 			popoverForeground: "zinc-50",
 			primary: "white",
+			primaryHover: "zinc-100",
+			primaryActive: "zinc-200",
 			primaryForeground: "zinc-950",
 			secondary: "zinc-900",
+			secondaryHover: "zinc-800",
+			secondaryActive: "zinc-700",
 			secondaryForeground: "zinc-50",
 			muted: "zinc-900",
 			mutedForeground: "zinc-400",
 			accent: "zinc-900",
 			accentForeground: "zinc-50",
+			ghostHover: "zinc-900",
+			ghostActive: "zinc-800",
 			destructive: "red-500",
+			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

@@ -10,15 +10,31 @@
     --color-popover: var(--ui-popover);
     --color-popover-foreground: var(--ui-popover-foreground);
     --color-primary: var(--ui-primary);
+    --color-primary-hover: var(--ui-primary-hover);
+    --color-primary-active: var(--ui-primary-active);
     --color-primary-foreground: var(--ui-primary-foreground);
     --color-secondary: var(--ui-secondary);
+    --color-secondary-hover: var(--ui-secondary-hover);
+    --color-secondary-active: var(--ui-secondary-active);
     --color-secondary-foreground: var(--ui-secondary-foreground);
     --color-muted: var(--ui-muted);
     --color-muted-foreground: var(--ui-muted-foreground);
     --color-accent: var(--ui-accent);
     --color-accent-foreground: var(--ui-accent-foreground);
+    --color-ghost-hover: var(--ui-ghost-hover);
+    --color-ghost-active: var(--ui-ghost-active);
     --color-destructive: var(--ui-destructive);
+    --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

@@ -1,12 +1,21 @@
 <template>
     <component
         :is="is"
-        class="inline-flex cursor-pointer items-center justify-center gap-1 rounded-ui border font-[inherit] font-medium leading-normal no-underline outline-ring transition-[background-color,border-color,color,opacity] duration-150 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="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>
@@ -33,12 +42,13 @@ const {
     iconPrefix,
     iconSuffix,
     label,
-    font = "medium",
+    font = "semibold",
     layout = "center",
     size = "default",
     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",
@@ -66,8 +88,8 @@ const labelLayouts: Record<ButtonLayout, string> = {
 };
 
 const sizes: Record<ButtonSize, string> = {
-    default: "min-h-10 px-4 py-2",
-    icon: "size-10 shrink-0 p-0",
+    default: "p-3",
+    icon: "p-3",
 };
 
 const texts: Record<ButtonText, string> = {
@@ -81,12 +103,11 @@ const iconSize: Record<ButtonText, number> = {
 };
 
 const variants: Record<ButtonVariant, string> = {
-    primary: "border-transparent bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80",
-    secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/90 active:bg-secondary/80",
+    primary: "bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active",
+    secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-hover active:bg-secondary-active",
     outline:
-        "border-transparent bg-secondary text-secondary-foreground ring-1 ring-border ring-inset hover:bg-secondary/90 active:bg-secondary/80",
-    ghost: "border-transparent bg-transparent text-foreground hover:bg-accent active:bg-accent/80",
-    destructive:
-        "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/90 active:bg-destructive/80",
+        "bg-secondary text-secondary-foreground ring-1 ring-border ring-inset hover:bg-secondary-hover active:bg-secondary-active",
+    ghost: "bg-transparent text-foreground hover:bg-ghost-hover active:bg-ghost-active",
+    destructive: "bg-destructive text-destructive-foreground hover:bg-destructive-hover active:bg-destructive-active",
 };
 </script>

package/dist/vue/components/card.vue

@@ -1,33 +1,37 @@
 <template>
-    <Stack is="section" gap="0" class="rounded-ui border border-border bg-card text-card-foreground shadow-sm">
+    <Stack is="section" gap="0" class="w-full rounded-ui border border-border bg-card text-card-foreground">
         <Stack
-            v-if="label || title || description || $slots.header || $slots.actions"
+            v-if="label || $slots.header || $slots.actions"
             is="header"
             direction="horizontal"
             align="center"
             justify="between"
-            class="border-b border-border p-5"
+            class="shrink-0 border-b border-border"
         >
             <slot name="header">
-                <Stack>
-                    <p v-if="label" class="text-xs font-semibold uppercase tracking-widest opacity-50">{{ label }}</p>
-
-                    <h3 v-if="title" class="text-lg font-semibold leading-none">{{ title }}</h3>
-
-                    <p v-if="description" class="text-sm opacity-70">{{ description }}</p>
-                </Stack>
+                <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="shrink-0">
+            <Stack v-if="$slots.actions" direction="horizontal" align="center" class="ml-auto shrink-0">
                 <slot name="actions" />
             </Stack>
         </Stack>
 
-        <Stack gap="5" padding="5" class="flex-1">
+        <Stack
+            :gap="bodyGap"
+            :padding="bodyPadding"
+            :direction="bodyDirection"
+            :align="bodyAlign"
+            :justify="bodyJustify"
+            :wrap="bodyWrap"
+            class="min-h-0 flex-1"
+        >
             <slot />
         </Stack>
 
-        <Stack v-if="$slots.footer" is="footer" direction="horizontal" align="center" gap="3" class="px-5 pb-5">
+        <Stack v-if="$slots.footer" is="footer" direction="horizontal" align="center" class="shrink-0 px-5 pb-5">
             <slot name="footer" />
         </Stack>
     </Stack>
@@ -37,5 +41,14 @@
 import type { CardProps } from "../../components/card";
 import Stack from "./stack.vue";
 
-const { label, title, description } = defineProps<CardProps>();
+const {
+    label,
+    labelId,
+    bodyPadding = "5",
+    bodyGap = "5",
+    bodyDirection,
+    bodyAlign,
+    bodyJustify,
+    bodyWrap,
+} = defineProps<CardProps>();
 </script>

package/dist/vue/components/checkbox.vue

@@ -1,5 +1,12 @@
 <template>
-    <Stack is="label" direction="horizontal" align="start" gap="3" :class="interactionVariants[interaction]">
+    <Stack
+        is="label"
+        direction="horizontal"
+        align="start"
+        gap="3"
+        class="group"
+        :class="interactionVariants[interaction]"
+    >
         <input
             class="peer sr-only"
             type="checkbox"
@@ -12,8 +19,15 @@
 
         <span
             aria-hidden="true"
-            class="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-ui border transition-colors 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'"
+            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',
+                disabled
+                    ? ''
+                    : modelValue
+                      ? 'group-hover:bg-primary-hover group-active:bg-primary-active'
+                      : 'group-hover:bg-secondary-hover group-active:bg-secondary-active',
+            ]"
         >
             <span
                 v-if="modelValue"
@@ -22,7 +36,7 @@
         </span>
 
         <Stack is="span" v-if="label || description || $slots.default" gap="0">
-            <span class="text-sm font-medium"
+            <span class="text-sm font-normal"
                 ><slot>{{ label }}</slot></span
             >
             <span v-if="description" class="text-sm opacity-60">{{ description }}</span>

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" class="text-sm opacity-60">
-            <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>