brutalism design

new-client/src/shared/components/ui/Avatar.vue

@@ -46,6 +46,10 @@ const api = computed(() => avatar.connect(service, normalizeProps))
     #{$self}.highlighted & {
       background-color: var(--yellow);
     }
+
+    &[data-state='hidden'] {
+      display: none;
+    }
   }
 
   &__image {
@@ -53,6 +57,10 @@ const api = computed(() => avatar.connect(service, normalizeProps))
     height: 100%;
     object-fit: cover;
     object-position: center;
+
+    &[data-state='hidden'] {
+      display: none;
+    }
   }
 }
 </style>

new-client/src/shared/components/ui/Button.vue

@@ -38,6 +38,7 @@ interface Props {
 .chad-button {
   @include font-display-14;
 
+  flex-shrink: 0;
   border: none;
   color: var(--ink);
   padding-inline: var(--space-3);

new-client/src/shared/components/ui/Tag.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="chad-tag" :data-type="type">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  type: 'success' | 'error'
+}
+
+defineOptions({
+  name: 'ChadTag',
+})
+
+defineProps<Props>()
+</script>
+
+<style lang="scss">
+.chad-tag {
+  @include font-micro;
+
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  color: var(--grey-3);
+
+  &::before {
+    content: '';
+    display: block;
+    width: 10px;
+    height: 10px;
+  }
+
+  &[data-type='success'] {
+    &::before {
+      background-color: var(--green);
+    }
+  }
+
+  &[data-type='error'] {
+    &::before {
+      background-color: var(--red);
+    }
+  }
+}
+</style>

new-client/src/shared/components/ui/Toggle.vue

@@ -0,0 +1,67 @@
+<template>
+  <button class="chad-toggle" v-bind="api.getRootProps()">
+    <span class="chad-toggle__indicator" v-bind="api.getIndicatorProps()" />
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+import type { Component } from 'vue'
+import * as toggle from '@zag-js/toggle'
+import { normalizeProps, useMachine } from '@zag-js/vue'
+import { computed } from 'vue'
+
+defineOptions({
+  name: 'ChadToggle',
+})
+
+const props = defineProps<{
+  disabled?: boolean
+  icon?: Component
+}>()
+
+const modelValue = defineModel<boolean>('modelValue')
+
+const service = useMachine(toggle.machine, computed(() => {
+  return {
+    disabled: props.disabled,
+    pressed: modelValue.value,
+    onPressedChange: (pressed) => {
+      modelValue.value = pressed
+    },
+  } as toggle.Props
+}))
+
+const api = computed(() => toggle.connect(service, normalizeProps))
+</script>
+
+<style lang="scss">
+.chad-toggle {
+  @include font-micro;
+
+  border: var(--border-w) solid var(--ink);
+  height: 44px;
+
+  cursor: pointer;
+
+  &:hover,
+  &:active {
+    background-color: var(--grey-2);
+  }
+
+  &[data-state='on'] {
+    background-color: var(--yellow);
+  }
+
+  &[data-state='off'] {
+    background-color: var(--paper);
+    color: var(--grey-3);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    background-color: var(--grey-1);
+    color: var(--grey-3);
+  }
+}
+</style>