@construct-space/ui 0.1.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -1,52 +1,75 @@
1
- export { default as CAccordion } from './components/Accordion.vue';
2
- export { default as CAlert } from './components/Alert.vue';
3
- export { default as CAvatar } from './components/Avatar.vue';
4
- export { default as CBadge } from './components/Badge.vue';
5
- export { default as CButton } from './components/Button.vue';
6
- export { default as CCalendar } from './components/Calendar.vue';
7
- export { default as CCard } from './components/Card.vue';
8
- export { default as CCheckbox } from './components/Checkbox.vue';
9
- export { default as CChip } from './components/Chip.vue';
10
- export { default as CColorPicker } from './components/ColorPicker.vue';
11
- export { default as CContextMenu } from './components/ContextMenu.vue';
12
- export { default as CDashboardPanel } from './components/DashboardPanel.vue';
13
- export { default as CDrawer } from './components/Drawer.vue';
14
- export { default as CDropdown } from './components/Dropdown.vue';
15
- export { default as CDropdownMenu } from './components/DropdownMenu.vue';
16
- export { default as CDropdownMenuItem } from './components/DropdownMenuItem.vue';
17
- export { default as CEmpty } from './components/Empty.vue';
18
- export { default as CFormField } from './components/FormField.vue';
19
- export { default as CIcon } from './components/Icon.vue';
20
- export { default as CInput } from './components/Input.vue';
21
- export { default as CKbd } from './components/Kbd.vue';
22
- export { default as CModal } from './components/Modal.vue';
23
- export { default as CPagination } from './components/Pagination.vue';
24
- export { default as CPanelSection } from './components/PanelSection.vue';
25
- export { default as CPopover } from './components/Popover.vue';
26
- export { default as CProgress } from './components/Progress.vue';
27
- export { default as CPropRow } from './components/PropRow.vue';
28
- export { default as CRadioGroup } from './components/RadioGroup.vue';
29
- export { default as CScrollArea } from './components/ScrollArea.vue';
30
- export { default as CSelect } from './components/Select.vue';
31
- export { default as CSelectMenu } from './components/SelectMenu.vue';
32
- export { default as CSeparator } from './components/Separator.vue';
33
- export { default as CSkeleton } from './components/Skeleton.vue';
34
- export { default as CSlideover } from './components/Slideover.vue';
35
- export { default as CSlider } from './components/Slider.vue';
36
- export { default as CSwitch } from './components/Switch.vue';
37
- export { default as CTable } from './components/Table.vue';
38
- export { default as CTabs } from './components/Tabs.vue';
39
- export { default as CTextarea } from './components/Textarea.vue';
40
- export { default as CTimeline } from './components/Timeline.vue';
41
- export { default as CToast } from './components/Toast.vue';
42
- export { default as CTooltip } from './components/Tooltip.vue';
43
- export { default as CTree } from './components/Tree.vue';
1
+ export { default as Accordion } from './components/Accordion.vue';
2
+ export { default as Alert } from './components/Alert.vue';
3
+ export { default as Avatar } from './components/Avatar.vue';
4
+ export { default as Badge } from './components/Badge.vue';
5
+ export { default as Button } from './components/Button.vue';
6
+ export { default as Calendar } from './components/Calendar.vue';
7
+ export { default as Card } from './components/Card.vue';
8
+ export { default as Checkbox } from './components/Checkbox.vue';
9
+ export { default as Chip } from './components/Chip.vue';
10
+ export { default as ColorPicker } from './components/ColorPicker.vue';
11
+ export { default as ContextMenu } from './components/ContextMenu.vue';
12
+ export { default as DashboardPanel } from './components/DashboardPanel.vue';
13
+ export { default as Drawer } from './components/Drawer.vue';
14
+ export { default as Dropdown } from './components/Dropdown.vue';
15
+ export { default as DropdownMenu } from './components/DropdownMenu.vue';
16
+ export { default as DropdownMenuItem } from './components/DropdownMenuItem.vue';
17
+ export { default as Empty } from './components/Empty.vue';
18
+ export { default as FormField } from './components/FormField.vue';
19
+ export { default as Icon } from './components/Icon.vue';
20
+ export { default as Input } from './components/Input.vue';
21
+ export { default as Kbd } from './components/Kbd.vue';
22
+ export { default as Modal } from './components/Modal.vue';
23
+ export { default as Pagination } from './components/Pagination.vue';
24
+ export { default as PanelSection } from './components/PanelSection.vue';
25
+ export { default as Popover } from './components/Popover.vue';
26
+ export { default as Progress } from './components/Progress.vue';
27
+ export { default as PropRow } from './components/PropRow.vue';
28
+ export { default as RadioGroup } from './components/RadioGroup.vue';
29
+ export { default as ScrollArea } from './components/ScrollArea.vue';
30
+ export { default as Select } from './components/Select.vue';
31
+ export { default as SelectMenu } from './components/SelectMenu.vue';
32
+ export { default as Separator } from './components/Separator.vue';
33
+ export { default as Skeleton } from './components/Skeleton.vue';
34
+ export { default as Slideover } from './components/Slideover.vue';
35
+ export { default as Slider } from './components/Slider.vue';
36
+ export { default as Switch } from './components/Switch.vue';
37
+ export { default as Table } from './components/Table.vue';
38
+ export { default as Tabs } from './components/Tabs.vue';
39
+ export { default as Textarea } from './components/Textarea.vue';
40
+ export { default as Timeline } from './components/Timeline.vue';
41
+ export { default as Notification } from './components/Notification.vue';
42
+ export { default as Tooltip } from './components/Tooltip.vue';
43
+ export { default as Tree } from './components/Tree.vue';
44
+ export { default as Autocomplete } from './components/Autocomplete.vue';
45
+ export { default as Breadcrumbs } from './components/Breadcrumbs.vue';
46
+ export { default as DatePicker } from './components/DatePicker.vue';
47
+ export { default as FileInput } from './components/FileInput.vue';
48
+ export { default as MultiSelect } from './components/MultiSelect.vue';
49
+ export { default as Sidebar3D } from './components/Sidebar3D.vue';
50
+ export { default as ToggleGroup } from './components/ToggleGroup.vue';
51
+ export { default as Toolbar3D } from './components/Toolbar3D.vue';
44
52
  export { default as SidebarLayout } from './layouts/SidebarLayout.vue';
