@sensorario/sg-components 0.0.103 → 0.0.105

package/dist/components/AppLauncher/AppLauncher.d.ts

@@ -9,7 +9,7 @@ export type LauncherApp = {
 interface AppLauncherProps {
     /** Endpoint returning `{ apps: LauncherApp[] }` - the enabled apps, managed from Heimdall. */
     appsUrl?: string;
-    /** Accessible name of the grid button - this library has no i18n of its own. */
+    /** Accessible name of the grid button. Default: the translated "App". */
     label?: string;
     /** Logged-in user's JWT: the API then lists only the apps this user may use. */
     token?: string | null;

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,10 @@
+import './Avatar.css';
+interface AvatarProps {
+    src?: string | null;
+    /** Alt text, and its first letter is shown when there's no image. */
+    name?: string | null;
+    size?: number;
+    className?: string;
+}
+export declare const Avatar: ({ src, name, size, className }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
+export default Avatar;

package/dist/components/Avatar/Avatar.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Avatar } from './Avatar';
+declare const meta: Meta<typeof Avatar>;
+export default meta;
+type Story = StoryObj<typeof Avatar>;
+export declare const Initial: Story;
+export declare const Image: Story;
+export declare const Sizes: Story;

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+import './Badge.css';
+export type BadgeTone = 'neutral' | 'accent' | 'success' | 'danger';
+interface BadgeProps {
+    children: ReactNode;
+    tone?: BadgeTone;
+    /** Makes the badge a toggle button (e.g. a pickable tag); `selected` is its pressed state. */
+    onClick?: () => void;
+    selected?: boolean;
+    /** Adds a "×" button, e.g. to take a user off a role. */
+    onRemove?: () => void;
+    /** Accessible name of the "×" button. Default: the translated "Remove". */
+    removeLabel?: string;
+    className?: string;
+}
+export declare const Badge: ({ children, tone, onClick, selected, onRemove, removeLabel, className }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+export default Badge;

package/dist/components/Badge/Badge.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Badge } from './Badge';
+declare const meta: Meta<typeof Badge>;
+export default meta;
+type Story = StoryObj<typeof Badge>;
+export declare const Tones: Story;
+export declare const Selectable: Story;
+export declare const Removable: Story;

package/dist/components/Button/Button.d.ts

@@ -5,6 +5,7 @@ type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
     label: string;
     icon?: IconName;
     iconOnly?: boolean;
+    variant?: 'primary' | 'secondary' | 'danger';
 };
 export declare const Button: React.FC<ButtonProps>;
 export default Button;

package/dist/components/Button/Button.stories.d.ts

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof Button>;
 export default meta;
 type Story = StoryObj<typeof Button>;
 export declare const Default: Story;
+export declare const Variants: Story;

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from 'react';
+import './Card.css';
+interface CardProps {
+    /** Rendered next to each other at the top: title on the left, e.g. a date on the right. */
+    header?: ReactNode;
+    /** Row of links/buttons below the content. */
+    actions?: ReactNode;
+    children?: ReactNode;
+    variant?: 'default' | 'mini';
+    /** Lifts on hover, for cards that are themselves a link or a button. */
+    interactive?: boolean;
+    as?: 'div' | 'li' | 'article' | 'section' | 'a';
+    href?: string;
+    className?: string;
+}
+export declare const Card: ({ header, actions, children, variant, interactive, as, href, className, }: CardProps) => import("react").DetailedReactHTMLElement<{
+    className: string;
+    href: string | undefined;
+}, HTMLElement>;
+export default Card;

package/dist/components/Card/Card.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Card } from './Card';
+declare const meta: Meta<typeof Card>;
+export default meta;
+type Story = StoryObj<typeof Card>;
+export declare const Default: Story;
+export declare const WithHeaderAndActions: Story;
+export declare const Mini: Story;
+export declare const InteractiveLink: Story;

package/dist/components/ConfirmModal/ConfirmModal.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+import './ConfirmModal.css';
+interface ConfirmModalProps {
+    open: boolean;
+    title: string;
+    /** The question, e.g. "This can't be undone." */
+    children?: ReactNode;
+    onConfirm: () => void;
+    /** Also called on Escape, backdrop click and the "×". */
+    onCancel: () => void;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    /** Red confirm button, for destructive actions. */
+    danger?: boolean;
+    icon?: ReactNode;
+}
+export declare const ConfirmModal: ({ open, title, children, onConfirm, onCancel, confirmLabel, cancelLabel, danger, icon, }: ConfirmModalProps) => import("react/jsx-runtime").JSX.Element;
+export default ConfirmModal;

