@hemerson/design-system 0.7.0 → 0.9.0

package/dist/components/BarChart/BarChart.d.ts

@@ -0,0 +1,34 @@
+import { type ReactNode } from "react";
+export type ChartTone = "accent" | "secondary" | "success" | "warning" | "danger" | "neutral";
+export interface ChartSeries {
+    name: string;
+    /** Default: accent, then secondary, warning and so on, in order. */
+    tone?: ChartTone;
+}
+export interface ChartDatum {
+    label: string;
+    /** One value per series, in the same order. */
+    values: number[];
+}
+export interface BarChartProps {
+    /** Names the chart: shown above it and used as the accessible name. */
+    title: ReactNode;
+    data: ChartDatum[];
+    /** One series by default; several stack in each bar, with a legend. */
+    series?: ChartSeries[];
+    /** `vertical`: bars rise from a baseline, for time. `horizontal`: one row per label, for rankings. Default `vertical`. */
+    orientation?: "vertical" | "horizontal";
+    /** How values read in labels and in the data table. Default: the number in pt-BR. */
+    formatValue?: (value: number) => string;
+    /** Shown instead of the bars when there is no data. Default "Nada para mostrar.". */
+    empty?: ReactNode;
+    /** Height of the bar area in vertical charts, in px. Default 200. */
+    height?: number;
+    className?: string;
+}
+/**
+ * Bars for comparing a few values: a vertical chart over time, or a horizontal ranking.
+ * Several series stack in each bar. The bars are drawn for sighted users and hidden from
+ * screen readers, which get the same numbers as a table.
+ */
+export declare function BarChart({ title, data, series, orientation, formatValue, empty, height, className, }: BarChartProps): import("react").JSX.Element;

package/dist/components/DateInput/DateInput.d.ts

@@ -19,9 +19,11 @@ export interface DateInputProps extends Omit<InputHTMLAttributes<HTMLInputElemen
     calendarLabel?: string;
     previousMonthLabel?: string;
     nextMonthLabel?: string;
+    /** Keeps the label for screen readers only, e.g. for a field inside a table cell. */
+    hideLabel?: boolean;
 }
 /**
  * A date field: type day/month/year, or pick from a glass calendar. The value is "yyyy-mm-dd",
  * and with `name` a hidden input carries it, so forms read it like a native date input.
  */
-export declare function DateInput({ label, value, defaultValue, onChange, min, max, hint, error, locale, weekStartsOn, calendarLabel, previousMonthLabel, nextMonthLabel, name, id, disabled, required, placeholder, className, ...rest }: DateInputProps): import("react").JSX.Element;
+export declare function DateInput({ label, value, defaultValue, onChange, min, max, hint, error, locale, weekStartsOn, calendarLabel, previousMonthLabel, nextMonthLabel, hideLabel, name, id, disabled, required, placeholder, className, ...rest }: DateInputProps): import("react").JSX.Element;

package/dist/components/Input/Input.d.ts

@@ -1,5 +1,7 @@
 import { type InputHTMLAttributes, type ReactNode } from "react";
 export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    /** Keeps the label for screen readers only, e.g. for a field inside a table cell. */
+    hideLabel?: boolean;
     /** Always visible, written as a noun ("Beneficiário"). */
     label: ReactNode;
     hint?: ReactNode;

package/dist/components/Select/Select.d.ts

@@ -5,6 +5,8 @@ export interface SelectOption {
     disabled?: boolean;
 }
 export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+    /** Keeps the label for screen readers only, e.g. for a field inside a table cell. */
+    hideLabel?: boolean;
     label: ReactNode;
     options: SelectOption[];
     /** Shown as a disabled first option. */

package/dist/components/Typeahead/Typeahead.d.ts

@@ -13,8 +13,10 @@ export interface TypeaheadProps extends Omit<InputHTMLAttributes<HTMLInputElemen
     error?: ReactNode;
     /** Locale for matching without case. Default "pt-BR". */
     locale?: string;
+    /** Keeps the label for screen readers only, e.g. for a field inside a table cell. */
+    hideLabel?: boolean;
 }
 /** The suggestions that contain the text, those that start with it first. */
 export declare function matchSuggestions(suggestions: string[], text: string, locale?: string, max?: number): string[];
 /** A text field that suggests values as you type, in a glass list. Free text is still allowed. */
-export declare function Typeahead({ label, value, defaultValue, onChange, suggestions, maxSuggestions, hint, error, locale, id, className, disabled, ...rest }: TypeaheadProps): import("react").JSX.Element;
+export declare function Typeahead({ label, value, defaultValue, onChange, suggestions, maxSuggestions, hint, error, locale, hideLabel, id, className, disabled, ...rest }: TypeaheadProps): import("react").JSX.Element;

package/dist/index.d.ts

@@ -24,6 +24,8 @@ export { Select } from "./components/Select/Select";
 export { DateInput } from "./components/DateInput/DateInput";
 export type { DateInputProps } from "./components/DateInput/DateInput";
 export { Typeahead } from "./components/Typeahead/Typeahead";
+export { BarChart } from "./components/BarChart/BarChart";
+export type { BarChartProps, ChartDatum, ChartSeries, ChartTone } from "./components/BarChart/BarChart";
 export type { TypeaheadProps } from "./components/Typeahead/Typeahead";
 export type { SelectOption, SelectProps } from "./components/Select/Select";
 export { Checkbox } from "./components/Checkbox/Checkbox";