@300codes/design-system 1.0.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@300codes/design-system",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "type": "module",
   "files": [
     "src/components",
@@ -21,7 +21,9 @@
     "./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"
+    "./base-tooltip": "./src/components/BaseTooltip/index.ts",
+    "./flat-icon-button": "./src/components/FlatIconButton/index.ts",
+    "./quantity-selector": "./src/components/QuantitySelector/index.ts"
   },
   "scripts": {
     "build": "vue-tsc --noEmit",
@@ -30,7 +32,8 @@
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "format": "prettier --write .",
-    "type-check": "vue-tsc --noEmit"
+    "type-check": "vue-tsc --noEmit",
+    "release": "sh -c 'npm version $1 && git push && git push --tags && npm publish --access public' --"
   },
   "peerDependencies": {
     "vue": "^3.5.0"

package/src/components/FlatIconButton/FlatIconButton.stories.ts

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import type { ConcreteComponent } from 'vue';
+import type { FlatIconButtonProps } from './FlatIconButton.vue';
+import FlatIconButton from './FlatIconButton.vue';
+
+const meta: Meta<FlatIconButtonProps> = {
+  title: 'Components/FlatIconButton',
+  component: FlatIconButton as unknown as ConcreteComponent<FlatIconButtonProps>,
+  tags: ['autodocs'],
+  argTypes: {
+    iconName: { control: 'text' },
+    iconPath: { control: 'text' },
+    iconSize: {
+      control: 'select',
+      options: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', 'auto'],
+    },
+    label: { control: 'text' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<FlatIconButtonProps>;
+
+export const Default: Story = {
+  args: {
+    iconName: 'close',
+    iconSize: 'sm',
+    label: 'Close',
+  },
+  render: (args: FlatIconButtonProps) => ({
+    components: { FlatIconButton },
+    setup() {
+      return { args };
+    },
+    template: '<FlatIconButton v-bind="args" />',
+  }),
+};
+
+export const Search: Story = {
+  args: {
+    iconName: 'search',
+    iconSize: 'sm',
+    label: 'Search',
+  },
+  render: (args: FlatIconButtonProps) => ({
+    components: { FlatIconButton },
+    setup() {
+      return { args };
+    },
+    template: '<FlatIconButton v-bind="args" />',
+  }),
+};
+
+export const MediumSize: Story = {
+  args: {
+    iconName: 'close',
+    iconSize: 'md',
+    label: 'Close',
+  },
+  render: (args: FlatIconButtonProps) => ({
+    components: { FlatIconButton },
+    setup() {
+      return { args };
+    },
+    template: '<FlatIconButton v-bind="args" />',
+  }),
+};
+
+export const Sizes: Story = {
+  render: () => ({
+    components: { FlatIconButton },
+    template: `
+      <div class="flex items-center gap-4">
+        <FlatIconButton icon-name="close" icon-size="xs" aria-label="Close xs" />
+        <FlatIconButton icon-name="close" icon-size="sm" aria-label="Close sm" />
+        <FlatIconButton icon-name="close" icon-size="md" aria-label="Close md" />
+        <FlatIconButton icon-name="close" icon-size="lg" aria-label="Close lg" />
+      </div>
+    `,
+  }),
+};

package/src/components/FlatIconButton/FlatIconButton.vue

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

package/src/components/FlatIconButton/index.ts

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

package/src/components/QuantitySelector/QuantitySelector.stories.ts

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import type { ConcreteComponent } from 'vue';
+import { ref } from 'vue';
+import type { QuantitySelectorProps } from './QuantitySelector.vue';
+import QuantitySelector from './QuantitySelector.vue';
+
+const meta: Meta<QuantitySelectorProps> = {
+  title: 'Components/QuantitySelector',
+  component: QuantitySelector as unknown as ConcreteComponent<QuantitySelectorProps>,
+  tags: ['autodocs'],
+  argTypes: {
+    size: { control: 'select', options: ['sm', 'md'] },
+    max: { control: 'number' },
+    disabled: { control: 'boolean' },
+    name: { control: 'text' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<QuantitySelectorProps>;
+
+export const Default: Story = {
+  args: {
+    name: 'quantity',
+    size: 'md',
+  },
+  render: (args: QuantitySelectorProps) => ({
+    components: { QuantitySelector },
+    setup() {
+      const value = ref(1);
+      return { args, value };
+    },
+    template: '<QuantitySelector v-bind="args" v-model="value" />',
+  }),
+};
+
+export const Sizes: Story = {
+  render: () => ({
+    components: { QuantitySelector },
+    setup() {
+      const sm = ref(1);
+      const md = ref(1);
+      return { sm, md };
+    },
+    template: `
+      <div class="flex items-center gap-6">
+        <QuantitySelector name="qty-sm" size="sm" v-model="sm" />
+        <QuantitySelector name="qty-md" size="md" v-model="md" />
+      </div>
+    `,
+  }),
+};
+
+export const WithMax: Story = {
+  args: {
+    name: 'quantity-max',
+    size: 'md',
+    max: 5,
+  },
+  render: (args: QuantitySelectorProps) => ({
+    components: { QuantitySelector },
+    setup() {
+      const value = ref(3);
+      return { args, value };
+    },
+    template: '<QuantitySelector v-bind="args" v-model="value" />',
+  }),
+};
+
+export const Disabled: Story = {
+  args: {
+    name: 'quantity-disabled',
+    size: 'md',
+    disabled: true,
+  },
+  render: (args: QuantitySelectorProps) => ({
+    components: { QuantitySelector },
+    setup() {
+      const value = ref(1);
+      return { args, value };
+    },
+    template: '<QuantitySelector v-bind="args" v-model="value" />',
+  }),
+};

package/src/components/QuantitySelector/QuantitySelector.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import type { IconSize } from '../../types/icon';
+import FlatIconButton from '../FlatIconButton/FlatIconButton.vue';
+
+export interface QuantitySelectorProps {
+  name: string;
+  size?: 'sm' | 'md';
+  max?: number;
+  disabled?: boolean;
+  inputLabel?: string;
+  decreaseLabel?: string;
+  increaseLabel?: string;
+}
+
+const props = withDefaults(defineProps<QuantitySelectorProps>(), {
+  size: 'md',
+  max: undefined,
+  disabled: false,
+  inputLabel: 'Quantity',
+  decreaseLabel: 'Decrease',
+  increaseLabel: 'Increase',
+});
+
+const model = defineModel<number>({ default: 1 });
+
+const text = ref(String(model.value));
+
+const isAtMin = computed(() => model.value <= 1);
+const isAtMax = computed(() => props.max !== undefined && model.value >= props.max);
+const iconSize = computed<IconSize>(() => (props.size === 'sm' ? 'md' : 'lg'));
+
+const disabledBtnStyle = { '--flatIconButton-fg': 'var(--quantitySelector-fg-disabled, #89979f)' };
+const disabledPropStyle = { '--flatIconButton-fg': 'transparent' };
+
+function onDecrease() {
+  if (props.disabled || isAtMin.value) return;
+  model.value--;
+}
+
+function onIncrease() {
+  if (props.disabled || isAtMax.value) return;
+  model.value++;
+}
+
+function onInput(event: Event) {
+  const input = event.target as HTMLInputElement;
+  const filtered = input.value.replace(/\D/g, '');
+  input.value = filtered;
+  text.value = filtered;
+}
+
+function onBlur() {
+  const parsed = parseInt(text.value, 10);
+  let value = isNaN(parsed) || parsed < 1 ? 1 : parsed;
+
+  if (props.max !== undefined) value = Math.min(value, props.max);
+
+  model.value = value;
+  text.value = String(value);
+}
+
+watch(model, (val) => {
+  text.value = String(val);
+});
+</script>
+
+<template>
+  <div
+    :class="[
+      'quantitySelector',
+      `quantitySelector--${size}`,
+      'inline-flex items-center overflow-hidden',
+    ]"
+  >
+    <FlatIconButton
+      icon-name="minus"
+      :icon-size="iconSize"
+      :label="decreaseLabel"
+      :disabled="disabled || isAtMin"
+      class="h-full aspect-square"
+      :style="disabled ? disabledPropStyle : isAtMin ? disabledBtnStyle : undefined"
+      @click="onDecrease"
+    />
+
+    <input
+      :name="name"
+      :value="disabled ? '1' : text"
+      type="text"
+      inputmode="numeric"
+      pattern="[0-9]*"
+      autocomplete="off"
+      :aria-label="inputLabel"
+      :disabled="disabled"
+      :class="[
+        'quantitySelector__input',
+        'bg-transparent border-0 outline-none text-center leading-normal h-full shrink-0 disabled:cursor-not-allowed',
+      ]"
+      @input="onInput"
+      @blur="onBlur"
+    >
+
+    <FlatIconButton
+      icon-name="plus"
+      :icon-size="iconSize"
+      :label="increaseLabel"
+      :disabled="disabled || isAtMax"
+      class="h-full aspect-square"
+      :style="disabled ? disabledPropStyle : isAtMax ? disabledBtnStyle : undefined"
+      @click="onIncrease"
+    />
+  </div>
+</template>
+
+<style scoped>
+.quantitySelector {
+  --_h: var(--quantitySelector-h, 3.5rem);
+  --_input-w: var(--quantitySelector-input-w, 2.125rem);
+  --_fs: var(--quantitySelector-font-size, 1rem);
+
+  height: var(--_h);
+  background-color: var(--quantitySelector-bg, #f3f5f7);
+  border: var(--quantitySelector-border-width, 0) solid var(--quantitySelector-border, #d6dde1);
+  border-radius: var(--quantitySelector-radius, 9999px);
+}
+
+.quantitySelector--sm {
+  --_h: var(--quantitySelector-sm-h, 2.5rem);
+  --_input-w: var(--quantitySelector-sm-input-w, 2.875rem);
+  --_fs: var(--quantitySelector-sm-font-size, 0.875rem);
+}
+
+.quantitySelector__input {
+  width: var(--_input-w);
+  font-size: var(--_fs);
+  color: var(--quantitySelector-fg, #0e161b);
+}
+
+.quantitySelector__input:hover:not(:disabled) {
+  background-color: var(--quantitySelector-bg-hover, #f3f5f7);
+}
+</style>

package/src/components/QuantitySelector/index.ts

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

package/src/components/SelectInput/SelectInput.vue

@@ -2,7 +2,7 @@
 import { ref, computed, nextTick, watch } from 'vue';
 import { useMediaQuery, onClickOutside } from '@vueuse/core';
 import BaseIcon from '../BaseIcon/BaseIcon.vue';
-import InputIconButton from '../TextInput/components/InputIconButton.vue';
+import FlatIconButton from '../FlatIconButton/FlatIconButton.vue';
 
 export type SelectOption = string | { value: string; label: string };
 
@@ -259,9 +259,9 @@ watch(isMobile, () => {
         >
           {{ mobileTitle || placeholder }}
 
-          <InputIconButton
+          <FlatIconButton
             icon-name="close"
-            aria-label="Close"
+            label="Close"
             class="ml-auto"
             @click="closeDropdown(true)"
           />

package/src/components/TextInput/TextInput.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, type Ref } from 'vue';
 import type { IconSize } from '../../types/icon';
-import InputIconButton from './components/InputIconButton.vue';
+import FlatIconButton from '../FlatIconButton/FlatIconButton.vue';
 
 export type InputType = 'text' | 'password' | 'email' | 'tel' | 'search';
 export type FilterType = 'number' | 'number-dash' | 'alpha' | 'alpha-space';
@@ -124,22 +124,22 @@ defineExpose<{ el: Ref<HTMLInputElement | undefined> }>({ el });
       @keyup.enter="emit('enter')"
     >
 
-    <InputIconButton
+    <FlatIconButton
       v-if="iconLeft"
       :icon-name="iconLeft.name"
       :icon-path="iconLeft.iconPath"
       :icon-size="iconLeft.size"
-      :aria-label="iconLeft.ariaLabel"
+      :label="iconLeft.ariaLabel || iconLeft.name"
       :class="['absolute top-1/2 -translate-y-1/2 left-3', iconLeft.class]"
       @click="emit('clickIcon', 'left')"
     />
 
-    <InputIconButton
+    <FlatIconButton
       v-if="iconRight"
       :icon-name="iconRight.name"
       :icon-path="iconRight.iconPath"
       :icon-size="iconRight.size"
-      :aria-label="iconRight.ariaLabel"
+      :label="iconRight.ariaLabel || iconRight.name"
       :class="['absolute top-1/2 -translate-y-1/2 right-3', iconRight.class]"
       @click="emit('clickIcon', 'right')"
     />

package/src/components/index.ts

@@ -12,4 +12,6 @@ export * from './RadioInput/index';
 export * from './TabsList/index';
 export * from './SearchInput/index';
 export * from './BaseTooltip/index';
+export * from './FlatIconButton/index';
+export * from './QuantitySelector/index';
 export type { IconSize } from '../types/icon';

package/src/css/tokens.css

@@ -182,15 +182,6 @@
   --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
    * ──────────────────────────────────────────────── */
@@ -382,6 +373,40 @@
   --baseTooltip-lg-arrow-half-w: theme(--spacing-3);    /* lg half-width 12px */
   --baseTooltip-lg-arrow-h:      theme(--spacing-4);    /* lg arrow height 16px */
 
+  /* ────────────────────────────────────────────────
+   * FlatIconButton
+   * ──────────────────────────────────────────────── */
+
+  --flatIconButton-bg:        transparent;
+  --flatIconButton-fg:        theme(--color-input-icon);
+  --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-radius:    theme(--radius-full);
+
+  /* ────────────────────────────────────────────────
+   * QuantitySelector
+   * ──────────────────────────────────────────────── */
+
+  --quantitySelector-bg:             theme(--color-input-bg);
+  --quantitySelector-fg:             theme(--color-input-fg);
+  --quantitySelector-bg-hover:       #f3f5f7;
+  --quantitySelector-fg-disabled:    theme(--color-disabled-foreground);
+  --quantitySelector-border:         theme(--color-input-border);
+  --quantitySelector-border-width:   0;
+  --quantitySelector-radius:         9999px;
+
+  /* md (default) */
+  --quantitySelector-h:              theme(--spacing-14);   /* 56px */
+  --quantitySelector-input-w:        theme(--spacing-12);   /* 48px */
+  --quantitySelector-font-size:      theme(--text-base);    /* 16px */
+
+  /* sm */
+  --quantitySelector-sm-h:           theme(--spacing-10);   /* 40px */
+  --quantitySelector-sm-input-w:     theme(--spacing-10);   /* 40px */
+  --quantitySelector-sm-font-size:   theme(--text-sm);      /* 14px */
+
   /* ────────────────────────────────────────────────
    * TabsList
    * ──────────────────────────────────────────────── */

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

@@ -1,54 +0,0 @@
-<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>