@sxo/component-admin 0.0.0 → 0.0.1

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/LICENSE.md ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 sxo team
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,14 +1,51 @@
1
- # @sxo/component-admin
1
+ <div align="center">
2
+ <h1>@sxo/component-admin</h1>
3
+ <p><b>A set of high-level layout and navigation components for building modern admin interfaces.</b></p>
2
4
 
3
- SXO 设计系统的后台管理系统组件。
5
+ <p>
6
+ <a href="https://www.npmjs.com/package/@sxo/component-admin"><img src="https://img.shields.io/npm/v/@sxo/component-admin.svg?style=flat-square" alt="npm version"></a>
7
+ <img src="https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square" alt="license">
8
+ <img src="https://img.shields.io/npm/dm/@sxo/component-admin.svg?style=flat-square" alt="downloads">
9
+ </p>
10
+ </div>
4
11
 
5
- ## 功能
12
+ ---
6
13
 
7
- - **开箱即用**: 提供侧边栏、顶部栏、多页签等常用组件。
8
- - **灵活布局**: 支持多种后台布局模式。
14
+ `@sxo/component-admin` provides the structural building blocks for professional administration panels. It follows the SXO design philosophy, offering flexible, headless-inspired layouts that adapt to any visual style.
9
15
 
10
- ## 安装
16
+ ## ✨ Key Features
17
+
18
+ - 🏗️ **Modular Layouts**: Pre-configured yet flexible sidebar, top bar, and multi-tab navigation.
19
+ - 🧩 **Headless Navigation**: Logical state management for active routes and tab history.
20
+ - 🎨 **Themeable**: Seamlessly inherits styles from any SXO theme (AntD, GitHub, etc.).
21
+ - 🛡️ **Type Safe**: Full TypeScript support for layout configurations.
22
+
23
+ ## 🚀 Quick Start
24
+
25
+ ### Installation
11
26
 
12
27
  ```bash
13
- pnpm add @sxo/component-admin @sxo/ui @sxo/design
28
+ pnpm add @sxo/component-admin
29
+ ```
30
+
31
+ ### Usage
32
+
33
+ ```typescript
34
+ import { createAdminLayout } from '@sxo/component-admin';
35
+
36
+ const layout = createAdminLayout({
37
+ sidebar: { collapsed: false },
38
+ tabs: { enabled: true }
39
+ });
40
+
41
+ // Access layout state in your components
42
+ console.log(layout.sidebarClasses);
14
43
  ```
