@300codes/design-system 1.0.0

package/src/components/TextInputField/TextInputField.stories.ts

@@ -0,0 +1,133 @@
+import { ref } from 'vue';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import type { ConcreteComponent } from 'vue';
+import type { TextInputFieldProps } from './TextInputField.vue';
+import TextInputField from './TextInputField.vue';
+
+const meta: Meta<TextInputFieldProps> = {
+  title: 'Form/TextInputField',
+  component: TextInputField as unknown as ConcreteComponent<TextInputFieldProps>,
+  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<TextInputFieldProps>;
+
+export const Default: Story = {
+  args: { name: 'default', label: 'Email address', placeholder: 'Enter value', size: 'md' },
+  render: (args: TextInputFieldProps) => ({
+    components: { TextInputField },
+    setup() {
+      const value = ref('');
+      return { args, value };
+    },
+    template: '<TextInputField v-bind="args" v-model="value" />',
+  }),
+};
+
+export const WithMessage: Story = {
+  args: {
+    name: 'with-message',
+    label: 'Email',
+    message: 'Invalid email address',
+    invalid: true,
+    size: 'md',
+  },
+  render: (args: TextInputFieldProps) => ({
+    components: { TextInputField },
+    setup() {
+      const value = ref('wrong@');
+      return { args, value };
+    },
+    template: '<TextInputField v-bind="args" v-model="value" />',
+  }),
+};
+
+export const Valid: Story = {
+  args: {
+    name: 'valid',
+    label: 'Email',
+    message: '',
+    invalid: false,
+    size: 'md',
+  },
+  render: (args: TextInputFieldProps) => ({
+    components: { TextInputField },
+    setup() {
+      const value = ref('user@example.com');
+      return { args, value };
+    },
+    template: '<TextInputField v-bind="args" v-model="value" />',
+  }),
+};
+
+export const Required: Story = {
+  args: { name: 'required', label: 'Full name', required: true, size: 'md' },
+  render: (args: TextInputFieldProps) => ({
+    components: { TextInputField },
+    setup() {
+      const value = ref('');
+      return { args, value };
+    },
+    template: '<TextInputField v-bind="args" v-model="value" />',
+  }),
+};
+
+export const WithIconLeft: Story = {
+  args: {
+    name: 'icon-left',
+    label: 'Search',
+    iconLeft: { name: 'search', ariaLabel: 'Search' },
+  },
+  render: (args: TextInputFieldProps) => ({
+    components: { TextInputField },
+    setup() {
+      const value = ref('');
+      return { args, value };
+    },
+    template: '<TextInputField v-bind="args" v-model="value" />',
+  }),
+};
+
+export const Disabled: Story = {
+  args: { name: 'disabled', label: 'Username', disabled: true },
+  render: (args: TextInputFieldProps) => ({
+    components: { TextInputField },
+    setup() {
+      const value = ref('Disabled value');
+      return { args, value };
+    },
+    template: '<TextInputField v-bind="args" v-model="value" />',
+  }),
+};
+
+export const Sizes: Story = {
+  render: () => ({
+    components: { TextInputField },
+    setup() {
+      const sm = ref('');
+      const md = ref('');
+      const lg = ref('');
+      return { sm, md, lg };
+    },
+    template: `
+      <div class="flex flex-col gap-4 w-80">
+        <TextInputField name="sm" label="Small" size="sm" v-model="sm" />
+        <TextInputField name="md" label="Medium" size="md" v-model="md" />
+        <TextInputField name="lg" label="Large" size="lg" v-model="lg" />
+      </div>
+    `,
+  }),
+};

package/src/components/TextInputField/TextInputField.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import TextInput from '../TextInput/TextInput.vue';
+import LabelInput from '../LabelInput/LabelInput.vue';
+import type { TextInputIcon, InputType, FilterType } from '../TextInput/TextInput.vue';
+
+export interface TextInputFieldProps {
+  name: string;
+  label: string;
+  id?: string;
+  type?: InputType;
+  iconLeft?: TextInputIcon;
+  iconRight?: TextInputIcon;
+  placeholder?: string;
+  autocomplete?: string;
+  invalid?: boolean | null;
+  message?: string;
+  required?: boolean;
+  disabled?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  filter?: FilterType;
+  inputmode?: 'numeric';
+}
+
+const props = withDefaults(defineProps<TextInputFieldProps>(), {
+  type: 'text',
+  placeholder: '',
+  size: 'md',
+  invalid: null,
+  message: '',
+  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 textInputRef = ref<InstanceType<typeof TextInput>>();
+
+const textInputInvalid = computed(() =>
+  typeof props.invalid === 'boolean' ? props.invalid : undefined
+);
+
+function focus() {
+  textInputRef.value?.el?.focus();
+}
+
+defineExpose({ focus });
+</script>
+
+<template>
+  <LabelInput
+    :name="id || name"
+    :label="label"
+    :message="message"
+    :required="required"
+    :invalid="invalid"
+    :disabled="disabled"
+    :size="size"
+  >
+    <TextInput
+      :id="id"
+      ref="textInputRef"
+      v-model="model"
+      :name="name"
+      :type="type"
+      :icon-left="iconLeft"
+      :icon-right="iconRight"
+      :placeholder="placeholder"
+      :autocomplete="autocomplete"
+      :invalid="textInputInvalid"
+      :required="required"
+      :disabled="disabled"
+      :size="size"
+      :filter="filter"
+      :inputmode="inputmode"
+      @focus="emit('focus', $event)"
+      @blur="emit('blur', $event)"
+      @click-icon="emit('clickIcon', $event)"
+      @enter="emit('enter')"
+    />
+  </LabelInput>
+</template>

package/src/components/TextInputField/index.ts

@@ -0,0 +1,2 @@
+export { default as TextInputField } from './TextInputField.vue';
+export type { TextInputFieldProps } from './TextInputField.vue';

package/src/components/index.ts

@@ -0,0 +1,15 @@
+export * from './BaseLabel/index';
+export * from './SimpleButton/index';
+export * from './BaseIcon/index';
+export * from './ButtonWithIcon/index';
+export * from './LabelInput/index';
+export * from './TextInput/index';
+export * from './TextInputField/index';
+export * from './SelectInput/index';
+export * from './SelectInputField/index';
+export * from './CheckboxInput/index';
+export * from './RadioInput/index';
+export * from './TabsList/index';
+export * from './SearchInput/index';
+export * from './BaseTooltip/index';
+export type { IconSize } from '../types/icon';

package/src/css/tokens.css

@@ -0,0 +1,417 @@
+/*
+ * 300codes Design System — Tokens
+ * =================================
+ * Copy this file to your project and customize the values.
+ * Components work without this file — they have built-in fallback values.
+ * Importing this file maps your Tailwind theme colors to component tokens.
+ *
+ * Requires Tailwind CSS — theme() resolves values from your @theme config.
+ *
+ * CSS is compiled at the consumer's build time. Add an @source directive
+ * to your project's main CSS file so Tailwind scans design system components:
+ *
+ *   @source "../../node_modules/@300codes/design-system/src/**\/*.{vue,ts}";
+ *
+ * Usage in Astro (src/css/base.css):
+ *
+ *   @import "tailwindcss";
+ *   @source "../../node_modules/@300codes/design-system/src/**\/*.{vue,ts}";
+ *   @import "./tokens.css";
+ *
+ * Usage in Nuxt (assets/css/base.css):
+ *
+ *   @import "tailwindcss";
+ *   @source "../node_modules/@300codes/design-system/src/**\/*.{vue,ts}";
+ *   @import "./tokens.css";
+ *
+ * Then register in nuxt.config.ts:
+ *
+ *   css: ['~/assets/css/base.css']
+ */
+
+:root {
+  /* ────────────────────────────────────────────────
+   * SimpleButton
+   * ──────────────────────────────────────────────── */
+
+  /* primary (default variant) */
+  --simpleButton-bg: theme(--color-primary);
+  --simpleButton-fg: theme(--color-primary-foreground);
+  --simpleButton-border: theme(--color-primary);
+  --simpleButton-bg-hover: theme(--color-primary-hover);
+  --simpleButton-fg-hover: theme(--color-primary-foreground);
+  --simpleButton-border-hover: theme(--color-primary-hover);
+  --simpleButton-border-width: theme(--spacing-px);
+  --simpleButton-ring: theme(--color-ring);
+  --simpleButton-radius: theme(--radius-base);
+  --simpleButton-px: theme(--spacing-6);
+  --simpleButton-py: theme(--spacing-1.5);
+  --simpleButton-min-h: theme(--spacing-14);
+  --simpleButton-font-size: theme(--text-base);
+  --simpleButton-font-weight: theme(--font-weight-semibold);
+  --simpleButton-gap: theme(--spacing-4);
+  --simpleButton-disabled-bg: theme(--color-disabled);
+  --simpleButton-disabled-fg: theme(--color-disabled-foreground);
+  --simpleButton-disabled-border: theme(--color-disabled);
+
+  /* secondary */
+  --simpleButton-secondary-bg: theme(--color-secondary);
+  --simpleButton-secondary-fg: theme(--color-secondary-foreground);
+  --simpleButton-secondary-border: theme(--color-secondary);
+  --simpleButton-secondary-bg-hover: theme(--color-secondary-hover);
+  --simpleButton-secondary-fg-hover: theme(--color-secondary-foreground-hover);
+  --simpleButton-secondary-border-hover: theme(--color-secondary-hover);
+  --simpleButton-secondary-ring: theme(--color-ring);
+  --simpleButton-secondary-disabled-bg: theme(--color-disabled);
+  --simpleButton-secondary-disabled-fg: theme(--color-disabled-foreground);
+  --simpleButton-secondary-disabled-border: theme(--color-disabled);
+
+  /* tertiary */
+  --simpleButton-tertiary-bg: transparent;
+  --simpleButton-tertiary-fg: theme(--color-tertiary-foreground);
+  --simpleButton-tertiary-border: transparent;
+  --simpleButton-tertiary-bg-hover: theme(--color-tertiary-hover);
+  --simpleButton-tertiary-fg-hover: theme(--color-tertiary-foreground);
+  --simpleButton-tertiary-border-hover: theme(--color-tertiary-hover);
+  --simpleButton-tertiary-ring: theme(--color-ring);
+  --simpleButton-tertiary-disabled-bg: transparent;
+  --simpleButton-tertiary-disabled-fg: theme(--color-disabled-foreground);
+  --simpleButton-tertiary-disabled-border: transparent;
+
+  /* sm */
+  --simpleButton-sm-px: theme(--spacing-4);
+  --simpleButton-sm-py: theme(--spacing-1);
+  --simpleButton-sm-min-h: theme(--spacing-10);
+  --simpleButton-sm-font-size: theme(--text-sm);
+  --simpleButton-sm-font-weight: theme(--font-weight-semibold);
+  --simpleButton-sm-gap: theme(--spacing-2.5);
+
+  /* ────────────────────────────────────────────────
+   * BaseLabel
+   * ──────────────────────────────────────────────── */
+
+  /* primary (default variant) */
+  --baseLabel-bg: theme(--color-primary);
+  --baseLabel-fg: theme(--color-primary-foreground);
+  --baseLabel-border: theme(--color-primary);
+  --baseLabel-border-width: theme(--spacing-px);
+  --baseLabel-bg-hover: theme(--color-primary-hover);
+  --baseLabel-border-hover: theme(--color-primary-hover);
+  --baseLabel-fg-hover: theme(--color-primary-foreground);
+  --baseLabel-ring: theme(--color-ring);
+  --baseLabel-radius: theme(--radius-base);
+  --baseLabel-px: theme(--spacing-2);
+  --baseLabel-py: theme(--spacing-0.5);
+  --baseLabel-min-h: theme(--spacing-6);
+  --baseLabel-font-size: theme(--text-xs);
+  --baseLabel-font-weight: theme(--font-weight-semibold);
+
+  /* secondary */
+  --baseLabel-secondary-bg: theme(--color-primary-foreground);
+  --baseLabel-secondary-fg: theme(--color-primary);
+  --baseLabel-secondary-border: theme(--color-primary);
+  --baseLabel-secondary-bg-hover: theme(--color-tertiary-hover);
+  --baseLabel-secondary-border-hover: theme(--color-primary-hover);
+  --baseLabel-secondary-fg-hover: theme(--color-secondary-foreground);
+  --baseLabel-secondary-ring: theme(--color-ring);
+
+  /* tertiary */
+  --baseLabel-tertiary-bg: transparent;
+  --baseLabel-tertiary-fg: theme(--color-tertiary-foreground);
+  --baseLabel-tertiary-border: transparent;
+  --baseLabel-tertiary-bg-hover: theme(--color-tertiary-hover);
+  --baseLabel-tertiary-border-hover: theme(--color-tertiary-hover);
+  --baseLabel-tertiary-fg-hover: theme(--color-primary);
+  --baseLabel-tertiary-ring: theme(--color-ring);
+
+  /* sm */
+  --baseLabel-sm-min-h: theme(--spacing-5);
+
+  /* ────────────────────────────────────────────────
+   * LabelInput
+   * ──────────────────────────────────────────────── */
+
+  --labelInput-fg: theme(--color-input-label);
+  --labelInput-fg-disabled: theme(--color-disabled-foreground);
+  --labelInput-font-size: 0.8125rem; /* md  13px */
+  --labelInput-sm-font-size: 0.6875rem; /* sm  11px */
+  --labelInput-lg-font-size: theme(--text-sm); /* lg  14px */
+  --labelInput-font-weight: theme(--font-weight-normal);
+  --labelInput-label-mb: theme(--spacing-1); /* md   4px */
+  --labelInput-sm-label-mb: theme(--spacing-0.5); /* sm   2px */
+  --labelInput-lg-label-mb: theme(--spacing-2); /* lg   8px */
+  --labelInput-message-mt: 0px; /* md   0   */
+  --labelInput-sm-message-mt: 0px; /* sm   0   */
+  --labelInput-lg-message-mt: 1px; /* lg   1px */
+  --labelInput-message-fg: theme(--color-error);
+  --labelInput-message-font-size: 0.8125rem; /* md  13px */
+  --labelInput-sm-message-font-size: 0.8125rem; /* sm  13px */
+  --labelInput-lg-message-font-size: theme(--text-sm); /* lg  14px */
+  --labelInput-status-valid-fg: theme(--color-success);
+  --labelInput-status-invalid-fg: theme(--color-error);
+  --labelInput-sm-status-size: theme(--spacing-6);
+  --labelInput-md-status-size: theme(--spacing-7);
+  --labelInput-lg-status-size: theme(--spacing-8);
+
+  /* ────────────────────────────────────────────────
+   * Input — shared (TextInput, SelectInput, Checkbox, Radio, Textarea)
+   * ──────────────────────────────────────────────── */
+
+  /* default state */
+  --input-bg: theme(--color-input-bg);
+  --input-fg: theme(--color-input-fg);
+  --input-border-color: theme(--color-input-border);
+  --input-border-width: theme(--spacing-px);
+  --input-placeholder-fg: theme(--color-input-placeholder);
+
+  /* hover */
+  --input-bg-hover: #f3f5f7;
+  --input-border-color-hover: theme(--color-input-border-hover);
+
+  /* focus */
+  --input-outline-width: theme(--outline-4);
+  --input-outline-offset: -4px;
+  --input-outline: theme(--color-outline);
+
+  /* invalid */
+  --input-border-color-invalid: theme(--color-error);
+
+  /* disabled */
+  --input-bg-disabled: theme(--color-input-bg-disabled);
+  --input-fg-disabled: theme(--color-input-fg-disabled);
+  --input-border-color-disabled: theme(--color-input-border-disabled);
+  --input-placeholder-fg-disabled: theme(--color-input-placeholder-disabled);
+
+  /* icon button */
+  --input-icon-bg: transparent;
+  --input-icon-fg: theme(--color-input-icon);
+  --input-icon-fg-hover: theme(--color-input-icon-hover);
+  --input-icon-bg-hover: theme(--color-input-icon-bg-hover);
+  --input-icon-outline: theme(--color-outline);
+  --input-icon-p: theme(--spacing-1);
+  --input-icon-radius: theme(--radius-full);
+
+  /* ────────────────────────────────────────────────
+   * TextInput — sizing
+   * ──────────────────────────────────────────────── */
+
+  /* md */
+  --input-h: theme(--spacing-12); /* desktop 48px */
+  --input-h-mobile: theme(--spacing-10); /* mobile  40px */
+  --input-px: theme(--spacing-3); /* desktop 12px */
+  --input-px-mobile: theme(--spacing-2.5); /* mobile  10px */
+  --input-py: theme(--spacing-2.5); /* desktop 10px */
+  --input-py-mobile: theme(--spacing-2); /* mobile   8px */
+  --input-radius: theme(--radius-md); /* desktop  6px */
+  --input-radius-mobile: theme(--radius-sm); /* mobile   4px */
+  --input-font-size: theme(--text-base); /* 16px */
+  --input-font-size-mobile: theme(--text-base); /* 16px */
+
+  /* sm */
+  --input-sm-h: theme(--spacing-10);           /* desktop 40px */
+  --input-sm-h-mobile: theme(--spacing-10);    /* mobile  40px */
+  --input-sm-px: theme(--spacing-2.5);         /* desktop 10px */
+  --input-sm-px-mobile: theme(--spacing-2.5);  /* mobile  10px */
+  --input-sm-py: theme(--spacing-2);           /* desktop  8px */
+  --input-sm-py-mobile: theme(--spacing-2);    /* mobile   8px */
+  --input-sm-radius: theme(--radius-sm);       /* desktop  4px */
+  --input-sm-radius-mobile: theme(--radius-sm); /* mobile   4px */
+  --input-sm-font-size: theme(--text-sm); /* 14px */
+  --input-sm-font-size-mobile: theme(--text-sm); /* 14px */
+
+  /* lg */
+  --input-lg-h: theme(--spacing-14); /* desktop 56px */
+  --input-lg-h-mobile: theme(--spacing-12); /* mobile  48px */
+  --input-lg-px: theme(--spacing-4); /* desktop 16px */
+  --input-lg-px-mobile: theme(--spacing-3); /* mobile  12px */
+  --input-lg-py: theme(--spacing-3); /* desktop 12px */
+  --input-lg-py-mobile: theme(--spacing-2.5); /* mobile  10px */
+  --input-lg-radius: theme(--radius-lg); /* desktop  8px */
+  --input-lg-radius-mobile: theme(--radius-md); /* mobile   6px */
+  --input-lg-font-size: theme(--text-lg); /* 18px */
+  --input-lg-font-size-mobile: theme(--text-lg); /* 18px */
+
+  /* icon padding overrides */
+  --input-icon-pl: theme(--spacing-12);
+  --input-icon-pr: theme(--spacing-12);
+
+  /* ────────────────────────────────────────────────
+   * SelectInput — dropdown & mobile sheet
+   * ──────────────────────────────────────────────── */
+
+  /* trigger chevron */
+  --selectInput-chevron-fg: theme(--color-input-placeholder);
+
+  /* chevron size — per size × breakpoint */
+  --selectInput-chevron-size: theme(--spacing-6);           /* md Desktop: 24px */
+  --selectInput-chevron-size-mobile: theme(--spacing-5);    /* md Mobile:  20px */
+  --selectInput-sm-chevron-size: theme(--spacing-6);        /* sm Desktop: 24px */
+  --selectInput-sm-chevron-size-mobile: theme(--spacing-5); /* sm Mobile:  20px */
+  --selectInput-lg-chevron-size: theme(--spacing-8);        /* lg Desktop: 32px */
+  --selectInput-lg-chevron-size-mobile: theme(--spacing-7); /* lg Mobile:  28px */
+
+  /* desktop dropdown */
+  --selectInput-dropdown-bg: theme(--color-input-bg);
+  --selectInput-dropdown-border: theme(--color-input-border);
+  --selectInput-dropdown-border-width: theme(--spacing-px);
+  --selectInput-dropdown-radius: theme(--radius-md);
+  --selectInput-dropdown-max-h: 16rem;
+
+  /* dropdown vertical padding — per size */
+  --selectInput-dropdown-py: theme(--spacing-1);    /* md Default: 4px */
+  --selectInput-sm-dropdown-py: theme(--spacing-1); /* sm = Default: 4px */
+  --selectInput-lg-dropdown-py: theme(--spacing-2); /* lg Comfort:  8px */
+
+  /* list spacing — gap between trigger and dropdown */
+  --selectInput-list-spacing: theme(--spacing-1);    /* md: 4px */
+  --selectInput-sm-list-spacing: theme(--spacing-1); /* sm: 4px */
+  --selectInput-lg-list-spacing: theme(--spacing-2); /* lg: 8px */
+
+  /* option */
+  --selectInput-option-fg: theme(--color-input-fg);
+  --selectInput-option-hover-bg: theme(--color-input-bg-disabled);
+  --selectInput-option-selected-bg: theme(--color-outline);
+  --selectInput-option-selected-fg: theme(--color-primary);
+  --selectInput-option-py: theme(--spacing-3); /* 12px */
+  --selectInput-option-px: theme(--spacing-4); /* 16px */
+
+  /* mobile overlay (dialog::backdrop) */
+  --selectInput-overlay-bg: rgba(0, 0, 0, 0.5);
+
+  /* mobile sheet */
+  --selectInput-sheet-bg: theme(--color-input-bg);
+  --selectInput-sheet-max-h: 80vh;
+
+  /* sheet header */
+  --selectInput-sheet-header-py: theme(--spacing-3);
+  --selectInput-sheet-header-px: theme(--spacing-4);
+  --selectInput-sheet-header-fs: theme(--text-base);
+  --selectInput-sheet-header-fw: theme(--font-weight-semibold);
+  --selectInput-sheet-header-fg: theme(--color-input-fg);
+  --selectInput-sheet-header-border: theme(--color-input-border);
+
+  /* ────────────────────────────────────────────────
+   * CheckboxInput
+   * ──────────────────────────────────────────────── */
+
+  /* checked state */
+  --checkboxInput-checked-bg: #09865e;
+  --checkboxInput-checked-fg: theme(--color-white);
+  --checkboxInput-border-width: 1.5px;
+  --checkboxInput-border-color-disabled: #89979f;
+  --checkboxInput-checked-disabled-bg: #89979f;
+  --checkboxInput-outline-offset: -2px;
+
+  /* md (default) */
+  --checkboxInput-size: theme(--spacing-6);               /* 24px */
+  --checkboxInput-icon-size: theme(--spacing-3.5);        /* 14px */
+  --checkboxInput-radius: theme(--radius-md);             /* 6px */
+  --checkboxInput-font-size: theme(--text-base);          /* desktop 16px */
+  --checkboxInput-font-size-mobile: theme(--text-sm);     /* mobile 14px */
+  --checkboxInput-spacing: theme(--spacing-4);            /* 16px */
+
+  /* sm */
+  --checkboxInput-sm-size: theme(--spacing-5);            /* 20px */
+  --checkboxInput-sm-icon-size: theme(--spacing-3);       /* 12px */
+  --checkboxInput-sm-radius: theme(--radius-sm);          /* 4px */
+  --checkboxInput-sm-font-size: theme(--text-sm);         /* 14px */
+  --checkboxInput-sm-spacing: theme(--spacing-3);         /* 12px */
+
+  /* lg */
+  --checkboxInput-lg-size: theme(--spacing-7);            /* 28px */
+  --checkboxInput-lg-icon-size: theme(--spacing-4);       /* 16px */
+  --checkboxInput-lg-radius: theme(--radius-lg);          /* 8px */
+  --checkboxInput-lg-font-size: theme(--text-lg);         /* 18px */
+  --checkboxInput-lg-spacing: theme(--spacing-5);         /* 20px */
+
+  /* ────────────────────────────────────────────────
+   * RadioInput
+   * ──────────────────────────────────────────────── */
+
+  /* checked state */
+  --radioInput-checked-bg: theme(--color-white);
+  --radioInput-checked-border: #09865e;
+  --radioInput-checked-dot: #09865e;
+  --radioInput-checked-disabled-bg: theme(--color-white);
+  --radioInput-checked-disabled-dot: #89979f;
+
+  /* md (default) */
+  --radioInput-size: theme(--spacing-6);                  /* 24px */
+  --radioInput-dot-size: theme(--spacing-3.5);            /* 14px */
+  --radioInput-font-size: theme(--text-base);             /* desktop 16px */
+  --radioInput-font-size-mobile: theme(--text-sm);        /* mobile 14px */
+  --radioInput-spacing: theme(--spacing-4);               /* 16px */
+
+  /* sm */
+  --radioInput-sm-size: theme(--spacing-5);               /* 20px */
+  --radioInput-sm-dot-size: theme(--spacing-3.5);         /* 14px */
+  --radioInput-sm-font-size: theme(--text-sm);            /* 14px */
+  --radioInput-sm-spacing: theme(--spacing-3);            /* 12px */
+
+  /* lg */
+  --radioInput-lg-size: theme(--spacing-7);               /* 28px */
+  --radioInput-lg-dot-size: theme(--spacing-4);           /* 16px */
+  --radioInput-lg-font-size: theme(--text-lg);            /* 18px */
+  --radioInput-lg-spacing: theme(--spacing-5);            /* 20px */
+
+  /* ────────────────────────────────────────────────
+   * SearchInput
+   * ──────────────────────────────────────────────── */
+
+  --searchInput-bg:           #f3f5f7;
+  --searchInput-border:       theme(--color-input-border-hover);
+  --searchInput-bg-hover:     theme(--color-white);
+  --searchInput-border-hover: theme(--color-input-fg);
+  --searchInput-radius:       3rem; /* 48px */
+
+  /* ────────────────────────────────────────────────
+   * BaseTooltip
+   * ──────────────────────────────────────────────── */
+
+  --baseTooltip-bg:              #0e161b;
+  --baseTooltip-fg:              theme(--color-white);
+  --baseTooltip-radius:          theme(--radius-lg);    /* 8px */
+  --baseTooltip-max-w:           12.25rem;              /* 196px */
+  --baseTooltip-px:              theme(--spacing-4);    /* 16px */
+  --baseTooltip-py:              theme(--spacing-4);    /* 16px */
+  --baseTooltip-gap:             theme(--spacing-4);    /* 16px — text↔close */
+  --baseTooltip-font-size:       theme(--text-xs);      /* md 12px */
+  --baseTooltip-lg-font-size:    theme(--text-sm);      /* lg 14px */
+  --baseTooltip-arrow-half-w:    theme(--spacing-1.5);  /* md half-width 6px */
+  --baseTooltip-arrow-h:         theme(--spacing-2);    /* md arrow height 8px */
+  --baseTooltip-lg-arrow-half-w: theme(--spacing-3);    /* lg half-width 12px */
+  --baseTooltip-lg-arrow-h:      theme(--spacing-4);    /* lg arrow height 16px */
+
+  /* ────────────────────────────────────────────────
+   * TabsList
+   * ──────────────────────────────────────────────── */
+
+  /* colors */
+  --tabsList-bg:          theme(--color-input-bg);
+  --tabsList-fg:          theme(--color-input-fg);
+  --tabsList-bg-hover:    #f3f5f7;
+  --tabsList-fg-hover:    theme(--color-input-fg);
+  --tabsList-active-bg:   #5c6970;
+  --tabsList-active-fg:   theme(--color-white);
+
+  /* focus ring */
+  --tabsList-outline-width:  4px;
+  --tabsList-outline-offset: -4px;
+  --tabsList-outline-color:  theme(--color-outline);
+
+  /* shared */
+  --tabsList-radius:       3.5rem;
+  --tabsList-font-weight:  theme(--font-weight-semibold);
+
+  /* md (default) */
+  --tabsList-gap:          theme(--spacing-2);   /*  8px */
+  --tabsList-px:           theme(--spacing-7);   /* 28px */
+  --tabsList-h:            theme(--spacing-10);  /* 40px */
+  --tabsList-font-size:    theme(--text-sm);
+
+  /* lg */
+  --tabsList-lg-gap:       theme(--spacing-4);   /* 16px */
+  --tabsList-lg-px:        theme(--spacing-9);   /* 36px */
+  --tabsList-lg-h:         theme(--spacing-14);  /* 56px */
+  --tabsList-lg-font-size: theme(--text-base);
+}

package/src/types/icon.ts

@@ -0,0 +1 @@
+export type IconSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'auto';