@1001-digital/components 0.0.1

package/src/base/components/FormCheckbox.vue

@@ -0,0 +1,92 @@
+<template>
+  <label class="form-checkbox">
+    <CheckboxRoot
+      v-model="model"
+      :disabled="disabled"
+      :name="name"
+      :value="value"
+      class="form-checkbox-button"
+    >
+      <CheckboxIndicator class="form-checkbox-indicator">
+        <Icon type="check" />
+      </CheckboxIndicator>
+    </CheckboxRoot>
+    <span v-if="$slots.default"><slot /></span>
+  </label>
+</template>
+
+<script setup lang="ts">
+import { CheckboxIndicator, CheckboxRoot } from 'reka-ui'
+import Icon from './Icon.vue'
+
+const model = defineModel<boolean | 'indeterminate'>()
+
+defineProps({
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  name: {
+    type: String,
+    default: undefined,
+  },
+  value: {
+    type: String,
+    default: 'on',
+  },
+})
+</script>
+
+<style scoped>
+.form-checkbox {
+  display: flex;
+  align-items: center;
+  gap: var(--size-2);
+  cursor: pointer;
+  user-select: none;
+
+  &:hover .form-checkbox-button {
+    border-color: var(--primary);
+  }
+}
+
+.form-checkbox-button {
+  all: unset;
+  inline-size: var(--size-4);
+  block-size: var(--size-4);
+  border-radius: calc(var(--border-radius) / 2);
+  border: 2px solid var(--muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--speed);
+  flex-shrink: 0;
+
+  &[data-state='checked'],
+  &[data-state='indeterminate'] {
+    border-color: var(--primary);
+    background: var(--primary);
+  }
+
+  &[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: 2px;
+  }
+}
+
+.form-checkbox-indicator {
+  color: var(--background);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .icon {
+    font-size: var(--font-xs);
+  }
+}
+</style>

package/src/base/components/FormGroup.vue

@@ -0,0 +1,39 @@
+<template>
+  <div
+    class="form-group"
+    :class="{ radio }"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  radio?: boolean
+}>()
+</script>
+
+<style scoped>
+.form-group {
+  display: grid;
+  gap: var(--spacer-sm);
+
+  &.radio {
+    display: flex;
+    gap: var(--spacer-sm);
+
+    & :deep(input) {
+      inline-size: min-content;
+
+      &:not(:first-of-type) {
+        margin-inline-start: var(--spacer-sm);
+      }
+    }
+
+    & :deep(label),
+    & :deep(input) {
+      display: inline;
+    }
+  }
+}
+</style>

package/src/base/components/FormInputGroup.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="input-group">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.input-group {
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  & :deep(input + .icon) {
+    position: absolute;
+    inset-inline-end: var(--ui-padding-inline);
+    inline-size: var(--size-4);
+    color: var(--muted);
+    z-index: 2;
+  }
+
+  & :deep(input:has(+ .icon)) {
+    padding-inline-end: calc(var(--ui-padding-inline) + var(--spacer-sm));
+
+    &:is(:hover, :active, :focus, .active) + .icon {
+      color: var(--gray-z-6);
+    }
+  }
+
+  & :deep(input),
+  & :deep(button),
+  & :deep(.button),
+  & :deep(a) {
+    z-index: 1;
+
+    &:has(+ input),
+    &:has(+ button),
+    &:has(+ a) {
+      border-start-end-radius: 0 !important;
+      border-end-end-radius: 0 !important;
+    }
+
+    + input,
+    + button,
+    + a {
+      margin-inline-start: calc(-1 * var(--border-width));
+      border-start-start-radius: 0 !important;
+      border-end-start-radius: 0 !important;
+    }
+
+    &:is(:hover, :active, :focus, .active) {
+      z-index: 2;
+    }
+  }
+}
+</style>

