@djangocfg/ui-core 2.1.544 → 2.1.546

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.544",
+  "version": "2.1.546",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -130,7 +130,7 @@
     "check:contrast": "node scripts/check-preset-contrast.mjs"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.544",
+    "@djangocfg/i18n": "^2.1.546",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
@@ -206,9 +206,9 @@
     "vaul": "1.1.2"
   },
   "devDependencies": {
-    "@djangocfg/eslint-config": "^2.1.544",
-    "@djangocfg/i18n": "^2.1.544",
-    "@djangocfg/typescript-config": "^2.1.544",
+    "@djangocfg/eslint-config": "^2.1.546",
+    "@djangocfg/i18n": "^2.1.546",
+    "@djangocfg/typescript-config": "^2.1.546",
     "@storybook/react-vite": "^10.5.0",
     "@types/node": "^24.13.3",
     "@types/react": "19.2.15",

package/src/components/forms/checkbox-group/index.tsx

@@ -1,9 +1,9 @@
 "use client"
 
-import { Check } from "lucide-react"
 import * as React from "react"
 
 import { cn } from "../../../lib/utils"
+import { Checkbox } from "../checkbox"
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Types
@@ -11,9 +11,13 @@ import { cn } from "../../../lib/utils"
 
 interface CheckboxGroupContextValue {
   value: string[]
-  onValueChange: (value: string[]) => void
+  toggle: (value: string) => void
   disabled: boolean
   name?: string
+  /** Ties `CheckboxGroupLabel` to the group's `aria-labelledby`. */
+  labelId: string
+  /** Ties every item's `aria-describedby` to the group's description. */
+  descriptionId: string
 }
 
 const CheckboxGroupContext = React.createContext<CheckboxGroupContextValue | null>(null)
@@ -45,6 +49,7 @@ function CheckboxGroup({
   onValueChange,
   disabled = false,
   name,
+  "aria-labelledby": ariaLabelledBy,
   ...props
 }: CheckboxGroupProps) {
   const isControlled = valueProp !== undefined
@@ -52,32 +57,53 @@ function CheckboxGroup({
 
   const value = isControlled ? valueProp : uncontrolledValue
 
-  const handleValueChange = React.useCallback(
-    (nextValue: string[]) => {
-      if (!isControlled) {
-        setUncontrolledValue(nextValue)
+  // Ids for the label and description, so the group announces as one thing
+  // rather than as a run of unrelated checkboxes.
+  const id = React.useId()
+  const labelId = `${id}-label`
+  const descriptionId = `${id}-description`
+
+  // The membership rule lives here, not on the item: an item that computed the
+  // next array from a captured `value` toggled against a stale snapshot when
+  // two arrived in one tick.
+  const toggle = React.useCallback(
+    (member: string) => {
+      const from = isControlled ? valueProp : undefined
+      const next = (current: string[]) =>
+        current.includes(member)
+          ? current.filter((entry) => entry !== member)
+          : [...current, member]
+
+      if (isControlled) {
+        onValueChange?.(next(from ?? []))
+        return
       }
-      onValueChange?.(nextValue)
+      setUncontrolledValue((current) => {
+        const value = next(current)
+        onValueChange?.(value)
+        return value
+      })
     },
-    [isControlled, onValueChange],
+    [isControlled, valueProp, onValueChange],
   )
 
   const contextValue = React.useMemo<CheckboxGroupContextValue>(
-    () => ({
-      value,
-      onValueChange: handleValueChange,
-      disabled,
-      name,
-    }),
-    [value, handleValueChange, disabled, name],
+    () => ({ value, toggle, disabled, name, labelId, descriptionId }),
+    [value, toggle, disabled, name, labelId, descriptionId],
   )
 
   return (
     <CheckboxGroupContext.Provider value={contextValue}>
+      {/* `role="group"`: without it a screen reader reads the items as
+          unrelated checkboxes and never says what they have in common.
+          `CheckboxGroupLabel` names it; a caller passing its own
+          `aria-labelledby` wins. */}
       <div
+        role="group"
+        aria-labelledby={ariaLabelledBy ?? labelId}
         data-slot="checkbox-group"
         data-disabled={disabled ? "" : undefined}
-        className={cn("peer flex flex-col gap-3.5", className)}
+        className={cn("peer flex flex-col gap-2", className)}
         {...props}
       />
     </CheckboxGroupContext.Provider>
@@ -88,9 +114,11 @@ function CheckboxGroup({
 // CheckboxGroupLabel
 // ─────────────────────────────────────────────────────────────────────────────
 
-function CheckboxGroupLabel({ className, ...props }: React.ComponentProps<"div">) {
+function CheckboxGroupLabel({ className, id, ...props }: React.ComponentProps<"div">) {
+  const context = useCheckboxGroupContext("CheckboxGroupLabel")
   return (
     <div
+      id={id ?? context.labelId}
       data-slot="checkbox-group-label"
       className={cn(
         "text-foreground/70 text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
@@ -115,12 +143,16 @@ function CheckboxGroupList({
   ...props
 }: CheckboxGroupListProps) {
   return (
+    // Optional: the root already stacks its children, so this exists for the
+    // horizontal case and for separating the items from a label and a
+    // description that share the root. Same `gap-2` either way — one spacing
+    // for one component.
     <div
       data-slot="checkbox-group-list"
       data-orientation={orientation}
       className={cn(
-        "flex gap-3",
-        orientation === "horizontal" ? "flex-row" : "flex-col",
+        "flex gap-2",
+        orientation === "horizontal" ? "flex-row flex-wrap items-center" : "flex-col",
         className,
       )}
       {...props}
@@ -132,67 +164,58 @@ function CheckboxGroupList({
 // CheckboxGroupItem
 // ─────────────────────────────────────────────────────────────────────────────
 
-interface CheckboxGroupItemProps extends Omit<React.ComponentProps<"button">, "value"> {
+interface CheckboxGroupItemProps
+  extends Omit<React.ComponentProps<typeof Checkbox>, "value" | "checked" | "onCheckedChange"> {
   value: string
   disabled?: boolean
+  /** Classes for the ROW. The box itself takes `checkboxClassName`. */
+  className?: string
+  checkboxClassName?: string
 }
 
 function CheckboxGroupItem({
   className,
+  checkboxClassName,
   children,
   value,
   disabled: disabledProp,
-  onClick,
   ...props
 }: CheckboxGroupItemProps) {
   const context = useCheckboxGroupContext("CheckboxGroupItem")
   const isDisabled = disabledProp || context.disabled
   const isChecked = context.value.includes(value)
 
-  const handleClick = React.useCallback(
-    (event: React.MouseEvent<HTMLButtonElement>) => {
-      onClick?.(event)
-      if (isDisabled) return
-
-      const nextValue = isChecked
-        ? context.value.filter((v) => v !== value)
-        : [...context.value, value]
-
-      context.onValueChange(nextValue)
-    },
-    [onClick, isDisabled, isChecked, context, value],
-  )
-
   return (
+    // The whole row is the target, not just the box: a 16px hit area for a
+    // choice the row already names is the commonest reason a list like this
+    // feels unresponsive. `w-full`, so the row spans its list.
     <label
+      data-slot="checkbox-group-row"
+      data-state={isChecked ? "checked" : "unchecked"}
+      data-disabled={isDisabled ? "" : undefined}
       className={cn(
-        "flex w-fit select-none items-center gap-2 text-sm leading-none",
-        "has-data-disabled:cursor-not-allowed has-data-disabled:opacity-50",
+        "flex w-full select-none items-center gap-2 text-sm leading-none",
+        isDisabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+        className,
       )}
     >
-      <button
-        type="button"
-        role="checkbox"
-        aria-checked={isChecked}
+      {/* The shared `Checkbox`, not a second implementation of one. The
+          hand-rolled button here carried its own border, size and tick, so a
+          form holding both drew two different checkboxes. */}
+      <Checkbox
         data-slot="checkbox-group-item"
-        data-state={isChecked ? "checked" : "unchecked"}
-        data-disabled={isDisabled ? "" : undefined}
-        disabled={isDisabled}
-        onClick={handleClick}
-        className={cn(
-          "size-4 shrink-0 rounded-sm border border-primary shadow-sm",
-          "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring",
-          "data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-          className,
-        )}
+        aria-describedby={context.descriptionId}
         {...props}
-      >
-        {isChecked && (
-          <span className="flex items-center justify-center text-current">
-            <Check className="size-3.5" />
-          </span>
-        )}
-      </button>
+        checked={isChecked}
+        onCheckedChange={() => context.toggle(value)}
+        disabled={isDisabled}
+        className={checkboxClassName}
+      />
+      {/* Submitted with the form. `name` was accepted and then dropped, so a
+          native submit sent nothing for a group the caller had named. */}
+      {context.name && isChecked ? (
+        <input type="hidden" name={context.name} value={value} />
+      ) : null}
       {children}
     </label>
   )
@@ -202,9 +225,11 @@ function CheckboxGroupItem({
 // CheckboxGroupDescription
 // ─────────────────────────────────────────────────────────────────────────────
 
-function CheckboxGroupDescription({ className, ...props }: React.ComponentProps<"div">) {
+function CheckboxGroupDescription({ className, id, ...props }: React.ComponentProps<"div">) {
+  const context = useCheckboxGroupContext("CheckboxGroupDescription")
   return (
     <div
+      id={id ?? context.descriptionId}
       data-slot="checkbox-group-description"
       className={cn(
         "text-[0.8rem] text-muted-foreground leading-none",