@abydahana/aksara-ui 0.1.0

package/dist/components/overlay/dropdown.js

@@ -0,0 +1,41 @@
+import { classNames, escapeHtml, toAttributes } from "../utils";
+export function Dropdown(props = {}) {
+    const { children = "", direction, className = "", attributes } = props;
+    const classes = classNames("dropdown", direction === "up" && "dropup", direction === "end" && "dropend", direction === "start" && "dropstart", className);
+    const baseAttrs = toAttributes(attributes);
+    return `<div class="${classes}"${baseAttrs}>${children}</div>`.trim();
+}
+export const dropdown = Dropdown;
+export function DropdownMenu(props = {}) {
+    const { id, children = "", end = false, dark = false, className = "", attributes } = props;
+    const classes = classNames("dropdown-menu", end && "dropdown-menu-end", dark && "dropdown-menu-dark", className);
+    const baseAttrs = toAttributes({
+        id,
+        ...attributes
+    });
+    return `<div class="${classes}"${baseAttrs}>${children}</div>`.trim();
+}
+export const dropdownMenu = DropdownMenu;
+export function DropdownItem(props = {}) {
+    const { content = "", href, active = false, disabled = false, danger = false, className = "", attributes } = props;
+    const Tag = href ? "a" : "button";
+    const classes = classNames("dropdown-item", active && "active", disabled && "disabled", danger && "text-danger", className);
+    const baseAttrs = toAttributes({
+        href,
+        type: Tag === "button" ? "button" : undefined,
+        disabled: disabled && Tag === "button" ? true : undefined,
+        "aria-current": active ? "true" : undefined,
+        "aria-disabled": disabled ? "true" : undefined,
+        ...attributes
+    });
+    return `<${Tag} class="${classes}"${baseAttrs}>${content}</${Tag}>`.trim();
+}
+export const dropdownItem = DropdownItem;
+export function DropdownDivider(className = "") {
+    return `<div class="${classNames("dropdown-divider", className)}"></div>`;
+}
+export const dropdownDivider = DropdownDivider;
+export function DropdownHeader(title, className = "") {
+    return `<div class="${classNames("dropdown-header", className)}">${escapeHtml(title)}</div>`;
+}
+export const dropdownHeader = DropdownHeader;

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

@@ -0,0 +1,7 @@
+export * from "./modal";
+export * from "./dropdown";
+export * from "./offcanvas";
+export * from "./popover";
+export * from "./tooltip";
+export * from "./collapse";
+export * from "./media-modal";

package/dist/components/overlay/index.js

@@ -0,0 +1,7 @@
+export * from "./modal";
+export * from "./dropdown";
+export * from "./offcanvas";
+export * from "./popover";
+export * from "./tooltip";
+export * from "./collapse";
+export * from "./media-modal";

package/dist/components/overlay/media-modal.d.ts

