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

package/dist/types.d.ts

@@ -0,0 +1,29 @@
+export type ComponentSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type SemanticKind = 'neutral' | 'primary' | 'accent' | 'danger' | 'info' | 'success' | 'warning';
+export type ColorKind = 'boulder' | 'neon-blue' | 'light-blue' | 'neon-orange' | 'neon-purple' | 'neon-green' | 'neon-mint' | 'neon-pink' | 'yellow' | 'red';
+export type ComponentKind = SemanticKind | ColorKind;
+export type ComponentVariant = 'solid' | 'outline' | 'subtle' | 'ghost' | 'link';
+/**
+ * Custom color props interface for components.
+ * Allows overriding component colors with any valid CSS color value.
+ */
+export interface ComponentCustomColors {
+    /**
+     * Base color for the component.
+     * Accepts any valid CSS color value including:
+     * - Hex colors: "#8B5CF6"
+     * - OKLCH colors: "oklch(0.7 0.25 300)"
+     * - RGB/HSL: "rgb(139, 92, 246)", "hsl(258, 90%, 66%)"
+     * - CSS variables: "var(--color-neon-green-200)"
+     * - Named colors: "rebeccapurple"
+     *
+     * When provided, this overrides the color from the `kind` prop.
+     */
+    baseColor?: string;
+    /**
+     * Text/foreground color for the component.
+     * If not provided, automatically calculated for optimal contrast with the base color.
+     * Accepts the same CSS color formats as baseColor.
+     */
+    textColor?: string;
+}

package/docs/components/accordion/_meta.yaml

@@ -0,0 +1,9 @@
+component: SkAccordion
+category: Layout
+sections:
+  - intro
+  - usage
+  - multiple
+  - kinds
+  - custom-colors
+  - real-world

package/docs/components/accordion/custom-colors.md

@@ -0,0 +1,20 @@
+---
+section: custom-colors
+order: 5
+---
+
+Override the kind with custom `baseColor` and `textColor` props. Supports hex, OKLCH, or any valid CSS color value.
+
+```vue
+<SkAccordion base-color="#8B5CF6" collapsible>
+    <SkAccordionItem value="c1" title="Custom Purple">
+        Using hex color #8B5CF6
+    </SkAccordionItem>
+</SkAccordion>
+
+<SkAccordion base-color="oklch(0.75 0.2 180)" collapsible>
+    <SkAccordionItem value="c2" title="Custom Teal">
+        Using OKLCH color
+    </SkAccordionItem>
+</SkAccordion>
+```

package/docs/components/accordion/intro.md

@@ -0,0 +1,8 @@
+---
+section: intro
+order: 1
+---
+
+# SkAccordion
+
+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.

package/docs/components/accordion/kinds.md

@@ -0,0 +1,30 @@
+---
+section: kinds
+order: 4
+---
+
+All seven semantic kinds adapt to your theme colors. The `kind` prop on SkAccordion is inherited by all child items, but individual items can override with their own `kind` prop.
+
+```vue
+<SkAccordion kind="neutral">
+    <SkAccordionItem value="n1" title="Neutral">Content</SkAccordionItem>
+</SkAccordion>
+<SkAccordion kind="primary">
+    <SkAccordionItem value="p1" title="Primary">Content</SkAccordionItem>
+</SkAccordion>
+<SkAccordion kind="accent">
+    <SkAccordionItem value="a1" title="Accent">Content</SkAccordionItem>
+</SkAccordion>
+<SkAccordion kind="success">
+    <SkAccordionItem value="s1" title="Success">Content</SkAccordionItem>
+</SkAccordion>
+<SkAccordion kind="warning">
+    <SkAccordionItem value="w1" title="Warning">Content</SkAccordionItem>
+</SkAccordion>
+<SkAccordion kind="danger">
+    <SkAccordionItem value="d1" title="Danger">Content</SkAccordionItem>
+</SkAccordion>
+<SkAccordion kind="info">
+    <SkAccordionItem value="i1" title="Info">Content</SkAccordionItem>
+</SkAccordion>
+```

package/docs/components/accordion/multiple.md

