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

package/src/components/InputOtp/InputOtp.vue

@@ -0,0 +1,230 @@
+<template>
+  <div class="input-otp" :class="additionalClasses">
+    <div class="input-otp__container">
+      <template v-for="(_, index) in length" :key="index">
+        <!-- Separator (optional, e.g., between groups) -->
+        <span
+          v-if="separator && index > 0 && index % separator === 0"
+          class="input-otp__separator"
+        ></span>
+
+        <input
+          ref="inputRefs"
+          type="text"
+          :inputmode="integerOnly ? 'numeric' : 'text'"
+          :pattern="integerOnly ? '[0-9]*' : undefined"
+          class="input-otp__cell"
+          :class="{
+            'input-otp__cell--filled': values[index] !== '',
+            'input-otp__cell--focus': focusedIndex === index,
+          }"
+          :value="mask && values[index] ? maskChar : values[index]"
+          :disabled="isDisabled"
+          :aria-label="`Digit ${index + 1} of ${length}`"
+          maxlength="1"
+          autocomplete="one-time-code"
+          @input="onInput($event, index)"
+          @keydown="onKeyDown($event, index)"
+          @focus="onFocus(index)"
+          @blur="onBlur"
+          @paste="onPaste($event, index)"
+        />
+      </template>
+    </div>
+  </div>
+</template>
+
+<style src="./InputOtp.scss"></style>
+
+<script setup lang="ts">
+import type { InputOtpProps, InputOtpEmits } from '../../types';
+import { computed, ref, watch, nextTick, onMounted } from "vue";
+
+defineOptions({ name: 'FtpInputOtp' });
+
+const props = withDefaults(defineProps<InputOtpProps>(), {
+  modelValue: "",
+  length: 4,
+  mask: false,
+  maskChar: "*",
+  integerOnly: true,
+  separator: 0,
+  isDisabled: false,
+  isInvalid: false,
+  autoFocus: false,
+});
+
+const emit = defineEmits(["update:modelValue", "change", "complete"]);
+
+const inputRefs = ref<(HTMLInputElement | null)[]>([]);
+const focusedIndex = ref(-1);
+const values = ref<string[]>([]);
+
+// Initialize values from modelValue
+const initializeValues = () => {
+  const newValues = new Array(props.length).fill("");
+  const modelChars = props.modelValue.split("");
+  for (let i = 0; i < Math.min(modelChars.length, props.length); i++) {
+    newValues[i] = modelChars[i];
+  }
+  values.value = newValues;
+};
+
+initializeValues();
+
+watch(
+  () => props.modelValue,
+  () => {
+    initializeValues();
+  }
+);
+
+watch(
+  () => props.length,
+  () => {
+    initializeValues();
+  }
+);
+
+const additionalClasses = computed(() =>
+  [
+    props.isDisabled && "input-otp--disabled",
+    props.isInvalid && "input-otp--invalid",
+  ]
+    .filter(Boolean)
+    .join(" ")
+);
+
+const emitValue = () => {
+  const newValue = values.value.join("");
+  emit("update:modelValue", newValue);
+  emit("change", { value: newValue });
+
+  // Check if complete
+  if (newValue.length === props.length && !values.value.includes("")) {
+    emit("complete", { value: newValue });
+  }
+};
+
+const isValidChar = (char: any) => {
+  if (props.integerOnly) {
+    return /^[0-9]$/.test(char);
+  }
+  return char.length === 1;
+};
+
+const onInput = (event: Event, index: any) => {
+  const inputValue = (event.target as HTMLInputElement).value;
+  const char = inputValue.slice(-1);
+
+  if (char && !isValidChar(char)) {
+    (event.target as HTMLInputElement).value = values.value[index];
+    return;
+  }
+
+  values.value[index] = char;
+  emitValue();
+
+  // Move to next cell
+  if (char && index < props.length - 1) {
+    nextTick(() => {
+      inputRefs.value[index + 1]?.focus();
+    });
+  }
+};
+
+const onKeyDown = (event: KeyboardEvent, index: any) => {
+  switch (event.key) {
+    case "Backspace":
+      if (values.value[index] === "" && index > 0) {
+        // Move to previous cell and clear it
+        nextTick(() => {
+          inputRefs.value[index - 1]?.focus();
+        });
+      } else {
+        values.value[index] = "";
+        emitValue();
+      }
+      break;
+
+    case "Delete":
+      values.value[index] = "";
+      emitValue();
+      break;
+
+    case "ArrowLeft":
+      if (index > 0) {
+        event.preventDefault();
+        inputRefs.value[index - 1]?.focus();
+      }
+      break;
+
+    case "ArrowRight":
+      if (index < props.length - 1) {
+        event.preventDefault();
+        inputRefs.value[index + 1]?.focus();
+      }
+      break;
+
+    case "Home":
+      event.preventDefault();
+      inputRefs.value[0]?.focus();
+      break;
+
+    case "End":
+      event.preventDefault();
+      inputRefs.value[props.length - 1]?.focus();
+      break;
+  }
+};
+
+const onFocus = (index: any) => {
+  focusedIndex.value = index;
+  // Select existing content
+  nextTick(() => {
+    inputRefs.value[index]?.select();
+  });
+};
+
+const onBlur = () => {
+  focusedIndex.value = -1;
+};
+
+const onPaste = (event: ClipboardEvent, index: any) => {
+  event.preventDefault();
+  const pastedData = event.clipboardData?.getData("text") || "";
+  const chars = pastedData.split("").filter((char: any) => isValidChar(char));
+
+  // Fill from current index
+  for (let i = 0; i < chars.length && index + i < props.length; i++) {
+    values.value[index + i] = chars[i];
+  }
+
+  emitValue();
+
+  // Focus appropriate cell
+  const newIndex = Math.min(index + chars.length, props.length - 1);
+  nextTick(() => {
+    inputRefs.value[newIndex]?.focus();
+  });
+};
+
+// Focus first cell on mount if autoFocus
+onMounted(() => {
+  if (props.autoFocus && inputRefs.value[0]) {
+    inputRefs.value[0].focus();
+  }
+});
+
+// Expose methods
+defineExpose({
+  focus: () => inputRefs.value[0]?.focus(),
+  clear: () => {
+    values.value = new Array(props.length).fill("");
+    emitValue();
+    nextTick(() => {
+      inputRefs.value[0]?.focus();
+    });
+  },
+});
+</script>

