@abydahana/aksara-ui 1.1.0 → 1.1.1

package/dist/components/data/index.d.ts

@@ -7,3 +7,4 @@ export * from "./media-grid";
 export * from "./avatar";
 export * from "./bento";
 export * from "./timeline";
+export * from "./settings";

package/dist/components/data/index.js

@@ -7,3 +7,4 @@ export * from "./media-grid";
 export * from "./avatar";
 export * from "./bento";
 export * from "./timeline";
+export * from "./settings";

package/dist/components/data/settings.d.ts

@@ -0,0 +1,50 @@
+export interface SettingsGroupProps {
+    children?: string;
+    /** Optional uppercase heading rendered above the group */
+    title?: string;
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+/**
+ * Container for a group of settings-style rows.
+ * Renders as `.list-group` with an optional uppercase section heading above.
+ */
+export declare function SettingsGroup(props?: SettingsGroupProps): string;
+export declare const settingsGroup: typeof SettingsGroup;
+export interface SettingsItemProps {
+    /** Main label text */
+    label: string;
+    /** Optional supporting description rendered below the label */
+    description?: string;
+    /** Icon HTML string, e.g. `<span class="mdi mdi-lock-outline">` */
+    icon?: string;
+    /** Value text shown on the right */
+    value?: string;
+    /** Arbitrary trailing HTML on the right, e.g. a switch or select */
+    trailing?: string;
+    /** Renders the item as `<a href>` */
+    href?: string;
+    /** Renders the item as `<button>` (when no href) */
+    action?: boolean;
+    /** Shows a `›` chevron on the trailing edge */
+    showChevron?: boolean;
+    active?: boolean;
+    disabled?: boolean;
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+/**
+ * A settings-style row using `.list-group-item` with an inner flex layout.
+ * Composable as a link, button, or static element.
+ *
+ * @example Link row
+ * SettingsItem({ label: "Private profile", icon: '<span class="mdi mdi-lock-outline">', value: "Public", showChevron: true, href: "#privacy" })
+ *
+ * @example Toggle row
+ * SettingsItem({ label: "Floods & Inundations", icon: '<span class="mdi mdi-water-alert">', trailing: '<input type="checkbox" role="switch" class="form-check-input" checked />' })
+ *
+ * @example Description row
+ * SettingsItem({ label: "Verified reports only", description: "Only display verified observations.", trailing: '<input type="checkbox" role="switch" class="form-check-input" />' })
+ */
+export declare function SettingsItem(props: SettingsItemProps): string;
+export declare const settingsItem: typeof SettingsItem;

package/dist/components/data/settings.js

@@ -0,0 +1,53 @@
+import { classNames, escapeHtml, toAttributes } from "../utils";
+/**
+ * Container for a group of settings-style rows.
+ * Renders as `.list-group` with an optional uppercase section heading above.
+ */
+export function SettingsGroup(props = {}) {
+    const { children = "", title = "", className = "", attributes } = props;
+    const baseAttrs = toAttributes(attributes);
+    const groupHtml = `<div class="${classNames("list-group", className)}"${baseAttrs}>${children}</div>`;
+    if (!title)
+        return groupHtml.trim();
+    return `<div><p class="text-xs font-800 uppercase tracking-wider text-subtle mb-2 px-1">${escapeHtml(title)}</p><div class="${classNames("list-group", className)}">${children}</div></div>`.trim();
+}
+export const settingsGroup = SettingsGroup;
+/**
+ * A settings-style row using `.list-group-item` with an inner flex layout.
+ * Composable as a link, button, or static element.
+ *
+ * @example Link row
+ * SettingsItem({ label: "Private profile", icon: '<span class="mdi mdi-lock-outline">', value: "Public", showChevron: true, href: "#privacy" })
+ *
+ * @example Toggle row
+ * SettingsItem({ label: "Floods & Inundations", icon: '<span class="mdi mdi-water-alert">', trailing: '<input type="checkbox" role="switch" class="form-check-input" checked />' })
+ *
+ * @example Description row
+ * SettingsItem({ label: "Verified reports only", description: "Only display verified observations.", trailing: '<input type="checkbox" role="switch" class="form-check-input" />' })
+ */
+export function SettingsItem(props) {
+    const { label, description = "", icon = "", value = "", trailing = "", href, action = false, showChevron = false, active = false, disabled = false, className = "", attributes } = props;
+    const isLink = Boolean(href);
+    const Tag = isLink ? "a" : action ? "button" : "div";
+    const classes = classNames("list-group-item", (action || isLink) && "list-group-item-action", active && "active", disabled && "disabled", className);
+    const baseAttrs = toAttributes({
+        href,
+        type: Tag === "button" ? "button" : undefined,
+        disabled: Tag === "button" && disabled ? true : undefined,
+        "aria-current": active ? "true" : undefined,
+        "aria-disabled": disabled ? "true" : undefined,
+        ...attributes
+    });
+    const iconHtml = icon
+        ? `<span class="flex items-center justify-center w-7 h-7 shrink-0 text-lg" aria-hidden="true">${icon}</span>`
+        : "";
+    const labelBlock = description
+        ? `<span class="flex-1 min-w-0"><span class="font-600 block">${escapeHtml(label)}</span><span class="text-subtle text-sm block mt-1">${escapeHtml(description)}</span></span>`
+        : `<span class="flex-1 font-600">${escapeHtml(label)}</span>`;
+    const valueHtml = value ? `<span class="text-subtle text-sm">${escapeHtml(value)}</span>` : "";
+    const chevronHtml = showChevron
+        ? `<span class="text-subtle opacity-50 text-sm ms-1" aria-hidden="true">&#8250;</span>`
+        : "";
+    return `<${Tag} class="${classes}"${baseAttrs}><div class="flex items-center gap-3">${iconHtml}${labelBlock}${valueHtml}${trailing}${chevronHtml}</div></${Tag}>`.trim();
+}
+export const settingsItem = SettingsItem;

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

@@ -3,3 +3,4 @@ export * from "./breadcrumb";
 export * from "./pagination";
 export * from "./tabs";
 export * from "./scrollspy";
+export * from "./sidebar";

package/dist/components/navigation/index.js

@@ -3,3 +3,4 @@ export * from "./breadcrumb";
 export * from "./pagination";
 export * from "./tabs";
 export * from "./scrollspy";
+export * from "./sidebar";

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.1.0",
+  "version": "1.1.1",
   "publishConfig": {
     "access": "public"
   },
@@ -81,6 +81,8 @@
     "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"