@abydahana/aksara-ui 1.0.1 → 1.1.1

package/dist/components/navigation/sidebar.d.ts

@@ -0,0 +1,81 @@
+export interface SidebarNavItemProps {
+    /** Unique ID (used for tab panel targeting) */
+    id?: string;
+    /** Label text */
+    label: string;
+    /** Icon HTML string */
+    icon?: string;
+    /** Badge text or count */
+    badge?: string;
+    /** Active state */
+    active?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Link mode: render as <a href="..."> */
+    href?: string;
+    /** Tab mode: render as <button data-tabs="#panelId"> */
+    panelTarget?: string;
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+export interface SidebarNavProps {
+    items: SidebarNavItemProps[];
+    /** Brand section title at the top */
+    title?: string;
+    /** Brand section subtitle */
+    subtitle?: string;
+    /** Brand icon HTML */
+    brandIcon?: string;
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+/**
+ * Sidebar navigation that supports two modes:
+ *
+ * - **Tab mode** (`panelTarget` prop): renders `<button data-tabs="#panelId">` —
+ *   integrates with Aksara's tab JS to show/hide content panels.
+ * - **Link mode** (`href` prop): renders `<a href="...">` — plain navigation links.
+ *
+ * @example Tab mode
+ * SidebarNav({
+ *   title: "Settings",
+ *   items: [
+ *     { label: "Privacy", icon: '<span class="mdi mdi-lock-outline">', panelTarget: "#panel-privacy", active: true },
+ *     { label: "Notifications", icon: '<span class="mdi mdi-bell-outline">', panelTarget: "#panel-notif" },
+ *   ]
+ * })
+ *
+ * @example Link mode
+ * SidebarNav({
+ *   items: [
+ *     { label: "Dashboard", icon: '<span class="mdi mdi-home-outline">', href: "/dashboard", active: true },
+ *     { label: "Settings", icon: '<span class="mdi mdi-cog-outline">', href: "/settings" },
+ *   ]
+ * })
+ */
+export declare function SidebarNav(props: SidebarNavProps): string;
+export declare const sidebarNav: typeof SidebarNav;
+export interface SidebarNavHeaderProps {
+    label: string;
+    className?: string;
+}
+/** A group header label inside a SidebarNav */
+export declare function SidebarNavHeader(props: SidebarNavHeaderProps): string;
+export declare const sidebarNavHeader: typeof SidebarNavHeader;
+export interface SidebarLayoutProps {
+    sidebar: string;
+    content: string;
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+/**
+ * Two-column layout wrapper: sidebar pane on the left, content area on the right.
+ *
+ * @example
+ * SidebarLayout({
+ *   sidebar: SidebarNav({ ... }),
+ *   content: '<div class="p-5">Panel content here</div>'
+ * })
+ */
+export declare function SidebarLayout(props: SidebarLayoutProps): string;
+export declare const sidebarLayout: typeof SidebarLayout;

package/dist/components/navigation/sidebar.js

@@ -0,0 +1,82 @@
+import { classNames, escapeHtml, toAttributes } from "../utils";
+/**
+ * Sidebar navigation that supports two modes:
+ *
+ * - **Tab mode** (`panelTarget` prop): renders `<button data-tabs="#panelId">` —
+ *   integrates with Aksara's tab JS to show/hide content panels.
+ * - **Link mode** (`href` prop): renders `<a href="...">` — plain navigation links.
+ *
+ * @example Tab mode
+ * SidebarNav({
+ *   title: "Settings",
+ *   items: [
+ *     { label: "Privacy", icon: '<span class="mdi mdi-lock-outline">', panelTarget: "#panel-privacy", active: true },
+ *     { label: "Notifications", icon: '<span class="mdi mdi-bell-outline">', panelTarget: "#panel-notif" },
+ *   ]
+ * })
+ *
+ * @example Link mode
+ * SidebarNav({
+ *   items: [
+ *     { label: "Dashboard", icon: '<span class="mdi mdi-home-outline">', href: "/dashboard", active: true },
+ *     { label: "Settings", icon: '<span class="mdi mdi-cog-outline">', href: "/settings" },
+ *   ]
+ * })
+ */
+export function SidebarNav(props) {
+    const { items = [], title = "", subtitle = "", brandIcon = "", className = "", attributes } = props;
+    const baseAttrs = toAttributes(attributes);
+    // Brand section
+    const brandHtml = title
+        ? `<div class="sidebar-nav-brand">${brandIcon ? `<span class="sidebar-nav-icon">${brandIcon}</span>` : ""}<div><span class="sidebar-nav-brand-title">${escapeHtml(title)}</span>${subtitle ? `<span class="sidebar-nav-brand-subtitle">${escapeHtml(subtitle)}</span>` : ""}</div></div>`
+        : "";
+    // Items
+    const itemsHtml = items
+        .map((item) => {
+        const isLink = Boolean(item.href);
+        const isTab = Boolean(item.panelTarget) && !isLink;
+        const Tag = isLink ? "a" : "button";
+        const itemClasses = classNames("sidebar-nav-item", item.active && "active", item.disabled && "disabled", item.className);
+        const itemAttrs = toAttributes({
+            href: isLink ? item.href : undefined,
+            type: !isLink ? "button" : undefined,
+            "data-tabs": isTab ? item.panelTarget : undefined,
+            role: isTab ? "tab" : undefined,
+            "aria-selected": isTab ? (item.active ? "true" : "false") : undefined,
+            tabindex: isTab ? (item.active ? "0" : "-1") : undefined,
+            id: isTab && item.id ? `sidebar-tab-${item.id}` : item.id,
+            "aria-controls": isTab && item.id ? item.id : undefined,
+            disabled: !isLink && item.disabled ? true : undefined,
+            "aria-disabled": item.disabled ? "true" : undefined,
+            "aria-current": isLink && item.active ? "page" : undefined,
+            ...item.attributes
+        });
+        const iconHtml = item.icon ? `<span class="sidebar-nav-icon" aria-hidden="true">${item.icon}</span>` : "";
+        const badgeHtml = item.badge ? `<span class="sidebar-nav-badge">${escapeHtml(item.badge)}</span>` : "";
+        return `<${Tag} class="${itemClasses}"${itemAttrs}>${iconHtml}<span class="sidebar-nav-label">${escapeHtml(item.label)}</span>${badgeHtml}</${Tag}>`;
+    })
+        .join("");
+    return `<nav class="${classNames("sidebar-nav", className)}"${baseAttrs}>${brandHtml}${itemsHtml}</nav>`.trim();
+}
+export const sidebarNav = SidebarNav;
+/** A group header label inside a SidebarNav */
+export function SidebarNavHeader(props) {
+    const { label, className = "" } = props;
+    return `<span class="${classNames("sidebar-nav-header", className)}">${escapeHtml(label)}</span>`;
+}
+export const sidebarNavHeader = SidebarNavHeader;
+/**
+ * Two-column layout wrapper: sidebar pane on the left, content area on the right.
+ *
+ * @example
+ * SidebarLayout({
+ *   sidebar: SidebarNav({ ... }),
+ *   content: '<div class="p-5">Panel content here</div>'
+ * })
+ */
+export function SidebarLayout(props) {
+    const { sidebar, content, className = "", attributes } = props;
+    const baseAttrs = toAttributes(attributes);
+    return `<div class="${classNames("sidebar-layout", className)}"${baseAttrs}><div class="sidebar-pane">${sidebar}</div><div class="sidebar-content">${content}</div></div>`.trim();
+}
+export const sidebarLayout = SidebarLayout;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abydahana/aksara-ui",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "publishConfig": {
     "access": "public"
   },
@@ -73,13 +73,16 @@
     "LICENSE"
   ],
   "scripts": {
+    "dev": "node --import tsx src/generator/dev.ts",
     "build": "node --import tsx src/generator/build.ts",
     "test": "node --import tsx src/tests/run.ts",
     "check": "tsc --noEmit",
-    "lint": "eslint src eslint.config.js",
-    "lint:fix": "eslint src eslint.config.js --fix",
-    "format": "prettier --write . && eslint src eslint.config.js --fix",
-    "format:check": "prettier --check . && eslint src eslint.config.js",
+    "lint": "eslint src eslint.config.ts",
+    "lint:fix": "eslint src eslint.config.ts --fix",
+    "format": "prettier --write . && eslint src eslint.config.ts --fix",
+    "format:check": "prettier --check . && eslint src eslint.config.ts",
+    "validate": "npm run check && npm run format:check && npm run test && npm run build",
+    "setup:hooks": "git config core.hooksPath .githooks && chmod +x .githooks/pre-commit",
     "prepare": "npm run build",
     "all": "npm run format && npm run lint && npm run test && npm run build",
     "prepublishOnly": "npm run all"
@@ -102,6 +105,7 @@
     "eslint": "^10.9.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-unicorn": "^65.0.1",
+    "jiti": "^2.7.0",
     "prettier": "^3.9.6",
     "tsx": "^4.19.3",
     "typescript": "^5.9.3",