artharexian-ui 0.3.2 → 0.3.3

package/cli/index.mjs

@@ -3,228 +3,140 @@ import fs from 'node:fs'
 import path from 'node:path'
 import process from 'node:process'
 import { fileURLToPath } from 'node:url'
-import https from 'node:https'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
 
-const args = process.argv.slice(2)
-const command = args[0]
-const component = args[1]
+const REGISTRY_DIR = path.join(__dirname, '..', 'registry')
+const REGISTRY_JSON = path.join(REGISTRY_DIR, 'registry.json')
 
 const cwd = process.env.INIT_CWD || process.cwd()
 
-// GitHub config
-const GITHUB_REPO = 'r2-h/artharexian-ui'
-const GITHUB_BRANCH = 'main'
-const COMPONENTS_PATH = 'src/components'
-
-const EXCLUDE_FILES = ['meta.json', 'index.stories.ts']
-
-// Fetch JSON from GitHub
-function fetchJSON(url) {
-  return new Promise((resolve, reject) => {
-    const options = {
-      headers: {
-        'User-Agent': 'artharexian-ui-cli',
-        'Accept': 'application/vnd.github.v3+json',
-      },
-    }
-    https
-      .get(url, options, (res) => {
-        if (res.statusCode !== 200) {
-          reject(new Error(`HTTP ${res.statusCode}: ${res.statusMessage}`))
-          return
-        }
-        let data = ''
-        res.on('data', (chunk) => (data += chunk))
-        res.on('end', () => {
-          try {
-            resolve(JSON.parse(data))
-          } catch (e) {
-            reject(new Error(`Failed to parse JSON: ${e.message}`))
-          }
-        })
-      })
-      .on('error', reject)
-  })
-}
+// ---------- utils ----------
 
