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

package/src/components/PopOver/PopOver.vue

@@ -0,0 +1,254 @@
+<template>
+  <div
+    class="popover-wrapper"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+    @click="onClick"
+    @focus="onFocus"
+    @blur="onBlur"
+  >
+    <slot name="trigger" />
+    <Teleport to="body">
+      <Transition name="popover-fade">
+        <div
+          v-if="isVisible"
+          ref="popoverRef"
+          class="popover"
+          :class="positionClass"
+          :style="popoverStyle"
+          role="tooltip"
+          @mouseenter="onPopoverMouseEnter"
+          @mouseleave="onPopoverMouseLeave"
+        >
+          <div class="popover__content">
+            <slot />
+          </div>
+          <span class="popover__arrow" />
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
+
+<style src="./PopOver.scss"></style>
+
+<script setup lang="ts">
+import type { PopOverProps, PopOverEmits } from '../../types';
+import { ref, computed, watch, nextTick, onMounted, onUnmounted } from "vue";
+
+defineOptions({ name: 'FtpPopOver' });
+
+const props = withDefaults(defineProps<PopOverProps>(), {
+  trigger: "hover",
+  position: "top",
+  showDelay: 0,
+  hideDelay: 0,
+  disabled: false,
+});
+
+const emit = defineEmits(["update:visible", "show", "hide"]);
+
+const internalVisible = ref(false);
+const popoverRef = ref<HTMLElement | null>(null);
+const popoverStyle = ref({});
+const isOverPopover = ref(false);
+let showTimeoutId: ReturnType<typeof setTimeout> | null = null;
+let hideTimeoutId: ReturnType<typeof setTimeout> | null = null;
+let triggerElement: HTMLElement | null = null;
+
+// Support both controlled (v-model) and uncontrolled modes
+const isVisible = computed(() => {
+  return props.visible !== undefined ? props.visible : internalVisible.value;
+});
+
+const positionClass = computed(() => `popover--${props.position}`);
+
+function clearTimeouts() {
+  if (showTimeoutId) {
+    clearTimeout(showTimeoutId);
+    showTimeoutId = null;
+  }
+  if (hideTimeoutId) {
+    clearTimeout(hideTimeoutId);
+    hideTimeoutId = null;
+  }
+}
+
+function show(event: Event) {
+  if (props.disabled) return;
+
+  clearTimeouts();
+  if (event?.currentTarget) {
+    triggerElement = event.currentTarget as HTMLElement;
+  }
+
+  const doShow = () => {
+    if (props.visible !== undefined) {
+      emit("update:visible", true);
+    } else {
+      internalVisible.value = true;
+    }
+    emit("show");
+    nextTick(updatePosition);
+  };
+
+  if (props.showDelay > 0) {
+    showTimeoutId = setTimeout(doShow, props.showDelay);
+  } else {
+    doShow();
+  }
+}
+
+function hide() {
+  clearTimeouts();
+
+  const doHide = () => {
+    if (isOverPopover.value) return;
+
+    if (props.visible !== undefined) {
+      emit("update:visible", false);
+    } else {
+      internalVisible.value = false;
+    }
+    emit("hide");
+  };
+
+  if (props.hideDelay > 0) {
+    hideTimeoutId = setTimeout(doHide, props.hideDelay);
+  } else {
+    doHide();
+  }
+}
+
+function toggle(event: Event) {
+  if (isVisible.value) {
+    hide();
+  } else {
+    show(event);
+  }
+}
+
+function updatePosition() {
+  if (!triggerElement || !popoverRef.value) return;
+
+  const triggerRect = triggerElement.getBoundingClientRect();
+  const popoverRect = popoverRef.value.getBoundingClientRect();
+  const offset = 10; // Matches popover.offset token
+
+  let top, left;
+
+  switch (props.position) {
+    case "top":
+      top = triggerRect.top - popoverRect.height - offset;
+      left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2;
+      break;
+    case "bottom":
+      top = triggerRect.bottom + offset;
+      left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2;
+      break;
+    case "left":
+      top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2;
+      left = triggerRect.left - popoverRect.width - offset;
+      break;
+    case "right":
+      top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2;
+      left = triggerRect.right + offset;
+      break;
+  }
+
+  // Keep popover within viewport
+  const viewportPadding = 8;
+  left = Math.max(viewportPadding, Math.min(left, window.innerWidth - popoverRect.width - viewportPadding));
+  top = Math.max(viewportPadding, Math.min(top, window.innerHeight - popoverRect.height - viewportPadding));
+
+  popoverStyle.value = {
+    top: `${top}px`,
+    left: `${left}px`,
+  };
+}
+
+function onMouseEnter(event: MouseEvent) {
+  if (props.trigger === "hover") {
+    show(event);
+  }
+}
+
+function onMouseLeave() {
+  if (props.trigger === "hover") {
+    hide();
+  }
+}
+
+function onPopoverMouseEnter() {
+  if (props.trigger === "hover") {
+    isOverPopover.value = true;
+    clearTimeouts();
+  }
+}
+
+function onPopoverMouseLeave() {
+  if (props.trigger === "hover") {
+    isOverPopover.value = false;
+    hide();
+  }
+}
+
+function onClick(event: MouseEvent) {
+  if (props.trigger === "click") {
+    toggle(event);
+  }
+}
+
+function onFocus(event: FocusEvent) {
+  if (props.trigger === "hover") {
+    show(event);
+  }
+}
+
+function onBlur() {
+  if (props.trigger === "hover") {
+    hide();
+  }
+}
+
+function handleClickOutside(event: MouseEvent) {
+  if (props.trigger === "click" && isVisible.value && popoverRef.value && !popoverRef.value.contains(event.target as Node)) {
+    if (triggerElement && triggerElement.contains(event.target as Node)) {
+      return;
+    }
+    hide();
+  }
+}
+
+function handleScroll() {
+  if (isVisible.value) {
+    updatePosition();
+  }
+}
+
+function handleResize() {
+  if (isVisible.value) {
+    updatePosition();
+  }
+}
+
+onMounted(() => {
+  document.addEventListener("click", handleClickOutside, true);
+  window.addEventListener("scroll", handleScroll, true);
+  window.addEventListener("resize", handleResize);
+});
+
+onUnmounted(() => {
+  clearTimeouts();
+  document.removeEventListener("click", handleClickOutside, true);
+  window.removeEventListener("scroll", handleScroll, true);
+  window.removeEventListener("resize", handleResize);
+});
+
+// Expose methods for external control
+defineExpose({
+  show,
+  hide,
+  toggle,
+});
+</script>