@@ -0,0 +1,15 @@
+export interface MediaPreviewModalProps {
+    id?: string;
+    items: Array<{
+        src: string;
+        alt?: string;
+        caption?: string;
+    }>;
+    activeIndex?: number;
+    sidebar?: string;
+    showZoomControls?: boolean;
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+export declare function MediaPreviewModal(props: MediaPreviewModalProps): string;
+export declare const mediaPreviewModal: typeof MediaPreviewModal;

package/dist/components/overlay/media-modal.js

@@ -0,0 +1,83 @@
+import { classNames, escapeHtml, toAttributes } from "../utils";
+export function MediaPreviewModal(props) {
+    const { id = "media-preview-modal", items = [], activeIndex = 0, sidebar, showZoomControls = true, className = "", attributes } = props;
+    const total = items.length;
+    const currentIdx = Math.max(0, Math.min(activeIndex, Math.max(0, total - 1)));
+    const currentItem = items[currentIdx] || { src: "", alt: "" };
+    const baseAttrs = toAttributes({
+        id,
+        role: "dialog",
+        "aria-modal": "true",
+        "data-active-index": currentIdx,
+        "data-total-items": total,
+        ...attributes
+    });
+    const counterHtml = total > 1
+        ? `
+        <div class="media-modal-counter position-absolute top-4 start-50% translate-x-[-50%] z-10 px-3 py-1 rounded-pill bg-black/60 text-white text-sm font-semibold pointer-events-none">
+          <span id="media-counter-text">${currentIdx + 1} / ${total}</span>
+        </div>
+      `.trim()
+        : "";
+    const prevBtnHtml = total > 1
+        ? `
+        <button type="button" class="media-modal-btn media-modal-prev position-absolute start-4 top-50% translate-y-[-50%] z-10 w-12 h-12 rounded-full d-flex align-items-center justify-content-center border-0 bg-black/60 text-white text-xl cursor-pointer" data-media-prev aria-label="Previous media"${currentIdx === 0 ? " disabled" : ""}>
+          <span class="mdi mdi-chevron-left mdi-24px"></span>
+        </button>
+      `.trim()
+        : "";
+    const nextBtnHtml = total > 1
+        ? `
+        <button type="button" class="media-modal-btn media-modal-next position-absolute end-4 top-50% translate-y-[-50%] z-10 w-12 h-12 rounded-full d-flex align-items-center justify-content-center border-0 bg-black/60 text-white text-xl cursor-pointer" data-media-next aria-label="Next media"${currentIdx === total - 1 ? " disabled" : ""}>
+          <span class="mdi mdi-chevron-right mdi-24px"></span>
+        </button>
+      `.trim()
+        : "";
+    const zoomControlsHtml = showZoomControls
+        ? `
+      <div class="media-modal-zoom-controls position-absolute bottom-6 start-50% translate-x-[-50%] z-10 d-flex align-items-center gap-2 p-1 rounded-pill bg-black/70" id="media-zoom-controls">
+        <button type="button" class="media-zoom-btn w-9 h-9 rounded-full d-flex align-items-center justify-content-center border-0 bg-transparent text-white cursor-pointer" data-media-zoom-in aria-label="Zoom in" title="Zoom in">
+          <span class="mdi mdi-magnify-plus-outline mdi-18px"></span>
+        </button>
+        <button type="button" class="media-zoom-btn w-9 h-9 rounded-full d-flex align-items-center justify-content-center border-0 bg-transparent text-white cursor-pointer" data-media-zoom-out aria-label="Zoom out" title="Zoom out">
+          <span class="mdi mdi-magnify-minus-outline mdi-18px"></span>
+        </button>
+        <button type="button" class="media-zoom-btn w-9 h-9 rounded-full d-flex align-items-center justify-content-center border-0 bg-transparent text-white cursor-pointer" data-media-zoom-reset aria-label="Fit to screen" title="Fit to screen">
+          <span class="mdi mdi-fit-to-screen-outline mdi-18px"></span>
+        </button>
+      </div>
+    `.trim()
+        : "";
+    const sidebarHtml = sidebar
+        ? `
+      <div class="media-modal-sidebar w-full md:w-[360px] lg:w-[420px] shrink-0 border-start border-subtle bg-body d-flex flex-col overflow-y-auto">
+        ${sidebar}
+      </div>
+    `.trim()
+        : "";
+    return `
+    <div class="${classNames("media-modal-backdrop position-fixed inset-0 z-[1050] d-flex bg-black/90", className)}"${baseAttrs}>
+      <div class="media-modal-container d-flex flex-col md:flex-row w-full h-full overflow-hidden">
+        <!-- Stage -->
+        <div class="media-modal-stage flex-1 position-relative d-flex align-items-center justify-content-center overflow-hidden">
+          <button type="button" class="media-modal-btn media-modal-close position-absolute top-4 start-4 z-10 w-10 h-10 rounded-full d-flex align-items-center justify-content-center border-0 bg-black/60 text-white cursor-pointer" data-close-media-modal aria-label="Close">
+            <span class="mdi mdi-close mdi-18px"></span>
+          </button>
+
+          ${counterHtml}
+          ${prevBtnHtml}
+          ${nextBtnHtml}
+
+          <div class="media-modal-image-wrap d-flex align-items-center justify-content-center w-full h-full p-4">
+            <img src="${escapeHtml(currentItem.src)}" id="media-modal-active-img" class="max-w-full max-h-full object-contain block transition" alt="${escapeHtml(currentItem.alt || "Preview")}" />
+          </div>
+
+          ${zoomControlsHtml}
+        </div>
+
+        ${sidebarHtml}
+      </div>
+    </div>
+  `.trim();
+}
+export const mediaPreviewModal = MediaPreviewModal;

package/dist/components/overlay/modal.d.ts

@@ -0,0 +1,32 @@
+export interface ModalProps {
+    id: string;
+    children?: string;
+    size?: "sm" | "lg" | "xl" | "fullscreen";
+    centered?: boolean;
+    scrollable?: boolean;
+    staticBackdrop?: boolean;
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+export declare function Modal(props: ModalProps): string;
+export declare const modal: typeof Modal;
+export interface ModalHeaderProps {
+    title?: string;
+    children?: string;
+    dismissible?: boolean;
+    className?: string;
+}
+export declare function ModalHeader(props?: ModalHeaderProps): string;
+export declare const modalHeader: typeof ModalHeader;
+export interface ModalBodyProps {
+    children?: string;
+    className?: string;
+}
+export declare function ModalBody(props?: ModalBodyProps): string;
+export declare const modalBody: typeof ModalBody;
+export interface ModalFooterProps {
+    children?: string;
+    className?: string;
+}
+export declare function ModalFooter(props?: ModalFooterProps): string;
+export declare const modalFooter: typeof ModalFooter;

package/dist/components/overlay/modal.js

@@ -0,0 +1,47 @@
+import { classNames, escapeHtml, toAttributes } from "../utils";
+export function Modal(props) {
+    const { id, children = "", size, centered = false, scrollable = false, staticBackdrop = false, className = "", attributes } = props;
+    const dialogClasses = classNames("modal-dialog", size && (size === "fullscreen" ? "modal-fullscreen" : `modal-${size}`), centered && "modal-dialog-centered", scrollable && "modal-dialog-scrollable");
+    const baseAttrs = toAttributes({
+        id,
+        tabindex: "-1",
+        "aria-hidden": "true",
+        "data-backdrop": staticBackdrop ? "static" : undefined,
+        ...attributes
+    });
+    return `
+    <div class="${classNames("modal", className)}"${baseAttrs}>
+      <div class="${dialogClasses}">
+        <div class="modal-content">
+          ${children}
+        </div>
+      </div>
+    </div>
+  `.trim();
+}
+export const modal = Modal;
+export function ModalHeader(props = {}) {
+    const { title, children = "", dismissible = true, className = "" } = props;
+    const titleHtml = title ? `<h5 class="modal-title m-0">${escapeHtml(title)}</h5>` : "";
+    const closeBtn = dismissible
+        ? `<button class="modal-close btn-close" type="button" data-modal-close aria-label="Close"></button>`
+        : "";
+    return `
+    <div class="${classNames("modal-header", className)}">
+      ${titleHtml}
+      ${children}
+      ${closeBtn}
+    </div>
+  `.trim();
+}
+export const modalHeader = ModalHeader;
+export function ModalBody(props = {}) {
+    const { children = "", className = "" } = props;
+    return `<div class="${classNames("modal-body", className)}">${children}</div>`.trim();
+}
+export const modalBody = ModalBody;
+export function ModalFooter(props = {}) {
+    const { children = "", className = "" } = props;
+    return `<div class="${classNames("modal-footer", className)}">${children}</div>`.trim();
+}
+export const modalFooter = ModalFooter;

package/dist/components/overlay/offcanvas.d.ts

@@ -0,0 +1,20 @@
+export type OffcanvasPlacement = "start" | "end" | "top" | "bottom";
+export interface OffcanvasProps {
+    id: string;
+    children?: string;
+    placement?: OffcanvasPlacement;
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+export declare function Offcanvas(props: OffcanvasProps): string;
+export declare const offcanvas: typeof Offcanvas;
+export interface OffcanvasHeaderProps {
+    title?: string;
+    children?: string;
+    dismissible?: boolean;
+    className?: string;
+}
+export declare function OffcanvasHeader(props?: OffcanvasHeaderProps): string;
+export declare const offcanvasHeader: typeof OffcanvasHeader;
+export declare function OffcanvasBody(content?: string, className?: string): string;
+export declare const offcanvasBody: typeof OffcanvasBody;

package/dist/components/overlay/offcanvas.js

@@ -0,0 +1,33 @@
+import { classNames, escapeHtml, toAttributes } from "../utils";
+export function Offcanvas(props) {
+    const { id, children = "", placement = "start", className = "", attributes } = props;
+    const classes = classNames("offcanvas", `offcanvas-${placement}`, className);
+    const baseAttrs = toAttributes({
+        id,
+        tabindex: "-1",
+        role: "dialog",
+        "aria-hidden": "true",
+        ...attributes
+    });
+    return `<aside class="${classes}"${baseAttrs}>${children}</aside>`.trim();
+}
+export const offcanvas = Offcanvas;
+export function OffcanvasHeader(props = {}) {
+    const { title, children = "", dismissible = true, className = "" } = props;
+    const titleHtml = title ? `<h5 class="offcanvas-title m-0">${escapeHtml(title)}</h5>` : "";
+    const closeBtn = dismissible
+        ? `<button class="modal-close btn-close" type="button" data-offcanvas-close aria-label="Close"></button>`
+        : "";
+    return `
+    <div class="${classNames("offcanvas-header", className)}">
+      ${titleHtml}
+      ${children}
+      ${closeBtn}
+    </div>
+  `.trim();
+}
+export const offcanvasHeader = OffcanvasHeader;
+export function OffcanvasBody(content = "", className = "") {
+    return `<div class="${classNames("offcanvas-body", className)}">${content}</div>`.trim();
+}
+export const offcanvasBody = OffcanvasBody;

package/dist/components/overlay/popover.d.ts

@@ -0,0 +1,19 @@
+export type PopoverPlacement = "top" | "bottom" | "start" | "end" | "auto";
+export interface PopoverTriggerProps {
+    content: string;
+    placement?: PopoverPlacement;
+    title?: string;
+    children: string;
+    as?: "button" | "a" | "span" | "div";
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+export declare function PopoverTrigger(props: PopoverTriggerProps): string;
+export declare const popoverTrigger: typeof PopoverTrigger;
+export interface PopoverProps {
+    title?: string;
+    body: string;
+    className?: string;
+}
+export declare function Popover(props: PopoverProps): string;
+export declare const popover: typeof Popover;

package/dist/components/overlay/popover.js

@@ -0,0 +1,24 @@
+import { classNames, escapeHtml, toAttributes } from "../utils";
+export function PopoverTrigger(props) {
+    const { content, placement = "top", title, children, as: Tag = "button", className = "", attributes } = props;
+    const baseAttrs = toAttributes({
+        "data-popover": content,
+        "data-popover-placement": placement,
+        title,
+        type: Tag === "button" ? "button" : undefined,
+        ...attributes
+    });
+    return `<${Tag} class="${classNames(className)}"${baseAttrs}>${children}</${Tag}>`.trim();
+}
+export const popoverTrigger = PopoverTrigger;
+export function Popover(props) {
+    const { title, body, className = "" } = props;
+    const headerHtml = title ? `<div class="popover-header font-bold">${escapeHtml(title)}</div>` : "";
+    return `
+    <div class="${classNames("popover", className)}" role="tooltip">
+      ${headerHtml}
+      <div class="popover-body">${body}</div>
+    </div>
+  `.trim();
+}
+export const popover = Popover;

package/dist/components/overlay/tooltip.d.ts

@@ -0,0 +1,17 @@
+export type TooltipPlacement = "top" | "bottom" | "start" | "end" | "auto";
+export interface TooltipTriggerProps {
+    title: string;
+    placement?: TooltipPlacement;
+    children: string;
+    as?: "button" | "a" | "span" | "div";
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+export declare function TooltipTrigger(props: TooltipTriggerProps): string;
+export declare const tooltipTrigger: typeof TooltipTrigger;
+export interface TooltipProps {
+    text: string;
+    className?: string;
+}
+export declare function Tooltip(props: TooltipProps): string;
+export declare const tooltip: typeof Tooltip;

package/dist/components/overlay/tooltip.js

@@ -0,0 +1,21 @@
+import { classNames, toAttributes } from "../utils";
+export function TooltipTrigger(props) {
+    const { title, placement = "top", children, as: Tag = "button", className = "", attributes } = props;
+    const baseAttrs = toAttributes({
+        "data-tooltip": title,
+        "data-tooltip-placement": placement,
+        type: Tag === "button" ? "button" : undefined,
+        ...attributes
+    });
+    return `<${Tag} class="${classNames(className)}"${baseAttrs}>${children}</${Tag}>`.trim();
+}
+export const tooltipTrigger = TooltipTrigger;
+export function Tooltip(props) {
+    const { text, className = "" } = props;
+    return `
+    <div class="${classNames("tooltip", className)}" role="tooltip">
+      <div class="tooltip-inner">${text}</div>
+    </div>
+  `.trim();
+}
+export const tooltip = Tooltip;

package/dist/components/utils.d.ts

@@ -0,0 +1,3 @@
+export declare function escapeHtml(value: unknown): string;
+export declare function classNames(...classes: (string | undefined | null | false | 0)[]): string;
+export declare function toAttributes(attributes?: Record<string, unknown>): string;

package/dist/components/utils.js

@@ -0,0 +1,25 @@
+export function escapeHtml(value) {
+    return String(value ?? "")
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#39;");
+}
+export function classNames(...classes) {
+    return classes.filter(Boolean).join(" ").trim();
+}
+export 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(" ")}` : "";
+}

package/package.json

@@ -0,0 +1,111 @@
+{
+  "name": "@abydahana/aksara-ui",
+  "version": "0.1.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Bootstrap readability with Tailwind flexibility: a static CSS and vanilla JavaScript frontend framework.",
+  "type": "module",
+  "main": "dist/aksara.js",
+  "module": "dist/aksara.esm.js",
+  "types": "dist/aksara.d.ts",
+  "style": "dist/aksara.css",
+  "exports": {
+    ".": {
+      "types": "./dist/aksara.d.ts",
+      "import": "./dist/aksara.esm.js",
+      "require": "./dist/aksara.js",
+      "default": "./dist/aksara.esm.js"
+    },
+    "./css": "./dist/aksara.css",
+    "./css/min": "./dist/aksara.min.css",
+    "./js": {
+      "types": "./dist/aksara.d.ts",
+      "import": "./dist/aksara.esm.js",
+      "require": "./dist/aksara.js",
+      "default": "./dist/aksara.esm.js"
+    },
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/components/index.js",
+      "default": "./dist/components/index.js"
+    },
+    "./components/form": {
+      "types": "./dist/components/form/index.d.ts",
+      "import": "./dist/components/form/index.js",
+      "default": "./dist/components/form/index.js"
+    },
+    "./components/data": {
+      "types": "./dist/components/data/index.d.ts",
+      "import": "./dist/components/data/index.js",
+      "default": "./dist/components/data/index.js"
+    },
+    "./components/feedback": {
+      "types": "./dist/components/feedback/index.d.ts",
+      "import": "./dist/components/feedback/index.js",
+      "default": "./dist/components/feedback/index.js"
+    },
+    "./components/overlay": {
+      "types": "./dist/components/overlay/index.d.ts",
+      "import": "./dist/components/overlay/index.js",
+      "default": "./dist/components/overlay/index.js"
+    },
+    "./components/navigation": {
+      "types": "./dist/components/navigation/index.d.ts",
+      "import": "./dist/components/navigation/index.js",
+      "default": "./dist/components/navigation/index.js"
+    },
+    "./components/buttons": {
+      "types": "./dist/components/buttons/index.d.ts",
+      "import": "./dist/components/buttons/index.js",
+      "default": "./dist/components/buttons/index.js"
+    },
+    "./components/*": {
+      "types": "./dist/components/*.d.ts",
+      "import": "./dist/components/*.js",
+      "default": "./dist/components/*.js"
+    },
+    "./dist/*": "./dist/*"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "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",
+    "prepare": "npm run build",
+    "all": "npm run format && npm run lint && npm run test && npm run build",
+    "prepublishOnly": "npm run all"
+  },
+  "keywords": [
+    "css",
+    "frontend",
+    "framework",
+    "utilities",
+    "rtl",
+    "typescript"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "@mdi/font": "^7.4.47"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@types/node": "^22.13.14",
+    "eslint": "^10.9.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-unicorn": "^65.0.1",
+    "prettier": "^3.9.6",
+    "tsx": "^4.19.3",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.68.0"
+  },
+  "author": "Aby Dahana"
+}