@aithe/aithe-ui 26.2.3 → 26.3.2

package/dist/apps/demo/pages/container.js

@@ -0,0 +1,42 @@
+import { t } from '../../../styles/i18n';
+export const containerPage = {
+    key: 'container',
+    title: () => t('demo.container.title'),
+    description: () => t('demo.container.description'),
+    examples: [
+        {
+            title: () => t('demo.container.callout.title'),
+            description: () => t('demo.container.callout.description'),
+            code: `<aithe-callout type="primary" title="Shipping Note" icon="info">
+  Aithe UI components inherit theme changes automatically through CSS variables.
+</aithe-callout>`,
+        },
+        {
+            title: () => t('demo.container.details.title'),
+            description: () => t('demo.container.details.description'),
+            code: `<aithe-details summary="What does the global theme initializer do?" title="Theme initializer details" icon="info">
+  It registers design tokens, restores the persisted theme and synchronizes the root attribute.
+</aithe-details>`,
+            previewHeight: '200px',
+        },
+        {
+            title: () => t('demo.container.scroller.title'),
+            description: () => t('demo.container.scroller.description'),
+            code: `<aithe-scroller height="220px" shadow>
+  <div style="height:560px;display:grid;place-items:center;color:var(--aithe-color-text-muted);">
+    Scroll inside this container to observe edge shadows and themed scrollbars.
+  </div>
+</aithe-scroller>`,
+            previewHeight: '260px',
+        },
+        {
+            title: () => t('demo.container.splitPanel.title'),
+            description: () => t('demo.container.splitPanel.description'),
+            code: `<aithe-split-panel value="38">
+  <div slot="start" style="height:240px;display:grid;place-items:center;background:var(--aithe-neutral-1);">Navigator</div>
+  <div slot="end" style="height:240px;display:grid;place-items:center;background:var(--aithe-color-surface);">Editor</div>
+</aithe-split-panel>`,
+            previewHeight: '300px',
+        },
+    ],
+};

package/dist/apps/demo/pages/dashboard.js

