@getsoren/design-system 4.83.3 → 4.84.0

package/dist/src/components/Inputs/Counter/Counter.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { InvalidColor } from '../../../utils/getInvalidColor';
+export interface CounterProps {
+    label: ReactNode;
+    /** Secondary line under the label */
+    description?: ReactNode;
+    value: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    onChange: (value: number) => void;
+    /** Suffix after the value, e.g. "h" */
+    unit?: string;
+    error?: boolean;
+    /** Palette of the helper text when in error */
+    errorColor?: InvalidColor;
+    helperText?: ReactNode;
+    disabled?: boolean;
+    /** Test id of the row; its parts get the `-minus`, `-value` and `-plus` suffixes */
+    testId?: string;
+}
+/** A labelled row with a value stepped by a minus and a plus button */
+declare const Counter: ({ label, description, value, min, max, step, onChange, unit, error, errorColor, helperText, disabled, testId, }: CounterProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default Counter;

package/dist/src/components/Inputs/PillGroup/PillGroup.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import { InvalidColor } from '../../../utils/getInvalidColor';
+export interface PillOption {
+    value: string;
+    label: ReactNode;
+    /** Leading visual, sized by the consumer (18px reads well) */
+    icon?: ReactNode;
+}
+interface PillGroupBaseProps {
+    options: PillOption[];
+    /** Draws the pills in the invalid colour */
+    error?: boolean;
+    /** Palette of the invalid state and of the helper text */
+    errorColor?: InvalidColor;
+    helperText?: ReactNode;
+    "aria-label"?: string;
+    disabled?: boolean;
+}
+export interface PillGroupSingleProps extends PillGroupBaseProps {
+    multiple?: false;
+    value?: string | null;
+    /** Called with the tapped option, even when it is already selected: clearing is the consumer's call */
+    onChange: (value: string) => void;
+}
+export interface PillGroupMultipleProps extends PillGroupBaseProps {
+    multiple: true;
+    value?: string[];
+    /** Called with the selection after the tapped option was added or removed */
+    onChange: (values: string[]) => void;
+}
+export type PillGroupProps = PillGroupSingleProps | PillGroupMultipleProps;
+/** Short options as pills: a radio group, or a checkbox group when `multiple` */
+declare const PillGroup: (props: PillGroupProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default PillGroup;

package/dist/src/components/Inputs/TextFieldGroup/TextFieldGroup.d.ts

@@ -0,0 +1,19 @@
+import { SxProps, Theme } from '@mui/material';
+import { PropsWithChildren } from 'react';
+import { InvalidColor } from '../../../utils/getInvalidColor';
+export interface TextFieldGroupProps extends PropsWithChildren {
+    /** `row` puts two short fields side by side */
+    direction?: "column" | "row";
+    /** Draws the frame in the invalid colour; the helper text belongs to the consumer */
+    error?: boolean;
+    /** Palette of the invalid frame */
+    errorColor?: InvalidColor;
+    sx?: SxProps<Theme>;
+}
+/**
+ * One frame around several filled TextFields: hairlines between them, the outer corners on the first and
+ * the last one. The fields lose their own border, and the focused one draws its ring over the frame.
+ * Every child is a field (or a wrapper holding one, such as an Autocomplete): a helper text goes under the group.
+ */
+declare const TextFieldGroup: ({ children, direction, error, errorColor, sx }: TextFieldGroupProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default TextFieldGroup;

package/dist/src/locales/en.d.ts

@@ -7,9 +7,11 @@ declare const _default: {
     closed: string;
     collapseSidebar: string;
     day: string;
+    decrement: string;
     escape: string;
     expandSidebar: string;
     files: string;
+    increment: string;
     month: string;
     noResult: string;
     oops: string;

package/dist/src/locales/fr.d.ts

@@ -7,9 +7,11 @@ declare const _default: {
     closed: string;
     collapseSidebar: string;
     day: string;
+    decrement: string;
     escape: string;
     expandSidebar: string;
     files: string;
+    increment: string;
     month: string;
     noResult: string;
     oops: string;

package/dist/src/main.d.ts

@@ -82,10 +82,14 @@ export * from './components/Inputs/ChipFilter/ChipFilter';
 export { default as ChipFilter } from './components/Inputs/ChipFilter/ChipFilter';
 export * from './components/Inputs/ChipQuantityEditor/ChipQuantityEditor';
 export { default as ChipQuantityEditor } from './components/Inputs/ChipQuantityEditor/ChipQuantityEditor';
+export * from './components/Inputs/Counter/Counter';
+export { default as Counter } from './components/Inputs/Counter/Counter';
 export * from './components/Inputs/CountryAutocomplete/CountryAutocomplete';
 export { default as CountryAutocomplete } from './components/Inputs/CountryAutocomplete/CountryAutocomplete';
 export * from './components/Inputs/File/File';
 export { default as File } from './components/Inputs/File/File';
+export * from './components/Inputs/PillGroup/PillGroup';
+export { default as PillGroup } from './components/Inputs/PillGroup/PillGroup';
 export * from './components/Inputs/QuantityField/QuantityField';
 export { default as QuantityField } from './components/Inputs/QuantityField/QuantityField';
 export * from './components/Inputs/TextArea/TextArea';
@@ -94,6 +98,8 @@ export * from './components/Inputs/TextFieldAppBar/TextFieldAppBar';
 export { default as TextFieldAppBar } from './components/Inputs/TextFieldAppBar/TextFieldAppBar';
 export * from './components/Inputs/TextFieldAutosize/TextFieldAutosize';
 export { default as TextFieldAutosize } from './components/Inputs/TextFieldAutosize/TextFieldAutosize';
+export * from './components/Inputs/TextFieldGroup/TextFieldGroup';
+export { default as TextFieldGroup } from './components/Inputs/TextFieldGroup/TextFieldGroup';
 export * from './components/Inputs/TextFieldPassword/TextFieldPassword';
 export { default as TextFieldPassword } from './components/Inputs/TextFieldPassword/TextFieldPassword';
 export * from './components/Layout/Backoffice/Backoffice';
@@ -136,6 +142,7 @@ export { default as useTabs } from './hooks/useTabs/useTabs';
 export type { DataAttributes } from './types/dataAttributes';
 export * from './utils/getBackgroundImageElevation';
 export { default as getBackgroundImageElevation } from './utils/getBackgroundImageElevation';
+export type { InvalidColor } from './utils/getInvalidColor';
 export { default as isoToEmojiFlag } from './utils/isoToEmojiFlag';
 export { default as pickDataAttributes } from './utils/pickDataAttributes';
 export * from './utils/pxToRem';

package/dist/src/utils/getInvalidColor.d.ts

@@ -0,0 +1,5 @@
+import { Theme } from '@mui/material';
+export type InvalidColor = "error" | "warning";
+/** Colour of an invalid control: the error palette, or the softer warning one for an answer still to be given */
+declare const getInvalidColor: (theme: Theme, color?: InvalidColor) => string;
+export default getInvalidColor;

package/dist/src/utils/getOutlineColor.d.ts

@@ -0,0 +1,4 @@
+import { Theme } from '@mui/material';
+/** Resting border of a control: grey 400 in light mode, the translucent outline of the dark palette otherwise */
+declare const getOutlineColor: (theme: Theme) => string;
+export default getOutlineColor;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@getsoren/design-system",
   "description": "Design System React library",
   "sideEffects": false,
-  "version": "4.83.3",
+  "version": "4.84.0",
   "license": "ISC",
   "type": "module",
   "types": "./dist/src/main.d.ts",