@multiplatform.one/frappe-ui 7.34.4 → 7.36.0

package/src/fields/Signature/index.tsx

@@ -35,7 +35,6 @@ export type SignatureProps<
     disabled?: boolean;
     readOnly?: boolean;
     skeleton?: boolean;
-    compact?: boolean;
     width?: number;
     height?: number;
     penColor?: string;
@@ -76,7 +75,6 @@ export function Signature<
       helperText={fieldProps.helperText}
       readOnly={fieldProps.readOnly}
       skeleton={fieldProps.skeleton}
-      compact={fieldProps.compact}
       required={fieldProps.required}
       id={fieldProps.id}
       size={fieldProps.size}

package/src/fields/Slider/index.tsx

@@ -36,7 +36,6 @@ export type SliderFieldProps<
     disabled?: boolean;
     readOnly?: boolean;
     skeleton?: boolean;
-    compact?: boolean;
     sliderProps?: Record<string, unknown>;
   };
 
@@ -74,7 +73,6 @@ export function SliderField<
       helperText={fieldProps.helperText}
       readOnly={fieldProps.readOnly}
       skeleton={fieldProps.skeleton}
-      compact={fieldProps.compact}
       required={fieldProps.required}
       id={fieldProps.id}
       size={fieldProps.size}

package/src/fields/SmallText/SmallText.spec.tsx

@@ -162,14 +162,13 @@ describe("registry resolution (Small Text fieldtype)", () => {
     expect(element.props.textAreaProps).toEqual({ readOnly: true, tabIndex: -1 });
   });
 
-  it("passes helperText / readOnly / skeleton / compact through", () => {
+  it("passes helperText / readOnly / skeleton through", () => {
     const Component = getFieldComponent("Small Text")!;
     const element = (Component as Function)(
-      propsFor({ helperText: "keep it short", readOnly: true, skeleton: true, compact: true }),
+      propsFor({ helperText: "keep it short", readOnly: true, skeleton: true }),
     ) as React.ReactElement<Record<string, any>>;
     expect(element.props.helperText).toBe("keep it short");
     expect(element.props.readOnly).toBe(true);
     expect(element.props.skeleton).toBe(true);
-    expect(element.props.compact).toBe(true);
   });
 });

package/src/fields/SmallText/index.tsx

@@ -38,7 +38,6 @@ export type SmallTextProps<
     disabled?: boolean;
     readOnly?: boolean;
     skeleton?: boolean;
-    compact?: boolean;
     maxLength?: number;
     textAreaProps?: Record<string, unknown>;
   };
@@ -76,7 +75,6 @@ export function SmallText<
       helperText={fieldProps.helperText}
       readOnly={fieldProps.readOnly}
       skeleton={fieldProps.skeleton}
-      compact={fieldProps.compact}
       required={fieldProps.required}
       id={fieldProps.id}
       size={fieldProps.size}

package/src/fields/Switch/index.tsx

@@ -33,7 +33,6 @@ export type SwitchFieldProps<
     disabled?: boolean;
     readOnly?: boolean;
     skeleton?: boolean;
-    compact?: boolean;
     switchProps?: Record<string, unknown>;
   };
 
@@ -68,7 +67,6 @@ export function SwitchField<
       helperText={fieldProps.helperText}
       readOnly={fieldProps.readOnly}
       skeleton={fieldProps.skeleton}
-      compact={fieldProps.compact}
       required={fieldProps.required}
       id={fieldProps.id}
       size={fieldProps.size}

package/src/fields/TableMultiSelect.tsx

@@ -34,7 +34,6 @@ export interface TableMultiSelectProps {
   helperText?: string;
   readOnly?: boolean;
   skeleton?: boolean;
-  compact?: boolean;
   placeholder?: string;
 }
 
