@skewedaspect/sleekspace-ui 0.9.0 → 0.10.0

package/dist/static/render.d.ts

@@ -1,4 +1,5 @@
 import { ClassSpec } from './classes';
+import { H } from './h';
 export interface RenderSpec {
     tag: string;
     classSpec: ClassSpec;
@@ -9,4 +10,4 @@ export interface RenderSpec {
         text?: string;
     };
 }
-export declare function render(spec: RenderSpec, props: Record<string, unknown>, children: string): string;
+export declare function render<T>(h: H<T>, spec: RenderSpec, props: Record<string, unknown>, children?: T | T[]): T;

package/dist/static/stringH.d.ts

@@ -0,0 +1,2 @@
+import { H } from './h';
+export declare const stringH: H<string>;

package/dist/static/types.d.ts

@@ -15,6 +15,7 @@ export type ButtonKind = ComponentKind;
 export type ButtonSize = ComponentSize;
 export type ButtonVariant = ComponentVariant;
 export type ButtonType = 'button' | 'submit' | 'reset';
+export type ButtonCorner = 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
 export type CardKind = ComponentKind;
 export type DividerOrientation = 'horizontal' | 'vertical';
 export type DividerVariant = 'subtle';
@@ -23,6 +24,10 @@ export type GroupOrientation = 'horizontal' | 'vertical';
 export type NavBarKind = ComponentKind;
 export type PagePanelMode = 'auto' | 'persistent' | 'drawer';
 export type PaginationKind = ComponentKind;
+export type InputCorner = 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
+export type InputGroupCorner = 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
+export type NumberInputCorner = 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
+export type SelectCorner = 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
 export type PanelKind = ComponentKind;
 export type PanelSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type PanelCorner = 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';

package/dist/tailwind.css

