@abydahana/aksara-ui 1.1.3 → 1.1.5

package/dist/components/feedback/spinner.d.ts

@@ -1,5 +1,6 @@
+import { type ComponentSize } from "../utils";
 export interface SpinnerProps {
-    size?: "sm" | "md";
+    size?: ComponentSize;
     variant?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "dark" | "light";
     label?: string;
     className?: string;

package/dist/components/feedback/spinner.js

@@ -1,7 +1,8 @@
 import { classNames, toAttributes } from "../utils";
 export function Spinner(props = {}) {
     const { size, variant, label = "Loading...", className = "", attributes } = props;
-    const classes = classNames("spinner", size === "sm" && "spinner-sm", variant && `text-${variant}`, className);
+    const sizeClass = size ? `spinner-${size}` : "";
+    const classes = classNames("spinner", sizeClass, variant && `text-${variant}`, className);
     const baseAttrs = toAttributes({
         role: "status",
         "aria-label": label,

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

@@ -0,0 +1,19 @@
+import { type ComponentSize } from "../utils";
+export interface DropdownSelectOption {
+    value: string;
+    label: string;
+    icon?: string;
+    iconClass?: string;
+}
+export interface DropdownSelectProps {
+    name: string;
+    options: DropdownSelectOption[];
+    defaultValue?: string;
+    className?: string;
+    btnClassName?: string;
+    size?: ComponentSize;
+    variant?: "chip" | "form-select";
+    attributes?: Record<string, unknown>;
+}
+export declare function DropdownSelect(props: DropdownSelectProps): string;
+export declare const dropdownSelect: typeof DropdownSelect;

package/dist/components/form/dropdown-select.js

@@ -0,0 +1,80 @@
+import { classNames, escapeHtml } from "../utils";
+import { Input } from "./input";
+import { Button } from "../buttons/button";
+import { Dropdown, DropdownItem, DropdownMenu } from "../overlay/dropdown";
+export function DropdownSelect(props) {
+    const { name, options = [], defaultValue, className = "", btnClassName = "", size = props.variant === "form-select" ? "md" : "sm", variant = "chip", attributes } = props;
+    const selectedOption = options.find((opt) => opt.value === defaultValue) ?? options[0];
+    const isFormSelect = variant === "form-select";
+    const dropdownSizeClass = size ? `dropdown-${size}` : "dropdown-md";
+    const menuSizeClass = size && size !== "md" ? `dropdown-menu-${size}` : "";
+    const selectSizeClass = size ? `form-select-${size}` : "";
+    const chipSizeClass = size ? `chip-${size}` : "chip-md";
+    const hiddenInput = Input({
+        type: "hidden",
+        name,
+        value: selectedOption?.value ?? ""
+    });
+    const triggerIcon = selectedOption?.icon
+        ? `<i class="mdi ${escapeHtml(selectedOption.icon)} ${escapeHtml(selectedOption.iconClass ?? "")} me-1.5 select-current-icon"></i>`
+        : "";
+    const triggerBtn = isFormSelect
+        ? `<button type="button" class="form-select ${selectSizeClass} ${btnClassName} text-start d-flex align-items-center justify-content-between cursor-pointer" data-dropdown="" aria-haspopup="true" aria-expanded="false">
+      <div class="d-flex align-items-center min-w-0 flex-1 me-2 text-truncate">
+        ${triggerIcon}
+        <span class="select-current-label text-truncate">${escapeHtml(selectedOption?.label ?? "")}</span>
+      </div>
+    </button>`
+        : Button({
+            type: "button",
+            variant: "secondary",
+            soft: true,
+            size: size === "md" ? undefined : size,
+            className: `${btnClassName || `composer-chip-btn ${chipSizeClass}`}`,
+            attributes: {
+                "data-dropdown": "",
+                "aria-haspopup": "true",
+                "aria-expanded": "false"
+            },
+            children: `
+          ${triggerIcon}
+          <span class="select-current-label">${escapeHtml(selectedOption?.label ?? "")}</span>
+          <i class="mdi mdi-chevron-down ms-1 opacity-60"></i>
+        `
+        });
+    const menuItems = options
+        .map((opt) => DropdownItem({
+        active: opt.value === selectedOption?.value,
+        attributes: {
+            type: "button",
+            "data-dropdown-option": opt.value,
+            "data-icon": opt.icon ?? "",
+            "data-icon-class": opt.iconClass ?? ""
+        },
+        content: `
+          ${opt.icon ? `<i class="mdi ${escapeHtml(opt.icon)} ${escapeHtml(opt.iconClass ?? "")} me-2"></i>` : ""}
+          <span>${escapeHtml(opt.label)}</span>
+        `
+    }))
+        .join("\n");
+    const menu = DropdownMenu({
+        className: `${menuSizeClass} ${isFormSelect ? "dropdown-select-menu" : ""}`.trim(),
+        attributes: {
+            "data-dropdown-select-menu": name
+        },
+        children: menuItems
+    });
+    return Dropdown({
+        className: classNames("aksara-select-dropdown", isFormSelect && "variant-form-select w-100", dropdownSizeClass, className),
+        attributes: {
+            "data-dropdown-select": name,
+            ...attributes
+        },
+        children: `
+      ${hiddenInput}
+      ${triggerBtn}
+      ${menu}
+    `
+    });
+}
+export const dropdownSelect = DropdownSelect;

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

@@ -9,3 +9,4 @@ export * from "./input-group";
 export * from "./form-control";
 export * from "./floating-label";
 export * from "./layout";
+export * from "./dropdown-select";

package/dist/components/form/index.js

@@ -9,3 +9,4 @@ export * from "./input-group";
 export * from "./form-control";
 export * from "./floating-label";
 export * from "./layout";
+export * from "./dropdown-select";

package/dist/components/form/input-group.d.ts

@@ -1,6 +1,7 @@
+import { type ComponentSize } from "../utils";
 export interface InputGroupProps {
     children?: string;
-    size?: "sm" | "lg";
+    size?: ComponentSize;
     className?: string;
     attributes?: Record<string, unknown>;
 }

package/dist/components/form/input-group.js

@@ -1,7 +1,8 @@
 import { classNames, toAttributes } from "../utils";
 export function InputGroup(props = {}) {
     const { children = "", size, className = "", attributes } = props;
-    const classes = classNames("input-group", size === "sm" && "input-group-sm", size === "lg" && "input-group-lg", className);
+    const sizeClass = size ? `input-group-${size}` : "";
+    const classes = classNames("input-group", sizeClass, className);
     const baseAttrs = toAttributes(attributes);
     return `<div class="${classes}"${baseAttrs}>${children}</div>`.trim();
 }

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

@@ -1,3 +1,4 @@
+import { type ComponentSize } from "../utils";
 export type InputType = "text" | "password" | "email" | "number" | "search" | "tel" | "url" | "date" | "datetime-local" | "time" | "month" | "week" | "color" | "file" | "hidden";
 export interface InputProps {
     type?: InputType;
@@ -8,7 +9,7 @@ export interface InputProps {
     disabled?: boolean;
     readOnly?: boolean;
     required?: boolean;
-    size?: "sm" | "lg";
+    size?: ComponentSize;
     isInvalid?: boolean;
     isValid?: boolean;
     className?: string;

package/dist/components/form/input.js

@@ -2,7 +2,8 @@ import { classNames, toAttributes } from "../utils";
 export function Input(props = {}) {
     const { type = "text", name, id, value, placeholder, disabled = false, readOnly = false, required = false, size, isInvalid = false, isValid = false, className = "", attributes } = props;
     const controlClass = type === "color" ? "form-control form-control-color" : "form-control";
-    const classes = classNames(controlClass, size === "sm" && "form-control-sm", size === "lg" && "form-control-lg", isInvalid && "is-invalid", isValid && "is-valid", className);
+    const sizeClass = size ? `form-control-${size}` : "";
+    const classes = classNames(controlClass, sizeClass, isInvalid && "is-invalid", isValid && "is-valid", className);
     const baseAttrs = toAttributes({
         type,
         name,

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

@@ -1,3 +1,4 @@
+import { type ComponentSize } from "../utils";
 export interface SelectOption {
     label: string;
     value: string | number;
@@ -15,7 +16,7 @@ export interface SelectProps {
     placeholder?: string;
     disabled?: boolean;
     required?: boolean;
-    size?: "sm" | "lg";
+    size?: ComponentSize;
     isInvalid?: boolean;
     isValid?: boolean;
     className?: string;

package/dist/components/form/select.js

@@ -1,7 +1,8 @@
 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 sizeClass = size ? `form-select-${size}` : "";
+    const classes = classNames("form-select", sizeClass, isInvalid && "is-invalid", isValid && "is-valid", className);
     const baseAttrs = toAttributes({
         name,
         id,

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

@@ -1,3 +1,4 @@
+import { type ComponentSize } from "../utils";
 export interface TextareaProps {
     name?: string;
     id?: string;
@@ -7,6 +8,7 @@ export interface TextareaProps {
     disabled?: boolean;
     readOnly?: boolean;
     required?: boolean;
+    size?: ComponentSize;
     isInvalid?: boolean;
     isValid?: boolean;
     className?: string;

package/dist/components/form/textarea.js

@@ -1,8 +1,9 @@
 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 { name, id, value = "", placeholder, rows = 3, disabled = false, readOnly = false, required = false, size, 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 sizeClass = size ? `form-control-${size}` : "";
+    const classes = classNames("form-control", sizeClass, isAutoGrow && "form-control-autogrow", isInvalid && "is-invalid", isValid && "is-valid", className);
     const baseAttrs = toAttributes({
         name,
         id,

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

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

package/dist/components/navigation/index.js

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

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

@@ -1,3 +1,4 @@
+import { type ComponentSize } from "../utils";
 export interface PaginationItem {
     label: string;
     href?: string;
@@ -7,7 +8,7 @@ export interface PaginationItem {
 }
 export interface PaginationProps {
     items: PaginationItem[];
-    size?: "sm" | "lg";
+    size?: ComponentSize;
     className?: string;
     attributes?: Record<string, unknown>;
 }

package/dist/components/navigation/pagination.js

@@ -1,7 +1,8 @@
 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 sizeClass = size ? `pagination-${size}` : "";
+    const classes = classNames("pagination", sizeClass, className);
     const baseAttrs = toAttributes(attributes);
     const renderedItems = items
         .map((item) => {

package/dist/components/navigation/user-pill.d.ts

@@ -0,0 +1,13 @@
+export interface UserPillProps {
+    avatar?: string;
+    initials?: string;
+    name: string;
+    handle?: string;
+    subtitle?: string;
+    menuHtml?: string;
+    className?: string;
+    triggerClassName?: string;
+    attributes?: Record<string, unknown>;
+}
+export declare function UserPill(props: UserPillProps): string;
+export declare const userPill: typeof UserPill;

package/dist/components/navigation/user-pill.js

@@ -0,0 +1,32 @@
+import { classNames, escapeHtml, toAttributes } from "../utils";
+import { Avatar } from "../data/avatar";
+export function UserPill(props) {
+    const { avatar, initials, name, handle, subtitle, menuHtml = "", className = "", triggerClassName = "", attributes } = props;
+    const containerClasses = classNames("sidebar-user-pill-wrap position-relative mt-auto", className);
+    const triggerClasses = classNames("sidebar-user-pill w-100 text-start", triggerClassName);
+    const avatarHtml = Avatar({
+        src: avatar,
+        alt: name,
+        initials,
+        size: "md",
+        shape: "circle",
+        className: "sidebar-user-avatar"
+    });
+    const subText = subtitle || (handle ? `@${handle.replace(/^@/, "")}` : "");
+    const menuContainer = menuHtml ? `<div class="sidebar-user-menu d-none" data-user-menu>${menuHtml}</div>` : "";
+    const baseAttrs = toAttributes(attributes);
+    return `
+    <div class="${containerClasses}"${baseAttrs}>
+      ${menuContainer}
+      <button type="button" class="${triggerClasses}" data-user-menu-trigger aria-haspopup="true" aria-expanded="false">
+        ${avatarHtml}
+        <div class="sidebar-user-meta flex-1 min-w-0">
+          <div class="sidebar-user-name fw-bold text-truncate">${escapeHtml(name)}</div>
+          ${subText ? `<div class="sidebar-user-handle text-muted text-truncate">${escapeHtml(subText)}</div>` : ""}
+        </div>
+        <i class="mdi mdi-dots-horizontal sidebar-user-dots" aria-hidden="true"></i>
+      </button>
+    </div>
+  `.trim();
+}
+export const userPill = UserPill;

package/dist/components/utils.d.ts

@@ -1,3 +1,4 @@
+export type ComponentSize = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abydahana/aksara-ui",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "publishConfig": {
     "access": "public"
   },