@@ -53,7 +52,6 @@ export function TableMultiSelect({
   helperText,
   readOnly = false,
   skeleton = false,
-  compact = false,
   placeholder,
 }: TableMultiSelectProps) {
   const { t } = useTranslation();
@@ -123,7 +121,6 @@ export function TableMultiSelect({
       error={error}
       helperText={helperText}
       skeleton={skeleton}
-      compact={compact}
     />
   );
 }

package/src/fields/TextEditor/index.native.tsx

@@ -22,12 +22,11 @@ export function TextEditor({
   helperText,
   readOnly,
   skeleton,
-  compact,
   placeholder,
   minHeight = 200,
   ...rest
 }: TextEditorProps) {
-  const resolvedMinHeight = minHeight ?? (compact ? 100 : 200);
+  const resolvedMinHeight = minHeight;
   return (
     <YStack {...rest}>
       <RichTextEditor
@@ -40,7 +39,6 @@ export function TextEditor({
         helperText={helperText}
         readOnly={readOnly}
         skeleton={skeleton}
-        compact={compact}
         placeholder={placeholder}
         minHeight={resolvedMinHeight}
       />

package/src/fields/TextEditor/index.tsx

@@ -19,12 +19,11 @@ export function TextEditor({
   helperText,
   readOnly,
   skeleton,
-  compact,
   placeholder,
   minHeight = 200,
   ...rest
 }: TextEditorProps) {
-  const resolvedMinHeight = minHeight ?? (compact ? 100 : 200);
+  const resolvedMinHeight = minHeight;
   return (
     <YStack {...rest}>
       <RichTextEditor
@@ -37,7 +36,6 @@ export function TextEditor({
         helperText={helperText}
         readOnly={readOnly}
         skeleton={skeleton}
-        compact={compact}
         placeholder={placeholder}
         minHeight={resolvedMinHeight}
       />

package/src/fields/TextEditor/types.ts

@@ -11,10 +11,8 @@ export interface TextEditorProps extends Omit<YStackProps, "children" | "onChang
   error?: string;
   helperText?: string;
   placeholder?: string;
-  /** Minimum height in pixels (default 200, 100 when compact) */
+  /** Minimum height in pixels (default 200) */
   minHeight?: number;
   /** When true, renders a skeleton placeholder instead of the editor */
   skeleton?: boolean;
-  /** When true, uses compact sizing */
-  compact?: boolean;
 }

package/src/fields/TimePicker/index.tsx

@@ -7,16 +7,13 @@ export type TimePickerProps = FormsTimePickerProps;
 
 /** Thin adapter — forwards helperText / readOnly / skeleton / compact via props spread. */
 export function TimePicker(props: TimePickerProps) {
-  const { helperText, readOnly, skeleton, compact, ...resolvedProps } = useProps(
-    props,
-  ) as TimePickerProps;
+  const { helperText, readOnly, skeleton, ...resolvedProps } = useProps(props) as TimePickerProps;
   return (
     <FormsTimePicker
       clockIcon={<ClockIcon size={16} />}
       helperText={helperText}
       readOnly={readOnly}
       skeleton={skeleton}
-      compact={compact}
       {...resolvedProps}
     />
   );

package/src/fields/ToggleGroup/index.tsx

@@ -43,7 +43,6 @@ export type ToggleGroupFieldProps<
     disabledReason?: string;
     readOnly?: boolean;
     skeleton?: boolean;
-    compact?: boolean;
     children?: ReactNode;
   };
 
@@ -82,7 +81,6 @@ export function ToggleGroupField<
       helperText={fieldProps.helperText}
       readOnly={fieldProps.readOnly}
       skeleton={fieldProps.skeleton}
-      compact={fieldProps.compact}
       required={fieldProps.required}
       id={fieldProps.id}
       size={fieldProps.size}

package/src/fields/shared/EditorPreviewPanes.tsx

@@ -10,20 +10,20 @@
  */
 
 import { Tabs, ScrollView } from "@multiplatform.one/components";
-import { layoutBreakpoints, useResolvedKnobs } from "@multiplatform.one/theme";
+import { layoutBreakpoints, useResolvedKnobs, sizeTokenStep } from "@multiplatform.one/theme";
 import { useState, type ReactNode } from "react";
 import { XStack, YStack } from "tamagui";
 
 export interface PreviewSurfaceProps {
-  compact?: boolean;
   /** Also scroll horizontally (code panes: long lines never wrap). */
   horizontalScroll?: boolean;
   children: ReactNode;
 }
 
 /** Bordered, scrollable surface both preview panes render into. */
-export function PreviewSurface({ compact, horizontalScroll, children }: PreviewSurfaceProps) {
-  const { knobProps } = useResolvedKnobs({ compact });
+export function PreviewSurface({ horizontalScroll, children }: PreviewSurfaceProps) {
+  const { knobProps } = useResolvedKnobs();
+  const small = sizeTokenStep(knobProps.sizeToken) < 0;
   const body = (
     <YStack {...knobProps.panelPadding} flexGrow={1}>
       {children}
@@ -33,7 +33,7 @@ export function PreviewSurface({ compact, horizontalScroll, children }: PreviewS
   return (
     <YStack
       flex={1}
-      minHeight={compact ? 112 : 160}
+      minHeight={small ? 112 : 160}
       maxHeight={480}
       backgroundColor="$color2"
       overflow="hidden"
@@ -65,7 +65,6 @@ export interface EditorPreviewPanesProps {
   preview: ReactNode;
   editTabLabel: string;
   previewTabLabel: string;
-  compact?: boolean;
   /** Start on the preview tab (readOnly display leads with the rendering). */
   defaultPreview?: boolean;
 }
@@ -75,10 +74,9 @@ export function EditorPreviewPanes({
   preview,
   editTabLabel,
   previewTabLabel,
-  compact,
   defaultPreview,
 }: EditorPreviewPanesProps) {
-  const { knobProps } = useResolvedKnobs({ compact });
+  const { knobProps } = useResolvedKnobs();
   const [containerWidth, setContainerWidth] = useState(0);
   const [mode, setMode] = useState<"edit" | "preview">(defaultPreview ? "preview" : "edit");
   const isSplit = containerWidth >= layoutBreakpoints.medium;
@@ -102,7 +100,6 @@ export function EditorPreviewPanes({
         // Tabs stay interactive on disabled/readOnly fields: those states gate
         // editing, never viewing — the preview must remain reachable.
         <Tabs
-          compact={compact}
           value={mode}
           onChange={(next) => setMode(next === "preview" ? "preview" : "edit")}
           items={[

package/src/frappeEventColor.spec.ts

@@ -55,6 +55,7 @@ describe("resolveFrappeEventColor", () => {
 
   it("passes theme token references through", () => {
     expect(resolveFrappeEventColor("$accentBackground", light)).toBe("$accentBackground");
+    expect(resolveFrappeEventColor("$color9", light)).toBe("$color9");
     expect(resolveFrappeEventColor("$red9", dark)).toBe("$red9");
   });
 

package/src/index.ts

@@ -85,11 +85,15 @@ export {
   type ListViewMode,
 } from "./FrappeListView";
 export {
+  activeFilterCount,
+  bandOptionFor,
   isListNarrowed,
   listStateFilters,
   listStateFromParams,
   listStateOrderBy,
   listStateParams,
+  type FrappeListBand,
+  type FrappeListBandOption,
   type FrappeListControls,
   type FrappeListFacet,
   type FrappeListFilter,
@@ -109,6 +113,11 @@ export {
 } from "./list/favorites";
 export { FacetRail, type FacetRailOption, type FacetRailProps } from "./list/FacetRail";
 export { RangeFilter, rangeCeiling, type RangeFilterProps } from "./list/RangeFilter";
+export {
+  ListToolsSheet,
+  countListNarrowings,
+  type ListToolsSheetProps,
+} from "./list/ListToolsSheet";
 export { ShufflePanel, type ShufflePanelProps } from "./list/ShufflePanel";
 export { FacetBadge, type FacetBadgeProps } from "./list/FacetBadge";
 export { ImageWell, type ImageWellProps } from "./list/ImageWell";

package/src/insights/InsightsFacetTags.tsx

@@ -28,7 +28,7 @@ interface FacetTagChipProps {
  */
 function FacetTagChip({ value, count, label, tint = "gray", onPress, testID }: FacetTagChipProps) {
   const { t } = useTranslation();
-  const { knobProps } = useResolvedKnobs({ compact: true });
+  const { knobProps } = useResolvedKnobs();
   const nested = knobProps.nestedControl;
   const [kbFocus, setKbFocus] = useState(false);
   if (isWeb) ensureKeyboardModalityTracking();
@@ -79,7 +79,6 @@ function FacetTagChip({ value, count, label, tint = "gray", onPress, testID }: F
       />
       <Text
         {...knobProps.label}
-        fontWeight="600"
         color={`$${tint}11` as never}
         textTransform="capitalize"
         userSelect="none"

package/src/insights/InsightsKpiBand.tsx

@@ -26,11 +26,11 @@ export interface InsightsKpiBandProps {
 }
 
 /**
- * A supporting metric beside the hero (LC-73): compact density and the
- * label type, painted below the page's 44px floor.
+ * A supporting metric beside the hero (LC-73): the nested-control box and
+ * the label type, painted below the page's 44px floor.
  */
 function NestedKpi({ tile, testID }: { tile: InsightsTile; testID?: string }) {
-  const { knobProps } = useResolvedKnobs({ compact: true });
+  const { knobProps } = useResolvedKnobs();
   const nestedPx = knobProps.nestedControl.px;
   return (
     <YStack

package/src/insights/InsightsLeaders.tsx

@@ -3,6 +3,7 @@ import { DataTable, type DataTableColumn, type DataTableData } from "@multiplatf
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { SizableText } from "tamagui";
 import { ImageWell } from "../list/ImageWell";
 import { topBy } from "./insightsData";
 import {
@@ -41,7 +42,7 @@ export function InsightsLeaders<TDoc>({
   testID,
 }: InsightsLeadersProps<TDoc>) {
   const { t } = useTranslation();
-  const { knobProps } = useResolvedKnobs({ compact: true });
+  const { knobProps } = useResolvedKnobs();
   const [field, setField] = useState(metrics[0]?.field ?? "");
   const metric = metrics.find((candidate) => candidate.field === field) ?? metrics[0];
   const nestedPx = knobProps.nestedControl.px;
@@ -67,7 +68,7 @@ export function InsightsLeaders<TDoc>({
         header: t("Rank"),
         size: 64,
         cell: ({ row }) => (
-          <Text {...knobProps.label} color="$color10" fontWeight="600">
+          <Text {...knobProps.label} color="$color10">
             {`#${row.original.rank}`}
           </Text>
         ),
@@ -90,9 +91,9 @@ export function InsightsLeaders<TDoc>({
                 data-nested-px={nestedPx}
               />
               <YStack flexShrink={1} minWidth={0}>
-                <Text fontWeight="600" numberOfLines={1}>
+                <SizableText size="$4" {...knobProps.heading} numberOfLines={1}>
                   {row.original.title}
-                </Text>
+                </SizableText>
                 {code ? (
                   <Text {...knobProps.label} color="$color10">
                     {code}
@@ -113,7 +114,7 @@ export function InsightsLeaders<TDoc>({
         ),
       },
     ],
-    [t, metric, record, nestedPx, knobProps.label],
+    [t, metric, record, nestedPx, knobProps.label, knobProps.heading],
   );
 
   if (!metric) return null;
@@ -122,7 +123,7 @@ export function InsightsLeaders<TDoc>({
       {metrics.length > 1 ? (
         <Tabs
           variant="contained"
-          compact
+          size="$3"
           value={metric.field}
           onChange={setField}
           items={metrics.map((candidate) => ({ value: candidate.field, label: candidate.label }))}

package/src/insights/InsightsRecords.tsx

@@ -22,7 +22,7 @@ export interface InsightsRecordsProps<TDoc> {
  * nestedControl, not the page's 44px floor (LC-73).
  */
 export function InsightsRecords<TDoc>({ tiles, record, testID }: InsightsRecordsProps<TDoc>) {
-  const { knobProps } = useResolvedKnobs({ compact: true });
+  const { knobProps } = useResolvedKnobs();
   const { knobProps: pageKnobs } = useResolvedKnobs();
   const wellPx = knobProps.nestedControl.px * 2;
   return (
@@ -54,7 +54,7 @@ export function InsightsRecords<TDoc>({ tiles, record, testID }: InsightsRecords
                   {title}
                 </Text>
                 {code ? (
-                  <Text {...knobProps.label} color="$color10" fontWeight="600">
+                  <Text {...knobProps.label} color="$color10">
                     {code}
                   </Text>
                 ) : null}

package/src/insights/InsightsTable.tsx

@@ -3,6 +3,7 @@ import { DataTable, type DataTableColumn, type DataTableData } from "@multiplatf
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
+import { SizableText } from "tamagui";
 import { FacetBadge } from "../list/FacetBadge";
 import {
   formatMetric,
@@ -44,7 +45,7 @@ export function InsightsTable<TDoc>({
   testID,
 }: InsightsTableProps<TDoc>) {
   const { t } = useTranslation();
-  const { knobProps } = useResolvedKnobs({ compact: true });
+  const { knobProps } = useResolvedKnobs();
   const nestedPx = knobProps.nestedControl.px;
   const hasCode = rows.some((doc) => Boolean(record.code(doc)));
 
@@ -72,7 +73,7 @@ export function InsightsTable<TDoc>({
               header: t("No."),
               size: 72,
               cell: ({ row }: { row: { original: TableRow<TDoc> } }) => (
-                <Text {...knobProps.label} color="$color10" fontWeight="600">
+                <Text {...knobProps.label} color="$color10">
                   {row.original.code}
                 </Text>
               ),
@@ -93,9 +94,9 @@ export function InsightsTable<TDoc>({
               data-nested-px={nestedPx}
             />
             <YStack flexShrink={1} minWidth={0}>
-              <Text fontWeight="600" numberOfLines={1}>
+              <SizableText size="$4" {...knobProps.heading} numberOfLines={1}>
                 {row.original.title}
-              </Text>
+              </SizableText>
             </YStack>
           </XStack>
         ),
@@ -116,7 +117,7 @@ export function InsightsTable<TDoc>({
                         key={value}
                         label={record.valueLabel(value)}
                         tint={record.valueTint(value)}
-                        compact
+                        size="$3"
                       />
                     ))
                   ) : (
@@ -144,7 +145,7 @@ export function InsightsTable<TDoc>({
           }) satisfies DataTableColumn<TableRow<TDoc>>,
       ),
     ],
-    [t, hasCode, facetLabel, metrics, record, nestedPx, knobProps.label],
+    [t, hasCode, facetLabel, metrics, record, nestedPx, knobProps.label, knobProps.heading],
   );
 
   return (

package/src/list/BandFilters.tsx

@@ -0,0 +1,32 @@
+import { useTranslation } from "react-i18next";
+import { FacetList } from "./FacetList";
+import { FacetRail } from "./FacetRail";
+import type { FrappeListBand } from "./listState";
+import type { ListControlsResult } from "./useListControls";
+
+interface BandFilterProps {
+  band: FrappeListBand;
+  list: ListControlsResult;
+  layout?: "rail" | "list";
+  testID: string;
+}
+
+export function BandFilter({ band, list, layout = "rail", testID }: BandFilterProps) {
+  const { t } = useTranslation();
+  const counts = list.bandCounts[band.param];
+  const props = {
+    label: band.label,
+    value: list.state.bands[band.param] ?? "",
+    onChange: (value: string) => list.update({ bands: { [band.param]: value } }),
+    testID,
+    options: [
+      { value: "", label: band.allLabel ?? t("All"), count: list.total },
+      ...band.options.map((option) => ({
+        value: option.value,
+        label: option.label,
+        count: counts ? (counts[option.value] ?? 0) : undefined,
+      })),
+    ],
+  };
+  return layout === "list" ? <FacetList {...props} columns={2} /> : <FacetRail {...props} />;
+}

package/src/list/FacetBadge.tsx

@@ -1,25 +1,27 @@
 import { Text, XStack } from "@multiplatform.one/components";
-import { hairlineWidth, useResolvedKnobs } from "@multiplatform.one/theme";
+import { hairlineWidth, sizeTokenStep, useResolvedKnobs } from "@multiplatform.one/theme";
+import type { SizeTokens } from "tamagui";
 
 export interface FacetBadgeProps {
   label: string;
   /** Theme hue (`"grass"`) painting the badge from its ramp. */
   tint?: string;
-  /** A step smaller, for image wells and table cells. */
-  compact?: boolean;
+  /** Size token (Tamagui's own `size`); below `$true` the badge draws a step smaller. */
+  size?: SizeTokens;
 }
 
 /**
- * One facet value as a static badge: nested density (LC-73), the tint's
+ * One facet value as a static badge at the ambient size token, the tint's
  * step-4 fill, step-7 border and step-12 text (DF-04, AA in both schemes).
  */
-export function FacetBadge({ label, tint = "gray", compact = false }: FacetBadgeProps) {
-  const { knobProps } = useResolvedKnobs({ compact: true });
+export function FacetBadge({ label, tint = "gray", size }: FacetBadgeProps) {
+  const { knobProps } = useResolvedKnobs({ size });
+  const small = sizeTokenStep(knobProps.sizeToken) < 0;
   return (
     <XStack
       {...knobProps.borderRadius}
-      paddingHorizontal={compact ? "$1.5" : "$2"}
-      paddingVertical={compact ? "$0.5" : "$1"}
+      paddingHorizontal={small ? "$1.5" : "$2"}
+      paddingVertical={small ? "$0.5" : "$1"}
       backgroundColor={`$${tint}4` as never}
       borderColor={`$${tint}7` as never}
       borderWidth={hairlineWidth}
@@ -31,7 +33,7 @@ export function FacetBadge({ label, tint = "gray", compact = false }: FacetBadge
         textTransform="capitalize"
         fontWeight="700"
         color={`$${tint}12` as never}
-        {...(compact ? { fontSize: "$1" as const } : null)}
+        {...(small ? { fontSize: "$1" as const } : null)}
         letterSpacing={0.3}
       >
         {label}