initial

apps/client/components/checkbox-button.vue

@@ -0,0 +1,131 @@
+<template>
+  <div
+    :class="[
+      cn.b(),
+      cn.is('checked', checked),
+      cn.is('invalid', invalid),
+      cn.is('disabled', disabled),
+      cn.is('focused', focused),
+    ]"
+    @click="handleChange"
+  >
+    <UiIconSCheck :class="[cn.e('checkmark')]" />
+
+    <p :class="[cn.e('label')]">
+      <slot v-bind="{ checked }">
+        {{ label }}
+      </slot>
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+export interface Props {
+  id: string
+  label?: string
+  disabled?: boolean
+  modelValue?: boolean | string | number
+  trueValue?: boolean | string | number
+  falseValue?: boolean | string | number
+  required?: boolean
+}
+
+defineOptions({
+  name: 'CheckboxButton',
+})
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  trueValue: true,
+  falseValue: false,
+  required: false,
+  modelValue: undefined,
+})
+const slots = useSlots()
+const { checked, invalid, focused, handleChange } = useCheckbox(props, slots)
+
+const cn = useClassname('checkbox-button')
+</script>
+
+<style lang="scss">
+.checkbox-button {
+  $self: &;
+
+  @include txt-i-m;
+
+  --border-color: #{$clr-grey-300};
+  --border-width: 1px;
+
+  display: inline-flex;
+  align-items: center;
+  height: 40px;
+  padding: 8px 16px;
+  border-radius: 12px;
+  outline: var(--border-width) solid var(--border-color);
+  outline-offset: calc(var(--border-width) * -1);
+  cursor: pointer;
+  transition: .2s ease-out;
+  transition-property: outline-color, background-color, color;
+  user-select: none;
+
+  &:hover {
+    --border-color: transparent;
+
+    background-color: $clr-grey-200;
+  }
+
+  &.is-checked {
+    --border-color: transparent;
+
+    background-color: $clr-cyan-500;
+    color: $clr-white;
+
+    &:hover {
+      background-color: $clr-cyan-400;
+    }
+  }
+
+  //&.is-invalid {
+  //  --border-color: var(--checkbox-invalid-border-color);
+  //}
+
+  &.is-disabled {
+    cursor: not-allowed;
+  }
+
+  &__checkmark {
+    --border-color: var(--checkbox-border-color);
+    --border-width: 1px;
+
+    width: var(--size);
+    height: var(--size);
+    border-radius: 4px;
+    outline: var(--border-width) solid var(--border-color);
+    outline-offset: calc(var(--border-width) * -1);
+    color: transparent;
+    cursor: pointer;
+    transition: .2s ease-out;
+    transition-property: outline-color, background-color, color;
+    margin-right: 8px;
+
+    #{$self}.has-label & {
+      margin-top: 1px;
+    }
+
+    #{$self}.is-checked & {
+      --border-width: 0;
+
+      color: var(--checkbox-checked-color);
+      background-color: var(--checkbox-checked-background);
+    }
+
+    #{$self}.is-disabled & {
+      --border-color: var(--checkbox-disabled-border-color);
+    }
+
+    #{$self}.is-disabled.is-checked & {
+      color: var(--checkbox-disabled-checked-color);
+    }
+  }
+}
+</style>