@mohasinac/appkit 4.11.3 → 4.12.0

package/dist/ui/components/Checkbox.d.ts

@@ -12,5 +12,14 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
      * (border, padding, hover state) and just need the underlying control.
      */
     bare?: boolean;
+    /**
+     * Classes for the OUTER wrapper `<div>` — the element that is the real flex
+     * child when this checkbox sits inside a `<Row>`/flex container. `className`
+     * only ever reaches the inner `<input>`, so sizing/flex utilities passed
+     * there are silently inert (Recurrent Root Cause #29 — same defect `Select`
+     * ships `wrapperClassName` for). Use this for `flex-shrink-0`, `min-w-*`,
+     * margins, alignment — anything positioning the control within its parent.
+     */
+    wrapperClassName?: string;
 }
-export declare function Checkbox({ label, suffix, error, indeterminate, type, bare, className, checked, disabled, id, ...props }: CheckboxProps): React.JSX.Element;
+export declare function Checkbox({ label, suffix, error, indeterminate, type, bare, className, wrapperClassName, checked, disabled, id, ...props }: CheckboxProps): React.JSX.Element;

package/dist/ui/components/Checkbox.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Label, Span, Text } from "./Typography";
+const UI_CHECKBOX_INLINE = "appkit-checkbox--inline";
 const UI_CHECKBOX = {
     base: "appkit-checkbox",
     label: "appkit-checkbox__label",
@@ -14,7 +15,7 @@ const UI_CHECKBOX = {
     text: "appkit-checkbox__text",
     error: "appkit-checkbox__error",
 };
-export function Checkbox({ label, suffix, error, indeterminate = false, type = "checkbox", bare = false, className = "", checked, disabled, id, ...props }) {
+export function Checkbox({ label, suffix, error, indeterminate = false, type = "checkbox", bare = false, className = "", wrapperClassName = "", checked, disabled, id, ...props }) {
     const generatedId = React.useId();
     const inputId = id ?? generatedId;
     const inputRef = React.useRef(null);
@@ -26,7 +27,18 @@ export function Checkbox({ label, suffix, error, indeterminate = false, type = "
     if (bare) {
         return (_jsx("input", { ...props, ref: inputRef, id: inputId, type: type, checked: checked, disabled: disabled, "aria-invalid": error ? "true" : undefined, className: className }));
     }
-    return (_jsxs("div", { className: UI_CHECKBOX.base, "data-section": "checkbox-div-467", children: [_jsxs(Label, { htmlFor: inputId, className: [
+    // A checkbox with no label/suffix has no text to lay out beside the box, so
+    // the default `width: 100%` on the root serves no purpose and actively harms
+    // it: as a flex child it claims the whole row and squeezes its siblings to
+    // zero. `--inline` makes it size to its content instead.
+    const isInline = !label && !suffix;
+    return (_jsxs("div", { className: [
+            UI_CHECKBOX.base,
+            isInline ? UI_CHECKBOX_INLINE : "",
+            wrapperClassName,
+        ]
+            .filter(Boolean)
+            .join(" "), "data-section": "checkbox-div-467", children: [_jsxs(Label, { htmlFor: inputId, className: [
                     UI_CHECKBOX.label,
                     disabled ? UI_CHECKBOX.labelDisabled : "",
                 ]

package/dist/ui/components/Checkbox.style.css

@@ -4,6 +4,17 @@
   width: 100%;
 }
 
+/*
+ * Label-less checkbox: size to the control, never claim the parent's width.
+ * Applied automatically by Checkbox.tsx when there is no label/suffix — a bare
+ * box inside a <Row> is a flex child, and `width: 100%` there starves its
+ * siblings (Recurrent Root Cause #29).
+ */
+.appkit-checkbox--inline {
+  width: auto;
+  flex-shrink: 0;
+}
+
 .appkit-checkbox__label {
   display: inline-flex;
   width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohasinac/appkit",
-  "version": "4.11.3",
+  "version": "4.12.0",
   "license": "MIT",
   "publishConfig": {
     "access": "public"