package/src/components/PricingTable/PricingCard.vue

@@ -0,0 +1,33 @@
+<template>
+  <article class="pricing-card" :class="{ 'pricing-card--highlighted': highlighted }">
+    <div class="pricing-card__header">
+      <h3 class="pricing-card__name">{{ name }}</h3>
+      <div class="pricing-card__price">
+        <span v-if="currency" class="pricing-card__currency">{{ currency }}</span>
+        <span class="pricing-card__amount">{{ price }}</span>
+        <span v-if="interval" class="pricing-card__interval">/{{ interval }}</span>
+      </div>
+    </div>
+    <ul class="pricing-card__features">
+      <li v-for="(feature, i) in features" :key="i" class="pricing-card__feature">
+        <span class="pricing-card__check" aria-hidden="true">✓</span>
+        {{ feature }}
+      </li>
+    </ul>
+    <div class="pricing-card__footer">
+      <button class="pricing-card__cta" @click="ctaAction?.()">
+        {{ ctaLabel || 'Get started' }}
+      </button>
+    </div>
+  </article>
+</template>
+
+<style src="./PricingTable.scss"></style>
+
+<script setup lang="ts">
+import type { PricingCardProps } from '../../types';
+
+defineOptions({ name: 'FtpPricingCard' });
+
+defineProps<PricingCardProps>();
+</script>

package/src/components/PricingTable/PricingTable.scss

