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

package/src/components/CommandPalette/CommandPalette.scss

@@ -0,0 +1,143 @@
+@use "../../../dist/scss/tokens" as *;
+@use "../../scss/mixins/elevation" as *;
+
+$c: command-palette;
+
+.#{$c}__overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 20vh;
+  background-color: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+}
+
+.#{$c} {
+  @include elevation(4);
+  width: 100%;
+  max-width: 560px;
+  // Component token overrides
+  background: var(--surface-overlay, #1e1e2e);
+  border-color: var(--surface-border, rgba(255, 255, 255, 0.1));
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+  overflow: hidden;
+}
+
+.#{$c}__search {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.875rem 1rem;
+  border-bottom: 1px solid var(--surface-border, rgba(255, 255, 255, 0.1));
+}
+
+.#{$c}__search-icon {
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--text-muted, rgba(255, 255, 255, 0.5));
+}
+
+.#{$c}__input {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--text-primary, #fff);
+  font-size: 1rem;
+
+  &::placeholder {
+    color: var(--text-muted, rgba(255, 255, 255, 0.4));
+  }
+}
+
+.#{$c}__kbd {
+  flex-shrink: 0;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.15));
+  background: var(--surface-ground, rgba(255, 255, 255, 0.05));
+  color: var(--text-muted, rgba(255, 255, 255, 0.5));
+  font-size: 0.75rem;
+  font-family: inherit;
+}
+
+.#{$c}__list {
+  max-height: 320px;
+  overflow-y: auto;
+  padding: 0.5rem;
+}
+
+.#{$c}__group-label {
+  padding: 0.5rem 0.75rem 0.25rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-muted, rgba(255, 255, 255, 0.5));
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.#{$c}__item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.625rem 0.75rem;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  color: var(--text-primary, #fff);
+  transition: background-color 0.1s ease;
+
+  &--active {
+    background-color: var(--surface-hover, rgba(255, 255, 255, 0.08));
+  }
+}
+
+.#{$c}__item-icon {
+  flex-shrink: 0;
+  font-size: 1.125rem;
+  opacity: 0.7;
+}
+
+.#{$c}__item-label {
+  flex: 1;
+}
+
+.#{$c}__item-shortcut {
+  flex-shrink: 0;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.15));
+  background: var(--surface-ground, rgba(255, 255, 255, 0.05));
+  color: var(--text-muted, rgba(255, 255, 255, 0.5));
+  font-size: 0.75rem;
+  font-family: inherit;
+}
+
+.#{$c}__empty {
+  padding: 2rem;
+  text-align: center;
+  color: var(--text-muted, rgba(255, 255, 255, 0.5));
+}
+
+// Transitions
+.command-palette-fade-enter-active,
+.command-palette-fade-leave-active {
+  transition: opacity 0.15s ease;
+}
+.command-palette-fade-enter-from,
+.command-palette-fade-leave-to {
+  opacity: 0;
+}
+
+.command-palette-scale-enter-active,
+.command-palette-scale-leave-active {
+  transition: transform 0.15s ease, opacity 0.15s ease;
+}
+.command-palette-scale-enter-from,
+.command-palette-scale-leave-to {
+  transform: scale(0.95);
+  opacity: 0;
+}

package/src/components/CommandPalette/CommandPalette.vue

