@skewedaspect/sleekspace-ui 0.2.0-beta.1 → 0.2.0-beta.2

package/docs/components/toast.md

@@ -1,95 +0,0 @@
----
-component: SkToast
-category: Feedback
----
-
-# SkToast
-
-A notification toast system for showing brief messages that appear and auto-dismiss. Composed of SkToastProvider (wraps your app) and the `useToast` composable (shows toasts from anywhere). Built on RekaUI's Toast primitive.
-
-## Usage
-
-Wrap your application with SkToastProvider, then use `useToast()` to show notifications:
-
-```vue
-<!-- App.vue -->
-<template>
-  <SkToastProvider position="top-right">
-    <RouterView />
-  </SkToastProvider>
-</template>
-```
-
-```vue
-<!-- AnyComponent.vue -->
-<script setup>
-import { useToast } from '@skewedaspect/sleekspace-ui';
-
-const toast = useToast();
-
-function save() {
-  toast.add({
-    kind: 'success',
-    title: 'Saved',
-    message: 'Your changes have been saved.',
-  });
-}
-</script>
-
-<template>
-  <SkButton @click="save">Save</SkButton>
-</template>
-```
-
-## Toast Options
-
-The `toast.add()` method accepts:
-
-- **kind** -- `info` (default), `success`, `warning`, `danger`.
-- **title** -- Optional heading text.
-- **message** -- Required message content.
-- **duration** -- Auto-dismiss time in ms. Use `0` for no auto-dismiss. Defaults to the provider's duration (5000ms).
-- **closable** -- Show a close button (default: `true`).
-
-```vue
-toast.add({
-  kind: 'danger',
-  title: 'Error',
-  message: 'Something went wrong.',
-  duration: 0,
-  closable: true,
-});
-```
-
-## Dismissing Toasts
-
-```vue
-const id = toast.add({ message: 'Processing...' });
-toast.dismiss(id);    // Dismiss specific toast
-toast.dismissAll();   // Dismiss all toasts
-```
-
-## Position
-
-Set the viewport position on the provider:
-
-```vue
-<SkToastProvider position="top-right">...</SkToastProvider>
-<SkToastProvider position="bottom-center">...</SkToastProvider>
-```
-
-Available positions: `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`, `bottom-right`.
-
-## Swipe to Dismiss
-
-Configure swipe behavior on the provider:
-
-```vue
-<SkToastProvider swipe-direction="left" :swipe-threshold="100">
-  ...
-</SkToastProvider>
-```
-
-## Accessibility
-
-Built on RekaUI Toast which renders notifications in a live region. Toasts are announced by screen readers as they appear. The `F8` hotkey (configurable via `hotkey` prop) focuses the toast viewport. Close buttons have `aria-label="Close"`. Content is portaled and inherits the active theme.

package/docs/components/tooltip.md

@@ -1,90 +0,0 @@
----
-component: SkTooltip
-category: Feedback
----
-
-# SkTooltip
-
-A hover-triggered tooltip for displaying brief supplementary information next to a trigger element. Supports standalone and provider modes for coordinated tooltip behavior. Built on RekaUI's Tooltip primitive and uses a portal.
-
-## Usage
-
-```vue
-<template>
-  <SkTooltip>
-    <template #trigger>
-      <SkButton>Hover me</SkButton>
-    </template>
-    This is the tooltip content.
-  </SkTooltip>
-</template>
-```
-
-## Standalone vs Provider Mode
-
-By default, each SkTooltip manages its own show delay. Wrap multiple tooltips in SkTooltipProvider for coordinated "skip delay" behavior -- after viewing one tooltip, moving to another shows it instantly:
-
-```vue
-<SkTooltipProvider :delay-duration="300">
-  <SkTooltip>
-    <template #trigger><SkButton>A</SkButton></template>
-    Tooltip A
-  </SkTooltip>
-  <SkTooltip>
-    <template #trigger><SkButton>B</SkButton></template>
-    Tooltip B
-  </SkTooltip>
-</SkTooltipProvider>
-```
-
-## Positioning
-
-```vue
-<SkTooltip side="right" align="start" :side-offset="8">
-  <template #trigger><SkButton>Right</SkButton></template>
-  Positioned to the right.
-</SkTooltip>
-```
-
-Available `side` values: `top` (default), `right`, `bottom`, `left`. Available `align` values: `start`, `center` (default), `end`.
-
-## Arrow
-
-The arrow is shown by default. Hide it with:
-
-```vue
-<SkTooltip :show-arrow="false">...</SkTooltip>
-```
-
-## Variants
-
-- **solid** (default) -- Filled background.
-- **outline** -- Bordered with transparent background.
-
-```vue
-<SkTooltip variant="solid">...</SkTooltip>
-<SkTooltip variant="outline">...</SkTooltip>
-```
-
-## Kinds
-
-```vue
-<SkTooltip kind="primary">...</SkTooltip>
-<SkTooltip kind="danger">...</SkTooltip>
-```
-
-## Custom Colors
-
-```vue
-<SkTooltip
-  base-color="oklch(0.3 0.1 260)"
-  text-color="white"
->
-  <template #trigger><SkButton>Info</SkButton></template>
-  Dark purple tooltip.
-</SkTooltip>
-```
-
-## Accessibility
-
-Built on RekaUI Tooltip which shows on focus and hover, hides on Escape. The trigger receives `aria-describedby` pointing to the tooltip content. Content is portaled and inherits the active theme.

