@parallelworks/ui 0.76.0 → 0.78.0

package/dist/components/Card.d.ts

@@ -1,25 +1,49 @@
 import type { ReactElement, ReactNode } from 'react';
 import { type LinkTarget } from './AppLink.js';
-declare const sizeClasses: {
+declare const widthClasses: {
     sm: string;
     md: string;
     lg: string;
+    fill: string;
 };
+declare const paddingClasses: {
+    none: string;
+    sm: string;
+    md: string;
+    lg: string;
+};
+export type CardSize = keyof typeof widthClasses;
+export type CardPadding = keyof typeof paddingClasses;
 export interface CardProps extends LinkTarget {
     children: ReactNode;
-    /** Its width and padding: `sm` for a short form, `lg` for a wide one. */
-    size?: keyof typeof sizeClasses | undefined;
+    /** Its width and padding: `sm` for a short form, `lg` for a wide one. `fill` is a
+     *  flat panel among the page's content, as wide as its column, with no shadow. */
+    size?: CardSize | undefined;
+    /** The room inside, over the size's own: `none` for content ruled to the card's
+     *  edges, such as a table or a list; `sm` for dense content. */
+    padding?: CardPadding | undefined;
+    /** Rules each child off from the next, for a list of rows. */
+    divided?: boolean | undefined;
     /** A stronger shadow, for a card standing alone on a page, such as sign-in. */
     elevated?: boolean | undefined;
-    /** Renders the card as this element, such as a button, which makes the
-     *  whole card pressable: it lifts on hover and shows focus. A card that
-     *  navigates takes `href` instead, which makes it a link the same way. */
+    /** Tints the border in the accent, setting the card apart from its siblings,
+     *  such as a thread shared with the reader. */
+    highlight?: boolean | undefined;
+    /** Tints the border while a field inside has focus, for a card that frames an
+     *  input, such as a composer. */
+    focusWithin?: boolean | undefined;
+    /** Renders the card as this element, such as a button, a list or a section. */
     render?: ReactElement | undefined;
+    /** The whole card presses: it lifts on hover and shows focus. On by default for
+     *  a card with `href` or `render`; false for a `render` that isn't a control,
+     *  such as `<ul />`. */
+    interactive?: boolean | undefined;
     className?: string | undefined;
 }
-/** A raised surface holding one task, such as a sign-in form or a choice among
- *  a few options. */
-export declare function Card({ children, size, elevated, render: renderProp, href, reloadDocument, target, className, }: CardProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/** A surface holding one task, such as a sign-in form or a choice among a few
+ *  options, raised over the page; or, with `size="fill"`, a flat panel among the
+ *  page's content. */
+export declare function Card({ children, size, padding, divided, elevated, highlight, focusWithin, render: renderProp, interactive, href, reloadDocument, target, className, }: CardProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export interface CardHeaderProps {
     badge?: ReactNode;
     title: string;

package/dist/components/Card.js

@@ -3,23 +3,39 @@ import { AppLink } from "./AppLink.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/Card.tsx
-var sizeClasses = {
-	sm: "max-w-[400px] p-6",
-	md: "max-w-[520px] p-6 sm:p-10",
-	lg: "max-w-[560px] p-6 sm:p-8"
+var widthClasses = {
+	sm: "max-w-[400px]",
+	md: "max-w-[520px]",
+	lg: "max-w-[560px]",
+	fill: ""
 };
-/** A raised surface holding one task, such as a sign-in form or a choice among
-*  a few options. */
-function Card({ children, size = "md", elevated = false, render: renderProp, href, reloadDocument, target, className }) {
+var paddingClasses = {
+	none: "p-0",
+	sm: "p-3",
+	md: "p-4",
+	lg: "p-6"
+};
+var sizePadding = {
+	sm: "p-6",
+	md: "p-6 sm:p-10",
+	lg: "p-6 sm:p-8",
+	fill: paddingClasses.md
+};
+/** A surface holding one task, such as a sign-in form or a choice among a few
+*  options, raised over the page; or, with `size="fill"`, a flat panel among the
+*  page's content. */
+function Card({ children, size = "md", padding, divided = false, elevated = false, highlight = false, focusWithin = false, render: renderProp, interactive, href, reloadDocument, target, className }) {
 	const render = href === void 0 ? renderProp : /* @__PURE__ */ jsx(AppLink, {
 		href,
 		reloadDocument,
 		target
 	});
+	const fill = size === "fill";
+	const pressable = interactive ?? render !== void 0;
 	return useRender({
 		render: render ?? /* @__PURE__ */ jsx("div", {}),
 		props: {
-			className: cx("block w-full rounded-xl border border-(--theme-border) bg-(--theme-panel-bg) backdrop-blur-xl", elevated ? "shadow-(--theme-shadow-xl)" : "shadow-(--theme-shadow)", sizeClasses[size], render && "cursor-pointer text-left text-inherit no-underline transition-[background-color,box-shadow] duration-150 hover:bg-(--theme-panel-hover) hover:shadow-(--theme-shadow-lg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--theme-link) motion-reduce:transition-none", className),
+			className: cx("block w-full rounded-xl border bg-(--theme-panel-bg)", highlight ? "border-(--theme-accent)/30" : "border-(--theme-border)", focusWithin && "focus-within:border-(--theme-focus)/60", !fill && "backdrop-blur-xl", !fill && (elevated ? "shadow-(--theme-shadow-xl)" : "shadow-(--theme-shadow)"), widthClasses[size], padding === void 0 ? sizePadding[size] : paddingClasses[padding], divided && "divide-y divide-(--theme-border)", pressable && "cursor-pointer text-left text-inherit no-underline transition-[background-color,box-shadow,border-color] duration-150 hover:bg-(--theme-panel-hover) hover:shadow-(--theme-shadow-lg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--theme-link) motion-reduce:transition-none", !pressable && focusWithin && "transition-[border-color] duration-150 motion-reduce:transition-none", className),
 			children
 		}
 	});

package/dist/components/Checkbox.d.ts

@@ -5,5 +5,7 @@ export interface CheckboxProps extends Omit<BaseCheckbox.Root.Props, 'className'
 }
 /** A box that ticks on and off, or shows a mixed state with `indeterminate`. Name it with an
  *  enclosing `<label>`, or `aria-label` when it stands alone, as in a table row. In a
- *  `CheckboxGroup`, `value` identifies it and the group holds which are ticked. */
+ *  `CheckboxGroup`, `value` identifies it and the group holds which are ticked. `readOnly`
+ *  shows a tick nobody here can change, such as a permission a role grants, filled grey; it
+ *  stays focusable, so a tooltip can say what grants it. */
 export declare function Checkbox({ className, ...props }: CheckboxProps): import("react").JSX.Element;

package/dist/components/Checkbox.js

@@ -7,11 +7,13 @@ import { CheckboxGroup } from "@base-ui/react/checkbox-group";
 //#region src/components/Checkbox.tsx
 /** A box that ticks on and off, or shows a mixed state with `indeterminate`. Name it with an
 *  enclosing `<label>`, or `aria-label` when it stands alone, as in a table row. In a
-*  `CheckboxGroup`, `value` identifies it and the group holds which are ticked. */
+*  `CheckboxGroup`, `value` identifies it and the group holds which are ticked. `readOnly`
+*  shows a tick nobody here can change, such as a permission a role grants, filled grey; it
+*  stays focusable, so a tooltip can say what grants it. */
 function Checkbox$1({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Checkbox.Root, {
 		...props,
-		className: cx("flex size-4 shrink-0 items-center justify-center rounded border border-(--theme-border-strong) bg-(--theme-input-bg) text-(--theme-accent-text) cursor-pointer transition-colors motion-reduce:transition-none", focusOutline, "data-checked:border-(--theme-focus) data-checked:bg-(--theme-accent)", "data-indeterminate:border-(--theme-focus) data-indeterminate:bg-(--theme-accent)", "aria-invalid:border-(--theme-error)", "data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
+		className: cx("flex size-4 shrink-0 items-center justify-center rounded border border-(--theme-border-strong) bg-(--theme-input-bg) text-(--theme-accent-text) cursor-pointer transition-colors motion-reduce:transition-none", focusOutline, "data-checked:border-(--theme-focus) data-checked:bg-(--theme-accent)", "data-indeterminate:border-(--theme-focus) data-indeterminate:bg-(--theme-accent)", "aria-invalid:border-(--theme-error)", "data-disabled:cursor-not-allowed data-disabled:opacity-50", "data-readonly:cursor-default data-readonly:text-(--theme-app-bg)", "data-readonly:data-checked:border-(--theme-muted-text-color) data-readonly:data-checked:bg-(--theme-muted-text-color)", "data-readonly:data-indeterminate:border-(--theme-muted-text-color) data-readonly:data-indeterminate:bg-(--theme-muted-text-color)", className),
 		children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
 			className: "flex",
 			render: (indicatorProps, state) => /* @__PURE__ */ jsx("span", {

package/dist/components/ColorInput.js

@@ -4,8 +4,8 @@ import { fieldBox } from "./fieldBox.js";
 import { parseColor, toHex } from "../theme/color.js";
 import { ErrorText } from "./Field.js";
 import { framed } from "./Input.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Input } from "@base-ui/react/input";
 //#region src/components/ColorInput.tsx
 var swatchClassName = cx("shrink-0 cursor-pointer p-0.5", "[&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:rounded [&::-webkit-color-swatch]:border-0", "[&::-moz-color-swatch]:rounded [&::-moz-color-swatch]:border-0");

package/dist/components/Combobox.d.ts

@@ -35,6 +35,18 @@ type SelectionProps<Value> = {
     maxItems?: number | undefined;
     /** The longest text that can be typed, such as for a created value. */
     maxLength?: number | undefined;
+    /** With `creatable`: turns typed text into the value it adds, such as trimmed and
+     *  lowercased; undefined refuses it. */
+    createValue?: ((typed: string) => string | undefined) | undefined;
+    /** With `creatable`: keys that add what is typed, beside Enter, such as `','`. Pasted
+     *  text splits on them too, adding each part. */
+    separators?: readonly string[] | undefined;
+    /** With `creatable`: leaving the field adds what is typed, so a value half entered isn't
+     *  lost. */
+    addOnBlur?: boolean | undefined;
+    /** With `creatable`: values offered as chips under the field, each added with a press.
+     *  Chosen ones leave the row. */
+    suggested?: readonly string[] | undefined;
 };
 export type ComboboxProps<Value = string> = FieldProps & SelectionProps<Value> & {
     items: ComboboxItems<Value>;
@@ -66,6 +78,17 @@ export type ComboboxProps<Value = string> = FieldProps & SelectionProps<Value> &
     /** The area the open list stays inside, such as a drawer's body above its footer; by
      *  default, the viewport. With `details`, the list grows to fill it. */
     collisionBoundary?: Element | null | undefined;
+    /** Whether the list is open, for a host that opens it itself, such as from a shortcut or
+     *  to keep one picker open at a time. */
+    open?: boolean | undefined;
+    defaultOpen?: boolean | undefined;
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    /** The edge of the field or trigger the open list lines up with. */
+    align?: 'start' | 'end' | undefined;
+    /** Offers a row that creates the typed text, such as a label that doesn't exist yet, while
+     *  no item has that text. Choosing it calls this with the text and picks nothing itself:
+     *  the host creates the thing and picks it, if it should. */
+    onCreate?: ((text: string) => void) | undefined;
 };
 export interface AutocompleteProps extends FieldProps {
     /** Suggestions; any typed text is also a valid value. */