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

package/src/components/Carousel/Carousel.vue

@@ -0,0 +1,191 @@
+<template>
+  <div class="carousel" :class="additionalClasses" role="region" aria-roledescription="carousel" :aria-label="ariaLabel || 'Carousel'" @keydown="onKeydown">
+    <div class="carousel__container">
+      <!-- Previous button -->
+      <button
+        v-if="showNavigators"
+        type="button"
+        class="carousel__navigator carousel__navigator--prev"
+        :disabled="!circular && currentIndex === 0"
+        aria-label="Previous slide"
+        @click="prev"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <polyline points="15 18 9 12 15 6" />
+        </svg>
+      </button>
+
+      <!-- Slides container -->
+      <div class="carousel__viewport" ref="viewportRef">
+        <div
+          class="carousel__track"
+          :style="trackStyle"
+        >
+          <div
+            v-for="(item, index) in items"
+            :key="index"
+            class="carousel__item"
+            :class="{ 'carousel__item--active': index === currentIndex }"
+            role="group"
+            :aria-roledescription="'slide'"
+            :aria-label="`Slide ${index + 1} of ${items.length}`"
+          >
+            <slot name="item" :data="item" :index="index">
+              {{ item }}
+            </slot>
+          </div>
+        </div>
+      </div>
+
+      <!-- Next button -->
+      <button
+        v-if="showNavigators"
+        type="button"
+        class="carousel__navigator carousel__navigator--next"
+        :disabled="!circular && currentIndex === items.length - 1"
+        aria-label="Next slide"
+        @click="next"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <polyline points="9 18 15 12 9 6" />
+        </svg>
+      </button>
+    </div>
+
+    <!-- Indicators -->
+    <div v-if="showIndicators && items.length > 1" class="carousel__indicators">
+      <button
+        v-for="(_, index) in items"
+        :key="index"
+        type="button"
+        class="carousel__indicator"
+        :class="{ 'carousel__indicator--active': index === currentIndex }"
+        :aria-label="`Go to slide ${index + 1}`"
+        :aria-current="index === currentIndex ? 'true' : undefined"
+        @click="goTo(index)"
+      />
+    </div>
+  </div>
+</template>
+
+<style src="./Carousel.scss"></style>
+
+<script setup lang="ts">
+import type { CarouselProps, CarouselEmits } from '../../types';
+import { computed, ref, watch, onMounted, onUnmounted } from "vue";
+
+defineOptions({ name: 'FtpCarousel' });
+
+const props = withDefaults(defineProps<CarouselProps>(), {
+  items: () => [],
+  numVisible: 1,
+  numScroll: 1,
+  circular: false,
+  autoplay: false,
+  autoplayInterval: 3000,
+  showNavigators: true,
+  showIndicators: true,
+  orientation: "horizontal",
+});
+
+const emit = defineEmits(["update:page"]);
+
+const viewportRef = ref(null);
+const currentIndex = ref(0);
+const autoplayTimer = ref<ReturnType<typeof setInterval> | null>(null);
+
+const additionalClasses = computed(() =>
+  [
+    `carousel--orientation-${props.orientation}`,
+    props.autoplay && "carousel--autoplay",
+  ]
+    .filter(Boolean)
+    .join(" ")
+);
+
+const trackStyle = computed(() => {
+  const translateValue = -(currentIndex.value * (100 / props.numVisible));
+  return {
+    transform: props.orientation === "horizontal"
+      ? `translateX(${translateValue}%)`
+      : `translateY(${translateValue}%)`,
+  };
+});
+
+const prev = () => {
+  if (currentIndex.value > 0) {
+    currentIndex.value -= props.numScroll;
+  } else if (props.circular) {
+    currentIndex.value = props.items.length - 1;
+  }
+  emit("update:page", currentIndex.value);
+};
+
+const next = () => {
+  if (currentIndex.value < props.items.length - 1) {
+    currentIndex.value += props.numScroll;
+    if (currentIndex.value >= props.items.length) {
+      currentIndex.value = props.items.length - 1;
+    }
+  } else if (props.circular) {
+    currentIndex.value = 0;
+  }
+  emit("update:page", currentIndex.value);
+};
+
+const goTo = (index: any) => {
+  currentIndex.value = index;
+  emit("update:page", currentIndex.value);
+};
+
+const startAutoplay = () => {
+  if (props.autoplay && props.items.length > 1) {
+    autoplayTimer.value = setInterval(() => {
+      next();
+    }, props.autoplayInterval);
+  }
+};
+
+const onKeydown = (event: KeyboardEvent) => {
+  switch (event.key) {
+    case "ArrowLeft":
+      event.preventDefault();
+      prev();
+      break;
+    case "ArrowRight":
+      event.preventDefault();
+      next();
+      break;
+  }
+};
+
+const stopAutoplay = () => {
+  if (autoplayTimer.value) {
+    clearInterval(autoplayTimer.value);
+    autoplayTimer.value = null;
+  }
+};
+
+watch(() => props.autoplay, (newValue) => {
+  if (newValue) {
+    startAutoplay();
+  } else {
+    stopAutoplay();
+  }
+});
+
+onMounted(() => {
+  startAutoplay();
+});
+
+onUnmounted(() => {
+  stopAutoplay();
+});
+
+defineExpose({
+  prev,
+  next,
+  goTo,
+  currentIndex,
+});
+</script>

