artharexian-ui 0.2.7 → 0.2.9

package/cli/index.mjs

@@ -14,7 +14,7 @@ const component = args[1]
 const cwd = process.cwd()
 
 // Try installed package first, then fallback to local components (for development)
-let registryRoot = path.resolve(cwd, 'node_modules/artharexian-ui/registry')
+let registryRoot = path.resolve(cwd, 'node_modules/artharexian-ui/src/components')
 if (!fs.existsSync(registryRoot)) {
   const localRegistry = path.resolve(__dirname, '../src/components')
   if (fs.existsSync(localRegistry)) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "artharexian-ui",
   "description": "Vue 3 UI component library",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "license": "MIT",
   "private": false,
   "type": "module",
@@ -19,7 +19,7 @@
   "files": [
     "dist",
     "src/styles",
-    "registry",
+    "src/components",
     "cli"
   ],
   "exports": {

package/src/components/CheckboxBase.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { type Component } from 'vue'
+
+import CheckIcon from '../assets/CheckIcon.vue'
+
+withDefaults(defineProps<{ isDisabled?: boolean; icon?: Component }>(), { icon: CheckIcon })
+const modelValue = defineModel({ default: false })
+defineOptions({ inheritAttrs: false })
+</script>
+
+<template>
+  <label :class="['wrapper', { 'is-disabled': isDisabled }]">
+    <input type="checkbox" v-model="modelValue" v-bind="$attrs" />
+    <div class="checkbox">
+      <component :is="icon" class="indicator" />
+    </div>
+    <slot />
+  </label>
+</template>
+
+<style scoped>
+.wrapper {
+  display: inline-flex;
+  cursor: pointer;
+}
+
+input {
+  appearance: none;
+
+  &:focus-visible + .checkbox {
+    outline: 0.2rem solid var(--foreground);
+    outline-offset: 0.4rem;
+  }
+
+  &:checked + .checkbox {
+    color: var(--primary);
+
+    background-image: linear-gradient(
+      to top left,
+      color-mix(in oklch, var(--primary), transparent 95%),
+      color-mix(in oklch, var(--primary), transparent 75%)
+    );
+    box-shadow: var(--shadow-raised);
+  }
+
+  &:checked + .checkbox .indicator {
+    display: block;
+  }
+}
+
+.checkbox {
+  display: grid;
+  place-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--radius-sm);
+  border: 0.1rem solid var(--color-highlight);
+  background-color: var(--background);
+  box-shadow: var(--shadow-inset);
+  transition:
+    background-color 250ms ease-out,
+    color 250ms ease-out,
+    box-shadow 250ms ease-out;
+}
+
+.indicator {
+  display: none;
+}
+</style>

package/src/components/SwitchBase.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+const modelValue = defineModel({ default: false })
+defineProps<{ isDisabled?: boolean }>()
+</script>
+
+<template>
+  <label :class="['wrapper', { 'is-disabled': isDisabled }]">
+    <input type="checkbox" v-model="modelValue" />
+    <div class="switch">
+      <div class="thumb" />
+    </div>
+    <slot />
+  </label>
+</template>
+
+<style scoped>
+.wrapper {
+  display: inline-flex;
+  cursor: pointer;
+}
+
+input {
+  appearance: none;
+  &:focus-visible + .switch {
+    outline: 0.2rem solid var(--foreground);
+    outline-offset: 0.4rem;
+  }
+  &:checked + .switch {
+    background-color: var(--primary);
+    border: 0.1rem solid var(--primary);
+  }
+  &:checked + .switch .thumb {
+    transform: translateX(2.6rem);
+    &::before {
+      background-color: var(--primary);
+    }
+  }
+}
+
+.switch {
+  height: 2.2rem;
+  width: 4.8rem;
+  border-radius: calc(1px * Infinity);
+  background-color: var(--background);
+  box-shadow: var(--shadow-inset);
+  border: 0.1rem solid var(--color-highlight);
+  transition:
+    background-color 250ms ease-out,
+    box-shadow 250ms ease-out;
+}
+
+.thumb {
+  display: grid;
+  place-content: center;
+  height: 2rem;
+  aspect-ratio: 1;
+  border-radius: calc(1px * Infinity);
+  background-color: var(--background);
+  box-shadow: var(--shadow-inset);
+  transform: translateX(0);
+  transition: all 200ms ease-out;
+  border: 0.1rem solid var(--color-highlight);
+  &::before {
+    content: '';
+    width: 0.4rem;
+    aspect-ratio: 1;
+    background-color: var(--muted-foreground);
+    border-radius: calc((1px * Infinity));
+  }
+}
+</style>

package/src/components/ThemeToggle.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import MoonIcon from '../assets/MoonIcon.vue'
+import SunIcon from '../assets/SunIcon.vue'
+import useTheme from '../composables/useTheme'
+import ButtonBase from './button-base/ButtonBase.vue'
+
+const { currentTheme, toggleTheme } = useTheme()
+</script>
+
+<template>
+  <ButtonBase
+    @click="toggleTheme()"
+    :aria-label="`Switch to ${currentTheme === 'dark' ? 'light' : 'dark'} theme`"
+    class="theme-toggle-btn"
+    shape="radius-circle"
+  >
+    <MoonIcon v-if="currentTheme === 'dark'" class="moon" />
+    <SunIcon v-else />
+  </ButtonBase>
+</template>
+
+<style scoped>
+.theme-toggle-btn {
+  font-size: 1.5rem;
+}
+.moon {
+  height: 2rem;
+  width: 2rem;
+}
+</style>

package/src/components/button-base/ButtonBase.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import type { ButtonProps } from './types'
+
+const { variant = 'default', shape = 'radius-default', is = 'button' } = defineProps<ButtonProps>()
+</script>
+
+<template>
+  <component :is :class="['btn', shape, variant]" :aria-busy="isPending">
+    <slot>button</slot>
+  </component>
+</template>
+
+<style scoped>
+.btn {
+  display: inline-flex;
+  text-wrap: nowrap;
+  font-weight: 500;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border: 0.3rem solid var(--color-border);
+  background: var(--background);
+  box-shadow: var(--shadow-raised);
+  transition:
+    scale 0.2s ease-in-out,
+    background-color 0.2s ease-in-out,
+    color 0.2s ease-in-out,
+    box-shadow 0.1s ease-in-out,
+    border-color 0.1s ease-in-out;
+
+  &:active {
+    box-shadow: var(--shadow-inset);
+    scale: 97%;
+  }
+  &:focus-visible {
+    outline: 0.2rem solid var(--foreground);
+    outline-offset: 0.2rem;
+  }
+  &:hover:not(:disabled) {
+    opacity: 0.85;
+  }
+}
+
+.radius-default {
+  border-radius: var(--radius-xl);
+  padding-inline: 1.6rem;
+  aspect-ratio: 1;
+  height: 4.8rem;
+}
+.radius-circle {
+  border-radius: 5rem;
+  padding: 1rem;
+  min-width: 5rem;
+  aspect-ratio: 1;
+}
+
+.primary {
+  color: var(--primary);
+  background-image: linear-gradient(
+    to top left,
+    color-mix(in oklch, var(--primary), transparent 97%),
+    color-mix(in oklch, var(--primary), transparent 78%)
+  );
+}
+
+.default {
+  background-image: linear-gradient(
+    to top left,
+    color-mix(in oklch, var(--muted), transparent 97%),
+    color-mix(in oklch, var(--muted), transparent 5%)
+  );
+}
+
+.danger {
+  color: var(--color-danger);
+  background-image: linear-gradient(
+    to top left,
+    color-mix(in oklch, var(--color-danger), transparent 97%),
+    color-mix(in oklch, var(--color-danger), transparent 78%)
+  );
+}
+</style>

package/src/components/button-base/index.stories.ts

@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import ButtonBase from './ButtonBase.vue'
+import type { ButtonProps } from './types'
+
+const meta = {
+  title: 'components/ButtonBase',
+  component: ButtonBase,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'default', 'danger'] satisfies ButtonProps['variant'][],
+    },
+    shape: {
+      control: 'select',
+      options: ['radius-default', 'radius-circle'] satisfies ButtonProps['shape'][],
+    },
+    type: {
+      control: 'select',
+      options: ['button', 'submit', 'reset'] satisfies ButtonProps['type'][],
+    },
+    is: {
+      control: 'select',
+      options: ['button', 'a'],
+    },
+    // @ts-ignore: attribute
+    disabled: {
+      control: 'boolean',
+    },
+    isPending: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof ButtonBase>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    default: 'Button',
+  },
+}
+
+export const Primary: Story = {
+  args: {
+    default: 'Primary Button',
+    variant: 'primary',
+    isPending: false,
+  },
+}
+
+export const Danger: Story = {
+  args: {
+    default: 'Danger Button',
+    variant: 'danger',
+  },
+}
+
+export const CircleShape: Story = {
+  args: {
+    default: '✓',
+    shape: 'radius-circle',
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    default: 'Disabled',
+    // @ts-ignore: attribute
+    disabled: true,
+  },
+}
+
+export const Pending: Story = {
+  args: {
+    default: 'Loading...',
+    isPending: true,
+    variant: 'primary',
+  },
+}
+
+export const AsLink: Story = {
+  args: {
+    default: 'Link Button',
+    is: 'a',
+    // @ts-ignore: attribute
+    href: '#',
+    variant: 'primary',
+  },
+}
+
+export const AllVariants: Story = {
+  render: () => ({
+    components: { ButtonBase },
+    template: `
+      <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
+        <ButtonBase variant="default">Default</ButtonBase>
+        <ButtonBase variant="primary">Primary</ButtonBase>
+        <ButtonBase variant="danger">Danger</ButtonBase>
+        <ButtonBase shape="radius-circle">✓</ButtonBase>
+        <ButtonBase disabled>Disabled</ButtonBase>
+        <ButtonBase isPending variant="primary">Pending</ButtonBase>
+      </div>
+    `,
+  }),
+}

