@300codes/design-system 1.0.0 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@300codes/design-system",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "type": "module",
   "files": [
     "src/components",
@@ -21,7 +21,8 @@
     "./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"
   },
   "scripts": {
     "build": "vue-tsc --noEmit",

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: ['xs', 'sm', 'md', 'lg', 'xl'],
+    },
+    ariaLabel: { control: 'text' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<FlatIconButtonProps>;
+
+export const Default: Story = {
+  args: {
+    iconName: 'close',
+    iconSize: 'sm',
+    ariaLabel: 'Close',
+  },
+  render: (args: FlatIconButtonProps) => ({
+    components: { FlatIconButton },
+    setup() {
+      return { args };
+    },
+    template: '<FlatIconButton v-bind="args" />',
+  }),
+};
+
+export const Search: Story = {
+  args: {
+    iconName: 'search',
+    iconSize: 'sm',
+    ariaLabel: 'Search',
+  },
+  render: (args: FlatIconButtonProps) => ({
+    components: { FlatIconButton },
+    setup() {
+      return { args };
+    },
+    template: '<FlatIconButton v-bind="args" />',
+  }),
+};
+
+export const MediumSize: Story = {
+  args: {
+    iconName: 'close',
+    iconSize: 'md',
+    ariaLabel: '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,54 @@
+<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;
+  ariaLabel?: string;
+}
+
+withDefaults(defineProps<FlatIconButtonProps>(), {
+  iconPath: '/icons',
+  iconSize: 'sm',
+  ariaLabel: undefined,
+});
+
+const emit = defineEmits<{
+  click: [];
+}>();
+</script>
+
+<template>
+  <button
+    type="button"
+    class="flatIconButton 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>
+.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 {
+  background-color: var(--flatIconButton-bg-hover, #f3f4f6);
+}
+
+.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/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,7 +259,7 @@ watch(isMobile, () => {
         >
           {{ mobileTitle || placeholder }}
 
-          <InputIconButton
+          <FlatIconButton
             icon-name="close"
             aria-label="Close"
             class="ml-auto"

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,7 +124,7 @@ defineExpose<{ el: Ref<HTMLInputElement | undefined> }>({ el });
       @keyup.enter="emit('enter')"
     >
 
-    <InputIconButton
+    <FlatIconButton
       v-if="iconLeft"
       :icon-name="iconLeft.name"
       :icon-path="iconLeft.iconPath"
@@ -134,7 +134,7 @@ defineExpose<{ el: Ref<HTMLInputElement | undefined> }>({ el });
       @click="emit('clickIcon', 'left')"
     />
 
-    <InputIconButton
+    <FlatIconButton
       v-if="iconRight"
       :icon-name="iconRight.name"
       :icon-path="iconRight.iconPath"

package/src/components/index.ts

@@ -12,4 +12,5 @@ export * from './RadioInput/index';
 export * from './TabsList/index';
 export * from './SearchInput/index';
 export * from './BaseTooltip/index';
+export * from './FlatIconButton/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,18 @@
   --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);
+
   /* ────────────────────────────────────────────────
    * 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>