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

package/src/components/Splitter/Splitter.vue

@@ -0,0 +1,191 @@
+<template>
+  <div
+    class="splitter"
+    :class="additionalClasses"
+    :style="containerStyle"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<style src="./Splitter.scss"></style>
+
+<script setup lang="ts">
+import type { SplitterProps, SplitterEmits } from '../../types';
+import { computed, provide, ref, onMounted, onUnmounted } from "vue";
+
+defineOptions({ name: 'FtpSplitter' });
+
+const props = withDefaults(defineProps<SplitterProps>(), {
+  layout: "horizontal",
+  gutterSize: 10,
+  stateKey: null,
+  stateStorage: "session",
+});
+
+const emit = defineEmits(["resizestart", "resize", "resizeend"]);
+
+// Panel management
+const panels = ref<any[]>([]);
+const panelSizes = ref<(number | null)[]>([]);
+const isResizing = ref(false);
+const currentGutterIndex = ref<number | null>(null);
+const startPos = ref(0);
+const startSizes = ref<number[]>([]);
+
+const registerPanel = (panel: any) => {
+  const index = panels.value.length;
+  panels.value.push(panel);
+
+  // Initialize sizes
+  if (panel.size !== undefined) {
+    panelSizes.value.push(panel.size);
+  } else {
+    // Distribute remaining space
+    panelSizes.value.push(null);
+  }
+
+  return index;
+};
+
+const unregisterPanel = (index: any) => {
+  panels.value.splice(index, 1);
+  panelSizes.value.splice(index, 1);
+};
+
+const getPanelSize = (index: any) => {
+  return panelSizes.value[index];
+};
+
+// Resize logic
+const onGutterMouseDown = (event: MouseEvent, index: any) => {
+  isResizing.value = true;
+  currentGutterIndex.value = index;
+  startPos.value = props.layout === "horizontal" ? event.pageX : event.pageY;
+  startSizes.value = [...panelSizes.value] as number[];
+
+  emit("resizestart", { originalEvent: event, sizes: panelSizes.value });
+
+  document.addEventListener("mousemove", onMouseMove);
+  document.addEventListener("mouseup", onMouseUp);
+  document.body.style.cursor = props.layout === "horizontal" ? "col-resize" : "row-resize";
+  document.body.style.userSelect = "none";
+};
+
+const onMouseMove = (event: MouseEvent) => {
+  if (!isResizing.value) return;
+
+  const splitterElement = (event.target as HTMLElement).closest(".splitter") || document.querySelector(".splitter");
+  if (!splitterElement) return;
+
+  const rect = splitterElement.getBoundingClientRect();
+  const totalSize = props.layout === "horizontal" ? rect.width : rect.height;
+  const gutterCount = panels.value.length - 1;
+  const availableSize = totalSize - (gutterCount * props.gutterSize);
+
+  const currentPos = props.layout === "horizontal" ? event.pageX : event.pageY;
+  const delta = currentPos - startPos.value;
+  const deltaPercent = (delta / availableSize) * 100;
+
+  const prevIndex = currentGutterIndex.value!;
+  const nextIndex = currentGutterIndex.value! + 1;
+
+  let newPrevSize = startSizes.value[prevIndex] + deltaPercent;
+  let newNextSize = startSizes.value[nextIndex] - deltaPercent;
+
+  // Apply min constraints
+  const minSize = 5; // 5% minimum
+  if (newPrevSize < minSize) {
+    newNextSize += (newPrevSize - minSize);
+    newPrevSize = minSize;
+  }
+  if (newNextSize < minSize) {
+    newPrevSize += (newNextSize - minSize);
+    newNextSize = minSize;
+  }
+
+  (panelSizes.value as number[])[prevIndex] = newPrevSize;
+  (panelSizes.value as number[])[nextIndex] = newNextSize;
+
+  emit("resize", { originalEvent: event, sizes: [...panelSizes.value] });
+};
+
+const onMouseUp = (event: MouseEvent) => {
+  isResizing.value = false;
+  currentGutterIndex.value = null;
+
+  document.removeEventListener("mousemove", onMouseMove);
+  document.removeEventListener("mouseup", onMouseUp);
+  document.body.style.cursor = "";
+  document.body.style.userSelect = "";
+
+  emit("resizeend", { originalEvent: event, sizes: [...panelSizes.value] });
+
+  // Save state if stateKey is provided
+  if (props.stateKey) {
+    saveState();
+  }
+};
+
+const saveState = () => {
+  const storage = props.stateStorage === "local" ? localStorage : sessionStorage;
+  storage.setItem(props.stateKey!, JSON.stringify(panelSizes.value));
+};
+
+const restoreState = () => {
+  if (!props.stateKey) return;
+
+  const storage = props.stateStorage === "local" ? localStorage : sessionStorage;
+  const savedState = storage.getItem(props.stateKey);
+
+  if (savedState) {
+    try {
+      panelSizes.value = JSON.parse(savedState);
+    } catch (e) {
+      // Invalid state, ignore
+    }
+  }
+};
+
+// Initialize default sizes once all panels are registered
+const initializeSizes = () => {
+  const nullCount = panelSizes.value.filter((s) => s === null).length;
+  const usedPercent = panelSizes.value.reduce((sum, s) => (sum ?? 0) + (s || 0), 0)!;
+  const remainingPercent = 100 - usedPercent;
+  const defaultSize = nullCount > 0 ? remainingPercent / nullCount : 0;
+
+  panelSizes.value = panelSizes.value.map((s) => (s === null ? defaultSize : s));
+};
+
+// Provide context to child panels
+provide("splitter", {
+  layout: computed(() => props.layout),
+  gutterSize: computed(() => props.gutterSize),
+  registerPanel,
+  unregisterPanel,
+  getPanelSize,
+  panelSizes,
+  onGutterMouseDown,
+  isResizing,
+  currentGutterIndex,
+  initializeSizes,
+});
+
+onMounted(() => {
+  restoreState();
+});
+
+onUnmounted(() => {
+  document.removeEventListener("mousemove", onMouseMove);
+  document.removeEventListener("mouseup", onMouseUp);
+});
+
+const additionalClasses = computed(() => [
+  `splitter--${props.layout}`,
+  isResizing.value && "splitter--resizing",
+].filter(Boolean).join(" "));
+
+const containerStyle = computed(() => ({
+  "--splitter-gutter-size": `${props.gutterSize}px`,
+}));
+</script>