@@ -0,0 +1,222 @@
+@theme inline {
+  /* Semantic Colors (theme-aware - change based on SkTheme) */
+  /* Each semantic color gets a full shade range using oklch lightness modifications */
+  /* Neutral */
+  --color-sk-neutral: var(--sk-neutral-base);
+  --color-sk-neutral-text: var(--sk-neutral-text);
+  --color-sk-neutral-5: oklch(from var(--sk-neutral-base) 0.95 c h);
+  --color-sk-neutral-10: oklch(from var(--sk-neutral-base) 0.90 c h);
+  --color-sk-neutral-20: oklch(from var(--sk-neutral-base) 0.85 c h);
+  --color-sk-neutral-30: oklch(from var(--sk-neutral-base) 0.80 c h);
+  --color-sk-neutral-40: oklch(from var(--sk-neutral-base) 0.75 c h);
+  --color-sk-neutral-50: var(--sk-neutral-base);
+  --color-sk-neutral-60: oklch(from var(--sk-neutral-base) calc(l * 0.85) c h);
+  --color-sk-neutral-70: oklch(from var(--sk-neutral-base) calc(l * 0.70) c h);
+  --color-sk-neutral-80: oklch(from var(--sk-neutral-base) calc(l * 0.55) c h);
+  --color-sk-neutral-90: oklch(from var(--sk-neutral-base) calc(l * 0.40) c h);
+  --color-sk-neutral-95: oklch(from var(--sk-neutral-base) calc(l * 0.25) c h);
+  /* Primary */
+  --color-sk-primary: var(--sk-primary-base);
+  --color-sk-primary-text: var(--sk-primary-text);
+  --color-sk-primary-5: oklch(from var(--sk-primary-base) 0.95 c h);
+  --color-sk-primary-10: oklch(from var(--sk-primary-base) 0.90 c h);
+  --color-sk-primary-20: oklch(from var(--sk-primary-base) 0.85 c h);
+  --color-sk-primary-30: oklch(from var(--sk-primary-base) 0.80 c h);
+  --color-sk-primary-40: oklch(from var(--sk-primary-base) 0.75 c h);
+  --color-sk-primary-50: var(--sk-primary-base);
+  --color-sk-primary-60: oklch(from var(--sk-primary-base) calc(l * 0.85) c h);
+  --color-sk-primary-70: oklch(from var(--sk-primary-base) calc(l * 0.70) c h);
+  --color-sk-primary-80: oklch(from var(--sk-primary-base) calc(l * 0.55) c h);
+  --color-sk-primary-90: oklch(from var(--sk-primary-base) calc(l * 0.40) c h);
+  --color-sk-primary-95: oklch(from var(--sk-primary-base) calc(l * 0.25) c h);
+  /* Accent */
+  --color-sk-accent: var(--sk-accent-base);
+  --color-sk-accent-text: var(--sk-accent-text);
+  --color-sk-accent-5: oklch(from var(--sk-accent-base) 0.95 c h);
+  --color-sk-accent-10: oklch(from var(--sk-accent-base) 0.90 c h);
+  --color-sk-accent-20: oklch(from var(--sk-accent-base) 0.85 c h);
+  --color-sk-accent-30: oklch(from var(--sk-accent-base) 0.80 c h);
+  --color-sk-accent-40: oklch(from var(--sk-accent-base) 0.75 c h);
+  --color-sk-accent-50: var(--sk-accent-base);
+  --color-sk-accent-60: oklch(from var(--sk-accent-base) calc(l * 0.85) c h);
+  --color-sk-accent-70: oklch(from var(--sk-accent-base) calc(l * 0.70) c h);
+  --color-sk-accent-80: oklch(from var(--sk-accent-base) calc(l * 0.55) c h);
+  --color-sk-accent-90: oklch(from var(--sk-accent-base) calc(l * 0.40) c h);
+  --color-sk-accent-95: oklch(from var(--sk-accent-base) calc(l * 0.25) c h);
+  /* Info */
+  --color-sk-info: var(--sk-info-base);
+  --color-sk-info-text: var(--sk-info-text);
+  --color-sk-info-5: oklch(from var(--sk-info-base) 0.95 c h);
+  --color-sk-info-10: oklch(from var(--sk-info-base) 0.90 c h);
+  --color-sk-info-20: oklch(from var(--sk-info-base) 0.85 c h);
+  --color-sk-info-30: oklch(from var(--sk-info-base) 0.80 c h);
+  --color-sk-info-40: oklch(from var(--sk-info-base) 0.75 c h);
+  --color-sk-info-50: var(--sk-info-base);
+  --color-sk-info-60: oklch(from var(--sk-info-base) calc(l * 0.85) c h);
+  --color-sk-info-70: oklch(from var(--sk-info-base) calc(l * 0.70) c h);
+  --color-sk-info-80: oklch(from var(--sk-info-base) calc(l * 0.55) c h);
+  --color-sk-info-90: oklch(from var(--sk-info-base) calc(l * 0.40) c h);
+  --color-sk-info-95: oklch(from var(--sk-info-base) calc(l * 0.25) c h);
+  /* Success */
+  --color-sk-success: var(--sk-success-base);
+  --color-sk-success-text: var(--sk-success-text);
+  --color-sk-success-5: oklch(from var(--sk-success-base) 0.95 c h);
+  --color-sk-success-10: oklch(from var(--sk-success-base) 0.90 c h);
+  --color-sk-success-20: oklch(from var(--sk-success-base) 0.85 c h);
+  --color-sk-success-30: oklch(from var(--sk-success-base) 0.80 c h);
+  --color-sk-success-40: oklch(from var(--sk-success-base) 0.75 c h);
+  --color-sk-success-50: var(--sk-success-base);
+  --color-sk-success-60: oklch(from var(--sk-success-base) calc(l * 0.85) c h);
+  --color-sk-success-70: oklch(from var(--sk-success-base) calc(l * 0.70) c h);
+  --color-sk-success-80: oklch(from var(--sk-success-base) calc(l * 0.55) c h);
+  --color-sk-success-90: oklch(from var(--sk-success-base) calc(l * 0.40) c h);
+  --color-sk-success-95: oklch(from var(--sk-success-base) calc(l * 0.25) c h);
+  /* Warning */
+  --color-sk-warning: var(--sk-warning-base);
+  --color-sk-warning-text: var(--sk-warning-text);
+  --color-sk-warning-5: oklch(from var(--sk-warning-base) 0.95 c h);
+  --color-sk-warning-10: oklch(from var(--sk-warning-base) 0.90 c h);
+  --color-sk-warning-20: oklch(from var(--sk-warning-base) 0.85 c h);
+  --color-sk-warning-30: oklch(from var(--sk-warning-base) 0.80 c h);
+  --color-sk-warning-40: oklch(from var(--sk-warning-base) 0.75 c h);
+  --color-sk-warning-50: var(--sk-warning-base);
+  --color-sk-warning-60: oklch(from var(--sk-warning-base) calc(l * 0.85) c h);
+  --color-sk-warning-70: oklch(from var(--sk-warning-base) calc(l * 0.70) c h);
+  --color-sk-warning-80: oklch(from var(--sk-warning-base) calc(l * 0.55) c h);
+  --color-sk-warning-90: oklch(from var(--sk-warning-base) calc(l * 0.40) c h);
+  --color-sk-warning-95: oklch(from var(--sk-warning-base) calc(l * 0.25) c h);
+  /* Danger */
+  --color-sk-danger: var(--sk-danger-base);
+  --color-sk-danger-text: var(--sk-danger-text);
+  --color-sk-danger-5: oklch(from var(--sk-danger-base) 0.95 c h);
+  --color-sk-danger-10: oklch(from var(--sk-danger-base) 0.90 c h);
+  --color-sk-danger-20: oklch(from var(--sk-danger-base) 0.85 c h);
+  --color-sk-danger-30: oklch(from var(--sk-danger-base) 0.80 c h);
+  --color-sk-danger-40: oklch(from var(--sk-danger-base) 0.75 c h);
+  --color-sk-danger-50: var(--sk-danger-base);
+  --color-sk-danger-60: oklch(from var(--sk-danger-base) calc(l * 0.85) c h);
+  --color-sk-danger-70: oklch(from var(--sk-danger-base) calc(l * 0.70) c h);
+  --color-sk-danger-80: oklch(from var(--sk-danger-base) calc(l * 0.55) c h);
+  --color-sk-danger-90: oklch(from var(--sk-danger-base) calc(l * 0.40) c h);
+  --color-sk-danger-95: oklch(from var(--sk-danger-base) calc(l * 0.25) c h);
+  /* Color Palette - Gray */
+  --color-sk-gray-5: var(--sk-color-gray-05);
+  --color-sk-gray-10: var(--sk-color-gray-10);
+  --color-sk-gray-20: var(--sk-color-gray-20);
+  --color-sk-gray-30: var(--sk-color-gray-30);
+  --color-sk-gray-40: var(--sk-color-gray-40);
+  --color-sk-gray-50: var(--sk-color-gray-50);
+  --color-sk-gray-60: var(--sk-color-gray-60);
+  --color-sk-gray-70: var(--sk-color-gray-70);
+  --color-sk-gray-80: var(--sk-color-gray-80);
+  --color-sk-gray-90: var(--sk-color-gray-90);
+  --color-sk-gray-95: var(--sk-color-gray-95);
+  /* Color Palette - Blue */
+  --color-sk-blue-5: var(--sk-color-blue-05);
+  --color-sk-blue-10: var(--sk-color-blue-10);
+  --color-sk-blue-20: var(--sk-color-blue-20);
+  --color-sk-blue-30: var(--sk-color-blue-30);
+  --color-sk-blue-40: var(--sk-color-blue-40);
+  --color-sk-blue-50: var(--sk-color-blue-50);
+  --color-sk-blue-60: var(--sk-color-blue-60);
+  --color-sk-blue-70: var(--sk-color-blue-70);
+  --color-sk-blue-80: var(--sk-color-blue-80);
+  --color-sk-blue-90: var(--sk-color-blue-90);
+  --color-sk-blue-95: var(--sk-color-blue-95);
+  /* Color Palette - Red */
+  --color-sk-red-5: var(--sk-color-red-05);
+  --color-sk-red-10: var(--sk-color-red-10);
+  --color-sk-red-20: var(--sk-color-red-20);
+  --color-sk-red-30: var(--sk-color-red-30);
+  --color-sk-red-40: var(--sk-color-red-40);
+  --color-sk-red-50: var(--sk-color-red-50);
+  --color-sk-red-60: var(--sk-color-red-60);
+  --color-sk-red-70: var(--sk-color-red-70);
+  --color-sk-red-80: var(--sk-color-red-80);
+  --color-sk-red-90: var(--sk-color-red-90);
+  --color-sk-red-95: var(--sk-color-red-95);
+  /* Color Palette - Orange */
+  --color-sk-orange-5: var(--sk-color-orange-05);
+  --color-sk-orange-10: var(--sk-color-orange-10);
+  --color-sk-orange-20: var(--sk-color-orange-20);
+  --color-sk-orange-30: var(--sk-color-orange-30);
+  --color-sk-orange-40: var(--sk-color-orange-40);
+  --color-sk-orange-50: var(--sk-color-orange-50);
+  --color-sk-orange-60: var(--sk-color-orange-60);
+  --color-sk-orange-70: var(--sk-color-orange-70);
+  --color-sk-orange-80: var(--sk-color-orange-80);
+  --color-sk-orange-90: var(--sk-color-orange-90);
+  --color-sk-orange-95: var(--sk-color-orange-95);
+  /* Color Palette - Yellow */
+  --color-sk-yellow-5: var(--sk-color-yellow-05);
+  --color-sk-yellow-10: var(--sk-color-yellow-10);
+  --color-sk-yellow-20: var(--sk-color-yellow-20);
+  --color-sk-yellow-30: var(--sk-color-yellow-30);
+  --color-sk-yellow-40: var(--sk-color-yellow-40);
+  --color-sk-yellow-50: var(--sk-color-yellow-50);
+  --color-sk-yellow-60: var(--sk-color-yellow-60);
+  --color-sk-yellow-70: var(--sk-color-yellow-70);
+  --color-sk-yellow-80: var(--sk-color-yellow-80);
+  --color-sk-yellow-90: var(--sk-color-yellow-90);
+  --color-sk-yellow-95: var(--sk-color-yellow-95);
+  /* Color Palette - Green */
+  --color-sk-green-5: var(--sk-color-green-05);
+  --color-sk-green-10: var(--sk-color-green-10);
+  --color-sk-green-20: var(--sk-color-green-20);
+  --color-sk-green-30: var(--sk-color-green-30);
+  --color-sk-green-40: var(--sk-color-green-40);
+  --color-sk-green-50: var(--sk-color-green-50);
+  --color-sk-green-60: var(--sk-color-green-60);
+  --color-sk-green-70: var(--sk-color-green-70);
+  --color-sk-green-80: var(--sk-color-green-80);
+  --color-sk-green-90: var(--sk-color-green-90);
+  --color-sk-green-95: var(--sk-color-green-95);
+  /* Color Palette - Mint */
+  --color-sk-mint-5: var(--sk-color-mint-05);
+  --color-sk-mint-10: var(--sk-color-mint-10);
+  --color-sk-mint-20: var(--sk-color-mint-20);
+  --color-sk-mint-30: var(--sk-color-mint-30);
+  --color-sk-mint-40: var(--sk-color-mint-40);
+  --color-sk-mint-50: var(--sk-color-mint-50);
+  --color-sk-mint-60: var(--sk-color-mint-60);
+  --color-sk-mint-70: var(--sk-color-mint-70);
+  --color-sk-mint-80: var(--sk-color-mint-80);
+  --color-sk-mint-90: var(--sk-color-mint-90);
+  --color-sk-mint-95: var(--sk-color-mint-95);
+  /* Color Palette - Cyan */
+  --color-sk-cyan-5: var(--sk-color-cyan-05);
+  --color-sk-cyan-10: var(--sk-color-cyan-10);
+  --color-sk-cyan-20: var(--sk-color-cyan-20);
+  --color-sk-cyan-30: var(--sk-color-cyan-30);
+  --color-sk-cyan-40: var(--sk-color-cyan-40);
+  --color-sk-cyan-50: var(--sk-color-cyan-50);
+  --color-sk-cyan-60: var(--sk-color-cyan-60);
+  --color-sk-cyan-70: var(--sk-color-cyan-70);
+  --color-sk-cyan-80: var(--sk-color-cyan-80);
+  --color-sk-cyan-90: var(--sk-color-cyan-90);
+  --color-sk-cyan-95: var(--sk-color-cyan-95);
+  /* Color Palette - Purple */
+  --color-sk-purple-5: var(--sk-color-purple-05);
+  --color-sk-purple-10: var(--sk-color-purple-10);
+  --color-sk-purple-20: var(--sk-color-purple-20);
+  --color-sk-purple-30: var(--sk-color-purple-30);
+  --color-sk-purple-40: var(--sk-color-purple-40);
+  --color-sk-purple-50: var(--sk-color-purple-50);
+  --color-sk-purple-60: var(--sk-color-purple-60);
+  --color-sk-purple-70: var(--sk-color-purple-70);
+  --color-sk-purple-80: var(--sk-color-purple-80);
+  --color-sk-purple-90: var(--sk-color-purple-90);
+  --color-sk-purple-95: var(--sk-color-purple-95);
+  /* Color Palette - Pink */
+  --color-sk-pink-5: var(--sk-color-pink-05);
+  --color-sk-pink-10: var(--sk-color-pink-10);
+  --color-sk-pink-20: var(--sk-color-pink-20);
+  --color-sk-pink-30: var(--sk-color-pink-30);
+  --color-sk-pink-40: var(--sk-color-pink-40);
+  --color-sk-pink-50: var(--sk-color-pink-50);
+  --color-sk-pink-60: var(--sk-color-pink-60);
+  --color-sk-pink-70: var(--sk-color-pink-70);
+  --color-sk-pink-80: var(--sk-color-pink-80);
+  --color-sk-pink-90: var(--sk-color-pink-90);
+  --color-sk-pink-95: var(--sk-color-pink-95);
+}

