@1001-digital/components 1.4.0 → 2.0.0

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@1001-digital/components",
-  "version": "1.4.0",
+  "version": "2.0.0",
   "type": "module",
+  "main": "./src/index.ts",
   "sideEffects": [
     "*.css"
   ],
@@ -14,18 +15,18 @@
   ],
   "peerDependencies": {
     "vue": "^3.5.0",
-    "@1001-digital/styles": "^1.2.0"
+    "@1001-digital/styles": "^2.0.0"
   },
   "dependencies": {
     "@iconify/vue": "^5.0.0",
-    "@internationalized/date": "^3.8.0",
-    "@types/luxon": "^3.7.0",
+    "@internationalized/date": "^3.12.0",
     "@visualizevalue/opepicons": "^0.1.0",
-    "@vueuse/core": "^14.2.0",
+    "@vueuse/core": "^14.2.1",
     "luxon": "^3.7.0",
-    "reka-ui": "^2.8.0"
+    "reka-ui": "^2.9.0"
   },
   "devDependencies": {
-    "vue": "^3.5.0"
+    "@types/luxon": "^3.7.0",
+    "vue": "^3.5.30"
   }
 }

package/src/base/components/Actions.vue

@@ -14,10 +14,14 @@
   flex-wrap: wrap;
   gap: var(--spacer-sm);
 
