@flytedan/flytebot-design-system 0.49.2 → 0.50.0

package/dist/index.d.cts

@@ -704,9 +704,10 @@ interface AppShellProps {
     trailingPanel?: (ctx: {
         overlay: boolean;
     }) => React.ReactNode;
-    /** Max width (px) of the centered content column. Default 1440 — every current
-     *  flytedesk app shell's own value. */
-    contentMaxWidth?: number;
+    /** Max width of the centered content column: a px number, or `"none"` for a
+     *  full-width app whose pages fill the space beside the sidebar (SMS-50). Default
+     *  1440 — the value most flytedesk app shells use. */
+    contentMaxWidth?: number | "none";
     /** The shell's own height. Default `"100vh"`, correct for the real, top-level use
      *  every app mounts this at. A demo or preview embedding AppShell inside a bounded
      *  container (this package's own docs site) passes e.g. `"100%"` instead. */
@@ -883,6 +884,11 @@ interface TagProps {
      *  in components.css) has visually truncated with an ellipsis. Harmless, and invisible,
      *  on a chip nobody truncates. */
     title?: string;
+    /** The chip's accessible name, when its painted text is not a faithful name for it. FilterBar
+     *  sets it to the chip's whole text: the painted text is split into a shrinkable head and a
+     *  fixed tail (MiddleEllipsis), and a browser computing a name from content puts a space between
+     *  two block-level flex items, reading "Pol itical" — an explicit name is the whole value. */
+    "aria-label"?: string;
     className?: string;
 }
 declare function Tag({ children, icon, selected, tone, onRemove, onClick, className, ...rest }: TagProps): React.JSX.Element;
