fix(components): make the UI kit, theme helpers and reset-css behave for real users

.changepacks/changepack_log_radio_group_a11y.json

@@ -0,0 +1,7 @@
+{
+  "changes": {
+    "packages/components/package.json": "Patch"
+  },
+  "note": "RadioGroup is a radiogroup with an optional label, its radios share a name (generated when not given) so arrow keys move between them, and it keeps the typed values of its options: false, 0 and '' stay selectable and onChange receives the option's own value rather than a string. Button-variant radios are visually hidden instead of display:none, so they stay focusable and show a focus ring, and the default radio's focus outline is valid CSS and shown on :focus-visible. Checkbox uses an id it is given for its labels as well as its input, where the labels used to point at a generated id",
+  "date": "2026-10-01T00:00:00.000Z"
+}

.changepacks/changepack_log_react_18_support.json

@@ -0,0 +1,8 @@
+{
+  "changes": {
+    "packages/react/package.json": "Patch",
+    "packages/components/package.json": "Patch"
+  },
+  "note": "@devup-ui/react and @devup-ui/components take React as a peer of ^18 || ^19 instead of `*` and no longer depend on React 19 themselves, so a React 18 app no longer gets a second React. Select and Stepper read their context with useContext instead of React 19's use() and provide it with Context.Provider instead of React 19's <Context value> (which crashes React 18), and Select repositions its container from an effect instead of a callback ref returning cleanup, which React 18 ignores",
+  "date": "2026-10-01T00:00:00.000Z"
+}

.changepacks/changepack_log_select_a11y.json

@@ -0,0 +1,7 @@
+{
+  "changes": {
+    "packages/components/package.json": "Patch"
+  },
+  "note": "Select follows the listbox pattern: the trigger has aria-haspopup, aria-controls and opens with ArrowDown/ArrowUp; the popup is a listbox (aria-multiselectable for checkbox selects) whose options carry role=option, aria-selected and aria-disabled; opening focuses the selected or first option, arrows/Home/End move between enabled options, Enter/Space choose one, and Escape or choosing closes the popup and returns focus to the trigger. An outside click on a controlled select now calls onOpenChange(false) instead of changing hidden internal state",
+  "date": "2026-10-01T00:00:00.000Z"
+}

.changepacks/changepack_log_toggle_switch.json

@@ -0,0 +1,7 @@
+{
+  "changes": {
+    "packages/components/package.json": "Patch"
+  },
+  "note": "Toggle is an accessible switch: role=switch with aria-checked, focusable with a visible focus ring, toggled by Space and Enter, labelled through aria-label or aria-labelledby, and submitted under the name it is given; when disabled it leaves the tab order, ignores keys and its hidden input is disabled",
+  "date": "2026-10-01T00:00:00.000Z"
+}

.changepacks/changepack_log_ui_kit_behavior.json

@@ -0,0 +1,9 @@
+{
+    "changes":  {
+                    "packages/components/package.json":  "Patch",
+                    "packages/react/package.json":  "Patch",
+                    "packages/reset-css/package.json":  "Patch"
+                },
+    "note":  "Components behave for keyboard, screen readers and both React 18 and 19: Button, Input and Textarea no longer force generic aria-labels (the visible text or an associated label names them), Input and Textarea mark errors with aria-invalid and aria-describedby pointing at the message, a loading Button sets aria-busy, is disabled by default (disableWhileLoading) and announces loadingLabel, Input clear dispatches a real change event instead of a fabricated one, color customization variables sit on the container so every part sees them and every public color key matches its CSS custom property (new keys inputDisabledBackground, inputDisabledText, inputPlaceholder, primaryBackground, Textarea disabledBackground and disabledText), Select positions against the viewport and clears the opposite inset, SelectTrigger asChild composes the child onClick, onKeyDown and ref with its own, Stepper counts without a controlled value, keeps its bound and disabled safeguards and renders its text mode as an output element. Select no longer forces aria-labels over its trigger, options, confirm button and container: an option is named by its content, the listbox by its trigger (aria-labelledby) or by what the caller passes. ThemeScript takes nonce and other script props and never aborts on blocked storage or missing matchMedia, follows the system while no theme was chosen and themes saved in other tabs; getTheme, setTheme and initTheme are safe on the server and initTheme returns a function that stops following. reset-css clips accessible-hidden content as sanitize.css does. No new build errors.",
+    "date":  "2026-10-01T00:00:00.000Z"
+}

