@300codes/design-system 1.2.1 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@300codes/design-system",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "type": "module",
   "files": [
     "src/components",

package/src/components/TabsList/TabsList.stories.ts

@@ -14,6 +14,8 @@ const meta: Meta<TabsListProps> = {
       options: ['md', 'lg'],
     },
     items: { control: 'object' },
+    iconPath: { control: 'text' },
+    vertical: { control: 'boolean' },
   },
 };
 
@@ -62,6 +64,50 @@ export const Sizes: Story = {
   }),
 };
 
+export const WithIcons: Story = {
+  args: {
+    size: 'md',
+    items: [
+      { label: 'Overview', value: 'overview', icon: 'house' },
+      { label: 'Analytics', value: 'analytics', icon: 'chart-bar' },
+      { label: 'Reports', value: 'reports', icon: 'file-text' },
+      { label: 'Settings', value: 'settings', icon: 'gear' },
+    ],
+  },
+  render: (args: TabsListProps) => ({
+    components: { TabsList },
+    setup() {
+      const active = ref('overview');
+      return { args, active };
+    },
+    template: '<TabsList v-bind="args" v-model="active" />',
+  }),
+};
+
+export const Vertical: Story = {
+  parameters: {
+    controls: { disable: true },
+  },
+  args: {
+    size: 'md',
+    items: [
+      { label: 'Overview', value: 'overview', icon: 'house' },
+      { label: 'Analytics', value: 'analytics', icon: 'chart-bar' },
+      { label: 'Reports', value: 'reports', icon: 'file-text' },
+      { label: 'Settings', value: 'settings', icon: 'gear' },
+    ],
+  },
+  render: (args: TabsListProps) => ({
+    components: { TabsList },
+    setup() {
+      const active = ref('overview');
+      return { args, active };
+    },
+    template:
+      '<div style="width: 200px"><TabsList v-bind="args" v-model="active" :vertical="true" /></div>',
+  }),
+};
+
 export const WithDisabled: Story = {
   args: {
     size: 'md',

package/src/components/TabsList/TabsList.vue

@@ -1,19 +1,25 @@
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue';
+import BaseIcon from '../BaseIcon/BaseIcon.vue';
 
 export interface TabsListItem {
   label: string;
   value: string;
   disabled?: boolean;
+  icon?: string;
 }
 
 export interface TabsListProps {
   items: TabsListItem[];
   size?: 'md' | 'lg';
+  iconPath?: string;
+  vertical?: boolean;
 }
 
 const props = withDefaults(defineProps<TabsListProps>(), {
   size: 'md',
+  iconPath: '/icons',
+  vertical: false,
 });
 
 const model = defineModel<string>({ default: '' });
@@ -71,6 +77,7 @@ watch(model, () => {
     :class="[
       'tabsList',
       `tabsList--${size}`,
+      { 'tabsList--vertical': vertical },
       'flex flex-nowrap items-center overflow-x-auto list-none m-0 p-0',
     ]"
     @focusout="handleFocusOut"
@@ -98,6 +105,13 @@ watch(model, () => {
         @keydown="handleKeydown($event, index)"
       >
         {{ item.label }}
+
+        <BaseIcon
+          v-if="item.icon"
+          :name="item.icon"
+          :icon-path="iconPath"
+          size="md"
+        />
       </button>
     </li>
   </ul>
@@ -122,6 +136,7 @@ watch(model, () => {
   font-weight: var(--tabsList-font-weight, 600);
   outline: var(--tabsList-outline-width, 4px) solid transparent;
   outline-offset: var(--tabsList-outline-offset, -4px);
+  gap: var(--tabsList-icon-gap, 0);
 }
 
 .tabsList__tab:hover:not(.tabsList__tab--active):not(.tabsList__tab--disabled) {
@@ -142,6 +157,20 @@ watch(model, () => {
   @apply cursor-not-allowed pointer-events-none opacity-50;
 }
 
+/* ── vertical (md breakpoint and up) ── */
+
+.tabsList--vertical {
+  @apply md:flex-col;
+}
+
+.tabsList--vertical > li {
+  @apply md:w-full;
+}
+
+.tabsList--vertical .tabsList__tab {
+  @apply md:w-full md:justify-between;
+}
+
 /* ── lg ── */
 
 .tabsList--lg {
@@ -152,5 +181,6 @@ watch(model, () => {
   padding: 0 var(--tabsList-lg-px, 2.25rem);
   height: var(--tabsList-lg-h, 3.5rem);
   font-size: var(--tabsList-lg-font-size, 1rem);
+  gap: var(--tabsList-lg-icon-gap, 0);
 }
 </style>

package/src/css/tokens.css

@@ -434,10 +434,12 @@
   --tabsList-px:           theme(--spacing-7);   /* 28px */
   --tabsList-h:            theme(--spacing-10);  /* 40px */
   --tabsList-font-size:    theme(--text-sm);
+  --tabsList-icon-gap:     theme(--spacing-0);  /*  0px */
 
   /* 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);
+  --tabsList-lg-icon-gap:  theme(--spacing-0);   /* 0px */
 }