package/src/base/components/FormItem.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="form-item">
+    <span
+      v-if="$slots.prefix"
+      class="prefix"
+    >
+      <slot name="prefix" />
+    </span>
+    <slot />
+    <span
+      v-if="$slots.suffix"
+      class="suffix"
+    >
+      <slot name="suffix" />
+    </span>
+  </div>
+</template>
+
+<style scoped>
+@layer components {
+  .form-item {
+    border-radius: var(--border-radius);
+    display: flex;
+    align-items: center;
+    background: var(--background);
+    transition:
+      background-color var(--speed),
+      border-color var(--speed);
+    inline-size: 100%;
+    max-inline-size: -webkit-fill-available;
+
+    &:has(input:hover),
+    &:has(input:focus) {
+      background: var(--button-background-highlight);
+      border-color: var(--button-border-color-highlight);
+
+      .prefix,
+      .suffix {
+        background: var(--button-background-highlight);
+        box-shadow: var(--border-shadow-highlight);
+      }
+    }
+
+    .prefix,
+    .suffix {
+      padding: 0 var(--ui-padding-inline);
+      color: var(--muted);
+      background: var(--button-background);
+      transition: all var(--speed);
+      block-size: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: var(--border-shadow);
+      width: min-content;
+    }
+
+    .prefix {
+      border-start-start-radius: var(--border-radius);
+      border-end-start-radius: var(--border-radius);
+    }
+
+    .suffix {
+      border-start-end-radius: var(--border-radius);
+      border-end-end-radius: var(--border-radius);
+    }
+
+    &:has(> .prefix) {
+      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) {
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+
+      & :deep(> :first-child) {
+        border-start-end-radius: 0;
+        border-end-end-radius: 0;
+      }
+    }
+  }
+}
+</style>

package/src/base/components/FormLabel.vue

@@ -0,0 +1,39 @@
+<template>
+  <label class="form-label">
+    <span v-if="label">{{ label }}</span>
+    <slot />
+  </label>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  label?: string
+}>()
+</script>
+
+<style scoped>
+.form-label {
+  font-family: var(--font-family);
+  font-size: var(--ui-font-size);
+  font-weight: var(--ui-font-weight);
+  text-transform: var(--ui-text-transform);
+  letter-spacing: var(--ui-letter-spacing);
+  line-height: var(--ui-line-height);
+  color: var(--ui-color);
+  transition: all var(--speed);
+  display: grid;
+  gap: var(--size-2);
+
+  &:hover {
+    color: var(--color);
+  }
+
+  & :deep(a) {
+    text-decoration: underline;
+  }
+
+  > span:first-child {
+    display: block;
+  }
+}
+</style>

package/src/base/components/FormRadioGroup.vue

