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

package/src/components/Checkbox/Checkbox.vue

@@ -0,0 +1,75 @@
+<template>
+  <label class="checkbox" :class="additionalClasses">
+    <input
+      type="checkbox"
+      class="checkbox__input"
+      :checked="modelValue"
+      :disabled="isDisabled"
+      :name="name"
+      :value="value"
+      :aria-invalid="isInvalid || undefined"
+      @change="onChange"
+    />
+    <span class="checkbox__box">
+      <svg
+        class="checkbox__icon"
+        viewBox="0 0 12 12"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          v-if="!indeterminate"
+          d="M10 3L4.5 8.5L2 6"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          v-else
+          d="M2.5 6H9.5"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+        />
+      </svg>
+    </span>
+    <span v-if="label || $slots.default" class="checkbox__label">
+      <slot>{{ label }}</slot>
+    </span>
+  </label>
+</template>
+
+<style src="./Checkbox.scss"></style>
+
+<script setup lang="ts">
+import type { CheckboxProps, CheckboxEmits } from '../../types';
+import { computed } from "vue";
+
+defineOptions({ name: 'FtpCheckbox' });
+
+const props = withDefaults(defineProps<CheckboxProps>(), {
+  modelValue: false,
+  value: true,
+  size: "md",
+  isDisabled: false,
+  isInvalid: false,
+  indeterminate: false,
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const onChange = (event: Event) => {
+  const checked = (event.target as HTMLInputElement).checked;
+  emit("update:modelValue", checked);
+  emit("change", { checked, originalEvent: event });
+};
+
+const additionalClasses = computed(() => [
+  `checkbox--size-${props.size}`,
+  props.isDisabled && "checkbox--disabled",
+  props.isInvalid && "checkbox--invalid",
+  props.modelValue && "checkbox--checked",
+  props.indeterminate && "checkbox--indeterminate",
+].filter(Boolean).join(" "));
+</script>

package/src/components/Chip/Chip.scss

@@ -0,0 +1,83 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: chip;
+
+.#{$c} {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--chip-gap, $chip-gap);
+  padding: var(--chip-padding-y, $chip-padding-y) var(--chip-padding-x, $chip-padding-x);
+  background-color: var(--chip-background-default, $chip-background-default);
+  border-radius: var(--chip-radius, $chip-radius);
+  font-size: var(--chip-text-fontSize, $chip-text-fontSize);
+  color: var(--chip-text-color, $chip-text-color);
+  line-height: 1.4;
+  user-select: none;
+}
+
+.#{$c}--has-image {
+  padding-left: var(--chip-padding-y, $chip-padding-y);
+}
+
+.#{$c}__image {
+  width: var(--chip-image-size, $chip-image-size);
+  height: var(--chip-image-size, $chip-image-size);
+  border-radius: 50%;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.#{$c}__icon {
+  font-size: var(--chip-icon-size, $chip-icon-size);
+  color: var(--chip-icon-color, $chip-icon-color);
+  flex-shrink: 0;
+}
+
+.#{$c}__label {
+  white-space: nowrap;
+}
+
+.#{$c}__remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--chip-remove-size, $chip-remove-size);
+  height: var(--chip-remove-size, $chip-remove-size);
+  padding: 0;
+  margin-left: var(--chip-gap, $chip-gap);
+  background: transparent;
+  border: none;
+  border-radius: var(--chip-remove-radius, $chip-remove-radius);
+  color: var(--chip-remove-color-default, $chip-remove-color-default);
+  cursor: pointer;
+  transition: background-color 150ms ease, color 150ms ease;
+  flex-shrink: 0;
+
+  &:hover {
+    background-color: var(--chip-remove-background-hover, $chip-remove-background-hover);
+    color: var(--chip-remove-color-hover, $chip-remove-color-hover);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--chip-remove-color-hover, $chip-remove-color-hover);
+    outline-offset: 1px;
+  }
+}
+
+.#{$c}__remove-icon {
+  width: 14px;
+  height: 14px;
+}
+
+// Removable chip hover state
+.#{$c}--removable {
+  cursor: default;
+
+  &:hover {
+    background-color: var(--chip-background-hover, $chip-background-hover);
+  }
+}

package/src/components/Chip/Chip.vue

