@revojs/ui 0.3.9 → 0.3.11

package/dist/components/collapsible.d.ts

@@ -1,5 +1,6 @@
 import type { IconComponent } from "./icon";
 import type { StackProps } from "./stack";
+export type CollapsibleSize = "md" | "sm";
 export interface CollapsibleProps {
     modelValue?: boolean;
     label: string;
@@ -8,4 +9,5 @@ export interface CollapsibleProps {
     disabled?: boolean;
     bodyPadding?: StackProps["padding"];
     bodyGap?: StackProps["gap"];
+    size?: CollapsibleSize;
 }

package/dist/components/setting.d.ts

@@ -0,0 +1,8 @@
+import type { StackProps } from "./stack";
+export interface SettingProps extends StackProps {
+    label: string;
+    description?: string;
+    error?: string;
+    for?: string;
+    disabled?: boolean;
+}

package/dist/components/setting.js

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

package/dist/index.d.ts

@@ -32,6 +32,7 @@ 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/setting";
 export type * from "./components/sheet";
 export type * from "./components/shell";
 export type * from "./components/stack";

package/dist/vue/components/checkbox.vue

@@ -1,5 +1,6 @@
 <template>
     <Stack
+        v-bind="rootAttributes"
         is="label"
         direction="horizontal"
         align="start"
@@ -9,6 +10,7 @@
     >
         <input
             ref="input"
+            v-bind="controlAttributes"
             class="peer sr-only"
             type="checkbox"
             :checked="modelValue"
@@ -51,6 +53,7 @@
 import { computed, useTemplateRef, watchEffect } from "vue";
 import type { CheckboxProps } from "../../components/checkbox";
 import type { ControlInteraction } from "../../components/control.ts";
+import { useControlAttributes } from "../utilities/use-control-attributes";
 import Stack from "./stack.vue";
 
 const {
@@ -63,6 +66,10 @@ const {
     disabled = false,
 } = defineProps<CheckboxProps>();
 
+defineOptions({ inheritAttrs: false });
+
+const { rootAttributes, controlAttributes } = useControlAttributes();
+
 defineEmits<{
     "update:modelValue": [value: boolean];
 }>();

package/dist/vue/components/collapsible.vue

@@ -1,38 +1,59 @@
 <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()"
+    <div class="relative w-full">
+        <details
+            :name="name"
+            :open="isOpen"
+            class="group/collapsible w-full rounded-ui"
+            :data-state="isOpen ? 'open' : 'closed'"
+            :data-disabled="disabled ? '' : undefined"
+            @toggle="handleToggle"
         >
-            <Icon v-if="iconPrefix" :is="iconPrefix" :size="20" />
+            <summary
+                class="flex cursor-pointer list-none items-center gap-1 rounded-ui outline-ring select-none focus-visible:outline-2 focus-visible:outline-offset-[-2px] [&::-webkit-details-marker]:hidden"
+                :class="[
+                    sizes[size],
+                    $slots.actions ? 'pr-10' : '',
+                    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>
+                <span class="min-w-0 truncate px-1" :class="size === 'md' ? 'flex-1' : ''">{{ label }}</span>
 
-            <Icon :is="ArrowDownIcon" :size="20" class="shrink-0 group-open/collapsible:rotate-180" />
-        </summary>
+                <Icon
+                    :is="ArrowDownIcon"
+                    :size="size === 'md' ? 20 : 16"
+                    class="shrink-0 group-open/collapsible:rotate-180"
+                />
+            </summary>
 
-        <Stack :padding="bodyPadding">
-            <Stack :gap="bodyGap" class="px-1">
-                <slot />
+            <Stack :padding="bodyPadding">
+                <Stack :gap="bodyGap" :class="size === 'md' ? 'px-1' : ''">
+                    <slot />
+                </Stack>
             </Stack>
+        </details>
+
+        <Stack
+            v-if="$slots.actions"
+            direction="horizontal"
+            align="center"
+            gap="0"
+            class="absolute top-0 right-1"
+            :class="actionHeights[size]"
+        >
+            <slot name="actions" />
         </Stack>
-    </details>
+    </div>
 </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 type { CollapsibleProps, CollapsibleSize } from "../../components/collapsible";
 import Icon from "./icon.vue";
 import Stack from "./stack.vue";
 
@@ -44,6 +65,7 @@ const {
     disabled = false,
     bodyPadding = "3",
     bodyGap = "3",
+    size = "md",
 } = defineProps<CollapsibleProps>();
 
 const emit = defineEmits<{
@@ -52,6 +74,16 @@ const emit = defineEmits<{
 
 const isOpen = ref(modelValue ?? false);
 
+const actionHeights: Record<CollapsibleSize, string> = {
+    md: "h-11",
+    sm: "h-8",
+};
+
+const sizes: Record<CollapsibleSize, string> = {
+    md: "p-3 text-sm font-medium hover:bg-ghost-hover active:bg-ghost-active",
+    sm: "p-2 text-xs font-normal text-muted-foreground hover:text-foreground",
+};
+
 function handleToggle(event: Event) {
     const value = (event.currentTarget as HTMLDetailsElement).open;
 

package/dist/vue/components/navigate.vue

@@ -1,5 +1,31 @@
 <template>
+    <div v-if="$slots.actions" class="group/navigate relative">
+        <Button
+            is="a"
+            :href="href"
+            font="normal"
+            layout="left"
+            :size="size"
+            :variant="active ? 'secondary' : 'ghost'"
+            :icon-prefix="iconPrefix"
+            :icon-suffix="iconSuffix"
+            :label="label"
+            :aria-current="active ? 'page' : undefined"
+            class="w-full pr-10"
+            :class="
+                active
+                    ? 'group-hover/navigate:bg-secondary-hover group-has-[[data-state=open]]/navigate:bg-secondary-hover'
+                    : 'group-hover/navigate:bg-ghost-hover group-has-[[data-state=open]]/navigate:bg-ghost-hover'
+            "
+        />
+
+        <Stack direction="horizontal" align="center" gap="0" class="absolute inset-y-0 right-1">
+            <slot name="actions" />
+        </Stack>
+    </div>
+
     <Button
+        v-else
         is="a"
         :href="href"
         font="normal"
@@ -16,6 +42,7 @@
 <script setup lang="ts">
 import type { NavigateProps } from "../../components/navigate";
 import Button from "./button.vue";
+import Stack from "./stack.vue";
 
 const { href, label, iconPrefix, iconSuffix, active = false, size = "md" } = defineProps<NavigateProps>();
 </script>

package/dist/vue/components/setting.vue

@@ -0,0 +1,55 @@
+<template>
+    <Stack
+        :padding="padding"
+        :gap="gap"
+        :direction="direction"
+        :align="align"
+        :justify="justify"
+        :wrap="wrap"
+        class="min-w-0 text-sm"
+        :class="disabled ? 'opacity-50' : ''"
+    >
+        <Stack gap="0" class="min-w-32 flex-1">
+            <component :is="controlId ? 'label' : 'span'" :id="`${id}-label`" :for="controlId" class="font-normal">
+                {{ label }}
+            </component>
+
+            <p v-if="error" :id="`${id}-error`" role="alert" class="text-destructive">{{ error }}</p>
+            <p v-else-if="description" :id="`${id}-description`" class="opacity-60">{{ description }}</p>
+        </Stack>
+
+        <Stack v-if="$slots.default" direction="horizontal" align="center" gap="1" class="shrink-0">
+            <slot :control="controlAttributes" />
+        </Stack>
+    </Stack>
+</template>
+
+<script setup lang="ts">
+import { computed, useId } from "vue";
+import type { SettingProps } from "../../components/setting";
+import Stack from "./stack.vue";
+
+const {
+    label,
+    description,
+    error,
+    for: controlId,
+    disabled = false,
+    padding = "0",
+    gap = "5",
+    direction = "horizontal",
+    align = "center",
+    justify = "between",
+    wrap = true,
+} = defineProps<SettingProps>();
+
+const id = `setting-${useId()}`;
+
+const controlAttributes = computed(() => ({
+    id: controlId,
+    disabled,
+    "aria-labelledby": controlId ? undefined : `${id}-label`,
+    "aria-describedby": error ? `${id}-error` : description ? `${id}-description` : undefined,
+    "aria-invalid": error ? true : undefined,
+}));
+</script>

package/dist/vue/components/switch.vue

@@ -1,5 +1,6 @@
 <template>
     <Stack
+        v-bind="rootAttributes"
         is="label"
         direction="horizontal"
         align="start"
@@ -10,6 +11,7 @@
         <input v-if="name" type="hidden" :name="name" :value="modelValue ? 'on' : 'off'" />
 
         <button
+            v-bind="controlAttributes"
             class="relative flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-ui p-0.5 outline-ring focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed"
             :class="[
                 variants[state],
@@ -42,10 +44,15 @@
 import { computed } from "vue";
 import type { ControlInteraction } from "../../components/control.ts";
 import type { SwitchProps, SwitchState } from "../../components/switch";
+import { useControlAttributes } from "../utilities/use-control-attributes";
 import Stack from "./stack.vue";
 
 const { modelValue = false, label, description, name, disabled = false } = defineProps<SwitchProps>();
 
+defineOptions({ inheritAttrs: false });
+
+const { rootAttributes, controlAttributes } = useControlAttributes();
+
 defineEmits<{
     "update:modelValue": [value: boolean];
 }>();

package/dist/vue/index.d.ts

@@ -36,6 +36,7 @@ export { default as Range } from "./components/range.vue";
 export { default as Rating } from "./components/rating.vue";
 export { default as Select } from "./components/select.vue";
 export { default as Separator } from "./components/separator.vue";
+export { default as Setting } from "./components/setting.vue";
 export { default as Sheet } from "./components/sheet.vue";
 export { default as Shell } from "./components/shell.vue";
 export { default as Stack } from "./components/stack.vue";

package/dist/vue/index.js

@@ -48,6 +48,7 @@ import Range from "./components/range.vue";
 import Rating from "./components/rating.vue";
 import Select from "./components/select.vue";
 import Separator from "./components/separator.vue";
+import Setting from "./components/setting.vue";
 import Sheet from "./components/sheet.vue";
 import Shell from "./components/shell.vue";
 import Stack from "./components/stack.vue";
@@ -61,4 +62,4 @@ import ToggleGroup from "./components/toggle-group.vue";
 import Toolbar from "./components/toolbar.vue";
 import Tooltip from "./components/tooltip.vue";
 import Upload from "./components/upload.vue";
-export { Accordion, Badge, Breadcrumb, Button, Card, Checkbox, Collapsible, Collection, ConfirmDialog, Container, ContextMenu, Counter, Dialog, Entry, Field, Heading, Icon, Input, Link, Markdown, Menu, MenuCheckboxItem, MenuGroup, MenuItem, MenuLayer, MenuRadioGroup, MenuRadioItem, Navigate, Notification, Pagination, Popover, Progress, Radio, RadioGroup, Range, Rating, Select, Separator, Sheet, Shell, Stack, Stepper, Switch, Tabs, TagsInput, Textarea, ToastRegion, ToggleGroup, Toolbar, Tooltip, Upload, defaultUiLabels, germanUiLabels, isTypeaheadKey, menuCloseKey, menuItemSelector, menuRadioKey, menuSizeKey, provideUiLabels, tooltipState, uiLabelsKey, useAnchor, useConfirm, useControlAttributes, useMenuNavigation, useModalDialog, useRovingFocus, useScrollLock, useToast, useTypeahead, useUiLabels };
+export { Accordion, Badge, Breadcrumb, Button, Card, Checkbox, Collapsible, Collection, ConfirmDialog, Container, ContextMenu, Counter, Dialog, Entry, Field, Heading, Icon, Input, Link, Markdown, Menu, MenuCheckboxItem, MenuGroup, MenuItem, MenuLayer, MenuRadioGroup, MenuRadioItem, Navigate, Notification, Pagination, Popover, Progress, Radio, RadioGroup, Range, Rating, Select, Separator, Setting, Sheet, Shell, Stack, Stepper, Switch, Tabs, TagsInput, Textarea, ToastRegion, ToggleGroup, Toolbar, Tooltip, Upload, defaultUiLabels, germanUiLabels, isTypeaheadKey, menuCloseKey, menuItemSelector, menuRadioKey, menuSizeKey, provideUiLabels, tooltipState, uiLabelsKey, useAnchor, useConfirm, useControlAttributes, useMenuNavigation, useModalDialog, useRovingFocus, useScrollLock, useToast, useTypeahead, useUiLabels };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@revojs/ui",
-    "version": "0.3.9",
+    "version": "0.3.11",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -35,14 +35,14 @@
     },
     "dependencies": {
         "@iconify-json/hugeicons": "^1.2.35",
-        "@revojs/client": "0.3.9",
+        "@revojs/client": "0.3.11",
         "@tailwindcss/vite": "^4.3.3",
-        "revojs": "0.3.9",
+        "revojs": "0.3.11",
         "tailwindcss": "^4.3.3",
         "unplugin-icons": "^24.0.0"
     },
     "devDependencies": {
-        "@revojs/tsconfig": "0.3.9",
+        "@revojs/tsconfig": "0.3.11",
         "@vitejs/plugin-vue": "^6.0.9"
     },
     "optionalDependencies": {