package/dist/components/ConfirmModal/ConfirmModal.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ConfirmModal } from './ConfirmModal';
+declare const meta: Meta<typeof ConfirmModal>;
+export default meta;
+type Story = StoryObj<typeof ConfirmModal>;
+export declare const Default: Story;
+export declare const Danger: Story;

package/dist/components/FormField/FormField.d.ts

@@ -0,0 +1,19 @@
+import { type ReactElement, type ReactNode } from 'react';
+import './FormField.css';
+type ControlProps = {
+    id?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: boolean;
+    invalid?: boolean;
+};
+interface FormFieldProps {
+    label: ReactNode;
+    /** A single control: Input-like element, Textarea, Select, or a native one. */
+    children: ReactElement<ControlProps>;
+    hint?: ReactNode;
+    /** Replaces the hint and marks the control invalid. */
+    error?: ReactNode;
+    className?: string;
+}
+export declare const FormField: ({ label, children, hint, error, className }: FormFieldProps) => import("react/jsx-runtime").JSX.Element;
+export default FormField;

package/dist/components/FormField/FormField.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { FormField } from './FormField';
+declare const meta: Meta<typeof FormField>;
+export default meta;
+type Story = StoryObj<typeof FormField>;
+export declare const Form: Story;

package/dist/components/LanguageSwitcher/LanguageSwitcher.d.ts

@@ -0,0 +1,6 @@
+import './LanguageSwitcher.css';
+interface LanguageSwitcherProps {
+    className?: string;
+}
+export declare const LanguageSwitcher: ({ className }: LanguageSwitcherProps) => import("react/jsx-runtime").JSX.Element;
+export default LanguageSwitcher;

package/dist/components/LanguageSwitcher/LanguageSwitcher.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { LanguageSwitcher } from './LanguageSwitcher';
+declare const meta: Meta<typeof LanguageSwitcher>;
+export default meta;
+export declare const Default: StoryObj<typeof LanguageSwitcher>;

package/dist/components/Modal/Modal.d.ts

@@ -12,6 +12,7 @@ interface ModalProps {
     children: React.ReactNode;
     buttons?: ModalButton[];
     footer?: React.ReactNode;
+    /** Accessible name of the dismiss button. Default: the translated "Close". */
     closeLabel?: string;
     className?: string;
 }

package/dist/components/PasswordInput/PasswordInput.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import './PasswordInput.css';
 type PasswordInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
     label?: string;
+    invalid?: boolean;
 };
 export declare const PasswordInput: React.FC<PasswordInputProps>;
 export default PasswordInput;

package/dist/components/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+import './ProgressBar.css';
+export type ProgressTone = 'accent' | 'success' | 'danger';
+interface ProgressBarProps {
+    value: number;
+    max?: number;
+    /** Shown next to the track, e.g. "3/10" or "120g / 200g". */
+    label?: ReactNode;
+    /** Accessible name when there's no visible label saying what is being measured. */
+    ariaLabel?: string;
+    tone?: ProgressTone;
+    size?: 'sm' | 'md';
+    className?: string;
+}
+export declare const ProgressBar: ({ value, max, label, ariaLabel, tone, size, className, }: ProgressBarProps) => import("react/jsx-runtime").JSX.Element;
+export default ProgressBar;

package/dist/components/ProgressBar/ProgressBar.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ProgressBar } from './ProgressBar';
+declare const meta: Meta<typeof ProgressBar>;
+export default meta;
+type Story = StoryObj<typeof ProgressBar>;
+export declare const Default: Story;
+export declare const Small: Story;
+export declare const Success: Story;
+export declare const Over: Story;
+export declare const WithoutLabel: Story;

package/dist/components/Quadrato/Header/QuadratoHeader.d.ts

@@ -1,4 +1,6 @@
 import './QuadratoHeader.css';
