orio-ui 0.1.0

package/src/runtime/components/CheckBox.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+const modelValue = defineModel<boolean>({ required: false });
+
+defineProps<{
+  checkedIcon?: string; // optional: pass icon name for checked state
+  uncheckedIcon?: string; // optional: pass icon name for unchecked state
+}>();
+</script>
+
+<template>
+  <orio-control-element class="checkbox">
+    <label class="checkbox-label">
+      <input
+        v-model="modelValue"
+        type="checkbox"
+        class="checkbox-input"
+        tabindex="-1"
+      />
+      <span
+        class="checkbox-box"
+        :class="{
+          defaultChecked: !checkedIcon,
+          defaultUnchecked: !uncheckedIcon,
+        }"
+      >
+        <slot name="icon" :checked="modelValue">
+          <orio-icon v-if="modelValue && checkedIcon" :name="checkedIcon" />
+          <orio-icon
+            v-else-if="!modelValue && uncheckedIcon"
+            :name="uncheckedIcon"
+          />
+        </slot>
+      </span>
+      <slot />
+    </label>
+  </orio-control-element>
+</template>
+
+<style lang="scss" scoped>
+.checkbox {
+  --box-size: 1rem;
+
+  &-label {
+    position: relative;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    cursor: pointer;
+    font-size: 0.9rem;
+    color: var(--color-text);
+  }
+
+  &-input {
+    position: absolute;
+    inset: 0;
+    width: var(--box-size);
+    height: 1rem;
+    margin: 0;
+    opacity: 0;
+  }
+
+  &-box {
+    width: var(--box-size);
+    height: var(--box-size);
+    border: 2px solid var(--color-border);
+    border-radius: 4px;
+    background-color: var(--color-bg);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition:
+      background-color 0.2s ease,
+      border-color 0.2s ease;
+  }
+
+  .checkbox-input:checked + .checkbox-box {
+    background-color: var(--color-accent);
+    border-color: var(--color-accent);
+  }
+
+  .checkbox-input:checked + .checkbox-box.defaultChecked {
+    &::after {
+      content: '';
+      width: 0.3rem;
+      height: 0.6rem;
+      position: relative;
+      bottom: 0.1rem;
+      border: solid var(--color-accent-ink);
+      border-width: 0 2px 2px 0;
+      transform: rotate(45deg);
+    }
+  }
+
+  &-label:hover .checkbox-box {
+    border-color: var(--color-accent);
+  }
+  .checkbox-input:focus-visible + .checkbox-box {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+  }
+}
+</style>

package/src/runtime/components/ControlElement.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+export interface ControlProps {
+  /**
+   * Minimal will reset margin and remove border and box shadow from every element inside the slot
+   */
+  appearance?: "normal" | "minimal";
+}
+
+withDefaults(defineProps<ControlProps>(), {
+  appearance: "normal",
+});
+</script>
+
+<template>
+  <div class="control" :class="[appearance]">
+    <label v-if="$attrs.label" class="control-label">{{ $attrs.label }}</label>
+    <div class="slot-wrapper" v-bind="$attrs">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.control {
+  margin: 0.5rem;
+
+  .control-label {
+    user-select: none;
+  }
+
+  &.minimal {
+    margin: 0;
+
+    .slot-wrapper :first-child {
+      border: 0;
+      &:focus {
+        box-shadow: none;
+      }
+    }
+  }
+}
+</style>

package/src/runtime/components/DashedContainer.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  icon?: string;
+  text?: string;
+  size?: 'small' | 'medium' | 'large';
+}
+const props = withDefaults(defineProps<Props>(), {
+  size: 'medium',
+});
+defineEmits(['click']);
+
+const iconSize = computed(() => {
+  switch (props.size) {
+    case 'small':
+      return '2rem';
+    case 'large':
+      return '5rem';
+    default:
+      return '3rem';
+  }
+});
+</script>
+<template>
+  <div class="dashed-container gradient-hover" @click="$emit('click')">
+    <orio-icon
+      v-if="icon"
+      :name="icon"
+      class="icon-class"
+      :size="iconSize"
+    />
+    <span v-if="text" class="text-class" :size>{{ text }}</span>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.dashed-container {
+  cursor: pointer;
+  border: 3px dashed var(--color-border);
+  border-radius: 4px;
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  &:hover {
+    .text-class {
+      color: var(--color-accent-hover);
+    }
+  }
+}
+.icon-class {
+  color: var(--color-muted);
+}
+.text-class {
+  color: var(--color-accent);
+}
+</style>

