@skewedaspect/sleekspace-ui 0.5.0 → 0.6.0

package/dist/components/Card/SkCard.vue.d.ts

@@ -1,6 +1,6 @@
 import { ComponentCustomColors } from '../../types';
 import { SkCardKind } from './types';
-import { SkPanelSize } from '../Panel/types';
+import { SkPanelCorner, SkPanelSize } from '../Panel/types';
 export interface SkCardComponentProps extends ComponentCustomColors {
     /**
      * Semantic color kind that controls the card's border color and decorative accent stripe.
@@ -56,6 +56,16 @@ export interface SkCardComponentProps extends ComponentCustomColors {
      * @default false
      */
     scrollable?: boolean;
+    /**
+     * Which corners receive the beveled cut. Passed through to the underlying SkPanel.
+     * @default ['bottom-right']
+     */
+    corners?: SkPanelCorner[];
+    /**
+     * Which corner displays the decorative accent stripe. Passed through to SkPanel.
+     * @default 'bottom-right'
+     */
+    decorationCorner?: SkPanelCorner;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -75,6 +85,8 @@ declare const __VLS_component: import('vue').DefineComponent<SkCardComponentProp
     title: string;
     showDecoration: boolean;
     noBorder: boolean;
+    corners: SkPanelCorner[];
+    decorationCorner: SkPanelCorner;
     noDecoration: boolean;
     headerColor: string;
     scrollable: boolean;

package/dist/components/Panel/SkPanel.vue.d.ts

@@ -1,5 +1,5 @@
 import { ComponentCustomColors } from '../../types';
-import { SkPanelKind, SkPanelSize } from './types';
+import { SkPanelCorner, SkPanelKind, SkPanelSize } from './types';
 export interface SkPanelComponentProps extends ComponentCustomColors {
     /**
      * Semantic color kind that controls the panel's border color and decorative accent stripe.
@@ -30,6 +30,18 @@ export interface SkPanelComponentProps extends ComponentCustomColors {
      * @default false
      */
     noBorder?: boolean;
+    /**
+     * Which corners receive the beveled cut. Any combination of the four corners can be
+     * specified. Pass an empty array for no cut corners.
+     * @default ['bottom-right']
+     */
+    corners?: SkPanelCorner[];
+    /**
+     * Which corner displays the decorative accent stripe. Must be one of the active
+     * `corners` for the decoration to be visible.
+     * @default 'bottom-right'
+     */
+    decorationCorner?: SkPanelCorner;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -45,6 +57,8 @@ declare const __VLS_component: import('vue').DefineComponent<SkPanelComponentPro
     size: SkPanelSize;
     showDecoration: boolean;
     noBorder: boolean;
+    corners: SkPanelCorner[];
+    decorationCorner: SkPanelCorner;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/components/Panel/types.d.ts

@@ -1,3 +1,4 @@
 import { ComponentKind } from '../../types';
 export type SkPanelKind = ComponentKind;
 export type SkPanelSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type SkPanelCorner = 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';

package/dist/components/Select/SkSelect.vue.d.ts

@@ -0,0 +1,61 @@
+import { ComponentCustomColors } from '../../types';
+import { SkSelectKind, SkSelectSize } from './types';
+export interface SkSelectComponentProps extends ComponentCustomColors {
+    /**
+     * Semantic color kind that controls the trigger border, focus ring, and selected
+     * item highlight appearance. When used inside SkField, inherits the field's
+     * kind if not explicitly set.
+     * @default 'neutral' (or inherited from parent SkField)
+     */
+    kind?: SkSelectKind;
+    /**
+     * Size of the trigger and dropdown content. Controls the trigger height,
+     * text size, and option item dimensions. Available sizes: 'sm' (small),
+     * 'md' (medium), 'lg' (large).
+     * @default 'md'
+     */
+    size?: SkSelectSize;
+    /**
+     * Placeholder text displayed in the trigger when no option is selected.
+     * Use to guide users on what type of selection to make.
+     * @default 'Select...'
+     */
+    placeholder?: string;
+    /**
+     * When true, the select is disabled and cannot be interacted with. The trigger
+     * is non-clickable and the dropdown cannot be opened. The component appears
+     * with reduced opacity and the cursor changes to not-allowed.
+     * @default false
+     */
+    disabled?: boolean;
+}
+type __VLS_Props = SkSelectComponentProps;
+type __VLS_PublicProps = {
+    modelValue?: string;
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    kind: SkSelectKind;
+    disabled: boolean;
+    size: SkSelectSize;
+    placeholder: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Select/SkSelectItem.vue.d.ts

@@ -0,0 +1,134 @@
+export interface SkSelectItemComponentProps {
+    /**
+     * The value this option represents. When selected, the parent SkSelect's v-model
+     * will be set to this value. Must be a string and unique within the select.
+     */
+    value: string;
+    /**
+     * When true, this option is disabled and cannot be selected. The item appears
+     * with reduced opacity and is skipped during keyboard navigation.
+     * @default false
+     */
+    disabled?: boolean;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {
+        textEl: ({
+            $: import('vue').ComponentInternalInstance;
+            $data: {};
+            $props: {
+                readonly asChild?: boolean | undefined;
+                readonly as?: (import('reka-ui').AsTag | import('vue').Component) | undefined;
+            } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+            $attrs: {
+                [x: string]: unknown;
+            };
+            $refs: {
+                [x: string]: unknown;
+            };
+            $slots: Readonly<{
+                [name: string]: import('vue').Slot<any> | undefined;
+            }>;
+            $root: import('vue').ComponentPublicInstance | null;
+            $parent: import('vue').ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: (event: string, ...args: any[]) => void;
+            $el: any;
+            $options: import('vue').ComponentOptionsBase<Readonly<import('reka-ui').SelectItemTextProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+                as: import('reka-ui').AsTag | import('vue').Component;
+            }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+                beforeCreate?: (() => void) | (() => void)[];
+                created?: (() => void) | (() => void)[];
+                beforeMount?: (() => void) | (() => void)[];
+                mounted?: (() => void) | (() => void)[];
+                beforeUpdate?: (() => void) | (() => void)[];
+                updated?: (() => void) | (() => void)[];
+                activated?: (() => void) | (() => void)[];
+                deactivated?: (() => void) | (() => void)[];
+                beforeDestroy?: (() => void) | (() => void)[];
+                beforeUnmount?: (() => void) | (() => void)[];
+                destroyed?: (() => void) | (() => void)[];
+                unmounted?: (() => void) | (() => void)[];
+                renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+            };
+            $forceUpdate: () => void;
+            $nextTick: typeof import('vue').nextTick;
+            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+        } & Readonly<{
+            as: import('reka-ui').AsTag | import('vue').Component;
+        }> & Omit<Readonly<import('reka-ui').SelectItemTextProps> & Readonly<{}>, "as"> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
+            $slots: {
+                default?: (props: {}) => any;
+            };
+        }) | null;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<SkSelectItemComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkSelectItemComponentProps> & Readonly<{}>, {
+    disabled: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    textEl: ({
+        $: import('vue').ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly asChild?: boolean | undefined;
+            readonly as?: (import('reka-ui').AsTag | import('vue').Component) | undefined;
+        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import('vue').Slot<any> | undefined;
+        }>;
+        $root: import('vue').ComponentPublicInstance | null;
+        $parent: import('vue').ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: import('vue').ComponentOptionsBase<Readonly<import('reka-ui').SelectItemTextProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+            as: import('reka-ui').AsTag | import('vue').Component;
+        }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import('vue').nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+    } & Readonly<{
+        as: import('reka-ui').AsTag | import('vue').Component;
+    }> & Omit<Readonly<import('reka-ui').SelectItemTextProps> & Readonly<{}>, "as"> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
+        $slots: {
+            default?: (props: {}) => any;
+        };
+    }) | null;
+}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Select/SkSelectSeparator.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/Select/index.d.ts