-  &:not(.left) {
+  &:not(.left):not(.center) {
     justify-content: flex-end;
   }
 
+  &.center {
+    justify-content: center;
+  }
+
   &:empty {
     display: none !important;
   }

package/src/base/components/Alert.vue

@@ -10,7 +10,7 @@
         @click="dismiss"
         class="close"
       >
-        <Icon type="close" />
+        <Icon name="close" />
       </button>
       <slot />
     </aside>
@@ -46,7 +46,7 @@ const dismiss = () => {
     gap: var(--spacer-sm);
     border: var(--border);
     border-color: var(--alert-border-color);
-    background-color: var(--alert-background-color);
+    background-color: var(--alert-background);
     color: var(--alert-color);
     font-family: var(--font-family);
     font-size: var(--ui-font-size);

package/src/base/components/AppShell.vue

@@ -41,19 +41,24 @@ const sidebarOpen = defineModel<boolean>('sidebarOpen', { default: false })
 @layer components {
   .app-shell {
     display: flex;
-    min-block-size: var(--100vh);
+    min-block-size: 100dvh;
+  }
+
+  html:has(.app-shell nav.bottom-nav) > body {
+    border-inline-end: var(--border);
+
+    .app-shell nav.bottom-nav {
+      border-inline-end: var(--border);
+    }
   }
 
   .app-shell-main {
     flex: 1;
     min-inline-size: 0;
-  }
-
-  .app-shell:has(.bottom-nav) .app-shell-main {
-    padding-block-end: var(--bottom-nav-height);
+    padding-block-start: env(safe-area-inset-top);
 
-    @media (min-width: 1024px) {
-      padding-block-end: 0;
+    &:has(+ nav.bottom-nav) {
+      padding-block-end: var(--bottom-nav-height);
     }
   }
 }

package/src/base/components/BottomNav.vue

@@ -1,6 +1,8 @@
 <template>
   <nav class="bottom-nav">
-    <slot />
+    <div class="bottom-nav-items">
+      <slot />
+    </div>
   </nav>
 </template>
 
@@ -17,12 +19,16 @@
     border-block-start: var(--border);
     display: flex;
     align-items: center;
-    justify-content: space-evenly;
+    justify-content: center;
     padding-block-end: env(safe-area-inset-bottom);
+  }
 
-    @media (min-width: 1024px) {
-      display: none;
-    }
+  .bottom-nav-items {
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    inline-size: 100%;
+    max-inline-size: var(--bottom-nav-max-inline-size);
 
     > a,
     > button {

package/src/base/components/Calendar.vue

@@ -18,11 +18,11 @@
   >
     <CalendarHeader class="calendar-header">
       <CalendarPrev class="calendar-nav">
-        <Icon type="chevron-left" />
+        <Icon name="chevron-left" />
       </CalendarPrev>
       <CalendarHeading class="calendar-heading" />
       <CalendarNext class="calendar-nav">
-        <Icon type="chevron-right" />
+        <Icon name="chevron-right" />
       </CalendarNext>
     </CalendarHeader>
 

package/src/base/components/ColorPicker.vue

@@ -0,0 +1,318 @@
+<template>
+  <Popover
+    v-model:open="open"
+    :side="side"
+    :align="align"
+    :side-offset="sideOffset"
+    class="color-picker-popover"
+  >
+    <template #trigger>
+      <button
+        class="color-picker-trigger"
+        type="button"
+      >
+        <ColorSwatch
+          :color="hexColor"
+          class="color-picker-swatch"
+        />
+        <span class="color-picker-value">{{ hexColor }}</span>
+      </button>
+    </template>
+
+    <div class="color-picker">
+      <!-- 2D Color Area (Saturation/Lightness) -->
+      <ColorAreaRoot
+        v-slot="{ style }"
+        :model-value="colorObj"
+        color-space="hsl"
+        x-channel="saturation"
+        y-channel="lightness"
+        class="color-picker-area"
+        @update:color="handleColorUpdate"
+      >
+        <ColorAreaArea
+          class="color-picker-area-surface"
+          :style="style"
+        >
+          <ColorAreaThumb class="color-picker-thumb" />
+        </ColorAreaArea>
+      </ColorAreaRoot>
+
+      <!-- Hue Slider -->
+      <ColorSliderRoot
+        :model-value="colorObj"
+        channel="hue"
+        color-space="hsl"
+        class="color-picker-slider"
+        @update:color="handleColorUpdate"
+      >
+        <ColorSliderTrack class="color-picker-slider-track">
+          <div class="color-picker-slider-track-fill" />
+        </ColorSliderTrack>
+        <ColorSliderThumb class="color-picker-thumb" />
+      </ColorSliderRoot>
+
+      <!-- Alpha Slider -->
+      <ColorSliderRoot
+        v-if="alpha"
+        :model-value="colorObj"
+        channel="alpha"
+        color-space="hsl"
+        class="color-picker-slider"
+        @update:color="handleColorUpdate"
+      >
+        <ColorSliderTrack
+          class="color-picker-slider-track color-picker-alpha-track"
+        >
+          <div class="color-picker-slider-track-fill" />
+        </ColorSliderTrack>
+        <ColorSliderThumb class="color-picker-thumb" />
+      </ColorSliderRoot>
+
+      <!-- Color Fields -->
+      <FormInputGroup>
+        <ColorFieldRoot
+          :model-value="hexColor"
+          as-child
+          @update:model-value="handleHexUpdate"
+        >
+          <ColorFieldInput
+            class="color-picker-input-hex"
+            placeholder="#000000"
+          />
+        </ColorFieldRoot>
+        <ColorFieldRoot
+          :model-value="colorObj"
+          channel="hue"
+          color-space="hsl"
+          as-child
+          @update:color="handleColorUpdate"
+        >
+          <ColorFieldInput placeholder="H" />
+        </ColorFieldRoot>
+        <ColorFieldRoot
+          :model-value="colorObj"
+          channel="saturation"
+          color-space="hsl"
+          as-child
+          @update:color="handleColorUpdate"
+        >
+          <ColorFieldInput placeholder="S" />
+        </ColorFieldRoot>
+        <ColorFieldRoot
+          :model-value="colorObj"
+          channel="lightness"
+          color-space="hsl"
+          as-child
+          @update:color="handleColorUpdate"
+        >
+          <ColorFieldInput placeholder="L" />
+        </ColorFieldRoot>
+      </FormInputGroup>
+    </div>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type { Color } from 'reka-ui'
+import {
+  ColorAreaArea,
+  ColorAreaRoot,
+  ColorAreaThumb,
+  ColorFieldInput,
+  ColorFieldRoot,
+  ColorSliderRoot,
+  ColorSliderThumb,
+  ColorSliderTrack,
+  ColorSwatch,
+  colorToString,
+  normalizeColor,
+} from 'reka-ui'
+import FormInputGroup from './FormInputGroup.vue'
+import Popover from './Popover.vue'
+
+const props = withDefaults(
+  defineProps<{
+    side?: 'top' | 'right' | 'bottom' | 'left'
+    align?: 'start' | 'center' | 'end'
+    sideOffset?: number
+    alpha?: boolean
+  }>(),
+  {
+    side: 'bottom',
+    align: 'start',
+    sideOffset: 4,
+  },
+)
+
+const model = defineModel<string>({ default: '#56d799' })
+
+const open = ref(false)
+const colorObj = ref<Color>(normalizeColor(model.value))
+const hexColor = computed(() => colorToString(colorObj.value, 'hex'))
+
+watch(hexColor, (val) => {
+  model.value = val
+})
+
+watch(
+  () => model.value,
+  (val) => {
+    const normalized = normalizeColor(val)
+    if (colorToString(normalized, 'hex') !== hexColor.value) {
+      colorObj.value = normalized
+    }
+  },
+)
+
+function handleColorUpdate(newColor: Color) {
+  colorObj.value = newColor
+}
+
+function handleHexUpdate(hex: string) {
+  colorObj.value = normalizeColor(hex)
+}
+</script>
+
+<style scoped>
+@layer components {
+  .color-picker-trigger {
+    all: unset;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--size-2);
+    padding: var(--ui-padding-block) var(--ui-padding-inline);
+    background: var(--button-background);
+    border-radius: var(--button-border-radius);
+    box-shadow: var(--border-shadow);
+    font-family: var(--font-family);
+    font-size: var(--ui-font-size);
+    cursor: pointer;
+    transition:
+      box-shadow var(--speed),
+      background var(--speed);
+    max-width: var(--color-picker-trigger-max-width);
+
+    &:is(:hover, :focus) {
+      box-shadow: var(--border-shadow-highlight);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--primary);
+      outline-offset: 2px;
+    }
+  }
+
+  .color-picker-swatch {
+    inline-size: var(--size-4);
+    block-size: var(--size-4);
+    border-radius: var(--border-radius);
+    background-color: var(--reka-color-swatch-color);
+    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15);
+    flex-shrink: 0;
+  }
+
+  .color-picker {
+    display: grid;
+    gap: var(--spacer);
+  }
+
+  .color-picker-area {
+    position: relative;
+  }
+
+  .color-picker-area-surface {
+    position: relative;
+    inline-size: 100%;
+    block-size: var(--color-picker-area-height);
+    border-radius: var(--border-radius);
+    overflow: hidden;
+
+    &:focus-visible {
+      outline: 2px solid var(--primary);
+      outline-offset: 2px;
+    }
+  }
+
+  .color-picker-thumb {
+    all: unset;
+    display: block;
+    inline-size: var(--color-picker-thumb-size);
+    block-size: var(--color-picker-thumb-size);
+    border-radius: 50%;
+    background: var(--color-picker-thumb-background);
+    box-shadow:
+      0 0 0 2px var(--color-picker-thumb-background),
+      0 1px 4px rgb(0 0 0 / 0.3);
+    cursor: pointer;
+    transition: transform var(--speed);
+
+    &:is(:hover, :focus) {
+      transform: scale(1.1);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--primary);
+      outline-offset: 2px;
+    }
+  }
+
+  .color-picker-slider {
+    position: relative;
+    display: flex;
+    align-items: center;
+    inline-size: 100%;
+    block-size: var(--color-picker-thumb-size);
+  }
+
+  .color-picker-slider-track {
+    position: relative;
+    flex-grow: 1;
+    block-size: var(--color-picker-track-size);
+    border-radius: var(--color-picker-track-radius);
+    overflow: hidden;
+  }
+
+  .color-picker-slider-track-fill {
+    position: absolute;
+    inset: 0;
+    border-radius: var(--color-picker-track-radius);
+  }
+
+  .color-picker-alpha-track {
+    background-image:
+      linear-gradient(
+        45deg,
+        var(--color-picker-checkerboard) 25%,
+        transparent 25%
+      ),
+      linear-gradient(
+        -45deg,
+        var(--color-picker-checkerboard) 25%,
+        transparent 25%
+      ),
+      linear-gradient(
+        45deg,
+        transparent 75%,
+        var(--color-picker-checkerboard) 75%
+      ),
+      linear-gradient(
+        -45deg,
+        transparent 75%,
+        var(--color-picker-checkerboard) 75%
+      );
+    background-size: 8px 8px;
+    background-position:
+      0 0,
+      0 4px,
+      4px -4px,
+      -4px 0;
+  }
+
+  .color-picker :deep(input) {
+    text-align: center;
+    font-size: var(--font-xs);
+  }
+}
+</style>

