@abydahana/aksara-ui 1.2.4 → 1.2.5

package/dist/components/data/settings.d.ts

@@ -4,6 +4,8 @@ export interface SettingsGroupProps {
     title?: string;
     className?: string;
     attributes?: Record<string, unknown>;
+    /** Inset iOS-style group with soft background and rounded corners */
+    inset?: boolean;
 }
 /**
  * Container for a group of settings-style rows.

package/dist/components/data/settings.js

@@ -4,12 +4,13 @@ import { classNames, escapeHtml, toAttributes } from "../utils";
  * Renders as `.list-group` with an optional uppercase section heading above.
  */
 export function SettingsGroup(props = {}) {
-    const { children = "", title = "", className = "", attributes } = props;
+    const { children = "", title = "", className = "", attributes, inset = false } = props;
     const baseAttrs = toAttributes(attributes);
-    const groupHtml = `<div class="${classNames("list-group", className)}"${baseAttrs}>${children}</div>`;
+    const groupClasses = classNames("list-group", inset && "list-group-inset", className);
+    const groupHtml = `<div class="${groupClasses}"${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">${escapeHtml(title)}</p><div class="${classNames("list-group", className)}">${children}</div></div>`.trim();
+    return `<div><p class="text-xs font-800 uppercase tracking-wider text-subtle mb-2 px-1">${escapeHtml(title)}</p><div class="${groupClasses}">${children}</div></div>`.trim();
 }
 export const settingsGroup = SettingsGroup;
 /**

package/dist/components/data/user-item.js

@@ -21,7 +21,7 @@ export function UserItem(props) {
         : "";
     const hasDistinctSubtitle = Boolean(subtitle && (!cleanHandle || subtitle.replace(/^@/, "").trim() !== cleanHandle));
     const subtitleHtml = hasDistinctSubtitle
-        ? `<div class="user-item-subtitle text-subtle ${cleanHandle ? "text-xs" : "text-sm"} text-truncate mt-0.5">${escapeHtml(subtitle)}</div>`
+        ? `<div class="user-item-subtitle text-subtle ${cleanHandle ? "text-xs" : "text-sm"} text-truncate mt-1">${escapeHtml(subtitle)}</div>`
         : "";
     const contentCol = `
     <div class="user-item-info flex-1 min-w-0">

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

@@ -16,7 +16,7 @@ export function DropdownSelect(props) {
         value: selectedOption?.value ?? ""
     });
     const triggerIcon = selectedOption?.icon
-        ? `<i class="mdi ${escapeHtml(selectedOption.icon)} ${escapeHtml(selectedOption.iconClass ?? "")} me-1.5 select-current-icon"></i>`
+        ? `<i class="mdi ${escapeHtml(selectedOption.icon)} ${escapeHtml(selectedOption.iconClass ?? "")} me-2 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">

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

@@ -1,6 +1,7 @@
 export interface TabItem {
     id: string;
     label: string;
+    icon?: string;
     content: string;
     active?: boolean;
     disabled?: boolean;
@@ -12,6 +13,8 @@ export interface TabsProps {
     attributes?: Record<string, unknown>;
     /** When true (default: true), tab panels render in a swipeable slider track that tracks finger movement */
     swipeable?: boolean;
+    /** Visual style variant: 'default' (standard underline), 'segmented' (iOS/macOS style segmented control), or 'pills' */
+    variant?: "default" | "segmented" | "pills";
 }
 export declare function Tabs(props: TabsProps): string;
 export declare const tabs: typeof Tabs;

package/dist/components/navigation/tabs.js

@@ -1,6 +1,6 @@
 import { classNames, escapeHtml, toAttributes } from "../utils";
 export function Tabs(props) {
-    const { items = [], ariaLabel = "Tabs", className = "", attributes, swipeable = true } = props;
+    const { items = [], ariaLabel = "Tabs", className = "", attributes, swipeable = true, variant = "default" } = props;
     const hasActive = items.some((item) => item.active);
     const activeIndex = hasActive ? items.findIndex((item) => item.active) : 0;
     const buttonsHtml = items
@@ -8,6 +8,7 @@ export function Tabs(props) {
         const isSelected = idx === activeIndex;
         const btnClasses = classNames("tab", isSelected && "active", item.disabled && "disabled");
         const disabledAttr = item.disabled ? " disabled" : "";
+        const iconHtml = item.icon ? `<span class="tab-icon me-1 shrink-0" aria-hidden="true">${item.icon}</span>` : "";
         return `
         <button
           id="tab-${escapeHtml(item.id)}"
@@ -20,7 +21,7 @@ export function Tabs(props) {
           aria-controls="panel-${escapeHtml(item.id)}"
           ${disabledAttr}
         >
-          ${escapeHtml(item.label)}
+          ${iconHtml}${escapeHtml(item.label)}
         </button>
       `.trim();
     })
@@ -44,9 +45,10 @@ export function Tabs(props) {
         .join("\n");
     const baseAttrs = toAttributes(attributes);
     const trackClass = classNames("tab-content", swipeable && "tabs-slider-track", "mt-3");
+    const tablistClass = classNames("tabs", variant === "segmented" && "tabs-segmented", variant === "pills" && "nav nav-pills");
     return `
-    <div class="${classNames("tabs-wrapper", swipeable && "tabs-slider", className)}"${baseAttrs}>
-      <div class="tabs" role="tablist" aria-label="${escapeHtml(ariaLabel)}">
+    <div class="${classNames("tabs-wrapper", swipeable && "tabs-slider", variant === "segmented" && "tabs-segmented-wrapper", className)}"${baseAttrs}>
+      <div class="${tablistClass}" role="tablist" aria-label="${escapeHtml(ariaLabel)}">
         ${buttonsHtml}
       </div>
       <div class="${trackClass}"${swipeable ? ' data-tabs-slider=""' : ""}>

package/package.json

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