package/src/components/Splitter/SplitterPanel.vue

@@ -0,0 +1,125 @@
+<template>
+  <div
+    class="splitter__panel"
+    :style="panelStyle"
+  >
+    <slot></slot>
+  </div>
+  <div
+    v-if="showGutter"
+    class="splitter__gutter"
+    :class="gutterClasses"
+    role="separator"
+    :aria-orientation="splitterContext.layout.value === 'horizontal' ? 'vertical' : 'horizontal'"
+    tabindex="0"
+    @mousedown="onGutterMouseDown"
+    @keydown="onGutterKeyDown"
+  >
+    <div class="splitter__gutter-handle"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { SplitterPanelProps } from '../../types';
+import { computed, inject, onMounted, onBeforeUnmount, ref, watch, nextTick } from "vue";
+
+defineOptions({ name: 'FtpSplitterPanel' });
+
+const props = withDefaults(defineProps<SplitterPanelProps>(), {
+  minSize: 5,
+});
+
+const splitterContext = inject("splitter") as any;
+const panelIndex = ref(-1);
+
+onMounted(async () => {
+  panelIndex.value = splitterContext.registerPanel({
+    size: props.size,
+    minSize: props.minSize,
+  });
+
+  // Initialize sizes after all panels are registered
+  await nextTick();
+  splitterContext.initializeSizes();
+});
+
+onBeforeUnmount(() => {
+  if (panelIndex.value !== -1) {
+    splitterContext.unregisterPanel(panelIndex.value);
+  }
+});
+
+const currentSize = computed(() => {
+  return splitterContext.getPanelSize(panelIndex.value);
+});
+
+const showGutter = computed(() => {
+  // Show gutter after this panel if it's not the last panel
+  const totalPanels = splitterContext.panelSizes.value.length;
+  return panelIndex.value >= 0 && panelIndex.value < totalPanels - 1;
+});
+
+const gutterClasses = computed(() => [
+  splitterContext.isResizing.value && splitterContext.currentGutterIndex.value === panelIndex.value && "splitter__gutter--active",
+].filter(Boolean).join(" "));
+
+const panelStyle = computed(() => {
+  const size = currentSize.value;
+  if (size === null || size === undefined) return {};
+
+  const gutterSize = splitterContext.gutterSize.value;
+  const gutterCount = splitterContext.panelSizes.value.length - 1;
+  const gutterOffset = (gutterSize * gutterCount) / splitterContext.panelSizes.value.length;
+
+  return {
+    flexBasis: `calc(${size}% - ${gutterOffset}px)`,
+  };
+});
+
+const onGutterMouseDown = (event: MouseEvent) => {
+  event.preventDefault();
+  splitterContext.onGutterMouseDown(event, panelIndex.value);
+};
+
+const onGutterKeyDown = (event: KeyboardEvent) => {
+  const step = 1; // 1% step
+  let handled = false;
+
+  if (splitterContext.layout.value === "horizontal") {
+    if (event.key === "ArrowLeft") {
+      adjustSize(-step);
+      handled = true;
+    } else if (event.key === "ArrowRight") {
+      adjustSize(step);
+      handled = true;
+    }
+  } else {
+    if (event.key === "ArrowUp") {
+      adjustSize(-step);
+      handled = true;
+    } else if (event.key === "ArrowDown") {
+      adjustSize(step);
+      handled = true;
+    }
+  }
+
+  if (handled) {
+    event.preventDefault();
+  }
+};
+
+const adjustSize = (delta: any) => {
+  const prevIndex = panelIndex.value;
+  const nextIndex = panelIndex.value + 1;
+  const sizes = splitterContext.panelSizes.value;
+
+  let newPrevSize = sizes[prevIndex] + delta;
+  let newNextSize = sizes[nextIndex] - delta;
+
+  const minSize = 5;
+  if (newPrevSize >= minSize && newNextSize >= minSize) {
+    sizes[prevIndex] = newPrevSize;
+    sizes[nextIndex] = newNextSize;
+  }
+};
+</script>