package/dist/tokens.css

@@ -1148,226 +1148,3 @@
       var(--sk-color-gray-95) 20%
   );
 }
-
-@theme inline {
-  /* Semantic Colors (theme-aware - change based on SkTheme) */
-  /* Each semantic color gets a full shade range using oklch lightness modifications */
-  /* Neutral */
-  --color-sk-neutral: var(--sk-neutral-base);
-  --color-sk-neutral-text: var(--sk-neutral-text);
-  --color-sk-neutral-5: oklch(from var(--sk-neutral-base) 0.95 c h);
-  --color-sk-neutral-10: oklch(from var(--sk-neutral-base) 0.90 c h);
-  --color-sk-neutral-20: oklch(from var(--sk-neutral-base) 0.85 c h);
-  --color-sk-neutral-30: oklch(from var(--sk-neutral-base) 0.80 c h);
-  --color-sk-neutral-40: oklch(from var(--sk-neutral-base) 0.75 c h);
-  --color-sk-neutral-50: var(--sk-neutral-base);
-  --color-sk-neutral-60: oklch(from var(--sk-neutral-base) calc(l * 0.85) c h);
-  --color-sk-neutral-70: oklch(from var(--sk-neutral-base) calc(l * 0.70) c h);
-  --color-sk-neutral-80: oklch(from var(--sk-neutral-base) calc(l * 0.55) c h);
-  --color-sk-neutral-90: oklch(from var(--sk-neutral-base) calc(l * 0.40) c h);
-  --color-sk-neutral-95: oklch(from var(--sk-neutral-base) calc(l * 0.25) c h);
-  /* Primary */
-  --color-sk-primary: var(--sk-primary-base);
-  --color-sk-primary-text: var(--sk-primary-text);
-  --color-sk-primary-5: oklch(from var(--sk-primary-base) 0.95 c h);
-  --color-sk-primary-10: oklch(from var(--sk-primary-base) 0.90 c h);
-  --color-sk-primary-20: oklch(from var(--sk-primary-base) 0.85 c h);
-  --color-sk-primary-30: oklch(from var(--sk-primary-base) 0.80 c h);
-  --color-sk-primary-40: oklch(from var(--sk-primary-base) 0.75 c h);
-  --color-sk-primary-50: var(--sk-primary-base);
-  --color-sk-primary-60: oklch(from var(--sk-primary-base) calc(l * 0.85) c h);
-  --color-sk-primary-70: oklch(from var(--sk-primary-base) calc(l * 0.70) c h);
-  --color-sk-primary-80: oklch(from var(--sk-primary-base) calc(l * 0.55) c h);
-  --color-sk-primary-90: oklch(from var(--sk-primary-base) calc(l * 0.40) c h);
-  --color-sk-primary-95: oklch(from var(--sk-primary-base) calc(l * 0.25) c h);
-  /* Accent */
-  --color-sk-accent: var(--sk-accent-base);
-  --color-sk-accent-text: var(--sk-accent-text);
-  --color-sk-accent-5: oklch(from var(--sk-accent-base) 0.95 c h);
-  --color-sk-accent-10: oklch(from var(--sk-accent-base) 0.90 c h);
-  --color-sk-accent-20: oklch(from var(--sk-accent-base) 0.85 c h);
-  --color-sk-accent-30: oklch(from var(--sk-accent-base) 0.80 c h);
-  --color-sk-accent-40: oklch(from var(--sk-accent-base) 0.75 c h);
-  --color-sk-accent-50: var(--sk-accent-base);
-  --color-sk-accent-60: oklch(from var(--sk-accent-base) calc(l * 0.85) c h);
-  --color-sk-accent-70: oklch(from var(--sk-accent-base) calc(l * 0.70) c h);
-  --color-sk-accent-80: oklch(from var(--sk-accent-base) calc(l * 0.55) c h);
-  --color-sk-accent-90: oklch(from var(--sk-accent-base) calc(l * 0.40) c h);
-  --color-sk-accent-95: oklch(from var(--sk-accent-base) calc(l * 0.25) c h);
-  /* Info */
-  --color-sk-info: var(--sk-info-base);
-  --color-sk-info-text: var(--sk-info-text);
-  --color-sk-info-5: oklch(from var(--sk-info-base) 0.95 c h);
-  --color-sk-info-10: oklch(from var(--sk-info-base) 0.90 c h);
-  --color-sk-info-20: oklch(from var(--sk-info-base) 0.85 c h);
-  --color-sk-info-30: oklch(from var(--sk-info-base) 0.80 c h);
-  --color-sk-info-40: oklch(from var(--sk-info-base) 0.75 c h);
-  --color-sk-info-50: var(--sk-info-base);
-  --color-sk-info-60: oklch(from var(--sk-info-base) calc(l * 0.85) c h);
-  --color-sk-info-70: oklch(from var(--sk-info-base) calc(l * 0.70) c h);
-  --color-sk-info-80: oklch(from var(--sk-info-base) calc(l * 0.55) c h);
-  --color-sk-info-90: oklch(from var(--sk-info-base) calc(l * 0.40) c h);
-  --color-sk-info-95: oklch(from var(--sk-info-base) calc(l * 0.25) c h);
-  /* Success */
-  --color-sk-success: var(--sk-success-base);
-  --color-sk-success-text: var(--sk-success-text);
-  --color-sk-success-5: oklch(from var(--sk-success-base) 0.95 c h);
-  --color-sk-success-10: oklch(from var(--sk-success-base) 0.90 c h);
-  --color-sk-success-20: oklch(from var(--sk-success-base) 0.85 c h);
-  --color-sk-success-30: oklch(from var(--sk-success-base) 0.80 c h);
-  --color-sk-success-40: oklch(from var(--sk-success-base) 0.75 c h);
-  --color-sk-success-50: var(--sk-success-base);
-  --color-sk-success-60: oklch(from var(--sk-success-base) calc(l * 0.85) c h);
-  --color-sk-success-70: oklch(from var(--sk-success-base) calc(l * 0.70) c h);
-  --color-sk-success-80: oklch(from var(--sk-success-base) calc(l * 0.55) c h);
-  --color-sk-success-90: oklch(from var(--sk-success-base) calc(l * 0.40) c h);
-  --color-sk-success-95: oklch(from var(--sk-success-base) calc(l * 0.25) c h);
-  /* Warning */
-  --color-sk-warning: var(--sk-warning-base);
-  --color-sk-warning-text: var(--sk-warning-text);
-  --color-sk-warning-5: oklch(from var(--sk-warning-base) 0.95 c h);
-  --color-sk-warning-10: oklch(from var(--sk-warning-base) 0.90 c h);
-  --color-sk-warning-20: oklch(from var(--sk-warning-base) 0.85 c h);
-  --color-sk-warning-30: oklch(from var(--sk-warning-base) 0.80 c h);
-  --color-sk-warning-40: oklch(from var(--sk-warning-base) 0.75 c h);
-  --color-sk-warning-50: var(--sk-warning-base);
-  --color-sk-warning-60: oklch(from var(--sk-warning-base) calc(l * 0.85) c h);
-  --color-sk-warning-70: oklch(from var(--sk-warning-base) calc(l * 0.70) c h);
-  --color-sk-warning-80: oklch(from var(--sk-warning-base) calc(l * 0.55) c h);
-  --color-sk-warning-90: oklch(from var(--sk-warning-base) calc(l * 0.40) c h);
-  --color-sk-warning-95: oklch(from var(--sk-warning-base) calc(l * 0.25) c h);
-  /* Danger */
-  --color-sk-danger: var(--sk-danger-base);
-  --color-sk-danger-text: var(--sk-danger-text);
-  --color-sk-danger-5: oklch(from var(--sk-danger-base) 0.95 c h);
-  --color-sk-danger-10: oklch(from var(--sk-danger-base) 0.90 c h);
-  --color-sk-danger-20: oklch(from var(--sk-danger-base) 0.85 c h);
-  --color-sk-danger-30: oklch(from var(--sk-danger-base) 0.80 c h);
-  --color-sk-danger-40: oklch(from var(--sk-danger-base) 0.75 c h);
-  --color-sk-danger-50: var(--sk-danger-base);
-  --color-sk-danger-60: oklch(from var(--sk-danger-base) calc(l * 0.85) c h);
-  --color-sk-danger-70: oklch(from var(--sk-danger-base) calc(l * 0.70) c h);
-  --color-sk-danger-80: oklch(from var(--sk-danger-base) calc(l * 0.55) c h);
-  --color-sk-danger-90: oklch(from var(--sk-danger-base) calc(l * 0.40) c h);
-  --color-sk-danger-95: oklch(from var(--sk-danger-base) calc(l * 0.25) c h);
-  /* Color Palette - Gray */
-  --color-sk-gray-5: var(--sk-color-gray-05);
-  --color-sk-gray-10: var(--sk-color-gray-10);
-  --color-sk-gray-20: var(--sk-color-gray-20);
-  --color-sk-gray-30: var(--sk-color-gray-30);
-  --color-sk-gray-40: var(--sk-color-gray-40);
-  --color-sk-gray-50: var(--sk-color-gray-50);
-  --color-sk-gray-60: var(--sk-color-gray-60);
-  --color-sk-gray-70: var(--sk-color-gray-70);
-  --color-sk-gray-80: var(--sk-color-gray-80);
-  --color-sk-gray-90: var(--sk-color-gray-90);
-  --color-sk-gray-95: var(--sk-color-gray-95);
-  /* Color Palette - Blue */
-  --color-sk-blue-5: var(--sk-color-blue-05);
-  --color-sk-blue-10: var(--sk-color-blue-10);
-  --color-sk-blue-20: var(--sk-color-blue-20);
-  --color-sk-blue-30: var(--sk-color-blue-30);
-  --color-sk-blue-40: var(--sk-color-blue-40);
-  --color-sk-blue-50: var(--sk-color-blue-50);
-  --color-sk-blue-60: var(--sk-color-blue-60);
-  --color-sk-blue-70: var(--sk-color-blue-70);
-  --color-sk-blue-80: var(--sk-color-blue-80);
-  --color-sk-blue-90: var(--sk-color-blue-90);
-  --color-sk-blue-95: var(--sk-color-blue-95);
-  /* Color Palette - Red */
-  --color-sk-red-5: var(--sk-color-red-05);
-  --color-sk-red-10: var(--sk-color-red-10);
-  --color-sk-red-20: var(--sk-color-red-20);
-  --color-sk-red-30: var(--sk-color-red-30);
-  --color-sk-red-40: var(--sk-color-red-40);
-  --color-sk-red-50: var(--sk-color-red-50);
-  --color-sk-red-60: var(--sk-color-red-60);
-  --color-sk-red-70: var(--sk-color-red-70);
-  --color-sk-red-80: var(--sk-color-red-80);
-  --color-sk-red-90: var(--sk-color-red-90);
-  --color-sk-red-95: var(--sk-color-red-95);
-  /* Color Palette - Orange */
-  --color-sk-orange-5: var(--sk-color-orange-05);
-  --color-sk-orange-10: var(--sk-color-orange-10);
-  --color-sk-orange-20: var(--sk-color-orange-20);
-  --color-sk-orange-30: var(--sk-color-orange-30);
-  --color-sk-orange-40: var(--sk-color-orange-40);
-  --color-sk-orange-50: var(--sk-color-orange-50);
-  --color-sk-orange-60: var(--sk-color-orange-60);
-  --color-sk-orange-70: var(--sk-color-orange-70);
-  --color-sk-orange-80: var(--sk-color-orange-80);
-  --color-sk-orange-90: var(--sk-color-orange-90);
-  --color-sk-orange-95: var(--sk-color-orange-95);
-  /* Color Palette - Yellow */
-  --color-sk-yellow-5: var(--sk-color-yellow-05);
-  --color-sk-yellow-10: var(--sk-color-yellow-10);
-  --color-sk-yellow-20: var(--sk-color-yellow-20);
-  --color-sk-yellow-30: var(--sk-color-yellow-30);
-  --color-sk-yellow-40: var(--sk-color-yellow-40);
-  --color-sk-yellow-50: var(--sk-color-yellow-50);
-  --color-sk-yellow-60: var(--sk-color-yellow-60);
-  --color-sk-yellow-70: var(--sk-color-yellow-70);
-  --color-sk-yellow-80: var(--sk-color-yellow-80);
-  --color-sk-yellow-90: var(--sk-color-yellow-90);
-  --color-sk-yellow-95: var(--sk-color-yellow-95);
-  /* Color Palette - Green */
-  --color-sk-green-5: var(--sk-color-green-05);
-  --color-sk-green-10: var(--sk-color-green-10);
-  --color-sk-green-20: var(--sk-color-green-20);
-  --color-sk-green-30: var(--sk-color-green-30);
-  --color-sk-green-40: var(--sk-color-green-40);
-  --color-sk-green-50: var(--sk-color-green-50);
-  --color-sk-green-60: var(--sk-color-green-60);
-  --color-sk-green-70: var(--sk-color-green-70);
-  --color-sk-green-80: var(--sk-color-green-80);
-  --color-sk-green-90: var(--sk-color-green-90);
-  --color-sk-green-95: var(--sk-color-green-95);
-  /* Color Palette - Mint */
-  --color-sk-mint-5: var(--sk-color-mint-05);
-  --color-sk-mint-10: var(--sk-color-mint-10);
-  --color-sk-mint-20: var(--sk-color-mint-20);
-  --color-sk-mint-30: var(--sk-color-mint-30);
-  --color-sk-mint-40: var(--sk-color-mint-40);
-  --color-sk-mint-50: var(--sk-color-mint-50);
-  --color-sk-mint-60: var(--sk-color-mint-60);
-  --color-sk-mint-70: var(--sk-color-mint-70);
-  --color-sk-mint-80: var(--sk-color-mint-80);
-  --color-sk-mint-90: var(--sk-color-mint-90);
-  --color-sk-mint-95: var(--sk-color-mint-95);
-  /* Color Palette - Cyan */
-  --color-sk-cyan-5: var(--sk-color-cyan-05);
-  --color-sk-cyan-10: var(--sk-color-cyan-10);
-  --color-sk-cyan-20: var(--sk-color-cyan-20);
-  --color-sk-cyan-30: var(--sk-color-cyan-30);
-  --color-sk-cyan-40: var(--sk-color-cyan-40);
-  --color-sk-cyan-50: var(--sk-color-cyan-50);
-  --color-sk-cyan-60: var(--sk-color-cyan-60);
-  --color-sk-cyan-70: var(--sk-color-cyan-70);
-  --color-sk-cyan-80: var(--sk-color-cyan-80);
-  --color-sk-cyan-90: var(--sk-color-cyan-90);
-  --color-sk-cyan-95: var(--sk-color-cyan-95);
-  /* Color Palette - Purple */
-  --color-sk-purple-5: var(--sk-color-purple-05);
-  --color-sk-purple-10: var(--sk-color-purple-10);
-  --color-sk-purple-20: var(--sk-color-purple-20);
-  --color-sk-purple-30: var(--sk-color-purple-30);
-  --color-sk-purple-40: var(--sk-color-purple-40);
-  --color-sk-purple-50: var(--sk-color-purple-50);
-  --color-sk-purple-60: var(--sk-color-purple-60);
-  --color-sk-purple-70: var(--sk-color-purple-70);
-  --color-sk-purple-80: var(--sk-color-purple-80);
-  --color-sk-purple-90: var(--sk-color-purple-90);
-  --color-sk-purple-95: var(--sk-color-purple-95);
-  /* Color Palette - Pink */
-  --color-sk-pink-5: var(--sk-color-pink-05);
-  --color-sk-pink-10: var(--sk-color-pink-10);
-  --color-sk-pink-20: var(--sk-color-pink-20);
-  --color-sk-pink-30: var(--sk-color-pink-30);
-  --color-sk-pink-40: var(--sk-color-pink-40);
-  --color-sk-pink-50: var(--sk-color-pink-50);
-  --color-sk-pink-60: var(--sk-color-pink-60);
-  --color-sk-pink-70: var(--sk-color-pink-70);
-  --color-sk-pink-80: var(--sk-color-pink-80);
-  --color-sk-pink-90: var(--sk-color-pink-90);
-  --color-sk-pink-95: var(--sk-color-pink-95);
-}