package/src/components/button-base/index.ts

@@ -0,0 +1,2 @@
+export { default } from './ButtonBase.vue'
+export * from './types'

package/src/components/button-base/meta.json

@@ -0,0 +1,10 @@
+{
+  "name": "button-base",
+  "files": [
+    "ButtonBase.vue",
+    "types.ts",
+    "index.ts",
+    "style.css"
+  ],
+  "css": true
+}

package/src/components/button-base/style.css

@@ -0,0 +1,2 @@
+/* ButtonBase styles are scoped in the component */
+/* This file is included for consistency with the registry pattern */

package/src/components/button-base/types.ts

@@ -0,0 +1,10 @@
+export type ButtonVariant = 'primary' | 'default' | 'danger'
+export type ButtonShape = 'radius-default' | 'radius-circle'
+
+export type ButtonProps = {
+  isPending?: boolean
+  variant?: ButtonVariant
+  shape?: ButtonShape
+  type?: 'button' | 'submit' | 'reset'
+  is?: 'button' | 'a'
+}

package/src/components/card-base/CardBase.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const { variant = 'raised' } = defineProps<{ variant?: 'raised' | 'inset' }>()
+</script>
+
+<template>
+  <section :class="['card', variant]">
+    <slot />
+  </section>
+</template>
+
+<style scoped>
+.card {
+  border-radius: var(--radius-2xl);
+  border: 0.3rem solid var(--color-border);
+}
+
+.raised {
+  box-shadow: var(--shadow-raised);
+}
+.inset {
+  box-shadow: var(--shadow-inset);
+}
+</style>