@@ -0,0 +1,165 @@
+<template>
+  <Teleport to="body">
+    <Transition name="command-palette-fade">
+      <div
+        v-if="open"
+        class="command-palette__overlay"
+        @click="onOverlayClick"
+        @keydown.escape.prevent="close"
+      >
+        <Transition name="command-palette-scale">
+          <div
+            v-if="open"
+            ref="paletteRef"
+            class="command-palette"
+            role="dialog"
+            aria-modal="true"
+            aria-label="Command palette"
+            @click.stop
+            @keydown="onKeyDown"
+          >
+            <div class="command-palette__search">
+              <svg class="command-palette__search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+              </svg>
+              <input
+                ref="inputRef"
+                v-model="query"
+                class="command-palette__input"
+                type="text"
+                :placeholder="placeholder"
+                aria-label="Search commands"
+                autocomplete="off"
+              />
+              <kbd class="command-palette__kbd">ESC</kbd>
+            </div>
+
+            <div v-if="filteredCommands.length > 0" class="command-palette__list" role="listbox">
+              <template v-for="(group, gi) in groupedCommands" :key="group.label ?? gi">
+                <div v-if="group.label" class="command-palette__group-label">{{ group.label }}</div>
+                <div
+                  v-for="cmd in group.items"
+                  :key="cmd.id"
+                  class="command-palette__item"
+                  :class="{ 'command-palette__item--active': cmd.id === activeId }"
+                  role="option"
+                  :aria-selected="cmd.id === activeId"
+                  @click="selectCommand(cmd)"
+                  @mouseenter="activeId = cmd.id"
+                >
+                  <i v-if="cmd.icon" :class="cmd.icon" class="command-palette__item-icon" aria-hidden="true"></i>
+                  <span class="command-palette__item-label">{{ cmd.label }}</span>
+                  <kbd v-if="cmd.shortcut" class="command-palette__item-shortcut">{{ cmd.shortcut }}</kbd>
+                </div>
+              </template>
+            </div>
+
+            <div v-else class="command-palette__empty">
+              No results found
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style src="./CommandPalette.scss"></style>
+
+<script setup lang="ts">
+import type { CommandPaletteProps, CommandPaletteCommand } from '../../types';
+import { computed, ref, watch, nextTick, onMounted, onUnmounted } from 'vue';
+
+defineOptions({ name: 'FtpCommandPalette' });
+
+const props = withDefaults(defineProps<CommandPaletteProps>(), {
+  placeholder: 'Type a command or search…',
+  open: false,
+});
+
+const emit = defineEmits<{
+  (e: 'select', command: CommandPaletteCommand): void
+  (e: 'close'): void
+  (e: 'update:open', value: boolean): void
+}>();
+
+const paletteRef = ref<HTMLElement | null>(null);
+const inputRef = ref<HTMLInputElement | null>(null);
+const query = ref('');
+const activeId = ref<string | null>(null);
+
+const filteredCommands = computed(() => {
+  const q = query.value.toLowerCase().trim();
+  if (!q) return props.commands;
+  return props.commands.filter(c => c.label.toLowerCase().includes(q));
+});
+
+const groupedCommands = computed(() => {
+  const groups = new Map<string | undefined, CommandPaletteCommand[]>();
+  for (const cmd of filteredCommands.value) {
+    const key = cmd.group;
+    if (!groups.has(key)) groups.set(key, []);
+    groups.get(key)!.push(cmd);
+  }
+  return Array.from(groups.entries()).map(([label, items]) => ({ label, items }));
+});
+
+const close = () => {
+  emit('update:open', false);
+  emit('close');
+};
+
+const selectCommand = (cmd: CommandPaletteCommand) => {
+  emit('select', cmd);
+  if (cmd.action) cmd.action();
+  close();
+};
+
+const onOverlayClick = () => close();
+
+const onKeyDown = (event: KeyboardEvent) => {
+  const cmds = filteredCommands.value;
+  if (!cmds.length) return;
+
+  const currentIndex = cmds.findIndex(c => c.id === activeId.value);
+
+  if (event.key === 'ArrowDown') {
+    event.preventDefault();
+    const next = currentIndex < cmds.length - 1 ? currentIndex + 1 : 0;
+    activeId.value = cmds[next].id;
+  } else if (event.key === 'ArrowUp') {
+    event.preventDefault();
+    const prev = currentIndex > 0 ? currentIndex - 1 : cmds.length - 1;
+    activeId.value = cmds[prev].id;
+  } else if (event.key === 'Enter') {
+    event.preventDefault();
+    const cmd = cmds.find(c => c.id === activeId.value);
+    if (cmd) selectCommand(cmd);
+  }
+};
+
+const onGlobalKeyDown = (event: KeyboardEvent) => {
+  if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
+    event.preventDefault();
+    emit('update:open', !props.open);
+  }
+};
+
+watch(() => props.open, async (val) => {
+  if (val) {
+    query.value = '';
+    activeId.value = filteredCommands.value[0]?.id ?? null;
+    await nextTick();
+    inputRef.value?.focus();
+    document.body.style.overflow = 'hidden';
+  } else {
+    document.body.style.overflow = '';
+  }
+});
+
+onMounted(() => document.addEventListener('keydown', onGlobalKeyDown));
+onUnmounted(() => {
+  document.removeEventListener('keydown', onGlobalKeyDown);
+  document.body.style.overflow = '';
+});
+</script>

package/src/components/ConfirmDialog/ConfirmDialog.scss

