# SleekSpace UI
> Vue 3 component library with cyberpunk aesthetic

- Docs: https://sleekspace.skewedaspect.com
- Full reference: https://sleekspace.skewedaspect.com/llms-full.txt
- Repository: https://gitlab.com/skewedaspect/sleekspace-ui
- npm: @skewedaspect/sleekspace-ui

## Components

- **SkAccordion** (Layout): A collapsible sections container for organizing content into expandable panels. Supports single or multiple open items with smooth animations. Built on RekaUI's Accordion primitive with full WAI-ARIA support.
- **SkAlert** (Feedback): A feedback component for displaying informational messages. Each kind renders a corresponding icon (info circle, checkmark, warning triangle, or error cross) alongside the message content. Renders with `role="alert"` for screen reader announcements.
- **SkAvatar** (Feedback): A user profile avatar component with three fallback levels: image, initials, and a default person icon. Renders as a square with beveled top-left and bottom-right corners.
- **SkBreadcrumbs** (Navigation): A navigation breadcrumb trail showing the current page location within a hierarchy. Automatically inserts separator characters between items. Renders inside a `<nav>` element with `aria-label="Breadcrumb"` for accessibility.
- **SkButton** (Forms): A versatile button component with multiple visual variants, sizes, and interactive states. Renders as a `<button>`, `<a>`, or `<router-link>` depending on the props provided.
- **SkCard** (Layout): A structured content container with optional header, media, content, and footer sections. Built on top of SkPanel, it inherits beveled corners and decorative accents.
- **SkCheckbox** (Forms): A checkbox component supporting boolean and indeterminate states. Built on RekaUI's Checkbox primitive with beveled corner styling and full keyboard accessibility.
- **SkCollapsible** (Layout): A single-section disclosure component for showing and hiding content with smooth height animations. Built on RekaUI's Collapsible primitive.
- **SkDivider** (Layout): A visual separator component for dividing content sections. Renders as an `<hr>` element with support for both horizontal and vertical orientations.
- **SkDropdown** (Forms): A dropdown menu component with a trigger button and floating menu content. Supports submenus, menu items, and separators. Built on RekaUI's DropdownMenu primitive and uses a portal for rendering.
- **SkField** (Forms): A form field wrapper that provides label, description, error message, and validation state management. Automatically wires up accessibility attributes between the label, input, and messages.
- **SkGroup** (Layout): A layout container that arranges child elements with consistent spacing in a horizontal or vertical direction.
- **SkInput** (Forms): A text input component with validation states, semantic color support, and multiple input types. Automatically inherits kind from a parent SkField when used together.
- **SkListbox** (Forms): A searchable select component for choosing from a list of predefined options. Features a combobox-style input with a dropdown list of items. Built on RekaUI's Combobox primitive and uses a portal for the dropdown.
- **SkModal** (Feedback): A dialog overlay component for presenting focused content that requires user attention or interaction. Includes a backdrop, close button, and optional trigger. Built on RekaUI's Dialog primitive and uses a portal.
- **SkNavBar** (Navigation): A top navigation bar component with three content zones: brand, navigation, and actions. Sticky by default so it stays visible during scroll.
- **SkNumberInput** (Forms): A numeric input component with increment/decrement stepper buttons. Supports keyboard navigation, min/max bounds, and step increments. Built on RekaUI's NumberField primitive.
- **SkPage** (Layout): A full-page layout component that provides a structured page skeleton with header, sidebar, content, and footer regions. Designed for application-level layouts with semantic HTML elements.
- **SkPagination** (Navigation): A pagination control for navigating through pages of content. Automatically calculates page ranges with ellipsis for large page counts.
- **SkPanel** (Layout): The foundational container component of SleekSpace UI. Provides borders, background colors, beveled corners, and an optional decorative accent line. Serves as the base for SkCard and other container components.
- **SkPopover** (Feedback): A floating panel positioned relative to a trigger element. Combines tooltip-like positioning with card-like structure, supporting a header with title, body content, footer, and a connecting arrow. Built on RekaUI's Popover primitive and uses a portal.
- **SkProgress** (Feedback): A progress bar component with both determinate and indeterminate modes. Supports percentage labels and custom colors. Built on RekaUI's Progress primitive.
- **SkRadio** (Forms): A radio button component for exclusive selection within a group. SkRadio must be used inside SkRadioGroup. Built on RekaUI's RadioGroup primitive.
- **SkSidebar** (Navigation): A sticky navigation sidebar container with semantic color theming. Composed of SkSidebarSection and SkSidebarItem for structured navigation.
- **SkSkeleton** (Feedback): A loading placeholder component with animated shimmer or pulse effects. Use to indicate content is being fetched and provide a visual preview of the expected layout.
- **SkSlider** (Forms): A range slider component for selecting numeric values. Supports single-thumb and multi-thumb (range) modes with horizontal and vertical orientations. Built on RekaUI's Slider primitive.
- **SkSpinner** (Feedback): An animated loading indicator with three cyberpunk-themed animation variants. Use to communicate ongoing processing or loading.
- **SkSwitch** (Forms): A toggle switch component for binary on/off choices. Supports dynamic labels that change with state and flexible thumb styling. Built on RekaUI's Switch primitive.
- **SkTable** (Feedback): A styled HTML table component with striped rows, hover effects, and configurable borders. Wraps standard `<table>` markup with consistent theming.
- **SkTabs** (Navigation): A tabbed interface for organizing content into switchable panels. Composed of SkTabs, SkTabList, SkTab, SkTabPanels, and SkTabPanel. Built on RekaUI's Tabs primitive.
- **SkTag** (Feedback): A compact label component for metadata, categories, status indicators, or keywords. Supports removable tags with a close button.
- **SkTagsInput** (Forms): A multi-value tag input component for entering a list of string values. Type text and press Enter to add tags; use Backspace or the delete button to remove them. Built on RekaUI's TagsInput primitive.
- **SkTextarea** (Forms): A multiline text input component with validation states and semantic color support. Automatically inherits kind from a parent SkField.
- **SkTheme** (Theming): A theme provider component that controls the color scheme for all child components. Sets a `data-scheme` attribute that CSS rules use to apply different semantic token values.
- **SkToast** (Feedback): 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.
- **SkTooltip** (Feedback): 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.