package/src/components/card-base/CardContent.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+withDefaults(defineProps<{ as?: 'div' | 'section' | 'ul' | 'main' | 'ol' }>(), { as: 'main' })
+</script>
+
+<template>
+  <component :is="as" class="content">
+    <slot />
+  </component>
+</template>
+
+<style scoped>
+.content {
+  padding: 0 2.4rem 2.4rem 2.4rem;
+}
+</style>

package/src/components/card-base/CardDescription.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ as?: 'p' | 'div' | 'span' }>(), {
+  as: 'p',
+})
+</script>
+
+<template>
+  <component :is="as" class="description">
+    <slot />
+  </component>
+</template>
+
+<style scoped>
+.description {
+  font-size: var(--text-sm);
+  color: var(--muted-foreground);
+}
+</style>

package/src/components/card-base/CardFooter.vue

@@ -0,0 +1,11 @@
+<template>
+  <footer class="footer">
+    <slot />
+  </footer>
+</template>
+
+<style scoped>
+.footer {
+  padding: 0 2.4rem 2.4rem 2.4rem;
+}
+</style>

package/src/components/card-base/CardHeader.vue

@@ -0,0 +1,14 @@
+<template>
+  <header class="header">
+    <slot />
+  </header>
+</template>
+
+<style scoped>
+.header {
+  display: flex;
+  flex-direction: column;
+  padding: 2.4rem;
+  row-gap: 0.6rem;
+}
+</style>