@@ -0,0 +1,73 @@
+<template>
+  <div v-if="visible" class="chip" :class="additionalClasses">
+    <img
+      v-if="image"
+      :src="image"
+      :alt="label || 'chip image'"
+      class="chip__image"
+    />
+    <i v-if="icon" :class="icon" class="chip__icon"></i>
+    <span v-if="label" class="chip__label">{{ label }}</span>
+    <slot />
+    <button
+      v-if="removable"
+      type="button"
+      class="chip__remove"
+      aria-label="Remove"
+      @click="onRemove"
+      @keydown="onKeydown"
+    >
+      <svg
+        class="chip__remove-icon"
+        viewBox="0 0 14 14"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M4.5 4.5L9.5 9.5M9.5 4.5L4.5 9.5"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </button>
+  </div>
+</template>
+
+<style src="./Chip.scss"></style>
+
+<script setup lang="ts">
+import type { ChipProps, ChipEmits } from '../../types';
+import { computed, ref } from "vue";
+
+defineOptions({ name: 'FtpChip' });
+
+const props = defineProps<ChipProps>();
+
+const emit = defineEmits(["remove"]);
+
+const visible = ref(true);
+
+const onRemove = (event: Event) => {
+  visible.value = false;
+  emit("remove", event);
+};
+
+const onKeydown = (event: KeyboardEvent) => {
+  if (event.key === "Enter" || event.key === "Backspace") {
+    onRemove(event);
+  }
+};
+
+const additionalClasses = computed(() => {
+  const classes = [];
+  if (props.removable) {
+    classes.push("chip--removable");
+  }
+  if (props.image) {
+    classes.push("chip--has-image");
+  }
+  return classes.join(" ");
+});
+</script>

package/src/components/ColorPicker/ColorPicker.scss