package/src/components/Stats/Stats.scss

@@ -0,0 +1,54 @@
+@use "../../../dist/scss/tokens" as *;
+@use "../../scss/mixins/accent-gradient.scss" as *;
+
+$c: stats;
+
+.#{$c} {
+  display: grid;
+  gap: 2rem;
+  width: 100%;
+  text-align: center;
+}
+
+.#{$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: repeat(2, 1fr) !important; }
+}
+
+.#{$c}__item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1.5rem;
+}
+
+.#{$c}__icon {
+  font-size: 1.5rem;
+  margin-bottom: 0.5rem;
+
+  i {
+    @include accent-gradient-text();
+  }
+}
+
+.#{$c}__value {
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: $text-heading;
+  line-height: 1.1;
+}
+
+.#{$c}__prefix,
+.#{$c}__suffix {
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+.#{$c}__label {
+  font-size: 0.9375rem;
+  color: $text-secondary;
+}

package/src/components/Stats/Stats.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="stats" :class="`stats--cols-${columns}`">
+    <div v-for="(stat, i) in stats" :key="i" class="stats__item">
+      <div v-if="stat.icon" class="stats__icon">
+        <i :class="stat.icon" aria-hidden="true" />
+      </div>
+      <div class="stats__value">
+        <span v-if="stat.prefix" class="stats__prefix">{{ stat.prefix }}</span>
+        {{ stat.value }}
+        <span v-if="stat.suffix" class="stats__suffix">{{ stat.suffix }}</span>
+      </div>
+      <div class="stats__label">{{ stat.label }}</div>
+    </div>
+  </div>
+</template>
+
+<style src="./Stats.scss"></style>
+
+<script setup lang="ts">
+import type { StatsProps } from '../../types';
+
+defineOptions({ name: 'FtpStats' });
+
+withDefaults(defineProps<StatsProps>(), {
+  stats: () => [],
+  columns: 4,
+});
+</script>

package/src/components/Steps/Steps.scss