package/src/components/card-base/CardTitle.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' }>(), {
+  as: 'h2',
+})
+</script>
+
+<template>
+  <component :is="as" class="title">
+    <slot />
+  </component>
+</template>
+
+<style scoped>
+.title {
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: var(--tracking-tight);
+}
+</style>

package/src/components/input-base/InputBase.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { InputProps } from './types'
+
+const model = defineModel<string>({ required: false })
+const {
+  disabled = false,
+  error = '',
+  defaultErrorMessage = '',
+  isPending = false,
+  ...props
+} = defineProps<InputProps>()
+
+defineOptions({ inheritAttrs: false })
+</script>
+
+<template>
+  <div :class="['container', cls?.container]">
+    <input
+      v-bind="{ ...$attrs, ...props }"
+      :disabled="isPending || disabled"
+      :class="[{ 'input-error': error, pending: isPending }, cls?.input]"
+      @input="model = ($event.target as HTMLInputElement)?.value"
+    />
+    <span v-if="error" :class="['error-info', cls?.error]">{{ defaultErrorMessage || error }}</span>
+    <span v-else :class="['error-info native-error', cls?.error]">
+      {{ defaultErrorMessage || error }}
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+input {
+  border: 0.1rem solid var(--color-highlight);
+  background: var(--background);
+  box-shadow: var(--shadow-inset);
+  padding: 0.8rem 1.2rem;
+  font-size: var(--text-sm);
+  border-radius: var(--radius-md);
+  &:focus-visible {
+    outline: 0.2rem solid var(--foreground);
+    outline-offset: 0.3rem;
+  }
+}
+
+.container:has(input:user-invalid) .native-error {
+  display: inline-block;
+}
+
+.error-info {
+  font-size: 0.8rem;
+  color: var(--color-danger);
+  margin-top: 0.4rem;
+}
+
+.native-error {
+  display: none;
+}
+.pending {
+  cursor: progress;
+}
+.input-error {
+  border-color: var(--color-danger);
+}
+</style>

package/src/components/input-base/types.ts

@@ -0,0 +1,7 @@
+export type InputProps = {
+  disabled?: boolean
+  cls?: { container?: string; error?: string; input?: string }
+  error?: string
+  defaultErrorMessage?: string
+  isPending?: boolean
+}