@@ -0,0 +1,177 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: confirm-dialog;
+
+// Overlay backdrop
+.#{$c}__overlay {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--confirmDialog-zIndex-overlay, $confirmDialog-zIndex-overlay);
+  background-color: var(--confirmDialog-overlay-background, $confirmDialog-overlay-background);
+}
+
+// Dialog container
+.#{$c} {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--confirmDialog-background-default, $confirmDialog-background-default);
+  border-radius: var(--confirmDialog-radius, $confirmDialog-radius);
+  box-shadow: var(--confirmDialog-shadow, $confirmDialog-shadow);
+  border: var(--confirmDialog-border-width, $confirmDialog-border-width) solid var(--confirmDialog-border-color, $confirmDialog-border-color);
+  width: var(--confirmDialog-width, $confirmDialog-width);
+  max-width: 95vw;
+  z-index: var(--confirmDialog-zIndex-dialog, $confirmDialog-zIndex-dialog);
+  overflow: hidden;
+}
+
+// Header section
+.#{$c}__header {
+  display: flex;
+  align-items: center;
+  padding: var(--confirmDialog-padding-header, $confirmDialog-padding-header);
+  background-color: var(--confirmDialog-header-background, $confirmDialog-header-background);
+  border-bottom: 1px solid var(--confirmDialog-header-borderColor, $confirmDialog-header-borderColor);
+}
+
+.#{$c}__title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--confirmDialog-header-title-color, $confirmDialog-header-title-color);
+  margin: 0;
+  line-height: 1.4;
+}
+
+// Content section
+.#{$c}__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--confirmDialog-gap-content, $confirmDialog-gap-content);
+  padding: var(--confirmDialog-padding-content, $confirmDialog-padding-content);
+  text-align: center;
+}
+
+// Icon
+.#{$c}__icon {
+  width: var(--confirmDialog-icon-size, $confirmDialog-icon-size);
+  height: var(--confirmDialog-icon-size, $confirmDialog-icon-size);
+  flex-shrink: 0;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.#{$c}__icon--warning {
+  color: var(--confirmDialog-icon-color-warning, $confirmDialog-icon-color-warning);
+}
+
+.#{$c}__icon--danger {
+  color: var(--confirmDialog-icon-color-danger, $confirmDialog-icon-color-danger);
+}
+
+.#{$c}__icon--info {
+  color: var(--confirmDialog-icon-color-info, $confirmDialog-icon-color-info);
+}
+
+// Message
+.#{$c}__message {
+  margin: 0;
+  color: var(--confirmDialog-message-color, $confirmDialog-message-color);
+  font-size: var(--confirmDialog-message-fontSize, $confirmDialog-message-fontSize);
+  line-height: 1.5;
+}
+
+// Footer section
+.#{$c}__footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--confirmDialog-gap-buttons, $confirmDialog-gap-buttons);
+  padding: var(--confirmDialog-padding-footer, $confirmDialog-padding-footer);
+  border-top: 1px solid var(--confirmDialog-header-borderColor, $confirmDialog-header-borderColor);
+}
+
+// Buttons
+.#{$c}__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--inset-xs, $inset-xs) var(--inset-m, $inset-m);
+  font-size: 14px;
+  font-weight: 600;
+  border-radius: var(--radius-default, $radius-default);
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+  min-width: 80px;
+
+  &:focus-visible {
+    outline: 2px solid var(--focus-ring, $focus-ring);
+    outline-offset: 2px;
+  }
+}
+
+.#{$c}__button--reject {
+  background-color: transparent;
+  border-color: var(--border-default, $border-default);
+  color: var(--text-default, $text-default);
+
+  &:hover {
+    background-color: var(--surface-muted, $surface-muted);
+  }
+
+  &:active {
+    background-color: var(--surface-muted, $surface-muted);
+  }
+}
+
+.#{$c}__button--accept {
+  background-color: var(--intent-action-default, $intent-action-default);
+  border-color: var(--intent-action-default, $intent-action-default);
+  color: var(--text-inverse, $text-inverse);
+
+  &:hover {
+    background-color: var(--intent-action-hover, $intent-action-hover);
+    border-color: var(--intent-action-hover, $intent-action-hover);
+  }
+
+  &:active {
+    background-color: var(--intent-action-active, $intent-action-active);
+    border-color: var(--intent-action-active, $intent-action-active);
+  }
+}
+
+// Transition animations
+.#{$c}-fade-enter-active,
+.#{$c}-fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.#{$c}-fade-enter-from,
+.#{$c}-fade-leave-to {
+  opacity: 0;
+}
+
+.#{$c}-scale-enter-active {
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+.#{$c}-scale-leave-active {
+  transition: transform 0.15s ease, opacity 0.15s ease;
+}
+
+.#{$c}-scale-enter-from {
+  transform: scale(0.95);
+  opacity: 0;
+}
+
+.#{$c}-scale-leave-to {
+  transform: scale(0.95);
+  opacity: 0;
+}