package/src/runtime/components/DatePicker.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { nanoid } from 'nanoid';
+
+interface Props {
+  month?: boolean;
+}
+defineProps<Props>();
+
+const date = defineModel<string | null | undefined>('date', {
+  required: true,
+});
+
+const randomName = computed(() => `date-${nanoid(8)}`);
+</script>
+
+<template>
+  <orio-control-element class="date-picker" v-bind="$attrs">
+    <input
+      v-model="date"
+      :type="month ? 'month' : 'date'"
+      class="date-input"
+      :name="randomName"
+    />
+  </orio-control-element>
+</template>
+
+<style scoped>
+.date-picker * {
+  width: 100%;
+  cursor: pointer;
+}
+
+.date-picker-label {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  font-size: 0.9rem;
+  color: var(--color-text);
+}
+
+.date-input {
+  /* border-box allows correct sizing for input */
+  box-sizing: border-box;
+  appearance: none;
+  background-color: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  padding: 0.4rem 0.6rem;
+  color: var(--color-text);
+  font-size: 0.95rem;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+/* Hover + focus */
+.date-input:hover {
+  border-color: var(--color-accent);
+}
+.date-input:focus {
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 2px var(--color-accent-soft);
+  outline: none;
+}
+
+/* Disabled */
+.date-input:disabled {
+  background-color: var(--color-surface);
+  color: var(--color-muted);
+  cursor: not-allowed;
+}
+
+/* Calendar icon (WebKit browsers like Chrome/Safari) */
+.date-input::-webkit-calendar-picker-indicator {
+  cursor: pointer;
+  filter: invert(36%) sepia(65%) saturate(325%) hue-rotate(180deg);
+  opacity: 0.7;
+  transition: opacity 0.2s ease;
+}
+.date-input::-webkit-calendar-picker-indicator:hover {
+  opacity: 1;
+}
+</style>

package/src/runtime/components/DateRangePicker.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue';
+import type { ResumeDate } from './view/Dates.vue';
+
+export interface DateRangePickerProps {
+  month?: boolean;
+}
+
+defineProps<DateRangePickerProps>();
+
+const dates = defineModel<ResumeDate>('dates', { required: true });
+
+const present = ref(dates.value.endDate !== '' && !dates.value.endDate);
+
+watch(present, (value) => {
+  if (value) {
+    dates.value.endDate = null; // Set end date to null when present is checked
+  } else {
+    dates.value.endDate = ''; // Reset end date when present is unchecked
+  }
+});
+
+const dateIsCorrect = computed(() => {
+  // Ensure that the start date is before the end date
+  if (dates.value.startDate && dates.value.endDate) {
+    return new Date(dates.value.startDate) <= new Date(dates.value.endDate);
+  }
+  return true; // If one of the dates is empty, consider it correct
+});
+
+defineExpose({ dateIsCorrect });
+</script>
+
+<template>
+  <div>
+    <orio-control-element>
+      <div class="date-range-picker">
+        <orio-date-picker v-model:date="dates.startDate" :month />
+        <orio-date-picker v-model:date="dates.endDate" :month />
+        <orio-check-box v-model="present"> Present </orio-check-box>
+      </div>
+    </orio-control-element>
+    <div v-if="!dateIsCorrect" class="error-message">
+      <p>Start date must be before end date.</p>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.date-range-picker {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+
+  & > * {
+    min-width: 0;
+  }
+
+  .date-picker {
+    margin-inline: 0;
+  }
+  .date-picker:first-child {
+    margin-inline-end: 0.5rem;
+  }
+  .checkbox {
+    margin-inline-start: 0.25rem;
+  }
+}
+.error-message {
+  color: red;
+  font-size: 0.875rem;
+  margin-top: 0.5rem;
+}
+</style>

package/src/runtime/components/EmptyState.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+interface Props {
+  icon?: string;
+  title: string;
+  description?: string;
+  size?: 'small' | 'medium' | 'large';
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'medium',
+});
+</script>
+
+<template>
+  <div class="empty-state" :class="size">
+    <orio-icon v-if="icon" :name="icon" class="empty-state-icon" />
+    <orio-view-text
+      type="title"
+      :size="size === 'large' ? 'medium' : 'small'"
+      class="empty-state-title"
+    >
+      {{ title }}
+    </orio-view-text>
+    <orio-view-text
+      v-if="description"
+      type="subtitle"
+      class="empty-state-description"
+    >
+      {{ description }}
+    </orio-view-text>
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 0.5rem;
+  padding: 2rem;
+  color: var(--color-text-secondary);
+
+  &.small {
+    padding: 1rem;
+    gap: 0.25rem;
+
+    .empty-state-icon {
+      font-size: 2rem;
+    }
+  }
+
+  &.medium {
+    padding: 2rem;
+    gap: 0.5rem;
+
+    .empty-state-icon {
+      font-size: 3rem;
+    }
+  }
+
+  &.large {
+    padding: 3rem;
+    gap: 1rem;
+
+    .empty-state-icon {
+      font-size: 4rem;
+    }
+  }
+}
+
+.empty-state-icon {
+  color: var(--color-text-tertiary);
+  opacity: 0.5;
+}
+
+.empty-state-title {
+  color: var(--color-text-secondary);
+}
+
+.empty-state-description {
+  color: var(--color-text-tertiary);
+  max-width: 30ch;
+}
+</style>