@@ -0,0 +1,118 @@
+<template>
+  <RadioGroupRoot
+    v-model="model"
+    :disabled="disabled"
+    :name="name"
+    :orientation="orientation"
+    class="form-radio-group"
+  >
+    <label
+      v-for="option in options"
+      :key="option[valueKey]"
+      class="form-radio-item"
+    >
+      <RadioGroupItem
+        :value="option[valueKey]"
+        class="form-radio-button"
+      >
+        <RadioGroupIndicator class="form-radio-indicator" />
+      </RadioGroupItem>
+      <span>{{ option[labelKey] }}</span>
+    </label>
+  </RadioGroupRoot>
+</template>
+
+<script setup lang="ts">
+import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from 'reka-ui'
+
+const model = defineModel<string>()
+
+defineProps({
+  options: {
+    type: Array as () => Record<string, any>[],
+    default: () => [],
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  orientation: {
+    type: String as () => 'horizontal' | 'vertical',
+    default: 'horizontal',
+  },
+  valueKey: {
+    type: String,
+    default: 'value',
+  },
+  labelKey: {
+    type: String,
+    default: 'label',
+  },
+  name: {
+    type: String,
+    default: undefined,
+  },
+})
+</script>
+
+<style scoped>
+.form-radio-group {
+  display: flex;
+  gap: var(--spacer);
+
+  &[data-orientation='vertical'] {
+    flex-direction: column;
+    gap: var(--spacer-sm);
+  }
+
+  &[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.form-radio-item {
+  display: flex;
+  align-items: center;
+  gap: var(--size-2);
+  cursor: pointer;
+  user-select: none;
+
+  &:hover .form-radio-button {
+    border-color: var(--primary);
+  }
+}
+
+.form-radio-button {
+  all: unset;
+  inline-size: var(--size-4);
+  block-size: var(--size-4);
+  border-radius: 50%;
+  border: 2px solid var(--muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: border-color var(--speed);
+  flex-shrink: 0;
+
+  &[data-state='checked'] {
+    border-color: var(--primary);
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: 2px;
+  }
+}
+
+.form-radio-indicator {
+  inline-size: var(--size-2);
+  block-size: var(--size-2);
+  border-radius: 50%;
+  background: var(--primary);
+}
+</style>

package/src/base/components/FormSelect.vue

@@ -0,0 +1,160 @@
+<template>
+  <SelectRoot
+    v-model="model"
+    :multiple="multiple"
+    :disabled="disabled"
+    :name="name"
+  >
+    <SelectTrigger class="form-select-trigger">
+      <SelectValue :placeholder="placeholder" />
+      <SelectIcon class="form-select-icon">
+        <Icon type="chevron-down" />
+      </SelectIcon>
+    </SelectTrigger>
+
+    <SelectPortal>
+      <SelectContent
+        position="popper"
+        :side-offset="4"
+        class="form-select-content"
+      >
+        <SelectViewport class="form-select-viewport">
+          <SelectItem
+            v-for="option in options"
+            :key="option[valueKey]"
+            :value="option[valueKey]"
+            class="form-select-item"
+          >
+            <SelectItemText>{{ option[labelKey] }}</SelectItemText>
+            <SelectItemIndicator class="form-select-indicator">
+              <Icon type="check" />
+            </SelectItemIndicator>
+          </SelectItem>
+        </SelectViewport>
+      </SelectContent>
+    </SelectPortal>
+  </SelectRoot>
+</template>
+
+<script setup lang="ts">
+import {
+  SelectContent,
+  SelectIcon,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectPortal,
+  SelectRoot,
+  SelectTrigger,
+  SelectValue,
+  SelectViewport,
+} from 'reka-ui'
+import Icon from './Icon.vue'
+
+const model = defineModel<string | string[]>()
+
+defineProps({
+  options: {
+    type: Array as () => Record<string, any>[],
+    default: () => [],
+  },
+  placeholder: {
+    type: String,
+    default: 'Select...',
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  valueKey: {
+    type: String,
+    default: 'value',
+  },
+  labelKey: {
+    type: String,
+    default: 'label',
+  },
+  name: {
+    type: String,
+    default: undefined,
+  },
+})
+</script>
+
+<style scoped>
+.form-select-trigger {
+  background: var(--background);
+  color: var(--color);
+  inline-size: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--size-2);
+  cursor: pointer;
+
+  &[data-placeholder] {
+    color: var(--muted);
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+
+.form-select-icon {
+  color: var(--muted);
+  transition: transform var(--speed);
+
+  [data-state='open'] > & {
+    transform: rotate(180deg);
+  }
+}
+
+:global(.form-select-content) {
+  background: var(--background);
+  border: var(--border);
+  border-radius: var(--border-radius);
+  box-shadow: var(--shadow-lg);
+  z-index: var(--z-index-dropdown);
+  min-width: var(--reka-select-trigger-width);
+  max-height: var(--reka-select-content-available-height);
+  overflow: hidden;
+}
+
+:global(.form-select-viewport) {
+  padding: var(--size-1);
+}
+
+:global(.form-select-item) {
+  padding: var(--size-2) var(--size-3);
+  border-radius: calc(var(--border-radius) / 2);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--size-2);
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+
+  &[data-highlighted] {
+    background: var(--button-background-highlight);
+  }
+
+  &[data-state='checked'] {
+    font-weight: 500;
+  }
+
+  &[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+:global(.form-select-indicator) {
+  color: var(--accent);
+}
+</style>

package/src/base/components/FormTextarea.vue

@@ -0,0 +1,38 @@
+<template>
+  <textarea
+    ref="textarea"
+    v-model="model"
+    :rows="rows"
+    v-bind="$attrs"
+    @input="resize"
+  />
+</template>
+
+<script setup lang="ts">
+import { useTemplateRef, onMounted } from 'vue'
+
+const model = defineModel<string>()
+
+const { rows = 4 } = defineProps<{
+  rows?: number
+}>()
+
+const textarea = useTemplateRef('textarea')
+
+function resize() {
+  const el = textarea.value
+  if (!el) return
+  el.style.height = 'auto'
+  el.style.height = `${el.scrollHeight}px`
+}
+
+onMounted(resize)
+</script>
+
+<style scoped>
+textarea {
+  resize: none;
+  block-size: auto;
+  overflow: hidden;
+}
+</style>

package/src/base/components/Icon.vue

@@ -0,0 +1,29 @@
+<template>
+  <IconifyIcon
+    v-if="resolvedIcon"
+    :icon="resolvedIcon"
+    class="icon"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+import { Icon as IconifyIcon } from '@iconify/vue'
+import { IconAliasesKey, defaultIconAliases } from '../icons'
+
+const props = defineProps<{ type: string }>()
+
+const aliases = inject(IconAliasesKey, defaultIconAliases)
+
+const resolvedIcon = computed(() => aliases[props.type] || props.type)
+</script>
+
+<style scoped>
+.icon {
+  display: inline-flex;
+  width: 1em;
+  height: 1em;
+  align-items: center;
+  justify-content: center;
+}
+</style>