@@ -0,0 +1,4 @@
+export { default as SkSelect } from './SkSelect.vue';
+export { default as SkSelectItem } from './SkSelectItem.vue';
+export { default as SkSelectSeparator } from './SkSelectSeparator.vue';
+export type { SkSelectKind, SkSelectSize } from './types';

package/dist/components/Select/types.d.ts

@@ -0,0 +1,3 @@
+import { ComponentKind, ComponentSize } from '../../types';
+export type SkSelectKind = ComponentKind;
+export type SkSelectSize = ComponentSize;

package/dist/components/Sidebar/SkSidebar.vue.d.ts

@@ -1,4 +1,4 @@
-import { SkSidebarKind } from './types';
+import { SkSidebarKind, SkSidebarSide } from './types';
 import { ComponentCustomColors } from '../../types';
 export interface SkSidebarComponentProps extends ComponentCustomColors {
     /**
@@ -15,6 +15,12 @@ export interface SkSidebarComponentProps extends ComponentCustomColors {
      * @default '180px'
      */
     width?: string;
+    /**
+     * Which side of the layout the sidebar is placed on. Controls the direction of the
+     * panel bevel and the sidebar-item clip-path cuts so they mirror appropriately.
+     * @default 'left'
+     */
+    side?: SkSidebarSide;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -27,6 +33,7 @@ declare function __VLS_template(): {
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<SkSidebarComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkSidebarComponentProps> & Readonly<{}>, {
     kind: SkSidebarKind;
+    side: SkSidebarSide;
     width: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

package/dist/components/Sidebar/types.d.ts

@@ -1,2 +1,3 @@
 import { ComponentKind } from '../../types';
 export type SkSidebarKind = ComponentKind;
+export type SkSidebarSide = 'left' | 'right';

package/dist/components/Skeleton/SkSkeleton.vue.d.ts

@@ -47,9 +47,9 @@ export interface SkSkeletonComponentProps {
 declare const _default: import('vue').DefineComponent<SkSkeletonComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkSkeletonComponentProps> & Readonly<{}>, {
     bevel: string;
     variant: SkSkeletonVariant;
+    corners: SkSkeletonCorner[];
     width: string;
     height: string;
     animation: SkSkeletonAnimation;
-    corners: SkSkeletonCorner[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

package/dist/components/Theme/types.d.ts

@@ -1,9 +1,24 @@
+/**
+ * Registry of available theme names. Augment this interface to register custom themes:
+ *
+ * ```ts
+ * declare module '@skewedaspect/sleekspace-ui' {
+ *     interface SkThemeNameMap {
+ *         ocean : true;
+ *         midnight : true;
+ *     }
+ * }
+ * ```
+ */
+export interface SkThemeNameMap {
+    greyscale: true;
+    colorful: true;
+}
 /**
  * Available theme names that control the overall color scheme of the application.
- * - 'greyscale': A monochromatic theme with neutral grays and subtle accents
- * - 'colorful': A vibrant theme with saturated colors and stronger contrasts
+ * Derived from {@link SkThemeNameMap} — augment that interface to add custom themes.
  */
-export type SkThemeName = 'greyscale' | 'colorful';
+export type SkThemeName = keyof SkThemeNameMap;
 export interface SkThemeComponentProps {
     /**
      * The active theme name that controls the color scheme for all child components.

package/dist/index.d.ts

@@ -33,6 +33,9 @@ import { default as SkPopover, SkPopoverComponentProps } from './components/Popo
 import { default as SkProgress, SkProgressComponentProps } from './components/Progress/SkProgress.vue';
 import { default as SkRadio, SkRadioComponentProps } from './components/Radio/SkRadio.vue';
 import { default as SkRadioGroup, SkRadioGroupComponentProps } from './components/Radio/SkRadioGroup.vue';
+import { default as SkSelect, SkSelectComponentProps } from './components/Select/SkSelect.vue';
+import { default as SkSelectItem, SkSelectItemComponentProps } from './components/Select/SkSelectItem.vue';
+import { default as SkSelectSeparator } from './components/Select/SkSelectSeparator.vue';
 import { default as SkSidebar, SkSidebarComponentProps } from './components/Sidebar/SkSidebar.vue';
 import { default as SkSidebarItem, SkSidebarItemComponentProps } from './components/Sidebar/SkSidebarItem.vue';
 import { default as SkSidebarSection, SkSidebarSectionComponentProps } from './components/Sidebar/SkSidebarSection.vue';
@@ -77,6 +80,7 @@ export * from './components/Panel/types';
 export * from './components/Popover/types';
 export * from './components/Progress/types';
 export * from './components/Radio/types';
+export * from './components/Select/types';
 export * from './components/Sidebar/types';
 export * from './components/Skeleton/types';
 export * from './components/Slider/types';
@@ -125,6 +129,9 @@ export { SkPopover, type SkPopoverComponentProps };
 export { SkProgress, type SkProgressComponentProps };
 export { SkRadio, type SkRadioComponentProps };
 export { SkRadioGroup, type SkRadioGroupComponentProps };
+export { SkSelect, type SkSelectComponentProps };
+export { SkSelectItem, type SkSelectItemComponentProps };
+export { SkSelectSeparator };
 export { SkSidebar, type SkSidebarComponentProps };
 export { SkSidebarItem, type SkSidebarItemComponentProps };
 export { SkSidebarSection, type SkSidebarSectionComponentProps };