Toggles

apps/hub/app/components/IslandMenu.vue

@@ -3,6 +3,7 @@ import { Button, ButtonGroup, IconPaint, IconText } from '@nobel/core'
 import { onClickOutside } from '@vueuse/core'
 import { useTemplateRef } from 'vue'
 import UserPanelWrapper from './UserPanelWrapper.vue'
+import SettingsPanel from './SettingsPanel.vue'
 
 const theme = useUmbra()
 const hover = ref(false)
@@ -44,7 +45,7 @@ onClickOutside(islandMenu, () => (expandedTab.value = false))
   >
     <div class="island-panel">
       <UserPanelWrapper v-if="activeTab === 'user'" />
-      <h1 v-if="activeTab === 'settings'">Settings</h1>
+      <SettingsPanel v-if="activeTab === 'settings'" />
     </div>
 
     <ButtonGroup>

apps/hub/app/components/SettingsPanel.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { Toggle, toast } from '@nobel/core'
+
+const theme = useUmbra()
+</script>
+
+<template>
+  <div class="settings-panel">
+    <h2>Settings</h2>
+    <Toggle :value="theme.isDark" @click="theme.inverse()" />
+  </div>
+</template>
+
+<style lang="scss">
+.settings-panel {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 1rem;
+}
+</style>

apps/hub/app/components/SignUser.vue

@@ -5,7 +5,7 @@ const signMode = ref<'signin' | 'signup'>('signin')
 
 <template>
   <div class="signin">
-    <div class="toggle-wrapper border sibling-blur">
+    <div class="multi-toggle-wrapper border sibling-blur">
       <ButtonGroup>
         <Button
           :variant="signMode === 'signin' ? 'primary' : 'base'"
@@ -39,7 +39,7 @@ form {
   gap: var(--space-2);
 }
 
-.toggle-wrapper {
+.multi-toggle-wrapper {
   display: flex;
   justify-content: center;
   align-items: center;

apps/hub/app/components/UserPanel.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button, ButtonGroup, toast } from '@nobel/core'
+import { Button, ButtonGroup, Toggle, toast } from '@nobel/core'
 
 const { user, session, client } = useAuth()
 
@@ -36,6 +36,9 @@ const creationDate = computed(() => {
         alt="User Image"
       />
       <h2>{{ user?.name }}</h2>
+      <Button size="small" variant="primary" color="warning">
+        <Icon name="pixelarticons:alert" size="1em" />
+      </Button>
     </div>
     <div class="email">
       <p>{{ user?.email }}</p>

apps/ui/src/pages/UI.vue

@@ -9,6 +9,7 @@ import {
   Slider,
   IconHome,
   IconPaint,
+  ButtonToggle,
 } from '@nobel/core'
 </script>
 
@@ -82,14 +83,15 @@ import {
     </ButtonGroup>
 
     <section>
-      <Toggle>
+      <ButtonToggle>
         <template #active>
           <IconHome />
         </template>
         <template #inactive>
           <IconPaint />
         </template>
-      </Toggle>
+      </ButtonToggle>
+      <Toggle variant="primary" />
     </section>
   </div>
 </template>

packages/nobel/components/ui/Input.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { ref, useModel } from 'vue'
-import { useVModel } from '@vueuse/core'
+import { ref } from 'vue'
 
 defineOptions({
   inheritAttrs: false,

packages/nobel/components/ui/Toggle.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import Button from './Button/Button.vue'
+
+defineProps<{
+  value: boolean
+}>()
+</script>
+
+<template>
+  <Button class="toggle-wrapper" :class="{ right: value }" size="small">
+    <div class="handle">
+      <Icon icon="carbon:face-satisfied" />
+    </div>
+  </Button>
+</template>
+
+<style lang="scss">
+button.toggle-wrapper.small {
+  display: inline-block;
+
+  width: calc(var(--block) * 2);
+  padding: 0 calc(var(--space-quark) / 2);
+  background-color: var(--base-10);
+
+  .handle {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--base-100);
+    color: var(--base-10);
+    border-radius: var(--inner-radius);
+    height: calc(100% - var(--space-quark));
+    aspect-ratio: 1 / 1;
+    transition: margin-left var(--time);
+  }
+
+  &.right .handle {
+    margin-left: calc(100% - var(--block-small) - (var(--space-quark) / 2));
+  }
+}
+
+button.toggle-wrapper.small:focus {
+  background-color: var(--base-50);
+}
+</style>

packages/nobel/index.ts

@@ -6,8 +6,9 @@ import Input from './components/ui/Input.vue'
 import Select from './components/ui/Select.vue'
 import Button from './components/ui/Button/Button.vue'
 import ButtonGroup from './components/ui/Button/ButtonGroup.vue'
-import Toggle from './components/ui/Button/Toggle.vue'
+import ButtonToggle from './components/ui/Button/Toggle.vue'
 import AddButton from './components/ui/Button/presets/AddButton.vue'
+import Toggle from './components/ui/Toggle.vue'
 import Toaster from './components/ui/Toaster.vue'
 
 import Chip from './components/ui/Chip/Chip.vue'
@@ -27,5 +28,17 @@ import SVG from './components/Icons/SVG.vue'
 
 export { toast }
 export { IconAdd, IconClose, IconHome, IconPaint, IconText, IconUI, IconWidth, SVG }
-export { Button, ButtonGroup, Select, Toggle, AddButton, Chip, Radio, Slider, Toaster, Input }
+export {
+  Button,
+  ButtonGroup,
+  Select,
+  Toggle,
+  ButtonToggle,
+  AddButton,
+  Chip,
+  Radio,
+  Slider,
+  Toaster,
+  Input,
+}
 export { presetNobel }