@for-the-people-initiative/design-system 1.3.1

package/src/components/Knob/Knob.vue

@@ -0,0 +1,252 @@
+<template>
+  <div
+    class="knob"
+    :class="additionalClasses"
+    :style="{ width: sizeValue, height: sizeValue }"
+  >
+    <svg
+      class="knob__svg"
+      viewBox="0 0 100 100"
+      role="slider"
+      :aria-valuenow="modelValue"
+      :aria-valuemin="min"
+      :aria-valuemax="max"
+      :aria-disabled="isDisabled || undefined"
+      tabindex="0"
+      @mousedown="onMouseDown"
+      @touchstart="onTouchStart"
+      @keydown="onKeyDown"
+    >
+      <!-- Background track -->
+      <circle
+        class="knob__track"
+        cx="50"
+        cy="50"
+        :r="radius"
+        fill="none"
+        :stroke-width="strokeWidthValue"
+      />
+
+      <!-- Fill arc -->
+      <circle
+        class="knob__fill"
+        cx="50"
+        cy="50"
+        :r="radius"
+        fill="none"
+        :stroke-width="strokeWidthValue"
+        :stroke-dasharray="circumference"
+        :stroke-dashoffset="dashOffset"
+        stroke-linecap="round"
+        transform="rotate(-90 50 50)"
+      />
+    </svg>
+
+    <!-- Value display -->
+    <div v-if="showValue" class="knob__value">
+      <slot name="value" :value="modelValue">
+        {{ displayValue }}
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style src="./Knob.scss"></style>
+
+<script setup lang="ts">
+import type { KnobProps, KnobEmits } from '../../types';
+import { computed, ref } from "vue";
+
+defineOptions({ name: 'FtpKnob' });
+
+const props = withDefaults(defineProps<KnobProps>(), {
+  modelValue: 0,
+  min: 0,
+  max: 100,
+  step: 1,
+  size: "md",
+  showValue: true,
+  valueTemplate: "{value}",
+  isDisabled: false,
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const sizeMap = {
+  sm: 80,
+  md: 120,
+  lg: 160,
+};
+
+const strokeMap = {
+  sm: 6,
+  md: 8,
+  lg: 10,
+};
+
+const sizeValue = computed(() => `${sizeMap[props.size]}px`);
+
+const strokeWidthValue = computed(() => {
+  if (props.strokeWidth !== undefined) {
+    return (props.strokeWidth / sizeMap[props.size]) * 100;
+  }
+  return (strokeMap[props.size] / sizeMap[props.size]) * 100;
+});
+
+const radius = computed(() => 50 - strokeWidthValue.value / 2);
+const circumference = computed(() => 2 * Math.PI * radius.value);
+
+const percentage = computed(() => {
+  const range = props.max - props.min;
+  if (range === 0) return 0;
+  return ((props.modelValue - props.min) / range) * 100;
+});
+
+const dashOffset = computed(() => {
+  const offset = circumference.value * (1 - percentage.value / 100);
+  return offset;
+});
+
+const displayValue = computed(() => {
+  return props.valueTemplate.replace("{value}", String(props.modelValue));
+});
+
+const additionalClasses = computed(() =>
+  [
+    `knob--size-${props.size}`,
+    props.isDisabled && "knob--disabled",
+  ]
+    .filter(Boolean)
+    .join(" ")
+);
+
+const isDragging = ref(false);
+const knobElement = ref(null);
+
+const updateValue = (event: MouseEvent | TouchEvent) => {
+  if (props.isDisabled) return;
+
+  const svg = (event.target as HTMLElement).closest("svg") || event.currentTarget as HTMLElement;
+  const rect = svg!.getBoundingClientRect();
+  const centerX = rect.left + rect.width / 2;
+  const centerY = rect.top + rect.height / 2;
+
+  const clientX = 'touches' in event && event.touches.length ? event.touches[0].clientX : (event as MouseEvent).clientX;
+  const clientY = 'touches' in event && event.touches.length ? event.touches[0].clientY : (event as MouseEvent).clientY;
+
+  // Calculate angle from center
+  const dx = clientX - centerX;
+  const dy = clientY - centerY;
+  let angle = Math.atan2(dy, dx) * (180 / Math.PI);
+
+  // Convert to 0-360 starting from top (270 degrees offset)
+  angle = (angle + 90 + 360) % 360;
+
+  // Convert angle to value
+  const range = props.max - props.min;
+  let value = (angle / 360) * range + props.min;
+
+  // Apply step
+  value = Math.round(value / props.step) * props.step;
+
+  // Clamp value
+  value = Math.max(props.min, Math.min(props.max, value));
+
+  if (value !== props.modelValue) {
+    emit("update:modelValue", value);
+  }
+};
+
+const onMouseDown = (event: MouseEvent) => {
+  if (props.isDisabled) return;
+
+  isDragging.value = true;
+  updateValue(event);
+
+  const onMouseMove = (e: MouseEvent) => {
+    if (isDragging.value) {
+      updateValue(e);
+    }
+  };
+
+  const onMouseUp = () => {
+    if (isDragging.value) {
+      isDragging.value = false;
+      emit("change", { value: props.modelValue });
+    }
+    document.removeEventListener("mousemove", onMouseMove);
+    document.removeEventListener("mouseup", onMouseUp);
+  };
+
+  document.addEventListener("mousemove", onMouseMove);
+  document.addEventListener("mouseup", onMouseUp);
+};
+
+const onTouchStart = (event: TouchEvent) => {
+  if (props.isDisabled) return;
+
+  isDragging.value = true;
+  updateValue(event);
+
+  const onTouchMove = (e: TouchEvent) => {
+    if (isDragging.value) {
+      e.preventDefault();
+      updateValue(e);
+    }
+  };
+
+  const onTouchEnd = () => {
+    if (isDragging.value) {
+      isDragging.value = false;
+      emit("change", { value: props.modelValue });
+    }
+    document.removeEventListener("touchmove", onTouchMove);
+    document.removeEventListener("touchend", onTouchEnd);
+  };
+
+  document.addEventListener("touchmove", onTouchMove, { passive: false });
+  document.addEventListener("touchend", onTouchEnd);
+};
+
+const onKeyDown = (event: KeyboardEvent) => {
+  if (props.isDisabled) return;
+
+  let newValue = props.modelValue;
+
+  switch (event.key) {
+    case "ArrowUp":
+    case "ArrowRight":
+      newValue = Math.min(props.max, props.modelValue + props.step);
+      event.preventDefault();
+      break;
+    case "ArrowDown":
+    case "ArrowLeft":
+      newValue = Math.max(props.min, props.modelValue - props.step);
+      event.preventDefault();
+      break;
+    case "Home":
+      newValue = props.min;
+      event.preventDefault();
+      break;
+    case "End":
+      newValue = props.max;
+      event.preventDefault();
+      break;
+    case "PageUp":
+      newValue = Math.min(props.max, props.modelValue + props.step * 10);
+      event.preventDefault();
+      break;
+    case "PageDown":
+      newValue = Math.max(props.min, props.modelValue - props.step * 10);
+      event.preventDefault();
+      break;
+    default:
+      return;
+  }
+
+  if (newValue !== props.modelValue) {
+    emit("update:modelValue", newValue);
+    emit("change", { value: newValue });
+  }
+};
+</script>

package/src/components/ListBox/ListBox.scss

@@ -0,0 +1,152 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: listbox;
+
+.#{$c} {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background-color: var(--listbox-background-default, $listbox-background-default);
+  border: var(--listbox-border-width, $listbox-border-width) solid var(--listbox-border-color-default, $listbox-border-color-default);
+  border-radius: var(--listbox-radius, $listbox-radius);
+  overflow: hidden;
+}
+
+.#{$c}--disabled {
+  opacity: 0.6;
+  pointer-events: none;
+  background-color: var(--listbox-background-disabled, $listbox-background-disabled);
+  border-color: var(--listbox-border-color-disabled, $listbox-border-color-disabled);
+}
+
+// Filter
+.#{$c}__filter {
+  position: relative;
+  padding: var(--listbox-padding, $listbox-padding);
+  border-bottom: 1px solid var(--listbox-filter-border, $listbox-filter-border);
+}
+
+.#{$c}__filter-input {
+  width: 100%;
+  height: var(--listbox-filter-height, $listbox-filter-height);
+  padding: 0 var(--listbox-filter-padding-x, $listbox-filter-padding-x);
+  padding-left: 32px;
+  background-color: var(--listbox-filter-background, $listbox-filter-background);
+  border: 1px solid var(--listbox-filter-border, $listbox-filter-border);
+  border-radius: var(--listbox-filter-radius, $listbox-filter-radius);
+  font-size: 14px;
+  color: var(--listbox-filter-text, $listbox-filter-text);
+
+  &::placeholder {
+    color: var(--listbox-filter-placeholder, $listbox-filter-placeholder);
+  }
+
+  &:focus {
+    outline: none;
+    border-color: var(--listbox-border-color-focus, $listbox-border-color-focus);
+  }
+}
+
+.#{$c}__filter-icon {
+  position: absolute;
+  left: calc(var(--listbox-padding, $listbox-padding) + 10px);
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--listbox-filter-placeholder, $listbox-filter-placeholder);
+  pointer-events: none;
+}
+
+// List container
+.#{$c}__list {
+  max-height: var(--listbox-maxHeight, $listbox-maxHeight);
+  overflow-y: auto;
+  padding: var(--listbox-padding, $listbox-padding);
+}
+
+// Option
+.#{$c}__option {
+  display: flex;
+  align-items: center;
+  padding: var(--listbox-option-padding-y, $listbox-option-padding-y) var(--listbox-option-padding-x, $listbox-option-padding-x);
+  background-color: var(--listbox-option-background-default, $listbox-option-background-default);
+  border-radius: var(--listbox-option-radius, $listbox-option-radius);
+  font-size: var(--listbox-option-fontSize, $listbox-option-fontSize);
+  color: var(--listbox-option-text-default, $listbox-option-text-default);
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+  user-select: none;
+
+  &:hover:not(.#{$c}__option--disabled) {
+    background-color: var(--listbox-option-background-hover, $listbox-option-background-hover);
+  }
+
+  &:focus {
+    outline: none;
+    background-color: var(--listbox-option-background-focus, $listbox-option-background-focus);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--listbox-focus-ringColor, $listbox-focus-ringColor);
+    outline-offset: -2px;
+  }
+}
+
+.#{$c}__option--selected {
+  background-color: var(--listbox-option-background-selected, $listbox-option-background-selected);
+  color: var(--listbox-option-text-selected, $listbox-option-text-selected);
+
+  &:hover {
+    background-color: var(--listbox-option-background-selected, $listbox-option-background-selected);
+    filter: brightness(0.95);
+  }
+}
+
+.#{$c}__option--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  color: var(--listbox-option-text-disabled, $listbox-option-text-disabled);
+}
+
+.#{$c}__option--focused {
+  background-color: var(--listbox-option-background-focus, $listbox-option-background-focus);
+}
+
+// Checkbox for multiple selection
+.#{$c}__checkbox {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--listbox-checkbox-size, $listbox-checkbox-size);
+  height: var(--listbox-checkbox-size, $listbox-checkbox-size);
+  margin-right: var(--listbox-checkbox-marginRight, $listbox-checkbox-marginRight);
+  border: 1.5px solid currentColor;
+  border-radius: 3px;
+  flex-shrink: 0;
+
+  svg {
+    display: block;
+  }
+}
+
+.#{$c}__option--selected .#{$c}__checkbox {
+  background-color: currentColor;
+
+  svg {
+    color: var(--listbox-background-default, $listbox-background-default);
+  }
+}
+
+.#{$c}__option-label {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+// Empty state
+.#{$c}__empty {
+  padding: var(--listbox-option-padding-y, $listbox-option-padding-y) var(--listbox-option-padding-x, $listbox-option-padding-x);
+  color: var(--listbox-option-text-disabled, $listbox-option-text-disabled);
+  text-align: center;
+  font-size: 14px;
+}

