@flytedan/flytebot-design-system 0.9.0 → 0.10.0

package/dist/index.d.cts

@@ -165,6 +165,15 @@ interface SegmentedControlProps {
     }>;
     value?: string;
     onChange?: (value: string) => void;
+    /** Names the group. Each button already names itself from its own text, so the
+     *  buttons were never the gap — the GROUP was: two segmented controls in one
+     *  toolbar both announce as an unnamed group of buttons. There is no visible
+     *  `label` prop because this control is used inline next to the thing it
+     *  switches (a density toggle beside a table, a range toggle beside a chart),
+     *  where a stacked field label would be wrong; aria-label is what names it.
+     *  The rest spread below already forwarded this to the DOM — what was missing
+     *  was any typed way for a caller to pass it. */
+    "aria-label"?: string;
     className?: string;
 }
 declare function SegmentedControl({ options, value, onChange, className, ...rest }: SegmentedControlProps): React.JSX.Element;
@@ -1564,6 +1573,14 @@ interface NumberInputProps {
     label?: string;
     help?: string;
     error?: string;
+    /** Element id — lands on the <input> and on the label's `for`. Generated when
+     *  omitted, so `label` is always the input's accessible name either way. */
+    id?: string;
+    /** Names an instance that has no visible `label` — a bare bound inside a range
+     *  row whose heading lives elsewhere. Do not set both: aria-label OUTRANKS the
+     *  associated <label>, so a field carrying both is announced as something other
+     *  than what it visibly says. */
+    "aria-label"?: string;
     prefix?: string;
     suffix?: string;
     required?: boolean;
@@ -1582,7 +1599,7 @@ interface NumberInputProps {
     style?: any;
     className?: string;
 }
-declare function NumberInput({ label, help, error, prefix, suffix, required, disabled, min, max, step, bigStep, value, onChange, format, className, style, placeholder }: NumberInputProps): React.JSX.Element;
+declare function NumberInput({ label, help, error, prefix, suffix, required, disabled, min, max, step, bigStep, value, onChange, format, className, style, placeholder, id, "aria-label": ariaLabel }: NumberInputProps): React.JSX.Element;
 
 /** Rich popover select: animated listbox, keyboard nav + type-ahead, search over 8 options, option icons, descriptions, meta and groups. API-compatible with the old native select. */
 interface SelectOption {
@@ -1616,14 +1633,14 @@ interface SelectProps {
     value?: string | string[];
     /** Called with {target:{value}} like a native select — an array when `multiple`. */
     onChange?: (e: any) => void;
-    name?: string;
     /** Applied to the outer .fd-field element — this is where width belongs. */
     style?: any;
     className?: string;
-    /** Element id — forwarded to the trigger button and the label's htmlFor. Not present on the original .d.ts but required by the source markup. */
+    /** Element id — lands on the trigger button, with the label's own id derived
+     *  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, ...rest }: SelectProps): React.JSX.Element;
+declare function Select({ label, help, error, options, placeholder, required, disabled, loading, value, onChange, searchable, clearable, multiple, summary, id, className, style }: 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 {
@@ -1638,6 +1655,9 @@ interface DatePickerProps {
     /** Called with {target:{value}} — string, or {start,end} in range mode. */
     onChange?: (e: any) => void;
     placeholder?: string;
+    /** Element id — lands on the trigger button, with the label's own id derived
+     *  from it. Generated when omitted, so `label` names the trigger either way. */
+    id?: string;
     style?: any;
     className?: string;
 }
@@ -1650,7 +1670,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, className, style, ...rest }: DatePickerProps): React.JSX.Element;
+declare function DatePicker({ label, help, error, required, disabled, range, value, onChange, placeholder, id, className, style, ...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 {
@@ -1664,6 +1684,9 @@ interface TimePickerProps {
     /** Called with {target:{value}}. */
     onChange?: (e: any) => void;
     placeholder?: string;
+    /** Element id — lands on the trigger button, with the label's own id derived
+     *  from it. Generated when omitted, so `label` names the trigger either way. */
+    id?: string;
     style?: any;
     className?: string;
 }
@@ -1673,7 +1696,7 @@ interface ClockFaceProps {
     onChange: (v: string) => void;
 }
 declare function ClockFace({ value, onChange }: ClockFaceProps): React.JSX.Element;
-declare function TimePicker({ label, help, error, required, disabled, value, onChange, placeholder, className, style }: TimePickerProps): React.JSX.Element;
+declare function TimePicker({ label, help, error, required, disabled, value, onChange, placeholder, id, className, style }: TimePickerProps): React.JSX.Element;
 
 /**
  * Continuous value control. In the media planner this is the reallocation slider:
@@ -1690,9 +1713,16 @@ interface SliderProps {
     format?: (value: number) => string;
     showChip?: boolean;
     help?: string;
+    /** Element id — lands on the range input and on the label's `for`. Generated
+     *  when omitted, so `label` is always the slider's accessible name. */
+    id?: string;
+    /** Names an instance that has no visible `label`. Do not set both: aria-label
+     *  OUTRANKS the associated <label>, so a slider carrying both is announced as
+     *  something other than what it visibly says. */
+    "aria-label"?: string;
     className?: string;
 }
-declare function Slider({ label, min, max, step, value, onChange, format, showChip, help, className, ...rest }: SliderProps): React.JSX.Element;
+declare function Slider({ label, min, max, step, value, onChange, format, showChip, help, id, "aria-label": ariaLabel, className, ...rest }: SliderProps): React.JSX.Element;
 
 /** Dual-thumb range slider: drag either thumb or the rail, value bubbles while dragging or focused, tick marks with labels, optional magnetic snap, keyboard (arrows, shift for 10%, Home/End). */
 interface RangeSliderProps {

package/dist/index.d.ts

@@ -165,6 +165,15 @@ interface SegmentedControlProps {
     }>;
     value?: string;
     onChange?: (value: string) => void;
+    /** Names the group. Each button already names itself from its own text, so the
+     *  buttons were never the gap — the GROUP was: two segmented controls in one
+     *  toolbar both announce as an unnamed group of buttons. There is no visible
+     *  `label` prop because this control is used inline next to the thing it
+     *  switches (a density toggle beside a table, a range toggle beside a chart),
+     *  where a stacked field label would be wrong; aria-label is what names it.
+     *  The rest spread below already forwarded this to the DOM — what was missing
+     *  was any typed way for a caller to pass it. */
+    "aria-label"?: string;
     className?: string;
 }
 declare function SegmentedControl({ options, value, onChange, className, ...rest }: SegmentedControlProps): React.JSX.Element;
@@ -1564,6 +1573,14 @@ interface NumberInputProps {
     label?: string;
     help?: string;
     error?: string;
+    /** Element id — lands on the <input> and on the label's `for`. Generated when
+     *  omitted, so `label` is always the input's accessible name either way. */
+    id?: string;
+    /** Names an instance that has no visible `label` — a bare bound inside a range
+     *  row whose heading lives elsewhere. Do not set both: aria-label OUTRANKS the
+     *  associated <label>, so a field carrying both is announced as something other
+     *  than what it visibly says. */
+    "aria-label"?: string;
     prefix?: string;
     suffix?: string;
     required?: boolean;
@@ -1582,7 +1599,7 @@ interface NumberInputProps {
     style?: any;
     className?: string;
 }
-declare function NumberInput({ label, help, error, prefix, suffix, required, disabled, min, max, step, bigStep, value, onChange, format, className, style, placeholder }: NumberInputProps): React.JSX.Element;
+declare function NumberInput({ label, help, error, prefix, suffix, required, disabled, min, max, step, bigStep, value, onChange, format, className, style, placeholder, id, "aria-label": ariaLabel }: NumberInputProps): React.JSX.Element;
 
 /** Rich popover select: animated listbox, keyboard nav + type-ahead, search over 8 options, option icons, descriptions, meta and groups. API-compatible with the old native select. */
 interface SelectOption {
@@ -1616,14 +1633,14 @@ interface SelectProps {
     value?: string | string[];
     /** Called with {target:{value}} like a native select — an array when `multiple`. */
     onChange?: (e: any) => void;
-    name?: string;
     /** Applied to the outer .fd-field element — this is where width belongs. */
     style?: any;
     className?: string;
-    /** Element id — forwarded to the trigger button and the label's htmlFor. Not present on the original .d.ts but required by the source markup. */
+    /** Element id — lands on the trigger button, with the label's own id derived
+     *  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, ...rest }: SelectProps): React.JSX.Element;
+declare function Select({ label, help, error, options, placeholder, required, disabled, loading, value, onChange, searchable, clearable, multiple, summary, id, className, style }: 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 {
@@ -1638,6 +1655,9 @@ interface DatePickerProps {
     /** Called with {target:{value}} — string, or {start,end} in range mode. */
     onChange?: (e: any) => void;
     placeholder?: string;
+    /** Element id — lands on the trigger button, with the label's own id derived
+     *  from it. Generated when omitted, so `label` names the trigger either way. */
+    id?: string;
     style?: any;
     className?: string;
 }
@@ -1650,7 +1670,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, className, style, ...rest }: DatePickerProps): React.JSX.Element;
+declare function DatePicker({ label, help, error, required, disabled, range, value, onChange, placeholder, id, className, style, ...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 {
@@ -1664,6 +1684,9 @@ interface TimePickerProps {
     /** Called with {target:{value}}. */
     onChange?: (e: any) => void;
     placeholder?: string;
+    /** Element id — lands on the trigger button, with the label's own id derived
+     *  from it. Generated when omitted, so `label` names the trigger either way. */
+    id?: string;
     style?: any;
     className?: string;
 }
@@ -1673,7 +1696,7 @@ interface ClockFaceProps {
     onChange: (v: string) => void;
 }
 declare function ClockFace({ value, onChange }: ClockFaceProps): React.JSX.Element;
-declare function TimePicker({ label, help, error, required, disabled, value, onChange, placeholder, className, style }: TimePickerProps): React.JSX.Element;
+declare function TimePicker({ label, help, error, required, disabled, value, onChange, placeholder, id, className, style }: TimePickerProps): React.JSX.Element;
 
 /**
  * Continuous value control. In the media planner this is the reallocation slider:
@@ -1690,9 +1713,16 @@ interface SliderProps {
     format?: (value: number) => string;
     showChip?: boolean;
     help?: string;
+    /** Element id — lands on the range input and on the label's `for`. Generated
+     *  when omitted, so `label` is always the slider's accessible name. */
+    id?: string;
+    /** Names an instance that has no visible `label`. Do not set both: aria-label
+     *  OUTRANKS the associated <label>, so a slider carrying both is announced as
+     *  something other than what it visibly says. */
+    "aria-label"?: string;
     className?: string;
 }
-declare function Slider({ label, min, max, step, value, onChange, format, showChip, help, className, ...rest }: SliderProps): React.JSX.Element;
+declare function Slider({ label, min, max, step, value, onChange, format, showChip, help, id, "aria-label": ariaLabel, className, ...rest }: SliderProps): React.JSX.Element;
 
 /** Dual-thumb range slider: drag either thumb or the rail, value bubbles while dragging or focused, tick marks with labels, optional magnetic snap, keyboard (arrows, shift for 10%, Home/End). */
 interface RangeSliderProps {