44
+
45
+ ## 📖 Documentation
46
+
47
+ For full documentation and layout examples, visit the [Admin Component Documentation](https://sxo-engine.pages.dev/zh/components/admin.html).
48
+
49
+ ## 📄 License
50
+
51
+ MIT License.
@@ -11,7 +11,7 @@ export declare function getStatCardClasses(options?: StatCardOptions): {
11
11
  export interface KanbanOptions {
12
12
  columns?: number;
13
13
  }
14
- export declare function getKanbanClasses(options?: KanbanOptions): {
14
+ export declare function getKanbanClasses(_options?: KanbanOptions): {
15
15
  board: string;
16
16
  column: string;
17
17
  columnHeader: string;
@@ -33,7 +33,10 @@ export declare function getDescriptionClasses(): {
33
33
  label: string;
34
34
  content: string;
35
35
  };
36
- export declare function getShellClasses(): {
36
+ export interface ShellOptions {
37
+ theme?: 'dark' | 'light' | 'modern';
38
+ }
39
+ export declare function getShellClasses(options?: ShellOptions): {
37
40
  layout: string;
38
41
  sidebar: string;
39
42
  sidebarCollapsed: string;
@@ -63,7 +66,7 @@ export declare function getLoginClasses(variant?: 'split' | 'centered'): {
63
66
  form: string;
64
67
  footer: string;
65
68
  };
66
- export declare function getResultClasses(status?: 'success' | 'error' | 'info' | 'warning' | '404' | '500'): {
69
+ export declare function getResultClasses(_status?: 'success' | 'error' | 'info' | 'warning' | '404' | '500'): {
67
70
  container: string;
68
71
  icon: {
69
72
  base: string;
package/dist/index.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function i(t){return{columns:t,moveItem:(n,s,o,l)=>{console.log(`Moving item ${n} from ${s} to ${o} at index ${l}`)}}}function a(t){const r=t.stats||[],e=t.charts||[];return{stats:r,charts:e}}function c(t=!1){let r=t;const e=new Set;return{get isCollapsed(){return r},toggle:()=>{r=!r,e.forEach(n=>n(r))},subscribe:n=>(e.add(n),()=>e.delete(n))}}function d(t,r=0){let e=r;const n=new Set;return{get current(){return e},next:()=>{e<t-1&&(e++,n.forEach(s=>s(e)))},prev:()=>{e>0&&(e--,n.forEach(s=>s(e)))},goTo:s=>{s>=0&&s<t&&(e=s,n.forEach(o=>o(e)))},subscribe:s=>(n.add(s),()=>n.delete(s))}}function u(t={}){const{variant:r="bordered",color:e="primary"}=t,n={base:"p-6 rounded-xl transition-all duration-300",bordered:"border border-neutral-200 bg-white shadow-sm hover:shadow-md",simple:"bg-transparent",solid:"text-white shadow-lg"},s={primary:"bg-primary",success:"bg-success",warning:"bg-warning",error:"bg-error",info:"bg-info"};return{container:[n.base,r==="solid"?s[e]:n[r]].join(" "),title:"text-sm font-medium opacity-60 mb-2 uppercase tracking-wider",value:"text-3xl font-bold mb-1",trend:"text-xs font-semibold flex items-center gap-1"}}function b(t={}){return{board:"flex gap-6 overflow-x-auto pb-4 h-full min-h-[500px]",column:"flex-shrink-0 w-80 bg-neutral-50 rounded-xl flex flex-col max-h-full border border-neutral-100",columnHeader:"p-4 flex items-center justify-between sticky top-0 bg-neutral-50 rounded-t-xl",columnTitle:"font-bold text-sm flex items-center gap-2",columnBadge:"px-2 py-0.5 rounded-full bg-neutral-200 text-[10px] font-bold",itemList:"p-3 space-y-3 overflow-y-auto flex-1",item:"bg-white p-4 rounded-lg shadow-sm border border-neutral-200 hover:border-primary transition-colors cursor-grab active:cursor-grabbing",itemTitle:"font-medium text-sm mb-2",itemDesc:"text-xs opacity-60 line-clamp-2",itemFooter:"mt-4 pt-3 border-t border-neutral-50 flex items-center justify-between",avatarGroup:"flex -space-x-2"}}function m(){return{container:"w-full",header:"mb-6 flex items-center justify-between",title:"text-lg font-bold",grid:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-y-6 gap-x-12",item:"flex flex-col gap-1",label:"text-sm opacity-50 font-medium",content:"text-sm font-semibold"}}function f(){return{layout:"flex h-screen overflow-hidden bg-neutral-50",sidebar:"fixed inset-y-0 left-0 z-50 w-64 bg-neutral-900 text-white transition-transform duration-300 lg:static lg:translate-x-0",sidebarCollapsed:"-translate-x-full",sidebarHeader:"flex items-center h-16 px-6 border-b border-white/10",sidebarContent:"flex-1 overflow-y-auto py-6",sidebarFooter:"p-4 border-t border-white/10",navItem:"flex items-center gap-3 px-6 py-3 text-sm font-medium transition-colors hover:bg-white/5 opacity-70 hover:opacity-100",navItemActive:"bg-primary text-white opacity-100",main:"flex-1 flex flex-col min-w-0 overflow-hidden",header:"flex items-center justify-between h-16 px-8 bg-white border-b border-neutral-200 shadow-sm",content:"flex-1 overflow-y-auto p-8"}}function x(t="centered"){const r={container:"min-h-screen flex items-center justify-center bg-neutral-50",card:"w-full max-w-md p-8 bg-white rounded-2xl shadow-xl border border-neutral-100",title:"text-3xl font-bold text-center mb-2",subtitle:"text-center opacity-50 text-sm mb-8",form:"space-y-6",footer:"mt-8 text-center text-sm opacity-50"};return t==="split"?{...r,container:"min-h-screen flex",left:"hidden lg:flex flex-1 bg-primary items-center justify-center p-12 text-white",right:"flex-1 flex items-center justify-center p-8 bg-white",card:"w-full max-w-md"}:r}function g(t="info"){return{container:"flex flex-col items-center justify-center p-12 text-center",icon:{base:"text-6xl mb-6",success:"text-success",error:"text-error",info:"text-info",warning:"text-warning",404:"text-neutral-400",500:"text-error"},title:"text-2xl font-bold mb-2",subtitle:"text-sm opacity-50 mb-8 max-w-md",extra:"flex gap-4",content:"mt-8 p-6 bg-neutral-50 rounded-lg w-full max-w-2xl text-left"}}function p(){return{container:"pb-6 mb-6 border-b border-neutral-100 bg-white",breadcrumb:"text-xs opacity-40 mb-3 flex items-center gap-2",heading:"flex items-center justify-between",left:"flex items-center gap-4",title:"text-xl font-bold",subtitle:"text-sm opacity-50 ml-3 border-l border-neutral-200 pl-3",extra:"flex items-center gap-3",footer:"mt-4"}}function h(){return{container:"p-6 bg-white rounded-xl border border-neutral-100 shadow-sm mb-6",grid:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6",actions:"mt-6 pt-6 border-t border-neutral-50 flex items-center justify-end gap-3"}}function w(){return{container:"max-w-3xl mx-auto py-8",steps:"flex items-center justify-between mb-12 relative",stepLine:"absolute top-4 left-0 right-0 h-0.5 bg-neutral-100 -z-10",stepItem:"flex flex-col items-center gap-2 bg-white px-4",stepCircle:"w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold border-2 transition-colors",stepActive:"border-primary bg-primary text-white",stepPending:"border-neutral-200 bg-white text-neutral-400",stepCompleted:"border-success bg-success text-white",stepTitle:"text-xs font-medium",content:"bg-white p-8 rounded-xl border border-neutral-100 shadow-sm",footer:"mt-8 flex items-center justify-center gap-4"}}exports.getDescriptionClasses=m;exports.getKanbanClasses=b;exports.getLoginClasses=x;exports.getPageHeaderClasses=p;exports.getQueryFilterClasses=h;exports.getResultClasses=g;exports.getShellClasses=f;exports.getStatCardClasses=u;exports.getStepFormClasses=w;exports.useDashboard=a;exports.useKanban=i;exports.useShell=c;exports.useSteps=d;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function i(r={}){const{variant:n="bordered",color:t="primary"}=r,e={base:"p-6 rounded-xl transition-all duration-300",bordered:"border border-neutral-200 bg-white shadow-sm hover:shadow-md",simple:"bg-transparent",solid:"text-white shadow-lg"},o={primary:"bg-primary",success:"bg-success",warning:"bg-warning",error:"bg-error",info:"bg-info"};return{container:[e.base,n==="solid"?o[t]:e[n]].join(" "),title:"text-sm font-medium opacity-60 mb-2 uppercase tracking-wider",value:"text-3xl font-bold mb-1",trend:"text-xs font-semibold flex items-center gap-1"}}function l(r={}){return{board:"flex gap-6 overflow-x-auto pb-4 h-full min-h-[500px]",column:"flex-shrink-0 w-80 bg-neutral-50 rounded-xl flex flex-col max-h-full border border-neutral-100",columnHeader:"p-4 flex items-center justify-between sticky top-0 bg-neutral-50 rounded-t-xl",columnTitle:"font-bold text-sm flex items-center gap-2",columnBadge:"px-2 py-0.5 rounded-full bg-neutral-200 text-[10px] font-bold",itemList:"p-3 space-y-3 overflow-y-auto flex-1",item:"bg-white p-4 rounded-lg shadow-sm border border-neutral-200 hover:border-primary transition-colors cursor-grab active:cursor-grabbing",itemTitle:"font-medium text-sm mb-2",itemDesc:"text-xs opacity-60 line-clamp-2",itemFooter:"mt-4 pt-3 border-t border-neutral-50 flex items-center justify-between",avatarGroup:"flex -space-x-2"}}function d(){return{container:"w-full",header:"mb-6 flex items-center justify-between",title:"text-lg font-bold",grid:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-y-6 gap-x-12",item:"flex flex-col gap-1",label:"text-sm opacity-50 font-medium",content:"text-sm font-semibold"}}function u(r={}){const{theme:n="dark"}=r,e={dark:{sidebar:"bg-neutral-900 text-white",sidebarHeader:"border-white/10",sidebarFooter:"border-white/10",navItem:"text-white/70 hover:bg-white/5 hover:text-white",navItemActive:"bg-primary text-white",main:"bg-neutral-950",header:"bg-neutral-900 border-white/10 shadow-lg"},light:{sidebar:"bg-white text-neutral-900 border-r border-neutral-200",sidebarHeader:"border-neutral-100",sidebarFooter:"border-neutral-100",navItem:"text-neutral-600 hover:bg-neutral-50 hover:text-neutral-900",navItemActive:"bg-primary/5 text-primary border-r-2 border-primary",main:"bg-neutral-50",header:"bg-white border-neutral-200 shadow-sm"},modern:{sidebar:"bg-neutral-50/80 backdrop-blur-xl text-neutral-900 border-r border-neutral-200/50",sidebarHeader:"border-neutral-200/50",sidebarFooter:"border-neutral-200/50",navItem:"mx-3 my-1 rounded-xl text-neutral-500 hover:bg-white hover:shadow-sm hover:text-neutral-900 transition-all duration-300",navItemActive:"mx-3 my-1 rounded-xl bg-white shadow-md shadow-primary/5 text-primary ring-1 ring-primary/10",main:"bg-neutral-100/30",header:"bg-white/70 backdrop-blur-md border-b border-neutral-200/50 shadow-sm"}}[n];return{layout:"flex h-screen overflow-hidden",sidebar:["fixed inset-y-0 left-0 z-50 w-64 transition-transform duration-300 lg:static lg:translate-x-0",e.sidebar].join(" "),sidebarCollapsed:"-translate-x-full",sidebarHeader:["flex items-center h-16 px-6 border-b",e.sidebarHeader].join(" "),sidebarContent:"flex-1 overflow-y-auto py-6",sidebarFooter:["p-4 border-t",e.sidebarFooter].join(" "),navItem:["flex items-center gap-3 px-6 py-3 text-sm font-medium transition-all duration-200",e.navItem].join(" "),navItemActive:e.navItemActive,main:["flex-1 flex flex-col min-w-0 overflow-hidden",e.main].join(" "),header:["flex items-center justify-between h-16 px-8 border-b shadow-sm",e.header].join(" "),content:"flex-1 overflow-y-auto p-8"}}function b(r="centered"){const n={container:"min-h-screen flex items-center justify-center bg-neutral-50",card:"w-full max-w-md p-8 bg-white rounded-2xl shadow-xl border border-neutral-100",title:"text-3xl font-bold text-center mb-2",subtitle:"text-center opacity-50 text-sm mb-8",form:"space-y-6",footer:"mt-8 text-center text-sm opacity-50"};return r==="split"?{...n,container:"min-h-screen flex",left:"hidden lg:flex flex-1 bg-primary items-center justify-center p-12 text-white",right:"flex-1 flex items-center justify-center p-8 bg-white",card:"w-full max-w-md"}:n}function c(r="info"){return{container:"flex flex-col items-center justify-center p-12 text-center",icon:{base:"text-6xl mb-6",success:"text-success",error:"text-error",info:"text-info",warning:"text-warning",404:"text-neutral-400",500:"text-error"},title:"text-2xl font-bold mb-2",subtitle:"text-sm opacity-50 mb-8 max-w-md",extra:"flex gap-4",content:"mt-8 p-6 bg-neutral-50 rounded-lg w-full max-w-2xl text-left"}}function m(){return{container:"mb-8",breadcrumb:"text-xs font-bold uppercase tracking-widest text-neutral-400 mb-3 flex items-center gap-2",heading:"flex items-center justify-between",left:"flex flex-col gap-1",title:"text-2xl font-black text-neutral-900 tracking-tight",subtitle:"text-sm font-medium text-neutral-400",extra:"flex items-center gap-3",footer:"mt-6 pt-6 border-t border-neutral-100"}}function x(){return{container:"p-6 bg-white rounded-xl border border-neutral-100 shadow-sm mb-6",grid:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6",actions:"mt-6 pt-6 border-t border-neutral-50 flex items-center justify-end gap-3"}}function f(){return{container:"max-w-3xl mx-auto py-8",steps:"flex items-center justify-between mb-12 relative",stepLine:"absolute top-4 left-0 right-0 h-0.5 bg-neutral-100 -z-10",stepItem:"flex flex-col items-center gap-2 bg-white px-4",stepCircle:"w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold border-2 transition-colors",stepActive:"border-primary bg-primary text-white",stepPending:"border-neutral-200 bg-white text-neutral-400",stepCompleted:"border-success bg-success text-white",stepTitle:"text-xs font-medium",content:"bg-white p-8 rounded-xl border border-neutral-100 shadow-sm",footer:"mt-8 flex items-center justify-center gap-4"}}function g(r){return{columns:r,moveItem:(e,o,s,a)=>{console.log(`Moving item ${e} from ${o} to ${s} at index ${a}`)}}}function p(r){const n=r.stats||[],t=r.charts||[];return{stats:n,charts:t}}function h(r=!1){let n=r;const t=new Set;return{get isCollapsed(){return n},toggle:()=>{n=!n,t.forEach(e=>e(n))},subscribe:e=>(t.add(e),()=>t.delete(e))}}function w(r,n=0){let t=n;const e=new Set;return{get current(){return t},next:()=>{t<r-1&&(t++,e.forEach(o=>o(t)))},prev:()=>{t>0&&(t--,e.forEach(o=>o(t)))},goTo:o=>{o>=0&&o<r&&(t=o,e.forEach(s=>s(t)))},subscribe:o=>(e.add(o),()=>e.delete(o))}}exports.getDescriptionClasses=d;exports.getKanbanClasses=l;exports.getLoginClasses=b;exports.getPageHeaderClasses=m;exports.getQueryFilterClasses=x;exports.getResultClasses=c;exports.getShellClasses=u;exports.getStatCardClasses=i;exports.getStepFormClasses=f;exports.useDashboard=p;exports.useKanban=g;exports.useShell=h;exports.useSteps=w;
package/dist/index.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export * from './headless';
2
1
  export * from './components/AdminStyles';
2
+ export * from './headless';
package/dist/index.js CHANGED
@@ -1,52 +1,5 @@
1
- function a(t) {
2
- return {
3
- columns: t,
4
- moveItem: (n, o, s, l) => {
5
- console.log(`Moving item ${n} from ${o} to ${s} at index ${l}`);
6
- }
7
- };
8
- }
9
- function c(t) {
10
- const r = t.stats || [], e = t.charts || [];
11
- return {
12
- stats: r,
13
- charts: e
14
- };
15
- }
16
- function d(t = !1) {
17
- let r = t;
18
- const e = /* @__PURE__ */ new Set();
19
- return {
20
- get isCollapsed() {
21
- return r;
22
- },
23
- toggle: () => {
24
- r = !r, e.forEach((n) => n(r));
25
- },
26
- subscribe: (n) => (e.add(n), () => e.delete(n))
27
- };
28
- }
29
- function u(t, r = 0) {
30
- let e = r;
31
- const n = /* @__PURE__ */ new Set();
32
- return {
33
- get current() {
34
- return e;
35
- },
36
- next: () => {
37
- e < t - 1 && (e++, n.forEach((o) => o(e)));
38
- },
39
- prev: () => {
40
- e > 0 && (e--, n.forEach((o) => o(e)));
41
- },
42
- goTo: (o) => {
43
- o >= 0 && o < t && (e = o, n.forEach((s) => s(e)));
44
- },
45
- subscribe: (o) => (n.add(o), () => n.delete(o))
46
- };
47
- }
48
- function x(t = {}) {
49
- const { variant: r = "bordered", color: e = "primary" } = t, n = {
1
+ function l(r = {}) {
2
+ const { variant: n = "bordered", color: t = "primary" } = r, e = {
50
3
  base: "p-6 rounded-xl transition-all duration-300",
51
4
  bordered: "border border-neutral-200 bg-white shadow-sm hover:shadow-md",
52
5
  simple: "bg-transparent",
@@ -59,16 +12,13 @@ function x(t = {}) {
59
12
  info: "bg-info"
60
13
  };
61
14
  return {
62
- container: [
63
- n.base,
64
- r === "solid" ? o[e] : n[r]
65
- ].join(" "),
15
+ container: [e.base, n === "solid" ? o[t] : e[n]].join(" "),
66
16
  title: "text-sm font-medium opacity-60 mb-2 uppercase tracking-wider",
67
17
  value: "text-3xl font-bold mb-1",
68
18
  trend: "text-xs font-semibold flex items-center gap-1"
69
19
  };
70
20
  }
71
- function b(t = {}) {
21
+ function d(r = {}) {
72
22
  return {
73
23
  board: "flex gap-6 overflow-x-auto pb-4 h-full min-h-[500px]",
74
24
  column: "flex-shrink-0 w-80 bg-neutral-50 rounded-xl flex flex-col max-h-full border border-neutral-100",
@@ -83,7 +33,7 @@ function b(t = {}) {
83
33
  avatarGroup: "flex -space-x-2"
84
34
  };
85
35
  }
86
- function f() {
36
+ function u() {
87
37
  return {
88
38
  container: "w-full",
89
39
  header: "mb-6 flex items-center justify-between",
@@ -94,23 +44,52 @@ function f() {
94
44
  content: "text-sm font-semibold"
95
45
  };
96
46
  }
97
- function m() {
47
+ function b(r = {}) {
48
+ const { theme: n = "dark" } = r, e = {
49
+ dark: {
50
+ sidebar: "bg-neutral-900 text-white",
51
+ sidebarHeader: "border-white/10",
52
+ sidebarFooter: "border-white/10",
53
+ navItem: "text-white/70 hover:bg-white/5 hover:text-white",
54
+ navItemActive: "bg-primary text-white",
55
+ main: "bg-neutral-950",
56
+ header: "bg-neutral-900 border-white/10 shadow-lg"
57
+ },
58
+ light: {
59
+ sidebar: "bg-white text-neutral-900 border-r border-neutral-200",
60
+ sidebarHeader: "border-neutral-100",
61
+ sidebarFooter: "border-neutral-100",
62
+ navItem: "text-neutral-600 hover:bg-neutral-50 hover:text-neutral-900",
63
+ navItemActive: "bg-primary/5 text-primary border-r-2 border-primary",
64
+ main: "bg-neutral-50",
65
+ header: "bg-white border-neutral-200 shadow-sm"
66
+ },
67
+ modern: {
68
+ sidebar: "bg-neutral-50/80 backdrop-blur-xl text-neutral-900 border-r border-neutral-200/50",
69
+ sidebarHeader: "border-neutral-200/50",
70
+ sidebarFooter: "border-neutral-200/50",
71
+ navItem: "mx-3 my-1 rounded-xl text-neutral-500 hover:bg-white hover:shadow-sm hover:text-neutral-900 transition-all duration-300",
72
+ navItemActive: "mx-3 my-1 rounded-xl bg-white shadow-md shadow-primary/5 text-primary ring-1 ring-primary/10",
73
+ main: "bg-neutral-100/30",
74
+ header: "bg-white/70 backdrop-blur-md border-b border-neutral-200/50 shadow-sm"
75
+ }
76
+ }[n];
98
77
  return {
99
- layout: "flex h-screen overflow-hidden bg-neutral-50",
100
- sidebar: "fixed inset-y-0 left-0 z-50 w-64 bg-neutral-900 text-white transition-transform duration-300 lg:static lg:translate-x-0",
78
+ layout: "flex h-screen overflow-hidden",
79
+ sidebar: ["fixed inset-y-0 left-0 z-50 w-64 transition-transform duration-300 lg:static lg:translate-x-0", e.sidebar].join(" "),
101
80
  sidebarCollapsed: "-translate-x-full",
102
- sidebarHeader: "flex items-center h-16 px-6 border-b border-white/10",
81
+ sidebarHeader: ["flex items-center h-16 px-6 border-b", e.sidebarHeader].join(" "),
103
82
  sidebarContent: "flex-1 overflow-y-auto py-6",
104
- sidebarFooter: "p-4 border-t border-white/10",
105
- navItem: "flex items-center gap-3 px-6 py-3 text-sm font-medium transition-colors hover:bg-white/5 opacity-70 hover:opacity-100",
106
- navItemActive: "bg-primary text-white opacity-100",
107
- main: "flex-1 flex flex-col min-w-0 overflow-hidden",
108
- header: "flex items-center justify-between h-16 px-8 bg-white border-b border-neutral-200 shadow-sm",
83
+ sidebarFooter: ["p-4 border-t", e.sidebarFooter].join(" "),
84
+ navItem: ["flex items-center gap-3 px-6 py-3 text-sm font-medium transition-all duration-200", e.navItem].join(" "),
85
+ navItemActive: e.navItemActive,
86
+ main: ["flex-1 flex flex-col min-w-0 overflow-hidden", e.main].join(" "),
87
+ header: ["flex items-center justify-between h-16 px-8 border-b shadow-sm", e.header].join(" "),
109
88
  content: "flex-1 overflow-y-auto p-8"
110
89
  };
111
90
  }
112
- function g(t = "centered") {
113
- const r = {
91
+ function c(r = "centered") {
92
+ const n = {
114
93
  container: "min-h-screen flex items-center justify-center bg-neutral-50",
115
94
  card: "w-full max-w-md p-8 bg-white rounded-2xl shadow-xl border border-neutral-100",
116
95
  title: "text-3xl font-bold text-center mb-2",
@@ -118,15 +97,15 @@ function g(t = "centered") {
118
97
  form: "space-y-6",
119
98
  footer: "mt-8 text-center text-sm opacity-50"
120
99
  };
121
- return t === "split" ? {
122
- ...r,
100
+ return r === "split" ? {
101
+ ...n,
123
102
  container: "min-h-screen flex",
124
103
  left: "hidden lg:flex flex-1 bg-primary items-center justify-center p-12 text-white",
125
104
  right: "flex-1 flex items-center justify-center p-8 bg-white",
126
105
  card: "w-full max-w-md"
127
- } : r;
106
+ } : n;
128
107
  }
129
- function p(t = "info") {
108
+ function m(r = "info") {
130
109
  return {
131
110
  container: "flex flex-col items-center justify-center p-12 text-center",
132
111
  icon: {
@@ -144,26 +123,26 @@ function p(t = "info") {
144
123
  content: "mt-8 p-6 bg-neutral-50 rounded-lg w-full max-w-2xl text-left"
145
124
  };
146
125
  }
147
- function h() {
126
+ function x() {
148
127
  return {
149
- container: "pb-6 mb-6 border-b border-neutral-100 bg-white",
150
- breadcrumb: "text-xs opacity-40 mb-3 flex items-center gap-2",
128
+ container: "mb-8",
129
+ breadcrumb: "text-xs font-bold uppercase tracking-widest text-neutral-400 mb-3 flex items-center gap-2",
151
130
  heading: "flex items-center justify-between",
152
- left: "flex items-center gap-4",
153
- title: "text-xl font-bold",
154
- subtitle: "text-sm opacity-50 ml-3 border-l border-neutral-200 pl-3",
131
+ left: "flex flex-col gap-1",
132
+ title: "text-2xl font-black text-neutral-900 tracking-tight",
133
+ subtitle: "text-sm font-medium text-neutral-400",
155
134
  extra: "flex items-center gap-3",
156
- footer: "mt-4"
135
+ footer: "mt-6 pt-6 border-t border-neutral-100"
157
136
  };
158
137
  }
159
- function w() {
138
+ function f() {
160
139
  return {
161
140
  container: "p-6 bg-white rounded-xl border border-neutral-100 shadow-sm mb-6",
162
141
  grid: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6",
163
142
  actions: "mt-6 pt-6 border-t border-neutral-50 flex items-center justify-end gap-3"
164
143
  };
165
144
  }
166
- function y() {
145
+ function g() {
167
146
  return {
168
147
  container: "max-w-3xl mx-auto py-8",
169
148
  steps: "flex items-center justify-between mb-12 relative",
@@ -178,18 +157,65 @@ function y() {
178
157
  footer: "mt-8 flex items-center justify-center gap-4"
179
158
  };
180
159
  }
160
+ function p(r) {
161
+ return {
162
+ columns: r,
163
+ moveItem: (e, o, i, a) => {
164
+ console.log(`Moving item ${e} from ${o} to ${i} at index ${a}`);
165
+ }
166
+ };
167
+ }
168
+ function h(r) {
169
+ const n = r.stats || [], t = r.charts || [];
170
+ return {
171
+ stats: n,
172
+ charts: t
173
+ };
174
+ }
175
+ function w(r = !1) {
176
+ let n = r;
177
+ const t = /* @__PURE__ */ new Set();
178
+ return {
179
+ get isCollapsed() {
180
+ return n;
181
+ },
182
+ toggle: () => {
183
+ n = !n, t.forEach((e) => e(n));
184
+ },
185
+ subscribe: (e) => (t.add(e), () => t.delete(e))
186
+ };
187
+ }
188
+ function y(r, n = 0) {
189
+ let t = n;
190
+ const e = /* @__PURE__ */ new Set();
191
+ return {
192
+ get current() {
193
+ return t;
194
+ },
195
+ next: () => {
196
+ t < r - 1 && (t++, e.forEach((o) => o(t)));
197
+ },
198
+ prev: () => {
199
+ t > 0 && (t--, e.forEach((o) => o(t)));
200
+ },
201
+ goTo: (o) => {
202
+ o >= 0 && o < r && (t = o, e.forEach((i) => i(t)));
203
+ },
204
+ subscribe: (o) => (e.add(o), () => e.delete(o))
205
+ };
206
+ }
181
207
  export {
182
- f as getDescriptionClasses,
183
- b as getKanbanClasses,
184
- g as getLoginClasses,
185
- h as getPageHeaderClasses,
186
- w as getQueryFilterClasses,
187
- p as getResultClasses,
188
- m as getShellClasses,
189
- x as getStatCardClasses,
190
- y as getStepFormClasses,
191
- c as useDashboard,
192
- a as useKanban,
193
- d as useShell,
194
- u as useSteps
208
+ u as getDescriptionClasses,
209
+ d as getKanbanClasses,
210
+ c as getLoginClasses,
211
+ x as getPageHeaderClasses,
212
+ f as getQueryFilterClasses,
213
+ m as getResultClasses,
214
+ b as getShellClasses,
215
+ l as getStatCardClasses,
216
+ g as getStepFormClasses,
217
+ h as useDashboard,
218
+ p as useKanban,
219
+ w as useShell,
220
+ y as useSteps
195
221
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sxo/component-admin",
3
- "version": "0.0.0",
3
+ "version": "0.0.1",
4
4
  "description": "Admin dashboard components and layouts for SXO.",
5
5
  "keywords": [
6
6
  "sxo",
@@ -24,8 +24,8 @@
24
24
  "dist"
25
25
  ],
26
26
  "dependencies": {
27
- "@sxo/design": "0.0.0",
28
- "@sxo/ui": "0.0.0"
27
+ "@sxo/design": "0.0.1",
28
+ "@sxo/ui": "0.0.1"
29
29
  },
30
30
  "repository": {
31
31
  "type": "git",
@@ -40,9 +40,9 @@
40
40
  "access": "public"
41
41
  },
42
42
  "devDependencies": {
43
- "vite": "^5.0.0",
44
- "vite-plugin-dts": "^4.0.0",
45
- "typescript": "^5.0.0"
43
+ "typescript": "^5.9.3",
44
+ "vite": "^7.3.1",
45
+ "vite-plugin-dts": "^4.5.4"
46
46
  },
47
47
  "type": "module",
48
48
  "scripts": {