package/dist/types/corners.d.ts

@@ -0,0 +1 @@
+export type SkCorner = 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';

package/dist/utils/slots.d.ts

@@ -0,0 +1,6 @@
+import { VNode } from 'vue';
+type SlotLike = (...args: any[]) => unknown;
+export declare function hasRenderableContent(vnodes: VNode[]): boolean;
+export declare function hasSlotContent(slot: SlotLike | undefined, props?: Record<string, unknown>): boolean;
+export declare function filterRenderableVNodes(vnodes: VNode[]): VNode[];
+export {};

package/llms-full.txt

@@ -4909,13 +4909,13 @@ When provided, this overrides the color from the `kind` prop. |
 | type | "button" \| "submit" \| "reset" | 'button' | false | The HTML `type` attribute for the button element. Only applies when rendering as a `<button>`
 (i.e., when neither `href` nor `to` props are provided). Use 'submit' for form submission
 buttons and 'reset' for form reset buttons. |
-| kind | "neutral" \| "primary" \| "accent" \| "danger" \| "info" \| "success" \| "warning" \| "boulder" \| "neon-blue" \| "light-blue" \| "neon-orange" \| "neon-purple" \| "neon-green" \| "neon-mint" \| "neon-pink" \| "yellow" \| "red" | 'neutral' | false | Semantic color kind that controls the button's color scheme. Semantic kinds (neutral, primary,
+| kind | "neutral" \| "primary" \| "accent" \| "danger" \| "info" \| "success" \| "warning" \| "boulder" \| "neon-blue" \| "light-blue" \| "neon-orange" \| "neon-purple" \| "neon-green" \| "neon-mint" \| "neon-pink" \| "yellow" \| "red" | undefined | false | Semantic color kind that controls the button's color scheme. Semantic kinds (neutral, primary,
 accent, etc.) adapt to your theme colors, while color kinds (neon-blue, neon-purple, etc.)
 provide fixed branding colors that remain consistent across themes. |
 | variant | "solid" \| "outline" \| "subtle" \| "ghost" \| "link" | 'solid' | false | Visual variant that determines the button's styling approach. 'solid' provides a filled
 background, 'outline' shows a bordered button with transparent background, and 'ghost'
 renders a minimal button with no background or border until hovered. |