package/src/components/ListBox/ListBox.vue

@@ -0,0 +1,198 @@
+<template>
+  <div
+    class="listbox"
+    :class="additionalClasses"
+    role="listbox"
+    :aria-multiselectable="multiple"
+    :aria-disabled="isDisabled"
+  >
+    <div v-if="filter" class="listbox__filter">
+      <input
+        v-model="filterValue"
+        type="text"
+        class="listbox__filter-input"
+        placeholder="Search..."
+        @input="onFilterInput"
+      />
+      <svg
+        class="listbox__filter-icon"
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M7 12C9.76142 12 12 9.76142 12 7C12 4.23858 9.76142 2 7 2C4.23858 2 2 4.23858 2 7C2 9.76142 4.23858 12 7 12Z"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M14 14L10.5 10.5"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </div>
+    <div class="listbox__list" role="group">
+      <div
+        v-for="(option, index) in filteredOptions"
+        :key="getOptionValue(option)"
+        class="listbox__option"
+        :class="{
+          'listbox__option--selected': isSelected(option),
+          'listbox__option--focused': focusedIndex === index,
+          'listbox__option--disabled': option.disabled,
+        }"
+        role="option"
+        :aria-selected="isSelected(option)"
+        :aria-disabled="option.disabled"
+        :tabindex="option.disabled ? -1 : 0"
+        @click="!option.disabled && selectOption(option)"
+        @keydown="onOptionKeydown($event, option, index)"
+      >
+        <span v-if="multiple" class="listbox__checkbox">
+          <svg
+            v-if="isSelected(option)"
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M2.5 6L5 8.5L9.5 3.5"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </span>
+        <span class="listbox__option-label">{{ getOptionLabel(option) }}</span>
+      </div>
+      <div v-if="filteredOptions.length === 0" class="listbox__empty">
+        No results found
+      </div>
+    </div>
+  </div>
+</template>
+
+<style src="./ListBox.scss"></style>
+
+<script setup lang="ts">
+import type { ListBoxProps, ListBoxEmits } from '../../types';
+import { computed, ref } from "vue";
+
+defineOptions({ name: 'FtpListBox' });
+
+const props = withDefaults(defineProps<ListBoxProps>(), {
+  modelValue: null,
+  options: () => [],
+  optionLabel: "label",
+  optionValue: "value",
+  multiple: false,
+  filter: false,
+  isDisabled: false,
+});
+
+const emit = defineEmits(["update:modelValue", "change", "filter"]);
+
+const filterValue = ref("");
+const focusedIndex = ref(-1);
+
+const getOptionLabel = (option: any) => {
+  if (typeof option === "string" || typeof option === "number") {
+    return option;
+  }
+  return option[props.optionLabel];
+};
+
+const getOptionValue = (option: any) => {
+  if (typeof option === "string" || typeof option === "number") {
+    return option;
+  }
+  return option[props.optionValue];
+};
+
+const filteredOptions = computed((): any[] => {
+  if (!filterValue.value) {
+    return props.options;
+  }
+  const searchTerm = filterValue.value.toLowerCase();
+  return props.options.filter((option) => {
+    const label = getOptionLabel(option);
+    return String(label).toLowerCase().includes(searchTerm);
+  });
+});
+
+const isSelected = (option: any) => {
+  const value = getOptionValue(option);
+  if (props.multiple) {
+    return Array.isArray(props.modelValue) && props.modelValue.includes(value);
+  }
+  return props.modelValue === value;
+};
+
+const selectOption = (option: any) => {
+  if (props.isDisabled || option.disabled) return;
+
+  const value = getOptionValue(option);
+
+  if (props.multiple) {
+    const currentValue = Array.isArray(props.modelValue) ? [...props.modelValue] : [];
+    const index = currentValue.indexOf(value);
+
+    if (index > -1) {
+      currentValue.splice(index, 1);
+    } else {
+      currentValue.push(value);
+    }
+
+    emit("update:modelValue", currentValue);
+    emit("change", { value: currentValue, originalEvent: event });
+  } else {
+    emit("update:modelValue", value);
+    emit("change", { value, originalEvent: event });
+  }
+};
+
+const onFilterInput = (event: Event) => {
+  emit("filter", { value: filterValue.value, originalEvent: event });
+};
+
+const onOptionKeydown = (event: KeyboardEvent, option: any, index: any) => {
+  if (event.key === "Enter" || event.key === " ") {
+    event.preventDefault();
+    if (!option.disabled) {
+      selectOption(option);
+    }
+  } else if (event.key === "ArrowDown") {
+    event.preventDefault();
+    const nextIndex = Math.min(index + 1, filteredOptions.value.length - 1);
+    focusedIndex.value = nextIndex;
+    focusOption(nextIndex);
+  } else if (event.key === "ArrowUp") {
+    event.preventDefault();
+    const prevIndex = Math.max(index - 1, 0);
+    focusedIndex.value = prevIndex;
+    focusOption(prevIndex);
+  }
+};
+
+const focusOption = (index: any) => {
+  const options = document.querySelectorAll(".listbox__option");
+  if (options[index]) {
+    (options[index] as HTMLElement).focus();
+  }
+};
+
+const additionalClasses = computed(() => [
+  props.isDisabled && "listbox--disabled",
+  props.multiple && "listbox--multiple",
+].filter(Boolean).join(" "));
+</script>

