@protobase/ui 0.19.9 → 0.19.11

package/dist/index.js

@@ -1,7 +1,9 @@
 import { LogoMark } from "./app-shell/logo.js";
+import { Segmented } from "./primitives/segmented.js";
 import { Input } from "./primitives/input.js";
 import { Spinner } from "./primitives/spinner.js";
 import { Button, buttonClass } from "./primitives/button.js";
+import { Dialog } from "./primitives/dialog.js";
 import { OtpInput } from "./primitives/otp-input.js";
 import { ApiProvider, useClient, useResourceClient } from "./data/api-provider.js";
 import { AuthLayout } from "./auth/auth-layout.js";
@@ -30,14 +32,20 @@ import { AssistantDock } from "./assistant-dock/assistant-dock.js";
 import { useAssistant } from "./assistant-dock/use-assistant.js";
 import { useAssistantClient } from "./assistant-dock/use-assistant-client.js";
 import { useMeta } from "./data/use-meta.js";
+import { useLayoutRecord } from "./app/pages/record-scope.js";
 import { AppLink, useAppAddress } from "./app/use-app-address.js";
+import { Field } from "./record-view/field.js";
+import { Section } from "./record-view/section.js";
+import { Textarea } from "./primitives/textarea.js";
 import { ResponsiveDialog } from "./primitives/responsive-dialog.js";
 import { SignInPrompt } from "./auth/sign-in-prompt.js";
 import { useListDisplay } from "./app/displays/display-context.js";
+import { MenuSelect } from "./primitives/menu-select.js";
+import { Form } from "./app/create/form.js";
 import { useFacets, useHistogram, useSeries } from "./data/use-aggregates.js";
-import { useLayoutRecord } from "./app/pages/record-scope.js";
 import { useList } from "./data/use-list.js";
 import { isConflict, useUpdateRecord } from "./data/use-update-record.js";
 import { App } from "./app/app.js";
 import { RecordLink } from "./app/displays/record-link.js";
-export { ActionCard, ApiProvider, App, AppLink, AssistantDock, AuthLayout, Button, ChatMessage, ChatThread, CodeForm, CompactTable, Composer, DiffView, FieldList, Input, LogoMark, OtpInput, PartView, RecordLink, ResendCodeButton, ResponsiveDialog, SidePanel, SignInPrompt, Spinner, StepList, buttonClass, definePlugin, defineUi, diffStats, isConflict, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useResourceClient, useSeries, useUpdateRecord };
+import { Choices } from "./primitives/choices.js";
+export { ActionCard, ApiProvider, App, AppLink, AssistantDock, AuthLayout, Button, ChatMessage, ChatThread, Choices, CodeForm, CompactTable, Composer, Dialog, DiffView, Field, FieldList, Form, Input, LogoMark, MenuSelect, OtpInput, PartView, RecordLink, ResendCodeButton, ResponsiveDialog, Section, Segmented, SidePanel, SignInPrompt, Spinner, StepList, Textarea, buttonClass, definePlugin, defineUi, diffStats, isConflict, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useResourceClient, useSeries, useUpdateRecord };

package/dist/live/columns-from-model.js

@@ -1,6 +1,6 @@
 import { humanize } from "./naming.js";
-import { isMarkdown } from "../markdown/markdown-hint.js";
 import { markdownExcerpt } from "../markdown/markdown-excerpt.js";
+import { isMarkdown } from "../markdown/markdown-hint.js";
 import { enumLabel } from "@protobase/schema";
 //#region src/live/columns-from-model.ts
 const tones = {

package/dist/live/grid-loader.js

@@ -1,7 +1,7 @@
 import { keys } from "../data/query-keys.js";
 import { recordId } from "./model-helpers.js";
-import { listLabels, withLabels } from "./relation-labels.js";
 import { listPhotos, withPhotos } from "./row-photos.js";
+import { listLabels, withLabels } from "./relation-labels.js";
 //#region src/live/grid-loader.ts
 const exactBelow = 5e3;
 /**

package/dist/live/use-filter-config.js

@@ -5,9 +5,9 @@ import { humanize } from "./naming.js";
 import { fetchLabels } from "./relation-labels.js";
 import { setRange } from "../filter-panel/filter-state.js";
 import { stateToText } from "./filter-string.js";
+import { rangeFormat, rangeHistogram, widgetFields } from "./view-fields.js";
 import { labelKeys, matchOptions } from "./reference-options.js";
 import { useReferenceSearch } from "./use-reference-search.js";
-import { rangeFormat, rangeHistogram, widgetFields } from "./view-fields.js";
 import { useQueries, useQueryClient } from "@tanstack/react-query";
 import { enumLabel } from "@protobase/schema";
 //#region src/live/use-filter-config.ts

package/dist/markdown/markdown-editor.js

@@ -1,6 +1,6 @@
 import { Segmented } from "../primitives/segmented.js";
-import { Textarea } from "../primitives/textarea.js";
 import { Markdown } from "./markdown.js";
+import { Textarea } from "../primitives/textarea.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/markdown/markdown-editor.tsx

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.19.9";
+var version = "0.19.11";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };

package/dist/primitives/choices.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from "react";
+//#region src/primitives/choices.d.ts
+export type ChoiceOption<T extends string> = {
+  value: T;
+  label: string;
+  description?: ReactNode;
+  disabled?: boolean;
+};
+/**
+ * `name` groups the radio buttons, so that the arrow keys move between them; `label` names the group for screen
+ * readers. A disabled option shows and cannot be chosen.
+ */
+export type ChoicesProps<T extends string> = {
+  name: string;
+  label?: string;
+  options: Array<ChoiceOption<T>>;
+  value: T | undefined;
+  onChange: (value: T) => void;
+};
+/** One of a few options, each a card of its own row with a line that says what it means; the chosen one is outlined. */
+export declare const Choices: <T extends string>({ name, label, options, value, onChange }: ChoicesProps<T>) => import("react").JSX.Element;
+//#endregion

package/dist/primitives/choices.js

@@ -0,0 +1,33 @@
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/primitives/choices.tsx
+/** One of a few options, each a card of its own row with a line that says what it means; the chosen one is outlined. */
+const Choices = ({ name, label, options, value, onChange }) => /* @__PURE__ */ jsx("div", {
+	role: "radiogroup",
+	"aria-label": label,
+	className: "flex flex-col gap-2",
+	children: options.map((option) => /* @__PURE__ */ jsxs("label", {
+		className: cn("block rounded-lg border p-3 transition-colors has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-primary", option.disabled ? "cursor-default bg-background opacity-60" : option.value === value ? "cursor-pointer border-primary bg-primary-soft" : "cursor-pointer bg-background hover:bg-surface"),
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				type: "radio",
+				name,
+				value: option.value,
+				checked: option.value === value,
+				disabled: option.disabled,
+				onChange: () => onChange(option.value),
+				className: "sr-only"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: cn("block font-medium", option.value === value && "text-primary-text"),
+				children: option.label
+			}),
+			option.description && /* @__PURE__ */ jsx("span", {
+				className: "mt-0.5 block text-xs leading-snug text-muted-foreground",
+				children: option.description
+			})
+		]
+	}, option.value))
+});
+//#endregion
+export { Choices };