@@ -0,0 +1,28 @@
+---
+section: multiple
+order: 3
+---
+
+Set `type="multiple"` to allow multiple items open simultaneously. The `v-model` becomes an array of open item values.
+
+```vue
+<script setup>
+import { ref } from 'vue';
+
+const openItems = ref(['feature-1', 'feature-2']);
+</script>
+
+<template>
+    <SkAccordion v-model="openItems" type="multiple" kind="accent">
+        <SkAccordionItem value="feature-1" title="Theming">
+            Full theme support...
+        </SkAccordionItem>
+        <SkAccordionItem value="feature-2" title="Accessibility">
+            ARIA compliant...
+        </SkAccordionItem>
+        <SkAccordionItem value="feature-3" title="Performance">
+            Optimized animations...
+        </SkAccordionItem>
+    </SkAccordion>
+</template>
+```

package/docs/components/accordion/real-world.md

@@ -0,0 +1,31 @@
+---
+section: real-world
+order: 6
+---
+
+Classic use case for accordions - frequently asked questions. Set `collapsible` in single mode to allow closing all items.
+
+```vue
+<script setup>
+import { ref } from 'vue';
+
+const faqOpen = ref('faq-1');
+</script>
+
+<template>
+    <SkAccordion v-model="faqOpen" kind="info" collapsible>
+        <SkAccordionItem value="faq-1" title="Do you offer a free trial?">
+            Yes! We offer a 14-day free trial...
+        </SkAccordionItem>
+        <SkAccordionItem value="faq-2" title="Can I cancel anytime?">
+            Absolutely. You can cancel your subscription...
+        </SkAccordionItem>
+        <SkAccordionItem value="faq-3" title="What payment methods do you accept?">
+            We accept all major credit cards...
+        </SkAccordionItem>
+        <SkAccordionItem value="faq-4" title="Is my data secure?">
+            Yes. We use bank-level encryption...
+        </SkAccordionItem>
+    </SkAccordion>
+</template>
+```

package/docs/components/accordion/usage.md

@@ -0,0 +1,28 @@
+---
+section: usage
+order: 2
+---
+
+Use `v-model` to control which item is open. In single mode (default), only one item can be open at a time. Each `SkAccordionItem` requires a unique `value` prop.
+
+```vue
+<script setup>
+import { ref } from 'vue';
+
+const openItem = ref('item-1');
+</script>
+
+<template>
+    <SkAccordion v-model="openItem" kind="primary">
+        <SkAccordionItem value="item-1" title="What is SleekSpace UI?">
+            SleekSpace UI is a Vue 3 component library...
+        </SkAccordionItem>
+        <SkAccordionItem value="item-2" title="How do I install it?">
+            Install via npm...
+        </SkAccordionItem>
+        <SkAccordionItem value="item-3" title="Is it customizable?">
+            Yes! Every component supports custom colors...
+        </SkAccordionItem>
+    </SkAccordion>
+</template>
+```

package/docs/components/alert/_meta.yaml

@@ -0,0 +1,10 @@
+component: SkAlert
+category: Feedback
+sections:
+  - intro
+  - usage
+  - kinds
+  - prominent
+  - rich-content
+  - custom-icons
+  - custom-colors

package/docs/components/alert/custom-colors.md

@@ -0,0 +1,30 @@
+---
+section: custom-colors
+order: 7
+---
+
+Use `base-color` for any CSS color value. Provide `text-color` for optimal contrast, or it will default to the theme's neutral text color.
+
+```vue
+<SkAlert
+    base-color="oklch(0.65 0.25 280)"
+    text-color="white"
+>
+    <strong>Custom Purple:</strong> This alert uses a custom purple base color with white text.
+</SkAlert>
+
+<SkAlert
+    base-color="oklch(0.75 0.2 150)"
+    text-color="oklch(0.2 0.05 150)"
+>
+    <strong>Custom Green:</strong> A custom green alert with manually specified text color.
+</SkAlert>
+
+<SkAlert
+    base-color="#F59E0B"
+    text-color="white"
+    :prominent="true"
+>
+    <strong>Hex Color:</strong> Custom colors work with prominent styling too!
+</SkAlert>
+```

package/docs/components/alert/custom-icons.md

@@ -0,0 +1,17 @@
+---
+section: custom-icons
+order: 6
+---
+
+Override the default icon using the `icon` slot for custom branding or specific message types.
+
+```vue
+<SkAlert kind="info">
+    <template #icon>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+        </svg>
+    </template>
+    <strong>Pro Tip:</strong> Use keyboard shortcut Ctrl+S to save your work quickly.
+</SkAlert>
+```

package/docs/components/alert/intro.md

@@ -0,0 +1,8 @@
+---
+section: intro
+order: 1
+---
+
+# SkAlert
+
+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.