@@ -0,0 +1,244 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: color-picker;
+
+.#{$c} {
+  position: relative;
+  display: inline-flex;
+}
+
+// Trigger button
+.#{$c}__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--color-picker-trigger-size-md, $color-picker-trigger-size-md);
+  height: var(--color-picker-trigger-size-md, $color-picker-trigger-size-md);
+  padding: 2px;
+  background: transparent;
+  border: var(--color-picker-trigger-border-width, $color-picker-trigger-border-width) solid var(--color-picker-trigger-border-color-default, $color-picker-trigger-border-color-default);
+  border-radius: var(--color-picker-trigger-radius, $color-picker-trigger-radius);
+  cursor: pointer;
+  transition: border-color 0.15s ease;
+
+  &:hover:not(:disabled) {
+    border-color: var(--color-picker-trigger-border-color-hover, $color-picker-trigger-border-color-hover);
+  }
+
+  &:focus {
+    outline: var(--color-picker-focus-ringWidth, $color-picker-focus-ringWidth) solid var(--color-picker-focus-ringColor, $color-picker-focus-ringColor);
+    outline-offset: var(--color-picker-focus-ringOffset, $color-picker-focus-ringOffset);
+    border-color: var(--color-picker-trigger-border-color-focus, $color-picker-trigger-border-color-focus);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+
+.#{$c}__preview {
+  width: 100%;
+  height: 100%;
+  border-radius: calc(var(--color-picker-trigger-radius, $color-picker-trigger-radius) - 2px);
+  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%),
+    linear-gradient(-45deg, #ccc 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #ccc 75%),
+    linear-gradient(-45deg, transparent 75%, #ccc 75%);
+  background-size: 8px 8px;
+  background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
+  position: relative;
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background-color: inherit;
+    border-radius: inherit;
+  }
+}
+
+// Panel
+.#{$c}__panel {
+  width: var(--color-picker-width, $color-picker-width);
+  padding: var(--color-picker-padding, $color-picker-padding);
+  background-color: var(--color-picker-background, $color-picker-background);
+  border: var(--color-picker-border-width, $color-picker-border-width) solid var(--color-picker-border-color, $color-picker-border-color);
+  border-radius: var(--color-picker-radius, $color-picker-radius);
+  box-shadow: var(--color-picker-shadow, $color-picker-shadow);
+  display: flex;
+  flex-direction: column;
+  gap: var(--color-picker-gap, $color-picker-gap);
+}
+
+.#{$c}__panel--inline {
+  position: relative;
+  box-shadow: none;
+}
+
+// Gradient (Saturation/Brightness)
+.#{$c}__gradient {
+  position: relative;
+  width: 100%;
+  height: var(--color-picker-gradient-height, $color-picker-gradient-height);
+  border-radius: var(--color-picker-gradient-radius, $color-picker-gradient-radius);
+  cursor: crosshair;
+  overflow: hidden;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to right, #fff, transparent);
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to top, #000, transparent);
+  }
+}
+
+.#{$c}__gradient-pointer {
+  position: absolute;
+  width: var(--color-picker-slider-size, $color-picker-slider-size);
+  height: var(--color-picker-slider-size, $color-picker-slider-size);
+  border: var(--color-picker-slider-border-width, $color-picker-slider-border-width) solid var(--color-picker-slider-border-color, $color-picker-slider-border-color);
+  border-radius: 50%;
+  box-shadow: var(--color-picker-slider-shadow, $color-picker-slider-shadow);
+  transform: translate(-50%, -50%);
+  z-index: 1;
+  pointer-events: none;
+}
+
+// Hue slider
+.#{$c}__hue {
+  position: relative;
+  width: 100%;
+  height: var(--color-picker-hue-height, $color-picker-hue-height);
+  border-radius: var(--color-picker-hue-radius, $color-picker-hue-radius);
+  background: linear-gradient(
+    to right,
+    #f00 0%,
+    #ff0 17%,
+    #0f0 33%,
+    #0ff 50%,
+    #00f 67%,
+    #f0f 83%,
+    #f00 100%
+  );
+  cursor: pointer;
+}
+
+.#{$c}__hue-pointer {
+  position: absolute;
+  top: 50%;
+  width: var(--color-picker-slider-size, $color-picker-slider-size);
+  height: var(--color-picker-slider-size, $color-picker-slider-size);
+  border: var(--color-picker-slider-border-width, $color-picker-slider-border-width) solid var(--color-picker-slider-border-color, $color-picker-slider-border-color);
+  border-radius: 50%;
+  box-shadow: var(--color-picker-slider-shadow, $color-picker-slider-shadow);
+  background: currentColor;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+// Hex input
+.#{$c}__input-wrapper {
+  display: flex;
+  align-items: center;
+  height: var(--color-picker-input-height, $color-picker-input-height);
+  padding: 0 var(--color-picker-input-padding-x, $color-picker-input-padding-x);
+  background-color: var(--color-picker-input-background, $color-picker-input-background);
+  border: 1px solid var(--color-picker-input-border-color, $color-picker-input-border-color);
+  border-radius: var(--color-picker-input-radius, $color-picker-input-radius);
+  transition: border-color 0.15s ease;
+
+  &:focus-within {
+    border-color: var(--color-picker-focus-ringColor, $color-picker-focus-ringColor);
+  }
+}
+
+.#{$c}__input-prefix {
+  color: var(--color-picker-input-text, $color-picker-input-text);
+  font-size: var(--color-picker-input-fontSize, $color-picker-input-fontSize);
+  font-family: monospace;
+  opacity: 0.5;
+}
+
+.#{$c}__input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  padding: 0;
+  color: var(--color-picker-input-text, $color-picker-input-text);
+  font-size: var(--color-picker-input-fontSize, $color-picker-input-fontSize);
+  font-family: monospace;
+  text-transform: uppercase;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+// Preset colors
+.#{$c}__presets {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--color-picker-preset-gap, $color-picker-preset-gap);
+}
+
+.#{$c}__preset {
+  width: var(--color-picker-preset-size, $color-picker-preset-size);
+  height: var(--color-picker-preset-size, $color-picker-preset-size);
+  padding: 0;
+  background: transparent;
+  border: var(--color-picker-preset-border-width, $color-picker-preset-border-width) solid var(--color-picker-preset-border-color-default, $color-picker-preset-border-color-default);
+  border-radius: var(--color-picker-preset-radius, $color-picker-preset-radius);
+  cursor: pointer;
+  transition: all 0.15s ease;
+
+  &:hover {
+    transform: scale(1.1);
+  }
+
+  &:focus {
+    outline: var(--color-picker-focus-ringWidth, $color-picker-focus-ringWidth) solid var(--color-picker-focus-ringColor, $color-picker-focus-ringColor);
+    outline-offset: var(--color-picker-focus-ringOffset, $color-picker-focus-ringOffset);
+  }
+}
+
+.#{$c}__preset--selected {
+  border-color: var(--color-picker-preset-border-color-selected, $color-picker-preset-border-color-selected);
+}
+
+// Sizes
+.#{$c}--size-sm {
+  .#{$c}__trigger {
+    width: var(--color-picker-trigger-size-sm, $color-picker-trigger-size-sm);
+    height: var(--color-picker-trigger-size-sm, $color-picker-trigger-size-sm);
+  }
+}
+
+.#{$c}--size-md {
+  .#{$c}__trigger {
+    width: var(--color-picker-trigger-size-md, $color-picker-trigger-size-md);
+    height: var(--color-picker-trigger-size-md, $color-picker-trigger-size-md);
+  }
+}
+
+.#{$c}--size-lg {
+  .#{$c}__trigger {
+    width: var(--color-picker-trigger-size-lg, $color-picker-trigger-size-lg);
+    height: var(--color-picker-trigger-size-lg, $color-picker-trigger-size-lg);
+  }
+}
+
+// Disabled state
+.#{$c}--disabled {
+  .#{$c}__trigger {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}