@@ -0,0 +1,159 @@
+import { t } from '../../../styles/i18n';
+export const dashboardPage = {
+    key: 'dashboard',
+    title: () => t('demo.dashboard.title'),
+    description: () => t('demo.dashboard.description'),
+    examples: [
+        {
+            title: () => t('demo.dashboard.basic.title'),
+            description: () => t('demo.dashboard.basic.description'),
+            code: `<aithe-dashboard columns="12" cell-height="60" gap="10" storage-key="demo-basic">
+  <aithe-dashboard-panel panel-id="revenue" x="0" y="0" w="6" h="4" label="Revenue" icon="barChart">
+    <div style="display:flex;flex-direction:column;gap:8px;">
+      <span style="font-size:28px;font-weight:700;color:var(--aithe-primary-6);">$128,430</span>
+      <span style="color:var(--aithe-success-6);">↑ 12.5% vs last month</span>
+    </div>
+  </aithe-dashboard-panel>
+  <aithe-dashboard-panel panel-id="users" x="6" y="0" w="6" h="4" label="Active Users" icon="user">
+    <div style="display:flex;flex-direction:column;gap:8px;">
+      <span style="font-size:28px;font-weight:700;color:var(--aithe-primary-6);">3,842</span>
+      <span style="color:var(--aithe-success-6);">↑ 8.1% vs last week</span>
+    </div>
+  </aithe-dashboard-panel>
+  <aithe-dashboard-panel panel-id="tasks" x="0" y="4" w="4" h="4" label="Tasks" icon="check">
+    <div style="display:flex;flex-direction:column;gap:8px;">
+      <span style="font-size:28px;font-weight:700;color:var(--aithe-warning-6);">27</span>
+      <span style="color:var(--aithe-color-text-muted);">Pending review</span>
+    </div>
+  </aithe-dashboard-panel>
+  <aithe-dashboard-panel panel-id="alerts" x="4" y="4" w="8" h="4" label="Alerts" icon="warning">
+    <div style="display:flex;flex-direction:column;gap:8px;">
+      <span style="font-size:28px;font-weight:700;color:var(--aithe-danger-6);">5</span>
+      <span style="color:var(--aithe-color-text-muted);">Critical alerts require attention</span>
+    </div>
+  </aithe-dashboard-panel>
+</aithe-dashboard>`,
+            previewHeight: '520px',
+            layout: 'vertical',
+        },
+        {
+            title: () => t('demo.dashboard.locked.title'),
+            description: () => t('demo.dashboard.locked.description'),
+            code: `<aithe-dashboard columns="12" cell-height="60" gap="10" locked storage-key="demo-locked">
+  <aithe-dashboard-panel panel-id="kpi1" x="0" y="0" w="3" h="3" label="CPU" icon="barChart">
+    <span style="font-size:24px;font-weight:700;">72%</span>
+  </aithe-dashboard-panel>
+  <aithe-dashboard-panel panel-id="kpi2" x="3" y="0" w="3" h="3" label="Memory" icon="barChart">
+    <span style="font-size:24px;font-weight:700;">4.2 GB</span>
+  </aithe-dashboard-panel>
+  <aithe-dashboard-panel panel-id="kpi3" x="6" y="0" w="3" h="3" label="Disk" icon="barChart">
+    <span style="font-size:24px;font-weight:700;">128 GB</span>
+  </aithe-dashboard-panel>
+  <aithe-dashboard-panel panel-id="kpi4" x="9" y="0" w="3" h="3" label="Network" icon="barChart">
+    <span style="font-size:24px;font-weight:700;">1.2 Gbps</span>
+  </aithe-dashboard-panel>
+</aithe-dashboard>`,
+            previewHeight: '320px',
+            layout: 'vertical',
+        },
+        {
+            title: () => t('demo.dashboard.noToolbar.title'),
+            description: () => t('demo.dashboard.noToolbar.description'),
+            code: `<aithe-dashboard columns="6" cell-height="80" gap="8" show-toolbar="false" storage-key="demo-notoolbar">
+  <aithe-dashboard-panel panel-id="card1" x="0" y="0" w="3" h="2" label="Widget A" show-header="false">
+    <div style="display:flex;align-items:center;justify-content:center;height:100%;">
+      <span style="font-size:20px;font-weight:600;">Embedded View</span>
+    </div>
+  </aithe-dashboard-panel>
+  <aithe-dashboard-panel panel-id="card2" x="3" y="0" w="3" h="2" label="Widget B" show-header="false">
+    <div style="display:flex;align-items:center;justify-content:center;height:100%;">
+      <span style="font-size:20px;font-weight:600;">Chart Area</span>
+    </div>
+  </aithe-dashboard-panel>
+</aithe-dashboard>`,
+            previewHeight: '280px',
+            layout: 'vertical',
+        },
+        {
+            title: () => t('demo.dashboard.customContent.title'),
+            description: () => t('demo.dashboard.customContent.description'),
+            code: `<aithe-dashboard columns="12" cell-height="60" gap="10" storage-key="demo-content">
+  <aithe-dashboard-panel panel-id="profile" x="0" y="0" w="4" h="5" label="User Profile" icon="user">
+    <div style="display:flex;flex-direction:column;gap:12px;">
+      <aithe-avatar size="lg" text="JD"></aithe-avatar>
+      <div>
+        <div style="font-weight:600;">Jane Doe</div>
+        <div style="color:var(--aithe-color-text-muted);font-size:13px;">Product Manager</div>
+      </div>
+      <aithe-tag variant="success">Active</aithe-tag>
+    </div>
+  </aithe-dashboard-panel>
+  <aithe-dashboard-panel panel-id="activity" x="4" y="0" w="8" h="5" label="Recent Activity" icon="barChart">
+    <div style="display:flex;flex-direction:column;gap:8px;">
+      <div style="display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid var(--aithe-color-border);">
+        <span>Deployed v2.4.0</span><aithe-tag variant="success">Success</aithe-tag>
+      </div>
+      <div style="display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid var(--aithe-color-border);">
+        <span>DB Migration</span><aithe-tag variant="warning">Pending</aithe-tag>
+      </div>
+      <div style="display:flex;justify-content:space-between;padding:4px 0;">
+        <span>API Rate Limit</span><aithe-tag variant="danger">Alert</aithe-tag>
+      </div>
+    </div>
+  </aithe-dashboard-panel>
+  <aithe-dashboard-panel panel-id="settings" x="0" y="5" w="12" h="3" label="Quick Settings" icon="settings" closable>
+    <div style="display:flex;gap:24px;align-items:center;flex-wrap:wrap;">
+      <aithe-switch checked>Notifications</aithe-switch>
+      <aithe-switch>Auto-deploy</aithe-switch>
+      <aithe-switch checked>Monitoring</aithe-switch>
+    </div>
+  </aithe-dashboard-panel>
+</aithe-dashboard>`,
+            previewHeight: '600px',
+            layout: 'vertical',
+        },
+        {
+            title: () => t('demo.dashboard.persistence.title'),
+            description: () => t('demo.dashboard.persistence.description'),
+            code: `<aithe-dashboard columns="8" cell-height="70" gap="12" storage-key="demo-persist" show-visibility show-lock show-reset show-fullscreen>
+  <aithe-dashboard-panel panel-id="p1" x="0" y="0" w="4" h="3" label="Panel A" icon="barChart" closable>
+    <p style="margin:0;color:var(--aithe-color-text-muted);">Drag, resize, close, then refresh. State is saved to localStorage.</p>
+  </aithe-dashboard-panel>
+  <aithe-dashboard-panel panel-id="p2" x="4" y="0" w="4" h="3" label="Panel B" icon="user" closable>
+    <p style="margin:0;color:var(--aithe-color-text-muted);">Use the toolbar: visibility, lock, reset, fullscreen.</p>
+  </aithe-dashboard-panel>
+  <aithe-dashboard-panel panel-id="p3" x="0" y="3" w="8" h="2" label="Panel C" icon="warning" closable>
+    <p style="margin:0;color:var(--aithe-color-text-muted);">Try the reset button to restore initial layout.</p>
+  </aithe-dashboard-panel>
+</aithe-dashboard>`,
+            previewHeight: '480px',
+            layout: 'vertical',
+        },
+        {
+            title: () => t('demo.dashboard.dense.title'),
+            description: () => t('demo.dashboard.dense.description'),
+            code: `<aithe-dashboard columns="16" cell-height="40" gap="6" storage-key="demo-dense" show-toolbar="false">
+  <aithe-dashboard-panel panel-id="d1" x="0" y="0" w="4" h="2" label="M1" show-header="false">
+    <div style="display:flex;align-items:center;justify-content:center;height:100%;font-size:13px;font-weight:600;">Metric 1</div>
+  </aithe-dashboard-panel>
+  <aithe-dashboard-panel panel-id="d2" x="4" y="0" w="4" h="2" label="M2" show-header="false">
+    <div style="display:flex;align-items:center;justify-content:center;height:100%;font-size:13px;font-weight:600;">Metric 2</div>
+  </aithe-dashboard-panel>
+  <aithe-dashboard-panel panel-id="d3" x="8" y="0" w="4" h="2" label="M3" show-header="false">
+    <div style="display:flex;align-items:center;justify-content:center;height:100%;font-size:13px;font-weight:600;">Metric 3</div>
+  </aithe-dashboard-panel>
+  <aithe-dashboard-panel panel-id="d4" x="12" y="0" w="4" h="2" label="M4" show-header="false">
+    <div style="display:flex;align-items:center;justify-content:center;height:100%;font-size:13px;font-weight:600;">Metric 4</div>
+  </aithe-dashboard-panel>
+  <aithe-dashboard-panel panel-id="d5" x="0" y="2" w="8" h="3" label="Chart" icon="barChart">
+    <div style="display:flex;align-items:center;justify-content:center;height:100%;color:var(--aithe-color-text-muted);">Chart Area</div>
+  </aithe-dashboard-panel>
+  <aithe-dashboard-panel panel-id="d6" x="8" y="2" w="8" h="3" label="Table" icon="barChart">
+    <div style="display:flex;align-items:center;justify-content:center;height:100%;color:var(--aithe-color-text-muted);">Table Area</div>
+  </aithe-dashboard-panel>
+</aithe-dashboard>`,
+            previewHeight: '320px',
+            layout: 'vertical',
+        },
+    ],
+};