-| size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | 'md' | false | Button size controlling padding, font size, and overall dimensions. Available sizes:
+| size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | undefined | false | Button size controlling padding, font size, and overall dimensions. Available sizes:
 'sm' (small, compact), 'md' (medium, default), 'lg' (large), 'xl' (extra large).
 Icon-only buttons automatically adjust to square proportions at each size. |
 | disabled | boolean | false | false | When true, disables the button preventing all user interaction. The button appears with
@@ -4930,6 +4930,8 @@ the value for toolbar buttons or toggle switches. |
 | dense | boolean | false | false | Opts out of the coarse-pointer touch-target floor (44px minimum on touch devices).
 Use for tight toolbars, data tables, or other contexts where a compact size is preferable
 to the default touch-friendly floor. On fine-pointer devices (mouse) this has no effect. |
+| corners | ("top-left" \| "top-right" \| "bottom-right" \| "bottom-left")[] | undefined | false | Which corners receive the beveled cut. Pass an empty array for square corners.
+When omitted, defaults to the button's standalone visual (`top-left` + `bottom-right`). |
 | href | string | undefined | false | URL for the button to navigate to. When provided, the button renders as an `<a>` element
 instead of a `<button>`. Use for external links or simple navigation that doesn't require
 Vue Router. |
@@ -5796,10 +5798,10 @@ custom IDs when you need to reference the input from elsewhere in your code. |
 `validKind` (default: 'success'), `false` applies the `invalidKind` (default: 'danger'),
 and `null`/`undefined` lets the input use its own kind prop. Child inputs automatically
 inherit this via provide/inject. |