package/src/components/range-base/RangeBase.vue

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { useVars } from '../../composables/useWars'
+import { cssSizeToNumber, cssValueToUnit } from '../../utils/cssParser'
+import { mergeDefaultProps } from '../../utils/mergeDefaultProps'
+import type { RangeBaseProps, RangeBaseVars } from './types'
+
+const {
+  min = 0,
+  max = 100,
+  variant = 'default',
+  hasThumb = true,
+  isVertical = false,
+  ...props
+} = defineProps<RangeBaseProps>()
+
+const vars = computed(() =>
+  mergeDefaultProps<RangeBaseVars>({ thumb: { size: '2rem' } }, props.vars),
+)
+
+const range = defineModel<number>({ default: 50 })
+
+const progressPercent = computed(() => {
+  const percent = ((range.value - min) / (max - min)) * 100
+  const thumbSize = cssSizeToNumber(vars.value.thumb?.size)
+  const unit = cssValueToUnit(vars.value.thumb?.size)
+  const thumbOffset = (0.5 - percent / 100) * thumbSize
+
+  return hasThumb ? `calc(${percent}% + ${thumbOffset}${unit})` : `${percent}%`
+})
+
+const progressBackground = computed(() => {
+  const color = variant === 'secondary' ? 'var(--muted)' : 'var(--primary)'
+  const fade = `oklch(from ${color} l c h / 0.75)`
+  return `linear-gradient(${isVertical ? 'to bottom' : 'to left'}, ${color}, ${fade})`
+})
+
+const thumbSize = computed(() => {
+  if (!hasThumb) return '0px'
+  return typeof vars.value.thumb?.size === 'number'
+    ? `${vars.value.thumb?.size}px`
+    : vars.value.thumb?.size
+})
+
+const varsStyle = useVars('range', [vars.value])
+
+const progressStyle = computed(() => {
+  return isVertical
+    ? { height: progressPercent.value, width: '100%' }
+    : { width: progressPercent.value, height: '100%' }
+})
+</script>
+
+<template>
+  <div :class="['container', { 'is-vertical': isVertical }, cls?.container]" :style="varsStyle">
+    <div :class="['wrapper', cls?.wrapper]">
+      <div :class="['progress', cls?.progress]" :style="progressStyle" />
+
+      <input
+        v-model="range"
+        type="range"
+        :min="min"
+        :max="max"
+        :class="['range-input', { 'hide-thumb': !hasThumb }, cls?.input]"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.container {
+  width: 100%;
+}
+.container.is-vertical {
+  width: fit-content;
+  height: stretch;
+  display: flex;
+  flex-direction: vertical;
+  align-items: end;
+  & .wrapper {
+    width: var(--range-progress-width, 1.6rem);
+    height: var(--range-progress-height);
+    /* Меняем ориентацию через writing-mode, но БЕЗ appearance: slider-vertical */
+    writing-mode: bt-lr;
+    writing-mode: vertical-lr;
+    direction: rtl;
+  }
+}
+.wrapper {
+  box-shadow: var(--shadow-inset);
+  border-radius: calc(1px * Infinity);
+  width: var(--range-progress-width, 100%);
+  height: var(--range-progress-height, 1.6rem);
+  position: relative;
+  display: flex;
+  align-items: center;
+  background-color: var(--background);
+  transition:
+    background-color 250ms ease-out,
+    box-shadow 250ms ease-out;
+}
+.progress {
+  border-radius: calc(1px * Infinity);
+  background: v-bind(progressBackground);
+  position: absolute;
+}
+
+.range-input {
+  -webkit-appearance: none;
+  appearance: none;
+  background: none;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-radius: calc(1px * Infinity);
+  outline-offset: 0.4rem;
+  &:focus-visible {
+    outline: 0.2rem solid var(--foreground);
+  }
+}
+.range-input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  cursor: grab;
+  height: v-bind(thumbSize);
+  aspect-ratio: 1;
+  border-radius: calc(1px * Infinity);
+  background-color: var(--background);
+  border: 1px solid var(--color-highlight);
+  box-shadow: var(--shadow-inset);
+  transition:
+    background-color 250ms ease-out,
+    box-shadow 250ms ease-out;
+}
+.range-input::-moz-range-thumb {
+  -webkit-appearance: none;
+  cursor: grab;
+  height: v-bind(thumbSize);
+  aspect-ratio: 1;
+  border-radius: calc(1px * Infinity);
+  background-color: var(--background);
+  border: 1px solid var(--color-highlight);
+  box-shadow: var(--shadow-inset);
+  transition:
+    background-color 250ms ease-out,
+    box-shadow 250ms ease-out;
+}
+.range-input.hide-thumb::-webkit-slider-thumb {
+  cursor: default;
+  visibility: hidden;
+}
+.range-input.hide-thumb::-moz-range-thumb {
+  cursor: default;
+  visibility: hidden;
+}
+.range-input:not(.hide-thumb):active::-webkit-slider-thumb {
+  cursor: grabbing;
+}
+
+.range-input:active::-webkit-slider-thumb {
+  box-shadow: var(--shadow-raised);
+}
+.range-input:active::-moz-range-thumb {
+  box-shadow: var(--shadow-raised);
+}
+</style>