+/** Dispatch on `window` with the new avatar (data URL or null) as `detail` after changing it, so the header updates without a reload. */
+export declare const AVATAR_CHANGE_EVENT = "sg-avatar-change";
 interface QuadratoHeaderProps {
     title?: string;
     homePageKey?: string;

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

@@ -0,0 +1,7 @@
+import type { SelectHTMLAttributes } from 'react';
+import './Select.css';
+type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {
+    invalid?: boolean;
+};
+export declare const Select: ({ invalid, className, children, ...props }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+export default Select;

package/dist/components/StatusMessage/StatusMessage.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import './StatusMessage.css';
+export type StatusKind = 'info' | 'empty' | 'loading' | 'error';
+interface StatusMessageProps {
+    kind?: StatusKind;
+    /** Draws a tinted box around the text instead of plain colored text. */
+    boxed?: boolean;
+    /** Defaults to the translated "Loading…" for `kind="loading"`. */
+    children?: ReactNode;
+    className?: string;
+}
+export declare const StatusMessage: ({ kind, boxed, children, className }: StatusMessageProps) => import("react/jsx-runtime").JSX.Element;
+export default StatusMessage;

package/dist/components/StatusMessage/StatusMessage.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { StatusMessage } from './StatusMessage';
+declare const meta: Meta<typeof StatusMessage>;
+export default meta;
+type Story = StoryObj<typeof StatusMessage>;
+export declare const Loading: Story;
+export declare const Empty: Story;
+export declare const Error: Story;
+export declare const ErrorBoxed: Story;
+export declare const InfoBoxed: Story;

package/dist/components/Table/Table.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import './Table.css';
+declare const meta: Meta;
+export default meta;
+export declare const Default: StoryObj;

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+import './Tabs.css';
+export type TabItem<T extends string | number> = {
+    value: T;
+    label: ReactNode;
+    disabled?: boolean;
+};
+interface TabsProps<T extends string | number> {
+    items: TabItem<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    /** underline: page sections; pills: filters; segmented: a few mutually exclusive views. */
+    variant?: 'underline' | 'pills' | 'segmented';
+    /** Accessible name of the tab list. */
+    ariaLabel?: string;
+    className?: string;
+}
+export declare const Tabs: <T extends string | number>({ items, value, onChange, variant, ariaLabel, className, }: TabsProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default Tabs;

package/dist/components/Tabs/Tabs.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Tabs } from './Tabs';
+declare const meta: Meta<typeof Tabs>;
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+export declare const Underline: Story;
+export declare const Pills: Story;
+export declare const Segmented: Story;

package/dist/components/Textarea/Textarea.d.ts

@@ -0,0 +1,7 @@
+import type { TextareaHTMLAttributes } from 'react';
+import './Textarea.css';
+type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    invalid?: boolean;
+};
+export declare const Textarea: ({ invalid, className, rows, ...props }: TextareaProps) => import("react/jsx-runtime").JSX.Element;
+export default Textarea;

package/dist/components/Toggle/Toggle.d.ts

@@ -1,9 +1,13 @@
-import React from 'react';
+import React, { type ReactNode } from 'react';
 import './Toggle.css';
 export interface ToggleProps {
     checked: boolean;
     onChange: (checked: boolean) => void;
     label: string;
+    /** Shown between the label and the switch, e.g. a preview of what the setting changes. */
+    icons?: ReactNode;
+    /** "row": label on the left, switch on the right, full width - for a list of settings. */
+    layout?: 'inline' | 'row';
 }
 export declare const Toggle: React.FC<ToggleProps>;
 export default Toggle;

package/dist/components/Toggle/Toggle.stories.d.ts

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof Toggle>;
 export default meta;
 type Story = StoryObj<typeof Toggle>;
 export declare const Default: Story;
+export declare const Row: Story;

package/dist/i18n/index.d.ts

@@ -0,0 +1,13 @@
+import { type i18n } from 'i18next';
+export declare const SUPPORTED_LANGUAGES: readonly ["it", "en", "fr", "de", "es", "ja"];
+export type SupportedLanguage = typeof SUPPORTED_LANGUAGES[number];
+export declare const LANGUAGE_NAMES: Record<SupportedLanguage, string>;
+export declare const LANGUAGE_COOKIE = "sg-language";
+export declare const readLanguageCookie: () => SupportedLanguage | null;
+export declare const sgI18n: i18n;
+type AppResources = Partial<Record<SupportedLanguage, Record<string, unknown>>>;
+/** Adds the app's own texts (default namespace) to the shared instance and makes it the one react-i18next hooks use. */
+export declare const createI18n: ({ resources }: {
+    resources: AppResources;
+}) => i18n;
+export {};

package/dist/index.d.ts

@@ -17,3 +17,17 @@ export * from './components/FontPicker/FontPicker';
 export * from './components/Toggle/Toggle';
 export * from './components/AppLauncher/AppLauncher';
 export * from './components/AppAccessGate/AppAccessGate';
+export * from './components/LanguageSwitcher/LanguageSwitcher';
+export { createI18n, sgI18n, SUPPORTED_LANGUAGES, LANGUAGE_NAMES, LANGUAGE_COOKIE, readLanguageCookie } from './i18n';
+export type { SupportedLanguage } from './i18n';
+export * from './components/ProgressBar/ProgressBar';
+export * from './components/StatusMessage/StatusMessage';
+export * from './components/Card/Card';
+export * from './components/Badge/Badge';
+export * from './components/Avatar/Avatar';
+export * from './components/ConfirmModal/ConfirmModal';
+export * from './components/Textarea/Textarea';
+export * from './components/Select/Select';
+export * from './components/FormField/FormField';
+export * from './components/Tabs/Tabs';
+import './components/Table/Table.css';