orio-ui 0.1.0 → 1.0.1

package/dist/runtime/components/Button.vue

@@ -1,102 +0,0 @@
-<script setup lang="ts">
-import { computed, toRefs, useAttrs, useSlots } from 'vue';
-
-interface Props {
-  type?: 'primary' | 'secondary' | 'subdued';
-  icon?: string;
-  loading?: boolean;
-  disabled?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  type: 'primary',
-});
-
-const { loading, disabled } = toRefs(props);
-
-const attrs = useAttrs();
-const slots = useSlots();
-
-const isIconOnly = computed(() => {
-  const hasIcon = !!props.icon || !!slots.icon;
-  const hasDefault = !!slots.default;
-  return hasIcon && !hasDefault;
-});
-
-const emit = defineEmits<{
-  (e: 'click', event: PointerEvent): void;
-}>();
-
-function click(event: PointerEvent) {
-  if (loading.value || disabled.value) return;
-  emit('click', event);
-}
-</script>
-
-<template>
-  <orio-control-element>
-    <button
-      v-bind="attrs"
-      :class="[type, 'gradient-hover', { 'icon-only': isIconOnly }]"
-      @click="click"
-    >
-      <orio-loading-spinner v-if="loading" />
-      <slot v-else name="icon">
-        <orio-icon v-if="icon" :name="icon" />
-      </slot>
-      <slot />
-    </button>
-  </orio-control-element>
-</template>
-
-<style scoped>
-button {
-  background-color: var(--color-accent);
-  color: var(--color-accent-ink);
-  border: 1px solid transparent;
-  border-radius: 4px;
-  padding: 8px 16px;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  user-select: none;
-}
-button.icon-only {
-  padding: 0;
-  border-radius: 50%;
-}
-button:disabled {
-  background-color: var(--color-accent-soft);
-  color: var(--color-muted);
-  border-color: var(--color-accent-border);
-  cursor: not-allowed;
-}
-button:active {
-  border: 1px solid var(--color-accent-border);
-}
-button.primary {
-  --gh-color: var(--color-accent);
-}
-button.secondary {
-  background-color: transparent;
-  border: 1px solid var(--color-accent);
-  color: var(--color-accent);
-}
-button.secondary:hover {
-  color: var(--color-accent-hover);
-}
-button.subdued {
-  background-color: transparent;
-  color: var(--color-accent);
-}
-button.subdued:hover {
-  color: var(--color-accent-hover);
-}
-button:active {
-  border-color: var(--color-accent-border) !important;
-}
-button:hover {
-  color: var(--color-accent-ink);
-}
-</style>

package/dist/runtime/components/CheckBox.vue

@@ -1,93 +0,0 @@
-<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 scoped>
-.checkbox {
-  --box-size: 1rem;
-}
-.checkbox-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);
-}
-.checkbox-input {
-  position: absolute;
-  inset: 0;
-  width: var(--box-size);
-  height: 1rem;
-  margin: 0;
-  opacity: 0;
-}
-.checkbox-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 .checkbox-input:checked + .checkbox-box {
-  background-color: var(--color-accent);
-  border-color: var(--color-accent);
-}
-.checkbox .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);
-}
-.checkbox-label:hover .checkbox-box {
-  border-color: var(--color-accent);
-}
-.checkbox .checkbox-input:focus-visible + .checkbox-box {
-  outline: 2px solid var(--color-accent);
-  outline-offset: 2px;
-}
-</style>

package/dist/runtime/components/ControlElement.vue

@@ -1,39 +0,0 @@
-<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 scoped>
-.control {
-  margin: 0.5rem;
-}
-.control .control-label {
-  user-select: none;
-}
-.control.minimal {
-  margin: 0;
-}
-.control.minimal .slot-wrapper :first-child {
-  border: 0;
-}
-.control.minimal .slot-wrapper :first-child:focus {
-  box-shadow: none;
-}
-</style>

package/dist/runtime/components/DashedContainer.vue