package/src/runtime/components/Icon.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { iconRegistry, type IconName } from '../utils/icon-registry'
+
+export interface IconProps {
+  name: IconName | string
+  size?: string | number
+  color?: string
+}
+
+const props = withDefaults(defineProps<IconProps>(), {
+  size: '1em',
+  color: 'currentColor'
+})
+
+const iconSvg = computed(() => iconRegistry[props.name] || '')
+const sizeValue = computed(() =>
+  typeof props.size === 'number' ? `${props.size}px` : props.size
+)
+</script>
+
+<template>
+  <span
+    class="orio-icon"
+    :style="{
+      width: sizeValue,
+      height: sizeValue,
+      color: color,
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexShrink: 0
+    }"
+    v-html="iconSvg"
+  />
+</template>
+
+<style scoped>
+.orio-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.orio-icon :deep(svg) {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}
+</style>

package/src/runtime/components/Input.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+defineEmits<{
+  (e: 'input', value: string): void;
+}>();
+
+const text = defineModel<string>({ default: '' });
+</script>
+
+<template>
+  <orio-control-element v-bind="$attrs">
+    <input
+      v-bind="$attrs"
+      v-model="text"
+      type="text"
+      class="text-input"
+    >
+  </orio-control-element>
+</template>
+
+<style lang="scss" scoped>
+.text-input {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  font-size: 1rem;
+  color: var(--color-text);
+  background-color: var(--color-bg);
+  box-sizing: border-box;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+
+  &::placeholder {
+    color: var(--color-muted);
+  }
+
+  &:hover {
+    border-color: var(--color-accent);
+  }
+
+  &:focus {
+    border-color: var(--color-accent);
+    box-shadow: 0 0 0 2px var(--color-accent-soft);
+    outline: none;
+  }
+
+  &:disabled {
+    background-color: var(--color-surface);
+    color: var(--color-muted);
+    cursor: not-allowed;
+  }
+}
+</style>

package/src/runtime/components/LoadingSpinner.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+// Loading spinner using the bundled loading-loop icon
+</script>
+<template>
+  <orio-icon name="loading-loop" />
+</template>

package/src/runtime/components/Modal.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { ref, nextTick, watch } from 'vue';
+import { useWindowSize, useTimeoutFn } from '@vueuse/core';
+
+export interface OriginRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+const props = defineProps<{
+  origin: OriginRect | null;
+}>();
+
+const show = defineModel<Boolean>('show');
+
+const wrapper = ref<HTMLDivElement | null>(null);
+
+const { width: windowWidth, height: windowHeight } = useWindowSize();
+
+function animateToCenter(el: HTMLDivElement) {
+  useTimeoutFn(() => {
+    requestAnimationFrame(() => {
+      el.style.transform = 'translate(0, 0) scale(1)';
+      el.style.opacity = '1';
+    });
+  }, 100);
+}
+
+async function animateOpen() {
+  await nextTick();
+
+  const el = wrapper.value;
+  if (!el) return;
+  if (!props.origin) {
+    animateToCenter(el);
+    return;
+  }
+
+  const { x, y, width, height } = props.origin;
+
+  el.style.transform = `
+        translate(${x - windowWidth.value / 2}px, ${y - windowHeight.value / 2}px)
+        scale(${width / el.offsetWidth}, ${height / el.offsetHeight})
+      `;
+  el.style.opacity = '0.5';
+
+  animateToCenter(el);
+}
+
+watch(show, (open) => {
+  if (open) animateOpen();
+});
+</script>
+
+<template>
+  <transition name="overlay-fade">
+    <div v-if="show" class="overlay" @click.self="show = false">
+      <div ref="wrapper" class="modal">
+        <slot />
+      </div>
+    </div>
+  </transition>
+</template>
+
+<style scoped>
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  backdrop-filter: blur(6px);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  transition: opacity 0.25s ease;
+}
+
+.modal {
+  position: absolute;
+
+  width: 380px;
+  max-width: 90vw;
+  max-height: 90vh;
+
+  background: white;
+  border-radius: 1rem;
+  padding: 24px;
+
+  transform-origin: top left;
+  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
+
+  transition:
+    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
+    opacity 0.3s ease;
+
+  color: var(--color-muted);
+  opacity: 0;
+}
+
+.overlay-fade-enter-from,
+.overlay-fade-leave-to {
+  opacity: 0;
+}
+.overlay-fade-enter-active,
+.overlay-fade-leave-active {
+  transition: opacity 0.25s ease;
+}
+</style>