-| validKind | string | 'success' | false | Semantic kind to apply to the child input when `state` is `true` (valid). Typically
+| validKind | "neutral" \| "primary" \| "accent" \| "danger" \| "info" \| "success" \| "warning" \| "boulder" \| "neon-blue" \| "light-blue" \| "neon-orange" \| "neon-purple" \| "neon-green" \| "neon-mint" \| "neon-pink" \| "yellow" \| "red" | 'success' | false | Semantic kind to apply to the child input when `state` is `true` (valid). Typically
 'success' for green styling indicating valid input. The kind is provided to child
 inputs via Vue's provide/inject system. |
-| invalidKind | string | 'danger' | false | Semantic kind to apply to the child input when `state` is `false` (invalid). Typically
+| invalidKind | "neutral" \| "primary" \| "accent" \| "danger" \| "info" \| "success" \| "warning" \| "boulder" \| "neon-blue" \| "light-blue" \| "neon-orange" \| "neon-purple" \| "neon-green" \| "neon-mint" \| "neon-pink" \| "yellow" \| "red" | 'danger' | false | Semantic kind to apply to the child input when `state` is `false` (invalid). Typically
 'danger' for red styling indicating validation errors. The kind is provided to child
 inputs via Vue's provide/inject system. |
 
@@ -5980,8 +5982,10 @@ Note: For numeric inputs with stepper buttons, consider using SkNumberInput inst
 | kind | "neutral" \| "primary" \| "accent" \| "danger" \| "info" \| "success" \| "warning" \| "boulder" \| "neon-blue" \| "light-blue" \| "neon-orange" \| "neon-purple" \| "neon-green" \| "neon-mint" \| "neon-pink" \| "yellow" \| "red" | undefined | false | Semantic color kind for the input border and focus ring. Use semantic kinds like 'success'
 or 'danger' to indicate validation states. When used inside an SkField with a `state` prop,
 the field's kind automatically overrides this value. |