@@ -1,59 +0,0 @@
-<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>
-.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;
-}
-.dashed-container:hover .text-class {
-  color: var(--color-accent-hover);
-}
-
-.icon-class {
-  color: var(--color-muted);
-}
-
-.text-class {
-  color: var(--color-accent);
-}
-</style>

package/dist/runtime/components/DatePicker.vue

@@ -1,30 +0,0 @@
-<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 *{cursor:pointer;width:100%}.date-picker-label{color:var(--color-text);display:inline-flex;flex-direction:column;font-size:.9rem;gap:.25rem}.date-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:4px;box-sizing:border-box;color:var(--color-text);font-size:.95rem;padding:.4rem .6rem;transition:border-color .2s ease,box-shadow .2s ease}.date-input:focus,.date-input:hover{border-color:var(--color-accent)}.date-input:focus{box-shadow:0 0 0 2px var(--color-accent-soft);outline:none}.date-input:disabled{background-color:var(--color-surface);color:var(--color-muted);cursor:not-allowed}.date-input::-webkit-calendar-picker-indicator{cursor:pointer;filter:invert(36%) sepia(65%) saturate(325%) hue-rotate(180deg);opacity:.7;-webkit-transition:opacity .2s ease;transition:opacity .2s ease}.date-input::-webkit-calendar-picker-indicator:hover{opacity:1}
-</style>

package/dist/runtime/components/DateRangePicker.vue

@@ -1,73 +0,0 @@
-<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 scoped>
-.date-range-picker {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-}
-.date-range-picker > * {
-  min-width: 0;
-}
-.date-range-picker .date-picker {
-  margin-inline: 0;
-}
-.date-range-picker .date-picker:first-child {
-  margin-inline-end: 0.5rem;
-}
-.date-range-picker .checkbox {
-  margin-inline-start: 0.25rem;
-}
-
-.error-message {
-  color: red;
-  font-size: 0.875rem;
-  margin-top: 0.5rem;
-}
-</style>

package/dist/runtime/components/EmptyState.vue

@@ -1,81 +0,0 @@
-<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>
-.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);
-}
-.empty-state.small {
-  padding: 1rem;
-  gap: 0.25rem;
-}
-.empty-state.small .empty-state-icon {
-  font-size: 2rem;
-}
-.empty-state.medium {
-  padding: 2rem;
-  gap: 0.5rem;
-}
-.empty-state.medium .empty-state-icon {
-  font-size: 3rem;
-}
-.empty-state.large {
-  padding: 3rem;
-  gap: 1rem;
-}
-.empty-state.large .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/dist/runtime/components/Icon.vue

@@ -1,40 +0,0 @@
-<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{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center}.orio-icon :deep(svg){fill:currentColor;height:100%;width:100%}
-</style>

package/dist/runtime/components/Input.vue

@@ -1,48 +0,0 @@
-<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 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;
-}
-.text-input::placeholder {
-  color: var(--color-muted);
-}
-.text-input:hover {
-  border-color: var(--color-accent);
-}
-.text-input:focus {
-  border-color: var(--color-accent);
-  box-shadow: 0 0 0 2px var(--color-accent-soft);
-  outline: none;
-}
-.text-input:disabled {
-  background-color: var(--color-surface);
-  color: var(--color-muted);
-  cursor: not-allowed;
-}
-</style>

package/dist/runtime/components/LoadingSpinner.vue

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

package/dist/runtime/components/Modal.vue

@@ -1,69 +0,0 @@
-<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{align-items:center;backdrop-filter:blur(6px);background:rgba(0,0,0,.45);display:flex;inset:0;justify-content:center;position:fixed;transition:opacity .25s ease}.modal{background:#fff;border-radius:1rem;box-shadow:0 25px 60px rgba(0,0,0,.25);color:var(--color-muted);max-height:90vh;max-width:90vw;padding:24px;position:absolute;transform-origin:top left;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s ease;width:380px}.modal,.overlay-fade-enter-from,.overlay-fade-leave-to{opacity:0}.overlay-fade-enter-active,.overlay-fade-leave-active{transition:opacity .25s ease}
-</style>