package/docs/components/alert/kinds.md

@@ -0,0 +1,24 @@
+---
+section: kinds
+order: 3
+---
+
+Four semantic kinds with built-in icons: `info` for information, `success` for positive feedback, `warning` for caution, and `danger` for errors or critical messages.
+
+```vue
+<SkAlert kind="info">
+    <strong>Info:</strong> Your changes will be saved automatically.
+</SkAlert>
+
+<SkAlert kind="success">
+    <strong>Success:</strong> Your profile has been updated successfully.
+</SkAlert>
+
+<SkAlert kind="warning">
+    <strong>Warning:</strong> This action cannot be undone.
+</SkAlert>
+
+<SkAlert kind="danger">
+    <strong>Error:</strong> Failed to save changes. Please try again.
+</SkAlert>
+```

package/docs/components/alert/prominent.md

@@ -0,0 +1,16 @@
+---
+section: prominent
+order: 4
+---
+
+Use `prominent` for critical messages that require immediate attention. Prominent alerts have stronger colors and increased visual weight.
+
+```vue
+<SkAlert kind="info" :prominent="true">
+    <strong>System Maintenance:</strong> The system will undergo scheduled maintenance on Sunday at 2 AM UTC.
+</SkAlert>
+
+<SkAlert kind="warning" :prominent="true">
+    <strong>Storage Limit:</strong> You're using 95% of your storage space.
+</SkAlert>
+```

package/docs/components/alert/rich-content.md

@@ -0,0 +1,19 @@
+---
+section: rich-content
+order: 5
+---
+
+Alerts can contain any content including headings, paragraphs, lists, buttons, and links for comprehensive messaging.
+
+```vue
+<SkAlert kind="info">
+    <h4 class="font-semibold mb-2">New Features Available</h4>
+    <p class="mb-2">We've added several new features to improve your experience:</p>
+    <ul class="list-disc list-inside mb-3 space-y-1">
+        <li>Dark mode support</li>
+        <li>Keyboard shortcuts</li>
+        <li>Export to PDF</li>
+    </ul>
+    <SkButton size="sm" kind="info">Learn More</SkButton>
+</SkAlert>
+```

package/docs/components/alert/usage.md

@@ -0,0 +1,12 @@
+---
+section: usage
+order: 2
+---
+
+Use alerts to provide feedback, display status, or draw attention to important information. Each kind includes an appropriate default icon.
+
+```vue
+<SkAlert kind="info">
+    This is an informational alert message. Use it to provide helpful information to users.
+</SkAlert>
+```

package/docs/components/avatar/_meta.yaml

@@ -0,0 +1,10 @@
+component: SkAvatar
+category: Feedback
+sections:
+  - intro
+  - usage
+  - sizes
+  - kinds
+  - images
+  - custom-colors
+  - real-world

package/docs/components/avatar/custom-colors.md

@@ -0,0 +1,14 @@
+---
+section: custom-colors
+order: 6
+---
+
+Override background and text colors for unique avatar styles.
+
+```vue
+<SkAvatar
+    initials="GN"
+    base-color="oklch(0.6 0.2 150)"
+    text-color="oklch(0.95 0.05 150)"
+/>
+```

package/docs/components/avatar/images.md

@@ -0,0 +1,12 @@
+---
+section: images
+order: 5
+---
+
+Provide image URLs for photo avatars. Images automatically fill the beveled square shape.
+
+```vue
+<SkAvatar src="https://i.pravatar.cc/150?img=12" alt="User 1" />
+<SkAvatar src="https://i.pravatar.cc/150?img=25" alt="User 2" />
+<SkAvatar src="https://i.pravatar.cc/150?img=33" alt="User 3" />
+```

package/docs/components/avatar/intro.md

@@ -0,0 +1,8 @@
+---
+section: intro
+order: 1
+---
+
+# SkAvatar
+
+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.

package/docs/components/avatar/kinds.md

@@ -0,0 +1,16 @@
+---
+section: kinds
+order: 4
+---
+
+All seven semantic kinds are available for different avatar contexts.
+
+```vue
+<SkAvatar kind="neutral" initials="NT" />
+<SkAvatar kind="primary" initials="PR" />
+<SkAvatar kind="accent" initials="AC" />
+<SkAvatar kind="info" initials="IF" />
+<SkAvatar kind="success" initials="SC" />
+<SkAvatar kind="warning" initials="WN" />
+<SkAvatar kind="danger" initials="DG" />
+```

