@abydahana/aksara-ui 0.1.0

package/dist/components/form/radio.js

@@ -0,0 +1,49 @@
+import { classNames, escapeHtml, toAttributes } from "../utils";
+export function Radio(props) {
+    const { label, name, id, value, checked = false, disabled = false, inline = false, isInvalid = false, isValid = false, className = "", inputClassName = "", labelClassName = "", attributes } = props;
+    const containerClasses = classNames("form-check", inline && "form-check-inline", className);
+    const inputClasses = classNames("form-check-input", isInvalid && "is-invalid", isValid && "is-valid", inputClassName);
+    const baseAttrs = toAttributes({
+        type: "radio",
+        name,
+        id,
+        value,
+        checked,
+        disabled,
+        ...attributes
+    });
+    const labelHtml = label
+        ? `
+      <label class="${classNames("form-check-label", labelClassName)}"${id ? ` for="${escapeHtml(id)}"` : ""}>
+        ${escapeHtml(label)}
+      </label>
+    `.trim()
+        : "";
+    return `
+    <div class="${containerClasses}">
+      <input class="${inputClasses}"${baseAttrs} />
+      ${labelHtml}
+    </div>
+  `.trim();
+}
+export const radio = Radio;
+export function RadioGroup(props) {
+    const { name, options = [], value, inline = false, className = "" } = props;
+    const itemsHtml = options
+        .map((opt, idx) => {
+        const id = opt.id ?? `${name}-opt-${idx}`;
+        const isChecked = value !== undefined && String(opt.value) === String(value);
+        return Radio({
+            name,
+            id,
+            label: opt.label,
+            value: opt.value,
+            checked: isChecked,
+            disabled: opt.disabled,
+            inline
+        });
+    })
+        .join("\n");
+    return `<div class="${classNames("radio-group", className)}">${itemsHtml}</div>`.trim();
+}
+export const radioGroup = RadioGroup;

package/dist/components/form/range.d.ts

