feat: link button (#8)

packages/celeste-vue/src/components/alert/index.ts

@@ -1 +1,2 @@
 export * from './alert.vue';
+export { default as Alert } from './alert.vue';

packages/celeste-vue/src/components/button/button.vue

@@ -21,22 +21,21 @@ export interface ButtonProps extends PrimitiveProps {
   iconPosition?: 'leading' | 'trailing';
   icon?: string;
   label?: string;
-  disabled?: boolean;
-  as?: keyof HTMLElementTagNameMap;
 }
 </script>
 
 <template>
   <Primitive
     :as
-    :disabled
+    :as-child
     :class="clsx(
       'celeste-button',
       `celeste-button-type-${type}`,
       `celeste-button-size-${size}`,
       `celeste-button-variant-${variant}`,
       props.class,
     )"
+    :role="as === 'a' ? 'link' : 'button'"
   >
     <i v-if="icon && iconPosition === 'leading'" :class="icon" />
     <span v-if="label" role="presentation">{{ label }}</span>
@@ -236,7 +235,7 @@ $hover-map: (
   transition-timing-function: ease-out;
   transition-duration: var(--animation-fast);
   text-decoration: none;
-  transition-property: background-color color border-color;
+  transition-property: background-color, color, border-color;
 
   &:disabled {
     cursor: default;

packages/celeste-vue/src/components/button/index.ts

@@ -0,0 +1,5 @@
+export * from './button.vue';
+export { default as Button } from './button.vue';
+
+export * from './link-button.vue';
+export { default as LinkButton } from './link-button.vue';

packages/celeste-vue/src/components/button/link-button.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+import { Primitive, type PrimitiveProps } from 'radix-vue';
+
+const props = withDefaults(defineProps<LinkButtonProps>(), {
+  size: 'sm',
+  type: 'primary',
+  as: 'a',
+});
+</script>
+
+<script lang="ts">
+export interface LinkButtonProps extends PrimitiveProps {
+  class?: HTMLAttributes['class'];
+  size?: 'sm' | 'md';
+  type?: 'primary' | 'black' | 'gray' | 'error';
+  underline?: boolean;
+  disabled?: boolean;
+}
+</script>
+
+<template>
+  <Primitive
+    :as
+    :disabled
+    :as-child
+    :class="clsx(
+      'celeste-link-button',
+      `celeste-link-button-${type}`,
+      `celeste-link-button-${size}`,
+      disabled && 'celeste-link-button-disabled',
+      underline && 'celeste-link-button-underline',
+      props.class,
+    )"
+    :role="as === 'a' ? 'link' : 'button'"
+  >
+    <slot />
+  </Primitive>
+</template>
+
+<style lang="scss" scoped>
+.celeste-link-button {
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+  justify-content: center;
+  transition-property: color, text-decoration-color;
+  transition-timing-function: ease-out;
+  transition-duration: var(--animation-fast);
+  cursor: pointer;
+
+  &:disabled,
+  &-disabled {
+    cursor: default;
+    pointer-events: none;
+    color: var(--color-text-disabled-300);
+  }
+
+  &:hover,
+  &:focus {
+    outline: none;
+    text-decoration: underline;
+  }
+
+  &-underline {
+    text-decoration: underline;
+  }
+
+  &-md {
+    height: 20px;
+    font: var(--label-sm);
+
+    i {
+      height: 20px;
+      width: 20px;
+    }
+  }
+
+  &-sm {
+    height: 16px;
+    font: var(--label-xs);
+
+    i {
+      height: 16px;
+      width: 16px;
+    }
+  }
+
+  &-primary:not(&-disabled) {
+    color: var(--color-primary-base);
+
+    &:hover,
+    &:focus {
+      color: var(--color-primary-darker);
+    }
+  }
+
+  &-black:not(&-disabled) {
+    color: var(--color-text-strong-950);
+
+    &:hover,
+    &:focus {
+      color: var(--color-text-strong-950);
+    }
+  }
+
+  &-gray:not(&-disabled) {
+    color: var(--color-text-sub-600);
+
+    &:hover,
+    &:focus {
+      color: var(--color-text-sub-600);
+    }
+  }
+
+  &-error:not(&-disabled) {
+    color: var(--color-state-error-base);
+
+    &:hover,
+    &:focus {
+      color: var(--color-red-700);
+    }
+  }
+}
+</style>

packages/celeste-vue/src/components/button/stories/link-button.stories.ts

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import LinkButton from '../link-button.vue';
+
+const meta: Meta<typeof LinkButton> = {
+  title: 'Components/LinkButton',
+  component: LinkButton,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof LinkButton>;
+
+export const Default: Story = {
+  render: args => ({
+    components: { LinkButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <LinkButton target="self" href="https://google.com" v-bind="args">
+        Link Button Text
+        <i i-celeste-arrow-right-s-line />
+      </LinkButton>
+    `,
+  }),
+};

packages/celeste-vue/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './alert';
+export * from './button';

packages/celeste-vue/src/index.ts

@@ -1,3 +1,15 @@
+import type { App } from 'vue';
+import * as components from '@/components';
 import 'virtual:uno.css';
 
-export * from '@/components/alert';
+const Celeste = {
+  install(vue: App) {
+    Object.entries(components).forEach(([name, component]) => {
+      vue.component(name, component);
+    });
+  },
+};
+
+export * from '@/components';
+
+export default Celeste;

packages/celeste-vue/tsconfig.app.json

@@ -4,6 +4,7 @@
   "compilerOptions": {
     "target": "esnext",
     "jsx": "preserve",
+    "jsxImportSource": "vue",
     "lib": ["esnext", "dom"],
     "baseUrl": ".",
     "module": "esnext",

packages/celeste-vue/tsconfig.build.json

@@ -3,6 +3,7 @@
   "compilerOptions": {
     "target": "esnext",
     "jsx": "preserve",
+    "jsxImportSource": "vue",
     "lib": ["esnext", "dom"],
     "baseUrl": ".",
     "module": "esnext",

packages/celeste-vue/tsconfig.check.json

@@ -4,6 +4,7 @@
   "compilerOptions": {
     "target": "esnext",
     "jsx": "preserve",
+    "jsxImportSource": "vue",
     "lib": [
       "esnext",
       "dom"

packages/celeste-vue/uno.config.ts

@@ -11,7 +11,7 @@ export default defineConfig({
       extraProperties: {
         width: '16px',
         height: '16px',
-        display: 'block',
+        display: 'inline-block',
       },
       collections: {
         [info.prefix]: () => icons,

packages/celeste-vue/vite.config.ts

@@ -4,8 +4,6 @@ import uno from 'unocss/vite';
 import { defineConfig } from 'vite';
 import dts from 'vite-plugin-dts';
 
-const root = resolve(__dirname);
-
 export default defineConfig({
   plugins: [
     uno(),
@@ -18,29 +16,36 @@ export default defineConfig({
   ],
   resolve: {
     alias: {
-      '@': resolve(root, 'src'),
+      '@': resolve(import.meta.dirname, 'src'),
     },
-    dedupe: [
-      'vue',
-      '@vue/runtime-core',
-    ],
+    dedupe: ['vue'],
   },
   build: {
+    cssCodeSplit: true,
     lib: {
-      formats: ['es'],
-      name: 'celeste',
-      fileName: (format, name) => `${name}.${format === 'es' ? 'js' : 'umd.cjs'}`,
+      name: 'celeste-vue',
+      fileName: (format, name) => {
+        return `${name}.${format === 'es' ? 'js' : 'umd.cjs'}`;
+      },
       entry: {
         index: resolve(__dirname, 'src/index.ts'),
       },
     },
     rollupOptions: {
-      external: ['vue', '@vue/runtime-core'],
+      external: ['vue', 'os'],
       output: {
+        exports: 'named',
         globals: {
           vue: 'Vue',
         },
+        assetFileNames: (chunkInfo) => {
+          if (chunkInfo.name === 'style.css')
+            return 'index.css';
+
+          return chunkInfo.name as string;
+        },
       },
     },
+    emptyOutDir: true,
   },
 });