@abydahana/aksara-ui 1.1.4 → 1.1.6

package/dist/components/buttons/button-group.d.ts

@@ -1,6 +1,7 @@
+import { type ComponentSize } from "../utils";
 export interface ButtonGroupProps {
     children?: string;
-    size?: "sm" | "lg";
+    size?: ComponentSize;
     vertical?: boolean;
     ariaLabel?: string;
     className?: string;

package/dist/components/buttons/button-group.js

@@ -1,7 +1,8 @@
 import { classNames, toAttributes } from "../utils";
 export function ButtonGroup(props = {}) {
     const { children = "", size, vertical = false, ariaLabel = "Button group", className = "", attributes } = props;
-    const classes = classNames(vertical ? "btn-group-vertical" : "btn-group", size === "sm" && "btn-group-sm", size === "lg" && "btn-group-lg", className);
+    const sizeClass = size ? `btn-group-${size}` : "";
+    const classes = classNames(vertical ? "btn-group-vertical" : "btn-group", sizeClass, className);
     const baseAttrs = toAttributes({
         role: "group",
         "aria-label": ariaLabel,

package/dist/components/buttons/button.d.ts

@@ -1,3 +1,4 @@
+import { type ComponentSize } from "../utils";
 export type ButtonVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "dark" | "light" | "link";
 export interface ButtonProps {
     label?: string;
@@ -7,7 +8,7 @@ export interface ButtonProps {
     outline?: boolean;
     soft?: boolean;
     ghost?: boolean;
-    size?: "sm" | "lg";
+    size?: ComponentSize;
     pill?: boolean;
     disabled?: boolean;
     href?: string;

package/dist/components/buttons/button.js

@@ -11,7 +11,8 @@ export function Button(props = {}) {
     else if (soft) {
         variantClass = `btn-soft-${variant}`;
     }
-    const classes = classNames("btn", variantClass, size === "sm" && "btn-sm", size === "lg" && "btn-lg", pill && "rounded-pill", disabled && "disabled", className);
+    const sizeClass = size ? `btn-${size}` : "";
+    const classes = classNames("btn", variantClass, sizeClass, pill && "rounded-pill", disabled && "disabled", className);
     const isLink = Boolean(href);
     const Tag = isLink ? "a" : "button";
     const baseAttrs = toAttributes({

package/dist/components/buttons/close-button.d.ts

@@ -1,4 +1,6 @@
+import { type ComponentSize } from "../utils";
 export interface CloseButtonProps {
+    size?: ComponentSize;
     white?: boolean;
     disabled?: boolean;
     ariaLabel?: string;

package/dist/components/buttons/close-button.js

@@ -1,7 +1,8 @@
 import { classNames, toAttributes } from "../utils";
 export function CloseButton(props = {}) {
-    const { white = false, disabled = false, ariaLabel = "Close", className = "", attributes } = props;
-    const classes = classNames("btn-close", white && "btn-close-white", className);
+    const { size, white = false, disabled = false, ariaLabel = "Close", className = "", attributes } = props;
+    const sizeClass = size ? `btn-close-${size}` : "";
+    const classes = classNames("btn-close", sizeClass, white && "btn-close-white", className);
     const baseAttrs = toAttributes({
         type: "button",
         "aria-label": ariaLabel,

package/dist/components/data/avatar.js

@@ -47,7 +47,7 @@ export function Avatar(props = {}) {
         else if (status === "away")
             statusVariant = "bg-warning";
         const statusKey = typeof status === "string" ? status : "online";
-        statusHtml = `<span class="avatar-status position-absolute rounded-full ${statusVariant} border-2 border-body" data-status="${statusKey}" aria-hidden="true"></span>`;
+        statusHtml = `<span class="avatar-status position-absolute rounded-full ${statusVariant} border-2" data-status="${statusKey}" aria-hidden="true"></span>`;
     }
     return `
     <span class="${classes}"${baseAttrs}>
@@ -71,7 +71,7 @@ export function AvatarGroup(props = {}) {
     const renderedAvatars = displayed.map((item) => Avatar({ ...item, size: item.size ?? size })).join("\n");
     const extraPill = extraCount > 0
         ? `
-        <span class="avatar avatar-${size} rounded-full bg-subtle text-subtle text-xs font-bold inline-flex items-center justify-center border-2 border-body">
+        <span class="avatar avatar-${size} rounded-full bg-subtle text-subtle text-xs font-bold inline-flex items-center justify-center border-2">
           +${extraCount}
         </span>
       `.trim()

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

@@ -2,7 +2,7 @@ import { classNames, escapeHtml, toAttributes } from "../utils";
 import { Avatar } from "./avatar";
 export function UserItem(props) {
     const { avatar, initials, avatarVariant, name, handle, subtitle, verified = false, status, href, action, className = "", attributes } = props;
-    const containerClasses = classNames("user-item d-flex align-items-center justify-content-between p-3 border-bottom border-subtle", className);
+    const containerClasses = classNames("user-item d-flex align-items-center justify-content-between px-3 py-2 border-bottom border-subtle", className);
     const avatarHtml = Avatar({
         src: avatar,
         initials,

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

@@ -1,8 +1,10 @@
+import { type ComponentSize } from "../utils";
 export type BadgeVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "dark" | "light";
 export interface BadgeProps {
     label?: string;
     children?: string;
     variant?: BadgeVariant;
+    size?: ComponentSize;
     soft?: boolean;
     pill?: boolean;
     dot?: boolean;

package/dist/components/feedback/badge.js

@@ -1,8 +1,9 @@
 import { classNames, escapeHtml, toAttributes } from "../utils";
 export function Badge(props = {}) {
-    const { label, children, variant = "primary", soft = false, pill = false, dot = false, className = "", attributes } = props;
+    const { label, children, variant = "primary", size, soft = false, pill = false, dot = false, className = "", attributes } = props;
     const prefix = soft ? "badge-soft" : "badge";
-    const classes = classNames("badge", `${prefix}-${variant}`, pill && "rounded-pill", dot && `badge-dot text-${variant}`, className);
+    const sizeClass = size ? `badge-${size}` : "";
+    const classes = classNames("badge", `${prefix}-${variant}`, sizeClass, pill && "rounded-pill", dot && `badge-dot text-${variant}`, className);
     const baseAttrs = toAttributes(attributes);
     const content = children !== undefined ? children : label !== undefined ? escapeHtml(label) : "";
     return `<span class="${classes}"${baseAttrs}>${content}</span>`.trim();

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

@@ -1,3 +1,4 @@
+import { type ComponentSize } from "../utils";
 export interface DropdownSelectOption {
     value: string;
     label: string;
@@ -10,7 +11,7 @@ export interface DropdownSelectProps {
     defaultValue?: string;
     className?: string;
     btnClassName?: string;
-    size?: "sm" | "md" | "lg";
+    size?: ComponentSize;
     variant?: "chip" | "form-select";
     attributes?: Record<string, unknown>;
 }

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

@@ -6,10 +6,10 @@ 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 === "sm" ? "dropdown-sm" : size === "lg" ? "dropdown-lg" : "dropdown-md";
-    const menuSizeClass = size === "sm" ? "dropdown-menu-sm" : size === "lg" ? "dropdown-menu-lg" : "";
-    const selectSizeClass = size === "sm" ? "form-select-sm" : size === "lg" ? "form-select-lg" : "";
-    const chipSizeClass = size === "sm" ? "chip-sm" : size === "lg" ? "chip-lg" : "chip-md";
+    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,

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/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/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.4",
+  "version": "1.1.6",
   "publishConfig": {
     "access": "public"
   },