@sableui/react 0.7.1 → 0.8.0

package/dist/components/form/form.js

@@ -17,13 +17,16 @@ function Form({
   onSubmit,
   onFormSubmit,
   noValidate,
+  validationMode,
+  errors,
+  actionsRef,
   ...props
 }) {
   const blockedRef = useRef(false);
   const handleSubmit = (event) => {
     blockedRef.current = false;
     const form = event.currentTarget;
-    if (!noValidate && !form.checkValidity()) {
+    if (!form.checkValidity()) {
       event.preventDefault();
       blockedRef.current = true;
       form.reportValidity();
@@ -31,10 +34,24 @@ function Form({
     }
     onSubmit?.(event);
   };
+  if (noValidate) {
+    return /* @__PURE__ */ jsx(
+      "form",
+      {
+        noValidate: true,
+        className: cn("flex flex-col gap-6", className),
+        onSubmit,
+        ...props
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     BaseForm,
     {
       className: cn("flex flex-col gap-6", className),
+      validationMode,
+      errors,
+      actionsRef,
       onSubmit: handleSubmit,
       onFormSubmit: onFormSubmit ? (values, details) => {
         if (!blockedRef.current) onFormSubmit(values, details);
@@ -49,6 +66,7 @@ function Field({
   description,
   error,
   required,
+  messages,
   disabled,
   name,
   validate,
@@ -98,14 +116,17 @@ function Field({
       children: description
     }
   ) : null;
-  const errorNode = /* @__PURE__ */ jsx(
-    BaseField.Error,
-    {
-      id: errId,
-      className: "text-body-sm text-destructive",
-      ...hasError ? { match: true, children: error } : null
-    }
-  );
+  const errorNode = /* @__PURE__ */ jsx(BaseField.Validity, { children: ({ validity }) => {
+    const flag = messages ? Object.keys(messages).find((key) => validity[key]) : void 0;
+    return /* @__PURE__ */ jsx(
+      BaseField.Error,
+      {
+        id: errId,
+        className: "text-body-sm text-destructive",
+        ...hasError ? { match: true, children: error } : flag ? { children: messages?.[flag] } : null
+      }
+    );
+  } });
   return /* @__PURE__ */ jsx(
     BaseField.Root,
     {

package/dist/components/form/form.meta.js

@@ -72,7 +72,7 @@ var formMeta = {
     {
       name: "Form",
       type: '{ validationMode?: "onSubmit" | "onBlur" | "onChange"; errors?: Record<string, string | string[]>; onFormSubmit?: (values, details) => void; actionsRef?: RefObject<Form.Actions> } + ComponentPropsWithRef<"form">',
-      description: 'A <form> laid out as a vertical column with comfortable field spacing (override with className, e.g. gap-4). On submit it validates every Field (native constraints plus Field validate), shows each message under its field, focuses the first invalid control, and only then calls onSubmit. validationMode defaults to "onSubmit" (then live re-validation on change). errors shows external (e.g. server) messages keyed by Field name and clears one when its field is edited. onFormSubmit receives the named Field values and prevents the native submit. A control outside any Field is still checked by the browser before onSubmit runs; pass noValidate to skip that.'
+      description: 'A <form> laid out as a vertical column with comfortable field spacing (override with className, e.g. gap-4). On submit it validates every Field (native constraints plus Field validate), shows each message under its field, focuses the first invalid control, and only then calls onSubmit. validationMode defaults to "onSubmit" (then live re-validation on change). errors shows external (e.g. server) messages keyed by Field name and clears one when its field is edited. onFormSubmit receives the named Field values and prevents the native submit. A control outside any Field is still checked by the browser before onSubmit runs. Validating in your own code (react-hook-form, a schema, state)? Pass noValidate: onSubmit always runs and each Field shows the error you set; without it an empty required Field stops the submit before your handler can set that error.'
     },
     {
       name: "validationMode",
@@ -90,6 +90,12 @@ var formMeta = {
       type: "(values: Record<string, unknown>, details) => void",
       description: "Called with the named Field values after validation passes; prevents the native submit."
     },
+    {
+      name: "noValidate",
+      type: "boolean",
+      default: "false",
+      description: "Your code owns validation: nothing is checked before onSubmit (neither the Fields nor the browser), so it always runs and each Field shows the error you pass. required Fields keep their asterisk and aria-required. validationMode, errors, onFormSubmit and actionsRef do nothing with it."
+    },
     {
       name: "actionsRef",
       type: "RefObject<{ validate(name?: string): void }>",
@@ -99,8 +105,8 @@ var formMeta = {
   subcomponents: [
     {
       name: "Field",
-      type: '{ label?: ReactNode; description?: ReactNode; error?: ReactNode; required?: boolean; disabled?: boolean; name?: string; validate?: (value, formValues) => string | string[] | null | Promise<\u2026>; validationMode?: "onSubmit" | "onBlur" | "onChange"; validationDebounceTime?: number; orientation?: "vertical" | "horizontal"; className?: string; children: ReactElement }',
-      description: `Wraps a single control element (e.g. <Input />) on Base UI Field and wires label (htmlFor + aria-labelledby), helper text and error (aria-describedby), aria-invalid, and required onto it automatically. Base UI-backed controls (Input, Textarea, Select, Combobox, NumberField, Checkbox, Switch, Slider, OtpField\u2026) register through context; the child is also cloned so plain elements keep the same wiring. error renders a destructive message and takes precedence; without it the slot shows Base UI's validation message when the field fails (native constraint, validate, or Form errors). required adds the native attribute plus a visual asterisk (defaults to false). disabled disables the control and dims the label. name keys the field in Form errors / onFormSubmit. validationMode overrides the Form's. orientation defaults to "vertical" (label \u2192 control); "horizontal" places control then label inline for a single checkbox / switch / radio \u2014 the control centres on the label's first line (it stays there when the label wraps) and description/error sit in the label's column. The root, label, description, error and control carry data-invalid / data-valid, data-touched, data-dirty, data-filled, data-focused and data-disabled for state styling.`
+      type: '{ label?: ReactNode; description?: ReactNode; error?: ReactNode; required?: boolean; messages?: Partial<Record<"valueMissing" | "typeMismatch" | "patternMismatch" | "tooShort" | "tooLong" | "rangeUnderflow" | "rangeOverflow" | "stepMismatch" | "badInput", ReactNode>>; disabled?: boolean; name?: string; validate?: (value, formValues) => string | string[] | null | Promise<\u2026>; validationMode?: "onSubmit" | "onBlur" | "onChange"; validationDebounceTime?: number; orientation?: "vertical" | "horizontal"; className?: string; children: ReactElement }',
+      description: `Wraps a single control element (e.g. <Input />) on Base UI Field and wires label (htmlFor + aria-labelledby), helper text and error (aria-describedby), aria-invalid, and required onto it automatically. Base UI-backed controls (Input, Textarea, Select, Combobox, NumberField, Checkbox, Switch, Slider, OtpField\u2026) register through context; the child is also cloned so plain elements keep the same wiring. error renders a destructive message and takes precedence; without it the slot shows the field's messages entry for the native constraint that failed (messages={{ valueMissing: "Enter a subject." }}), else Base UI's validation message (the browser's wording for a native constraint, validate, or Form errors). required adds the native attribute plus a visual asterisk (defaults to false). disabled disables the control and dims the label. name keys the field in Form errors / onFormSubmit. validationMode overrides the Form's. orientation defaults to "vertical" (label \u2192 control); "horizontal" places control then label inline for a single checkbox / switch / radio \u2014 the control centres on the label's first line (it stays there when the label wraps) and description/error sit in the label's column. The root, label, description, error and control carry data-invalid / data-valid, data-touched, data-dirty, data-filled, data-focused and data-disabled for state styling.`
     }
   ],
   tokensUsed: ["muted-foreground", "destructive"],
@@ -119,6 +125,14 @@ var formMeta = {
       label: "Field with an error",
       code: '<Field label="Password" error="Must be at least 8 characters."><Input type="password" /></Field>'
     },
+    {
+      label: "Your own wording for a missing value",
+      code: '<Form onSubmit={handleSubmit}><Field label="Subject" required messages={{ valueMissing: "Enter a subject." }}><Input name="subject" /></Field><Button type="submit">Send</Button></Form>'
+    },
+    {
+      label: "Validation in your own code",
+      code: '<Form noValidate onSubmit={handleSubmit}><Field label="Subject" required error={errors.subject}><Input name="subject" /></Field><Button type="submit">Send</Button></Form>'
+    },
     {
       label: "Validated on submit",
       code: '<Form onSubmit={handleSubmit}><Field label="Handle" required validate={(value) => String(value).length < 3 ? "At least 3 characters." : null}><Input name="handle" /></Field><Button type="submit">Claim</Button></Form>'

package/dist/components/message-scroller/message-scroller.meta.js

@@ -86,7 +86,7 @@ var messageScrollerMeta = {
     {
       name: "ref",
       type: "Ref<MessageScrollerHandle>",
-      description: "Imperative commands, not the DOM node: `scrollToBottom(opts)`, `scrollToTop(opts)`, `scrollToMessage(id, opts)` (returns false when the message is not rendered), `isFollowing()`, and `element` for the scrolling node itself."
+      description: "Imperative commands, not the DOM node: `scrollToBottom(opts)`, `scrollToTop(opts)`, `scrollToMessage(id, opts)` (returns false when the message is not rendered), `isFollowing()`, and `element` for the scrolling node itself. `opts` is `ScrollCommandOptions`: `{ animate?: boolean }` (default true, and off whenever motion is), not the DOM's `behavior`."
     },
     {
       name: "autoFollow",

package/dist/components/page-header/page-header.js

@@ -20,6 +20,7 @@ function PageHeader({
         title,
         titleClassName: "text-heading-2",
         band: "flex min-h-(--control-md) items-center",
+        titleBasis: "basis-[min(100%,20rem)]",
         leading: back,
         actions
       }

package/dist/components/page-header/page-header.meta.js

@@ -57,7 +57,7 @@ var pageHeaderMeta = {
     {
       name: "actions",
       type: "ReactNode",
-      description: "Trailing actions aligned to the title row's end. They drop under the title when the row runs out of room, and the title wraps rather than truncating. A ghost or link Button at either end of the group bleeds by its own padding, so its label meets the content edge (the end on the title row, the start once wrapped); filled buttons keep their edge on the line. Direct children only."
+      description: "Trailing actions aligned to the title row's end. They drop under the title when the title would have less than 20rem beside them (on a phone, nearly always), and the title wraps rather than truncating. A ghost or link Button at either end of the group bleeds by its own padding, so its label meets the content edge (the end on the title row, the start once wrapped); filled buttons keep their edge on the line. Direct children only."
     },
     {
       name: "titleAs",

package/dist/components/settings-menu/settings-menu.js

@@ -1,10 +1,13 @@
 // src/components/settings-menu/settings-menu.tsx
+import { Children, isValidElement } from "react";
 import { Icon } from "../../icon/index.js";
 import { cn } from "../../lib/cn.js";
 import { useTypeTier } from "../../lib/density.js";
 import {
   Menu,
   MenuContent,
+  MenuGroup,
+  MenuGroupLabel,
   MenuSubmenu,
   MenuSubmenuTrigger,
   MenuTrigger
@@ -29,6 +32,12 @@ function SettingsMenu({
   ...props
 }) {
   const tier = useTypeTier();
+  const rows = Children.toArray(children);
+  const only = rows.length === 1 && isValidElement(rows[0]) && rows[0].type === SettingsRow ? rows[0] : null;
+  const content = only?.props.children && !only.props.disabled ? /* @__PURE__ */ jsxs(MenuGroup, { children: [
+    /* @__PURE__ */ jsx(MenuGroupLabel, { children: only.props.label }),
+    only.props.children
+  ] }) : children;
   return /* @__PURE__ */ jsxs(Menu, { ...props, children: [
     /* @__PURE__ */ jsxs(
       MenuTrigger,
@@ -49,7 +58,7 @@ function SettingsMenu({
         ]
       }
     ),
-    /* @__PURE__ */ jsx(MenuContent, { side, align, className: "min-w-56", children })
+    /* @__PURE__ */ jsx(MenuContent, { side, align, className: "min-w-56", children: content })
   ] });
 }
 SettingsMenu.displayName = "SettingsMenu";

package/dist/components/settings-menu/settings-menu.meta.js

@@ -1,7 +1,7 @@
 // src/components/settings-menu/settings-menu.meta.ts
 var settingsMenuMeta = {
   name: "SettingsMenu",
-  summary: "A compact trigger that states the current settings, over a menu of rows that change them. Each row shows its own value and opens a submenu.",
+  summary: "A compact trigger that states the current settings, over a menu of rows that change them. Each row shows its own value and opens a submenu; with one setting, the menu opens straight to its options under the row's label.",
   status: "stable",
   keywords: [
     "settings",

package/dist/components/sidebar/sidebar.js

@@ -72,7 +72,7 @@ function SidebarHeader({
     "div",
     {
       className: cn(
-        "flex h-16 items-center px-3",
+        "flex min-h-16 flex-wrap content-center items-center gap-y-2 px-3 has-[>:nth-child(2)]:py-3",
         // Collapsed, the brand mark centres on the same axis as the item icons.
         collapsed && "justify-center px-0",
         className

package/dist/components/sidebar/sidebar.meta.js

@@ -70,6 +70,11 @@ var sidebarMeta = {
     }
   ],
   subcomponents: [
+    {
+      name: "SidebarHeader",
+      type: "div props",
+      description: "The top of the rail, at least 64px tall. It holds SidebarBrand and may take a second row under it, such as a search field or a notifications button: give that row basis-full and the header grows to hold it instead of clipping."
+    },
     {
       name: "SidebarBrand",
       type: "{ mark: ReactNode; label: ReactNode; render?: useRender.RenderProp } + div props",

package/dist/components/switch/switch.js

@@ -16,7 +16,7 @@ function Switch({ className, ...props }) {
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx(Base.Thumb, { className: "block h-5 w-5 rounded-full bg-(--switch-thumb) shadow-(--knob-shadow) motion-interactive ease-spring data-[checked]:translate-x-4 rtl:data-[checked]:-translate-x-4 data-[checked]:bg-primary-foreground" })
+      children: /* @__PURE__ */ jsx(Base.Thumb, { className: "block h-5 w-5 rounded-full bg-(--switch-thumb) shadow-(--knob-shadow) motion-interactive ease-spring data-[checked]:translate-x-4 rtl:data-[checked]:-translate-x-4 data-[checked]:bg-(--switch-thumb-on)" })
     }
   );
 }

package/dist/components/switch/switch.meta.js

@@ -1,7 +1,7 @@
 // src/components/switch/switch.meta.ts
 var switchMeta = {
   name: "Switch",
-  summary: "Binary on/off toggle for immediate-effect settings. Track fills with the primary tone when checked; the thumb slides on a spring-eased transform (mirrored in RTL).",
+  summary: "Binary on/off toggle for immediate-effect settings. Track fills with the primary tone when checked; the thumb slides on a spring-eased transform (mirrored in RTL). The thumb is white in both states, like every physical toggle, and turns dark only on a near-white track (a dark mode's light primary). Themes can set --theme-switch-thumb-on.",
   status: "stable",
   keywords: [
     "switch",
@@ -82,7 +82,7 @@ var switchMeta = {
       description: "Identifies the field when the enclosing form is submitted."
     }
   ],
-  tokensUsed: ["input", "primary", "primary-foreground", "ring"],
+  tokensUsed: ["input", "primary", "ring"],
   motion: [
     {
       slot: "arrival",

package/dist/components/toggle/toggle.js

@@ -22,7 +22,8 @@ function Toggle({ className, ...props }) {
         ),
         "data-[pressed]:bg-accent data-[pressed]:text-accent-foreground",
         "disabled:pointer-events-none disabled:opacity-50",
-        "[&_svg]:shrink-0",
+        // An icon beside a label is spaced like Button's; without it they touched.
+        "gap-(--control-gap) [&_svg]:shrink-0",
         className
       ),
       ...props