@hina-ui/vue 1.0.0 → 1.1.0

package/src/components/radio-group/RadioGroup.vue

@@ -4,6 +4,7 @@
   import { useFieldControl } from '../form-field/context'
   import {
     checkbox,
+    checkboxControl,
     checkboxBox,
     checkboxDescription,
     checkboxTitle,
@@ -12,6 +13,7 @@
   } from '../checkbox/checkbox.variants'
   import {
     checkboxGroup,
+    checkboxGroupItem,
     type CheckboxGroupVariants,
   } from '../checkbox-group/checkbox-group.variants'
   import type { SelectOption } from '../select/types'
@@ -23,6 +25,8 @@
     options: SelectOption[]
     orientation?: CheckboxGroupVariants['orientation']
     size?: CheckboxVariants['size']
+    controlPlacement?: CheckboxVariants['controlPlacement']
+    block?: boolean
     disabled?: boolean
     invalid?: boolean
     class?: string
@@ -46,7 +50,7 @@
     :aria-describedby="describedBy"
     :aria-invalid="invalid || undefined"
     data-hn-radio-group
-    :class="cn(checkboxGroup({ orientation: props.orientation }), props.class)"
+    :class="cn(checkboxGroup({ orientation: props.orientation, block: props.block }), props.class)"
   >
     <label
       v-for="option in props.options"
@@ -54,7 +58,16 @@
       data-hn-radio
       data-hn-state-group
       :data-disabled="disabled || option.disabled ? '' : undefined"
-      :class="checkbox({ size: props.size })"
+      :class="
+        cn(
+          checkbox({
+            size: props.size,
+            controlPlacement: props.controlPlacement,
+            block: props.block,
+          }),
+          checkboxGroupItem({ orientation: props.orientation, block: props.block }),
+        )
+      "
     >
       <RadioGroupItem
         v-slot="{ checked }"
@@ -62,7 +75,12 @@
         :disabled="option.disabled"
         :aria-invalid="invalid || undefined"
         :data-invalid="invalid ? '' : undefined"
-        :class="checkboxBox({ shape: 'round', size: props.size })"
+        :class="
+          cn(
+            checkboxBox({ shape: 'round', size: props.size }),
+            checkboxControl({ controlPlacement: props.controlPlacement }),
+          )
+        "
       >
         <Transition
           enter-active-class="hn-transition-press"
@@ -73,12 +91,15 @@
           <span v-if="checked" :class="radioDot()" />
         </Transition>
       </RadioGroupItem>
-      <span :class="checkboxTitle()">
+      <span :class="checkboxTitle({ controlPlacement: props.controlPlacement })">
         <span :class="checkboxTitleText()">
           <slot name="option" :option="option">{{ option.label }}</slot>
         </span>
       </span>
-      <span v-if="option.description" :class="checkboxDescription({ size: props.size })">
+      <span
+        v-if="option.description"
+        :class="checkboxDescription({ size: props.size, controlPlacement: props.controlPlacement })"
+      >
         {{ option.description }}
       </span>
     </label>

package/src/components/select/Select.vue

@@ -74,6 +74,7 @@
       @keydown="keyboard = true"
       @pointerdown="keyboard = false"
       :data-invalid="invalid ? '' : undefined"