package/src/components/InputSwitch/InputSwitch.scss

@@ -0,0 +1,131 @@
+@use "../../../dist/scss/tokens" as *;
+@use "../../scss/mixins/accent-gradient.scss" as *;
+
+$c: input-switch;
+
+.#{$c} {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--inputSwitch-label-gap, $inputSwitch-label-gap);
+  cursor: pointer;
+  user-select: none;
+}
+
+.#{$c}__input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+}
+
+.#{$c}__track {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  background-color: var(--inputSwitch-track-background-off, $inputSwitch-track-background-off);
+  border-radius: 9999px;
+  transition: background-color 0.2s ease;
+}
+
+.#{$c}__thumb {
+  position: absolute;
+  left: var(--inputSwitch-thumb-offset, $inputSwitch-thumb-offset);
+  background-color: var(--inputSwitch-thumb-color-default, $inputSwitch-thumb-color-default);
+  border-radius: 50%;
+  box-shadow: var(--inputSwitch-thumb-shadow, $inputSwitch-thumb-shadow);
+  transition: transform 0.2s ease;
+}
+
+.#{$c}__label {
+  color: var(--inputSwitch-label-color-default, $inputSwitch-label-color-default);
+  line-height: 1.4;
+}
+
+// Focus state
+.#{$c}__input:focus-visible ~ .#{$c}__track {
+  outline: var(--inputSwitch-focus-ringWidth, $inputSwitch-focus-ringWidth) solid var(--inputSwitch-focus-ringColor, $inputSwitch-focus-ringColor);
+  outline-offset: var(--inputSwitch-focus-ringOffset, $inputSwitch-focus-ringOffset);
+}
+
+// Checked state
+.#{$c}--checked {
+  .#{$c}__track {
+    @include accent-gradient($angle: 90deg);
+  }
+}
+
+// Disabled state
+.#{$c}--disabled {
+  cursor: not-allowed;
+
+  .#{$c}__track {
+    background-color: var(--inputSwitch-track-background-disabled, $inputSwitch-track-background-disabled);
+  }
+
+  .#{$c}__label {
+    color: var(--inputSwitch-label-color-disabled, $inputSwitch-label-color-disabled);
+  }
+}
+
+// Sizes
+.#{$c}--size-sm {
+  .#{$c}__track {
+    width: var(--inputSwitch-width-sm, $inputSwitch-width-sm);
+    height: var(--inputSwitch-height-sm, $inputSwitch-height-sm);
+  }
+
+  .#{$c}__thumb {
+    width: var(--inputSwitch-thumb-size-sm, $inputSwitch-thumb-size-sm);
+    height: var(--inputSwitch-thumb-size-sm, $inputSwitch-thumb-size-sm);
+  }
+
+  &.#{$c}--checked .#{$c}__thumb {
+    transform: translateX(calc(var(--inputSwitch-width-sm, $inputSwitch-width-sm) - var(--inputSwitch-thumb-size-sm, $inputSwitch-thumb-size-sm) - var(--inputSwitch-thumb-offset, $inputSwitch-thumb-offset) * 2));
+  }
+
+  .#{$c}__label {
+    font-size: 14px;
+  }
+}
+
+.#{$c}--size-md {
+  .#{$c}__track {
+    width: var(--inputSwitch-width-md, $inputSwitch-width-md);
+    height: var(--inputSwitch-height-md, $inputSwitch-height-md);
+  }
+
+  .#{$c}__thumb {
+    width: var(--inputSwitch-thumb-size-md, $inputSwitch-thumb-size-md);
+    height: var(--inputSwitch-thumb-size-md, $inputSwitch-thumb-size-md);
+  }
+
+  &.#{$c}--checked .#{$c}__thumb {
+    transform: translateX(calc(var(--inputSwitch-width-md, $inputSwitch-width-md) - var(--inputSwitch-thumb-size-md, $inputSwitch-thumb-size-md) - var(--inputSwitch-thumb-offset, $inputSwitch-thumb-offset) * 2));
+  }
+
+  .#{$c}__label {
+    font-size: 15px;
+  }
+}
+
+.#{$c}--size-lg {
+  .#{$c}__track {
+    width: var(--inputSwitch-width-lg, $inputSwitch-width-lg);
+    height: var(--inputSwitch-height-lg, $inputSwitch-height-lg);
+  }
+
+  .#{$c}__thumb {
+    width: var(--inputSwitch-thumb-size-lg, $inputSwitch-thumb-size-lg);
+    height: var(--inputSwitch-thumb-size-lg, $inputSwitch-thumb-size-lg);
+  }
+
+  &.#{$c}--checked .#{$c}__thumb {
+    transform: translateX(calc(var(--inputSwitch-width-lg, $inputSwitch-width-lg) - var(--inputSwitch-thumb-size-lg, $inputSwitch-thumb-size-lg) - var(--inputSwitch-thumb-offset, $inputSwitch-thumb-offset) * 2));
+  }
+
+  .#{$c}__label {
+    font-size: 16px;
+  }
+}