package/src/components/Chart/Chart.scss

@@ -0,0 +1,109 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: chart;
+
+.#{$c} {
+  display: flex;
+  flex-direction: column;
+  background: var(--chart-container-background, $chart-container-background);
+  padding: var(--chart-container-padding, $chart-container-padding);
+  border-radius: var(--chart-container-radius, $chart-container-radius);
+  border: var(--chart-container-border-width, $chart-container-border-width) solid
+          var(--chart-container-border-color, $chart-container-border-color);
+}
+
+.#{$c}__title {
+  color: var(--chart-title-color, $chart-title-color);
+  font-size: var(--chart-title-size, $chart-title-size);
+  font-weight: var(--chart-title-weight, $chart-title-weight);
+  margin-bottom: var(--chart-title-marginBottom, $chart-title-marginBottom);
+}
+
+.#{$c}__wrapper {
+  position: relative;
+  flex: 1;
+  min-height: var(--chart-canvas-minHeight, $chart-canvas-minHeight);
+}
+
+.#{$c}__canvas {
+  width: 100%;
+  height: 100%;
+
+  canvas {
+    max-width: 100%;
+    max-height: 100%;
+  }
+}
+
+// Loading state
+.#{$c}__loading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--chart-loading-background, $chart-loading-background);
+  border-radius: inherit;
+}
+
+.#{$c}__spinner {
+  width: var(--chart-loading-spinnerSize, $chart-loading-spinnerSize);
+  height: var(--chart-loading-spinnerSize, $chart-loading-spinnerSize);
+  color: var(--chart-loading-spinnerColor, $chart-loading-spinnerColor);
+  animation: chart-spin 1s linear infinite;
+}
+
+@keyframes chart-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+// Empty state
+.#{$c}__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  height: 100%;
+  min-height: var(--chart-canvas-minHeight, $chart-canvas-minHeight);
+}
+
+.#{$c}__empty-icon {
+  width: var(--chart-empty-iconSize, $chart-empty-iconSize);
+  height: var(--chart-empty-iconSize, $chart-empty-iconSize);
+  color: var(--chart-empty-iconColor, $chart-empty-iconColor);
+}
+
+.#{$c}__empty-text {
+  font-size: 14px;
+  color: var(--chart-empty-textColor, $chart-empty-textColor);
+}
+
+// Legend
+.#{$c}__legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--chart-legend-gap, $chart-legend-gap);
+  margin-top: 16px;
+  justify-content: center;
+}
+
+// Legend item helper classes (for custom legend slot content)
+.#{$c}__legend-item {
+  display: flex;
+  align-items: center;
+  gap: var(--chart-legend-item-gap, $chart-legend-item-gap);
+  font-size: var(--chart-legend-item-size, $chart-legend-item-size);
+  color: var(--chart-legend-item-color, $chart-legend-item-color);
+}
+
+.#{$c}__legend-marker {
+  width: var(--chart-legend-marker-size, $chart-legend-marker-size);
+  height: var(--chart-legend-marker-size, $chart-legend-marker-size);
+  border-radius: var(--chart-legend-marker-radius, $chart-legend-marker-radius);
+}

package/src/components/Chart/Chart.vue