package/src/base/components/Combobox.vue

@@ -17,7 +17,7 @@
         :disabled="disabled"
       />
       <ComboboxTrigger class="combobox-trigger">
-        <Icon type="chevron-down" />
+        <Icon name="chevron-down" />
       </ComboboxTrigger>
     </ComboboxAnchor>
 
@@ -39,7 +39,7 @@
           >
             {{ option[labelKey] }}
             <ComboboxItemIndicator class="combobox-indicator">
-              <Icon type="check" />
+              <Icon name="check" />
             </ComboboxItemIndicator>
           </ComboboxItem>
         </ComboboxViewport>

package/src/base/components/Dialog.vue

@@ -2,6 +2,7 @@
   <Teleport :to="teleportTarget || 'body'">
     <Transition
       :css="false"
+      appear
       @enter="onEnter"
       @leave="onLeave"
       @after-leave="() => emit('closed')"
@@ -15,24 +16,26 @@
         @cancel.stop.prevent="closable && (open = false)"
         @click="onDialogClick"
       >
-        <h1 v-if="title">{{ title }}</h1>
-        <button
-          v-if="closable"
-          class="close"
-          :title="`Close ${title || 'Dialog'}`"
-          @pointerdown="open = false"
-          @click="open = false"
-        >
-          <Icon type="close" />
-        </button>
-
-        <section>
-          <slot />
-        </section>
-
-        <footer v-if="$slots.footer">
-          <slot name="footer" />
-        </footer>
+        <div class="dialog-content">
+          <h1 v-if="title">{{ title }}</h1>
+          <button
+            v-if="closable"
+            class="close"
+            :title="`Close ${title || 'Dialog'}`"
+            @pointerdown="open = false"
+            @click="open = false"
+          >
+            <Icon name="close" />
+          </button>
+
+          <section>
+            <slot />
+          </section>
+
+          <footer v-if="$slots.footer">
+            <slot name="footer" />
+          </footer>
+        </div>
       </component>
     </Transition>
 