@@ -0,0 +1,164 @@
+@use "../../../dist/scss/tokens" as *;
+@use "../../scss/mixins/accent-gradient.scss" as *;
+
+$c: steps;
+
+.#{$c} {
+  width: 100%;
+}
+
+.#{$c}__list {
+  display: flex;
+  align-items: flex-start;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.#{$c}__item {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  position: relative;
+
+  &:first-child {
+    flex: 0 0 auto;
+  }
+}
+
+.#{$c}__connector {
+  flex: 1;
+  height: var(--steps-connector-height, $steps-connector-height);
+  background-color: var(--steps-connector-color-incomplete, $steps-connector-color-incomplete);
+  margin: 0 var(--steps-gap, $steps-gap);
+  transition: background-color 200ms ease;
+}
+
+.#{$c}__connector--complete {
+  @include accent-gradient($angle: 90deg);
+}
+
+.#{$c}__marker-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--steps-label-gap, $steps-label-gap);
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  transition: opacity 150ms ease;
+
+  &:disabled {
+    cursor: default;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible .#{$c}__marker {
+    outline: var(--steps-focus-ringWidth, $steps-focus-ringWidth) solid var(--steps-focus-ringColor, $steps-focus-ringColor);
+    outline-offset: var(--steps-focus-ringOffset, $steps-focus-ringOffset);
+  }
+}
+
+.#{$c}__marker {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--steps-marker-size, $steps-marker-size);
+  height: var(--steps-marker-size, $steps-marker-size);
+  border-radius: 50%;
+  border: var(--steps-marker-border-width, $steps-marker-border-width) solid;
+  transition:
+    background-color 200ms ease,
+    border-color 200ms ease,
+    color 200ms ease;
+}
+
+.#{$c}__number {
+  font-size: var(--steps-marker-fontSize, $steps-marker-fontSize);
+  font-weight: var(--steps-marker-fontWeight, $steps-marker-fontWeight);
+  line-height: 1;
+}
+
+.#{$c}__check-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.#{$c}__label {
+  font-size: var(--steps-label-fontSize, $steps-label-fontSize);
+  font-weight: var(--steps-label-fontWeight, $steps-label-fontWeight);
+  white-space: nowrap;
+  transition: color 200ms ease;
+}
+
+// Incomplete state
+.#{$c}__item--incomplete {
+  .#{$c}__marker {
+    background-color: var(--steps-marker-background-incomplete, $steps-marker-background-incomplete);
+    border-color: var(--steps-marker-border-color-incomplete, $steps-marker-border-color-incomplete);
+    color: var(--steps-marker-text-incomplete, $steps-marker-text-incomplete);
+  }
+
+  .#{$c}__label {
+    color: var(--steps-label-color-incomplete, $steps-label-color-incomplete);
+  }
+
+  .#{$c}__marker-wrapper:hover:not(:disabled) {
+    opacity: 0.8;
+  }
+}
+
+// Active state
+.#{$c}__item--active {
+  .#{$c}__marker {
+    @include accent-gradient();
+    border-color: var(--accent-gradient-start, $accent-gradient-start);
+    color: var(--steps-marker-text-active, $steps-marker-text-active);
+    text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+  }
+
+  .#{$c}__label {
+    color: var(--steps-label-color-active, $steps-label-color-active);
+  }
+}
+
+// Complete state
+.#{$c}__item--complete {
+  .#{$c}__marker {
+    @include accent-gradient();
+    border-color: var(--accent-gradient-start, $accent-gradient-start);
+    color: var(--steps-marker-text-complete, $steps-marker-text-complete);
+    text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+  }
+
+  .#{$c}__label {
+    color: var(--steps-label-color-complete, $steps-label-color-complete);
+  }
+
+  .#{$c}__marker-wrapper:hover:not(:disabled) {
+    opacity: 0.8;
+  }
+}
+
+// Disabled state
+.#{$c}__item--disabled {
+  .#{$c}__marker-wrapper {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+
+// Readonly mode
+.#{$c}--readonly {
+  .#{$c}__marker-wrapper {
+    cursor: default;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+}

package/src/components/Steps/Steps.vue

@@ -0,0 +1,100 @@
+<template>
+  <nav class="steps" :class="additionalClasses" aria-label="Progress steps">
+    <ol class="steps__list">
+      <li
+        v-for="(step, index) in model"
+        :key="index"
+        class="steps__item"
+        :class="getStepClasses(index)"
+      >
+        <!-- Connector (before step, except first) -->
+        <div
+          v-if="index > 0"
+          class="steps__connector"
+          :class="{ 'steps__connector--complete': index <= activeIndex }"
+        ></div>
+
+        <!-- Step content -->
+        <button
+          type="button"
+          class="steps__marker-wrapper"
+          :disabled="isReadonly || step.disabled"
+          :aria-current="index === activeIndex ? 'step' : undefined"
+          :aria-label="`Step ${index + 1}: ${step.label}`"
+          @click="onStepClick($event, step, index)"
+        >
+          <span class="steps__marker">
+            <svg
+              v-if="index < activeIndex"
+              class="steps__check-icon"
+              viewBox="0 0 16 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              aria-hidden="true"
+            >
+              <path
+                d="M3 8.5L6.5 12L13 4"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+            <span v-else class="steps__number">{{ index + 1 }}</span>
+          </span>
+          <span class="steps__label">{{ step.label }}</span>
+        </button>
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<style src="./Steps.scss"></style>
+
+<script setup lang="ts">
+import type { StepsProps, StepsEmits } from '../../types';
+import { computed } from "vue";
+
+defineOptions({ name: 'FtpSteps' });
+
+const props = withDefaults(defineProps<StepsProps>(), {
+  model: () => [],
+  activeIndex: 0,
+  isReadonly: false,
+});
+
+const emit = defineEmits(["update:activeIndex", "step-click"]);
+
+const additionalClasses = computed(() =>
+  [props.isReadonly && "steps--readonly"].filter(Boolean).join(" ")
+);
+
+const getStepClasses = (index: any) => {
+  const classes = [];
+
+  if (index < props.activeIndex) {
+    classes.push("steps__item--complete");
+  } else if (index === props.activeIndex) {
+    classes.push("steps__item--active");
+  } else {
+    classes.push("steps__item--incomplete");
+  }
+
+  if (props.model[index]?.disabled) {
+    classes.push("steps__item--disabled");
+  }
+
+  return classes.join(" ");
+};
+
+const onStepClick = (event: MouseEvent, step: any, index: any) => {
+  if (props.isReadonly || step.disabled) return;
+
+  emit("update:activeIndex", index);
+  emit("step-click", {
+    originalEvent: event,
+    item: step,
+    index,
+  });
+};
+</script>