@histoire/controls 0.1.5 → 0.2.0

package/src/components/HstWrapper.vue

@@ -0,0 +1,31 @@
+<script lang="ts">
+export default {
+  name: 'HstWrapper',
+}
+</script>
+
+<script lang="ts" setup>
+import { VTooltip as vTooltip } from 'floating-vue'
+
+const props = defineProps<{
+  title?: string
+}>()
+</script>
+
+<template>
+  <label class="htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap">
+    <span
+      v-tooltip="{
+        content: title,
+        placement: 'left',
+        distance: 12,
+      }"
+      class="htw-w-28 htw-whitespace-nowrap htw-text-ellipsis htw-overflow-hidden htw-shrink-0"
+    >
+      {{ title }}
+    </span>
+    <span class="htw-block htw-grow">
+      <slot />
+    </span>
+  </label>
+</template>

package/src/components/checkbox/HstCheckbox.story.vue

@@ -17,17 +17,15 @@ function initState () {
       <template #default="{ state }">
         <HstCheckbox
           v-model="state.checked"
-        >
-          Label
-        </HstCheckbox>
+          title="Label"
+        />
       </template>
 
       <template #controls="{ state }">
         <HstCheckbox
           v-model="state.checked"
-        >
-          Label
-        </HstCheckbox>
+          title="Label"
+        />
       </template>
     </Variant>
   </Story>

package/src/components/checkbox/HstCheckbox.test.ts

@@ -6,9 +6,7 @@ describe('HstCheckbox', () => {
     const wrapper = mount(HstCheckbox, {
       props: {
         modelValue: false,
-      },
-      slots: {
-        default: 'Label',
+        title: 'Label',
       },
     })
     await wrapper.trigger('click')
@@ -20,9 +18,7 @@ describe('HstCheckbox', () => {
     const wrapper = mount(HstCheckbox, {
       props: {
         modelValue: true,
-      },
-      slots: {
-        default: 'Label',
+        title: 'Label',
       },
     })
     await wrapper.trigger('click')

package/src/components/checkbox/HstCheckbox.vue

@@ -6,13 +6,12 @@ export default {
 
 <script lang="ts" setup>
 import { computed, ref, watch } from 'vue'
+import HstWrapper from '../HstWrapper.vue'
 
-const props = defineProps({
-  modelValue: {
-    type: Boolean,
-    default: false,
-  },
-})
+const props = defineProps<{
+  modelValue: boolean
+  title?: string
+}>()
 
 const emit = defineEmits({
   'update:modelValue': (newValue: boolean) => true,
@@ -37,21 +36,22 @@ watch(path, value => {
 </script>
 
 <template>
-  <div
+  <HstWrapper
     role="checkbox"
     tabindex="0"
-    class="htw-flex htw-items-center htw-gap-2 htw-select-none htw-px-4 htw-py-3 htw-cursor-pointer hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700"
+    class="htw-cursor-pointer htw-items-center"
+    :title="title"
     @click="toggle()"
     @keydown.enter.prevent="toggle()"
     @keydown.space.prevent="toggle()"
   >
     <div class="htw-text-white htw-w-[16px] htw-h-[16px] htw-relative">
       <div
-        class="htw-border group-active:htw-bg-gray-500/20 htw-rounded-sm htw-box-border htw-absolute htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out"
+        class="htw-border htw-border-solid group-active:htw-bg-gray-500/20 htw-rounded-sm htw-box-border htw-absolute htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out"
         :class="[
           modelValue
             ? 'htw-border-primary-500 htw-border-8'
-            : 'htw-border-gray-300 dark:htw-border-gray-500 htw-delay-150',
+            : 'htw-border-black/25 dark:htw-border-white/25 htw-delay-150',
         ]"
       />
       <svg
@@ -76,7 +76,5 @@ watch(path, value => {
         />
       </svg>
     </div>
-
-    <slot />
-  </div>
+  </HstWrapper>
 </template>

package/src/components/checkbox/__snapshots__/HstCheckbox.test.ts.snap

@@ -1,59 +1,67 @@
 // Peeky snapshots v1.0
 
 exports[`HstCheckbox toggle to checked 1`] = `
-<div
+<label
+  class="htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap htw-cursor-pointer htw-items-center"
   role="checkbox"
   tabindex="0"
-  class="htw-flex htw-items-center htw-gap-2 htw-select-none htw-px-4 htw-py-3 htw-cursor-pointer hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700"
 >
-  <div class="htw-text-white htw-w-[16px] htw-h-[16px] htw-relative">
-    <div class="htw-border group-active:htw-bg-gray-500/20 htw-rounded-sm htw-box-border htw-absolute htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out htw-border-gray-300 dark:htw-border-gray-500 htw-delay-150">
-    </div>
-    <svg
-      width="16"
-      height="16"
-      viewbox="0 0 24 24"
-      class="htw-relative htw-z-10"
-    >
-      <path
-        d="m 4 12 l 5 5 l 10 -10"
-        fill="none"
-        class="htw-stroke-white htw-stroke-2 htw-duration-200 htw-ease-in-out htw-transition-all"
-        stroke-dasharray="21.21"
-        stroke-dashoffset="21.21"
+  <span class="htw-w-28 htw-whitespace-nowrap htw-text-ellipsis htw-overflow-hidden htw-shrink-0 v-popper--has-tooltip">
+    Label
+  </span>
+  <span class="htw-block htw-grow">
+    <div class="htw-text-white htw-w-[16px] htw-h-[16px] htw-relative">
+      <div class="htw-border htw-border-solid group-active:htw-bg-gray-500/20 htw-rounded-sm htw-box-border htw-absolute htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out htw-border-black/25 dark:htw-border-white/25 htw-delay-150">
+      </div>
+      <svg
+        width="16"
+        height="16"
+        viewbox="0 0 24 24"
+        class="htw-relative htw-z-10"
       >
-      </path>
-    </svg>
-  </div>
-  Label
-</div>
+        <path
+          d="m 4 12 l 5 5 l 10 -10"
+          fill="none"
+          class="htw-stroke-white htw-stroke-2 htw-duration-200 htw-ease-in-out htw-transition-all"
+          stroke-dasharray="21.21"
+          stroke-dashoffset="21.21"
+        >
+        </path>
+      </svg>
+    </div>
+  </span>
+</label>
 `;
 
 exports[`HstCheckbox toggle to unchecked 1`] = `
-<div
+<label
+  class="htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap htw-cursor-pointer htw-items-center"
   role="checkbox"
   tabindex="0"
-  class="htw-flex htw-items-center htw-gap-2 htw-select-none htw-px-4 htw-py-3 htw-cursor-pointer hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700"
 >
-  <div class="htw-text-white htw-w-[16px] htw-h-[16px] htw-relative">
-    <div class="htw-border group-active:htw-bg-gray-500/20 htw-rounded-sm htw-box-border htw-absolute htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out htw-border-primary-500 htw-border-8">
-    </div>
-    <svg
-      width="16"
-      height="16"
-      viewbox="0 0 24 24"
-      class="htw-relative htw-z-10"
-    >
-      <path
-        d="m 4 12 l 5 5 l 10 -10"
-        fill="none"
-        class="htw-stroke-white htw-stroke-2 htw-duration-200 htw-ease-in-out htw-transition-all htw-delay-150"
-        stroke-dasharray="21.21"
-        stroke-dashoffset="0"
+  <span class="htw-w-28 htw-whitespace-nowrap htw-text-ellipsis htw-overflow-hidden htw-shrink-0 v-popper--has-tooltip">
+    Label
+  </span>
+  <span class="htw-block htw-grow">
+    <div class="htw-text-white htw-w-[16px] htw-h-[16px] htw-relative">
+      <div class="htw-border htw-border-solid group-active:htw-bg-gray-500/20 htw-rounded-sm htw-box-border htw-absolute htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out htw-border-primary-500 htw-border-8">
+      </div>
+      <svg
+        width="16"
+        height="16"
+        viewbox="0 0 24 24"
+        class="htw-relative htw-z-10"
       >
-      </path>
-    </svg>
-  </div>
-  Label
-</div>
+        <path
+          d="m 4 12 l 5 5 l 10 -10"
+          fill="none"
+          class="htw-stroke-white htw-stroke-2 htw-duration-200 htw-ease-in-out htw-transition-all htw-delay-150"
+          stroke-dasharray="21.21"
+          stroke-dashoffset="0"
+        >
+        </path>
+      </svg>
+    </div>
+  </span>
+</label>
 `;

package/src/components/number/HstNumber.story.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import HstNumber from './HstNumber.vue'
+
+function initState () {
+  return {
+    count: 20,
+    step: 1,
+  }
+}
+</script>
+
+<template>
+  <Story
+    title="HstNumber"
+  >
+    <Variant
+      title="default"
+      :init-state="initState"
+    >
+      <template #default="{ state }">
+        <HstNumber
+          v-model="state.count"
+          :step="state.step"
+          title="Count"
+        />
+      </template>
+
+      <template #controls="{ state }">
+        <HstNumber
+          v-model="state.count"
+          title="Count"
+        />
+
+        <HstNumber
+          v-model="state.step"
+          title="Step"
+        />
+      </template>
+    </Variant>
+  </Story>
+</template>

package/src/components/number/HstNumber.vue

@@ -0,0 +1,92 @@
+<script lang="ts">
+export default {
+  name: 'HstNumber',
+
+  inheritAttrs: false,
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, ref, onUnmounted } from 'vue'
+import HstWrapper from '../HstWrapper.vue'
+
+const props = defineProps<{
+  title?: string
+  modelValue: number
+}>()
+
+const emit = defineEmits({
+  'update:modelValue': (newValue: number) => true,
+})
+
+const numberModel = computed({
+  get: () => props.modelValue,
+  set: value => {
+    emit('update:modelValue', value)
+  },
+})
+
+const input = ref<HTMLInputElement>()
+
+function focusAndSelect () {
+  input.value.focus()
+  input.value.select()
+}
+
+// Drag to modify
+
+const isDragging = ref(false)
+let startX: number
+let startValue: number
+
+function onMouseDown (event: MouseEvent) {
+  isDragging.value = true
+  startX = event.clientX
+  startValue = numberModel.value
+  window.addEventListener('mousemove', onMouseMove)
+  window.addEventListener('mouseup', stopDragging)
+}
+
+function onMouseMove (event: MouseEvent) {
+  let step = parseFloat(input.value.step)
+  if (isNaN(step)) {
+    step = 1
+  }
+  numberModel.value = startValue + Math.round((event.clientX - startX) / 10 / step) * step
+}
+
+function stopDragging () {
+  isDragging.value = false
+  window.removeEventListener('mousemove', onMouseMove)
+  window.removeEventListener('mouseup', stopDragging)
+}
+
+onUnmounted(() => {
+  stopDragging()
+})
+</script>
+
+<template>
+  <HstWrapper
+    class="htw-cursor-ew-resize htw-items-center"
+    :title="title"
+    :class="[
+      $attrs.class,
+      { 'htw-select-none': isDragging },
+    ]"
+    :style="$attrs.style"
+    @click="focusAndSelect"
+    @mousedown="onMouseDown"
+  >
+    <input
+      ref="input"
+      v-bind="{ ...$attrs, class: null, style: null }"
+      v-model.number="numberModel"
+      type="number"
+      :class="{
+        'htw-select-none': isDragging,
+      }"
+      class="htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-pl-2 htw-py-1 -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm htw-cursor-ew-resize"
+    >
+  </HstWrapper>
+</template>

package/src/components/{input/HstInput.story.vue → text/HstText.story.vue}

@@ -1,33 +1,42 @@
 <script lang="ts" setup>
-import HstInput from './HstInput.vue'
+import HstText from './HstText.vue'
 
 function initState () {
   return {
+    label: 'My really long label',
     text: '',
   }
 }
 </script>
 
 <template>
-  <Story title="HstInput">
+  <Story
+    title="HstText"
+    :layout="{
+      type: 'grid',
+      width: '100%',
+    }"
+  >
     <Variant
-      title="playground"
+      title="default"
       :init-state="initState"
     >
       <template #default="{ state }">
-        <HstInput
+        <HstText
           v-model="state.text"
-        >
-          Label
-        </HstInput>
+          :title="state.label"
+        />
       </template>
 
       <template #controls="{ state }">
-        <HstInput
+        <HstText
+          v-model="state.label"
+          title="Label"
+        />
+        <HstText
           v-model="state.text"
-        >
-          Label
-        </HstInput>
+          title="Text"
+        />
       </template>
     </Variant>
 
@@ -36,18 +45,17 @@ function initState () {
       :init-state="initState"
     >
       <template #default="{ state }">
-        <HstInput
+        <HstText
           v-model="state.text"
           placeholder="Enter some text..."
         />
       </template>
 
       <template #controls="{ state }">
-        <HstInput
+        <HstText
           v-model="state.text"
-        >
-          Label
-        </HstInput>
+          title="Text"
+        />
       </template>
     </Variant>
   </Story>

package/src/components/text/HstText.vue

@@ -0,0 +1,40 @@
+<script lang="ts">
+export default {
+  name: 'HstText',
+}
+</script>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import HstWrapper from '../HstWrapper.vue'
+
+const props = defineProps<{
+  title?: string
+  modelValue: string
+}>()
+
+const emit = defineEmits({
+  'update:modelValue': (newValue: string) => true,
+})
+
+const input = ref<HTMLInputElement>()
+</script>
+
+<template>
+  <HstWrapper
+    :title="title"
+    class="htw-cursor-text htw-items-center"
+    :class="$attrs.class"
+    :style="$attrs.style"
+    @click="input.focus()"
+  >
+    <input
+      ref="input"
+      v-bind="{ ...$attrs, class: null, style: null }"
+      type="text"
+      :value="modelValue"
+      class="htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-px-2 htw-py-1 -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm"
+      @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+    >
+  </HstWrapper>
+</template>

package/src/components/textarea/HstTextarea.story.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import HstTextarea from './HstTextarea.vue'
+
+function initState () {
+  return {
+    text: '',
+  }
+}
+</script>
+
+<template>
+  <Story title="HstTextarea">
+    <Variant
+      title="default"
+      :init-state="initState"
+    >
+      <template #default="{ state }">
+        <HstTextarea
+          v-model="state.text"
+          title="Textarea"
+        />
+      </template>
+
+      <template #controls="{ state }">
+        <HstTextarea
+          v-model="state.text"
+          title="Text"
+        />
+      </template>
+    </Variant>
+  </Story>
+</template>

package/src/components/textarea/HstTextarea.vue

@@ -0,0 +1,40 @@
+<script lang="ts">
+export default {
+  name: 'HstTextarea',
+  inheritAttrs: false,
+}
+</script>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import HstWrapper from '../HstWrapper.vue'
+
+const props = defineProps<{
+  title?: string
+  modelValue: string
+}>()
+
+const emit = defineEmits({
+  'update:modelValue': (newValue: string) => true,
+})
+
+const input = ref<HTMLInputElement>()
+</script>
+
+<template>
+  <HstWrapper
+    :title="title"
+    class="htw-cursor-text"
+    :class="$attrs.class"
+    :style="$attrs.style"
+    @click="input.focus()"
+  >
+    <textarea
+      ref="input"
+      v-bind="{ ...$attrs, class: null, style: null }"
+      :value="modelValue"
+      class="htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-px-2 htw-py-1 -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm htw-box-border htw-resize-y htw-min-h-[26px]"
+      @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+    />
+  </HstWrapper>
+</template>

package/src/index.ts

@@ -1,11 +1,17 @@
 import type { App } from 'vue'
 import HstCheckboxVue from './components/checkbox/HstCheckbox.vue'
-import HstInputVue from './components/input/HstInput.vue'
+import HstTextVue from './components/text/HstText.vue'
+import HstNumberVue from './components/number/HstNumber.vue'
+import HstTextareaVue from './components/textarea/HstTextarea.vue'
 
 export const HstCheckbox = HstCheckboxVue
-export const HstInput = HstInputVue
+export const HstText = HstTextVue
+export const HstNumber = HstNumberVue
+export const HstTextarea = HstTextareaVue
 
 export function registerVueComponents (app: App) {
   app.component('HstCheckbox', HstCheckboxVue)
-  app.component('HstInput', HstInputVue)
+  app.component('HstText', HstTextVue)
+  app.component('HstNumber', HstNumberVue)
+  app.component('HstTextarea', HstTextareaVue)
 }

package/src/style/main.css

@@ -1,7 +1,17 @@
+@import 'floating-vue/dist/style.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+
 body {
+  font-size: 18px;
   @apply dark:htw-text-gray-100;
 }
+
+@media (min-width: 640px) {
+  body {
+    font-size: 14px;
+  }
+}

package/dist/components/input/HstInput.vue.d.ts

@@ -1,18 +0,0 @@
-declare const _default: import("vue").DefineComponent<{
-    modelValue: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: string;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    'update:modelValue': (newValue: string | number) => true;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    modelValue: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: string;
-    };
-}>> & {
-    "onUpdate:modelValue"?: (newValue: string | number) => any;
-}, {
-    modelValue: string | number;
-}>;
-export default _default;

package/histoire-dist/__sandbox.html

@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Histoire</title>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width,initial-scale=1">
-  <meta name="description" content="">
-  <link rel="stylesheet" href="/assets/style.7657d2ac.css">
-  
-</head>
-<body>
-  <div id="app"></div>
-  <script type="module" src="/assets/sandbox.2c60450a.js"></script>
-</body>
-</html>

package/histoire-dist/assets/BaseEmpty.a84c14c8.js

@@ -1 +0,0 @@
-import{_ as s}from"./index.58f51dd0.js";import{o as r,g as o,b as c}from"./vendor.70a554f6.js";const t={},a={class:"htw-flex htw-flex-col htw-items-center htw-justify-center htw-space-y-4 htw-py-12 htw-h-full htw-text-center htw-text-gray-400 htw-text-lg"};function n(e,l){return r(),o("div",a,[c(e.$slots,"default")])}t.__file="../histoire/dist/client/app/components/base/BaseEmpty.vue";var f=s(t,[["render",n]]);export{f as B};

package/histoire-dist/assets/HomeView.f524bd4b.js

@@ -1 +0,0 @@
-import{h as o,c as a}from"./global-components.84d0ab22.js";import{d as r,f as c,o as i,g as n,a as h,u as l}from"./vendor.70a554f6.js";var f="/assets/histoire.8af7bd1f.svg";const m={class:"htw-flex htw-items-center htw-justify-center htw-h-full"},u=["src"],p=r({setup(_){const s=c(()=>{var e,t;return((t=(e=o.theme)==null?void 0:e.logo)==null?void 0:t.square)?a.square:f});return(e,t)=>(i(),n("div",m,[h("img",{src:l(s),alt:"Logo",class:"htw-w-64 htw-h-64 htw-opacity-25"},null,8,u)]))}});p.__file="../histoire/dist/client/app/components/HomeView.vue";export{p as default};

package/histoire-dist/assets/HstCheckbox.story.9f622545.js

@@ -1 +0,0 @@
-var L=Object.defineProperty,N=Object.defineProperties;var z=Object.getOwnPropertyDescriptors;var k=Object.getOwnPropertySymbols;var E=Object.prototype.hasOwnProperty,K=Object.prototype.propertyIsEnumerable;var b=(t,e,o)=>e in t?L(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,y=(t,e)=>{for(var o in e||(e={}))E.call(e,o)&&b(t,o,e[o]);if(k)for(var o of k(e))K.call(e,o)&&b(t,o,e[o]);return t},V=(t,e)=>N(t,z(e));import{d as S,p as u,f as x,q as T,o as p,g,a as i,n as C,u as q,b as M,e as $,y as B,c as Z,w as h,h as w,Z as U,r as H}from"./vendor.70a554f6.js";const j={class:"htw-text-white htw-w-[16px] htw-h-[16px] htw-relative"},A={width:"16",height:"16",viewBox:"0 0 24 24",class:"htw-relative htw-z-10"},D=["stroke-dasharray","stroke-dashoffset"],F={name:"HstCheckbox"},m=S(V(y({},F),{props:{modelValue:{type:Boolean,default:!1}},emits:{"update:modelValue":t=>!0},setup(t,{emit:e}){const o=t;function c(){e("update:modelValue",!o.modelValue),f.value=!0}const r=u(),l=u(0),s=x(()=>o.modelValue?1:0),n=x(()=>(1-s.value)*l.value),f=u(!1);return T(r,v=>{var a,d,_;l.value=(_=(d=(a=r.value).getTotalLength)==null?void 0:d.call(a))!=null?_:21.21}),(v,a)=>(p(),g("div",{role:"checkbox",tabindex:"0",class:"htw-flex htw-items-center htw-gap-2 htw-select-none htw-px-4 htw-py-3 htw-cursor-pointer hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700",onClick:a[0]||(a[0]=d=>c()),onKeydown:[a[1]||(a[1]=$(B(d=>c(),["prevent"]),["enter"])),a[2]||(a[2]=$(B(d=>c(),["prevent"]),["space"]))]},[i("div",j,[i("div",{class:C(["htw-border group-active:htw-bg-gray-500/20 htw-rounded-sm htw-box-border htw-absolute htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out",[t.modelValue?"htw-border-primary-500 htw-border-8":"htw-border-gray-300 dark:htw-border-gray-500 htw-delay-150"]])},null,2),(p(),g("svg",A,[i("path",{ref_key:"path",ref:r,d:"m 4 12 l 5 5 l 10 -10",fill:"none",class:C(["htw-stroke-white htw-stroke-2 htw-duration-200 htw-ease-in-out",[f.value?"htw-transition-all":"htw-transition-none",{"htw-delay-150":t.modelValue}]]),"stroke-dasharray":l.value,"stroke-dashoffset":q(n)},null,10,D)]))]),M(v.$slots,"default")],32))}}));m.__file="src/components/checkbox/HstCheckbox.vue";const G=U(" Label "),I=U(" Label "),J=S({setup(t){function e(){return{checked:!1}}return(o,c)=>{const r=H("Variant"),l=H("Story");return p(),Z(l,{title:"HstCheckbox"},{default:h(()=>[w(r,{title:"playground","init-state":e},{default:h(({state:s})=>[w(m,{modelValue:s.checked,"onUpdate:modelValue":n=>s.checked=n},{default:h(()=>[G]),_:2},1032,["modelValue","onUpdate:modelValue"])]),controls:h(({state:s})=>[w(m,{modelValue:s.checked,"onUpdate:modelValue":n=>s.checked=n},{default:h(()=>[I]),_:2},1032,["modelValue","onUpdate:modelValue"])]),_:1})]),_:1})}}});J.__file="src/components/checkbox/HstCheckbox.story.vue";export{J as default};