-// Fetch file content from GitHub
-function fetchFile(url) {
-  return new Promise((resolve, reject) => {
-    https
-      .get(url, (res) => {
-        let data = ''
-        res.on('data', (chunk) => (data += chunk))
-        res.on('end', () => resolve(data))
-      })
-      .on('error', reject)
-  })
+function readRegistry() {
+  if (!fs.existsSync(REGISTRY_JSON)) {
+    console.error('Registry not found')
+    process.exit(1)
+  }
+  return JSON.parse(fs.readFileSync(REGISTRY_JSON, 'utf8'))
 }
 
-// Get component files list from GitHub API
-async function getComponentFiles(componentName) {
-  const url = `https://api.github.com/repos/${GITHUB_REPO}/contents/${COMPONENTS_PATH}/${componentName}?ref=${GITHUB_BRANCH}`
-  const data = await fetchJSON(url)
-  return data.filter((file) => file.type === 'file' && !EXCLUDE_FILES.includes(file.name))
+function ensureVueProject() {
+  // Optional: could check for package.json or vue dependency
+  // For now, just ensure cwd is writable
 }
 
-// Download and save file
-async function downloadFile(file, destPath) {
-  const content = await fetchFile(file.download_url)
-  fs.writeFileSync(destPath, content)
+function copyFileSafe(src, dest) {
+  if (fs.existsSync(dest)) {
+    const rel = path.relative(cwd, dest)
+    console.log(`skip ${rel} (exists)`)
+    return
+  }
+  fs.mkdirSync(path.dirname(dest), { recursive: true })
+  fs.copyFileSync(src, dest)
+  const rel = path.relative(cwd, dest)
+  console.log(`add  ${rel}`)
 }
 
-// Copy directory locally (for development)
-function copyDir(src, dest) {
-  fs.mkdirSync(dest, { recursive: true })
-  for (const file of fs.readdirSync(src)) {
-    if (EXCLUDE_FILES.includes(file)) continue
-
-    const s = path.join(src, file)
-    const d = path.join(dest, file)
-    if (fs.statSync(s).isDirectory()) {
-      copyDir(s, d)
-    } else {
-      fs.copyFileSync(s, d)
-    }
-  }
+// ---------- commands ----------
+
+function listComponents() {
+  const registry = readRegistry()
+  console.log('Available components:\n')
+  Object.keys(registry).forEach((name) => {
+    console.log(`  ${name}`)
+  })
 }
 
-// Add component from GitHub
-async function addComponent(componentName) {
-  const destDir = path.resolve(cwd, 'src/components/ui', componentName)
-  const stylesPath = path.resolve(cwd, 'src/styles')
+function addComponent(name) {
+  const registry = readRegistry()
+  const entry = registry[name]
+
+  if (!entry) {
+    console.error(`Component not found: ${name}\n`)
+    listComponents()
+    process.exit(1)
+  }
 
   // Auto-install styles if not present
-  if (!fs.existsSync(stylesPath)) {
+  const stylesPath = path.join(cwd, 'src', 'styles')
+  const registryStyles = path.join(REGISTRY_DIR, 'styles')
+  if (!fs.existsSync(stylesPath) && fs.existsSync(registryStyles)) {
     console.log('Styles not found. Installing...\n')
-    await copyStyles()
+    fs.mkdirSync(stylesPath, { recursive: true })
+    for (const file of fs.readdirSync(registryStyles)) {
+      copyFileSafe(path.join(registryStyles, file), path.join(stylesPath, file))
+    }
     console.log('')
   }
 
-  console.log(`Fetching ${componentName} from GitHub...`)
-
-  try {
-    const files = await getComponentFiles(componentName)
-
-    if (files.length === 0) {
-      console.error(`Error: Component not found: ${componentName}`)
-      listComponents()
-      process.exit(1)
-    }
-
-    fs.mkdirSync(destDir, { recursive: true })
-
-    for (const file of files) {
-      const destPath = path.join(destDir, file.name)
-      await downloadFile(file, destPath)
-      console.log(`  ✔ ${file.name}`)
-    }
+  const srcDir = path.join(REGISTRY_DIR, name)
+  const destDir = path.join(cwd, 'src/components/ui', name)
 
-    console.log(`\n✔ ${componentName} added to src/components/ui/${componentName}`)
-    console.log('\nNext steps:')
-    console.log(`  1. Import: import { ${toPascalCase(componentName)} } from '@/components/ui/${componentName}'`)
-    console.log('  2. Configure CSS variables (see docs)')
-  } catch (error) {
-    console.error(`Error: ${error.message}`)
-    console.error('\nMake sure you have internet connection and the component exists.')
-    process.exit(1)
-  }
-}
+  entry.files.forEach((file) => {
+    const src = path.join(srcDir, file)
+    const dest = path.join(destDir, file)
+    copyFileSafe(src, dest)
+  })
 
-// List available components
-async function listComponents() {
-  console.log('Available components:')
-  try {
-    const url = `https://api.github.com/repos/${GITHUB_REPO}/contents/${COMPONENTS_PATH}?ref=${GITHUB_BRANCH}`
-    const data = await fetchJSON(url)
-    const components = data.filter((item) => item.type === 'dir').map((item) => item.name)
-    components.forEach((c) => console.log(`  - ${c}`))
-  } catch (error) {
-    console.error(`  (unable to fetch: ${error.message})`)
-  }
+  console.log(`\n✔ ${name} installed`)
 }
 
-// Copy styles from GitHub
-async function copyStyles() {
-  const stylesDst = path.resolve(cwd, 'src/styles')
-
-  console.log('Fetching styles from GitHub...')
+function init() {
+  const stylesDest = path.join(cwd, 'src', 'styles')
+  const registryStyles = path.join(REGISTRY_DIR, 'styles')
 
-  try {
-    const url = `https://api.github.com/repos/${GITHUB_REPO}/contents/src/styles?ref=${GITHUB_BRANCH}`
-    const data = await fetchJSON(url)
-    const cssFiles = data.filter((file) => file.type === 'file' && file.name.endsWith('.css'))
-
-    fs.mkdirSync(stylesDst, { recursive: true })
+  if (!fs.existsSync(registryStyles)) {
+    console.log('No global styles in registry')
+    return
+  }
 
-    for (const file of cssFiles) {
-      const destPath = path.join(stylesDst, file.name)
-      await downloadFile(file, destPath)
-      console.log(`  ✔ ${file.name}`)
-    }
+  fs.mkdirSync(stylesDest, { recursive: true })
 
-    console.log('✔ Styles installed')
-  } catch (error) {
-    console.error(`Error: ${error.message}`)
-    process.exit(1)
+  for (const file of fs.readdirSync(registryStyles)) {
+    copyFileSafe(path.join(registryStyles, file), path.join(stylesDest, file))
   }
-}
 
-// Helper functions
-function capitalize(str) {
-  return str.charAt(0).toUpperCase() + str.slice(1)
+  console.log('\n✔ styles installed')
 }
 
-function toPascalCase(str) {
-  return str
-    .split('-')
-    .map((part) => capitalize(part))
-    .join('')
-}
+// ---------- CLI ----------
 
-// CLI commands
-if (!command) {
-  console.log('Usage: artharexian-ui <add|eject|init|list> [component]')
-  console.log('')
-  console.log('Commands:')
-  console.log('  add <component>      Add a component to your project (from GitHub)')
-  console.log('  eject <component>    Alias for add (eject component source)')
-  console.log('  init                 Initialize library (copy styles)')
-  console.log('  list                 List available components')
-  console.log('')
-  console.log('Examples:')
-  console.log('  npx artharexian-ui add button-base')
-  console.log('  npx artharexian-ui list')
-  console.log('  npx artharexian-ui init')
-  process.exit(0)
-}
+const args = process.argv.slice(2)
+const command = args[0]
+const component = args[1]
 
-if (command === 'init') {
-  console.log('Initializing artharexian-ui...')
-  await copyStyles()
-  console.log('')
-  console.log('✔ artharexian-ui initialized successfully!')
+if (!command) {
+  console.log(`
+artharexian-ui
+
+Usage:
+  npx artharexian-ui init
+  npx artharexian-ui add <component>
+  npx artharexian-ui list
+`)
   process.exit(0)
 }
 
 if (command === 'list') {
-  await listComponents()
+  listComponents()
   process.exit(0)
 }
 
-if (command === 'add' || command === 'eject') {
+if (command === 'add') {
   if (!component) {
-    console.error('Error: Component name required')
-    console.error('Usage: artharexian-ui add <component>')
+    console.error('Component name required')
     process.exit(1)
   }
-  await addComponent(component)
+  addComponent(component)
+  process.exit(0)
+}
+
+if (command === 'init') {
+  init()
   process.exit(0)
 }
 
 console.error(`Unknown command: ${command}`)
-console.error('Run without arguments for usage info')
 process.exit(1)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "artharexian-ui",
   "description": "Vue 3 UI component library",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "license": "MIT",
   "private": false,
   "type": "module",
@@ -14,11 +14,12 @@
     "artharexian-ui": "./cli/index.mjs"
   },
   "files": [
-    "src/styles",
     "cli",
-    "!**/*.stories.ts",
-    "!**/meta.json"
+    "registry"
   ],
+  "engines": {
+    "node": ">=18"
+  },
   "exports": {
     "./styles": "./src/styles/style.css"
   },
@@ -27,7 +28,8 @@
     "format": "prettier --write .",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "postinstall": "node ./cli/index.mjs init"
+    "build:registry": "node scripts/build-registry.mjs",
+    "prepublishOnly": "npm run build:registry"
   },
   "peerDependencies": {
     "vue": "^3.5.0"

package/registry/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/registry/button-base/index.ts

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

package/registry/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/registry/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/registry/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/registry/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/registry/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/registry/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/registry/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/registry/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/registry/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/registry/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/registry/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/registry/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/registry/registry.json

@@ -0,0 +1,43 @@
+{
+  "button-base": {
+    "files": [
+      "ButtonBase.vue",
+      "index.ts",
+      "types.ts"
+    ]
+  },
+  "card-base": {
+    "files": [
+      "CardBase.vue",
+      "CardContent.vue",
+      "CardDescription.vue",
+      "CardFooter.vue",
+      "CardHeader.vue",
+      "CardTitle.vue"
+    ]
+  },
+  "input-base": {
+    "files": [
+      "InputBase.vue",
+      "types.ts"
+    ]
+  },
+  "range-base": {
+    "files": [
+      "RangeBase.vue",
+      "RangeOutput.vue",
+      "types.ts"
+    ]
+  },
+  "tabs": {
+    "files": [
+      "context.ts",
+      "TabsBase.vue",
+      "TabsIndicator.vue",
+      "TabsList.vue",
+      "TabsPanel.vue",
+      "TabsTab.vue",
+      "types.ts"
+    ]
+  }
+}

package/registry/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/registry/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/registry/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/registry/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/registry/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/registry/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/registry/tabs/types.ts

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