package/dist/primitives/dialog.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+//#region src/primitives/dialog.d.ts
+export type DialogProps = {
+  title: string;
+  description?: ReactNode;
+  onClose: () => void;
+  /** Buttons, rendered right-aligned. */
+  actions: ReactNode;
+  children?: ReactNode;
+  /** Room for a row of cards or a table in the body, instead of a short question. */
+  wide?: boolean;
+};
+/** A modal with a title, optional body and action buttons. Closes on Escape and on a click outside. */
+export declare const Dialog: ({ title, description, onClose, actions, children, wide }: DialogProps) => import("react").JSX.Element;
+//#endregion

package/dist/primitives/menu-select.d.ts

@@ -0,0 +1,14 @@
+import { SegmentedOption } from "./segmented.js";
+//#region src/primitives/menu-select.d.ts
+export type MenuSelectProps<T extends string> = {
+  value: T;
+  options: Array<SegmentedOption<T>>;
+  onChange: (value: T) => void;
+  label: string;
+};
+/**
+ * The choices of a Segmented switch in a menu, for a row without room for every option: a button with the chosen
+ * option's icon and label, opening the options under its right edge.
+ */
+export declare const MenuSelect: <T extends string>({ value, options, onChange, label }: MenuSelectProps<T>) => import("react").JSX.Element;
+//#endregion

package/dist/primitives/segmented.d.ts

@@ -0,0 +1,23 @@
+import { ComponentType } from "react";
+//#region src/primitives/segmented.d.ts
+export type SegmentedOption<T extends string> = {
+  value: T;
+  label: string;
+  icon?: ComponentType<{
+    className?: string;
+  }>;
+};
+/**
+ * `md` matches a medium Button, for a switch that sits among buttons. `iconOnly` draws each option as its icon alone,
+ * its label the button's name, for a row without room for the words.
+ */
+export type SegmentedProps<T extends string> = {
+  value: T;
+  options: Array<SegmentedOption<T>>;
+  onChange: (value: T) => void;
+  label?: string;
+  size?: 'sm' | 'md';
+  iconOnly?: boolean;
+};
+export declare const Segmented: <T extends string>({ value, options, onChange, label, size, iconOnly }: SegmentedProps<T>) => import("react").JSX.Element;
+//#endregion

package/dist/primitives/textarea.d.ts

@@ -0,0 +1,9 @@
+import { TextareaHTMLAttributes } from "react";
+//#region src/primitives/textarea.d.ts
+export type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value'> & {
+  value: string;
+  invalid?: boolean;
+};
+/** A text box of several lines that grows with its text instead of scrolling inside. */
+export declare const Textarea: ({ invalid, className, rows, value, ...rest }: TextareaProps) => import("react").JSX.Element;
+//#endregion

package/dist/record-view/field.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+//#region src/record-view/field.d.ts
+export type FieldConflict = {
+  user: {
+    name: string;
+    initials: string;
+    hue: number;
+  };
+  ago: string;
+  theirValue: string;
+  onKeepMine: () => void;
+  onUseTheirs: () => void;
+};
+export type FieldProps = {
+  label: string;
+  /** Marks the label with an asterisk. */
+  required?: boolean;
+  help?: string;
+  example?: string;
+  error?: string;
+  conflict?: FieldConflict;
+  /** Takes the whole row of a grid of two columns, as a text of several lines does. */
+  wide?: boolean;
+  children: ReactNode;
+};
+export declare const Field: ({ label, required, help, example, error, conflict, wide, children }: FieldProps) => import("react").JSX.Element;
+//#endregion

package/dist/record-view/section.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+//#region src/record-view/section.d.ts
+/** A titled part of the record page; `actions` sit at the end of the title's line. */
+export declare const Section: ({ title, help, actions, children }: {
+  title: string;
+  help?: string;
+  actions?: ReactNode;
+  children: ReactNode;
+}) => import("react").JSX.Element;
+//#endregion