package/src/components/LogoCloud/LogoCloud.scss

@@ -0,0 +1,64 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: logo-cloud;
+
+.#{$c} {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2rem;
+  width: 100%;
+}
+
+.#{$c}__title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: $text-muted;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin: 0;
+}
+
+.#{$c}__grid {
+  display: grid;
+  gap: 2rem;
+  width: 100%;
+  align-items: center;
+  justify-items: center;
+}
+
+.#{$c}__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
+.#{$c}__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
+.#{$c}__grid--cols-5 { grid-template-columns: repeat(5, 1fr); }
+.#{$c}__grid--cols-6 { grid-template-columns: repeat(6, 1fr); }
+
+@media (max-width: 768px) {
+  .#{$c}__grid { grid-template-columns: repeat(2, 1fr) !important; }
+}
+
+.#{$c}__item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  transition: opacity 0.2s ease;
+
+  &:hover { opacity: 1; }
+}
+
+.#{$c}__img {
+  max-height: 2.5rem;
+  max-width: 100%;
+  object-fit: contain;
+}
+
+.#{$c}--grayscale .#{$c}__img {
+  filter: grayscale(1) brightness(0.7);
+  opacity: 0.6;
+  transition: filter 0.2s ease, opacity 0.2s ease;
+}
+
+.#{$c}--grayscale .#{$c}__item:hover .#{$c}__img {
+  filter: grayscale(0) brightness(1);
+  opacity: 1;
+}

package/src/components/LogoCloud/LogoCloud.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="logo-cloud" :class="additionalClasses">
+    <p v-if="title" class="logo-cloud__title">{{ title }}</p>
+    <div class="logo-cloud__grid" :class="`logo-cloud__grid--cols-${columns}`">
+      <component
+        :is="logo.href ? 'a' : 'div'"
+        v-for="(logo, i) in logos"
+        :key="i"
+        class="logo-cloud__item"
+        v-bind="logo.href ? { href: logo.href, target: '_blank', rel: 'noopener noreferrer' } : {}"
+      >
+        <img :src="logo.src" :alt="logo.alt" class="logo-cloud__img" />
+      </component>
+    </div>
+  </div>
+</template>
+
+<style src="./LogoCloud.scss"></style>
+
+<script setup lang="ts">
+import type { LogoCloudProps } from '../../types';
+import { computed } from 'vue';
+
+defineOptions({ name: 'FtpLogoCloud' });
+
+const props = withDefaults(defineProps<LogoCloudProps>(), {
+  logos: () => [],
+  columns: 5,
+  grayscale: false,
+});
+
+const additionalClasses = computed(() =>
+  [props.grayscale && 'logo-cloud--grayscale'].filter(Boolean).join(' ')
+);
+</script>