@@ -0,0 +1,133 @@
+@use "../../../dist/scss/tokens" as *;
+@use "../../scss/mixins/accent-gradient.scss" as *;
+
+// PricingTable
+$c: pricing-table;
+
+.#{$c} {
+  display: grid;
+  gap: 2rem;
+  align-items: stretch;
+}
+
+.#{$c}--cols-2 { grid-template-columns: repeat(2, 1fr); }
+.#{$c}--cols-3 { grid-template-columns: repeat(3, 1fr); }
+.#{$c}--cols-4 { grid-template-columns: repeat(4, 1fr); }
+
+@media (max-width: 768px) {
+  .#{$c} { grid-template-columns: 1fr !important; }
+}
+
+// PricingCard
+$pc: pricing-card;
+
+.#{$pc} {
+  display: flex;
+  flex-direction: column;
+  background-color: $surface-panel;
+  border: 1px solid $border-subtle;
+  border-radius: $radius-large;
+  padding: 2.5rem 2rem;
+  transition: box-shadow 0.2s ease;
+
+  &:hover {
+    box-shadow: $shadow-s;
+  }
+}
+
+.#{$pc}--highlighted {
+  position: relative;
+  border: none;
+  background: linear-gradient($surface-panel, $surface-panel) padding-box,
+              linear-gradient(135deg, $accent-gradient-start, $accent-gradient-end) border-box;
+  border: 2px solid transparent;
+  box-shadow: $shadow-m;
+  transform: scale(1.03);
+}
+
+.#{$pc}__header {
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+.#{$pc}__name {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: $text-secondary;
+  margin: 0 0 1rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.#{$pc}__price {
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  gap: 0.25rem;
+}
+
+.#{$pc}__currency {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: $text-heading;
+}
+
+.#{$pc}__amount {
+  font-size: 3rem;
+  font-weight: 700;
+  line-height: 1;
+  color: $text-heading;
+}
+
+.#{$pc}__interval {
+  font-size: 1rem;
+  color: $text-muted;
+}
+
+.#{$pc}__features {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 2rem;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.#{$pc}__feature {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  font-size: 0.9375rem;
+  color: $text-secondary;
+}
+
+.#{$pc}__check {
+  @include accent-gradient-text();
+  font-weight: 700;
+}
+
+.#{$pc}__footer {
+  margin-top: auto;
+}
+
+.#{$pc}__cta {
+  @include accent-gradient();
+  width: 100%;
+  padding: 0.875rem 1.5rem;
+  border: none;
+  border-radius: $radius-default;
+  color: #fff;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+
+  &:hover {
+    @include accent-gradient("hover");
+  }
+}
+
+.#{$pc}--highlighted .#{$pc}__cta {
+  box-shadow: $shadow-s;
+}

package/src/components/PricingTable/PricingTable.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="pricing-table" :class="`pricing-table--cols-${columns}`">
+    <PricingCard
+      v-for="(plan, index) in plans"
+      :key="index"
+      v-bind="plan"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PricingTableProps } from '../../types';
+import PricingCard from './PricingCard.vue';
+
+defineOptions({ name: 'FtpPricingTable' });
+
+withDefaults(defineProps<PricingTableProps>(), {
+  columns: 3,
+  plans: () => [],
+});
+</script>

package/src/components/ProgressBar/ProgressBar.scss

@@ -0,0 +1,58 @@
+@use "../../../dist/scss/tokens" as *;
+@use "../../scss/mixins/accent-gradient.scss" as *;
+
+$c: progress-bar;
+
+.#{$c} {
+  display: block;
+  width: 100%;
+}
+
+.#{$c}__track {
+  width: 100%;
+  height: var(--progress-bar-track-height, $progress-bar-track-height);
+  background-color: var(--progress-bar-track-background, $progress-bar-track-background);
+  border-radius: var(--progress-bar-track-radius, $progress-bar-track-radius);
+  overflow: hidden;
+  position: relative;
+}
+
+.#{$c}__fill {
+  height: 100%;
+  @include accent-gradient($angle: 90deg);
+  border-radius: var(--progress-bar-track-radius, $progress-bar-track-radius);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  transition: width 0.3s ease;
+}
+
+.#{$c}__fill--indeterminate {
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  @include accent-gradient($angle: 90deg);
+  animation: progress-bar-indeterminate 1.5s infinite ease-in-out;
+  transform-origin: left center;
+}
+
+.#{$c}__label {
+  padding: 0 8px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--progress-bar-label-color, $progress-bar-label-color);
+  white-space: nowrap;
+}
+
+@keyframes progress-bar-indeterminate {
+  0% {
+    transform: translateX(-100%) scaleX(0.3);
+  }
+  50% {
+    transform: translateX(0%) scaleX(0.5);
+  }
+  100% {
+    transform: translateX(100%) scaleX(0.3);
+  }
+}