package/docs/components/avatar/real-world.md

@@ -0,0 +1,25 @@
+---
+section: real-world
+order: 7
+---
+
+Common usage patterns for avatars in applications including user profiles, comment lists, and team member displays.
+
+```vue
+<!-- User Profile -->
+<div class="flex items-center gap-4">
+    <SkAvatar size="lg" src="https://i.pravatar.cc/150?img=8" />
+    <div>
+        <h3>Commander Nova</h3>
+        <p>Starship Captain</p>
+    </div>
+</div>
+
+<!-- Team List -->
+<div class="flex items-center gap-2">
+    <SkAvatar size="sm" src="..." />
+    <SkAvatar size="sm" src="..." />
+    <SkAvatar size="sm" src="..." />
+    <SkAvatar size="sm" initials="+5" kind="neutral" />
+</div>
+```

package/docs/components/avatar/sizes.md

@@ -0,0 +1,14 @@
+---
+section: sizes
+order: 3
+---
+
+Control the avatar size with the `size` prop. Available sizes: `xs`, `sm`, `md` (default), `lg`, and `xl`.
+
+```vue
+<SkAvatar size="xs" initials="XS" />
+<SkAvatar size="sm" initials="SM" />
+<SkAvatar size="md" initials="MD" />
+<SkAvatar size="lg" initials="LG" />
+<SkAvatar size="xl" initials="XL" />
+```

package/docs/components/avatar/usage.md

@@ -0,0 +1,15 @@
+---
+section: usage
+order: 2
+---
+
+Use avatars to represent users or entities. The avatar displays content in priority order: image (if `src` loads successfully), initials (up to 2 characters), or a default person icon.
+
+```vue
+<SkAvatar
+    src="https://i.pravatar.cc/150?img=1"
+    alt="User avatar"
+/>
+<SkAvatar initials="JD" />
+<SkAvatar />
+```

package/docs/components/breadcrumbs/_meta.yaml

@@ -0,0 +1,9 @@
+component: SkBreadcrumbs
+category: Navigation
+sections:
+  - intro
+  - usage
+  - separators
+  - kinds
+  - custom-colors
+  - real-world

package/docs/components/breadcrumbs/custom-colors.md

@@ -0,0 +1,14 @@
+---
+section: custom-colors
+order: 5
+---
+
+Override the breadcrumb colors with `base-color` and `text-color` props for custom branding.
+
+```vue
+<SkBreadcrumbs base-color="#9333ea" text-color="#f3e8ff">
+    <SkBreadcrumbItem href="/">Home</SkBreadcrumbItem>
+    <SkBreadcrumbItem href="/docs">Docs</SkBreadcrumbItem>
+    <SkBreadcrumbItem current>Purple</SkBreadcrumbItem>
+</SkBreadcrumbs>
+```

package/docs/components/breadcrumbs/intro.md

@@ -0,0 +1,8 @@
+---
+section: intro
+order: 1
+---
+
+# SkBreadcrumbs
+
+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.

package/docs/components/breadcrumbs/kinds.md

@@ -0,0 +1,16 @@
+---
+section: kinds
+order: 4
+---
+
+All seven semantic kinds are available: `neutral`, `primary`, `accent`, `info`, `success`, `warning`, and `danger`.
+
+```vue
+<SkBreadcrumbs kind="primary">
+    <SkBreadcrumbItem href="/">Home</SkBreadcrumbItem>
+    <SkBreadcrumbItem href="/docs">Docs</SkBreadcrumbItem>
+    <SkBreadcrumbItem current>Primary</SkBreadcrumbItem>
+</SkBreadcrumbs>
+
+<!-- Available kinds: neutral, primary, accent, info, success, warning, danger -->
+```

package/docs/components/breadcrumbs/real-world.md

