@abydahana/aksara-ui 1.1.3 → 1.1.4

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/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/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/package.json

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