package/src/components/InputSwitch/InputSwitch.vue

@@ -0,0 +1,49 @@
+<template>
+  <label class="input-switch" :class="additionalClasses">
+    <input
+      type="checkbox"
+      class="input-switch__input"
+      :checked="modelValue"
+      :disabled="isDisabled"
+      :name="name"
+      role="switch"
+      :aria-checked="modelValue"
+      @change="onChange"
+    />
+    <span class="input-switch__track">
+      <span class="input-switch__thumb"></span>
+    </span>
+    <span v-if="label || $slots.default" class="input-switch__label">
+      <slot>{{ label }}</slot>
+    </span>
+  </label>
+</template>
+
+<style src="./InputSwitch.scss"></style>
+
+<script setup lang="ts">
+import type { InputSwitchProps, InputSwitchEmits } from '../../types';
+import { computed } from "vue";
+
+defineOptions({ name: 'FtpInputSwitch' });
+
+const props = withDefaults(defineProps<InputSwitchProps>(), {
+  modelValue: false,
+  size: "md",
+  isDisabled: false,
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const onChange = (event: Event) => {
+  const checked = (event.target as HTMLInputElement).checked;
+  emit("update:modelValue", checked);
+  emit("change", { value: checked, originalEvent: event });
+};
+
+const additionalClasses = computed(() => [
+  `input-switch--size-${props.size}`,
+  props.isDisabled && "input-switch--disabled",
+  props.modelValue && "input-switch--checked",
+].filter(Boolean).join(" "));
+</script>

package/src/components/InputText/InputText.scss

@@ -0,0 +1,61 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: input-text;
+
+.#{$c} {
+  display: block;
+  width: 100%;
+  appearance: none;
+  background-color: var(--input-text-background-default, $input-text-background-default);
+  border: var(--input-text-border-width, $input-text-border-width) solid var(--input-text-border-color-default, $input-text-border-color-default);
+  border-radius: var(--input-text-radius, $input-text-radius);
+  padding: 0 var(--input-text-padding-x, $input-text-padding-x);
+  color: var(--input-text-text-default, $input-text-text-default);
+  transition: all 0.15s ease;
+
+  &::placeholder {
+    color: var(--input-text-text-placeholder, $input-text-text-placeholder);
+  }
+
+  &:hover:not(:disabled) {
+    border-color: var(--input-text-border-color-hover, $input-text-border-color-hover);
+  }
+
+  &:focus {
+    outline: var(--input-text-focus-ringWidth, $input-text-focus-ringWidth) solid var(--input-text-focus-ringColor, $input-text-focus-ringColor);
+    outline-offset: var(--input-text-focus-ringOffset, $input-text-focus-ringOffset);
+    border-color: var(--input-text-border-color-focus, $input-text-border-color-focus);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    background-color: var(--input-text-background-disabled, $input-text-background-disabled);
+    border-color: var(--input-text-border-color-disabled, $input-text-border-color-disabled);
+    color: var(--input-text-text-disabled, $input-text-text-disabled);
+  }
+}
+
+// Invalid state
+.#{$c}--invalid {
+  border-color: var(--input-text-border-color-error, $input-text-border-color-error);
+
+  &:focus {
+    border-color: var(--input-text-border-color-error, $input-text-border-color-error);
+  }
+}
+
+// Sizes
+.#{$c}--size-sm {
+  height: var(--input-text-height-sm, $input-text-height-sm);
+  font-size: var(--input-text-fontSize-sm, $input-text-fontSize-sm);
+}
+
+.#{$c}--size-md {
+  height: var(--input-text-height-md, $input-text-height-md);
+  font-size: var(--input-text-fontSize-md, $input-text-fontSize-md);
+}
+
+.#{$c}--size-lg {
+  height: var(--input-text-height-lg, $input-text-height-lg);
+  font-size: var(--input-text-fontSize-lg, $input-text-fontSize-lg);
+}

