@skewedaspect/sleekspace-ui 0.2.0-beta.1

package/docs/guides/getting-started.md

@@ -0,0 +1,144 @@
+---
+title: Getting Started
+---
+
+# Getting Started
+
+SleekSpace UI is a Vue 3 component library with a cyberpunk aesthetic. It provides themed components built on OKLCH colors, beveled corners, and runtime theming through CSS custom properties.
+
+## Quick Start
+
+### Minimal Example
+
+The only requirement is wrapping your app in `SkTheme`. Here is the simplest setup:
+
+```vue
+<template>
+  <SkTheme theme="colorful">
+    <SkPanel kind="neutral">
+      <h2>Welcome to SleekSpace UI</h2>
+      <p>You're ready to build something cool.</p>
+      <SkButton kind="accent" variant="solid">
+        Get Started
+      </SkButton>
+    </SkPanel>
+  </SkTheme>
+</template>
+```
+
+That's it. You can start using any SleekSpace component inside `SkTheme`.
+
+### Recommended Setup with SkPage
+
+For most applications, you will want a proper page layout with a header, sidebar, and content area. `SkPage` provides this structure:
+
+```vue
+<template>
+  <SkTheme theme="colorful">
+    <SkPage fixed-header>
+      <template #header>
+        <SkNavBar kind="primary">
+          <template #brand>My App</template>
+        </SkNavBar>
+      </template>
+
+      <template #sidebar>
+        <SkSidebar>
+          <SkSidebarItem href="/">Home</SkSidebarItem>
+          <SkSidebarItem href="/settings">Settings</SkSidebarItem>
+        </SkSidebar>
+      </template>
+
+      <SkPanel kind="neutral">
+        <h2>Welcome to SleekSpace UI</h2>
+        <SkButton kind="accent" variant="solid">
+          Get Started
+        </SkButton>
+      </SkPanel>
+
+      <template #footer>
+        <p>Footer content goes here</p>
+      </template>
+    </SkPage>
+  </SkTheme>
+</template>
+```
+
+### Why Use SkPage?
+
+`SkPage` is optional, but most applications will benefit from it:
+
+- **Full page layout structure** -- Provides header, sidebar, content, and footer regions in a single component.
+- **Semantic HTML** -- Uses `<main>`, `<header>`, `<footer>`, and `<aside>` elements for better accessibility and SEO.
+- **Fixed headers and footers** -- Keep navigation visible while the content area scrolls independently.
+- **Flexible slots** -- All slots are optional. Use just a header, just a sidebar, or any combination. The layout adapts automatically.
+- **Sidebar positioning** -- Place the sidebar on the left or right with a single prop.
+
+If you are building a single-page app, dashboard, or documentation site, `SkPage` gives you a solid foundation. For simpler use cases like embedded widgets or single components, you can skip it entirely.
+
+## Global vs Cherry-Pick Imports
+
+### Global Registration (Plugin)
+
+The plugin registers all components globally. No per-file imports are needed:
+
+```js
+import SleekSpaceUI from '@skewedaspect/sleekspace-ui';
+app.use(SleekSpaceUI);
+```
+
+### Cherry-Pick Imports
+
+Import only what you need per component file:
+
+```vue
+<script setup>
+import { SkButton, SkPanel } from '@skewedaspect/sleekspace-ui';
+</script>
+
+<template>
+  <SkPanel kind="neutral">
+    <SkButton kind="primary">Click Me</SkButton>
+  </SkPanel>
+</template>
+```
+
+### Auto-Import with unplugin-vue-components
+
+Set up automatic imports with a custom resolver:
+
+```ts
+// vite.config.ts
+import Components from 'unplugin-vue-components/vite';
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    Components({
+      dts: true,
+      resolvers: [
+        (componentName) => {
+          if (componentName.startsWith('Sk')) {
+            return { name: componentName, from: '@skewedaspect/sleekspace-ui' };
+          }
+        }
+      ]
+    })
+  ]
+});
+```
+
+## Common Props
+
+Most SleekSpace components share these props:
+
+- **kind** -- Semantic color: `neutral`, `primary`, `accent`, `info`, `success`, `warning`, `danger`. Many also accept color kinds like `neon-blue`, `neon-purple`, etc.
+- **size** -- Dimensions: `xs`, `sm`, `md`, `lg`, `xl` (component-dependent).
+- **variant** -- Visual style: `solid`, `outline`, `subtle`, `ghost`, `link` (component-dependent).
+- **baseColor / textColor** -- Override colors with any CSS value (hex, OKLCH, RGB, CSS variable).
+
+## Next Steps
+
+- [Theming](./theming.md) -- Runtime theme switching and custom themes
+- [Design Tokens](./design-tokens.md) -- Token architecture and usage
+- [Custom Colors](./custom-colors.md) -- Per-component color overrides

