@aleph-alpha/ui-library 1.16.1 → 1.18.0

package/src/components/UiField/UiField.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
+  import { computed, provide, toRef, useSlots, type VNode } from 'vue';
   import { Field as ShadcnField } from '@/components/core/field';
   import type { UiFieldProps } from './types';
+  import { FIELD_DESCRIPTION_CHECKBOX_KEY } from './keys';
 
   defineOptions({
     name: 'UiField',
@@ -8,11 +10,94 @@
 
   const props = withDefaults(defineProps<UiFieldProps>(), {
     orientation: 'vertical',
+    descriptionPlacement: 'under-input',
+    descriptionCheckbox: false,
   });
+
+  provide(FIELD_DESCRIPTION_CHECKBOX_KEY, toRef(props, 'descriptionCheckbox'));
+
+  const slots = useSlots();
+
+  const isResponsive = computed(() => props.orientation === 'responsive');
+
+  const shouldGroupLabel = computed(
+    () => isResponsive.value && props.descriptionPlacement === 'under-label',
+  );
+
+  const shouldGroupInput = computed(
+    () => isResponsive.value && props.descriptionPlacement === 'under-input',
+  );
+
+  const placementClass = computed(() => {
+    if (isResponsive.value) return '';
+    return props.descriptionPlacement === 'under-label'
+      ? '[&>[data-slot=field-description]]:order-1 [&>[data-slot=field-content]]:order-2'
+      : '[&>[data-slot=field-content]]:order-1 [&>[data-slot=field-description]]:order-2';
+  });
+
+  function getSlotName(vnode: VNode): string | undefined {
+    return (vnode.type as Record<string, unknown>)?.name as string | undefined;
+  }
+
+  function partitionSlots(groupNames: string[]) {
+    const children = slots.default?.() ?? [];
+    const group = children.filter((v) => groupNames.includes(getSlotName(v) ?? ''));
+    const rest = children.filter((v) => !groupNames.includes(getSlotName(v) ?? ''));
+    return { group, rest };
+  }
+
+  const labelPartition = computed(() => partitionSlots(['UiFieldLabel', 'UiFieldDescription']));
+
+  const inputPartition = computed(() => {
+    const children = slots.default?.() ?? [];
+    const content = children.filter((v) => getSlotName(v) === 'UiFieldContent');
+    const desc = children.filter((v) => getSlotName(v) === 'UiFieldDescription');
+    const rest = children.filter((v) => {
+      const n = getSlotName(v);
+      return n !== 'UiFieldContent' && n !== 'UiFieldDescription';
+    });
+    return { group: [...content, ...desc], rest };
+  });
+
+  // Stable function refs to avoid unmount/remount on every render.
+  // Inline arrows in <component :is="() => ..."> create new references each
+  // render cycle, causing Vue to treat them as different components.
+  function renderLabelGroup() {
+    return labelPartition.value.group;
+  }
+  function renderLabelRest() {
+    return labelPartition.value.rest;
+  }
+  function renderInputRest() {
+    return inputPartition.value.rest;
+  }
+  function renderInputGroup() {
+    return inputPartition.value.group;
+  }
 </script>
 
 <template>
-  <ShadcnField :orientation="props.orientation">
-    <slot />
+  <ShadcnField
+    :orientation="props.orientation"
+    :class="placementClass"
+    :data-description-placement="props.descriptionPlacement"
+  >
+    <template v-if="shouldGroupLabel">
+      <div class="flex flex-col gap-1.5">
+        <component :is="renderLabelGroup" />
+      </div>
+      <component :is="renderLabelRest" />
+    </template>
+
+    <template v-else-if="shouldGroupInput">
+      <component :is="renderInputRest" />
+      <div class="flex flex-1 flex-col gap-1.5">
+        <component :is="renderInputGroup" />
+      </div>
+    </template>
+
+    <template v-else>
+      <slot />
+    </template>
   </ShadcnField>
 </template>

package/src/components/UiField/UiFieldDescription.vue

@@ -1,13 +1,34 @@
 <script setup lang="ts">
+  import { computed, inject, ref } from 'vue';
   import { FieldDescription as ShadcnFieldDescription } from '@/components/core/field';
+  import { UiCheckbox } from '@/components/UiCheckbox';
+  import type { UiFieldDescriptionProps } from './types';
+  import type { UiCheckboxModelValue } from '@/components/UiCheckbox/types';
+  import { FIELD_DESCRIPTION_CHECKBOX_KEY } from './keys';
 
   defineOptions({
     name: 'UiFieldDescription',
   });
+
+  const props = withDefaults(defineProps<UiFieldDescriptionProps>(), {
+    variant: 'default',
+    disabled: false,
+  });
+
+  const parentCheckbox = inject(FIELD_DESCRIPTION_CHECKBOX_KEY, ref(false));
+
+  const showCheckbox = computed(() => props.variant === 'input' || parentCheckbox.value);
+
+  const checked = defineModel<UiCheckboxModelValue>();
 </script>
 
 <template>
-  <ShadcnFieldDescription>
+  <ShadcnFieldDescription v-if="!showCheckbox">
     <slot />
   </ShadcnFieldDescription>
+
+  <ShadcnFieldDescription v-else class="flex items-center gap-2">
+    <UiCheckbox v-model="checked" :name="props.name ?? ''" :disabled="props.disabled" />
+    <span><slot /></span>
+  </ShadcnFieldDescription>
 </template>

package/src/components/UiField/UiFieldLabel.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
   import { FieldLabel as ShadcnFieldLabel } from '@/components/core/field';
+  import UiFieldLabelInfo from './UiFieldLabelInfo.vue';
   import type { UiFieldLabelProps } from './types';
 
   defineOptions({
@@ -12,5 +13,6 @@
 <template>
   <ShadcnFieldLabel :for="props.for">
     <slot />
+    <UiFieldLabelInfo v-if="props.tooltip" :description="props.tooltip" :icon="props.tooltipIcon" />
   </ShadcnFieldLabel>
 </template>

package/src/components/UiField/UiFieldLabelInfo.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+  import { UiTooltip } from '@/components/UiTooltip';
+  import { UiIconButton } from '@/components/UiIconButton';
+  import { UiIcon } from '@/components/UiIcon';
+  import type { UiFieldLabelInfoProps } from './types';
+
+  defineOptions({
+    name: 'UiFieldLabelInfo',
+  });
+
+  const props = withDefaults(defineProps<UiFieldLabelInfoProps>(), {
+    icon: 'circle-help',
+  });
+</script>
+
+<template>
+  <UiTooltip :content="props.description">
+    <UiIconButton variant="ghost" size="icon-sm" :ariaLabel="props.description">
+      <UiIcon :name="props.icon" :size="14" class="text-content-on-surface-primary" />
+    </UiIconButton>
+  </UiTooltip>
+</template>

package/src/components/UiField/index.ts

@@ -4,6 +4,7 @@ export { default as UiFieldDescription } from './UiFieldDescription.vue';
 export { default as UiFieldError } from './UiFieldError.vue';
 export { default as UiFieldGroup } from './UiFieldGroup.vue';
 export { default as UiFieldLabel } from './UiFieldLabel.vue';
+export { default as UiFieldLabelInfo } from './UiFieldLabelInfo.vue';
 export { default as UiFieldLegend } from './UiFieldLegend.vue';
 export { default as UiFieldSeparator } from './UiFieldSeparator.vue';
 export { default as UiFieldSet } from './UiFieldSet.vue';

package/src/components/UiField/keys.ts

@@ -0,0 +1,5 @@
+import type { InjectionKey, Ref } from 'vue';
+
+export const FIELD_DESCRIPTION_CHECKBOX_KEY: InjectionKey<Ref<boolean | undefined>> = Symbol(
+  'UiFieldDescriptionCheckbox',
+);

package/src/components/UiField/types.ts

@@ -1,7 +1,9 @@
 /**
  * Layout orientation supported by `UiField`.
+ * - `vertical`: stacked layout (label above input).
+ * - `responsive`: horizontal by default, collapses to vertical on small screens.
  */
-export type UiFieldOrientation = 'vertical' | 'horizontal' | 'responsive';
+export type UiFieldOrientation = 'vertical' | 'responsive';
 
 /**
  * Error shape supported by `UiFieldError`.
@@ -14,6 +16,11 @@ export type UiFieldErrorLike =
     }
   | undefined;
 
+/**
+ * Where the description text is rendered relative to the field.
+ */
+export type UiFieldDescriptionPlacement = 'under-label' | 'under-input';
+
 /**
  * A form field wrapper that groups label, input, description, and error messages.
  * Provides consistent layout and accessibility for form controls.
@@ -28,6 +35,21 @@ export interface UiFieldProps {
    * @default 'vertical'
    */
   orientation?: UiFieldOrientation;
+
+  /**
+   * Where the description is placed relative to the field layout.
+   * - `under-label`: description renders between the label and the input.
+   * - `under-input`: description renders after the input.
+   * @default 'under-input'
+   */
+  descriptionPlacement?: UiFieldDescriptionPlacement;
+
+  /**
+   * When `true`, the child `UiFieldDescription` renders with a checkbox
+   * next to the description text (unless the description sets its own `variant` prop).
+   * @default false
+   */
+  descriptionCheckbox?: boolean;
 }
 
 /**
@@ -40,6 +62,34 @@ export interface UiFieldErrorProps {
   errors?: UiFieldErrorLike[];
 }
 
+/**
+ * Visual variant for `UiFieldDescription`.
+ */
+export type UiFieldDescriptionVariant = 'default' | 'input';
+
+/**
+ * Props for `UiFieldDescription` component.
+ */
+export interface UiFieldDescriptionProps {
+  /**
+   * Visual variant of the description.
+   * Use `input` to render a checkbox next to the description text.
+   * @default 'default'
+   */
+  variant?: UiFieldDescriptionVariant;
+
+  /**
+   * Name attribute for the checkbox (required when `variant="input"`).
+   */
+  name?: string;
+
+  /**
+   * Disables the checkbox.
+   * @default false
+   */
+  disabled?: boolean;
+}
+
 /**
  * Props for `UiFieldLabel` component.
  */
@@ -49,4 +99,39 @@ export interface UiFieldLabelProps {
    * Use together with `id` on an input.
    */
   for?: string;
+
+  /**
+   * When provided, renders a `UiFieldLabelInfo` icon next to the label
+   * that shows this text as a tooltip on hover/focus.
+   */
+  tooltip?: string;
+
+  /**
+   * Lucide icon name for the tooltip trigger when `tooltip` is set.
+   * @default 'circle-help'
+   * @see https://lucide.dev/icons
+   */
+  tooltipIcon?: string;
+}
+
+/**
+ * An interactive info icon placed next to a field label that reveals a tooltip on hover or focus.
+ * Uses a ghost icon button as the trigger for keyboard and pointer accessibility.
+ * @category Form Inputs
+ * @useCases field hint, label help, input context
+ * @keywords field, label, info, tooltip, help, hint
+ * @related UiFieldLabel, UiTooltip, UiIconButton
+ */
+export interface UiFieldLabelInfoProps {
+  /**
+   * Tooltip text shown on hover / focus.
+   */
+  description: string;
+
+  /**
+   * Lucide icon name in kebab-case or PascalCase.
+   * @default 'circle-help'
+   * @see https://lucide.dev/icons
+   */
+  icon?: string;
 }

package/src/components/UiSelect/__tests__/UiSelectTrigger.test.ts

@@ -1,7 +1,7 @@
 import '@testing-library/jest-dom/vitest';
-import { render } from '@testing-library/vue';
+import { render, waitFor } from '@testing-library/vue';
 import { describe, expect, test } from 'vitest';
-import { UiSelect, UiSelectTrigger, UiSelectContent, UiSelectValue } from '../index';
+import { UiSelect, UiSelectTrigger, UiSelectContent, UiSelectItem, UiSelectValue } from '../index';
 
 describe('UiSelectTrigger', () => {
   test('applies custom class', () => {
@@ -51,4 +51,49 @@ describe('UiSelectTrigger', () => {
 
     expect(getByRole('combobox')).toHaveAttribute('aria-label', 'Select your preference');
   });
+
+  test('has data-placeholder when no value is selected', () => {
+    const { getByRole } = render({
+      components: { UiSelect, UiSelectTrigger, UiSelectContent, UiSelectValue },
+      template: `
+        <UiSelect>
+          <UiSelectTrigger>
+            <UiSelectValue placeholder="Select" />
+          </UiSelectTrigger>
+          <UiSelectContent />
+        </UiSelect>
+      `,
+    });
+
+    const trigger = getByRole('combobox');
+    expect(trigger).toHaveAttribute('data-placeholder');
+  });
+
+  test('removes data-placeholder when a value is selected', async () => {
+    const { getByRole } = render({
+      components: {
+        UiSelect,
+        UiSelectTrigger,
+        UiSelectContent,
+        UiSelectItem,
+        UiSelectValue,
+      },
+      template: `
+        <UiSelect default-value="option1">
+          <UiSelectTrigger>
+            <UiSelectValue placeholder="Select" />
+          </UiSelectTrigger>
+          <UiSelectContent>
+            <UiSelectItem value="option1">Option 1</UiSelectItem>
+          </UiSelectContent>
+        </UiSelect>
+      `,
+    });
+
+    await waitFor(() => {
+      const trigger = getByRole('combobox');
+      expect(trigger).not.toHaveAttribute('data-placeholder');
+      expect(trigger).toHaveTextContent('Option 1');
+    });
+  });
 });

package/src/components/UiToggle/UiToggle.stories.ts

@@ -9,7 +9,7 @@ const meta: Meta<typeof UiToggle> = {
   argTypes: {
     variant: {
       control: 'select',
-      options: ['default', 'outline'],
+      options: ['default', 'outline', 'soft'],
       description: 'The visual style variant',
     },
     size: {
@@ -94,6 +94,35 @@ export const Outline: Story = {
   },
 };
 
+const softTemplateSource = `<script setup lang="ts">
+import { UiToggle, UiIcon } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiToggle variant="soft" aria-label="Toggle bold">
+    <UiIcon name="bold" />
+  </UiToggle>
+</template>`;
+
+/**
+ * Soft variant toggle with a subtle accent background when pressed.
+ */
+export const Soft: Story = {
+  render: () => ({
+    components: { UiToggle, UiIcon },
+    template: `<UiToggle variant="soft" aria-label="Toggle bold">
+      <UiIcon name="bold" />
+    </UiToggle>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: softTemplateSource,
+      },
+    },
+  },
+};
+
 const withTextTemplateSource = `<script setup lang="ts">
 import { UiToggle, UiIcon } from '@aleph-alpha/ui-library'
 </script>
@@ -234,6 +263,12 @@ import { UiToggle, UiIcon } from '@aleph-alpha/ui-library'
         <UiToggle variant="outline" default-value aria-label="Toggle italic (pressed)">
           <UiIcon name="italic" />
         </UiToggle>
+        <UiToggle variant="soft" aria-label="Toggle underline">
+          <UiIcon name="underline" />
+        </UiToggle>
+        <UiToggle variant="soft" default-value aria-label="Toggle underline (pressed)">
+          <UiIcon name="underline" />
+        </UiToggle>
       </div>
     </div>
 
@@ -280,6 +315,12 @@ import { UiToggle, UiIcon } from '@aleph-alpha/ui-library'
         <UiToggle disabled variant="outline" default-value aria-label="Toggle underline (pressed)">
           <UiIcon name="underline" />
         </UiToggle>
+        <UiToggle disabled variant="soft" aria-label="Toggle underline">
+          <UiIcon name="underline" />
+        </UiToggle>
+        <UiToggle disabled variant="soft" default-value aria-label="Toggle underline (pressed)">
+          <UiIcon name="underline" />
+        </UiToggle>
       </div>
     </div>
   </div>
@@ -309,6 +350,12 @@ export const AllStates: Story = {
             <UiToggle variant="outline" default-value aria-label="Toggle italic (pressed)">
               <UiIcon name="italic" />
             </UiToggle>
+            <UiToggle variant="soft" aria-label="Toggle underline">
+              <UiIcon name="underline" />
+            </UiToggle>
+            <UiToggle variant="soft" default-value aria-label="Toggle underline (pressed)">
+              <UiIcon name="underline" />
+            </UiToggle>
           </div>
         </div>
 
@@ -355,6 +402,12 @@ export const AllStates: Story = {
             <UiToggle disabled variant="outline" default-value aria-label="Toggle underline (pressed)">
               <UiIcon name="underline" />
             </UiToggle>
+            <UiToggle disabled variant="soft" aria-label="Toggle underline">
+              <UiIcon name="underline" />
+            </UiToggle>
+            <UiToggle disabled variant="soft" default-value aria-label="Toggle underline (pressed)">
+              <UiIcon name="underline" />
+            </UiToggle>
           </div>
         </div>
       </div>

package/src/components/UiToggle/__tests__/UiToggle.test.ts

@@ -42,6 +42,21 @@ describe('UiToggle', () => {
     expect(toggle).toHaveClass('border');
   });
 
+  test('applies soft variant classes', () => {
+    const { container } = render(UiToggle, {
+      props: { variant: 'soft' },
+      slots: { default: 'Toggle' },
+    });
+    const toggle = container.querySelector('button');
+    expect(toggle).toHaveClass('bg-transparent');
+    expect(toggle).toHaveClass('data-[state=on]:bg-accent');
+    expect(toggle).toHaveClass('data-[state=on]:border-accent-default');
+    expect(toggle).toHaveClass('data-[state=open]:bg-accent');
+    expect(toggle).toHaveClass('data-[state=open]:border-accent-default');
+    expect(toggle).toHaveClass('aria-pressed:bg-accent');
+    expect(toggle).toHaveClass('aria-pressed:border-accent-default');
+  });
+
   test('applies sm size classes', () => {
     const { container } = render(UiToggle, {
       props: { size: 'sm' },

package/src/components/UiToggle/types.ts

@@ -25,7 +25,7 @@ export interface UiToggleProps {
    * The visual style variant.
    * @default 'default'
    */
-  variant?: 'default' | 'outline';
+  variant?: 'default' | 'outline' | 'soft';
   /**
    * The size of the toggle.
    * @default 'default'

package/src/components/UiToggleGroup/__tests__/UiToggleGroup.test.ts

@@ -390,5 +390,26 @@ describe('UiToggleGroup', () => {
       const items = container.querySelectorAll('[data-slot="toggle-group-item"]');
       expect(items).toHaveLength(2);
     });
+
+    test('applies soft variant classes to items', () => {
+      const { container } = render(UiToggleGroup, {
+        props: { type: 'single', variant: 'soft' },
+        slots: {
+          default: {
+            components: { UiToggleGroupItem },
+            template: '<UiToggleGroupItem value="a">A</UiToggleGroupItem>',
+          },
+        },
+        global: {
+          components: { UiToggleGroupItem },
+        },
+      });
+      const item = container.querySelector('[data-slot="toggle-group-item"]');
+      expect(item).toHaveClass('bg-transparent');
+      expect(item).toHaveClass('data-[state=on]:bg-accent');
+      expect(item).toHaveClass('data-[state=on]:border-accent-default');
+      expect(item).toHaveClass('aria-pressed:bg-accent');
+      expect(item).toHaveClass('aria-pressed:border-accent-default');
+    });
   });
 });

package/src/components/UiToggleGroup/types.ts

@@ -11,7 +11,7 @@ interface UiToggleGroupBaseProps {
    * The visual style variant applied to all items.
    * @default 'default'
    */
-  variant?: 'default' | 'outline';
+  variant?: 'default' | 'outline' | 'soft';
   /**
    * The size applied to all items.
    * @default 'default'
@@ -122,7 +122,7 @@ export interface UiToggleGroupItemProps {
   /**
    * Override the variant for this specific item.
    */
-  variant?: 'default' | 'outline';
+  variant?: 'default' | 'outline' | 'soft';
   /**
    * Override the size for this specific item.
    */

package/src/components/core/button/index.ts

@@ -27,6 +27,11 @@ export const buttonVariants = cva(
         'icon-lg': 'size-10',
       },
     },
+    compoundVariants: [
+      { variant: 'ghost', size: 'icon', class: 'size-auto' },
+      { variant: 'ghost', size: 'icon-sm', class: 'size-auto' },
+      { variant: 'ghost', size: 'icon-lg', class: 'size-auto' },
+    ],
     defaultVariants: {
       variant: 'default',
       size: 'default',

package/src/components/core/field/FieldLabel.vue

@@ -16,7 +16,7 @@
     :for="props.for"
     :class="
       cn(
-        'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
+        'group/field-label peer/field-label flex w-fit items-center gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
         'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4',
         'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10',
         props.class,

package/src/components/core/field/index.ts

@@ -8,14 +8,14 @@ export const fieldVariants = cva(
       orientation: {
         vertical: ['flex-col [&>*]:w-full [&>.sr-only]:w-auto'],
         horizontal: [
-          'flex-row items-center',
+          'flex-row items-start',
           '[&>[data-slot=field-label]]:flex-auto',
-          'has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+          'has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
         ],
         responsive: [
-          'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto',
-          '@md/field-group:[&>[data-slot=field-label]]:flex-auto',
-          '@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+          'flex-row items-start @max-md/field-group:flex-col @max-md/field-group:[&>*]:w-full @max-md/field-group:[&>.sr-only]:w-auto',
+          '[&>[data-slot=field-label]]:flex-auto',
+          'has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
         ],
       },
     },

package/src/components/core/select/SelectTrigger.vue

@@ -24,7 +24,7 @@
     v-bind="forwardedProps"
     :class="
       cn(
-        'border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex w-fit items-center justify-between gap-2 rounded-md border bg-background-input-default px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+        'border-input data-[placeholder]:text-muted-foreground data-[placeholder]:bg-background-input-default [&_svg:not([class*=\'text-\'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex w-fit items-center justify-between gap-2 rounded-md border bg-accent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
         props.class,
       )
     "

package/src/components/core/toggle/Toggle.vue

@@ -2,13 +2,13 @@
   import type { ToggleEmits, ToggleProps } from 'reka-ui';
   import { Toggle, useForwardPropsEmits } from 'reka-ui';
   import { cn } from '@/lib/utils';
-  import { toggleVariants } from '.';
+  import { ToggleVariants, toggleVariants } from '.';
 
   const props = withDefaults(
     defineProps<
       ToggleProps & {
-        variant?: 'default' | 'outline';
-        size?: 'default' | 'sm' | 'lg';
+        variant?: ToggleVariants['variant'];
+        size?: ToggleVariants['size'];
       }
     >(),
     {

package/src/components/core/toggle/index.ts

@@ -3,12 +3,15 @@ import { cva, type VariantProps } from 'class-variance-authority';
 export { default as Toggle } from './Toggle.vue';
 
 export const toggleVariants = cva(
-  'inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-hover-default outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent-default data-[state=on]:text-accent-default-foreground data-[state=on]:hover:bg-accent-default data-[state=on]:hover:text-accent-default-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  'inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-hover-default outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
   {
     variants: {
       variant: {
-        default: 'bg-transparent',
-        outline: 'border border-input bg-transparent shadow-sm focus-visible:border-ring',
+        default:
+          'bg-transparent data-[state=on]:bg-accent-default data-[state=on]:text-accent-default-foreground data-[state=on]:hover:bg-accent-default data-[state=on]:hover:text-accent-default-foreground data-[state=open]:bg-accent-default data-[state=open]:text-accent-default-foreground data-[state=open]:hover:bg-accent-default data-[state=open]:hover:text-accent-default-foreground aria-pressed:bg-accent-default aria-pressed:text-accent-default-foreground aria-pressed:hover:bg-accent-default aria-pressed:hover:text-accent-default-foreground',
+        outline:
+          'border border-input bg-transparent shadow-sm focus-visible:border-ring data-[state=on]:bg-accent-default data-[state=on]:text-accent-default-foreground data-[state=on]:hover:bg-accent-default data-[state=on]:hover:text-accent-default-foreground data-[state=open]:bg-accent-default data-[state=open]:text-accent-default-foreground data-[state=open]:hover:bg-accent-default data-[state=open]:hover:text-accent-default-foreground aria-pressed:bg-accent-default aria-pressed:text-accent-default-foreground aria-pressed:hover:bg-accent-default aria-pressed:hover:text-accent-default-foreground',
+        soft: 'bg-transparent data-[state=on]:bg-accent data-[state=on]:text-accent-foreground data-[state=on]:border data-[state=on]:border-accent-default data-[state=on]:hover:bg-accent data-[state=on]:hover:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:border data-[state=open]:border-accent-default data-[state=open]:hover:bg-accent data-[state=open]:hover:text-accent-foreground aria-pressed:bg-accent aria-pressed:text-accent-foreground aria-pressed:border aria-pressed:border-accent-default aria-pressed:hover:bg-accent aria-pressed:hover:text-accent-foreground',
       },
       size: {
         default: 'h-9 px-2 min-w-9',