package/src/components/ProgressBar/ProgressBar.vue

@@ -0,0 +1,48 @@
+<template>
+  <div
+    class="progress-bar"
+    :class="additionalClasses"
+    role="progressbar"
+    :aria-valuenow="mode === 'determinate' ? value : undefined"
+    :aria-valuemin="mode === 'determinate' ? 0 : undefined"
+    :aria-valuemax="mode === 'determinate' ? 100 : undefined"
+  >
+    <div class="progress-bar__track">
+      <div
+        v-if="mode === 'determinate'"
+        class="progress-bar__fill"
+        :style="fillStyle"
+      >
+        <span v-if="showValue" class="progress-bar__label">
+          <slot>{{ value }}%</slot>
+        </span>
+      </div>
+      <div v-else class="progress-bar__fill progress-bar__fill--indeterminate" />
+    </div>
+  </div>
+</template>
+
+<style src="./ProgressBar.scss"></style>
+
+<script setup lang="ts">
+import type { ProgressBarProps } from '../../types';
+import { computed } from "vue";
+
+defineOptions({ name: 'FtpProgressBar' });
+
+const props = withDefaults(defineProps<ProgressBarProps>(), {
+  value: 0,
+  showValue: true,
+  mode: "determinate",
+});
+
+const fillStyle = computed(() => ({
+  width: `${props.value}%`,
+}));
+
+const additionalClasses = computed(() =>
+  [props.mode === "indeterminate" && "progress-bar--indeterminate"]
+    .filter(Boolean)
+    .join(" ")
+);
+</script>

package/src/components/ProgressSpinner/ProgressSpinner.scss

@@ -0,0 +1,48 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: progress-spinner;
+
+.#{$c} {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--progress-spinner-size, $progress-spinner-size);
+  height: var(--progress-spinner-size, $progress-spinner-size);
+}
+
+.#{$c}__svg {
+  width: 100%;
+  height: 100%;
+  animation: progress-spinner-rotate var(--progress-spinner-animation-duration, $progress-spinner-animation-duration) linear infinite;
+}
+
+.#{$c}__track {
+  stroke: var(--progress-spinner-track-color, $progress-spinner-track-color);
+}
+
+.#{$c}__circle {
+  stroke: var(--progress-spinner-color, $progress-spinner-color);
+  stroke-linecap: round;
+  animation: progress-spinner-dash var(--progress-spinner-animation-duration, $progress-spinner-animation-duration) ease-in-out infinite;
+}
+
+@keyframes progress-spinner-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes progress-spinner-dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}

package/src/components/ProgressSpinner/ProgressSpinner.vue

@@ -0,0 +1,53 @@
+<template>
+  <div
+    class="progress-spinner"
+    :class="additionalClasses"
+    role="progressbar"
+    aria-label="Loading"
+    aria-valuemin="0"
+    aria-valuemax="100"
+    :style="spinnerStyle"
+  >
+    <svg class="progress-spinner__svg" viewBox="0 0 50 50">
+      <!-- Background track circle -->
+      <circle
+        class="progress-spinner__track"
+        cx="25"
+        cy="25"
+        r="20"
+        fill="none"
+        :stroke-width="strokeWidth"
+      />
+      <!-- Animated spinner circle -->
+      <circle
+        class="progress-spinner__circle"
+        cx="25"
+        cy="25"
+        r="20"
+        :fill="fill"
+        :stroke-width="strokeWidth"
+      />
+    </svg>
+  </div>
+</template>
+
+<style src="./ProgressSpinner.scss"></style>
+
+<script setup lang="ts">
+import type { ProgressSpinnerProps } from '../../types';
+import { computed } from "vue";
+
+defineOptions({ name: 'FtpProgressSpinner' });
+
+const props = withDefaults(defineProps<ProgressSpinnerProps>(), {
+  strokeWidth: 4,
+  fill: "transparent",
+  animationDuration: "2s",
+});
+
+const spinnerStyle = computed(() => ({
+  "--progress-spinner-animation-duration": props.animationDuration,
+}));
+
+const additionalClasses = computed(() => [].filter(Boolean).join(" "));
+</script>