45
53
  export { default as HeaderLayout } from './layouts/HeaderLayout.vue';
46
- export { useToast } from './composables/useToast';
47
- export type { Toast } from './composables/useToast';
54
+ export { useNotification, notify } from './composables/useNotification';
55
+ export type { Notification as NotificationItem } from './composables/useNotification';
48
56
  export { useAuth } from './composables/useAuth';
49
57
  export type { AuthUser, UseAuthOptions } from './composables/useAuth';
58
+ export { useTheme } from './composables/useTheme';
59
+ export type { Theme } from './composables/useTheme';
60
+ export { useClipboard } from './composables/useClipboard';
61
+ export { useMediaQuery, useBreakpoints } from './composables/useMediaQuery';
62
+ export { useFormValidation, required, minLength, maxLength, email, pattern } from './composables/useFormValidation';
63
+ export { useKeyboard, useHotkey } from './composables/useKeyboard';
64
+ export type { KeyBinding } from './composables/useKeyboard';
65
+ export { useClickOutside } from './composables/useClickOutside';
66
+ export { useLocalStorage } from './composables/useLocalStorage';
67
+ export { useAsync } from './composables/useAsync';
68
+ export type { AsyncState } from './composables/useAsync';
69
+ export { useDebounce, useThrottle, debounce } from './composables/useDebounce';
70
+ export { useToggle, useCounter } from './composables/useToggle';
71
+ export { useSearch } from './composables/useSearch';
72
+ export { useIntersectionObserver } from './composables/useIntersectionObserver';
50
73
  import './tokens/tokens.css';
51
74
  import type { App } from 'vue';
