@300codes/design-system 1.0.0

package/src/components/TabsList/TabsList.vue

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+
+export interface TabsListItem {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+
+export interface TabsListProps {
+  items: TabsListItem[];
+  size?: 'md' | 'lg';
+}
+
+const props = withDefaults(defineProps<TabsListProps>(), {
+  size: 'md',
+});
+
+const model = defineModel<string>({ default: '' });
+
+const listRef = ref<HTMLUListElement | null>(null);
+const focusedIndex = ref<number>(-1);
+
+const activeIndex = computed<number>(() => {
+  const idx = props.items.findIndex((item) => item.value === model.value && !item.disabled);
+  return idx >= 0 ? idx : props.items.findIndex((item) => !item.disabled);
+});
+
+const tabFocusIndex = computed<number>(() => {
+  const idx = focusedIndex.value >= 0 ? focusedIndex.value : activeIndex.value;
+  return Math.min(idx, props.items.length - 1);
+});
+
+function getTabIndex(index: number): 0 | -1 {
+  return index === tabFocusIndex.value ? 0 : -1;
+}
+
+function handleKeydown(event: KeyboardEvent, index: number): void {
+  if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return;
+  event.preventDefault();
+
+  const enabled = props.items.map((_, i) => i).filter((i) => !props.items[i].disabled);
+  const pos = enabled.indexOf(index);
+  if (pos === -1) return;
+
+  const next =
+    event.key === 'ArrowRight'
+      ? enabled[(pos + 1) % enabled.length]
+      : enabled[(pos - 1 + enabled.length) % enabled.length];
+
+  focusedIndex.value = next;
+  listRef.value?.querySelectorAll<HTMLButtonElement>('button[role="tab"]')[next]?.focus();
+}
+
+function handleFocusOut(event: FocusEvent): void {
+  const related = event.relatedTarget as Node | null;
+  if (!listRef.value?.contains(related)) {
+    focusedIndex.value = -1;
+  }
+}
+
+watch(model, () => {
+  focusedIndex.value = -1;
+});
+</script>
+
+<template>
+  <ul
+    ref="listRef"
+    role="tablist"
+    :class="[
+      'tabsList',
+      `tabsList--${size}`,
+      'flex flex-nowrap items-center overflow-x-auto list-none m-0 p-0',
+    ]"
+    @focusout="handleFocusOut"
+  >
+    <li
+      v-for="(item, index) in items"
+      :key="item.value"
+      role="presentation"
+      class="shrink-0"
+    >
+      <button
+        role="tab"
+        :class="[
+          'tabsList__tab',
+          {
+            'tabsList__tab--active': model === item.value,
+            'tabsList__tab--disabled': item.disabled,
+          },
+          'inline-flex items-center justify-center whitespace-nowrap cursor-pointer border-0',
+        ]"
+        :tabindex="getTabIndex(index)"
+        :aria-selected="model === item.value"
+        :disabled="item.disabled"
+        @click="model = item.value"
+        @keydown="handleKeydown($event, index)"
+      >
+        {{ item.label }}
+      </button>
+    </li>
+  </ul>
+</template>
+
+<style scoped>
+@reference "tailwindcss";
+
+.tabsList {
+  gap: var(--tabsList-gap, 0.5rem);
+
+  @apply leading-[1.2];
+}
+
+.tabsList__tab {
+  background-color: var(--tabsList-bg, #ffffff);
+  color: var(--tabsList-fg, #0e161b);
+  border-radius: var(--tabsList-radius, 3.5rem);
+  padding: 0 var(--tabsList-px, 1.75rem);
+  height: var(--tabsList-h, 2.5rem);
+  font-size: var(--tabsList-font-size, 0.875rem);
+  font-weight: var(--tabsList-font-weight, 600);
+  outline: var(--tabsList-outline-width, 4px) solid transparent;
+  outline-offset: var(--tabsList-outline-offset, -4px);
+}
+
+.tabsList__tab:hover:not(.tabsList__tab--active):not(.tabsList__tab--disabled) {
+  background-color: var(--tabsList-bg-hover, #f3f5f7);
+  color: var(--tabsList-fg-hover, #0e161b);
+}
+
+.tabsList__tab:focus-visible {
+  outline-color: var(--tabsList-outline-color, #0066cc);
+}
+
+.tabsList__tab--active {
+  background-color: var(--tabsList-active-bg, #5c6970);
+  color: var(--tabsList-active-fg, #ffffff);
+}
+
+.tabsList__tab--disabled {
+  @apply cursor-not-allowed pointer-events-none opacity-50;
+}
+
+/* ── lg ── */
+
+.tabsList--lg {
+  gap: var(--tabsList-lg-gap, 1rem);
+}
+
+.tabsList--lg .tabsList__tab {
+  padding: 0 var(--tabsList-lg-px, 2.25rem);
+  height: var(--tabsList-lg-h, 3.5rem);
+  font-size: var(--tabsList-lg-font-size, 1rem);
+}
+</style>

package/src/components/TabsList/index.ts

@@ -0,0 +1,2 @@
+export { default as TabsList } from './TabsList.vue';
+export type { TabsListProps, TabsListItem } from './TabsList.vue';

package/src/components/TextInput/TextInput.stories.ts

@@ -0,0 +1,125 @@
+import { ref } from 'vue';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import type { ConcreteComponent } from 'vue';
+import type { TextInputProps } from './TextInput.vue';
+import TextInput from './TextInput.vue';
+
+const meta: Meta<TextInputProps> = {
+  title: 'Form/TextInput',
+  component: TextInput as unknown as ConcreteComponent<TextInputProps>,
+  tags: ['autodocs'],
+  decorators: [
+    () => ({ template: '<div style="max-width: 25rem; width: 100%;"><story /></div>' }),
+  ],
+  argTypes: {
+    size: { control: 'select', options: ['sm', 'md', 'lg'] },
+    type: { control: 'select', options: ['text', 'password', 'email', 'tel', 'search'] },
+    filter: { control: 'select', options: [undefined, 'number', 'number-dash', 'alpha', 'alpha-space'] },
+    inputmode: { control: 'select', options: [undefined, 'numeric'] },
+    invalid: { control: 'boolean' },
+    required: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<TextInputProps>;
+
+export const Default: Story = {
+  args: { name: 'default', size: 'md', placeholder: 'Enter value' },
+  render: (args: TextInputProps) => ({
+    components: { TextInput },
+    setup() {
+      const value = ref('');
+      return { args, value };
+    },
+    template: '<TextInput v-bind="args" v-model="value" />',
+  }),
+};
+
+export const WithIconLeft: Story = {
+  args: {
+    name: 'icon-left',
+    iconLeft: { name: 'search', ariaLabel: 'Search' },
+    placeholder: 'Search',
+  },
+  render: (args: TextInputProps) => ({
+    components: { TextInput },
+    setup() {
+      const value = ref('');
+      return { args, value };
+    },
+    template: '<TextInput v-bind="args" v-model="value" />',
+  }),
+};
+
+export const WithIconRight: Story = {
+  args: {
+    name: 'icon-right',
+    iconRight: { name: 'search', ariaLabel: 'Toggle visibility' },
+    placeholder: 'Search',
+  },
+  render: (args: TextInputProps) => ({
+    components: { TextInput },
+    setup() {
+      const value = ref('');
+      return { args, value };
+    },
+    template: '<TextInput v-bind="args" v-model="value" />',
+  }),
+};
+
+export const Invalid: Story = {
+  args: { name: 'invalid', invalid: true, placeholder: 'Invalid value' },
+  render: (args: TextInputProps) => ({
+    components: { TextInput },
+    setup() {
+      const value = ref('');
+      return { args, value };
+    },
+    template: '<TextInput v-bind="args" v-model="value" />',
+  }),
+};
+
+export const Disabled: Story = {
+  args: { name: 'disabled', disabled: true },
+  render: (args: TextInputProps) => ({
+    components: { TextInput },
+    setup() {
+      const value = ref('Disabled value');
+      return { args, value };
+    },
+    template: '<TextInput v-bind="args" v-model="value" />',
+  }),
+};
+
+export const FilterAlpha: Story = {
+  args: { name: 'filter-alpha', filter: 'alpha', placeholder: 'Letters only' },
+  render: (args: TextInputProps) => ({
+    components: { TextInput },
+    setup() {
+      const value = ref('');
+      return { args, value };
+    },
+    template: '<TextInput v-bind="args" v-model="value" />',
+  }),
+};
+
+export const Sizes: Story = {
+  render: () => ({
+    components: { TextInput },
+    setup() {
+      const sm = ref('');
+      const md = ref('');
+      const lg = ref('');
+      return { sm, md, lg };
+    },
+    template: `
+      <div class="flex flex-col gap-4 w-80">
+        <TextInput name="sm" size="sm" placeholder="Small" v-model="sm" />
+        <TextInput name="md" size="md" placeholder="Medium" v-model="md" />
+        <TextInput name="lg" size="lg" placeholder="Large" v-model="lg" />
+      </div>
+    `,
+  }),
+};

package/src/components/TextInput/TextInput.vue

@@ -0,0 +1,273 @@
+<script setup lang="ts">
+import { computed, ref, type Ref } from 'vue';
+import type { IconSize } from '../../types/icon';
+import InputIconButton from './components/InputIconButton.vue';
+
+export type InputType = 'text' | 'password' | 'email' | 'tel' | 'search';
+export type FilterType = 'number' | 'number-dash' | 'alpha' | 'alpha-space';
+
+export interface TextInputIcon {
+  name: string;
+  iconPath?: string;
+  size?: IconSize;
+  ariaLabel?: string;
+  class?: string | object;
+}
+
+export interface TextInputProps {
+  name: string;
+  id?: string;
+  type?: InputType;
+  iconLeft?: TextInputIcon;
+  iconRight?: TextInputIcon;
+  placeholder?: string;
+  autocomplete?: string;
+  invalid?: boolean;
+  required?: boolean;
+  disabled?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  filter?: FilterType;
+  inputmode?: 'numeric';
+}
+
+const props = withDefaults(defineProps<TextInputProps>(), {
+  type: 'text',
+  placeholder: '',
+  size: 'md',
+  id: undefined,
+  iconLeft: undefined,
+  iconRight: undefined,
+  autocomplete: undefined,
+  filter: undefined,
+  inputmode: undefined,
+});
+
+const emit = defineEmits<{
+  focus: [FocusEvent];
+  blur: [FocusEvent];
+  clickIcon: ['left' | 'right'];
+  enter: [];
+}>();
+
+const model = defineModel<string>({ required: true });
+
+const el = ref<HTMLInputElement>();
+
+const pattern = computed(() => {
+  if (props.inputmode === 'numeric') return '[0-9]*';
+  return undefined;
+});
+
+const placeholderText = computed(() =>
+  props.placeholder ? `${props.placeholder}${props.required ? ' *' : ''}` : undefined
+);
+
+function onBlur(e: FocusEvent) {
+  setTimeout(() => emit('blur', e), 50);
+}
+
+function onFocus(e: FocusEvent) {
+  emit('focus', e);
+}
+
+function onInput(event: Event) {
+  const input = event.target as HTMLInputElement;
+  switch (props.filter) {
+    case 'number':
+      model.value = input.value.replace(/\D/g, '');
+      break;
+    case 'number-dash':
+      model.value = input.value.replace(/[^0-9-]/g, '');
+      break;
+    case 'alpha':
+      model.value = input.value.replace(/[^a-zA-Z]/g, '');
+      break;
+    case 'alpha-space':
+      model.value = input.value.replace(/[^a-zA-Z ]/g, '');
+      break;
+  }
+}
+
+defineExpose<{ el: Ref<HTMLInputElement | undefined> }>({ el });
+</script>
+
+<template>
+  <div :class="['textInput', `textInput--${size}`, 'relative']">
+    <input
+      :id="id || name"
+      ref="el"
+      v-model="model"
+      :type="type"
+      :name="name"
+      :placeholder="placeholderText"
+      :autocomplete="autocomplete"
+      :required="required"
+      :disabled="disabled"
+      :aria-disabled="disabled"
+      :aria-invalid="invalid"
+      :inputmode="inputmode"
+      :pattern="pattern"
+      :class="[
+        'textInput__field',
+        {
+          'textInput__field--icon-left': iconLeft,
+          'textInput__field--icon-right': iconRight,
+          'textInput__field--invalid': invalid,
+          'textInput__field--valid': invalid === false,
+          'textInput__field--disabled': disabled,
+        },
+        'leading-normal w-full',
+      ]"
+      @blur="onBlur"
+      @focus="onFocus"
+      @input="onInput"
+      @keyup.enter="emit('enter')"
+    >
+
+    <InputIconButton
+      v-if="iconLeft"
+      :icon-name="iconLeft.name"
+      :icon-path="iconLeft.iconPath"
+      :icon-size="iconLeft.size"
+      :aria-label="iconLeft.ariaLabel"
+      :class="['absolute top-1/2 -translate-y-1/2 left-3', iconLeft.class]"
+      @click="emit('clickIcon', 'left')"
+    />
+
+    <InputIconButton
+      v-if="iconRight"
+      :icon-name="iconRight.name"
+      :icon-path="iconRight.iconPath"
+      :icon-size="iconRight.size"
+      :aria-label="iconRight.ariaLabel"
+      :class="['absolute top-1/2 -translate-y-1/2 right-3', iconRight.class]"
+      @click="emit('clickIcon', 'right')"
+    />
+  </div>
+</template>
+
+<style scoped>
+@reference "tailwindcss";
+
+.textInput {
+  /* md / mobile */
+  --_h: var(--input-h-mobile, 2.5rem);
+  --_px: var(--input-px-mobile, 0.625rem);
+  --_py: var(--input-py-mobile, 0.5rem);
+  --_radius: var(--input-radius-mobile, 0.25rem);
+  --_fs: var(--input-font-size-mobile, 1rem);
+}
+
+@media (min-width: 48rem) {
+  .textInput {
+    /* md / desktop */
+    --_h: var(--input-h, 3rem);
+    --_px: var(--input-px, 0.75rem);
+    --_py: var(--input-py, 0.625rem);
+    --_radius: var(--input-radius, 0.375rem);
+    --_fs: var(--input-font-size, 1rem);
+  }
+}
+
+.textInput--sm {
+  /* sm / mobile */
+  --_h: var(--input-sm-h-mobile, 2.5rem);
+  --_px: var(--input-sm-px-mobile, 0.625rem);
+  --_py: var(--input-sm-py-mobile, 0.5rem);
+  --_radius: var(--input-sm-radius-mobile, 0.25rem);
+  --_fs: var(--input-sm-font-size-mobile, 0.875rem);
+}
+
+@media (min-width: 48rem) {
+  .textInput--sm {
+    /* sm / desktop */
+    --_h: var(--input-sm-h, 2.5rem);
+    --_px: var(--input-sm-px, 0.625rem);
+    --_py: var(--input-sm-py, 0.5rem);
+    --_radius: var(--input-sm-radius, 0.25rem);
+    --_fs: var(--input-sm-font-size, 0.875rem);
+  }
+}
+
+.textInput--lg {
+  /* lg / mobile */
+  --_h: var(--input-lg-h-mobile, 3rem);
+  --_px: var(--input-lg-px-mobile, 0.75rem);
+  --_py: var(--input-lg-py-mobile, 0.625rem);
+  --_radius: var(--input-lg-radius-mobile, 0.375rem);
+  --_fs: var(--input-lg-font-size-mobile, 1.125rem);
+}
+
+@media (min-width: 48rem) {
+  .textInput--lg {
+    /* lg / desktop */
+    --_h: var(--input-lg-h, 3.5rem);
+    --_px: var(--input-lg-px, 1rem);
+    --_py: var(--input-lg-py, 0.75rem);
+    --_radius: var(--input-lg-radius, 0.5rem);
+    --_fs: var(--input-lg-font-size, 1.125rem);
+  }
+}
+
+/* ── field ───────────────────────────────────────────────────────────────── */
+
+.textInput__field {
+  height: var(--_h);
+  padding: var(--_py) var(--_px);
+  border-radius: var(--_radius);
+  font-size: var(--_fs);
+  background-color: var(--input-bg, #ffffff);
+  color: var(--input-fg, #0e161b);
+  border: var(--input-border-width, 1px) solid var(--input-border-color, #d6dde1);
+  outline: var(--input-outline-width, 4px) solid transparent;
+  outline-offset: var(--input-outline-offset, -4px);
+}
+
+.textInput__field::placeholder {
+  color: var(--input-placeholder-fg, #5b6a72);
+}
+
+.textInput__field:hover:not(:disabled) {
+  background-color: var(--input-bg-hover, #f3f5f7);
+  border-color: var(--input-border-color-hover, #b0babf);
+}
+
+.textInput__field:focus {
+  outline-color: transparent;
+}
+
+.textInput__field:focus-visible {
+  outline-color: var(--input-outline, #3b82f6);
+}
+
+.textInput__field--icon-left {
+  padding-left: var(--input-icon-pl, 3rem);
+}
+
+.textInput__field--icon-right,
+.textInput__field--invalid,
+.textInput__field--valid {
+  padding-right: var(--input-icon-pr, 3rem);
+}
+
+/* ── invalid ─────────────────────────────────────────────────────────────── */
+
+.textInput__field--invalid {
+  border-color: var(--input-border-color-invalid, #ef4444);
+  border-width: 2px;
+}
+
+/* ── disabled ────────────────────────────────────────────────────────────── */
+
+.textInput__field--disabled {
+  background-color: var(--input-bg-disabled, #d6dde1);
+  color: var(--input-fg-disabled, #89979f);
+  border-color: var(--input-border-color-disabled, #d6dde1);
+
+  @apply cursor-not-allowed;
+}
+
+.textInput__field--disabled::placeholder {
+  color: var(--input-placeholder-fg-disabled, #89979f);
+}
+</style>

package/src/components/TextInput/components/InputIconButton.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { IconSize } from '../../../types/icon';
+import BaseIcon from '../../BaseIcon/BaseIcon.vue';
+
+export interface InputIconButtonProps {
+  iconName: string;
+  iconPath?: string;
+  iconSize?: IconSize;
+  ariaLabel?: string;
+}
+
+withDefaults(defineProps<InputIconButtonProps>(), {
+  iconPath: '/icons',
+  iconSize: 'sm',
+  ariaLabel: undefined,
+});
+
+const emit = defineEmits<{
+  click: [];
+}>();
+</script>
+
+<template>
+  <button
+    type="button"
+    class="inputIconButton inline-flex items-center justify-center cursor-pointer"
+    :aria-label="ariaLabel"
+    @click="emit('click')"
+  >
+    <BaseIcon
+      :name="iconName"
+      :icon-path="iconPath"
+      :size="iconSize"
+    />
+  </button>
+</template>
+
+<style scoped>
+.inputIconButton {
+  color: var(--input-icon-fg, #0e161b);
+  background: var(--input-icon-bg, transparent);
+  padding: var(--input-icon-p, 0.25rem);
+  border-radius: var(--input-icon-radius, 9999px);
+}
+
+.inputIconButton:hover {
+  background-color: var(--input-icon-bg-hover, #f3f4f6);
+}
+
+.inputIconButton:focus-visible {
+  outline: 2px solid var(--input-icon-outline, #0066cc);
+  outline-offset: 1px;
+}
+</style>

package/src/components/TextInput/index.ts

@@ -0,0 +1,2 @@
+export { default as TextInput } from './TextInput.vue';
+export type { TextInputProps, TextInputIcon, InputType, FilterType } from './TextInput.vue';