-| size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | 'md' | false | Input size controlling height, padding, and font size. Available sizes: 'sm' (small,
+| size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | undefined | false | Input size controlling height, padding, and font size. Available sizes: 'sm' (small,
 compact forms), 'md' (medium, default), 'lg' (large), 'xl' (extra large, prominent inputs). |
+| corners | ("top-left" \| "top-right" \| "bottom-right" \| "bottom-left")[] | undefined | false | Which corners receive the beveled cut. Pass an empty array for square corners.
+When omitted, defaults to the input's standalone visual (`top-right` only). |
 | placeholder | string | undefined | false | Placeholder text displayed when the input is empty. Use to provide hints about expected
 input format or example values. The placeholder disappears when the user begins typing. |
 | disabled | boolean | false | false | When true, disables the input preventing all user interaction. The input appears with
@@ -6202,7 +6206,7 @@ When provided, this overrides the color from the `kind` prop. |
 | kind | "neutral" \| "primary" \| "accent" \| "danger" \| "info" \| "success" \| "warning" \| "boulder" \| "neon-blue" \| "light-blue" \| "neon-orange" \| "neon-purple" \| "neon-green" \| "neon-mint" \| "neon-pink" \| "yellow" \| "red" | undefined | false | Semantic color kind that controls the input border, focus ring, and selected
 item highlight appearance. When used inside SkField, inherits the field's
 kind if not explicitly set. |
-| size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | 'md' | false | Size of the input field and dropdown content. Controls the input height,
+| size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | undefined | false | Size of the input field and dropdown content. Controls the input height,
 text size, and option item dimensions. Available sizes: 'sm' (small),
 'md' (medium), 'lg' (large). |
 | placeholder | string | 'Search...' | false | Placeholder text displayed in the input field when no option is selected
@@ -6842,7 +6846,7 @@ When provided, this overrides the color from the `kind` prop. |
 | kind | "neutral" \| "primary" \| "accent" \| "danger" \| "info" \| "success" \| "warning" \| "boulder" \| "neon-blue" \| "light-blue" \| "neon-orange" \| "neon-purple" \| "neon-green" \| "neon-mint" \| "neon-pink" \| "yellow" \| "red" | undefined | false | Semantic color kind for the input border and focus ring. Use semantic kinds like
 'success' or 'danger' to indicate validation states. When used inside an SkField
 with a `state` prop, the field's kind automatically overrides this value. |
-| size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | 'md' | false | Input size controlling height, padding, font size, and stepper button dimensions.
+| size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | undefined | false | Input size controlling height, padding, font size, and stepper button dimensions.
 Available sizes: 'sm' (small, compact forms), 'md' (medium, default), 'lg' (large),
 'xl' (extra large). |
 | placeholder | string | undefined | false | Placeholder text displayed when the input is empty or has no value. Use to indicate
@@ -6867,6 +6871,10 @@ or inventory caps. |
 | step | number | 1 | false | The increment/decrement step amount when using stepper buttons or arrow keys. Use
 fractional values like 0.01 for currency or 0.1 for percentages. Pressing Shift while
 stepping may multiply the step for faster navigation. |
+| showSteppers | boolean | true | false | When true, renders the increment/decrement stepper buttons on the right side of the
+input. Set to false for a plain numeric text field (users can still use arrow keys
+and type values directly). |
+| corners | ("top-left" \| "top-right" \| "bottom-right" \| "bottom-left")[] | undefined | false | Which corners receive the beveled cut. Pass an empty array for square corners. |
 
 
 ---
@@ -9123,7 +9131,7 @@ When provided, this overrides the color from the `kind` prop. |
 | kind | "neutral" \| "primary" \| "accent" \| "danger" \| "info" \| "success" \| "warning" \| "boulder" \| "neon-blue" \| "light-blue" \| "neon-orange" \| "neon-purple" \| "neon-green" \| "neon-mint" \| "neon-pink" \| "yellow" \| "red" | undefined | false | Semantic color kind that controls the input border and focus ring appearance.
 Also sets the default color for tags unless overridden by `tagKind`. When used
 inside SkField, inherits the field's kind if not explicitly set. |
-| size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | 'md' | false | Size of the input field and tags. Controls the input height, tag size, and
+| size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | undefined | false | Size of the input field and tags. Controls the input height, tag size, and
 text sizing throughout the component. Available sizes: 'sm' (small),
 'md' (medium), 'lg' (large). |
 | placeholder | string | 'Add tag...' | false | Placeholder text displayed in the input field when no text is being typed.
@@ -9297,7 +9305,7 @@ When provided, this overrides the color from the `kind` prop. |
 | kind | "neutral" \| "primary" \| "accent" \| "danger" \| "info" \| "success" \| "warning" \| "boulder" \| "neon-blue" \| "light-blue" \| "neon-orange" \| "neon-purple" \| "neon-green" \| "neon-mint" \| "neon-pink" \| "yellow" \| "red" | undefined | false | Semantic color kind for the textarea border and focus ring. Use semantic kinds like
 'success' or 'danger' to indicate validation states. When used inside an SkField with
 a `state` prop, the field's kind automatically overrides this value. |
-| size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | 'md' | false | Textarea size controlling padding and font size. The height is primarily controlled
+| size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | undefined | false | Textarea size controlling padding and font size. The height is primarily controlled
 by the `rows` prop. Available sizes: 'sm' (small), 'md' (medium, default), 'lg' (large),
 'xl' (extra large). |
 | placeholder | string | undefined | false | Placeholder text displayed when the textarea is empty. Use to provide hints about

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skewedaspect/sleekspace-ui",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "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",
@@ -21,6 +21,7 @@
     "./styles/source": "./src/styles/index.scss",
     "./styles/mixins/responsive": "./src/styles/mixins/_responsive.scss",
     "./tokens.css": "./dist/tokens.css",
+    "./tailwind.css": "./dist/tailwind.css",
     "./static": {
       "types": "./dist/static/index.d.ts",
       "import": "./dist/static/index.es.js",
@@ -38,10 +39,15 @@
     "LICENSE"
   ],
   "scripts": {
-    "dev": "concurrently -n vite,tokens -c cyan,magenta \"vite build --watch\" \"sass --watch src/styles/tokens.scss dist/tokens.css --no-source-map\"",
-    "build": "npm run generate:static-types && npm run generate:web-types && vite build && npm run generate:types && npm run build:static && npm run build:tokens && npm run copy:docs && npm run generate:llms",
+    "dev": "concurrently -n vite,tokens,tailwind -c cyan,magenta,yellow \"npm run dev:vite\" \"npm run dev:tokens\" \"npm run dev:tailwind\"",
+    "dev:vite": "vite build --watch",
+    "dev:tokens": "sass --watch src/styles/tokens.scss dist/tokens.css --no-source-map",
+    "dev:tailwind": "sass --watch src/styles/tailwind.scss dist/tailwind.css --no-source-map",
+    "build": "npm run clean && npm run generate:static-types && npm run generate:web-types && vite build && npm run generate:types && npm run build:static && npm run build:tokens && npm run build:tailwind && npm run copy:docs && npm run generate:llms",
+    "clean": "rm -rf dist",
     "build:static": "vite build -c vite.static.config.ts",
     "build:tokens": "sass src/styles/tokens.scss dist/tokens.css --no-source-map",
+    "build:tailwind": "sass src/styles/tailwind.scss dist/tailwind.css --no-source-map",
     "copy:docs": "cp ../../Readme.md README.md && cp ../../LICENSE LICENSE",
     "generate:types": "tsx scripts/generate-global-types.ts",
     "generate:static-types": "node scripts/generate-static-types.ts",