52
75
  export declare const ConstructUI: {
@@ -1,4 +1,5 @@
1
1
  export interface NavItem {
2
+ /** Iconify icon name, e.g. "lucide:home" or shorthand "home" */
2
3
  icon: string;
3
4
  label: string;
4
5
  to: string;
@@ -12,13 +13,13 @@ type __VLS_Props = {
12
13
  userAvatar?: string;
13
14
  accentColor?: string;
14
15
  };
15
- declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
16
+ declare var __VLS_1: {}, __VLS_7: {}, __VLS_9: {};
16
17
  type __VLS_Slots = {} & {
17
18
  logo?: (props: typeof __VLS_1) => any;
18
19
  } & {
19
- 'user-menu'?: (props: typeof __VLS_3) => any;
20
+ 'user-menu'?: (props: typeof __VLS_7) => any;
20
21
  } & {
21
- default?: (props: typeof __VLS_5) => any;
22
+ default?: (props: typeof __VLS_9) => any;
22
23
  };
23
24
  declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
24
25
  navigate: (to: string) => any;
package/dist/style.css CHANGED
@@ -1,2 +1,2 @@
1
- @import "https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap";@keyframes progress-indeterminate-f944cf9d{0%{transform:translate(-100%)}to{transform:translate(350%)}}.animate-progress-indeterminate[data-v-f944cf9d]{animation:1.5s ease-in-out infinite progress-indeterminate-f944cf9d}.toast-enter-active[data-v-98416c66]{transition:all .3s cubic-bezier(.4,0,.2,1)}.toast-leave-active[data-v-98416c66]{transition:all .2s cubic-bezier(.4,0,1,1)}.toast-enter-from[data-v-98416c66],.toast-leave-to[data-v-98416c66]{opacity:0;transform:translate(100%)}.toast-move[data-v-98416c66]{transition:transform .3s cubic-bezier(.4,0,.2,1)}.tree-root[data-v-9be5dd89]:focus-visible{outline:none}.cui-sidebar-layout{min-height:100vh;display:flex}.cui-sidebar{background:var(--app-background,#18181b);border-right:1px solid var(--app-border,#27272a);z-index:100;flex-direction:column;align-items:center;width:60px;padding:16px 0;display:flex;position:fixed;top:0;bottom:0;left:0}.cui-sidebar-logo{color:var(--app-foreground,#fafafa);margin-bottom:24px;font-size:20px;font-weight:700}.cui-sidebar-logo-text{justify-content:center;align-items:center;width:32px;height:32px;display:flex}.cui-sidebar-nav{flex-direction:column;flex:1;align-items:center;gap:4px;display:flex}.cui-sidebar-nav-item{cursor:pointer;width:40px;height:40px;color:var(--app-muted,#71717a);border-radius:8px;justify-content:center;align-items:center;transition:all .15s;display:flex;position:relative}.cui-sidebar-nav-item:hover{color:var(--app-foreground,#fafafa);background:#ffffff0f}.cui-sidebar-nav-item.active{color:var(--app-accent,#ff2d55);background:#ffffff0f}.cui-sidebar-tooltip{background:var(--app-foreground,#fafafa);color:var(--app-background,#18181b);white-space:nowrap;pointer-events:none;z-index:200;border-radius:6px;padding:5px 10px;font-size:12px;font-weight:500;position:absolute;top:50%;left:52px;transform:translateY(-50%)}.cui-sidebar-user{position:relative}.cui-sidebar-avatar{color:#fff;cursor:pointer;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:12px;font-weight:600;display:flex;overflow:hidden}.cui-sidebar-avatar img{object-fit:cover;width:100%;height:100%}.cui-sidebar-user-menu{background:var(--app-background,#18181b);border:1px solid var(--app-border,#27272a);z-index:200;border-radius:8px;min-width:160px;padding:4px;position:absolute;bottom:0;left:52px}.cui-sidebar-user-menu-item{color:var(--app-foreground,#fafafa);cursor:pointer;border-radius:6px;padding:8px 12px;font-size:13px;transition:background .15s}.cui-sidebar-user-menu-item:hover{background:#ffffff0f}.cui-sidebar-main{flex:1;min-height:100vh;margin-left:60px}.cui-header-layout{flex-direction:column;min-height:100vh;display:flex}.cui-header{border-bottom:1px solid var(--app-border,#27272a);z-index:100;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#12121eeb;padding:14px 0;position:sticky;top:0}.cui-header-container{justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;padding:0 24px;display:flex}.cui-header-left{align-items:center;gap:24px;display:flex}.cui-header-logo{color:var(--app-foreground,#fafafa);cursor:pointer;letter-spacing:.02em;font-size:16px;font-weight:700}.cui-header-logo-sub{color:var(--app-muted,#71717a);font-weight:400}.cui-header-nav{align-items:center;gap:16px;display:flex}.cui-header-nav a{color:var(--app-muted,#71717a);cursor:pointer;font-size:13px;text-decoration:none;transition:color .15s}.cui-header-nav a:hover,.cui-header-nav a.active{color:var(--app-foreground,#fafafa)}.cui-header-right{align-items:center;gap:12px;display:flex}.cui-header-avatar{color:#fff;cursor:pointer;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:13px;font-weight:600;display:flex;overflow:hidden}.cui-header-avatar img{object-fit:cover;width:100%;height:100%}.cui-header-signin{background:var(--app-accent,#ff2d55);color:#fff;cursor:pointer;border:none;border-radius:6px;padding:6px 16px;font-family:inherit;font-size:13px;font-weight:500;transition:opacity .15s}.cui-header-signin:hover{opacity:.9}.cui-header-main{flex:1}:root{--app-background:#fff;--app-foreground:#1e293b;--app-muted:#94a3b8;--app-accent:#ff2d55;--app-accent-hover:#ff1744;--app-accent-foreground:#fff;--app-border:#e2e8f0;--app-canvas-bg:#f1f5f9;--app-status-bg:#f8fafc;--app-card-bg:#fff;--app-card-hover:#f8fafc;--app-input-bg:#fff;--green:#22c55e;--green-bg:#22c55e1a;--red:#ef4444;--red-bg:#ef44441a;--yellow:#eab308;--radius:8px;--radius-lg:12px;--radius-xl:16px;--font-sans:"Rubik", ui-sans-serif, system-ui, sans-serif}.dark,:root.dark,[data-theme=dark]{--app-background:#18181b;--app-foreground:#fafafa;--app-muted:#71717a;--app-accent:#ff2d55;--app-accent-hover:#ff1744;--app-accent-foreground:#fff;--app-border:#27272a;--app-canvas-bg:#09090b;--app-status-bg:#18181b;--app-card-bg:#1e1e22;--app-card-hover:#27272b;--app-input-bg:#18181b}@media (prefers-color-scheme:dark){:root:not(.light):not([data-theme=light]){--app-background:#18181b;--app-foreground:#fafafa;--app-muted:#71717a;--app-accent:#ff2d55;--app-accent-hover:#ff1744;--app-accent-foreground:#fff;--app-border:#27272a;--app-canvas-bg:#09090b;--app-status-bg:#18181b;--app-card-bg:#1e1e22;--app-card-hover:#27272b;--app-input-bg:#18181b}}*,:before,:after{box-sizing:border-box}body{font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}[data-state=checked].bg-primary,[data-state=checked].bg-neutral,button[role=switch][data-state=checked]{background-color:var(--app-accent)!important}button[role=checkbox][data-state=checked],[role=checkbox][data-state=checked]{background-color:var(--app-accent)!important;border-color:var(--app-accent)!important}[data-radix-slider-range],[role=slider] [data-orientation]>span:first-child{background-color:var(--app-accent)!important}[data-radix-slider-thumb],[role=slider] span[role=slider]{border-color:var(--app-accent)!important}input:focus-visible,textarea:focus-visible,select:focus-visible{border-color:var(--app-accent)!important;outline:none!important}label{text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;font-weight:600}input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select{color:var(--app-foreground)!important;caret-color:var(--app-foreground)!important}input::placeholder,textarea::placeholder{color:var(--app-muted)!important;opacity:1!important}.btn{border:1px solid var(--app-border);border-radius:var(--radius);background:var(--app-input-bg);color:var(--app-foreground);cursor:pointer;align-items:center;gap:6px;padding:8px 18px;font-family:inherit;font-size:13px;font-weight:500;text-decoration:none;transition:all .15s;display:inline-flex}.btn:hover{background:var(--app-card-hover);border-color:var(--app-muted)}.btn-primary{background:var(--app-accent);border-color:var(--app-accent);color:#fff}.btn-primary:hover{background:var(--app-accent-hover);border-color:var(--app-accent-hover)}.btn-sm{padding:5px 12px;font-size:12px}.btn-lg{border-radius:var(--radius-lg);padding:12px 28px;font-size:15px;font-weight:600}.btn-ghost{color:var(--app-muted);background:0 0;border-color:#0000}.btn-ghost:hover{color:var(--app-foreground);background:var(--app-card-bg)}.btn-icon{color:var(--app-muted);cursor:pointer;border-radius:var(--radius);background:0 0;border:none;padding:6px;font-size:14px}.btn-icon:hover{background:var(--app-card-hover);color:var(--app-foreground)}.btn-danger{color:var(--red)}.btn-danger:hover{background:var(--red-bg);color:var(--red)}.container{max-width:1200px;margin:0 auto;padding:0 24px}.page{padding:32px 0}.page-title{letter-spacing:-.02em;margin-bottom:4px;font-size:22px;font-weight:600}.page-subtitle{color:var(--app-muted);margin-bottom:28px;font-size:14px}.card{background:var(--app-card-bg);border:1px solid var(--app-border);border-radius:var(--radius-lg);overflow:hidden}.card-header{border-bottom:1px solid var(--app-border);justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.card-title{font-size:14px;font-weight:600}.card-body{padding:20px}.form-group{margin-bottom:16px}.form-label{color:var(--app-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;font-size:12px;font-weight:500;display:block}.form-input{background:var(--app-input-bg);border:1px solid var(--app-border);border-radius:var(--radius);width:100%;color:var(--app-foreground);outline:none;padding:9px 12px;font-family:inherit;font-size:13px;transition:border-color .15s}.form-input:focus{border-color:var(--app-accent)}.form-input::placeholder{color:var(--app-muted)}.form-row{grid-template-columns:1fr 1fr;gap:12px;display:grid}.badge{text-transform:uppercase;letter-spacing:.05em;border-radius:4px;padding:2px 8px;font-size:11px;font-weight:600}.spinner{border:2px solid var(--app-border);border-top-color:var(--app-accent);border-radius:50%;width:18px;height:18px;animation:.6s linear infinite cui-spin;display:inline-block}@keyframes cui-spin{to{transform:rotate(360deg)}}.loading-state{color:var(--app-muted);justify-content:center;align-items:center;gap:10px;padding:60px 0;font-size:14px;display:flex}.empty-state{text-align:center;color:var(--app-muted);padding:60px 20px}.empty-state p{margin-bottom:16px;font-size:14px}.cui-toast{background:var(--app-card-bg);border:1px solid var(--app-border);border-radius:var(--radius);z-index:2000;padding:12px 20px;font-size:13px;animation:.2s cui-slideUp;position:fixed;bottom:24px;right:24px}.cui-toast.error{border-color:var(--red);color:var(--red)}.cui-toast.success{border-color:var(--green);color:var(--green)}@keyframes cui-slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.tabs{border-bottom:1px solid var(--app-border);margin-bottom:24px;display:flex}.tab{color:var(--app-muted);cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-1px;padding:10px 20px;font-family:inherit;font-size:13px;font-weight:500;transition:all .15s}.tab:hover{color:var(--app-foreground)}.tab.active{color:var(--app-foreground);border-bottom-color:var(--app-accent)}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--app-card-bg);border:1px solid var(--app-border);border-radius:var(--radius-lg);width:480px;max-width:90vw;max-height:85vh;overflow-y:auto}.modal-header{justify-content:space-between;align-items:center;padding:20px 24px 16px;display:flex}.modal-title{font-size:16px;font-weight:600}.modal-body{padding:0 24px 24px}.modal-footer{border-top:1px solid var(--app-border);justify-content:flex-end;gap:8px;padding:16px 24px;display:flex}.info-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;display:grid}.info-item{background:var(--app-input-bg);border-radius:var(--radius);padding:16px}.info-label{text-transform:uppercase;letter-spacing:.05em;color:var(--app-muted);margin-bottom:6px;font-size:11px;font-weight:600}.info-value{font-size:14px;font-weight:500}.toggle{background:var(--app-border);cursor:pointer;border:none;border-radius:11px;width:40px;height:22px;transition:background .2s;position:relative}.toggle.active{background:var(--app-accent)}.toggle:after{content:"";background:#fff;border-radius:50%;width:16px;height:16px;transition:transform .2s;position:absolute;top:3px;left:3px}.toggle.active:after{transform:translate(18px)}.badge-a{color:#60a5fa;background:#60a5fa1f}.badge-aaaa{color:#a78bfa;background:#a78bfa1f}.badge-cname{color:#34d399;background:#34d3991f}.badge-mx{color:#fbbf24;background:#fbbf241f}.badge-txt{color:#f87171;background:#f871711f}.badge-ns{color:#38bdf8;background:#38bdf81f}.badge-srv{color:#fb923c;background:#fb923c1f}.badge-default{color:var(--app-muted);background:#8888a01f}.dns-table{border-collapse:collapse;width:100%}.dns-table th{text-align:left;text-transform:uppercase;letter-spacing:.05em;color:var(--app-muted);border-bottom:1px solid var(--app-border);padding:10px 16px;font-size:11px;font-weight:600}.dns-table td{border-bottom:1px solid var(--app-border);vertical-align:middle;padding:12px 16px;font-size:13px}.dns-table tr:last-child td{border-bottom:none}.dns-table tr:hover td{background:var(--app-card-hover)}.back-link{color:var(--app-muted);align-items:center;gap:6px;margin-bottom:20px;font-size:13px;text-decoration:none;transition:color .15s;display:inline-flex}.back-link:hover{color:var(--app-foreground)}@media (width<=768px){.form-row,.info-grid{grid-template-columns:1fr}}
1
+ @import "https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap";.dropdown-enter-active[data-v-f73b78ff]{transition:all .15s ease-out}.dropdown-leave-active[data-v-f73b78ff]{transition:all .1s ease-in}.dropdown-enter-from[data-v-f73b78ff],.dropdown-leave-to[data-v-f73b78ff]{opacity:0;transform:translateY(-4px)}.dropdown-enter-active[data-v-906e2053]{transition:all .15s ease-out}.dropdown-leave-active[data-v-906e2053]{transition:all .1s ease-in}.dropdown-enter-from[data-v-906e2053],.dropdown-leave-to[data-v-906e2053]{opacity:0;transform:translateY(-4px)}.dropdown-enter-active[data-v-fa1a0566]{transition:all .15s ease-out}.dropdown-leave-active[data-v-fa1a0566]{transition:all .1s ease-in}.dropdown-enter-from[data-v-fa1a0566],.dropdown-leave-to[data-v-fa1a0566]{opacity:0;transform:translateY(-4px)}.toast-enter-active[data-v-2c277680]{transition:all .3s cubic-bezier(.4,0,.2,1)}.toast-leave-active[data-v-2c277680]{transition:all .2s cubic-bezier(.4,0,1,1)}.toast-enter-from[data-v-2c277680],.toast-leave-to[data-v-2c277680]{opacity:0;transform:translate(100%)}.toast-move[data-v-2c277680]{transition:transform .3s cubic-bezier(.4,0,.2,1)}@keyframes progress-indeterminate-f944cf9d{0%{transform:translate(-100%)}to{transform:translate(350%)}}.animate-progress-indeterminate[data-v-f944cf9d]{animation:1.5s ease-in-out infinite progress-indeterminate-f944cf9d}.sidebar-btn[data-v-84231c4b]{cursor:pointer;width:42px;height:42px;color:var(--app-muted);background:0 0;border:none;border-radius:10px;justify-content:center;align-items:center;transition:all .15s;display:flex}.sidebar-btn[data-v-84231c4b]:hover{background:color-mix(in srgb, var(--app-muted) 10%, transparent);color:var(--app-foreground)}.sidebar-btn.active[data-v-84231c4b]{background:color-mix(in srgb, var(--item-color,var(--app-accent)) 15%, transparent);color:var(--item-color,var(--app-accent))}.toolbar-panel[data-v-c460d887]{backface-visibility:hidden;transform:translateZ(22px)}.toolbar-panel--bottom[data-v-c460d887]{transform:rotateX(-90deg)translateZ(22px)}.toolbar-btn[data-v-c460d887]{cursor:pointer;width:32px;height:32px;color:var(--app-muted);background:0 0;border:none;border-radius:.375rem;justify-content:center;align-items:center;transition:all .15s;display:inline-flex}.toolbar-btn[data-v-c460d887]:hover{background:var(--app-input-bg,color-mix(in srgb, var(--app-muted) 10%, transparent));color:var(--app-foreground)}.toolbar-btn.active[data-v-c460d887]{background:color-mix(in srgb, var(--app-accent) 15%, transparent);color:var(--app-accent)}.toolbar-btn[data-v-c460d887]:disabled{opacity:.4;cursor:not-allowed}.tree-root[data-v-9be5dd89]:focus-visible{outline:none}.cui-sidebar-layout{min-height:100vh;display:flex}.cui-sidebar{background:var(--app-background,#18181b);border-right:1px solid var(--app-border,#27272a);z-index:100;flex-direction:column;align-items:center;width:60px;padding:16px 0;display:flex;position:fixed;top:0;bottom:0;left:0}.cui-sidebar-logo{color:var(--app-foreground,#fafafa);margin-bottom:24px;font-size:20px;font-weight:700}.cui-sidebar-logo-text{justify-content:center;align-items:center;width:32px;height:32px;display:flex}.cui-sidebar-nav{flex-direction:column;flex:1;align-items:center;gap:4px;display:flex}.cui-sidebar-nav-item{cursor:pointer;width:40px;height:40px;color:var(--app-muted,#71717a);border-radius:8px;justify-content:center;align-items:center;transition:all .15s;display:flex;position:relative}.cui-sidebar-nav-item:hover{color:var(--app-foreground,#fafafa);background:#ffffff0f}.cui-sidebar-nav-item.active{color:var(--app-accent,#ff2d55);background:#ffffff0f}.cui-sidebar-tooltip{background:var(--app-foreground,#fafafa);color:var(--app-background,#18181b);white-space:nowrap;pointer-events:none;z-index:200;border-radius:6px;padding:5px 10px;font-size:12px;font-weight:500;position:absolute;top:50%;left:52px;transform:translateY(-50%)}.cui-sidebar-user{position:relative}.cui-sidebar-avatar{color:#fff;cursor:pointer;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:12px;font-weight:600;display:flex;overflow:hidden}.cui-sidebar-avatar img{object-fit:cover;width:100%;height:100%}.cui-sidebar-user-menu{background:var(--app-background,#18181b);border:1px solid var(--app-border,#27272a);z-index:200;border-radius:8px;min-width:160px;padding:4px;position:absolute;bottom:0;left:52px}.cui-sidebar-user-menu-item{color:var(--app-foreground,#fafafa);cursor:pointer;border-radius:6px;padding:8px 12px;font-size:13px;transition:background .15s}.cui-sidebar-user-menu-item:hover{background:#ffffff0f}.cui-sidebar-main{flex:1;min-height:100vh;margin-left:60px}.cui-header-layout{flex-direction:column;min-height:100vh;display:flex}.cui-header{border-bottom:1px solid var(--app-border,#27272a);z-index:100;background:color-mix(in srgb, var(--app-background) 92%, transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);padding:14px 0;position:sticky;top:0}.cui-header-container{justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;padding:0 24px;display:flex}.cui-header-left{align-items:center;gap:24px;display:flex}.cui-header-logo{color:var(--app-foreground,#fafafa);cursor:pointer;letter-spacing:.02em;font-size:16px;font-weight:700}.cui-header-logo-sub{color:var(--app-muted,#71717a);font-weight:400}.cui-header-nav{align-items:center;gap:16px;display:flex}.cui-header-nav a{color:var(--app-muted,#71717a);cursor:pointer;font-size:13px;text-decoration:none;transition:color .15s}.cui-header-nav a:hover,.cui-header-nav a.active{color:var(--app-foreground,#fafafa)}.cui-header-right{align-items:center;gap:12px;display:flex}.cui-header-avatar{color:#fff;cursor:pointer;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:13px;font-weight:600;display:flex;overflow:hidden}.cui-header-avatar img{object-fit:cover;width:100%;height:100%}.cui-header-signin{background:var(--app-accent,#ff2d55);color:#fff;cursor:pointer;border:none;border-radius:6px;padding:6px 16px;font-family:inherit;font-size:13px;font-weight:500;transition:opacity .15s}.cui-header-signin:hover{opacity:.9}.cui-header-main{flex:1}:root{--app-background:#fff;--app-foreground:#1e293b;--app-muted:#94a3b8;--app-accent:#ff2d55;--app-accent-hover:#ff1744;--app-accent-foreground:#fff;--app-border:#e2e8f0;--app-canvas-bg:#f1f5f9;--app-status-bg:#f8fafc;--app-card-bg:#fff;--app-card-hover:#f8fafc;--app-input-bg:#fff;--green:#22c55e;--green-bg:#22c55e1a;--red:#ef4444;--red-bg:#ef44441a;--yellow:#eab308;--radius:8px;--radius-lg:12px;--radius-xl:16px;--font-sans:"Rubik", ui-sans-serif, system-ui, sans-serif}.dark,:root.dark,[data-theme=dark]{--app-background:#18181b;--app-foreground:#fafafa;--app-muted:#71717a;--app-accent:#ff2d55;--app-accent-hover:#ff1744;--app-accent-foreground:#fff;--app-border:#27272a;--app-canvas-bg:#09090b;--app-status-bg:#18181b;--app-card-bg:#1e1e22;--app-card-hover:#27272b;--app-input-bg:#18181b}@media (prefers-color-scheme:dark){:root:not(.light):not([data-theme=light]){--app-background:#18181b;--app-foreground:#fafafa;--app-muted:#71717a;--app-accent:#ff2d55;--app-accent-hover:#ff1744;--app-accent-foreground:#fff;--app-border:#27272a;--app-canvas-bg:#09090b;--app-status-bg:#18181b;--app-card-bg:#1e1e22;--app-card-hover:#27272b;--app-input-bg:#18181b}}*,:before,:after{box-sizing:border-box}body{font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}[data-state=checked].bg-primary,[data-state=checked].bg-neutral,button[role=switch][data-state=checked]{background-color:var(--app-accent)!important}button[role=checkbox][data-state=checked],[role=checkbox][data-state=checked]{background-color:var(--app-accent)!important;border-color:var(--app-accent)!important}[data-radix-slider-range],[role=slider] [data-orientation]>span:first-child{background-color:var(--app-accent)!important}[data-radix-slider-thumb],[role=slider] span[role=slider]{border-color:var(--app-accent)!important}input:focus-visible,textarea:focus-visible,select:focus-visible{border-color:var(--app-accent)!important;outline:none!important}.cui-label{text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;font-weight:600}input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select{color:var(--app-foreground)!important;caret-color:var(--app-foreground)!important}input::placeholder,textarea::placeholder{color:var(--app-muted)!important;opacity:1!important}.btn{border:1px solid var(--app-border);border-radius:var(--radius);background:var(--app-input-bg);color:var(--app-foreground);cursor:pointer;align-items:center;gap:6px;padding:8px 18px;font-family:inherit;font-size:13px;font-weight:500;text-decoration:none;transition:all .15s;display:inline-flex}.btn:hover{background:var(--app-card-hover);border-color:var(--app-muted)}.btn-primary{background:var(--app-accent);border-color:var(--app-accent);color:#fff}.btn-primary:hover{background:var(--app-accent-hover);border-color:var(--app-accent-hover)}.btn-sm{padding:5px 12px;font-size:12px}.btn-lg{border-radius:var(--radius-lg);padding:12px 28px;font-size:15px;font-weight:600}.btn-ghost{color:var(--app-muted);background:0 0;border-color:#0000}.btn-ghost:hover{color:var(--app-foreground);background:var(--app-card-bg)}.btn-icon{color:var(--app-muted);cursor:pointer;border-radius:var(--radius);background:0 0;border:none;padding:6px;font-size:14px}.btn-icon:hover{background:var(--app-card-hover);color:var(--app-foreground)}.btn-danger{color:var(--red)}.btn-danger:hover{background:var(--red-bg);color:var(--red)}.container{max-width:1200px;margin:0 auto;padding:0 24px}.page{padding:32px 0}.page-title{letter-spacing:-.02em;margin-bottom:4px;font-size:22px;font-weight:600}.page-subtitle{color:var(--app-muted);margin-bottom:28px;font-size:14px}.card{background:var(--app-card-bg);border:1px solid var(--app-border);border-radius:var(--radius-lg);overflow:hidden}.card-header{border-bottom:1px solid var(--app-border);justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.card-title{font-size:14px;font-weight:600}.card-body{padding:20px}.form-group{margin-bottom:16px}.form-label{color:var(--app-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;font-size:12px;font-weight:500;display:block}.form-input{background:var(--app-input-bg);border:1px solid var(--app-border);border-radius:var(--radius);width:100%;color:var(--app-foreground);outline:none;padding:9px 12px;font-family:inherit;font-size:13px;transition:border-color .15s}.form-input:focus{border-color:var(--app-accent)}.form-input::placeholder{color:var(--app-muted)}.form-row{grid-template-columns:1fr 1fr;gap:12px;display:grid}.badge{text-transform:uppercase;letter-spacing:.05em;border-radius:4px;padding:2px 8px;font-size:11px;font-weight:600}.spinner{border:2px solid var(--app-border);border-top-color:var(--app-accent);border-radius:50%;width:18px;height:18px;animation:.6s linear infinite cui-spin;display:inline-block}@keyframes cui-spin{to{transform:rotate(360deg)}}.loading-state{color:var(--app-muted);justify-content:center;align-items:center;gap:10px;padding:60px 0;font-size:14px;display:flex}.empty-state{text-align:center;color:var(--app-muted);padding:60px 20px}.empty-state p{margin-bottom:16px;font-size:14px}.cui-toast{background:var(--app-card-bg);border:1px solid var(--app-border);border-radius:var(--radius);z-index:2000;padding:12px 20px;font-size:13px;animation:.2s cui-slideUp;position:fixed;bottom:24px;right:24px}.cui-toast.error{border-color:var(--red);color:var(--red)}.cui-toast.success{border-color:var(--green);color:var(--green)}@keyframes cui-slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.tabs{border-bottom:1px solid var(--app-border);margin-bottom:24px;display:flex}.tab{color:var(--app-muted);cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-1px;padding:10px 20px;font-family:inherit;font-size:13px;font-weight:500;transition:all .15s}.tab:hover{color:var(--app-foreground)}.tab.active{color:var(--app-foreground);border-bottom-color:var(--app-accent)}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--app-card-bg);border:1px solid var(--app-border);border-radius:var(--radius-lg);width:480px;max-width:90vw;max-height:85vh;overflow-y:auto}.modal-header{justify-content:space-between;align-items:center;padding:20px 24px 16px;display:flex}.modal-title{font-size:16px;font-weight:600}.modal-body{padding:0 24px 24px}.modal-footer{border-top:1px solid var(--app-border);justify-content:flex-end;gap:8px;padding:16px 24px;display:flex}.info-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;display:grid}.info-item{background:var(--app-input-bg);border-radius:var(--radius);padding:16px}.info-label{text-transform:uppercase;letter-spacing:.05em;color:var(--app-muted);margin-bottom:6px;font-size:11px;font-weight:600}.info-value{font-size:14px;font-weight:500}.toggle{background:var(--app-border);cursor:pointer;border:none;border-radius:11px;width:40px;height:22px;transition:background .2s;position:relative}.toggle.active{background:var(--app-accent)}.toggle:after{content:"";background:#fff;border-radius:50%;width:16px;height:16px;transition:transform .2s;position:absolute;top:3px;left:3px}.toggle.active:after{transform:translate(18px)}.badge-a{color:#60a5fa;background:#60a5fa1f}.badge-aaaa{color:#a78bfa;background:#a78bfa1f}.badge-cname{color:#34d399;background:#34d3991f}.badge-mx{color:#fbbf24;background:#fbbf241f}.badge-txt{color:#f87171;background:#f871711f}.badge-ns{color:#38bdf8;background:#38bdf81f}.badge-srv{color:#fb923c;background:#fb923c1f}.badge-default{color:var(--app-muted);background:#8888a01f}.dns-table{border-collapse:collapse;width:100%}.dns-table th{text-align:left;text-transform:uppercase;letter-spacing:.05em;color:var(--app-muted);border-bottom:1px solid var(--app-border);padding:10px 16px;font-size:11px;font-weight:600}.dns-table td{border-bottom:1px solid var(--app-border);vertical-align:middle;padding:12px 16px;font-size:13px}.dns-table tr:last-child td{border-bottom:none}.dns-table tr:hover td{background:var(--app-card-hover)}.back-link{color:var(--app-muted);align-items:center;gap:6px;margin-bottom:20px;font-size:13px;text-decoration:none;transition:color .15s;display:inline-flex}.back-link:hover{color:var(--app-foreground)}@media (width<=768px){.form-row,.info-grid{grid-template-columns:1fr}}
2
2
  /*$vite$:1*/
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@construct-space/ui",
3
- "version": "0.1.0",
3
+ "version": "0.3.0",
4
4
  "description": "Construct UI — Vue 3 component library for Construct services",
5
5
  "type": "module",
6
6
  "main": "./dist/construct-ui.js",
@@ -11,7 +11,6 @@
11
11
  "import": "./dist/construct-ui.js",
12
12
  "types": "./dist/index.d.ts"
13
13
  },
14
- "./tokens": "./dist/tokens.css",
15
14
  "./style.css": "./dist/style.css"
16
15
  },
17
16
  "files": [
@@ -44,14 +43,15 @@
44
43
  "release": "bun run build && npm publish"
45
44
  },
46
45
  "peerDependencies": {
47
- "vue": "^3.5.0"
48
- },
49
- "dependencies": {
46
+ "vue": "^3.5.0",
50
47
  "reka-ui": "^2.0.0",
51
48
  "@iconify/vue": "^4.0.0"
52
49
  },
50
+ "dependencies": {},
53
51
  "devDependencies": {
54
52
  "vue": "^3.5.28",
53
+ "reka-ui": "^2.0.0",
54
+ "@iconify/vue": "^4.0.0",
55
55
  "typescript": "^5.9.3",
56
56
  "vite": "^8.0.0",
57
57
  "@vitejs/plugin-vue": "^6.0.5",