@abydahana/aksara-ui 0.1.0

package/dist/components/data/media-grid.js

@@ -0,0 +1,47 @@
+import { classNames, escapeHtml, toAttributes } from "../utils";
+export function MediaGrid(props) {
+    const { items = [], maxDisplay = 4, gap = 2, rounded = true, onItemClickAttribute, itemClickDataId, className = "", attributes } = props;
+    const count = items.length;
+    if (count === 0)
+        return "";
+    const displayed = items.slice(0, maxDisplay);
+    const extraCount = count - maxDisplay;
+    let gridVariant = "media-grid-1";
+    if (count === 2)
+        gridVariant = "media-grid-2";
+    else if (count === 3)
+        gridVariant = "media-grid-3";
+    else if (count >= 4)
+        gridVariant = "media-grid-4";
+    const containerClasses = classNames("media-grid", gridVariant, gap && `gap-${gap}`, rounded && "rounded-12", "overflow-hidden", className);
+    const baseAttrs = toAttributes({
+        ...(itemClickDataId ? { "data-media-id": itemClickDataId } : {}),
+        ...attributes
+    });
+    const cellsHtml = displayed
+        .map((item, idx) => {
+        const isLast = idx === maxDisplay - 1 && extraCount > 0;
+        const cellClasses = classNames("media-grid-item", `media-grid-item-${idx + 1}`, isLast && "has-overlay", "position-relative overflow-hidden cursor-pointer");
+        const itemAttrs = toAttributes({
+            ...(onItemClickAttribute && itemClickDataId ? { [onItemClickAttribute]: itemClickDataId } : {}),
+            "data-media-index": item.dataIndex ?? idx,
+            ...item.attributes
+        });
+        const overlayHtml = isLast
+            ? `
+          <div class="media-grid-overlay position-absolute inset-0 d-flex align-items-center justify-content-center">
+            <span class="media-grid-overlay-text font-bold text-white text-24">+${extraCount}</span>
+          </div>
+        `.trim()
+            : "";
+        return `
+        <div class="${cellClasses}"${itemAttrs}>
+          <img src="${escapeHtml(item.src)}" alt="${escapeHtml(item.alt || `Media item ${idx + 1}`)}" class="media-grid-img w-full h-full object-cover block" loading="lazy" />
+          ${overlayHtml}
+        </div>
+      `.trim();
+    })
+        .join("\n");
+    return `<div class="${containerClasses}"${baseAttrs}>${cellsHtml}</div>`.trim();
+}
+export const mediaGrid = MediaGrid;

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