package/src/components/ConfirmDialog/ConfirmDialog.vue

@@ -0,0 +1,162 @@
+<template>
+  <Teleport to="body">
+    <Transition name="confirm-dialog-fade">
+      <div
+        v-if="visible"
+        class="confirm-dialog__overlay"
+        @click="onOverlayClick"
+        @keydown.escape="onEscapeKey"
+      >
+        <Transition name="confirm-dialog-scale">
+          <div
+            v-if="visible"
+            ref="dialogRef"
+            class="confirm-dialog"
+            role="alertdialog"
+            aria-modal="true"
+            :aria-labelledby="headerId"
+            :aria-describedby="messageId"
+            @click.stop
+          >
+            <div v-if="header" class="confirm-dialog__header">
+              <span :id="headerId" class="confirm-dialog__title">{{ header }}</span>
+            </div>
+
+            <div class="confirm-dialog__content">
+              <div v-if="icon" class="confirm-dialog__icon" :class="iconClass">
+                <svg
+                  v-if="icon === 'warning'"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+                  <line x1="12" y1="9" x2="12" y2="13" />
+                  <line x1="12" y1="17" x2="12.01" y2="17" />
+                </svg>
+                <svg
+                  v-else-if="icon === 'danger'"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <circle cx="12" cy="12" r="10" />
+                  <line x1="15" y1="9" x2="9" y2="15" />
+                  <line x1="9" y1="9" x2="15" y2="15" />
+                </svg>
+                <svg
+                  v-else-if="icon === 'info'"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <circle cx="12" cy="12" r="10" />
+                  <line x1="12" y1="16" x2="12" y2="12" />
+                  <line x1="12" y1="8" x2="12.01" y2="8" />
+                </svg>
+              </div>
+              <p :id="messageId" class="confirm-dialog__message">{{ message }}</p>
+            </div>
+
+            <div class="confirm-dialog__footer">
+              <button
+                type="button"
+                class="confirm-dialog__button confirm-dialog__button--reject"
+                @click="reject"
+              >
+                {{ rejectLabel }}
+              </button>
+              <button
+                type="button"
+                class="confirm-dialog__button confirm-dialog__button--accept"
+                @click="accept"
+              >
+                {{ acceptLabel }}
+              </button>
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style src="./ConfirmDialog.scss"></style>
+
+<script setup lang="ts">
+import type { ConfirmDialogProps, ConfirmDialogEmits } from '../../types';
+import { computed, watch, onUnmounted } from "vue";
+
+defineOptions({ name: 'FtpConfirmDialog' });
+
+const props = withDefaults(defineProps<ConfirmDialogProps>(), {
+  visible: false,
+  header: "Confirmation",
+  message: "Are you sure you want to proceed?",
+  icon: "warning",
+  acceptLabel: "Yes",
+  rejectLabel: "No",
+  dismissableMask: false,
+  closeOnEscape: true,
+});
+
+const emit = defineEmits(["update:visible", "accept", "reject"]);
+
+const headerId = `confirm-dialog-header-${Math.random().toString(36).substr(2, 9)}`;
+const messageId = `confirm-dialog-message-${Math.random().toString(36).substr(2, 9)}`;
+
+const iconClass = computed(() => props.icon ? `confirm-dialog__icon--${props.icon}` : "");
+
+const close = () => {
+  emit("update:visible", false);
+};
+
+const accept = () => {
+  emit("accept");
+  close();
+};
+
+const reject = () => {
+  emit("reject");
+  close();
+};
+
+const onOverlayClick = () => {
+  if (props.dismissableMask) {
+    reject();
+  }
+};
+
+const onEscapeKey = (event: KeyboardEvent) => {
+  if (props.closeOnEscape && props.visible) {
+    event.preventDefault();
+    reject();
+  }
+};
+
+// Block scroll when dialog is open
+watch(
+  () => props.visible,
+  (newValue) => {
+    if (newValue) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+  }
+);
+
+// Cleanup on unmount
+onUnmounted(() => {
+  document.body.style.overflow = "";
+});
+</script>