package/dist/apps/demo/pages/data.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../../../../src/apps/demo/pages/data.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAG1C,eAAO,MAAM,QAAQ,EAAE,QAkItB,CAAC"}
+{"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../../../../src/apps/demo/pages/data.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAO1C,eAAO,MAAM,QAAQ,EAAE,QAmUtB,CAAC"}

package/dist/apps/demo/pages/data.js

@@ -0,0 +1,327 @@
+import { t } from '../../../styles/i18n';
+const TABLE_DATA = '[{"id":1,"name":"Theme Engine","owner":"Design Systems","status":"Ready"},{"id":2,"name":"Component API","owner":"Frontend Platform","status":"Review"},{"id":3,"name":"Demo Router","owner":"Experience Team","status":"Ready"},{"id":4,"name":"Icon Library","owner":"Design Systems","status":"Blocked"},{"id":5,"name":"Auth Module","owner":"Backend Team","status":"Ready"}]';
+const TABLE_COLUMNS = '[{"id":"name","title":"Module","icon":"folder","sortable":true},{"id":"owner","title":"Owner"},{"id":"status","title":"Status","intent":"success","sortable":true}]';
+export const dataPage = {
+    key: 'data',
+    title: () => t('demo.data.title'),
+    description: () => t('demo.data.description'),
+    examples: [
+        {
+            title: () => t('demo.data.table.title'),
+            description: () => t('demo.data.table.description'),
+            code: `<aithe-table
+  striped
+  selectable="multi"
+  .selectionSet={selectionSet}
+   columns='${TABLE_COLUMNS}'
+  data='${TABLE_DATA}'
+></aithe-table>`,
+            previewHeight: '320px',
+        },
+        {
+            title: () => t('demo.data.tableFixed.title'),
+            description: () => t('demo.data.tableFixed.description'),
+            code: `<aithe-table
+  striped
+  bordered
+  selectable="multi"
+  .selectionSet={selectionSet}
+  data='${TABLE_DATA}'
+>
+  <aithe-table-column id="name" title="Module" fixed="left" width="160" sortable icon="folder"></aithe-table-column>
+  <aithe-table-column id="owner" title="Owner" width="200"></aithe-table-column>
+  <aithe-table-column id="status" title="Status" width="200" variant="success" sortable></aithe-table-column>
+  <aithe-table-column id="version" title="Version" width="200"></aithe-table-column>
+  <aithe-table-column id="priority" title="Priority" width="200"></aithe-table-column>
+  <aithe-table-column id="progress" title="Progress" width="200"></aithe-table-column>
+  <aithe-table-column id="action" title="Action" fixed="right" width="120" align="center"></aithe-table-column>
+</aithe-table>`,
+            previewHeight: '320px',
+        },
+        {
+            title: () => t('demo.data.tableResize.title'),
+            description: () => t('demo.data.tableResize.description'),
+            code: `<aithe-table
+  striped
+  bordered
+  selectable="multi"
+  .selectionSet={selectionSet}
+  data='${TABLE_DATA}'
+>
+  <aithe-table-column id="name" title="Module" resizable min-width="120" width="200" sortable icon="folder"></aithe-table-column>
+  <aithe-table-column id="owner" title="Owner" resizable min-width="100" width="200"></aithe-table-column>
+  <aithe-table-column id="status" title="Status" resizable min-width="100" width="200" variant="success" sortable></aithe-table-column>
+</aithe-table>`,
+            previewHeight: '320px',
+        },
+        {
+            title: () => t('demo.data.tableReorder.title'),
+            description: () => t('demo.data.tableReorder.description'),
+            code: `<aithe-table
+  striped
+  bordered
+  selectable="multi"
+  .selectionSet={selectionSet}
+  data='${TABLE_DATA}'
+>
+  <aithe-table-column id="name" title="Module" draggable sortable icon="folder"></aithe-table-column>
+  <aithe-table-column id="owner" title="Owner" draggable></aithe-table-column>
+  <aithe-table-column id="status" title="Status" draggable variant="success" sortable></aithe-table-column>
+</aithe-table>`,
+            previewHeight: '320px',
+        },
+        {
+            title: () => t('demo.data.tableLoading.title'),
+            description: () => t('demo.data.tableLoading.description'),
+            code: `<aithe-table
+  loading
+  loading-text="Loading modules..."
+  striped
+  selectable="multi"
+  .selectionSet={selectionSet}
+  columns='${TABLE_COLUMNS}'
+  data='${TABLE_DATA}'
+></aithe-table>`,
+            previewHeight: '320px',
+        },
+        {
+            title: () => t('demo.data.tableSingleSelect.title'),
+            description: () => t('demo.data.tableSingleSelect.description'),
+            code: `<aithe-table
+  striped
+  bordered
+  selectable="single"
+  .selectionSet={selectionSet}
+  columns='${TABLE_COLUMNS}'
+  data='${TABLE_DATA}'
+></aithe-table>`,
+            previewHeight: '320px',
+        },
+        {
+            title: () => t('demo.data.tableKeyboard.title'),
+            description: () => t('demo.data.tableKeyboard.description'),
+            code: `<aithe-table
+  striped
+  bordered
+  selectable="multi"
+  .selectionSet={selectionSet}
+  columns='${TABLE_COLUMNS}'
+  data='${TABLE_DATA}'
+></aithe-table>`,
+            previewHeight: '320px',
+        },
+        {
+            title: () => t('demo.data.tabs.title'),
+            description: () => t('demo.data.tabs.description'),
+            code: `<aithe-tab-group type="card" active-key="tokens">
+   <aithe-tab-pane tab-id="tokens" label="Tokens" title="Theme tokens" icon="palette">Theme tokens and semantic scales.</aithe-tab-pane>
+  <aithe-tab-pane tab-id="components" label="Components" title="Component catalog" icon="box">Enterprise-ready component catalog.</aithe-tab-pane>
+  <aithe-tab-pane tab-id="demo" label="Demo Site" title="Live demo" icon="play">Sidebar routing and live editing.</aithe-tab-pane>
+</aithe-tab-group>`,
+            previewHeight: '220px',
+        },
+        {
+            title: () => t('demo.data.tabsTypes.title'),
+            description: () => t('demo.data.tabsTypes.description'),
+            code: `<div style="display:flex;flex-direction:column;gap:24px;">
+  <aithe-tabs type="line" active-key="a">
+    <aithe-tab-pane tab-id="a" label="Line Tab A">Line style content A.</aithe-tab-pane>
+    <aithe-tab-pane tab-id="b" label="Line Tab B">Line style content B.</aithe-tab-pane>
+  </aithe-tabs>
+  <aithe-tabs type="card" active-key="x">
+    <aithe-tab-pane tab-id="x" label="Card Tab X">Card style content X.</aithe-tab-pane>
+    <aithe-tab-pane tab-id="y" label="Card Tab Y">Card style content Y.</aithe-tab-pane>
+  </aithe-tabs>
+  <aithe-tabs type="button" active-key="1">
+    <aithe-tab-pane tab-id="1" label="Button Tab 1">Button style content 1.</aithe-tab-pane>
+    <aithe-tab-pane tab-id="2" label="Button Tab 2">Button style content 2.</aithe-tab-pane>
+  </aithe-tabs>
+</div>`,
+            previewHeight: '340px',
+        },
+        {
+            title: () => t('demo.data.tabsIcons.title'),
+            description: () => t('demo.data.tabsIcons.description'),
+            code: `<aithe-tabs type="card" active-key="home">
+  <aithe-tab-pane tab-id="home" label="Home" icon="home">Home page content.</aithe-tab-pane>
+  <aithe-tab-pane tab-id="settings" label="Settings" icon="settings">Settings page content.</aithe-tab-pane>
+  <aithe-tab-pane tab-id="user" label="Profile" icon="user">Profile page content.</aithe-tab-pane>
+</aithe-tabs>`,
+            previewHeight: '220px',
+        },
+        {
+            title: () => t('demo.data.tabsClosable.title'),
+            description: () => t('demo.data.tabsClosable.description'),
+            code: `<aithe-tabs type="card" active-key="tab1">
+  <aithe-tab-pane tab-id="tab1" label="Tab 1" closable>Closable tab content 1.</aithe-tab-pane>
+  <aithe-tab-pane tab-id="tab2" label="Tab 2" closable>Closable tab content 2.</aithe-tab-pane>
+  <aithe-tab-pane tab-id="tab3" label="Tab 3" closable>Closable tab content 3.</aithe-tab-pane>
+</aithe-tabs>`,
+            previewHeight: '220px',
+        },
+        {
+            title: () => t('demo.data.tabsAddable.title'),
+            description: () => t('demo.data.tabsAddable.description'),
+            code: `<aithe-tabs type="card" active-key="a" addable>
+  <aithe-tab-pane tab-id="a" label="Tab A" closable>Addable tab content A.</aithe-tab-pane>
+  <aithe-tab-pane tab-id="b" label="Tab B" closable>Addable tab content B.</aithe-tab-pane>
+</aithe-tabs>`,
+            previewHeight: '220px',
+        },
+        {
+            title: () => t('demo.data.tabsDisabled.title'),
+            description: () => t('demo.data.tabsDisabled.description'),
+            code: `<aithe-tabs type="card" active-key="enabled1">
+  <aithe-tab-pane tab-id="enabled1" label="Enabled 1">This tab is active and clickable.</aithe-tab-pane>
+  <aithe-tab-pane tab-id="disabled1" label="Disabled 1" disabled>This tab is disabled.</aithe-tab-pane>
+  <aithe-tab-pane tab-id="enabled2" label="Enabled 2">This tab is also clickable.</aithe-tab-pane>
+  <aithe-tab-pane tab-id="disabled2" label="Disabled 2" disabled>This tab is also disabled.</aithe-tab-pane>
+</aithe-tabs>`,
+            previewHeight: '220px',
+        },
+        {
+            title: () => t('demo.data.tabsOverflow.title'),
+            description: () => t('demo.data.tabsOverflow.description'),
+            code: `<aithe-tabs max-visible-tabs="3" type="card" active-key="tab1">
+  <aithe-tab-pane tab-id="tab1" label="Tab 1">Overflow demo content 1.</aithe-tab-pane>
+  <aithe-tab-pane tab-id="tab2" label="Tab 2">Overflow demo content 2.</aithe-tab-pane>
+  <aithe-tab-pane tab-id="tab3" label="Tab 3">Overflow demo content 3.</aithe-tab-pane>
+  <aithe-tab-pane tab-id="tab4" label="Tab 4">Overflow demo content 4.</aithe-tab-pane>
+  <aithe-tab-pane tab-id="tab5" label="Tab 5">Overflow demo content 5.</aithe-tab-pane>
+</aithe-tabs>`,
+            previewHeight: '220px',
+        },
+        {
+            title: () => t('demo.data.tabsExtraSlot.title'),
+            description: () => t('demo.data.tabsExtraSlot.description'),
+            code: `<aithe-tabs type="card" active-key="tab1">
+  <aithe-tab-pane tab-id="tab1" label="Tab 1">Extra slot demo content 1.</aithe-tab-pane>
+  <aithe-tab-pane tab-id="tab2" label="Tab 2">Extra slot demo content 2.</aithe-tab-pane>
+  <span slot="extra">
+    <aithe-button type="primary" size="small">Action</aithe-button>
+  </span>
+</aithe-tabs>`,
+            previewHeight: '220px',
+        },
+        {
+            title: () => t('demo.data.tree.title'),
+            description: () => t('demo.data.tree.description'),
+            code: `<aithe-tree
+  title="Project structure"
+  icon="folder"
+  checkable
+  expand-all
+  data='[
+     {"label":"Foundation","id":"foundation","icon":"folder","children":[
+        {"label":"Theme","id":"theme","icon":"palette","intent":"primary"},
+       {"label":"Typography","id":"typography","icon":"edit"}
+     ]},
+     {"label":"Components","id":"components","icon":"box","children":[
+        {"label":"Basic","id":"basic","intent":"success"},
+        {"label":"Feedback","id":"feedback","intent":"warning"}
+     ]}
+  ]'
+></aithe-tree>`,
+            previewHeight: '260px',
+        },
+        {
+            title: () => t('demo.data.pagination.title'),
+            description: () => t('demo.data.pagination.description'),
+            code: `<aithe-pagination total="96" page-size="12" current-page="3"></aithe-pagination>`,
+        },
+        {
+            title: () => t('demo.data.timelineData.title'),
+            description: () => t('demo.data.timelineData.description'),
+            code: `<aithe-timeline
+  items='[{"content":"Design tokens published","timestamp":"09:00","type":"primary"},{"content":"Demo routing completed","timestamp":"11:30","type":"success"},{"content":"Accessibility audit pending","timestamp":"15:20","type":"warning"}]'
+></aithe-timeline>`,
+            previewHeight: '260px',
+        },
+        {
+            title: () => t('demo.data.timelineDom.title'),
+            description: () => t('demo.data.timelineDom.description'),
+            code: `<aithe-timeline>
+  <aithe-timeline-item type="primary" timestamp="09:00">Design tokens published</aithe-timeline-item>
+  <aithe-timeline-item type="success" timestamp="11:30">Demo routing completed</aithe-timeline-item>
+  <aithe-timeline-item type="warning" timestamp="15:20">Accessibility audit pending</aithe-timeline-item>
+</aithe-timeline>`,
+            previewHeight: '260px',
+        },
+        {
+            title: () => t('demo.data.treeMenu.title'),
+            description: () => t('demo.data.treeMenu.description'),
+            code: `<aithe-tree-menu
+  active="overview"
+  items='[
+     {"label":"Overview","id":"overview","icon":"home"},
+     {"label":"Assets","id":"assets","icon":"star","children":[
+       {"label":"Component Library","id":"library"},
+       {"label":"Design Tokens","id":"tokens"}
+     ]},
+     {"label":"Governance","id":"governance","icon":"settings"},
+     {"label":"Reports","id":"reports","icon":"barChart","children":[
+       {"label":"Usage Analytics","id":"analytics"},
+       {"label":"Compliance","id":"compliance","disabled":true}
+     ]}
+  ]'
+></aithe-tree-menu>`,
+            previewHeight: '320px',
+        },
+        {
+            title: () => t('demo.data.treeMenuHorizontal.title'),
+            description: () => t('demo.data.treeMenuHorizontal.description'),
+            code: `<aithe-tree-menu
+  direction="horizontal"
+  active="overview"
+  items='[
+     {"label":"Overview","id":"overview","icon":"home"},
+     {"label":"Assets","id":"assets","icon":"star","children":[
+       {"label":"Component Library","id":"library"},
+       {"label":"Design Tokens","id":"tokens"}
+     ]},
+     {"label":"Governance","id":"governance","icon":"settings"},
+     {"label":"Reports","id":"reports","icon":"barChart","children":[
+       {"label":"Usage Analytics","id":"analytics"},
+       {"label":"Compliance","id":"compliance","disabled":true}
+     ]}
+  ]'
+></aithe-tree-menu>`,
+            previewHeight: '320px',
+        },
+        {
+            title: () => t('demo.data.dropdown.title'),
+            description: () => t('demo.data.dropdown.description'),
+            code: `<div style="display:flex;gap:16px;align-items:center;flex-wrap:wrap;">
+  <aithe-dropdown
+    title="Context menu"
+    icon="menu"
+      items='[{"label":"Open playground","id":"playground","icon":"play"},{"label":"Themes","id":"themes","icon":"palette","children":[{"label":"Light","id":"light"},{"label":"Dark","id":"dark"},{"label":"Blue","id":"blue"}]},{"type":"divider","label":"","id":"divider"},{"label":"Delete workspace","id":"delete","icon":"trash","variant":"danger"}]'
+  >
+    <aithe-button type="default">Dropdown</aithe-button>
+  </aithe-dropdown>
+  <aithe-dropdown trigger="hover" placement="bottom-end"
+     items='[{"label":"Profile","id":"profile","icon":"user"},{"label":"Settings","id":"settings","icon":"settings"},{"label":"Sign out","id":"signout","icon":"external","variant":"danger"}]'
+  >
+    <aithe-button type="primary">Hover Dropdown</aithe-button>
+  </aithe-dropdown>
+</div>`,
+        },
+        {
+            title: () => t('demo.data.boxTable.title'),
+            description: () => t('demo.data.boxTable.description'),
+            code: `<aithe-box-table
+  mode="box"
+  box-cols="3"
+  striped
+  selectable="multi"
+  data='[{"id":1,"name":"Theme Engine","owner":"Design Systems","status":"Ready","version":"v2.1.0"},{"id":2,"name":"Component API","owner":"Frontend Platform","status":"Review","version":"v1.8.3"},{"id":3,"name":"Demo Router","owner":"Experience Team","status":"Ready","version":"v3.0.1"},{"id":4,"name":"Theme Engine","owner":"Design Systems","status":"Blocked","version":"v2.1.0"},{"id":5,"name":"Component API","owner":"Frontend Platform","status":"Review","version":"v1.8.3"},{"id":6,"name":"Demo Router","owner":"Experience Team","status":"Ready","version":"v3.0.1"}]'
+>
+  <aithe-table-column id="name" title="Module" box="name"></aithe-table-column>
+  <aithe-table-column id="owner" title="Owner" box="tags"></aithe-table-column>
+  <aithe-table-column id="status" title="Status" box="status"></aithe-table-column>
+  <aithe-table-column id="version" title="Version" box="content"></aithe-table-column>
+</aithe-box-table>`,
+            previewHeight: '480px',
+        },
+    ],
+};

package/dist/apps/demo/pages/display.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"display.d.ts","sourceRoot":"","sources":["../../../../src/apps/demo/pages/display.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAmB1C,eAAO,MAAM,WAAW,EAAE,QAqDzB,CAAC"}
+{"version":3,"file":"display.d.ts","sourceRoot":"","sources":["../../../../src/apps/demo/pages/display.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAmB1C,eAAO,MAAM,WAAW,EAAE,QAsRzB,CAAC"}