feat(react): modernize component APIs and layouts

.changeset/modernize-component-library.md

@@ -0,0 +1,25 @@
+---
+"velune": minor
+---
+
+Modernize the component library with new components, responsive layouts, and
+consistent public APIs:
+
+- Add Alert, Breadcrumb, Slider, and Combobox, including accessible compound
+  slots, controlled state, keyboard support, and customizable presentation.
+- Add Standard Schema validation to Form and share Modal/Drawer dialog
+  behavior through an internal primitive.
+- Add breakpoint-responsive props to Box, Container, Flex, Grid, and Stack.
+- Standardize polymorphic elements on `as`, including Container support.
+- Add Button `asChild`, `tone="danger"`, and `buttonClasses()`; add style
+  recipes for Tag and Input.
+- Add Combobox.NoMatches, controlled Alert visibility, Checkbox group slots,
+  Switch `lg`, TextArea `resize`, Pagination `hideOnSinglePage`,
+  `toast.promise`, Stack dividers, and Spinner labels.
+- Remove the deprecated Stack `spacing` prop; use `gap`, including responsive
+  values, as the sole spacing API.
+- Replace react-aria-components and @internationalized/date with in-house
+  Slider, Dropdown, and DateRangePicker implementations, reducing consumer
+  bundle sizes while preserving documented behavior.
+- Improve floating-layer and modal motion, and show selection checks in
+  Select and Combobox.

.size-limit.mjs

@@ -51,15 +51,19 @@ function configureConsumerBuild(config) {
 
 const componentBudgets = {
   "relief-card": "3 kB",
+  alert: "3 kB",
   avatar: "2.5 kB",
   badge: "2 kB",
+  breadcrumb: "2.5 kB",
+  combobox: "8 kB",
+  slider: "3 kB",
   box: "1.5 kB",
   button: "5.2 kB",
   card: "2.5 kB",
   checkbox: "4.5 kB",
   collapse: "4 kB",
   "date-picker": "9.5 kB",
-  "date-range-picker": "60 kB",
+  "date-range-picker": "6.5 kB",
   container: "1.2 kB",
   divider: "1.5 kB",
   drawer: "5.5 kB",
@@ -83,7 +87,7 @@ const componentBudgets = {
   tabs: "4 kB",
   tag: "2.5 kB",
   text: "2 kB",
-  textarea: "4 kB",
+  "text-area": "4 kB",
   toast: "6 kB",
   tooltip: "5 kB",
   "virtual-table": "17 kB",
@@ -102,7 +106,9 @@ const componentEntries = Object.entries(reactPackage.exports).flatMap(
       typeof definition === "object" && definition !== null
         ? definition.import?.match(/^\.\/dist\/([^/]+)\/index\.mjs$/)
         : null;
-    if (subpath === "." || !match || match[1] === "theme") return [];
+    // ./textarea is a deprecated alias of ./text-area; measure it once.
+    if (subpath === "." || subpath === "./textarea" || !match) return [];
+    if (match[1] === "theme") return [];
 
     const name = subpath.slice(2);
     const limit = componentBudgets[name];
@@ -131,15 +137,15 @@ export default [
   packageArtifact(
     "velune/react (full package)",
     ["packages/velune/dist/react/*.mjs", "packages/velune/dist/react/*.css"],
-    "140 kB",
+    "160 kB",
   ),
   ...componentEntries,
   {
     name: "velune/react common basket (first-load consumer bundle)",
     path: "tooling/size-limit/react-basket.mjs",
     gzip: true,
     ignore: ["react", "react-dom"],
-    limit: "19.1 kB",
+    limit: "19.2 kB",
     modifyEsbuildConfig: configureConsumerBuild,
   },
   packageArtifact("@velune/hooks", "packages/hooks/dist/index.mjs", "1.25 kB"),

CONTRIBUTING.md

@@ -115,6 +115,22 @@ Do not hand-roll established interaction engines when a proven dependency is
 already used by the repository. Keep public APIs consistent with neighboring
 components and prefer composition over a large set of presentation props.
 
+### Polymorphism: `as` by default
+
+Velune standardizes on the `as` prop for element polymorphism. When a
+component should render as a different element, type it with
+`PolymorphicProps`/`PolymorphicComponent` from `packages/react/src/shared/polymorphic.ts`
+and cover it in `packages/react/src/shared/polymorphic.type-test.tsx`
+(see `Box`, `Container`, `Flex`, `Grid`, `Stack`, `Text`, `Card`, and the
+`Modal.Title`/`Drawer.Title` slots). Constrained unions are acceptable when
+only specific elements are safe, such as `Button`'s `as?: "button" | "a"`.
+
+Do not introduce Radix-style `asChild` props outside Button. When a component needs to
+attach behavior to caller-provided markup, expose a compound trigger slot
+that clones its single child instead (`Tooltip.Trigger`, `Popover.Trigger`,
+`Dropdown.Trigger`), keeping behavior injection and element identity as two
+separate, predictable APIs.
+
 ## Verification
 
 Run the smallest relevant checks while iterating, followed by the complete

README.md

@@ -13,7 +13,7 @@ interaction states.
 
 ## Highlights
 
-- 38 accessible React components with compound APIs and per-component exports
+- 42 accessible React components with compound APIs and per-component exports
 - Tailwind CSS v4 utilities backed by public semantic design tokens
 - Light, dark, high-contrast, reduced-motion, and generated brand themes
 - ESM, CommonJS, type declarations, and automated quality gates