@construct-space/ui 0.3.1 → 0.3.3

package/README.md

@@ -1,6 +1,6 @@
 # @construct-space/ui
 
-Vue 3 component library for Construct services. 43 production components, shared layouts, composables, and design tokens.
+Vue 3 component library for Construct services. Shared components, layouts, composables, and design tokens for apps, infra surfaces, and spaces.
 
 ## Install
 
@@ -19,13 +19,15 @@ npm install vue reka-ui @iconify/vue
 ## Usage
 
 ```ts
-// Import components individually
-import { CButton, CInput, CModal, CToast } from '@construct-space/ui'
-
-// Import shared styles (tokens + utility classes)
+// Always import shared styles once in your app entry.
+// No extra Tailwind setup is required in the consumer.
 import '@construct-space/ui/style.css'
 
-// Or register all components globally
+// Import components individually
+import { Button, Input, Modal, Notification, SplitPane } from '@construct-space/ui'
+
+// Or register all components globally with a C prefix:
+// CButton, CInput, CModal, CNotification, ...
 import { createApp } from 'vue'
 import ConstructUI from '@construct-space/ui'
 
@@ -33,16 +35,47 @@ const app = createApp(App)
 app.use(ConstructUI)
 ```
 
+## Tabs And Groups
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Tabs, Tab, Group, Button } from '@construct-space/ui'
+
+const activeTab = ref('developer')
+</script>
+
+<template>
+  <Tabs v-model="activeTab" variant="segmented">
+    <Tab label="Developer" value="developer">
+      <Group gap="sm">
+        <Button label="Install CLI" />
+        <Button label="Run Dev" variant="soft" />
+      </Group>
+    </Tab>
+
+    <Tab label="Environment" value="environment">
+      Runtime checks go here.
+    </Tab>
+  </Tabs>
+</template>
+```
+
+`Tabs` supports both patterns:
+- `:items="[{ label, value }]"` plus named slots
+- Declarative `<Tab label="..." value="...">...</Tab>` children
+
 ## Components
 
 | Category | Components |
 |----------|-----------|
-| **Form** | `CButton`, `CInput`, `CTextarea`, `CSelect`, `CSelectMenu`, `CCheckbox`, `CRadioGroup`, `CSwitch`, `CSlider`, `CColorPicker`, `CFormField` |
-| **Layout** | `CCard`, `CModal`, `CDrawer`, `CSlideover`, `CPopover`, `CDashboardPanel`, `CPanelSection`, `CPropRow`, `CSeparator`, `CScrollArea` |
-| **Data** | `CTable`, `CCalendar`, `CTree`, `CTimeline`, `CPagination` |
-| **Feedback** | `CAlert`, `CBadge`, `CChip`, `CProgress`, `CSkeleton`, `CEmpty`, `CToast` |
-| **Menu** | `CDropdown`, `CDropdownMenu`, `CDropdownMenuItem`, `CContextMenu` |
-| **Display** | `CIcon`, `CAvatar`, `CAccordion`, `CTabs`, `CTooltip`, `CKbd` |
+| **Form** | `Button`, `Input`, `Textarea`, `Select`, `SelectMenu`, `Autocomplete`, `DatePicker`, `FileInput`, `MultiSelect`, `Checkbox`, `RadioGroup`, `Switch`, `Slider`, `ColorPicker`, `FormField`, `ToggleGroup` |
+| **Layout** | `Card`, `Modal`, `ConfirmationModal`, `Drawer`, `Slideover`, `Popover`, `DashboardPanel`, `PanelSection`, `PropRow`, `Separator`, `ScrollArea`, `SplitPane`, `Group` |
+| **Data** | `Table`, `Calendar`, `Tree`, `Timeline`, `Pagination` |
+| **Feedback** | `Alert`, `Badge`, `Chip`, `Progress`, `Skeleton`, `Empty`, `Notification` |
+| **Menu** | `Dropdown`, `DropdownMenu`, `DropdownMenuItem`, `ContextMenu`, `Tabs`, `Tab` |
+| **Display** | `Icon`, `Avatar`, `Accordion`, `Tooltip`, `Kbd`, `Breadcrumbs` |
+| **Shell** | `Sidebar3D`, `Toolbar3D`, `SidebarLayout`, `HeaderLayout` |
 
 ## Layouts
 
@@ -69,10 +102,10 @@ app.use(ConstructUI)
 ## Composables
 
 ```ts
-import { useToast, useAuth } from '@construct-space/ui'
+import { useNotification, useAuth } from '@construct-space/ui'
 
-// Toast notifications
-const { add, remove, clear } = useToast()
+// Notification state
+const { add, remove, clear } = useNotification()
 add({ title: 'Saved', color: 'success' })
 
 // Auth session management