@@ -0,0 +1,35 @@
+export interface TableProps {
+    children?: string;
+    striped?: boolean;
+    bordered?: boolean;
+    borderless?: boolean;
+    hover?: boolean;
+    small?: boolean;
+    responsive?: boolean | "sm" | "md" | "lg" | "xl" | "xxl";
+    dark?: boolean;
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+export declare function Table(props?: TableProps): string;
+export declare const table: typeof Table;
+export interface TableHeadProps {
+    children?: string;
+    dark?: boolean;
+    className?: string;
+}
+export declare function TableHead(props?: TableHeadProps): string;
+export declare const tableHead: typeof TableHead;
+export interface TableBodyProps {
+    children?: string;
+    className?: string;
+}
+export declare function TableBody(props?: TableBodyProps): string;
+export declare const tableBody: typeof TableBody;
+export interface TableRowProps {
+    children?: string;
+    variant?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
+    active?: boolean;
+    className?: string;
+}
+export declare function TableRow(props?: TableRowProps): string;
+export declare const tableRow: typeof TableRow;

package/dist/components/data/table.js

@@ -0,0 +1,30 @@
+import { classNames, toAttributes } from "../utils";
+export function Table(props = {}) {
+    const { children = "", striped = false, bordered = false, borderless = false, hover = false, small = false, responsive = false, dark = false, className = "", attributes } = props;
+    const tableClasses = classNames("table", striped && "table-striped", bordered && "table-bordered", borderless && "table-borderless", hover && "table-hover", small && "table-compact table-sm", dark && "table-dark", className);
+    const baseAttrs = toAttributes(attributes);
+    const tableHtml = `<table class="${tableClasses}"${baseAttrs}>${children}</table>`.trim();
+    if (responsive) {
+        const responsiveClass = typeof responsive === "string" ? `table-responsive-${responsive}` : "table-responsive";
+        return `<div class="${responsiveClass}">${tableHtml}</div>`.trim();
+    }
+    return tableHtml;
+}
+export const table = Table;
+export function TableHead(props = {}) {
+    const { children = "", dark = false, className = "" } = props;
+    const classes = classNames(dark && "table-dark", className);
+    return `<thead class="${classes}">${children}</thead>`.trim();
+}
+export const tableHead = TableHead;
+export function TableBody(props = {}) {
+    const { children = "", className = "" } = props;
+    return `<tbody class="${classNames(className)}">${children}</tbody>`.trim();
+}
+export const tableBody = TableBody;
+export function TableRow(props = {}) {
+    const { children = "", variant, active = false, className = "" } = props;
+    const classes = classNames(variant && `table-${variant}`, active && "table-active", className);
+    return `<tr class="${classes}">${children}</tr>`.trim();
+}
+export const tableRow = TableRow;

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

@@ -0,0 +1,10 @@
+export type AlertVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "dark" | "light";
+export interface AlertProps {
+    content: string;
+    variant?: AlertVariant;
+    dismissible?: boolean;
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+export declare function Alert(props: AlertProps): string;
+export declare const alert: typeof Alert;

package/dist/components/feedback/alert.js

@@ -0,0 +1,19 @@
+import { classNames, toAttributes } from "../utils";
+export function Alert(props) {
+    const { content, variant = "primary", dismissible = false, className = "", attributes } = props;
+    const classes = classNames("alert", `alert-${variant}`, dismissible && "alert-dismissible", className);
+    const baseAttrs = toAttributes({
+        role: "alert",
+        ...attributes
+    });
+    const closeButton = dismissible
+        ? '<button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>'
+        : "";
+    return `
+    <div class="${classes}"${baseAttrs}>
+      ${content}
+      ${closeButton}
+    </div>
+  `.trim();
+}
+export const alert = Alert;

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

@@ -0,0 +1,13 @@
+export type BadgeVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "dark" | "light";
+export interface BadgeProps {
+    label?: string;
+    children?: string;
+    variant?: BadgeVariant;
+    soft?: boolean;
+    pill?: boolean;
+    dot?: boolean;
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+export declare function Badge(props?: BadgeProps): string;
+export declare const badge: typeof Badge;

package/dist/components/feedback/badge.js

@@ -0,0 +1,10 @@
+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 prefix = soft ? "badge-soft" : "badge";
+    const classes = classNames("badge", `${prefix}-${variant}`, 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();
+}
+export const badge = Badge;

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

@@ -0,0 +1,6 @@
+export * from "./alert";
+export * from "./badge";
+export * from "./progress";
+export * from "./spinner";
+export * from "./toast";
+export * from "./placeholder";

package/dist/components/feedback/index.js

@@ -0,0 +1,6 @@
+export * from "./alert";
+export * from "./badge";
+export * from "./progress";
+export * from "./spinner";
+export * from "./toast";
+export * from "./placeholder";

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

@@ -0,0 +1,9 @@
+export interface PlaceholderProps {
+    animation?: "glow" | "wave";
+    size?: "xs" | "sm" | "lg";
+    variant?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "dark" | "light";
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+export declare function Placeholder(props?: PlaceholderProps): string;
+export declare const placeholder: typeof Placeholder;

package/dist/components/feedback/placeholder.js

@@ -0,0 +1,11 @@
+import { classNames, toAttributes } from "../utils";
+export function Placeholder(props = {}) {
+    const { animation, size, variant, className = "", attributes } = props;
+    const classes = classNames("placeholder", animation && `placeholder-${animation}`, size && `placeholder-${size}`, variant && `bg-${variant}`, className);
+    const baseAttrs = toAttributes({
+        "aria-hidden": "true",
+        ...attributes
+    });
+    return `<span class="${classes}"${baseAttrs}></span>`.trim();
+}
+export const placeholder = Placeholder;

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

@@ -0,0 +1,14 @@
+export interface ProgressProps {
+    value: number;
+    min?: number;
+    max?: number;
+    label?: string;
+    variant?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "dark";
+    striped?: boolean;
+    animated?: boolean;
+    height?: string | number;
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+export declare function Progress(props: ProgressProps): string;
+export declare const progress: typeof Progress;

package/dist/components/feedback/progress.js

@@ -0,0 +1,22 @@
+import { classNames, toAttributes } from "../utils";
+export function Progress(props) {
+    const { value, min = 0, max = 100, label, variant = "primary", striped = false, animated = false, height, className = "", attributes } = props;
+    const percentage = Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100));
+    const barClasses = classNames("progress-bar", variant && `bg-${variant}`, striped && "progress-striped", animated && "progress-animated");
+    const containerStyle = height ? ` style="height: ${typeof height === "number" ? `${height}px` : height};"` : "";
+    const baseAttrs = toAttributes({
+        role: "progressbar",
+        "aria-valuenow": value,
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        ...attributes
+    });
+    return `
+    <div class="${classNames("progress", className)}"${containerStyle}>
+      <div class="${barClasses}" style="width: ${percentage}%;"${baseAttrs}>
+        ${label ?? ""}
+      </div>
+    </div>
+  `.trim();
+}
+export const progress = Progress;

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

@@ -0,0 +1,9 @@
+export interface SpinnerProps {
+    size?: "sm" | "md";
+    variant?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "dark" | "light";
+    label?: string;
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+export declare function Spinner(props?: SpinnerProps): string;
+export declare const spinner: typeof Spinner;

package/dist/components/feedback/spinner.js

@@ -0,0 +1,12 @@
+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 baseAttrs = toAttributes({
+        role: "status",
+        "aria-label": label,
+        ...attributes
+    });
+    return `<span class="${classes}"${baseAttrs}></span>`.trim();
+}
+export const spinner = Spinner;

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

@@ -0,0 +1,22 @@
+export interface ToastProps {
+    id?: string;
+    title?: string;
+    time?: string;
+    body: string;
+    variant?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "dark" | "light";
+    delay?: number;
+    autohide?: boolean;
+    dismissible?: boolean;
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+export declare function Toast(props: ToastProps): string;
+export declare const toast: typeof Toast;
+export type ToastPlacement = "top-start" | "top-center" | "top-end" | "bottom-start" | "bottom-center" | "bottom-end";
+export interface ToastContainerProps {
+    children?: string;
+    placement?: ToastPlacement;
+    className?: string;
+}
+export declare function ToastContainer(props?: ToastContainerProps): string;
+export declare const toastContainer: typeof ToastContainer;

package/dist/components/feedback/toast.js

@@ -0,0 +1,36 @@
+import { classNames, escapeHtml, toAttributes } from "../utils";
+export function Toast(props) {
+    const { id, title, time, body, variant, delay = 4000, autohide = true, dismissible = true, className = "", attributes } = props;
+    const classes = classNames("toast", variant && `toast-${variant}`, className);
+    const baseAttrs = toAttributes({
+        id,
+        role: "alert",
+        "aria-live": "assertive",
+        "aria-atomic": "true",
+        "data-toast-delay": delay,
+        "data-toast-autohide": autohide ? "true" : "false",
+        ...attributes
+    });
+    const headerHtml = title
+        ? `
+      <div class="toast-header">
+        <strong class="me-auto">${escapeHtml(title)}</strong>
+        ${time ? `<small class="text-muted ms-auto">${escapeHtml(time)}</small>` : ""}
+        ${dismissible ? `<button type="button" class="close" data-dismiss="${id ? `#${id}` : "toast"}" aria-label="Close"></button>` : ""}
+      </div>
+    `
+        : "";
+    return `
+    <div class="${classes}"${baseAttrs}>
+      ${headerHtml}
+      <div class="toast-body">${body}</div>
+    </div>
+  `.trim();
+}
+export const toast = Toast;
+export function ToastContainer(props = {}) {
+    const { children = "", placement = "top-end", className = "" } = props;
+    const classes = classNames("toast-stack", `toast-${placement}`, className);
+    return `<div class="${classes}">${children}</div>`.trim();
+}
+export const toastContainer = ToastContainer;

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

@@ -0,0 +1,17 @@
+export interface CheckboxProps {
+    label?: string;
+    name?: string;
+    id?: string;
+    value?: string | number;
+    checked?: boolean;
+    disabled?: boolean;
+    inline?: boolean;
+    isInvalid?: boolean;
+    isValid?: boolean;
+    className?: string;
+    inputClassName?: string;
+    labelClassName?: string;
+    attributes?: Record<string, unknown>;
+}
+export declare function Checkbox(props?: CheckboxProps): string;
+export declare const checkbox: typeof Checkbox;

package/dist/components/form/checkbox.js

@@ -0,0 +1,29 @@
+import { classNames, escapeHtml, toAttributes } from "../utils";
+export function Checkbox(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: "checkbox",
+        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 checkbox = Checkbox;

package/dist/components/form/floating-label.d.ts

@@ -0,0 +1,9 @@
+export interface FloatingLabelProps {
+    controlHtml: string;
+    label: string;
+    htmlFor?: string;
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+export declare function FloatingLabel(props: FloatingLabelProps): string;
+export declare const floatingLabel: typeof FloatingLabel;

package/dist/components/form/floating-label.js

@@ -0,0 +1,14 @@
+import { classNames, escapeHtml, toAttributes } from "../utils";
+export function FloatingLabel(props) {
+    const { controlHtml, label, htmlFor, className = "", attributes } = props;
+    const classes = classNames("form-floating", className);
+    const baseAttrs = toAttributes(attributes);
+    const forAttr = htmlFor ? ` for="${escapeHtml(htmlFor)}"` : "";
+    return `
+    <div class="${classes}"${baseAttrs}>
+      ${controlHtml}
+      <label${forAttr}>${escapeHtml(label)}</label>
+    </div>
+  `.trim();
+}
+export const floatingLabel = FloatingLabel;

package/dist/components/form/form-control.d.ts

@@ -0,0 +1,30 @@
+export interface FormLabelProps {
+    label: string;
+    htmlFor?: string;
+    required?: boolean;
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+export declare function FormLabel(props: FormLabelProps): string;
+export declare const formLabel: typeof FormLabel;
+export interface FormTextProps {
+    text: string;
+    id?: string;
+    className?: string;
+}
+export declare function FormText(props: FormTextProps): string;
+export declare const formText: typeof FormText;
+export interface FormFeedbackProps {
+    message: string;
+    type?: "invalid" | "valid";
+    tooltip?: boolean;
+    className?: string;
+}
+export declare function FormFeedback(props: FormFeedbackProps): string;
+export declare const formFeedback: typeof FormFeedback;
+export interface FormGroupProps {
+    children?: string;
+    className?: string;
+}
+export declare function FormGroup(props?: FormGroupProps): string;
+export declare const formGroup: typeof FormGroup;

package/dist/components/form/form-control.js

@@ -0,0 +1,28 @@
+import { classNames, escapeHtml, toAttributes } from "../utils";
+export function FormLabel(props) {
+    const { label, htmlFor, required = false, className = "", attributes } = props;
+    const baseAttrs = toAttributes({
+        for: htmlFor,
+        ...attributes
+    });
+    const reqIndicator = required ? '<span class="text-danger ms-1" aria-hidden="true">*</span>' : "";
+    return `<label class="${classNames("form-label", className)}"${baseAttrs}>${escapeHtml(label)}${reqIndicator}</label>`.trim();
+}
+export const formLabel = FormLabel;
+export function FormText(props) {
+    const { text, id, className = "" } = props;
+    const idAttr = id ? ` id="${escapeHtml(id)}"` : "";
+    return `<div class="${classNames("form-text", className)}"${idAttr}>${escapeHtml(text)}</div>`.trim();
+}
+export const formText = FormText;
+export function FormFeedback(props) {
+    const { message, type = "invalid", tooltip = false, className = "" } = props;
+    const feedbackClass = tooltip ? `${type}-tooltip` : `${type}-feedback`;
+    return `<div class="${classNames(feedbackClass, className)}">${escapeHtml(message)}</div>`.trim();
+}
+export const formFeedback = FormFeedback;
+export function FormGroup(props = {}) {
+    const { children = "", className = "" } = props;
+    return `<div class="${classNames("form-group", className)}">${children}</div>`.trim();
+}
+export const formGroup = FormGroup;

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

@@ -0,0 +1,11 @@
+export * from "./input";
+export * from "./textarea";
+export * from "./select";
+export * from "./checkbox";
+export * from "./radio";
+export * from "./switch";
+export * from "./range";
+export * from "./input-group";
+export * from "./form-control";
+export * from "./floating-label";
+export * from "./layout";

package/dist/components/form/index.js

@@ -0,0 +1,11 @@
+export * from "./input";
+export * from "./textarea";
+export * from "./select";
+export * from "./checkbox";
+export * from "./radio";
+export * from "./switch";
+export * from "./range";
+export * from "./input-group";
+export * from "./form-control";
+export * from "./floating-label";
+export * from "./layout";

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

@@ -0,0 +1,16 @@
+export interface InputGroupProps {
+    children?: string;
+    size?: "sm" | "lg";
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+export declare function InputGroup(props?: InputGroupProps): string;
+export declare const inputGroup: typeof InputGroup;
+export interface InputGroupTextProps {
+    children?: string;
+    as?: "span" | "label";
+    htmlFor?: string;
+    className?: string;
+}
+export declare function InputGroupText(props?: InputGroupTextProps): string;
+export declare const inputGroupText: typeof InputGroupText;

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

@@ -0,0 +1,14 @@
+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 baseAttrs = toAttributes(attributes);
+    return `<div class="${classes}"${baseAttrs}>${children}</div>`.trim();
+}
+export const inputGroup = InputGroup;
+export function InputGroupText(props = {}) {
+    const { children = "", as: Tag = "span", htmlFor, className = "" } = props;
+    const forAttr = htmlFor && Tag === "label" ? ` for="${htmlFor}"` : "";
+    return `<${Tag} class="${classNames("input-group-text", className)}"${forAttr}>${children}</${Tag}>`.trim();
+}
+export const inputGroupText = InputGroupText;

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

@@ -0,0 +1,18 @@
+export type InputType = "text" | "password" | "email" | "number" | "search" | "tel" | "url" | "date" | "datetime-local" | "time" | "month" | "week" | "color" | "file" | "hidden";
+export interface InputProps {
+    type?: InputType;
+    name?: string;
+    id?: string;
+    value?: string | number;
+    placeholder?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    size?: "sm" | "lg";
+    isInvalid?: boolean;
+    isValid?: boolean;
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+export declare function Input(props?: InputProps): string;
+export declare const input: typeof Input;

package/dist/components/form/input.js

@@ -0,0 +1,19 @@
+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 baseAttrs = toAttributes({
+        type,
+        name,
+        id,
+        value,
+        placeholder,
+        disabled,
+        readonly: readOnly,
+        required,
+        ...attributes
+    });
+    return `<input class="${classes}"${baseAttrs} />`.trim();
+}
+export const input = Input;

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

@@ -0,0 +1,20 @@
+export interface FormRowProps {
+    children?: string;
+    gutter?: 1 | 2 | 3 | 4 | 5;
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+export declare function FormRow(props?: FormRowProps): string;
+export declare const formRow: typeof FormRow;
+export interface FormColProps {
+    children?: string;
+    size?: number | "auto";
+    sm?: number | "auto";
+    md?: number | "auto";
+    lg?: number | "auto";
+    xl?: number | "auto";
+    className?: string;
+    attributes?: Record<string, unknown>;
+}
+export declare function FormCol(props?: FormColProps): string;
+export declare const formCol: typeof FormCol;

package/dist/components/form/layout.js

@@ -0,0 +1,15 @@
+import { classNames, toAttributes } from "../utils";
+export function FormRow(props = {}) {
+    const { children = "", gutter = 3, className = "", attributes } = props;
+    const classes = classNames("row", `g-${gutter}`, className);
+    const baseAttrs = toAttributes(attributes);
+    return `<div class="${classes}"${baseAttrs}>${children}</div>`.trim();
+}
+export const formRow = FormRow;
+export function FormCol(props = {}) {
+    const { children = "", size, sm, md, lg, xl, className = "", attributes } = props;
+    const classes = classNames(size !== undefined ? (size === "auto" ? "col-auto" : `col-${size}`) : "col", sm !== undefined && (sm === "auto" ? "col-sm-auto" : `col-sm-${sm}`), md !== undefined && (md === "auto" ? "col-md-auto" : `col-md-${md}`), lg !== undefined && (lg === "auto" ? "col-lg-auto" : `col-lg-${lg}`), xl !== undefined && (xl === "auto" ? "col-xl-auto" : `col-xl-${xl}`), className);
+    const baseAttrs = toAttributes(attributes);
+    return `<div class="${classes}"${baseAttrs}>${children}</div>`.trim();
+}
+export const formCol = FormCol;

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

@@ -0,0 +1,32 @@
+export interface RadioProps {
+    label?: string;
+    name: string;
+    id?: string;
+    value: string | number;
+    checked?: boolean;
+    disabled?: boolean;
+    inline?: boolean;
+    isInvalid?: boolean;
+    isValid?: boolean;
+    className?: string;
+    inputClassName?: string;
+    labelClassName?: string;
+    attributes?: Record<string, unknown>;
+}
+export declare function Radio(props: RadioProps): string;
+export declare const radio: typeof Radio;
+export interface RadioOption {
+    label: string;
+    value: string | number;
+    id?: string;
+    disabled?: boolean;
+}
+export interface RadioGroupProps {
+    name: string;
+    options: RadioOption[];
+    value?: string | number;
+    inline?: boolean;
+    className?: string;
+}
+export declare function RadioGroup(props: RadioGroupProps): string;
+export declare const radioGroup: typeof RadioGroup;