package/src/components/InputText/InputText.vue

@@ -0,0 +1,71 @@
+<template>
+  <input
+    ref="inputRef"
+    class="input-text"
+    :class="additionalClasses"
+    :type="type"
+    :value="modelValue"
+    :placeholder="placeholder"
+    :disabled="isDisabled"
+    :name="name"
+    :aria-invalid="isInvalid || undefined"
+    :aria-describedby="ariaDescribedby || undefined"
+    @input="onInput"
+    @change="onChange"
+    @focus="onFocus"
+    @blur="onBlur"
+  />
+</template>
+
+<style src="./InputText.scss"></style>
+
+<script setup lang="ts">
+import type { InputTextProps, InputTextEmits } from '../../types';
+import { computed, ref } from "vue";
+
+defineOptions({ name: 'FtpInputText' });
+
+const props = withDefaults(defineProps<InputTextProps>(), {
+  modelValue: "",
+  type: "text",
+  size: "md",
+  isDisabled: false,
+  isInvalid: false,
+});
+
+const emit = defineEmits(["update:modelValue", "input", "change", "focus", "blur"]);
+
+const inputRef = ref<HTMLInputElement | null>(null);
+
+const onInput = (event: Event) => {
+  const value = (event.target as HTMLInputElement).value;
+  emit("update:modelValue", value);
+  emit("input", { value, originalEvent: event });
+};
+
+const onChange = (event: Event) => {
+  emit("change", { value: (event.target as HTMLInputElement).value, originalEvent: event });
+};
+
+const onFocus = (event: FocusEvent) => {
+  emit("focus", { originalEvent: event });
+};
+
+const onBlur = (event: FocusEvent) => {
+  emit("blur", { originalEvent: event });
+};
+
+const additionalClasses = computed(() => [
+  `input-text--size-${props.size}`,
+  props.isDisabled && "input-text--disabled",
+  props.isInvalid && "input-text--invalid",
+].filter(Boolean).join(" "));
+
+// Expose input ref for programmatic focus
+defineExpose({
+  focus: () => inputRef.value?.focus(),
+  blur: () => inputRef.value?.blur(),
+  select: () => inputRef.value?.select(),
+  el: inputRef,
+});
+</script>