package/src/components/range-base/RangeOutput.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+defineProps<{ range: number; max: number }>()
+</script>
+
+<template>
+  <output class="output" :style="{ minWidth: `${String(max).length}ch` }">
+    {{ range }}
+  </output>
+</template>
+
+<style scoped>
+.output {
+  font-size: 1.5rem;
+  font-weight: bold;
+  font-variant-numeric: tabular-nums;
+}
+</style>

package/src/components/range-base/types.ts

@@ -0,0 +1,16 @@
+import { type CSSProperties } from 'vue'
+
+export type RangeBaseVars = {
+  progress?: { height?: CSSProperties['height']; width?: CSSProperties['width'] }
+  thumb?: { size?: CSSProperties['height'] }
+}
+
+export type RangeBaseProps = {
+  min?: number
+  max?: number
+  variant?: 'default' | 'secondary'
+  hasThumb?: boolean
+  cls?: { input?: string; progress?: string; wrapper?: string; container?: string }
+  vars?: RangeBaseVars
+  isVertical?: boolean
+}

package/src/components/tabs/TabsBase.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { provide, readonly, ref } from 'vue'
+
+import { TabsKey } from './context'
+
+const props = defineProps<{ defaultValue?: string }>()
+const activeTab = ref(props.defaultValue || '')
+
+const setActiveTab = (value: string) => (activeTab.value = value)
+
+provide(TabsKey, {
+  activeTab: readonly(activeTab),
+  setActiveTab,
+})
+</script>
+
+<template>
+  <section class="tabs-base">
+    <slot />
+  </section>
+</template>

package/src/components/tabs/TabsIndicator.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div class="indicator">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.indicator {
+  position: absolute;
+  border-radius: var(--radius-sm);
+  background-color: var(--background);
+  box-shadow: var(--shadow-raised);
+  transition: all 0.2s;
+  border: 0.1rem solid var(--background);
+}
+</style>

package/src/components/tabs/TabsList.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div class="list">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.list {
+  position: relative;
+  padding: 0.4rem;
+  display: inline-flex;
+  height: 4.8rem;
+  align-items: center;
+  justify-content: center;
+  gap: 1.6rem;
+  border-radius: var(--radius-2xl);
+  background: linear-gradient(
+    to left,
+    var(--background),
+    oklch(from var(--highlight) l c h / 0.75)
+  );
+  color: var(--muted-foreground);
+  box-shadow: var(--shadow-raised);
+  border: 0.3rem solid var(--background);
+}
+</style>