package/docs/guides/design-tokens.md

@@ -1,105 +0,0 @@
----
-title: Design Tokens
----
-
-# Design Tokens
-
-SleekSpace UI uses a three-tier token hierarchy: Foundation, Semantic, and Component. This architecture enables consistent theming while allowing granular customization.
-
-## Token Hierarchy
-
-### Foundation Tokens
-
-Primitive values that form the raw design vocabulary. These do not change with themes.
-
-- **Colors** (OKLCH): 10 hues (gray, blue, red, orange, yellow, green, mint, cyan, purple, pink) with 11 shades each (5 through 95). Pattern: `--sk-color-{hue}-{shade}`.
-- **Spacing**: `--sk-spacing-{xs|sm|md|lg|xl|2xl|3xl|4xl}`
-- **Radii**: `--sk-radius-{none|sm|md|lg|xl|2xl|full}`
-- **Border Widths**: `--sk-border-width-{thin|base|thick}`
-- **Shadows**: `--sk-shadow-{sm|md|lg|xl|2xl}`
-- **Glow Effects**: `--sk-glow-{sm|md|lg}`
-- **Typography**: Font families, sizes, weights, line heights
-- **Transitions**: `--sk-transition-duration-{fast|base|slow}`
-
-### Semantic Tokens
-
-Context-aware tokens that map to foundation values and change with the active theme. Use these for all component colors.
-
-Pattern: `--sk-{kind}-{property}`
-
-Each of the 7 semantic kinds (neutral, primary, accent, info, success, warning, danger) defines:
-
-- `--sk-{kind}-base` -- Background/base color
-- `--sk-{kind}-text` -- Foreground/text color
-- `--sk-{kind}-hover` -- Hover state color
-
-### Component Tokens
-
-Optional tokens scoped to individual components, defined inline in component SCSS files:
-
-```css
---sk-button-height-base: 2.5rem;
---sk-panel-padding: var(--sk-spacing-md);
---sk-navbar-height: 4rem;
-```
-
-## Using Tokens in Custom CSS
-
-### Semantic tokens for colors
-
-```scss
-.my-component {
-  background: var(--sk-primary-base);
-  color: var(--sk-primary-text);
-
-  &:hover {
-    background: var(--sk-primary-hover);
-  }
-}
-```
-
-### Foundation tokens for non-color properties
-
-```scss
-.my-component {
-  padding: var(--sk-spacing-md);
-  border-width: var(--sk-border-width-base);
-  box-shadow: var(--sk-shadow-md);
-  transition-duration: var(--sk-transition-duration-base);
-}
-```
-
-### In JavaScript
-
-```js
-const primaryColor = getComputedStyle(document.documentElement)
-  .getPropertyValue('--sk-primary-base');
-```
-
-## OKLCH Color Space
-
-All colors use OKLCH (Oklab Lightness Chroma Hue) for perceptually uniform results:
-
-```css
---sk-primary-base: oklch(0.65 0.2 260);
-/* 65% lightness, 0.2 chroma, 260 degrees hue (blue) */
-```
-
-Runtime shade calculation uses relative OKLCH:
-
-```css
---color-sk-primary-70: oklch(from var(--sk-primary-base) calc(l * 0.70) c h);
-```
-
-## Token Files
-
-Foundation tokens are in `src/styles/tokens/`:
-- `_foundation-colors.scss`
-- `_foundation-spacing.scss`
-- `_foundation-radius.scss`
-- `_foundation-borders.scss`
-- `_foundation-shadows.scss`
-- `_foundation-typography.scss`
-- `_foundation-transitions.scss`
-
-Semantic tokens are in `_semantic-colors.scss`. Component tokens are defined inline in each component's SCSS file under `src/styles/components/`.