.changepacks/changepack_log_ui_kit_forward_ref.json

@@ -0,0 +1,7 @@
+{
+  "changes": {
+    "packages/components/package.json": "Patch"
+  },
+  "note": "Button, Checkbox, Input, Radio and Textarea forward their ref to the button, input or textarea they render, so a ref reaches the form element on React 18 as well as React 19",
+  "date": "2026-10-01T00:00:00.000Z"
+}

packages/components/package.json

@@ -44,7 +44,6 @@
   "types": "./dist/index.d.ts",
   "dependencies": {
     "@devup-ui/react": "workspace:^",
-    "react": "^19.3.0",
     "clsx": "^2.1"
   },
   "devDependencies": {
@@ -59,10 +58,11 @@
     "typescript": "^7.0.2",
     "@typescript/typescript6": "^6.0",
     "vite": "^8.3",
-    "vite-plugin-dts": "^5.1"
+    "vite-plugin-dts": "^5.1",
+    "react": "^19.3.0"
   },
   "peerDependencies": {
     "@devup-ui/react": "workspace:^",
-    "react": "*"
+    "react": "^18 || ^19"
   }
 }

packages/components/src/__tests__/forward-ref.browser.test.tsx

@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'bun:test'
+import { render } from 'bun-test-env-dom'
+import { createRef } from 'react'
+
+import { Button, Input, Radio, Textarea } from '../index'
+
+describe('forwardRef', () => {
+  it('hands each component ref to its form element', () => {
+    const button = createRef<HTMLButtonElement>()
+    const input = createRef<HTMLInputElement>()
+    const radio = createRef<HTMLInputElement>()
+    const textarea = createRef<HTMLTextAreaElement>()
+    render(
+      <>
+        <Button ref={button}>b</Button>
+        <Input ref={input} />
+        <Radio ref={radio}>r</Radio>
+        <Textarea ref={textarea} />
+      </>,
+    )
+    expect(button.current?.tagName).toBe('BUTTON')
+    expect(input.current?.tagName).toBe('INPUT')
+    expect(radio.current?.type).toBe('radio')
+    expect(textarea.current?.tagName).toBe('TEXTAREA')
+  })
+})

packages/components/src/__tests__/index.browser.test.ts

@@ -1,29 +1,29 @@
-import { describe, expect, it } from 'bun:test'
-
-describe('export', () => {
-  it('should export components', async () => {
-    const index = await import('../index')
-    expect({ ...index }).toEqual({
-      Button: expect.any(Function),
-      Input: expect.any(Function),
-      Textarea: expect.any(Function),
-      Stepper: expect.any(Function),
-      Select: expect.any(Function),
-      Radio: expect.any(Function),
-      RadioGroup: expect.any(Function),
-      SelectContainer: expect.any(Function),
-      SelectDivider: expect.any(Function),
-      SelectOption: expect.any(Function),
-      SelectTrigger: expect.any(Function),
-      StepperContainer: expect.any(Function),
-      StepperDecreaseButton: expect.any(Function),
-      StepperIncreaseButton: expect.any(Function),
-      StepperInput: expect.any(Function),
-      useStepper: expect.any(Function),
-      SelectContext: expect.any(Object),
-      useSelect: expect.any(Function),
-      Toggle: expect.any(Function),
-      Checkbox: expect.any(Function),
-    })
-  })
-})
+import { describe, expect, it } from 'bun:test'
+
+describe('export', () => {
+  it('should export components', async () => {
+    const index = await import('../index')
+    expect({ ...index }).toEqual({
+      Button: expect.any(Object),
+      Input: expect.any(Object),
+      Textarea: expect.any(Object),
+      Stepper: expect.any(Function),
+      Select: expect.any(Function),
+      Radio: expect.any(Object),
+      RadioGroup: expect.any(Function),
+      SelectContainer: expect.any(Function),
+      SelectDivider: expect.any(Function),
+      SelectOption: expect.any(Function),
+      SelectTrigger: expect.any(Object),
+      StepperContainer: expect.any(Function),
+      StepperDecreaseButton: expect.any(Function),
+      StepperIncreaseButton: expect.any(Function),
+      StepperInput: expect.any(Function),
+      useStepper: expect.any(Function),
+      SelectContext: expect.any(Object),
+      useSelect: expect.any(Function),
+      Toggle: expect.any(Function),
+      Checkbox: expect.any(Object),
+    })
+  })
+})