@@ -144,14 +147,71 @@ onBeforeUnmount(() => {
     background: var(--background);
     color: var(--color);
     border: var(--border);
-    border-radius: var(--border-radius);
+    border-radius: var(--dialog-border-radius);
     padding: 0;
-    max-block-size: 80dvh;
-    container-type: inline-size;
-    display: grid;
-    grid-template-rows: auto 1fr auto;
     overflow: hidden;
 
+    > .dialog-content {
+      display: grid;
+      grid-template-rows: auto 1fr auto;
+      max-block-size: 80dvh;
+
+      > h1:first-child,
+      > .close {
+        display: flex;
+        align-items: center;
+        block-size: calc(var(--spacer) * 2);
+        box-shadow: var(--border-shadow);
+        padding-inline-start: var(--spacer);
+        font-family: var(--font-family);
+        font-size: var(--ui-font-size);
+        text-transform: var(--ui-text-transform);
+        margin: 0;
+      }
+
+      > h1:first-child {
+        padding-right: calc(var(--spacer) * 3);
+      }
+
+      > .close {
+        position: absolute;
+        top: 0;
+        right: 0;
+        inline-size: calc(var(--spacer) * 2);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        border-radius: 0;
+        border-start-end-radius: var(--dialog-border-radius);
+
+        &:is(:hover, :active, :focus, .active) {
+          outline: none;
+        }
+      }
+
+      > section {
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        padding: var(--spacer);
+        display: grid;
+        gap: var(--spacer);
+      }
+
+      > footer {
+        display: flex;
+        gap: var(--spacer);
+        justify-content: safe flex-end;
+        padding: var(--spacer);
+        border-block-start: var(--border);
+        overflow-x: auto;
+
+        &:empty {
+          display: none;
+        }
+      }
+    }
+
     /* Entry/exit animations */
     opacity: 1;
     scale: 1;
@@ -173,7 +233,7 @@ onBeforeUnmount(() => {
     }
 
     &::backdrop {
-      background-color: var(--backdrop-background-color);
+      background-color: var(--backdrop-background);
       backdrop-filter: var(--blur);
       transition:
         background-color var(--speed) ease,
@@ -197,7 +257,7 @@ onBeforeUnmount(() => {
         position: fixed;
         inset: 0;
         z-index: var(--z-index-overlay);
-        background-color: var(--backdrop-background-color);
+        background-color: var(--backdrop-background);
         backdrop-filter: var(--blur);
         transition:
           background-color var(--speed) ease,
@@ -213,61 +273,6 @@ onBeforeUnmount(() => {
       outline: none;
     }
 
-    > h1:first-child,
-    > .close {
-      display: flex;
-      align-items: center;
-      block-size: calc(var(--spacer) * 2);
-      box-shadow: var(--border-shadow);
-      padding-inline-start: var(--spacer);
-      font-family: var(--font-family);
-      font-size: var(--ui-font-size);
-      text-transform: var(--ui-text-transform);
-      margin: 0;
-    }
-
-    > h1:first-child {
-      padding-right: calc(var(--spacer) * 3);
-    }
-
-    > .close {
-      position: absolute;
-      top: 0;
-      right: 0;
-      inline-size: calc(var(--spacer) * 2);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 0;
-      border-radius: 0;
-      border-start-end-radius: var(--border-radius);
-
-      &:is(:hover, :active, :focus, .active) {
-        outline: none;
-      }
-    }
-
-    > section {
-      overflow-y: auto;
-      overscroll-behavior: contain;
-      padding: var(--spacer);
-      display: grid;
-      gap: var(--spacer);
-    }
-
-    > footer {
-      display: flex;
-      gap: var(--spacer);
-      justify-content: safe flex-end;
-      padding: var(--spacer);
-      border-block-start: var(--border);
-      overflow-x: auto;
-
-      &:empty {
-        display: none;
-      }
-    }
-
     &.large {
       --dialog-width: min(90vw, 64rem);
     }

package/src/base/components/DropdownCheckboxItem.vue

@@ -7,7 +7,7 @@
     @select="(e: Event) => emit('select', e)"
   >
     <DropdownMenuItemIndicator class="dropdown-item-indicator">
-      <Icon type="check" />
+      <Icon name="check" />
     </DropdownMenuItemIndicator>
     <slot />
   </DropdownMenuCheckboxItem>

package/src/base/components/DropdownRadioItem.vue

@@ -7,7 +7,7 @@
     @select="(e: Event) => emit('select', e)"
   >
     <DropdownMenuItemIndicator class="dropdown-item-indicator">
-      <Icon type="check" />
+      <Icon name="check" />
     </DropdownMenuItemIndicator>
     <slot />
   </DropdownMenuRadioItem>

package/src/base/components/FormCheckbox.vue

@@ -8,7 +8,7 @@
       class="form-checkbox-button"
     >
       <CheckboxIndicator class="form-checkbox-indicator">
-        <Icon type="check" />
+        <Icon name="check" />
       </CheckboxIndicator>
     </CheckboxRoot>
     <span v-if="$slots.default"><slot /></span>

package/src/base/components/FormDatePicker.vue

@@ -46,7 +46,7 @@
       </DatePickerField>
 
       <DatePickerTrigger class="form-date-picker-trigger">
-        <Icon type="calendar" />
+        <Icon name="calendar" />
       </DatePickerTrigger>
     </DatePickerAnchor>
 
@@ -65,11 +65,11 @@
       >
         <DatePickerHeader class="form-date-picker-header">
           <DatePickerPrev class="form-date-picker-nav">
-            <Icon type="chevron-left" />
+            <Icon name="chevron-left" />
           </DatePickerPrev>
           <DatePickerHeading class="form-date-picker-heading" />
           <DatePickerNext class="form-date-picker-nav">
-            <Icon type="chevron-right" />
+            <Icon name="chevron-right" />
           </DatePickerNext>
         </DatePickerHeader>
 

package/src/base/components/FormItem.vue

@@ -65,24 +65,14 @@
       border-end-end-radius: var(--border-radius);
     }
 
-    &:has(> .prefix) {
+    &:has(> .prefix) :deep(> :last-child) {
       border-start-start-radius: 0;
       border-end-start-radius: 0;
-
-      & :deep(> :last-child) {
-        border-start-start-radius: 0;
-        border-end-start-radius: 0;
-      }
     }
 
-    &:has(> .suffix) {
+    &:has(> .suffix) :deep(> :first-child) {
       border-start-end-radius: 0;
       border-end-end-radius: 0;
-
-      & :deep(> :first-child) {
-        border-start-end-radius: 0;
-        border-end-end-radius: 0;
-      }
     }
   }
 }

package/src/base/components/FormSelect.vue

@@ -8,7 +8,7 @@
     <SelectTrigger class="form-select-trigger">
       <SelectValue :placeholder="placeholder" />
       <SelectIcon class="form-select-icon">
-        <Icon type="chevron-down" />
+        <Icon name="chevron-down" />
       </SelectIcon>
     </SelectTrigger>
 
@@ -27,7 +27,7 @@
           >
             <SelectItemText>{{ option[labelKey] }}</SelectItemText>
             <SelectItemIndicator class="form-select-indicator">
-              <Icon type="check" />
+              <Icon name="check" />
             </SelectItemIndicator>
           </SelectItem>
         </SelectViewport>

package/src/base/components/Icon.vue

@@ -11,11 +11,11 @@ import { computed, inject } from 'vue'
 import { Icon as IconifyIcon } from '@iconify/vue'
 import { IconAliasesKey, defaultIconAliases } from '../icons'
 
-const props = defineProps<{ type: string }>()
+const props = defineProps<{ name: string }>()
 
 const aliases = inject(IconAliasesKey, defaultIconAliases)
 
-const resolvedIcon = computed(() => aliases[props.type] || props.type)
+const resolvedIcon = computed(() => aliases[props.name] || props.name)
 </script>
 
 <style scoped>

package/src/base/components/Popover.vue

@@ -29,7 +29,7 @@
           class="popover-close tertiary"
           aria-label="Close"
         >
-          <Icon type="close" />
+          <Icon name="close" />
         </PopoverClose>
 
         <section>

package/src/base/components/Prose.vue

@@ -0,0 +1,14 @@
+<template>
+  <div
+    class="prose"
+    :class="{ centered }"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  centered?: boolean
+}>()
+</script>

package/src/base/components/Sidebar.vue

@@ -82,6 +82,7 @@ onMounted(() => {
     if (isLargeScreen.value) return
 
     const touch = e.touches[0]
+    if (!touch) return
     startX = touch.clientX
     startY = touch.clientY
     tracking = false
@@ -103,6 +104,7 @@ onMounted(() => {
     if (!tracking || isLargeScreen.value) return
 
     const touch = e.touches[0]
+    if (!touch) return
     const dx = touch.clientX - startX
     const dy = touch.clientY - startY
 

package/src/base/components/Tag.vue

@@ -7,7 +7,7 @@
       v-if="dismissable"
       @click="emit('dismiss')"
     >
-      <Icon type="close" />
+      <Icon name="close" />
     </Button>
   </span>
 </template>

package/src/base/components/Toasts.vue

@@ -25,7 +25,7 @@
         :as="Button"
         aria-label="Close"
       >
-        <Icon type="close" />
+        <Icon name="close" />
       </ToastClose>
 
       <section v-if="toast.description || toast.action || toast.progress">
@@ -129,7 +129,7 @@ const onClose = (id: string) => {
     max-inline-size: calc(100vw - var(--spacer) * 2);
     padding: 0;
     border: var(--border);
-    border-radius: var(--border-radius);
+    border-radius: var(--toast-border-radius);
     overflow: hidden;
     font-family: var(--font-family);
     font-size: var(--ui-font-size);
@@ -248,7 +248,7 @@ const onClose = (id: string) => {
       right: 0;
       box-shadow: var(--border-shadow) !important;
       border-radius: 0 !important;
-      border-start-end-radius: var(--border-radius) !important;
+      border-start-end-radius: var(--toast-border-radius) !important;
     }
 
     .actions {

package/src/base/icons.ts

@@ -14,9 +14,10 @@ export const defaultIconAliases: IconAliases = {
   close: 'lucide:x',
   copy: 'lucide:copy',
   edit: 'lucide:pencil',
-  help: 'lucide:circle-question-mark',
+  help: 'lucide:circle-help',
   home: 'lucide:house',
   link: 'lucide:link',
   loader: 'lucide:loader-2',
+  menu: 'lucide:menu',
   wallet: 'lucide:wallet',
 }

package/src/client-only.ts

@@ -0,0 +1,11 @@
+// Components that require browser APIs and must be rendered client-only
+export const clientOnlyComponents = [
+  'Combobox',
+  'ConfirmDialog',
+  'Dialog',
+  'Toasts',
+  'Popover',
+  'Dropdown',
+  'FormDatePicker',
+  'ColorPicker',
+]

package/src/index.ts

@@ -6,6 +6,7 @@ export { default as BottomNav } from './base/components/BottomNav.vue'
 export { default as Button } from './base/components/Button.vue'
 export { default as Calendar } from './base/components/Calendar.vue'
 export { default as Card } from './base/components/Card.vue'
+export { default as ColorPicker } from './base/components/ColorPicker.vue'
 export { default as Combobox } from './base/components/Combobox.vue'
 export { default as ConfirmDialog } from './base/components/ConfirmDialog.vue'
 export { default as CardLink } from './base/components/CardLink.vue'
@@ -30,12 +31,16 @@ export { default as FormItem } from './base/components/FormItem.vue'
 export { default as FormLabel } from './base/components/FormLabel.vue'
 export { default as FormRadioGroup } from './base/components/FormRadioGroup.vue'
 export { default as FormSelect } from './base/components/FormSelect.vue'
+export { default as FormSlider } from './base/components/FormSlider.vue'
+export { default as FormSwitch } from './base/components/FormSwitch.vue'
 export { default as FormTextarea } from './base/components/FormTextarea.vue'
 export { default as Icon } from './base/components/Icon.vue'
 export { default as Loading } from './base/components/Loading.vue'
 export { default as Opepicon } from './base/components/Opepicon.vue'
+export { default as PinInput } from './base/components/PinInput.vue'
 export { default as Popover } from './base/components/Popover.vue'
 export { default as Progress } from './base/components/Progress.vue'
+export { default as Prose } from './base/components/Prose.vue'
 export { default as Sidebar } from './base/components/Sidebar.vue'
 export { default as Tag } from './base/components/Tag.vue'
 export { default as Tags } from './base/components/Tags.vue'
@@ -84,3 +89,5 @@ export type { DateValue } from '@internationalized/date'
 export { IconAliasesKey, defaultIconAliases } from './base/icons'
 export type { IconAliases } from './base/icons'
 export { LinkComponentKey } from './base/link'
+
+export { clientOnlyComponents } from './client-only'