@300codes/design-system 1.0.0

package/README.md

@@ -0,0 +1,155 @@
+# @300codes/design-system
+
+A Vue 3 component library built on Tailwind CSS v4 and CSS custom properties. Ships as raw Vue SFCs — no compilation step, your bundler handles everything.
+
+## Installation
+
+```bash
+npm install @300codes/design-system
+```
+
+**Peer dependencies:** `vue ^3.5.0`
+
+---
+
+## Setup
+
+### 1. Tailwind CSS
+
+Add the library to your Tailwind content scan in your main CSS file:
+
+```css
+@import "tailwindcss";
+@source "../node_modules/@300codes/design-system/src/**/*.{vue,ts}";
+```
+
+### 2. CSS Tokens
+
+The library uses a three-layer CSS token system:
+
+```
+component token  →  global token (Tailwind @theme)  →  hardcoded fallback
+```
+
+Copy `tokens.css` from the library into your project and import it:
+
+```css
+@import "tailwindcss";
+@source "../node_modules/@300codes/design-system/src/**/*.{vue,ts}";
+@import "./tokens.css";
+```
+
+Customize tokens to match your brand:
+
+```css
+/* tokens.css */
+:root {
+  --simpleButton-bg: #your-color;
+  --simpleButton-fg: #ffffff;
+  --textInput-border: #d1d5db;
+  --textInput-focus-outline: #6366f1;
+  /* ... */
+}
+```
+
+The full token reference is in `node_modules/@300codes/design-system/src/css/tokens.css`.
+
+---
+
+## Usage
+
+Components are imported via subpaths — import only what you use:
+
+```ts
+import { SimpleButton } from '@300codes/design-system/simple-button'
+import { TextInputField } from '@300codes/design-system/text-input-field'
+import { SelectInputField } from '@300codes/design-system/select-input-field'
+import { BaseIcon } from '@300codes/design-system/base-icon'
+```
+
+```vue
+<template>
+  <SimpleButton variant="primary" size="md">Click me</SimpleButton>
+
+  <TextInputField label="Email" help-text="We'll never share your email." />
+
+  <SelectInputField
+    label="Country"
+    :options="[{ value: 'pl', label: 'Poland' }]"
+  />
+</template>
+```
+
+---
+
+## Components
+
+| Import path | Component | Description |
+|---|---|---|
+| `/simple-button` | `SimpleButton` | Button & link. Variants: primary, secondary, tertiary. Sizes: sm, md. |
+| `/button-with-icon` | `ButtonWithIcon` | SimpleButton with icon slot. |
+| `/base-label` | `BaseLabel` | Badge/label. Variants: primary, secondary, tertiary. |
+| `/base-icon` | `BaseIcon` | Dynamic SVG loader. |
+| `/base-tooltip` | `BaseTooltip` | Tooltip with close button. Sizes: md, lg. |
+| `/text-input` | `TextInput` | Text input with optional icons. Sizes: sm, md, lg. |
+| `/text-input-field` | `TextInputField` | TextInput + label + help text + status icons. |
+| `/select-input` | `SelectInput` | Dropdown (native sheet on mobile). Sizes: sm, md, lg. |
+| `/select-input-field` | `SelectInputField` | SelectInput + label + help text. |
+| `/checkbox-input` | `CheckboxInput` | Checkbox with label. Sizes: sm, md, lg. |
+| `/radio-input` | `RadioInput` | Radio button with label. Sizes: sm, md, lg. |
+| `/tabs-list` | `TabsList` | Tab navigation. Sizes: md, lg. |
+| `/search-input` | `SearchInput` | Search-styled text input. |
+| `/label-input` | `LabelInput` | Label + help text wrapper (for custom inputs). |
+
+---
+
+## Icons
+
+### Required icons
+
+Several components rely on SVG icons served from `/icons/` in your public directory. You must provide these files:
+
+| File | Used by |
+|---|---|
+| `chevron-down.svg` | `SelectInput` (dropdown arrow) |
+| `search.svg` | `SearchInput` |
+| `close.svg` | `BaseTooltip`, `SearchInput` |
+| `close-circle.svg` | Input clear button |
+| `check.svg` | `CheckboxInput` |
+| `success.svg` | `LabelInput` (success state) |
+| `error.svg` | `LabelInput` (error state) |
+| `not-found.svg` | `BaseIcon` (fallback when icon is missing) |
+
+You can copy all icons from `node_modules/@300codes/design-system/public/icons/` into your project's `public/icons/` folder:
+
+```bash
+cp -r node_modules/@300codes/design-system/public/icons public/
+```
+
+### Using BaseIcon
+
+`BaseIcon` dynamically loads any SVG from the `/icons/` path. You can add your own icons alongside the required ones:
+
+```vue
+<BaseIcon name="search" size="md" />
+<BaseIcon name="close" size="lg" />
+<BaseIcon name="your-custom-icon" size="sm" />
+```
+
+Available sizes: `2xs` · `xs` · `sm` · `md` · `lg` · `xl` · `2xl` · `3xl` · `auto`
+
+By default icons are loaded from `/icons/{name}.svg`. If your icons live elsewhere, pass a custom `basePath` prop:
+
+```vue
+<BaseIcon name="star" base-path="/assets/icons" size="md" />
+```
+
+---
+
+## Storybook
+
+```bash
+npm run storybook
+```
+
+Opens at `http://localhost:6006` with live examples of all components.

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@300codes/design-system",
+  "version": "1.0.0",
+  "type": "module",
+  "files": [
+    "src/components",
+    "src/types",
+    "src/css"
+  ],
+  "exports": {
+    "./base-label": "./src/components/BaseLabel/index.ts",
+    "./simple-button": "./src/components/SimpleButton/index.ts",
+    "./base-icon": "./src/components/BaseIcon/index.ts",
+    "./button-with-icon": "./src/components/ButtonWithIcon/index.ts",
+    "./label-input": "./src/components/LabelInput/index.ts",
+    "./text-input": "./src/components/TextInput/index.ts",
+    "./text-input-field": "./src/components/TextInputField/index.ts",
+    "./select-input": "./src/components/SelectInput/index.ts",
+    "./select-input-field": "./src/components/SelectInputField/index.ts",
+    "./checkbox-input": "./src/components/CheckboxInput/index.ts",
+    "./radio-input": "./src/components/RadioInput/index.ts",
+    "./tabs-list": "./src/components/TabsList/index.ts",
+    "./search-input": "./src/components/SearchInput/index.ts",
+    "./base-tooltip": "./src/components/BaseTooltip/index.ts"
+  },
+  "scripts": {
+    "build": "vue-tsc --noEmit",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write .",
+    "type-check": "vue-tsc --noEmit"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.0.0",
+    "@storybook/addon-docs": "10.3.5",
+    "@storybook/vue3": "^10.3.5",
+    "@storybook/vue3-vite": "^10.3.5",
+    "@types/node": "^20.0.0",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "autoprefixer": "^10.4.0",
+    "eslint": "^9.0.0",
+    "eslint-plugin-storybook": "10.3.5",
+    "eslint-plugin-vue": "^9.0.0",
+    "globals": "^15.0.0",
+    "postcss": "^8.4.0",
+    "prettier": "^3.0.0",
+    "tailwindcss": "^4.2.2",
+    "typescript": "^5.4.0",
+    "typescript-eslint": "^8.0.0",
+    "vite": "^5.0.0",
+    "vue-eslint-parser": "^9.0.0",
+    "vue-tsc": "^2.0.0"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.2.2",
+    "@vueuse/core": "^10.0.0"
+  }
+}