@@ -0,0 +1,13 @@
+export interface RangeProps {
+    name?: string;
+    id?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: number;
+    disabled?: boolean;
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+export declare function Range(props?: RangeProps): string;
+export declare const range: typeof Range;

package/dist/components/form/range.js

@@ -0,0 +1,18 @@
+import { classNames, toAttributes } from "../utils";
+export function Range(props = {}) {
+    const { name, id, min = 0, max = 100, step = 1, value, disabled = false, className = "", attributes } = props;
+    const classes = classNames("form-range", className);
+    const baseAttrs = toAttributes({
+        type: "range",
+        name,
+        id,
+        min,
+        max,
+        step,
+        value,
+        disabled,
+        ...attributes
+    });
+    return `<input class="${classes}"${baseAttrs} />`.trim();
+}
+export const range = Range;

package/dist/components/form/select.d.ts

@@ -0,0 +1,25 @@
+export interface SelectOption {
+    label: string;
+    value: string | number;
+    disabled?: boolean;
+}
+export interface SelectOptGroup {
+    label: string;
+    options: SelectOption[];
+}
+export interface SelectProps {
+    name?: string;
+    id?: string;
+    options?: Array<SelectOption | SelectOptGroup>;
+    value?: string | number;
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    size?: "sm" | "lg";
+    isInvalid?: boolean;
+    isValid?: boolean;
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+export declare function Select(props?: SelectProps): string;
+export declare const select: typeof Select;

package/dist/components/form/select.js

@@ -0,0 +1,37 @@
+import { classNames, escapeHtml, toAttributes } from "../utils";
+export function Select(props = {}) {
+    const { name, id, options = [], value, placeholder, disabled = false, required = false, size, isInvalid = false, isValid = false, className = "", attributes } = props;
+    const classes = classNames("form-select", size === "sm" && "form-select-sm", size === "lg" && "form-select-lg", isInvalid && "is-invalid", isValid && "is-valid", className);
+    const baseAttrs = toAttributes({
+        name,
+        id,
+        disabled,
+        required,
+        ...attributes
+    });
+    const placeholderHtml = placeholder
+        ? `<option value="" disabled${value === undefined || value === "" ? " selected" : ""}>${escapeHtml(placeholder)}</option>`
+        : "";
+    const renderOption = (opt) => {
+        const isSelected = value !== undefined && String(opt.value) === String(value);
+        const disabledAttr = opt.disabled ? " disabled" : "";
+        const selectedAttr = isSelected ? " selected" : "";
+        return `<option value="${escapeHtml(String(opt.value))}"${selectedAttr}${disabledAttr}>${escapeHtml(opt.label)}</option>`;
+    };
+    const optionsHtml = options
+        .map((item) => {
+        if ("options" in item) {
+            const groupOptions = item.options.map(renderOption).join("");
+            return `<optgroup label="${escapeHtml(item.label)}">${groupOptions}</optgroup>`;
+        }
+        return renderOption(item);
+    })
+        .join("");
+    return `
+    <select class="${classes}"${baseAttrs}>
+      ${placeholderHtml}
+      ${optionsHtml}
+    </select>
+  `.trim();
+}
+export const select = Select;

package/dist/components/form/switch.d.ts

@@ -0,0 +1,16 @@
+export interface SwitchProps {
+    label?: string;
+    name?: string;
+    id?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    isInvalid?: boolean;
+    isValid?: boolean;
+    className?: string;
+    inputClassName?: string;
+    labelClassName?: string;
+    attributes?: Record<string, unknown>;
+}
+export declare function Switch(props?: SwitchProps): string;
+export declare const switchInput: typeof Switch;
+export declare const SwitchInput: typeof Switch;

package/dist/components/form/switch.js

@@ -0,0 +1,30 @@
+import { classNames, escapeHtml, toAttributes } from "../utils";
+export function Switch(props = {}) {
+    const { label, name, id, checked = false, disabled = false, isInvalid = false, isValid = false, className = "", inputClassName = "", labelClassName = "", attributes } = props;
+    const containerClasses = classNames("form-check form-switch", className);
+    const inputClasses = classNames("form-check-input", isInvalid && "is-invalid", isValid && "is-valid", inputClassName);
+    const baseAttrs = toAttributes({
+        type: "checkbox",
+        role: "switch",
+        name,
+        id,
+        checked,
+        disabled,
+        ...attributes
+    });
+    const labelHtml = label
+        ? `
+      <label class="${classNames("form-check-label", labelClassName)}"${id ? ` for="${escapeHtml(id)}"` : ""}>
+        ${escapeHtml(label)}
+      </label>
+    `.trim()
+        : "";
+    return `
+    <div class="${containerClasses}">
+      <input class="${inputClasses}"${baseAttrs} />
+      ${labelHtml}
+    </div>
+  `.trim();
+}
+export const switchInput = Switch;
+export const SwitchInput = Switch;

package/dist/components/form/textarea.d.ts

@@ -0,0 +1,17 @@
+export interface TextareaProps {
+    name?: string;
+    id?: string;
+    value?: string;
+    placeholder?: string;
+    rows?: number;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    isInvalid?: boolean;
+    isValid?: boolean;
+    className?: string;
+    autoGrow?: boolean;
+    attributes?: Record<string, unknown>;
+}
+export declare function Textarea(props?: TextareaProps): string;
+export declare const textarea: typeof Textarea;

package/dist/components/form/textarea.js

@@ -0,0 +1,19 @@
+import { classNames, escapeHtml, toAttributes } from "../utils";
+export function Textarea(props = {}) {
+    const { name, id, value = "", placeholder, rows = 3, disabled = false, readOnly = false, required = false, isInvalid = false, isValid = false, className = "", autoGrow = false, attributes } = props;
+    const isAutoGrow = autoGrow || rows === 1;
+    const classes = classNames("form-control", isAutoGrow && "form-control-autogrow", isInvalid && "is-invalid", isValid && "is-valid", className);
+    const baseAttrs = toAttributes({
+        name,
+        id,
+        placeholder,
+        rows,
+        disabled,
+        readonly: readOnly,
+        required,
+        ...(isAutoGrow ? { "data-role": "autogrow" } : {}),
+        ...attributes
+    });
+    return `<textarea class="${classes}"${baseAttrs}>${escapeHtml(value)}</textarea>`.trim();
+}
+export const textarea = Textarea;

package/dist/components/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./utils";
+export * from "./form/index";
+export * from "./data/index";
+export * from "./feedback/index";
+export * from "./overlay/index";
+export * from "./navigation/index";
+export * from "./buttons/index";

package/dist/components/index.js

@@ -0,0 +1,7 @@
+export * from "./utils";
+export * from "./form/index";
+export * from "./data/index";
+export * from "./feedback/index";
+export * from "./overlay/index";
+export * from "./navigation/index";
+export * from "./buttons/index";

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

@@ -0,0 +1,13 @@
+export interface BreadcrumbItem {
+    label: string;
+    href?: string;
+    active?: boolean;
+}
+export interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+    separator?: "slash" | "dot" | "arrow";
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+export declare function Breadcrumb(props: BreadcrumbProps): string;
+export declare const breadcrumb: typeof Breadcrumb;

package/dist/components/navigation/breadcrumb.js

@@ -0,0 +1,25 @@
+import { classNames, escapeHtml, toAttributes } from "../utils";
+export function Breadcrumb(props) {
+    const { items = [], separator = "slash", className = "", attributes } = props;
+    const classes = classNames("breadcrumb", separator === "dot" && "breadcrumb-dot", separator === "arrow" && "breadcrumb-arrow", className);
+    const baseAttrs = toAttributes(attributes);
+    const renderedItems = items
+        .map((item, index) => {
+        const isLast = index === items.length - 1;
+        const isActive = item.active ?? isLast;
+        if (isActive) {
+            return `<li class="breadcrumb-item active" aria-current="page">${escapeHtml(item.label)}</li>`;
+        }
+        const href = item.href ?? "#";
+        return `<li class="breadcrumb-item"><a href="${escapeHtml(href)}">${escapeHtml(item.label)}</a></li>`;
+    })
+        .join("");
+    return `
+    <nav aria-label="breadcrumb"${baseAttrs}>
+      <ol class="${classes}">
+        ${renderedItems}
+      </ol>
+    </nav>
+  `.trim();
+}
+export const breadcrumb = Breadcrumb;

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

@@ -0,0 +1,5 @@
+export * from "./navbar";
+export * from "./breadcrumb";
+export * from "./pagination";
+export * from "./tabs";
+export * from "./scrollspy";

package/dist/components/navigation/index.js

@@ -0,0 +1,5 @@
+export * from "./navbar";
+export * from "./breadcrumb";
+export * from "./pagination";
+export * from "./tabs";
+export * from "./scrollspy";

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

@@ -0,0 +1,20 @@
+export interface NavbarProps {
+    children?: string;
+    brand?: string;
+    brandHref?: string;
+    expand?: "sm" | "md" | "lg" | "xl" | "xxl";
+    dark?: boolean;
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+export declare function Navbar(props?: NavbarProps): string;
+export declare const navbar: typeof Navbar;
+export interface NavLinkProps {
+    label: string;
+    href?: string;
+    active?: boolean;
+    disabled?: boolean;
+    className?: string;
+}
+export declare function NavLink(props: NavLinkProps): string;
+export declare const navLink: typeof NavLink;

package/dist/components/navigation/navbar.js

@@ -0,0 +1,22 @@
+import { classNames, escapeHtml, toAttributes } from "../utils";
+export function Navbar(props = {}) {
+    const { children = "", brand, brandHref = "#", expand, dark = false, className = "", attributes } = props;
+    const classes = classNames("navbar", expand ? `navbar-expand-${expand}` : "navbar-expand", dark && "navbar-dark bg-dark", className);
+    const baseAttrs = toAttributes(attributes);
+    const brandHtml = brand ? `<a class="navbar-brand" href="${escapeHtml(brandHref)}">${escapeHtml(brand)}</a>` : "";
+    return `
+    <nav class="${classes}"${baseAttrs}>
+      ${brandHtml}
+      ${children}
+    </nav>
+  `.trim();
+}
+export const navbar = Navbar;
+export function NavLink(props) {
+    const { label, href = "#", active = false, disabled = false, className = "" } = props;
+    const classes = classNames("nav-link", active && "active", disabled && "disabled", className);
+    const currentAttr = active ? ' aria-current="page"' : "";
+    const disabledAttr = disabled ? ' tabindex="-1" aria-disabled="true"' : "";
+    return `<a class="${classes}" href="${escapeHtml(href)}"${currentAttr}${disabledAttr}>${escapeHtml(label)}</a>`.trim();
+}
+export const navLink = NavLink;

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

@@ -0,0 +1,15 @@
+export interface PaginationItem {
+    label: string;
+    href?: string;
+    active?: boolean;
+    disabled?: boolean;
+    attributes?: Record<string, unknown>;
+}
+export interface PaginationProps {
+    items: PaginationItem[];
+    size?: "sm" | "lg";
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+export declare function Pagination(props: PaginationProps): string;
+export declare const pagination: typeof Pagination;

package/dist/components/navigation/pagination.js

@@ -0,0 +1,31 @@
+import { classNames, escapeHtml, toAttributes } from "../utils";
+export function Pagination(props) {
+    const { items = [], size, className = "", attributes } = props;
+    const classes = classNames("pagination", size === "sm" && "pagination-sm", size === "lg" && "pagination-lg", className);
+    const baseAttrs = toAttributes(attributes);
+    const renderedItems = items
+        .map((item) => {
+        const linkClasses = classNames("page-link", item.disabled && "disabled");
+        const liClasses = classNames("page-item", item.active && "active", item.disabled && "disabled");
+        const href = item.disabled ? "#" : (item.href ?? "#");
+        const currentAttr = item.active ? ' aria-current="page"' : "";
+        const disabledAttr = item.disabled ? ' aria-disabled="true" tabindex="-1"' : "";
+        const itemAttrs = toAttributes(item.attributes);
+        return `
+        <li class="${liClasses}">
+          <a href="${escapeHtml(href)}" class="${linkClasses}"${currentAttr}${disabledAttr}${itemAttrs}>
+            ${item.label}
+          </a>
+        </li>
+      `.trim();
+    })
+        .join("");
+    return `
+    <nav aria-label="Page navigation"${baseAttrs}>
+      <ul class="${classes}">
+        ${renderedItems}
+      </ul>
+    </nav>
+  `.trim();
+}
+export const pagination = Pagination;

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

@@ -0,0 +1,23 @@
+export interface ScrollspyTargetProps {
+    id: string;
+    children?: string;
+    height?: string | number;
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+export declare function ScrollspyTarget(props: ScrollspyTargetProps): string;
+export declare const scrollspyTarget: typeof ScrollspyTarget;
+export interface ScrollspyNavItem {
+    id: string;
+    label: string;
+    active?: boolean;
+}
+export interface ScrollspyNavProps {
+    items: ScrollspyNavItem[];
+    targetId: string;
+    as?: "list-group" | "nav";
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+export declare function ScrollspyNav(props: ScrollspyNavProps): string;
+export declare const scrollspyNav: typeof ScrollspyNav;

package/dist/components/navigation/scrollspy.js

@@ -0,0 +1,43 @@
+import { classNames, escapeHtml, toAttributes } from "../utils";
+export function ScrollspyTarget(props) {
+    const { id, children = "", height = 300, className = "", attributes } = props;
+    const styleAttr = height
+        ? ` style="height: ${typeof height === "number" ? `${height}px` : height}; position: relative; overflow-y: auto;"`
+        : ' style="position: relative; overflow-y: auto;"';
+    const baseAttrs = toAttributes({
+        id,
+        "data-scrollspy": "target",
+        ...attributes
+    });
+    return `<div class="${classNames("scrollspy-target", className)}"${styleAttr}${baseAttrs}>${children}</div>`.trim();
+}
+export const scrollspyTarget = ScrollspyTarget;
+export function ScrollspyNav(props) {
+    const { items = [], targetId, as = "list-group", className = "", attributes } = props;
+    const targetSelector = targetId.startsWith("#") ? targetId : `#${targetId}`;
+    const isListGroup = as === "list-group";
+    const containerClasses = classNames(isListGroup ? "list-group" : "nav flex-column", className);
+    const baseAttrs = toAttributes({
+        "data-scrollspy-nav": "true",
+        ...attributes
+    });
+    const linksHtml = items
+        .map((item, idx) => {
+        const isActive = item.active ?? idx === 0;
+        const linkClass = classNames(isListGroup ? "list-group-item list-group-item-action" : "nav-link", isActive && "active");
+        const sectionSelector = item.id.startsWith("#") ? item.id : `#${item.id}`;
+        return `
+        <a
+          href="${escapeHtml(sectionSelector)}"
+          class="${linkClass}"
+          data-scrollspy-link
+          data-scrollspy-container="${escapeHtml(targetSelector)}"
+        >
+          ${escapeHtml(item.label)}
+        </a>
+      `.trim();
+    })
+        .join("\n");
+    return `<nav class="${containerClasses}"${baseAttrs}>${linksHtml}</nav>`.trim();
+}
+export const scrollspyNav = ScrollspyNav;

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

@@ -0,0 +1,15 @@
+export interface TabItem {
+    id: string;
+    label: string;
+    content: string;
+    active?: boolean;
+    disabled?: boolean;
+}
+export interface TabsProps {
+    items: TabItem[];
+    ariaLabel?: string;
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+export declare function Tabs(props: TabsProps): string;
+export declare const tabs: typeof Tabs;

package/dist/components/navigation/tabs.js

@@ -0,0 +1,56 @@
+import { classNames, escapeHtml, toAttributes } from "../utils";
+export function Tabs(props) {
+    const { items = [], ariaLabel = "Tabs", className = "", attributes } = props;
+    const hasActive = items.some((item) => item.active);
+    const activeIndex = hasActive ? items.findIndex((item) => item.active) : 0;
+    const buttonsHtml = items
+        .map((item, idx) => {
+        const isSelected = idx === activeIndex;
+        const btnClasses = classNames("tab", isSelected && "active", item.disabled && "disabled");
+        const disabledAttr = item.disabled ? " disabled" : "";
+        return `
+        <button
+          id="tab-${escapeHtml(item.id)}"
+          class="${btnClasses}"
+          type="button"
+          data-tabs="#panel-${escapeHtml(item.id)}"
+          role="tab"
+          aria-selected="${isSelected ? "true" : "false"}"
+          tabindex="${isSelected ? "0" : "-1"}"
+          aria-controls="panel-${escapeHtml(item.id)}"
+          ${disabledAttr}
+        >
+          ${escapeHtml(item.label)}
+        </button>
+      `.trim();
+    })
+        .join("");
+    const panelsHtml = items
+        .map((item, idx) => {
+        const isSelected = idx === activeIndex;
+        const hiddenAttr = isSelected ? "" : " hidden";
+        return `
+        <div
+          id="panel-${escapeHtml(item.id)}"
+          class="tab-panel"
+          role="tabpanel"
+          aria-labelledby="tab-${escapeHtml(item.id)}"${hiddenAttr}
+        >
+          ${item.content}
+        </div>
+      `.trim();
+    })
+        .join("\n");
+    const baseAttrs = toAttributes(attributes);
+    return `
+    <div class="${classNames("tabs-wrapper", className)}"${baseAttrs}>
+      <div class="tabs" role="tablist" aria-label="${escapeHtml(ariaLabel)}">
+        ${buttonsHtml}
+      </div>
+      <div class="tab-content mt-3">
+        ${panelsHtml}
+      </div>
+    </div>
+  `.trim();
+}
+export const tabs = Tabs;

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

@@ -0,0 +1,20 @@
+export interface CollapseProps {
+    id: string;
+    children?: string;
+    show?: boolean;
+    horizontal?: boolean;
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+export declare function Collapse(props: CollapseProps): string;
+export declare const collapse: typeof Collapse;
+export interface CollapseTriggerProps {
+    targetId: string;
+    children: string;
+    as?: "button" | "a";
+    expanded?: boolean;
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+export declare function CollapseTrigger(props: CollapseTriggerProps): string;
+export declare const collapseTrigger: typeof CollapseTrigger;

package/dist/components/overlay/collapse.js

@@ -0,0 +1,27 @@
+import { classNames, toAttributes } from "../utils";
+export function Collapse(props) {
+    const { id, children = "", show = false, horizontal = false, className = "", attributes } = props;
+    const classes = classNames("collapse", show && "collapse-show show", horizontal && "collapse-horizontal", className);
+    const baseAttrs = toAttributes({
+        id,
+        ...attributes
+    });
+    return `<div class="${classes}"${baseAttrs}>${children}</div>`.trim();
+}
+export const collapse = Collapse;
+export function CollapseTrigger(props) {
+    const { targetId, children, as: Tag = "button", expanded = false, className = "", attributes } = props;
+    const targetSelector = targetId.startsWith("#") ? targetId : `#${targetId}`;
+    const targetRawId = targetId.replace(/^#/, "");
+    const baseAttrs = toAttributes({
+        href: Tag === "a" ? targetSelector : undefined,
+        type: Tag === "button" ? "button" : undefined,
+        "data-collapse": targetSelector,
+        "data-collapse-target": targetSelector,
+        "aria-expanded": expanded ? "true" : "false",
+        "aria-controls": targetRawId,
+        ...attributes
+    });
+    return `<${Tag} class="${classNames(className)}"${baseAttrs}>${children}</${Tag}>`.trim();
+}
+export const collapseTrigger = CollapseTrigger;

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

@@ -0,0 +1,33 @@
+export interface DropdownProps {
+    children?: string;
+    direction?: "up" | "end" | "start";
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+export declare function Dropdown(props?: DropdownProps): string;
+export declare const dropdown: typeof Dropdown;
+export interface DropdownMenuProps {
+    id?: string;
+    children?: string;
+    end?: boolean;
+    dark?: boolean;
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+export declare function DropdownMenu(props?: DropdownMenuProps): string;
+export declare const dropdownMenu: typeof DropdownMenu;
+export interface DropdownItemProps {
+    content?: string;
+    href?: string;
+    active?: boolean;
+    disabled?: boolean;
+    danger?: boolean;
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+export declare function DropdownItem(props?: DropdownItemProps): string;
+export declare const dropdownItem: typeof DropdownItem;
+export declare function DropdownDivider(className?: string): string;
+export declare const dropdownDivider: typeof DropdownDivider;
+export declare function DropdownHeader(title: string, className?: string): string;
+export declare const dropdownHeader: typeof DropdownHeader;