package/docs/guides/installation.md

@@ -0,0 +1,62 @@
+---
+title: Installation
+---
+
+# Installation
+
+## Install the package
+
+```bash
+npm install @skewedaspect/sleekspace-ui
+```
+
+## Vue Plugin Registration
+
+Register all components globally using the Vue plugin:
+
+```js
+import { createApp } from 'vue';
+import App from './App.vue';
+import SleekSpaceUI from '@skewedaspect/sleekspace-ui';
+import '@skewedaspect/sleekspace-ui/style';
+
+const app = createApp(App);
+app.use(SleekSpaceUI);
+app.mount('#app');
+```
+
+## CSS Import
+
+The style import is required regardless of how you register components:
+
+```js
+import '@skewedaspect/sleekspace-ui/style';
+```
+
+This provides all component styles and design tokens needed for theming.
+
+## Tailwind CSS v4 Integration
+
+To use SleekSpace design tokens as Tailwind utilities, import the tokens file in your CSS entry point:
+
+```css
+@import "tailwindcss";
+@import "@skewedaspect/sleekspace-ui/tokens.css";
+```
+
+This registers all SleekSpace CSS custom properties with Tailwind's `@theme` system, enabling utility classes like `bg-sk-primary`, `text-sk-accent-text`, and `border-sk-danger`.
+
+## TypeScript Support
+
+For VS Code with Volar, add the global types to your `tsconfig.json`:
+
+```json
+{
+  "include": [
+    "src/**/*",
+    "node_modules/@skewedaspect/sleekspace-ui/src/global.d.ts"
+  ]
+}
+```
+
+WebStorm and IntelliJ IDEA work automatically via the included `web-types.json`.

package/docs/guides/theming.md