@@ -0,0 +1,209 @@
+<template>
+  <div class="chart" :class="additionalClasses">
+    <div v-if="title" class="chart__title">{{ title }}</div>
+
+    <div class="chart__wrapper" :style="wrapperStyle">
+      <!-- Loading state -->
+      <div v-if="isLoading" class="chart__loading">
+        <svg class="chart__spinner" viewBox="0 0 24 24" fill="none">
+          <circle
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            stroke-width="3"
+            stroke-linecap="round"
+            stroke-dasharray="31.4 31.4"
+          />
+        </svg>
+      </div>
+
+      <!-- Empty state -->
+      <div v-else-if="!hasData" class="chart__empty">
+        <svg class="chart__empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M3 3v18h18" />
+          <path d="M18 17V9" />
+          <path d="M13 17V5" />
+          <path d="M8 17v-3" />
+        </svg>
+        <span class="chart__empty-text">
+          <slot name="empty">No data available</slot>
+        </span>
+      </div>
+
+      <!-- Chart canvas -->
+      <canvas
+        v-else
+        ref="canvasRef"
+        class="chart__canvas"
+        @click="onCanvasClick"
+      />
+    </div>
+  </div>
+</template>
+
+<style src="./Chart.scss"></style>
+
+<script setup lang="ts">
+import type { ChartProps, ChartEmits } from '../../types';
+import { computed, ref, watch, onMounted, onUnmounted, nextTick } from "vue";
+
+defineOptions({ name: 'FtpChart' });
+
+const emit = defineEmits(["select", "loaded"]);
+
+const props = withDefaults(defineProps<ChartProps>(), {
+  type: "bar",
+  data: null,
+  options: null,
+  plugins: () => [],
+  title: null,
+  isLoading: false,
+  width: null,
+  height: null,
+});
+
+const canvasRef = ref(null);
+let chartInstance: any = null;
+let ChartJS: any = null;
+
+const additionalClasses = computed(() =>
+  [
+    `chart--type-${props.type}`,
+    props.isLoading && "chart--loading",
+  ]
+    .filter(Boolean)
+    .join(" ")
+);
+
+const hasData = computed(() => {
+  if (!props.data) return false;
+  if ((props.data as any).datasets) {
+    return (props.data as any).datasets.some((ds: any) => ds.data && ds.data.length > 0);
+  }
+  return Object.keys(props.data).length > 0;
+});
+
+const wrapperStyle = computed(() => {
+  const style: Record<string, string> = {};
+  if (props.width) {
+    style.width = typeof props.width === "number" ? `${props.width}px` : props.width;
+  }
+  if (props.height) {
+    style.height = typeof props.height === "number" ? `${props.height}px` : props.height;
+  }
+  return style;
+});
+
+async function initChart() {
+  if (!canvasRef.value || !hasData.value) return;
+
+  // Dynamically import Chart.js
+  if (!ChartJS) {
+    try {
+      const module = await import("chart.js/auto");
+      ChartJS = module.default || module.Chart;
+    } catch (e) {
+      console.error("Chart.js is required. Install it with: npm install chart.js");
+      return;
+    }
+  }
+
+  // Destroy existing chart if any
+  destroyChart();
+
+  // Create new chart
+  chartInstance = new ChartJS(canvasRef.value, {
+    type: props.type,
+    data: props.data,
+    options: props.options || {},
+    plugins: props.plugins,
+  });
+
+  emit("loaded", chartInstance);
+}
+
+function destroyChart() {
+  if (chartInstance) {
+    chartInstance.destroy();
+    chartInstance = null;
+  }
+}
+
+function onCanvasClick(event: MouseEvent) {
+  if (!chartInstance) return;
+
+  const elements = chartInstance.getElementsAtEventForMode(
+    event,
+    "nearest",
+    { intersect: true },
+    false
+  );
+
+  if (elements.length > 0) {
+    const { datasetIndex, index } = elements[0];
+    emit("select", {
+      originalEvent: event,
+      element: elements[0],
+      dataset: chartInstance.data.datasets[datasetIndex],
+      datasetIndex,
+      index,
+      value: chartInstance.data.datasets[datasetIndex].data[index],
+    });
+  }
+}
+
+/**
+ * Refresh chart data
+ */
+function refresh() {
+  if (chartInstance) {
+    chartInstance.update();
+  }
+}
+
+/**
+ * Reinitialize the chart
+ */
+function reinit() {
+  destroyChart();
+  nextTick(() => initChart());
+}
+
+/**
+ * Get the Chart.js instance
+ */
+function getChart() {
+  return chartInstance;
+}
+
+/**
+ * Get chart as base64 image
+ */
+function getBase64Image() {
+  return chartInstance ? chartInstance.toBase64Image() : null;
+}
+
+// Watch for data/type/options changes
+watch(() => props.data, () => reinit(), { deep: true });
+watch(() => props.type, () => reinit());
+watch(() => props.options, () => reinit(), { deep: true });
+
+onMounted(() => {
+  if (hasData.value) {
+    initChart();
+  }
+});
+
+onUnmounted(() => {
+  destroyChart();
+});
+
+// Expose methods
+defineExpose({
+  refresh,
+  reinit,
+  getChart,
+  getBase64Image,
+});
+</script>