package/src/components/BaseIcon/BaseIcon.stories.ts

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import type { ConcreteComponent } from 'vue';
+import type { BaseIconProps } from './BaseIcon.vue';
+import BaseIcon from './BaseIcon.vue';
+
+const meta: Meta<BaseIconProps> = {
+  title: 'Components/BaseIcon',
+  component: BaseIcon as unknown as ConcreteComponent<BaseIconProps>,
+  tags: ['autodocs'],
+  argTypes: {
+    name: { control: 'text' },
+    iconPath: { control: 'text' },
+    size: {
+      control: 'select',
+      options: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', 'auto'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<BaseIconProps>;
+
+export const Default: Story = {
+  args: { name: 'search', size: 'md', iconPath: '/icons' },
+  render: (args: BaseIconProps) => ({
+    components: { BaseIcon },
+    setup() { return { args }; },
+    template: '<BaseIcon v-bind="args" />',
+  }),
+};
+
+export const Search: Story = {
+  args: { name: 'search', size: 'md', iconPath: '/icons' },
+  render: (args: BaseIconProps) => ({
+    components: { BaseIcon },
+    setup() { return { args }; },
+    template: '<BaseIcon v-bind="args" />',
+  }),
+};
+
+export const NotFound: Story = {
+  args: { name: '', size: 'md', iconPath: '/icons' },
+  render: (args: BaseIconProps) => ({
+    components: { BaseIcon },
+    setup() { return { args }; },
+    template: '<BaseIcon v-bind="args" />',
+  }),
+};
+
+export const AllSizes: Story = {
+  render: () => ({
+    components: { BaseIcon },
+    template: `
+      <div class="flex items-end gap-4">
+        <BaseIcon name="search" size="2xs" />
+        <BaseIcon name="search" size="xs" />
+        <BaseIcon name="search" size="sm" />
+        <BaseIcon name="search" size="md" />
+        <BaseIcon name="search" size="lg" />
+        <BaseIcon name="search" size="xl" />
+        <BaseIcon name="search" size="2xl" />
+        <BaseIcon name="search" size="3xl" />
+      </div>
+    `,
+  }),
+};

package/src/components/BaseIcon/BaseIcon.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { computed, onMounted, onServerPrefetch, ref, watch } from 'vue';
+import type { IconSize } from '../../types/icon';
+
+export interface BaseIconProps {
+  name: string;
+  iconPath?: string;
+  size?: IconSize;
+}
+
+const props = withDefaults(defineProps<BaseIconProps>(), {
+  iconPath: '/icons',
+  size: 'md',
+});
+
+const sizeClasses: Record<IconSize, string> = {
+  '2xs': 'w-3 min-w-3 h-3',
+  'xs':  'w-4 min-w-4 h-4',
+  'sm':  'w-5 min-w-5 h-5',
+  'md':  'w-6 min-w-6 h-6',
+  'lg':  'w-8 min-w-8 h-8',
+  'xl':  'w-10 min-w-10 h-10',
+  '2xl': 'w-12 min-w-12 h-12',
+  '3xl': 'w-16 min-w-16 h-16',
+  'auto': '',
+};
+
+const iconClasses = computed(() => sizeClasses[props.size]);
+
+const svgHtml = ref('');
+const spanRef = ref<HTMLElement | null>(null);
+const isServer = typeof window === 'undefined';
+const notFound = '<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256"><path d="M48,48V208H80a8,8,0,0,1,0,16H40a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8H80a8,8,0,0,1,0,16ZM216,32H176a8,8,0,0,0,0,16h32V208H176a8,8,0,0,0,0,16h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32Z"></path></svg>';
+
+async function getSvgContent(name: string): Promise<string> {
+  const warnNotFound = () =>
+    console.warn(`[BaseIcon] Icon "${name}" not found at ${props.iconPath}/${name}.svg`);
+
+  if (isServer) {
+    const path = await import('path');
+    const fs = await import('fs/promises');
+
+    try {
+      const filePath = path.join(process.cwd(), 'public', props.iconPath, `${name}.svg`);
+      return await fs.readFile(filePath, 'utf8');
+    } catch {
+      warnNotFound();
+      return notFound;
+    }
+  } else {
+    try {
+      const res = await fetch(`${props.iconPath}/${name}.svg`);
+      if (res.ok) return await res.text();
+      throw new Error();
+    } catch {
+      warnNotFound();
+      return notFound;
+    }
+  }
+}
+
+if (isServer) {
+  onServerPrefetch(async () => {
+    svgHtml.value = await getSvgContent(props.name);
+  });
+}
+
+watch(
+  () => props.name,
+  async (newName) => {
+    svgHtml.value = await getSvgContent(newName);
+  },
+);
+
+onMounted(async () => {
+  if (!spanRef.value?.innerHTML.length) {
+    svgHtml.value = await getSvgContent(props.name);
+  }
+});
+</script>
+
+<template>
+  <span
+    ref="spanRef"
+    :class="['baseIcon', 'inline-flex items-center justify-center', iconClasses]"
+    :aria-hidden="true"
+    v-html="svgHtml"
+  />
+</template>
+
+<style scoped>
+:deep(svg) {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/src/components/BaseIcon/index.ts

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

package/src/components/BaseLabel/BaseLabel.stories.ts

@@ -0,0 +1,114 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import type { ConcreteComponent } from 'vue';
+import type { BaseLabelProps } from './BaseLabel.vue';
+import BaseLabel from './BaseLabel.vue';
+
+const meta: Meta<BaseLabelProps> = {
+  title: 'Components/BaseLabel',
+  component: BaseLabel as unknown as ConcreteComponent<BaseLabelProps>,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'tertiary'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md'],
+    },
+    as: {
+      control: 'select',
+      options: ['span', 'button'],
+    },
+    disabled: { control: 'boolean' },
+    href: { control: 'text' },
+    target: { control: 'text' },
+    rel: { control: 'text' },
+    type: {
+      control: 'select',
+      options: ['button', 'submit', 'reset'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<BaseLabelProps>;
+
+export const Primary: Story = {
+  args: { variant: 'primary', size: 'md' },
+  render: (args: BaseLabelProps) => ({
+    components: { BaseLabel },
+    setup() { return { args }; },
+    template: '<BaseLabel v-bind="args">Label</BaseLabel>',
+  }),
+};
+
+export const Secondary: Story = {
+  args: { variant: 'secondary', size: 'md' },
+  render: (args: BaseLabelProps) => ({
+    components: { BaseLabel },
+    setup() { return { args }; },
+    template: '<BaseLabel v-bind="args">Label</BaseLabel>',
+  }),
+};
+
+export const Tertiary: Story = {
+  args: { variant: 'tertiary', size: 'md' },
+  render: (args: BaseLabelProps) => ({
+    components: { BaseLabel },
+    setup() { return { args }; },
+    template: '<BaseLabel v-bind="args">Label</BaseLabel>',
+  }),
+};
+
+export const AsButton: Story = {
+  args: { variant: 'primary', size: 'md', as: 'button' },
+  render: (args: BaseLabelProps) => ({
+    components: { BaseLabel },
+    setup() { return { args }; },
+    template: '<BaseLabel v-bind="args">Clickable</BaseLabel>',
+  }),
+};
+
+export const AsLink: Story = {
+  args: { variant: 'primary', size: 'md', href: 'https://example.com', target: '_blank', rel: 'noopener noreferrer' },
+  render: (args: BaseLabelProps) => ({
+    components: { BaseLabel },
+    setup() { return { args }; },
+    template: '<BaseLabel v-bind="args">Link</BaseLabel>',
+  }),
+};
+
+export const Disabled: Story = {
+  args: { variant: 'primary', size: 'md', as: 'button', disabled: true },
+  render: (args: BaseLabelProps) => ({
+    components: { BaseLabel },
+    setup() { return { args }; },
+    template: '<BaseLabel v-bind="args">Disabled</BaseLabel>',
+  }),
+};
+
+export const Sizes: Story = {
+  render: () => ({
+    components: { BaseLabel },
+    template: `
+      <div class="flex items-center gap-4">
+        <BaseLabel variant="primary" size="md">md label</BaseLabel>
+        <BaseLabel variant="primary" size="sm">sm label</BaseLabel>
+      </div>
+    `,
+  }),
+};
+
+export const Variants: Story = {
+  render: () => ({
+    components: { BaseLabel },
+    template: `
+      <div class="flex items-center gap-4">
+        <BaseLabel variant="primary">Primary</BaseLabel>
+        <BaseLabel variant="secondary">Secondary</BaseLabel>
+        <BaseLabel variant="tertiary">Tertiary</BaseLabel>
+      </div>
+    `,
+  }),
+};

package/src/components/BaseLabel/BaseLabel.vue

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'vue';
+
+export interface BaseLabelProps {
+  variant?: 'primary' | 'secondary' | 'tertiary';
+  size?: 'sm' | 'md';
+  as?: 'span' | 'button';
+  href?: string;
+  target?: AnchorHTMLAttributes['target'];
+  rel?: AnchorHTMLAttributes['rel'];
+  disabled?: boolean;
+  type?: ButtonHTMLAttributes['type'];
+}
+
+const props = withDefaults(defineProps<BaseLabelProps>(), {
+  variant: 'primary',
+  size: 'md',
+  as: 'span',
+  disabled: false,
+  href: undefined,
+  target: undefined,
+  rel: undefined,
+  type: undefined,
+});
+
+const tag = computed(() => (props.href ? 'a' : props.as));
+
+const isInteractive = computed(() => tag.value !== 'span');
+
+const nativeAttrs = computed((): Record<string, unknown> => {
+  if (props.href) {
+    return {
+      href: props.disabled ? undefined : props.href,
+      target: props.target,
+      rel: props.rel,
+      'aria-disabled': props.disabled ? 'true' : undefined,
+      tabindex: props.disabled ? -1 : undefined,
+    };
+  }
+
+  if (props.as === 'button') {
+    return {
+      type: props.type ?? 'button',
+      disabled: props.disabled,
+    };
+  }
+
+  return {};
+});
+</script>
+
+<template>
+  <component
+    :is="tag"
+    v-bind="nativeAttrs"
+    :class="[
+      'baseLabel',
+      'no-underline inline-flex items-center justify-center',
+      `baseLabel--${props.variant}`,
+      `baseLabel--${props.size}`,
+      {
+        'baseLabel--interactive': isInteractive,
+        'baseLabel--disabled': props.disabled,
+      },
+    ]"
+  >
+    <slot />
+  </component>
+</template>
+
+<style scoped>
+@reference "tailwindcss";
+
+.baseLabel {
+  --_fg: var(--baseLabel-fg, #ffffff);
+  background-color: var(--baseLabel-bg, #0024d6);
+  color: var(--_fg);
+  border: var(--baseLabel-border-width, 1px) solid var(--baseLabel-border, transparent);
+  border-radius: var(--baseLabel-radius, 3.5rem);
+  padding: var(--baseLabel-py, 0.125rem) var(--baseLabel-px, 0.5rem);
+  min-height: var(--baseLabel-min-h, 1.5rem);
+  font-size: var(--baseLabel-font-size, 0.75rem);
+  font-weight: var(--baseLabel-font-weight, 600);
+  line-height: 1.2;
+}
+
+.baseLabel--interactive {
+  @apply outline-offset-2 cursor-pointer select-none;
+}
+
+.baseLabel--interactive:hover:not(.baseLabel--disabled) {
+  background-color: var(--baseLabel-bg-hover, #0e161b);
+  border-color: var(--baseLabel-border-hover, #0e161b);
+  color: var(--baseLabel-fg-hover, #ffffff);
+}
+
+.baseLabel--interactive:focus-visible {
+  outline: 2px solid var(--baseLabel-ring, #0066cc);
+}
+
+.baseLabel--disabled {
+  @apply cursor-not-allowed pointer-events-none opacity-50;
+}
+
+/* ── sm ── */
+
+.baseLabel--sm {
+  min-height: var(--baseLabel-sm-min-h, 1.25rem);
+}
+
+/* ── secondary ── */
+
+.baseLabel--secondary {
+  --_fg: var(--baseLabel-secondary-fg, #0024d6);
+  background-color: var(--baseLabel-secondary-bg, #ffffff);
+  color: var(--_fg);
+  border-color: var(--baseLabel-secondary-border, #0024d6);
+}
+
+.baseLabel--secondary.baseLabel--interactive:hover:not(.baseLabel--disabled) {
+  background-color: var(--baseLabel-secondary-bg-hover, #f3f4f6);
+  border-color: var(--baseLabel-secondary-border-hover, #0e161b);
+  color: var(--baseLabel-secondary-fg-hover, #0e161b);
+}
+
+.baseLabel--secondary.baseLabel--interactive:focus-visible {
+  outline: 2px solid var(--baseLabel-secondary-ring, #0066cc);
+}
+
+/* ── tertiary ── */
+
+.baseLabel--tertiary {
+  --_fg: var(--baseLabel-tertiary-fg, #0e161b);
+  background-color: var(--baseLabel-tertiary-bg, transparent);
+  color: var(--_fg);
+  border-color: var(--baseLabel-tertiary-border, transparent);
+}
+
+.baseLabel--tertiary.baseLabel--interactive:hover:not(.baseLabel--disabled) {
+  background-color: var(--baseLabel-tertiary-bg-hover, #f3f4f6);
+  border-color: var(--baseLabel-tertiary-border-hover, #f3f4f6);
+  color: var(--baseLabel-tertiary-fg-hover, #0024d6);
+}
+
+.baseLabel--tertiary.baseLabel--interactive:focus-visible {
+  outline: 2px solid var(--baseLabel-tertiary-ring, #0066cc);
+}
+</style>

package/src/components/BaseLabel/index.ts

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