@@ -0,0 +1,101 @@
+---
+title: Theming
+---
+
+# Theming
+
+SleekSpace UI uses a runtime theming system powered by CSS custom properties and the `data-scheme` attribute. Themes change semantic token values so all components update automatically.
+
+## SkTheme Component
+
+Wrap your application or any section in SkTheme to apply a theme:
+
+```vue
+<template>
+  <SkTheme theme="colorful">
+    <SkButton kind="primary">Colorful Primary</SkButton>
+    <SkPanel kind="accent">Colorful Accent</SkPanel>
+  </SkTheme>
+</template>
+```
+
+## Available Themes
+
+- **greyscale** (default) -- Monochromatic color scheme where semantic colors map to neutral grays.
+- **colorful** -- Vibrant cyberpunk palette with distinct hues for each semantic kind.
+
+## Runtime Theme Switching
+
+Use the `useTheme` composable for programmatic control:
+
+```vue
+<script setup>
+import { useTheme } from '@skewedaspect/sleekspace-ui';
+
+const { currentTheme, setTheme } = useTheme();
+</script>
+
+<template>
+  <p>Current: {{ currentTheme }}</p>
+  <SkButton @click="setTheme('colorful')">Colorful</SkButton>
+  <SkButton @click="setTheme('greyscale')">Greyscale</SkButton>
+</template>
+```
+
+## How It Works
+
+SkTheme sets a `data-scheme` attribute on its wrapper element. CSS rules scoped to each scheme override semantic token values:
+
+```css
+[data-scheme="greyscale"] {
+  --sk-primary-base: oklch(0.5 0 0);
+}
+
+[data-scheme="colorful"] {
+  --sk-primary-base: oklch(0.65 0.2 260);
+}
+```
+
+All components reference these semantic tokens, so switching the scheme instantly updates every component in the subtree.
+
+## Creating Custom Themes
+
+Define a custom theme by providing CSS custom property overrides on a new `data-scheme` value:
+
+```css
+[data-scheme="ocean"] {
+  --sk-primary-base: oklch(0.55 0.15 230);
+  --sk-primary-text: oklch(1 0 0);
+  --sk-primary-hover: oklch(0.45 0.15 230);
+
+  --sk-accent-base: oklch(0.6 0.2 180);
+  --sk-accent-text: oklch(1 0 0);
+  --sk-accent-hover: oklch(0.5 0.2 180);
+
+  /* Define all 7 semantic kinds: neutral, primary, accent, info, success, warning, danger */
+}
+```
+
+Then use it with the theme component:
+
+```vue
+<SkTheme theme="ocean">
+  <YourContent />
+</SkTheme>
+```
+
+## Semantic Kinds
+
+All themed components accept a `kind` prop with these values:
+
+| Kind | Purpose |
+|------|---------|
+| `neutral` | Default, neutral styling |
+| `primary` | Primary brand color |
+| `accent` | Secondary brand color |
+| `info` | Informational messages |
+| `success` | Success states |
+| `warning` | Warning states |
+| `danger` | Error or destructive actions |
+
+Components also support 10 direct color kinds (`boulder`, `neon-blue`, `light-blue`, `neon-orange`, `neon-purple`, `neon-green`, `neon-mint`, `neon-pink`, `yellow`, `red`) that are not affected by theme switching.

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@skewedaspect/sleekspace-ui",
+  "version": "0.2.0-beta.1",
+  "description": "A Vue 3 component library with a cyberpunk aesthetic, featuring OKLCH colors, beveled corners, and a powerful design token system",
+  "type": "module",
+  "main": "dist/sleekspace-ui.umd.js",
+  "module": "dist/sleekspace-ui.es.js",
+  "types": "dist/index.d.ts",
+  "web-types": "./web-types.json",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/sleekspace-ui.es.js",
+      "require": "./dist/sleekspace-ui.umd.js"
+    },
+    "./style": "./dist/sleekspace-ui.css",
+    "./styles/source": "./src/styles/index.scss",
+    "./tokens.css": "./dist/tokens.css"
+  },
+  "files": [
+    "dist",
+    "src",
+    "docs",
+    "web-types.json",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "npm run generate:types && vue-docgen-web-types && npm run generate:api-docs && vite build && npm run build:tokens && npm run copy:docs",
+    "generate:api-docs": "tsx scripts/generate-api-docs.ts",
+    "build:tokens": "sass src/styles/tokens.scss dist/tokens.css --no-source-map",
+    "copy:docs": "cp ../../Readme.md README.md && cp ../../LICENSE LICENSE",
+    "generate:types": "tsx scripts/generate-global-types.ts",
+    "generate:web-types": "vue-docgen-web-types",
+    "lint": "eslint src"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "component",
+    "ui",
+    "design-system",
+    "oklch",
+    "cyberpunk",
+    "tailwind",
+    "typescript"
+  ],
+  "author": "Christopher S. Case",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.com/skewedaspect/sleekspace-ui.git",
+    "directory": "packages/sleekspace-ui"
+  },
+  "bugs": "https://gitlab.com/skewedaspect/sleekspace-ui/-/issues",
+  "homepage": "https://gitlab.com/skewedaspect/sleekspace-ui",
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.8.1",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "sass": "^1.83.2",
+    "ts-morph": "^27.0.2",
+    "typescript": "^5.8.3",
+    "vite": "^7.1.10",
+    "vite-plugin-dts": "^4.5.3",
+    "vue": "^3.5.13",
+    "vue-docgen-web-types": "^0.1.8"
+  },
+  "dependencies": {
+    "modern-normalize": "^3.0.1",
+    "reka-ui": "^2.6.0"
+  }
+}

