@abydahana/aksara-ui 1.1.0 → 1.1.2

package/dist/aksara.d.ts

@@ -286,3 +286,156 @@ declare global {
     }
 }
 export default Aksara;
+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;
+export interface ListGroupProps {
+    children?: string;
+    flush?: boolean;
+    numbered?: boolean;
+    horizontal?: boolean | "sm" | "md" | "lg" | "xl" | "xxl";
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+export declare function ListGroup(props?: ListGroupProps): string;
+export declare const listGroup: typeof ListGroup;
+export interface ListGroupItemProps {
+    content?: string;
+    active?: boolean;
+    disabled?: boolean;
+    action?: boolean;
+    href?: string;
+    variant?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+export declare function ListGroupItem(props?: ListGroupItemProps): string;
+export declare const listGroupItem: typeof ListGroupItem;
+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/aksara.esm.js

@@ -1737,3 +1737,194 @@ if (typeof document !== "undefined") {
     document.addEventListener("DOMContentLoaded", () => Aksara.init());
 }
 export default Aksara;
+// ── HTML Component Generators ─────────────────────────────────────────────────
+// Inline pure-function HTML string generators.
+// These accept typed props and return HTML strings ready for server-side rendering.
+// ── Shared utilities ──────────────────────────────────────────────────────────
+function classNames(...classes) {
+    return classes.filter(Boolean).join(" ").trim();
+}
+function toAttributes(attributes) {
+    if (!attributes)
+        return "";
+    const parts = [];
+    for (const [key, value] of Object.entries(attributes)) {
+        if (value === true) {
+            parts.push(key);
+        }
+        else if (value !== false && value !== null && value !== undefined) {
+            parts.push(`${key}="${escapeHtml(value)}"`);
+        }
+    }
+    return parts.length > 0 ? ` ${parts.join(" ")}` : "";
+}
+function escapeHtmlStr(value) {
+    return String(value ?? "")
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#39;");
+}
+/**
+ * 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">${escapeHtmlStr(title)}</span>${subtitle ? `<span class="sidebar-nav-brand-subtitle">${escapeHtmlStr(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">${escapeHtmlStr(item.badge)}</span>` : "";
+        return `<${Tag} class="${itemClasses}"${itemAttrs}>${iconHtml}<span class="sidebar-nav-label">${escapeHtmlStr(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)}">${escapeHtmlStr(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;
+export function ListGroup(props = {}) {
+    const { children = "", flush = false, numbered = false, horizontal = false, className = "", attributes } = props;
+    const horizontalClass = horizontal === true
+        ? "list-group-horizontal"
+        : typeof horizontal === "string"
+            ? `list-group-horizontal-${horizontal}`
+            : null;
+    const classes = classNames("list-group", flush && "list-group-flush", numbered && "list-group-numbered", horizontalClass, className);
+    const Tag = numbered ? "ol" : "div";
+    const baseAttrs = toAttributes(attributes);
+    return `<${Tag} class="${classes}"${baseAttrs}>${children}</${Tag}>`.trim();
+}
+export const listGroup = ListGroup;
+export function ListGroupItem(props = {}) {
+    const { content = "", active = false, disabled = false, action = false, href, variant, 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", variant && `list-group-item-${variant}`, 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
+    });
+    return `<${Tag} class="${classes}"${baseAttrs}>${content}</${Tag}>`.trim();
+}
+export const listGroupItem = ListGroupItem;
+/**
+ * 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">${escapeHtmlStr(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">${escapeHtmlStr(label)}</span><span class="text-subtle text-sm block mt-1">${escapeHtmlStr(description)}</span></span>`
+        : `<span class="flex-1 font-600">${escapeHtmlStr(label)}</span>`;
+    const valueHtml = value ? `<span class="text-subtle text-sm">${escapeHtmlStr(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/aksara.js

@@ -1738,6 +1738,197 @@ if (typeof document !== "undefined") {
     document.addEventListener("DOMContentLoaded", () => Aksara.init());
 }
 
+// ── HTML Component Generators ─────────────────────────────────────────────────
+// Inline pure-function HTML string generators.
+// These accept typed props and return HTML strings ready for server-side rendering.
+// ── Shared utilities ──────────────────────────────────────────────────────────
+function classNames(...classes) {
+    return classes.filter(Boolean).join(" ").trim();
+}
+function toAttributes(attributes) {
+    if (!attributes)
+        return "";
+    const parts = [];
+    for (const [key, value] of Object.entries(attributes)) {
+        if (value === true) {
+            parts.push(key);
+        }
+        else if (value !== false && value !== null && value !== undefined) {
+            parts.push(`${key}="${escapeHtml(value)}"`);
+        }
+    }
+    return parts.length > 0 ? ` ${parts.join(" ")}` : "";
+}
+function escapeHtmlStr(value) {
+    return String(value ?? "")
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#39;");
+}
+/**
+ * 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" },
+ *   ]
+ * })
+ */
+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">${escapeHtmlStr(title)}</span>${subtitle ? `<span class="sidebar-nav-brand-subtitle">${escapeHtmlStr(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">${escapeHtmlStr(item.badge)}</span>` : "";
+        return `<${Tag} class="${itemClasses}"${itemAttrs}>${iconHtml}<span class="sidebar-nav-label">${escapeHtmlStr(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 */
+function SidebarNavHeader(props) {
+    const { label, className = "" } = props;
+    return `<span class="${classNames("sidebar-nav-header", className)}">${escapeHtmlStr(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>'
+ * })
+ */
+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;
+function ListGroup(props = {}) {
+    const { children = "", flush = false, numbered = false, horizontal = false, className = "", attributes } = props;
+    const horizontalClass = horizontal === true
+        ? "list-group-horizontal"
+        : typeof horizontal === "string"
+            ? `list-group-horizontal-${horizontal}`
+            : null;
+    const classes = classNames("list-group", flush && "list-group-flush", numbered && "list-group-numbered", horizontalClass, className);
+    const Tag = numbered ? "ol" : "div";
+    const baseAttrs = toAttributes(attributes);
+    return `<${Tag} class="${classes}"${baseAttrs}>${children}</${Tag}>`.trim();
+}
+export const listGroup = ListGroup;
+function ListGroupItem(props = {}) {
+    const { content = "", active = false, disabled = false, action = false, href, variant, 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", variant && `list-group-item-${variant}`, 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
+    });
+    return `<${Tag} class="${classes}"${baseAttrs}>${content}</${Tag}>`.trim();
+}
+export const listGroupItem = ListGroupItem;
+/**
+ * Container for a group of settings-style rows.
+ * Renders as `.list-group` with an optional uppercase section heading above.
+ */
+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">${escapeHtmlStr(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" />' })
+ */
+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">${escapeHtmlStr(label)}</span><span class="text-subtle text-sm block mt-1">${escapeHtmlStr(description)}</span></span>`
+        : `<span class="flex-1 font-600">${escapeHtmlStr(label)}</span>`;
+    const valueHtml = value ? `<span class="text-subtle text-sm">${escapeHtmlStr(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;
 
 window.Aksara=Aksara;
 })();