@@ -952,7 +958,8 @@ interface TrendChartProps {
     label: string;
     /** Value formatter for axis ticks, point tooltips and the data table. */
     valueFormat?: (n: number) => string;
-    /** Height in px. Width is always fluid (100% of the container). */
+    /** Plot height in px. Width is always fluid (100% of the container); the SVG is drawn in
+     *  real pixels at the container's measured width, so text never scales with the card. */
     height?: number;
     /** Number of horizontal gridlines (excluding the zero baseline). */
     yTicks?: number;
@@ -1324,8 +1331,14 @@ interface FilterBarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "on
      *  clearFilter(id). Apply it synchronously, exactly like onFilterChange. */
     onFilterRemove: (key: string) => void;
     /** Which edge the "add filter" popover aligns to. Default "left" — the trigger sits
-     *  at the end of a left-to-right chip row, so its menu opens under its left edge. */
+     *  in the leading column, left of the chips, so its menu opens under its left edge. */
     align?: "left" | "right";
+    /** Controls that sit at the bar's right edge, in a column of their own: a date range, an
+     *  export button. They are laid out beside the Filter button and the chips and stay put
+     *  however many chips wrap (they top-align to the Filter button, never to the chips), and
+     *  drop below the chips on a row of their own, still right-aligned, when the bar is too
+     *  narrow to hold them all on one line. */
+    actions?: React.ReactNode;
     className?: string;
 }
 type FilterValidation = {
@@ -1377,7 +1390,7 @@ declare function validateFilterValue(field: FilterField, value: unknown): Filter
  * string value; multiSelect/range/date each read/write a small typed object of their own
  * (see FilterValue).
  */
-declare function FilterBar({ fields, filters, onFilterChange, onFilterRemove, align, className, ...rest }: FilterBarProps): React.JSX.Element;
+declare function FilterBar({ fields, filters, onFilterChange, onFilterRemove, align, actions, className, ...rest }: FilterBarProps): React.JSX.Element;
 
 /**
  * A flat figure tile — no shadow, no background color, never more than four in a row.
@@ -2437,6 +2450,8 @@ interface SelectProps {
     label?: string;
     help?: string;
     error?: string;
+    /** Names the field when it has no visible `label` (the trigger is then named "<aria-label> <selected option>"). */
+    "aria-label"?: string;
     options: Array<string | SelectOption>;
     placeholder?: string;
     required?: boolean;
@@ -2462,13 +2477,15 @@ interface SelectProps {
      *  from it. Generated when omitted, so `label` names the trigger either way. */
     id?: string;
 }
-declare function Select({ label, help, error, options, placeholder, required, disabled, loading, value, onChange, searchable, clearable, multiple, summary, id, className, style }: SelectProps): React.JSX.Element;
+declare function Select({ label, help, error, options, placeholder, required, disabled, loading, value, onChange, searchable, clearable, multiple, summary, id, className, style, "aria-label": hiddenLabel }: SelectProps): React.JSX.Element;
 
 /** Calendar popover date field. Click the title to drill month -> year; range mode picks start then end with live hover preview. Values are ISO strings ("2026-03-01"). */
 interface DatePickerProps {
     label?: string;
     help?: string;
     error?: string;
+    /** Names the field when it has no visible `label` (the trigger is then named "<aria-label> <what it displays>"). */
+    "aria-label"?: string;
     required?: boolean;
     disabled?: boolean;
     /** false: value is "YYYY-MM-DD". true: value is {start, end}. */
@@ -2492,7 +2509,7 @@ interface CalendarProps {
     months?: number;
 }
 declare function Calendar({ value, range, onPick, initialMonth, months }: CalendarProps): React.JSX.Element;
-declare function DatePicker({ label, help, error, required, disabled, range, value, onChange, placeholder, id, className, style, ...rest }: DatePickerProps): React.JSX.Element;
+declare function DatePicker({ label, help, error, required, disabled, range, value, onChange, placeholder, id, className, style, "aria-label": hiddenLabel, ...rest }: DatePickerProps): React.JSX.Element;
 
 /** Analog clock-face time field: tap or drag the hand to set the hour, auto-advances to minutes; AM/PM chips; "Now" shortcut. Value is 24h "HH:MM". */
 interface TimePickerProps {

package/dist/index.d.ts

@@ -704,9 +704,10 @@ interface AppShellProps {
     trailingPanel?: (ctx: {
         overlay: boolean;
     }) => React.ReactNode;
-    /** Max width (px) of the centered content column. Default 1440 — every current
-     *  flytedesk app shell's own value. */
-    contentMaxWidth?: number;
+    /** Max width of the centered content column: a px number, or `"none"` for a
+     *  full-width app whose pages fill the space beside the sidebar (SMS-50). Default
+     *  1440 — the value most flytedesk app shells use. */
+    contentMaxWidth?: number | "none";
     /** The shell's own height. Default `"100vh"`, correct for the real, top-level use
      *  every app mounts this at. A demo or preview embedding AppShell inside a bounded
      *  container (this package's own docs site) passes e.g. `"100%"` instead. */
@@ -883,6 +884,11 @@ interface TagProps {
      *  in components.css) has visually truncated with an ellipsis. Harmless, and invisible,
      *  on a chip nobody truncates. */
     title?: string;
+    /** The chip's accessible name, when its painted text is not a faithful name for it. FilterBar
+     *  sets it to the chip's whole text: the painted text is split into a shrinkable head and a
+     *  fixed tail (MiddleEllipsis), and a browser computing a name from content puts a space between
+     *  two block-level flex items, reading "Pol itical" — an explicit name is the whole value. */
+    "aria-label"?: string;
     className?: string;
 }
 declare function Tag({ children, icon, selected, tone, onRemove, onClick, className, ...rest }: TagProps): React.JSX.Element;
@@ -952,7 +958,8 @@ interface TrendChartProps {
     label: string;
     /** Value formatter for axis ticks, point tooltips and the data table. */
     valueFormat?: (n: number) => string;
-    /** Height in px. Width is always fluid (100% of the container). */
+    /** Plot height in px. Width is always fluid (100% of the container); the SVG is drawn in
+     *  real pixels at the container's measured width, so text never scales with the card. */
     height?: number;
     /** Number of horizontal gridlines (excluding the zero baseline). */
     yTicks?: number;
@@ -1324,8 +1331,14 @@ interface FilterBarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "on
      *  clearFilter(id). Apply it synchronously, exactly like onFilterChange. */
     onFilterRemove: (key: string) => void;
     /** Which edge the "add filter" popover aligns to. Default "left" — the trigger sits
-     *  at the end of a left-to-right chip row, so its menu opens under its left edge. */
+     *  in the leading column, left of the chips, so its menu opens under its left edge. */
     align?: "left" | "right";
+    /** Controls that sit at the bar's right edge, in a column of their own: a date range, an
+     *  export button. They are laid out beside the Filter button and the chips and stay put
+     *  however many chips wrap (they top-align to the Filter button, never to the chips), and
+     *  drop below the chips on a row of their own, still right-aligned, when the bar is too
+     *  narrow to hold them all on one line. */
+    actions?: React.ReactNode;
     className?: string;
 }
 type FilterValidation = {
@@ -1377,7 +1390,7 @@ declare function validateFilterValue(field: FilterField, value: unknown): Filter
  * string value; multiSelect/range/date each read/write a small typed object of their own
  * (see FilterValue).
  */
-declare function FilterBar({ fields, filters, onFilterChange, onFilterRemove, align, className, ...rest }: FilterBarProps): React.JSX.Element;
+declare function FilterBar({ fields, filters, onFilterChange, onFilterRemove, align, actions, className, ...rest }: FilterBarProps): React.JSX.Element;
 
 /**
  * A flat figure tile — no shadow, no background color, never more than four in a row.
@@ -2437,6 +2450,8 @@ interface SelectProps {
     label?: string;
     help?: string;
     error?: string;
+    /** Names the field when it has no visible `label` (the trigger is then named "<aria-label> <selected option>"). */
+    "aria-label"?: string;
     options: Array<string | SelectOption>;
     placeholder?: string;
     required?: boolean;
@@ -2462,13 +2477,15 @@ interface SelectProps {
      *  from it. Generated when omitted, so `label` names the trigger either way. */
     id?: string;
 }
-declare function Select({ label, help, error, options, placeholder, required, disabled, loading, value, onChange, searchable, clearable, multiple, summary, id, className, style }: SelectProps): React.JSX.Element;
+declare function Select({ label, help, error, options, placeholder, required, disabled, loading, value, onChange, searchable, clearable, multiple, summary, id, className, style, "aria-label": hiddenLabel }: SelectProps): React.JSX.Element;
 
 /** Calendar popover date field. Click the title to drill month -> year; range mode picks start then end with live hover preview. Values are ISO strings ("2026-03-01"). */
 interface DatePickerProps {
     label?: string;
     help?: string;
     error?: string;
+    /** Names the field when it has no visible `label` (the trigger is then named "<aria-label> <what it displays>"). */
+    "aria-label"?: string;
     required?: boolean;
     disabled?: boolean;
     /** false: value is "YYYY-MM-DD". true: value is {start, end}. */
@@ -2492,7 +2509,7 @@ interface CalendarProps {
     months?: number;
 }
 declare function Calendar({ value, range, onPick, initialMonth, months }: CalendarProps): React.JSX.Element;
-declare function DatePicker({ label, help, error, required, disabled, range, value, onChange, placeholder, id, className, style, ...rest }: DatePickerProps): React.JSX.Element;
+declare function DatePicker({ label, help, error, required, disabled, range, value, onChange, placeholder, id, className, style, "aria-label": hiddenLabel, ...rest }: DatePickerProps): React.JSX.Element;
 
 /** Analog clock-face time field: tap or drag the hand to set the hour, auto-advances to minutes; AM/PM chips; "Now" shortcut. Value is 24h "HH:MM". */
 interface TimePickerProps {