package/src/components/Accordion/SkAccordion.vue

@@ -0,0 +1,133 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - Accordion Root Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <AccordionRoot
+        v-model="modelValue"
+        :type="type"
+        :collapsible="collapsible"
+        :disabled="disabled"
+        :class="classes"
+        :style="customColorStyles"
+    >
+        <slot />
+    </AccordionRoot>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Accordion styles are implemented in /src/styles/components/_accordion.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component
+     * Accordion root container for collapsible sections.
+     * Use with SkAccordionItem components.
+     */
+
+    import { computed, provide, toRef } from 'vue';
+    import { AccordionRoot } from 'reka-ui';
+
+    // Types
+    import type { ComponentCustomColors } from '@/types';
+    import type { SkAccordionKind, SkAccordionType } from './types';
+
+    // Composables
+    import { useCustomColors } from '@/composables/useCustomColors';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * Accordion root container for collapsible sections.
+     *
+     * Supports single or multiple open items with smooth animations.
+     *
+     * @example Single mode (default)
+     * ```vue
+     * <SkAccordion v-model="openItem">
+     *   <SkAccordionItem value="item-1" title="Section 1">
+     *     Content 1
+     *   </SkAccordionItem>
+     *   <SkAccordionItem value="item-2" title="Section 2">
+     *     Content 2
+     *   </SkAccordionItem>
+     * </SkAccordion>
+     * ```
+     *
+     * @example Multiple mode
+     * ```vue
+     * <SkAccordion type="multiple" v-model="openItems">
+     *   <SkAccordionItem value="item-1" title="Section 1">
+     *     Content 1
+     *   </SkAccordionItem>
+     *   <SkAccordionItem value="item-2" title="Section 2">
+     *     Content 2
+     *   </SkAccordionItem>
+     * </SkAccordion>
+     * ```
+     */
+    export interface SkAccordionComponentProps extends ComponentCustomColors
+    {
+        /** Single or multiple open items */
+        type ?: SkAccordionType;
+        /** Controlled state (v-model) */
+        modelValue ?: string | string[];
+        /** Allow closing all items (single mode only) */
+        collapsible ?: boolean;
+        /** Semantic color kind */
+        kind ?: SkAccordionKind;
+        /** Disable all items */
+        disabled ?: boolean;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkAccordionComponentProps>(), {
+        type: 'single',
+        modelValue: undefined,
+        collapsible: false,
+        kind: 'neutral',
+        disabled: false,
+    });
+
+    const emit = defineEmits<{
+        'update:modelValue' : [ value : string | string[] | undefined ];
+    }>();
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Two-way binding for accordion state
+    const modelValue = computed({
+        get: () => props.modelValue,
+        set: (value) => emit('update:modelValue', value),
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const customColorStyles = useCustomColors(
+        'accordion',
+        toRef(() => props.baseColor),
+        toRef(() => props.textColor)
+    );
+
+    // Provide kind for child items (reactive computed so changes propagate)
+    provide('accordion-kind', computed(() => props.kind));
+
+    // Provide modelValue for child items to check if they are open
+    provide('accordion-modelValue', modelValue);
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const classes = computed(() => ({
+        'sk-accordion': true,
+        // Only apply kind class if custom colors are NOT provided
+        [`sk-${ props.kind }`]: !props.baseColor,
+    }));
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Accordion/SkAccordionItem.vue

@@ -0,0 +1,131 @@
+<!----------------------------------------------------------------------------------------------------------------------
+  - Accordion Item Component
+  --------------------------------------------------------------------------------------------------------------------->
+
+<template>
+    <AccordionItem
+        :value="value"
+        :disabled="disabled"
+        :class="itemClasses"
+    >
+        <AccordionHeader class="sk-accordion-header">
+            <AccordionTrigger class="sk-accordion-trigger">
+                <slot name="title" :open="isOpen">
+                    {{ title }}
+                </slot>
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="square"
+                    stroke-linejoin="miter"
+                    :class="chevronClasses"
+                >
+                    <polyline points="6 9 12 15 18 9" />
+                </svg>
+            </AccordionTrigger>
+        </AccordionHeader>
+        <AccordionContent class="sk-accordion-content">
+            <div class="sk-accordion-content-inner">
+                <slot />
+            </div>
+        </AccordionContent>
+    </AccordionItem>
+</template>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<style lang="scss" scoped>
+    // Accordion item styles are implemented in /src/styles/components/_accordion.scss
+</style>
+
+<!--------------------------------------------------------------------------------------------------------------------->
+
+<script setup lang="ts">
+    /**
+     * @component
+     * Individual accordion item with collapsible content.
+     */
+
+    import { type ComputedRef, type Ref, computed, inject, ref } from 'vue';
+    import {
+        AccordionContent,
+        AccordionHeader,
+        AccordionItem,
+        AccordionTrigger,
+    } from 'reka-ui';
+
+    // Types
+    import type { SkAccordionKind } from './types';
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    /**
+     * Individual accordion item with collapsible content.
+     *
+     * @example With custom title slot
+     * ```vue
+     * <SkAccordionItem value="item-1">
+     *   <template #title="{ open }">
+     *     <span>Custom Title</span>
+     *     <SkBadge v-if="open" kind="primary">Open</SkBadge>
+     *   </template>
+     *   Content here
+     * </SkAccordionItem>
+     * ```
+     */
+    export interface SkAccordionItemComponentProps
+    {
+        /** Required unique identifier */
+        value : string;
+        /** Title text (overridden by title slot) */
+        title ?: string;
+        /** Disable this item */
+        disabled ?: boolean;
+        /** Override parent kind */
+        kind ?: SkAccordionKind;
+    }
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const props = withDefaults(defineProps<SkAccordionItemComponentProps>(), {
+        title: undefined,
+        disabled: false,
+        kind: undefined,
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    // Inject parent kind and compute effective kind
+    const parentKind = inject<ComputedRef<SkAccordionKind>>('accordion-kind', computed(() => 'neutral'));
+    const effectiveKind = computed(() => props.kind ?? parentKind.value);
+
+    // Inject parent modelValue to check if this item is open
+    const parentModelValue = inject<Ref<string | string[] | undefined>>('accordion-modelValue', ref(undefined));
+    const isOpen = computed(() =>
+    {
+        const modelValue = parentModelValue.value;
+        if(Array.isArray(modelValue))
+        {
+            return modelValue.includes(props.value);
+        }
+        return modelValue === props.value;
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const itemClasses = computed(() => ({
+        'sk-accordion-item': true,
+        [`sk-${ effectiveKind.value }`]: true,
+        'sk-open': isOpen.value,
+    }));
+
+    const chevronClasses = computed(() => ({
+        'sk-accordion-chevron': true,
+        'sk-open': isOpen.value,
+    }));
+</script>
+
+<!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Accordion/index.ts

@@ -0,0 +1,3 @@
+export { default as SkAccordion } from './SkAccordion.vue';
+export { default as SkAccordionItem } from './SkAccordionItem.vue';
+export * from './types';

package/src/components/Accordion/types.ts

@@ -0,0 +1,9 @@
+// Types
+import type { ComponentKind } from '@/types';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+export type SkAccordionKind = ComponentKind;
+export type SkAccordionType = 'single' | 'multiple';
+
+//----------------------------------------------------------------------------------------------------------------------