package/src/components/Knob/Knob.scss

@@ -0,0 +1,92 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: knob;
+
+.#{$c} {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.#{$c}__svg {
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  touch-action: none;
+  transition: opacity 150ms ease;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: var(--knob-focus-ringWidth, $knob-focus-ringWidth) solid var(--knob-focus-ringColor, $knob-focus-ringColor);
+    outline-offset: var(--knob-focus-ringOffset, $knob-focus-ringOffset);
+    border-radius: 50%;
+  }
+}
+
+.#{$c}__track {
+  stroke: var(--knob-track-color, $knob-track-color);
+}
+
+.#{$c}__fill {
+  stroke: var(--knob-fill-color-default, $knob-fill-color-default);
+  transition: stroke-dashoffset var(--knob-transition-duration, $knob-transition-duration) ease;
+}
+
+.#{$c}__value {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-weight: var(--knob-valueText-fontWeight, $knob-valueText-fontWeight);
+  color: var(--knob-valueText-color-default, $knob-valueText-color-default);
+  pointer-events: none;
+  user-select: none;
+}
+
+// Sizes
+.#{$c}--size-sm {
+  width: var(--knob-size-sm, $knob-size-sm);
+  height: var(--knob-size-sm, $knob-size-sm);
+
+  .#{$c}__value {
+    font-size: var(--knob-valueText-fontSize-sm, $knob-valueText-fontSize-sm);
+  }
+}
+
+.#{$c}--size-md {
+  width: var(--knob-size-md, $knob-size-md);
+  height: var(--knob-size-md, $knob-size-md);
+
+  .#{$c}__value {
+    font-size: var(--knob-valueText-fontSize-md, $knob-valueText-fontSize-md);
+  }
+}
+
+.#{$c}--size-lg {
+  width: var(--knob-size-lg, $knob-size-lg);
+  height: var(--knob-size-lg, $knob-size-lg);
+
+  .#{$c}__value {
+    font-size: var(--knob-valueText-fontSize-lg, $knob-valueText-fontSize-lg);
+  }
+}
+
+// Disabled state
+.#{$c}--disabled {
+  .#{$c}__svg {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .#{$c}__fill {
+    stroke: var(--knob-fill-color-disabled, $knob-fill-color-disabled);
+  }
+
+  .#{$c}__value {
+    color: var(--knob-valueText-color-disabled, $knob-valueText-color-disabled);
+  }
+}