@@ -82,6 +115,11 @@ const { user, login, logout, checkSession } = useAuth({
 })
 ```
 
+## Notes
+
+- Prefer `Notification` and `useNotification()`. They are the primary feedback API.
+- Import [`@construct-space/ui/style.css`](./dist/style.css) once per app. Components rely on that stylesheet for tokens and generated utility CSS.
+
 ## Theming
 
 Override CSS variables to customize colors per service:

package/dist/components/ConfirmationModal.vue.d.ts

@@ -0,0 +1,27 @@
+interface Props {
+    modelValue: boolean;
+    title?: string;
+    message: string;
+    details?: string;
+    confirmText?: string;
+    cancelText?: string;
+    confirmColor?: 'primary' | 'error' | 'success' | 'warning' | 'info';
+    loading?: boolean;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+    cancel: () => any;
+    confirm: () => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onCancel?: (() => any) | undefined;
+    onConfirm?: (() => any) | undefined;
+}>, {
+    details: string;
+    title: string;
+    loading: boolean;
+    confirmText: string;
+    cancelText: string;
+    confirmColor: "primary" | "error" | "success" | "warning" | "info";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/Group.vue.d.ts

@@ -0,0 +1,25 @@
+type __VLS_Props = {
+    gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg';
+    direction?: 'row' | 'column';
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    justify?: 'start' | 'center' | 'end' | 'between';
+    wrap?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    align: "start" | "center" | "end" | "stretch";
+    gap: "none" | "xs" | "sm" | "md" | "lg";
+    direction: "row" | "column";
+    justify: "start" | "center" | "end" | "between";
+    wrap: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/SplitPane.vue.d.ts

@@ -0,0 +1,27 @@
+type __VLS_Props = {
+    direction?: 'horizontal' | 'vertical';
+    initialSize?: number;
+    minSize?: number;
+    maxSize?: number;
+    minPaneSizePx?: number;
+};
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    first?: (props: typeof __VLS_1) => any;
+} & {
+    second?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    direction: "horizontal" | "vertical";
+    initialSize: number;
+    minSize: number;
+    maxSize: number;
+    minPaneSizePx: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Tab.vue.d.ts

@@ -0,0 +1,19 @@
+import type { Component } from 'vue';
+type __VLS_Props = {
+    label: string;
+    value: string;
+    icon?: string | Component;
+    disabled?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Tabs.vue.d.ts

@@ -1,15 +1,18 @@
+import { type Component } from 'vue';
 export interface TabItem {
     label: string;
     value: string;
-    icon?: string;
+    icon?: string | Component;
+    disabled?: boolean;
 }
 type __VLS_Props = {
     modelValue?: string;
     items?: TabItem[];
+    variant?: 'line' | 'segmented';
 };
-declare var __VLS_27: string, __VLS_28: {};
+declare var __VLS_31: string, __VLS_32: {};
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_27>]?: (props: typeof __VLS_28) => any;
+    [K in NonNullable<typeof __VLS_31>]?: (props: typeof __VLS_32) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
@@ -18,6 +21,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
 }>, {
     items: TabItem[];
     modelValue: string;
+    variant: "line" | "segmented";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/components/Tree.vue.d.ts

@@ -47,7 +47,7 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
     indentPx: number;
     draggable: boolean;
 }, {}, {
-    TreeNodeRow: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    TreeNodeRow: import("vue").DefineComponent<globalThis.ExtractPropTypes<{
         node: {
             type: PropType<TreeNode>;
             required: true;
@@ -88,9 +88,9 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
             type: PropType<"before" | "inside" | "after">;
             default: string;
         };
-    }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    }>, () => globalThis.VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
-    }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "drop" | "toggle" | "drag-start" | "drag-over" | "drag-leave" | "drag-end")[], "select" | "drop" | "toggle" | "drag-start" | "drag-over" | "drag-leave" | "drag-end", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "drop" | "toggle" | "drag-start" | "drag-over" | "drag-leave" | "drag-end")[], "select" | "drop" | "toggle" | "drag-start" | "drag-over" | "drag-leave" | "drag-end", import("vue").PublicProps, Readonly<globalThis.ExtractPropTypes<{
         node: {
             type: PropType<TreeNode>;
             required: true;

package/dist/composables/useAuth.d.ts

@@ -18,7 +18,7 @@ export interface UseAuthOptions {
     autoCheck?: boolean;
 }
 export declare function useAuth(options?: UseAuthOptions): {
-    user: import("vue").Ref<{
+    user: globalThis.Ref<{
         id: string;
         name: string;
         email: string;
@@ -31,8 +31,8 @@ export declare function useAuth(options?: UseAuthOptions): {
         avatar?: string | undefined;
         username?: string | undefined;
     } | null>;
-    loading: import("vue").Ref<boolean, boolean>;
-    error: import("vue").Ref<string | null, string | null>;
+    loading: globalThis.Ref<boolean, boolean>;
+    error: globalThis.Ref<string | null, string | null>;
     checkSession: () => Promise<AuthUser | null>;
     login: () => void;
     logout: () => void;

package/dist/composables/useClipboard.d.ts

@@ -1,7 +1,7 @@
 declare function copy(value: string): Promise<boolean>;
 export declare function useClipboard(): {
-    copied: import("vue").Ref<boolean, boolean>;
-    text: import("vue").Ref<string, string>;
+    copied: globalThis.Ref<boolean, boolean>;
+    text: globalThis.Ref<string, string>;
     copy: typeof copy;
 };
 export {};

package/dist/composables/useFormValidation.d.ts

@@ -4,9 +4,9 @@ export declare function useFormValidation<T extends Record<string, any>>(initial
     values: T;
     errors: Record<string, string>;
     touched: Record<string, boolean>;
-    isValid: import("vue").ComputedRef<boolean>;
-    isDirty: import("vue").ComputedRef<boolean>;
-    submitting: import("vue").Ref<boolean, boolean>;
+    isValid: globalThis.ComputedRef<boolean>;
+    isDirty: globalThis.ComputedRef<boolean>;
+    submitting: globalThis.Ref<boolean, boolean>;
     validate: (field?: string) => boolean;
     touch: (field: string) => void;
     reset: () => void;

package/dist/composables/useMediaQuery.d.ts

@@ -1,11 +1,11 @@
-export declare function useMediaQuery(query: string): import("vue").Ref<boolean, boolean>;
+export declare function useMediaQuery(query: string): globalThis.Ref<boolean, boolean>;
 /** Preset breakpoints matching Tailwind defaults */
 export declare function useBreakpoints(): {
-    sm: import("vue").Ref<boolean, boolean>;
-    md: import("vue").Ref<boolean, boolean>;
-    lg: import("vue").Ref<boolean, boolean>;
-    xl: import("vue").Ref<boolean, boolean>;
-    xxl: import("vue").Ref<boolean, boolean>;
-    preferseDark: import("vue").Ref<boolean, boolean>;
-    prefersReducedMotion: import("vue").Ref<boolean, boolean>;
+    sm: globalThis.Ref<boolean, boolean>;
+    md: globalThis.Ref<boolean, boolean>;
+    lg: globalThis.Ref<boolean, boolean>;
+    xl: globalThis.Ref<boolean, boolean>;
+    xxl: globalThis.Ref<boolean, boolean>;
+    preferseDark: globalThis.Ref<boolean, boolean>;
+    prefersReducedMotion: globalThis.Ref<boolean, boolean>;
 };

package/dist/composables/useNotification.d.ts

@@ -13,7 +13,7 @@ declare function add(notification: Omit<Notification, 'id'>): string;
 declare function remove(id: string): void;
 declare function clear(): void;
 export declare function useNotification(): {
-    notifications: import("vue").Ref<{
+    notifications: globalThis.Ref<{
         id: string;
         title: string;
         description?: string | undefined;

package/dist/composables/useSearch.d.ts

@@ -9,7 +9,7 @@ export interface UseSearchOptions<T> {
 }
 export declare function useSearch<T>(items: Ref<T[]>, options?: UseSearchOptions<T>): {
     query: Ref<string, string>;
-    results: import("vue").ComputedRef<T[]>;
-    isEmpty: import("vue").ComputedRef<boolean>;
+    results: globalThis.ComputedRef<T[]>;
+    isEmpty: globalThis.ComputedRef<boolean>;
     clear: () => void;
 };

package/dist/composables/useTheme.d.ts

@@ -13,10 +13,10 @@ declare function setTheme(id: string): void;
 declare function registerTheme(theme: Theme): void;
 declare function init(): void;
 export declare function useTheme(): {
-    themes: import("vue").ComputedRef<Theme[]>;
-    currentTheme: import("vue").ComputedRef<Theme>;
-    currentThemeId: import("vue").Ref<string, string>;
-    isDark: import("vue").ComputedRef<boolean>;
+    themes: globalThis.ComputedRef<Theme[]>;
+    currentTheme: globalThis.ComputedRef<Theme>;
+    currentThemeId: globalThis.Ref<string, string>;
+    isDark: globalThis.ComputedRef<boolean>;
     setTheme: typeof setTheme;
     applyTheme: typeof applyTheme;
     registerTheme: typeof registerTheme;