+      :data-disabled="disabled ? '' : undefined"
       :aria-invalid="invalid || undefined"
       :class="
         cn(

package/src/components/switch/Switch.vue

@@ -5,9 +5,11 @@
   import { useFieldControl } from '../form-field/context'
   import {
     checkbox,
+    checkboxControl,
     checkboxDescription,
     checkboxTitle,
     checkboxTitleText,
+    type CheckboxVariants,
   } from '../checkbox/checkbox.variants'
   import { switchThumb, switchTrack, type SwitchVariants } from './switch.variants'
 
@@ -16,6 +18,8 @@
   const props = defineProps<{
     size?: SwitchVariants['size']
     description?: string
+    controlPlacement?: CheckboxVariants['controlPlacement']
+    block?: boolean
     disabled?: boolean
     invalid?: boolean
     class?: string
@@ -41,7 +45,17 @@
     data-hn-switch
     data-hn-state-group
     :data-disabled="disabled ? '' : undefined"
-    :class="cn(checkbox({ size: props.size }), props.class)"
+    :class="
+      cn(
+        checkbox({
+          size: props.size,
+          controlPlacement: props.controlPlacement,
+          block: props.block,
+          bare: !slots.default && !props.description,
+        }),
+        props.class,
+      )
+    "
   >
     <SwitchRoot
       v-bind="$attrs"
@@ -52,14 +66,22 @@
       :aria-describedby="describedBy"
       :data-invalid="invalid ? '' : undefined"
       :data-hn-on="model ? '' : undefined"
-      :class="switchTrack({ size: props.size })"
+      :class="
+        cn(
+          switchTrack({ size: props.size }),
+          checkboxControl({ controlPlacement: props.controlPlacement }),
+        )
+      "
     >
       <span data-hn-thumb aria-hidden="true" :class="switchThumb()" />
     </SwitchRoot>
-    <span v-if="slots.default" :class="checkboxTitle()">
+    <span v-if="slots.default" :class="checkboxTitle({ controlPlacement: props.controlPlacement })">
       <span :class="checkboxTitleText()"><slot /></span>
     </span>
-    <span v-if="props.description" :class="checkboxDescription({ size: props.size })">
+    <span
+      v-if="props.description"
+      :class="checkboxDescription({ size: props.size, controlPlacement: props.controlPlacement })"
+    >
       {{ props.description }}
     </span>
   </label>

package/src/components/tags-input/TagsInput.vue

@@ -78,6 +78,7 @@
   <div
     data-hn-tags-input
     :data-invalid="invalid ? '' : undefined"
+    :data-disabled="disabled ? '' : undefined"
     @click="focusFieldFrom($event.currentTarget as HTMLElement, $event.target as HTMLElement)"
     :class="
       cn(

package/src/components/textarea/Textarea.vue

@@ -79,6 +79,7 @@
   <div
     data-hn-textarea
     :data-invalid="invalid ? '' : undefined"
+    :data-disabled="disabled ? '' : undefined"
     :style="{ '--hn-textarea-rows': bounds.min, '--hn-textarea-max-rows': bounds.max }"
     :class="
       cn(

package/src/components/textarea/textarea.variants.ts

@@ -3,7 +3,7 @@ import { tv, type VariantProps } from '../../lib/tv'
 export const textarea = tv({
   base: [
     'hn-field text-fg flex w-full min-w-0 cursor-text flex-col overflow-hidden rounded-md border font-medium',
-    'has-disabled:cursor-not-allowed has-disabled:opacity-50',
+    'data-disabled:cursor-not-allowed data-disabled:opacity-50',
   ],
   variants: {
     variant: {

package/src/components/tree-select/TreeSelect.vue

@@ -106,6 +106,7 @@
       :disabled="disabled"
       :data-placeholder="selected ? undefined : ''"
       :data-invalid="invalid ? '' : undefined"
+      :data-disabled="disabled ? '' : undefined"
       :aria-invalid="invalid || undefined"
       :class="
         cn(

package/src/index.ts

@@ -118,6 +118,7 @@ export { default as MenubarRadioGroup } from './components/menubar/MenubarRadioG
 export { default as MenubarRadioItem } from './components/menubar/MenubarRadioItem.vue'
 export { default as Form } from './components/form/Form.vue'
 export { default as FormField } from './components/form-field/FormField.vue'
+export type { FormFieldLayoutProps } from './components/form-field/types'
 export { default as FormLayout } from './components/form-layout/FormLayout.vue'
 export type { FormLayoutVariants } from './components/form-layout/form-layout.variants'
 export type { FormValidateOn } from './components/form/composables/useForm'

package/src/styles/interaction.css

@@ -128,7 +128,7 @@
     opacity var(--hn-duration-fast) var(--hn-ease-enter);
 
   @media (hover: hover) {
-    &:hover:not(:disabled):not(:has(:disabled)):not(
+    &:hover:not(:disabled):not([data-disabled]):not(
         :has(:is(input, textarea, [data-hn-segment]):focus-visible)
       ):not([data-invalid]) {
       background-color: color-mix(
@@ -138,7 +138,7 @@
       );
     }
 
-    &[data-invalid]:hover:not(:disabled):not(:has(:disabled)):not(
+    &[data-invalid]:hover:not(:disabled):not([data-disabled]):not(
         :has(:is(input, textarea, [data-hn-segment]):focus-visible)
       ) {
       background-color: color-mix(