@@ -0,0 +1,33 @@
+---
+section: real-world
+order: 6
+---
+
+Common usage patterns including e-commerce navigation, application settings, and documentation sites.
+
+```vue
+<!-- E-commerce -->
+<SkBreadcrumbs kind="primary">
+    <SkBreadcrumbItem href="/">Home</SkBreadcrumbItem>
+    <SkBreadcrumbItem href="/categories">Categories</SkBreadcrumbItem>
+    <SkBreadcrumbItem href="/categories/electronics">Electronics</SkBreadcrumbItem>
+    <SkBreadcrumbItem href="/categories/electronics/computers">Computers</SkBreadcrumbItem>
+    <SkBreadcrumbItem current>Gaming Laptops</SkBreadcrumbItem>
+</SkBreadcrumbs>
+
+<!-- Settings -->
+<SkBreadcrumbs kind="accent" separator="›">
+    <SkBreadcrumbItem href="/dashboard">Dashboard</SkBreadcrumbItem>
+    <SkBreadcrumbItem href="/settings">Settings</SkBreadcrumbItem>
+    <SkBreadcrumbItem href="/settings/account">Account</SkBreadcrumbItem>
+    <SkBreadcrumbItem current>Security</SkBreadcrumbItem>
+</SkBreadcrumbs>
+
+<!-- Documentation -->
+<SkBreadcrumbs kind="info">
+    <SkBreadcrumbItem href="/">Documentation</SkBreadcrumbItem>
+    <SkBreadcrumbItem href="/components">Components</SkBreadcrumbItem>
+    <SkBreadcrumbItem href="/components/navigation">Navigation</SkBreadcrumbItem>
+    <SkBreadcrumbItem current>Breadcrumbs</SkBreadcrumbItem>
+</SkBreadcrumbs>
+```

package/docs/components/breadcrumbs/separators.md

@@ -0,0 +1,13 @@
+---
+section: separators
+order: 3
+---
+
+The default separator is `/`. Override it with the `separator` prop using any character or symbol.
+
+```vue
+<SkBreadcrumbs separator="›">...</SkBreadcrumbs>
+<SkBreadcrumbs separator="→">...</SkBreadcrumbs>
+<SkBreadcrumbs separator="•">...</SkBreadcrumbs>
+<SkBreadcrumbs separator="|">...</SkBreadcrumbs>
+```

package/docs/components/breadcrumbs/usage.md

@@ -0,0 +1,15 @@
+---
+section: usage
+order: 2
+---
+
+Use `href` for standard links, `to` for Vue Router navigation, or `current` to mark the current page. Items render as different elements based on props.
+
+```vue
+<SkBreadcrumbs>
+    <SkBreadcrumbItem href="/">Home</SkBreadcrumbItem>
+    <SkBreadcrumbItem href="/products">Products</SkBreadcrumbItem>
+    <SkBreadcrumbItem href="/products/electronics">Electronics</SkBreadcrumbItem>
+    <SkBreadcrumbItem current>Laptops</SkBreadcrumbItem>
+</SkBreadcrumbs>
+```

package/docs/components/card/_meta.yaml

@@ -0,0 +1,10 @@
+component: SkCard
+category: Layout
+sections:
+  - intro
+  - usage
+  - kinds
+  - neon-kinds
+  - media
+  - scrollable
+  - no-decoration

package/docs/components/card/intro.md

@@ -0,0 +1,8 @@
+---
+section: intro
+order: 1
+---
+
+# SkCard
+
+A structured content container with optional header, media, content, and footer sections. Built on top of SkPanel, it inherits beveled corners and decorative accents.

package/docs/components/card/kinds.md

@@ -0,0 +1,24 @@
+---
+section: kinds
+order: 3
+---
+
+Choose from semantic kinds to match your theme or indicate purpose: `neutral`, `primary`, `accent`, `info`, `success`, `warning`, and `danger`.
+
+```vue
+<SkCard kind="neutral" title="Neutral">
+    <p>Default card styling</p>
+</SkCard>
+
+<SkCard kind="primary" title="Primary">
+    <p>Primary content card</p>
+</SkCard>
+
+<SkCard kind="success" title="Success">
+    <p>Success feedback card</p>
+</SkCard>
+
+<SkCard kind="danger" title="Danger">
+    <p>Error notification card</p>
+</SkCard>
+```

package/docs/components/card/media.md

@@ -0,0 +1,25 @@
+---
+section: media
+order: 5
+---
+
+Use the `media` slot for images, videos, or other media content rendered between the header and content areas.
+
+```vue
+<SkCard kind="primary" title="Mountain Landscape">
+    <template #media>
+        <img
+            src="/path/to/image.jpg"
+            alt="Mountain landscape"
+            class="w-full h-48 object-cover"
+        >
+    </template>
+    <p>Breathtaking mountain views captured at sunrise.</p>
+    <template #footer>
+        <div class="flex justify-between items-center">
+            <span class="text-sm opacity-70">2 days ago</span>
+            <SkButton size="sm" kind="primary">View</SkButton>
+        </div>
+    </template>
+</SkCard>
+```