@300codes/design-system 1.2.0 → 1.2.2

package/package.json

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

package/src/components/BaseLabel/BaseLabel.vue

@@ -56,13 +56,13 @@ const nativeAttrs = computed((): Record<string, unknown> => {
     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,
       },
+      'no-underline inline-flex items-center justify-center',
     ]"
   >
     <slot />
@@ -79,10 +79,9 @@ const nativeAttrs = computed((): Record<string, unknown> => {
   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);
+  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 {
@@ -106,7 +105,8 @@ const nativeAttrs = computed((): Record<string, unknown> => {
 /* ── sm ── */
 
 .baseLabel--sm {
-  min-height: var(--baseLabel-sm-min-h, 1.25rem);
+  height: var(--baseLabel-sm-min-h, 1.25rem);
+  font-size: var(--baseLabel-sm-font-size, 0.625rem);
 }
 
 /* ── secondary ── */

package/src/components/FlatIconButton/FlatIconButton.vue

@@ -41,7 +41,7 @@ const emit = defineEmits<{
 .flatIconButton {
   color: var(--flatIconButton-fg, #0e161b);
   background: var(--flatIconButton-bg, transparent);
-  padding: var(--flatIconButton-p, 0.25rem);
+  padding: var(--flatIconButton-p, 0);
   border-radius: var(--flatIconButton-radius, 9999px);
 }
 

package/src/components/QuantitySelector/QuantitySelector.vue

@@ -132,6 +132,7 @@ watch(model, (val) => {
 
 .quantitySelector__input {
   width: var(--_input-w);
+  min-width: var(--_input-w);
   font-size: var(--_fs);
   color: var(--quantitySelector-fg, #0e161b);
 }

package/src/components/SimpleButton/SimpleButton.vue

@@ -93,7 +93,6 @@ const nativeAttrs = computed((): Record<string, unknown> => {
   min-height: var(--simpleButton-min-h, 3.5rem);
   font-size: var(--simpleButton-font-size, 1rem);
   font-weight: var(--simpleButton-font-weight, 600);
-  line-height: 1.2;
   gap: var(--simpleButton-gap, 1rem);
 }
 

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,40 @@ 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 },
+  },
+  render: () => ({
+    components: { TabsList },
+    setup() {
+      const active = ref('overview');
+      return { active, defaultItems };
+    },
+    template: '<div style="width: 200px"><TabsList :items="defaultItems" 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,16 @@ 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,
+.tabsList--vertical .tabsList__tab {
+  @apply md:w-full;
+}
+
 /* ── lg ── */
 
 .tabsList--lg {
@@ -152,5 +177,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

@@ -126,6 +126,7 @@
 
   /* sm */
   --baseLabel-sm-min-h: theme(--spacing-5);
+  --baseLabel-sm-font-size: theme(--text-2xs);
 
   /* ────────────────────────────────────────────────
    * LabelInput
@@ -382,7 +383,7 @@
   --flatIconButton-fg-hover:  theme(--color-input-icon-hover);
   --flatIconButton-bg-hover:  theme(--color-input-icon-bg-hover);
   --flatIconButton-outline:   theme(--color-outline);
-  --flatIconButton-p:         theme(--spacing-1);
+  --flatIconButton-p:         theme(--spacing-0);
   --flatIconButton-radius:    theme(--radius-full);
 
   /* ────────────────────────────────────────────────
@@ -433,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 */
 }