package/src/components/tabs/TabsPanel.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+import { useTabsContext } from './context'
+
+const props = defineProps<{ value: string }>()
+const { activeTab } = useTabsContext()
+
+const isActive = computed(() => activeTab.value === props.value)
+</script>
+
+<template>
+  <section v-if="isActive" class="content">
+    <slot />
+  </section>
+</template>

package/src/components/tabs/TabsTab.vue

@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+import { useTabsContext } from './context'
+
+const props = defineProps<{ value: string }>()
+const { activeTab, setActiveTab } = useTabsContext()
+
+const selectTab = () => setActiveTab(props.value)
+
+const isSelected = computed(() => activeTab.value === props.value || null)
+</script>
+
+<template>
+  <button :data-selected="isSelected" @click="selectTab" type="button">
+    <slot />
+  </button>
+</template>
+
+<style scoped>
+button {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  white-space: nowrap;
+  border-radius: var(--radius-xl);
+  padding: 0.8rem 1.6rem;
+  transition:
+    color 0.2s ease-in-out,
+    border-color 0.2s ease-in-out,
+    box-shadow 0.2s ease-in-out;
+  position: relative;
+  z-index: 10;
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-medium);
+  &:focus-visible {
+    outline: 0.2rem solid var(--foreground);
+    outline-offset: 0.2rem;
+  }
+  &:hover {
+    color: var(--foreground);
+  }
+  &[data-selected] {
+    background-color: var(--background);
+    color: var(--foreground);
+    box-shadow: var(--shadow-inset);
+  }
+}
+</style>

package/src/components/tabs/context.ts

@@ -0,0 +1,12 @@
+import { type InjectionKey, inject } from 'vue'
+
+import type { TabsContext } from './types'
+
+export const TabsKey: InjectionKey<TabsContext> = Symbol('TabsContext')
+
+export function useTabsContext() {
+  const context = inject(TabsKey)
+  if (!context) throw new Error('Tabs components must be used within TabsBase')
+
+  return context
+}

package/src/components/tabs/types.ts

@@ -0,0 +1,6 @@
+import type { Ref } from 'vue'
+
+export type TabsContext = {
+  activeTab: Readonly<Ref<string>>
+  setActiveTab: (value: string) => void
+}

package/src/components/ui/button-base/ButtonBase.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import type { ButtonProps } from './types'
+
+const { variant = 'default', shape = 'radius-default', is = 'button' } = defineProps<ButtonProps>()
+</script>
+
+<template>
+  <component :is :class="['btn', shape, variant]" :aria-busy="isPending">
+    <slot>button</slot>
+  </component>
+</template>
+
+<style scoped>
+.btn {
+  display: inline-flex;
+  text-wrap: nowrap;
+  font-weight: 500;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border: 0.3rem solid var(--color-border);
+  background: var(--background);
+  box-shadow: var(--shadow-raised);
+  transition:
+    scale 0.2s ease-in-out,
+    background-color 0.2s ease-in-out,
+    color 0.2s ease-in-out,
+    box-shadow 0.1s ease-in-out,
+    border-color 0.1s ease-in-out;
+
+  &:active {
+    box-shadow: var(--shadow-inset);
+    scale: 97%;
+  }
+  &:focus-visible {
+    outline: 0.2rem solid var(--foreground);
+    outline-offset: 0.2rem;
+  }
+  &:hover:not(:disabled) {
+    opacity: 0.85;
+  }
+}
+
+.radius-default {
+  border-radius: var(--radius-xl);
+  padding-inline: 1.6rem;
+  aspect-ratio: 1;
+  height: 4.8rem;
+}
+.radius-circle {
+  border-radius: 5rem;
+  padding: 1rem;
+  min-width: 5rem;
+  aspect-ratio: 1;
+}
+
+.primary {
+  color: var(--primary);
+  background-image: linear-gradient(
+    to top left,
+    color-mix(in oklch, var(--primary), transparent 97%),
+    color-mix(in oklch, var(--primary), transparent 78%)
+  );
+}
+
+.default {
+  background-image: linear-gradient(
+    to top left,
+    color-mix(in oklch, var(--muted), transparent 97%),
+    color-mix(in oklch, var(--muted), transparent 5%)
+  );
+}
+
+.danger {
+  color: var(--color-danger);
+  background-image: linear-gradient(
+    to top left,
+    color-mix(in oklch, var(--color-danger), transparent 97%),
+    color-mix(in oklch, var(--color-danger), transparent 78%)
+  );
+}
+</style>

