@revojs/ui 0.3.9 → 0.3.10

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/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-48 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.10",
     "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.10",
         "@tailwindcss/vite": "^4.3.3",
-        "revojs": "0.3.9",
+        "revojs": "0.3.10",
         "tailwindcss": "^4.3.3",
         "unplugin-icons": "^24.0.0"
     },
     "devDependencies": {
-        "@revojs/tsconfig": "0.3.9",
+        "@revojs/tsconfig": "0.3.10",
         "@vitejs/plugin-vue": "^6.0.9"
     },
     "optionalDependencies": {