package/src/components/Checkbox/Checkbox.scss

@@ -0,0 +1,148 @@
+@use "../../../dist/scss/tokens" as *;
+@use "../../scss/mixins/accent-gradient.scss" as *;
+
+$c: checkbox;
+
+.#{$c} {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--checkbox-label-gap, $checkbox-label-gap);
+  cursor: pointer;
+  user-select: none;
+  position: relative;
+}
+
+.#{$c}__input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+}
+
+.#{$c}__box {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  background-color: var(--checkbox-background-default, $checkbox-background-default);
+  border: var(--checkbox-border-width, $checkbox-border-width) solid var(--checkbox-border-color-default, $checkbox-border-color-default);
+  border-radius: var(--checkbox-radius, $checkbox-radius);
+  transition: all 0.15s ease;
+}
+
+.#{$c}__icon {
+  opacity: 0;
+  transform: scale(0.5);
+  transition: all 0.15s ease;
+  color: var(--checkbox-checkmark-color, $checkbox-checkmark-color);
+}
+
+.#{$c}__label {
+  color: var(--checkbox-label-color-default, $checkbox-label-color-default);
+  line-height: 1.4;
+}
+
+// Hover state
+.#{$c}:hover:not(.#{$c}--disabled) {
+  .#{$c}__box {
+    border-color: var(--checkbox-border-color-hover, $checkbox-border-color-hover);
+    background-color: var(--checkbox-background-hover, $checkbox-background-hover);
+  }
+}
+
+// Focus state
+.#{$c}__input:focus-visible ~ .#{$c}__box {
+  outline: var(--checkbox-focus-ringWidth, $checkbox-focus-ringWidth) solid var(--checkbox-focus-ringColor, $checkbox-focus-ringColor);
+  outline-offset: var(--checkbox-focus-ringOffset, $checkbox-focus-ringOffset);
+}
+
+// Checked state
+.#{$c}--checked,
+.#{$c}--indeterminate {
+  .#{$c}__box {
+    @include accent-gradient();
+    border-color: var(--accent-gradient-start, $accent-gradient-start);
+  }
+
+  .#{$c}__icon {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+// Disabled state
+.#{$c}--disabled {
+  cursor: not-allowed;
+
+  .#{$c}__box {
+    background-color: var(--checkbox-background-disabled, $checkbox-background-disabled);
+    border-color: var(--checkbox-border-color-disabled, $checkbox-border-color-disabled);
+  }
+
+  .#{$c}__label {
+    color: var(--checkbox-label-color-disabled, $checkbox-label-color-disabled);
+  }
+}
+
+.#{$c}--disabled.#{$c}--checked {
+  .#{$c}__box {
+    background-color: var(--checkbox-border-color-disabled, $checkbox-border-color-disabled);
+  }
+}
+
+// Invalid state
+.#{$c}--invalid {
+  .#{$c}__box {
+    border-color: var(--checkbox-border-color-error, $checkbox-border-color-error);
+  }
+}
+
+// Sizes
+.#{$c}--size-sm {
+  .#{$c}__box {
+    width: var(--checkbox-size-sm, $checkbox-size-sm);
+    height: var(--checkbox-size-sm, $checkbox-size-sm);
+  }
+
+  .#{$c}__icon {
+    width: var(--checkbox-iconSize-sm, $checkbox-iconSize-sm);
+    height: var(--checkbox-iconSize-sm, $checkbox-iconSize-sm);
+  }
+
+  .#{$c}__label {
+    font-size: 14px;
+  }
+}
+
+.#{$c}--size-md {
+  .#{$c}__box {
+    width: var(--checkbox-size-md, $checkbox-size-md);
+    height: var(--checkbox-size-md, $checkbox-size-md);
+  }
+
+  .#{$c}__icon {
+    width: var(--checkbox-iconSize-md, $checkbox-iconSize-md);
+    height: var(--checkbox-iconSize-md, $checkbox-iconSize-md);
+  }
+
+  .#{$c}__label {
+    font-size: 15px;
+  }
+}
+
+.#{$c}--size-lg {
+  .#{$c}__box {
+    width: var(--checkbox-size-lg, $checkbox-size-lg);
+    height: var(--checkbox-size-lg, $checkbox-size-lg);
+  }
+
+  .#{$c}__icon {
+    width: var(--checkbox-iconSize-lg, $checkbox-iconSize-lg);
+    height: var(--checkbox-iconSize-lg, $checkbox-iconSize-lg);
+  }
+
+  .#{$c}__label {
+    font-size: 16px;
+  }
+}