package/src/components/ui/button-base/index.stories.ts

@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import ButtonBase from './ButtonBase.vue'
+import type { ButtonProps } from './types'
+
+const meta = {
+  title: 'components/ButtonBase',
+  component: ButtonBase,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'default', 'danger'] satisfies ButtonProps['variant'][],
+    },
+    shape: {
+      control: 'select',
+      options: ['radius-default', 'radius-circle'] satisfies ButtonProps['shape'][],
+    },
+    type: {
+      control: 'select',
+      options: ['button', 'submit', 'reset'] satisfies ButtonProps['type'][],
+    },
+    is: {
+      control: 'select',
+      options: ['button', 'a'],
+    },
+    // @ts-ignore: attribute
+    disabled: {
+      control: 'boolean',
+    },
+    isPending: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof ButtonBase>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    default: 'Button',
+  },
+}
+
+export const Primary: Story = {
+  args: {
+    default: 'Primary Button',
+    variant: 'primary',
+    isPending: false,
+  },
+}
+
+export const Danger: Story = {
+  args: {
+    default: 'Danger Button',
+    variant: 'danger',
+  },
+}
+
+export const CircleShape: Story = {
+  args: {
+    default: '✓',
+    shape: 'radius-circle',
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    default: 'Disabled',
+    // @ts-ignore: attribute
+    disabled: true,
+  },
+}
+
+export const Pending: Story = {
+  args: {
+    default: 'Loading...',
+    isPending: true,
+    variant: 'primary',
+  },
+}
+
+export const AsLink: Story = {
+  args: {
+    default: 'Link Button',
+    is: 'a',
+    // @ts-ignore: attribute
+    href: '#',
+    variant: 'primary',
+  },
+}
+
+export const AllVariants: Story = {
+  render: () => ({
+    components: { ButtonBase },
+    template: `
+      <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
+        <ButtonBase variant="default">Default</ButtonBase>
+        <ButtonBase variant="primary">Primary</ButtonBase>
+        <ButtonBase variant="danger">Danger</ButtonBase>
+        <ButtonBase shape="radius-circle">✓</ButtonBase>
+        <ButtonBase disabled>Disabled</ButtonBase>
+        <ButtonBase isPending variant="primary">Pending</ButtonBase>
+      </div>
+    `,
+  }),
+}

package/src/components/ui/button-base/index.ts

@@ -0,0 +1,2 @@
+export { default } from './ButtonBase.vue'
+export * from './types'

package/src/components/ui/button-base/meta.json

@@ -0,0 +1,10 @@
+{
+  "name": "button-base",
+  "files": [
+    "ButtonBase.vue",
+    "types.ts",
+    "index.ts",
+    "style.css"
+  ],
+  "css": true
+}

package/src/components/ui/button-base/style.css

@@ -0,0 +1,2 @@
+/* ButtonBase styles are scoped in the component */
+/* This file is included for consistency with the registry pattern */

package/src/components/ui/button-base/types.ts

@@ -0,0 +1,10 @@
+export type ButtonVariant = 'primary' | 'default' | 'danger'
+export type ButtonShape = 'radius-default' | 'radius-circle'
+
+export type ButtonProps = {
+  isPending?: boolean
+  variant?: ButtonVariant
+  shape?: ButtonShape
+  type?: 'button' | 'submit' | 'reset'
+  is?: 'button' | 'a'
+}