@1001-digital/components 1.5.0 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1001-digital/components",
-  "version": "1.5.0",
+  "version": "2.0.1",
   "type": "module",
   "main": "./src/index.ts",
   "sideEffects": [
@@ -15,7 +15,7 @@
   ],
   "peerDependencies": {
     "vue": "^3.5.0",
-    "@1001-digital/styles": "^1.3.0"
+    "@1001-digital/styles": "^2.0.0"
   },
   "dependencies": {
     "@iconify/vue": "^5.0.0",

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

@@ -39,23 +39,22 @@ const sidebarOpen = defineModel<boolean>('sidebarOpen', { default: false })
 
 <style>
 @layer components {
-  html:has(.app-shell) {
-    scrollbar-gutter: auto;
-    overflow: hidden;
-    height: 100dvh;
-  }
-
   .app-shell {
     display: flex;
-    block-size: 100dvh;
-    overflow: hidden;
+    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;
-    overflow-y: auto;
-    overscroll-behavior-y: contain;
     padding-block-start: env(safe-area-inset-top);
 
     &:has(+ nav.bottom-nav) {

package/src/base/components/BottomNav.vue

@@ -6,7 +6,7 @@
   </nav>
 </template>
 
-<style>
+<style scoped>
 @layer components {
   .bottom-nav {
     position: fixed;

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>
@@ -104,7 +104,7 @@ const resolveDisplayValue = (val: any) => {
 }
 </script>
 
-<style>
+<style scoped>
 @layer components {
   .combobox-root {
     inline-size: 100%;

package/src/base/components/Dialog.vue

@@ -25,7 +25,7 @@
             @pointerdown="open = false"
             @click="open = false"
           >
-            <Icon type="close" />
+            <Icon name="close" />
           </button>
 
           <section>
@@ -233,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,
@@ -257,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,

package/src/base/components/Dropdown.vue

@@ -71,7 +71,7 @@ const props = withDefaults(
 const open = defineModel<boolean>('open', { required: true })
 </script>
 
-<style>
+<style scoped>
 @layer components {
   .dropdown {
     background: var(--dropdown-background);

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>
 
@@ -187,7 +187,7 @@ const open = defineModel<boolean>('open')
 const placeholderValue = ref(props.placeholder) as ReturnType<typeof ref<DateValue | undefined>>
 </script>
 
-<style>
+<style scoped>
 @layer components {
   .form-date-picker-anchor {
     display: inline-flex;

package/src/base/components/FormItem.vue

@@ -20,7 +20,6 @@
 @layer components {
   .form-item {
     border-radius: var(--border-radius);
-    overflow: hidden;
     display: flex;
     align-items: center;
     background: var(--background);

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/Sidebar.vue

@@ -25,7 +25,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, watch, watchEffect, onMounted, onBeforeUnmount } from 'vue'
+import {
+  ref,
+  reactive,
+  computed,
+  watch,
+  watchEffect,
+  onMounted,
+  onBeforeUnmount,
+} from 'vue'
 import { useMediaQuery, useScrollLock, useElementSize } from '@vueuse/core'
 
 const open = defineModel<boolean>('open', { default: false })
@@ -206,7 +214,7 @@ defineExpose({
 })
 </script>
 
-<style>
+<style scoped>
 @layer components {
   .sidebar {
     position: fixed;

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">

package/src/base/components/Tooltip.vue

@@ -64,7 +64,7 @@ const props = withDefaults(
 )
 </script>
 
-<style>
+<style scoped>
 @layer components {
   .tooltip {
     background: var(--tooltip-background);

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

@@ -7,4 +7,5 @@ export const clientOnlyComponents = [
   '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,10 +31,13 @@ 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'