@sensorario/sg-components 0.0.104 → 0.0.106

package/dist/auth/index.d.ts

@@ -0,0 +1,10 @@
+export declare const ACCESS_TOKEN_COOKIE = "simonegentili.com-access-token";
+/** `domain` and `secure` only where the browser honors them: otherwise it drops the whole cookie (e.g. http://localhost). */
+export declare const cookieScope: () => string;
+export declare const writeCookie: (name: string, value: string, maxAgeSeconds: number, sameSite?: "strict" | "lax") => void;
+/** The JWT shared by every .simonegentili.com app, or null when logged out. */
+export declare const getAccessToken: (cookieName?: string) => string | null;
+export declare const setAccessToken: (token: string, maxAgeSeconds?: number, cookieName?: string) => void;
+export declare const clearAccessToken: (cookieName?: string) => void;
+/** Reads one claim of the token payload without verifying it (the API does that). Default: the username. */
+export declare const getTokenClaim: (token?: string | null, claim?: string) => string | null;

package/dist/components/AuthPage/AuthPage.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import './AuthPage.css';
+interface AuthPageProps {
+    title: ReactNode;
+    children?: ReactNode;
+    /** Links under the card, e.g. back to the home page (router-specific, so the app passes it). */
+    footer?: ReactNode;
+    className?: string;
+}
+export declare const AuthPage: ({ title, children, footer, className }: AuthPageProps) => import("react/jsx-runtime").JSX.Element;
+export default AuthPage;

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

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

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/LoginPrompt/LoginPrompt.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import './LoginPrompt.css';
+interface LoginPromptProps {
+    /** What logging in unlocks, e.g. "Accedi per vedere le sessioni." */
+    children?: ReactNode;
+    /** Shows a login button, e.g. `() => headerRef.current?.openLoginModal()`. */
+    onLogin?: () => void;
+    /** Extra content under the button, e.g. a link to the registration page. */
+    footer?: ReactNode;
+    className?: string;
+}
+export declare const LoginPrompt: ({ children, onLogin, footer, className }: LoginPromptProps) => import("react/jsx-runtime").JSX.Element;
+export default LoginPrompt;

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

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

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/RegisterForm/RegisterForm.d.ts

@@ -0,0 +1,9 @@
+import './RegisterForm.css';
+interface RegisterFormProps {
+    /** Calls the app's register endpoint; a thrown Error's message is shown to the user. */
+    onRegister: (email: string) => Promise<void>;
+    /** Called after a successful registration instead of showing the "check your email" message, e.g. to navigate. */
+    onRegistered?: (email: string) => void;
+}
+export declare const RegisterForm: ({ onRegister, onRegistered }: RegisterFormProps) => import("react/jsx-runtime").JSX.Element;
+export default RegisterForm;

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/components/VersionNumber/VersionNumber.d.ts

@@ -0,0 +1,8 @@
+import './VersionNumber.css';
+interface VersionNumberProps {
+    /** Usually the app's own __APP_VERSION__, defined in its vite.config. */
+    version: string;
+    className?: string;
+}
+export declare const VersionNumber: ({ version, className }: VersionNumberProps) => import("react/jsx-runtime").JSX.Element;
+export default VersionNumber;

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

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

package/dist/index.d.ts

@@ -20,3 +20,19 @@ 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';
+export * from './components/VersionNumber/VersionNumber';
+export * from './components/LoginPrompt/LoginPrompt';
+export * from './components/AuthPage/AuthPage';
+export * from './components/RegisterForm/RegisterForm';
+export { ACCESS_TOKEN_COOKIE, getAccessToken, setAccessToken, clearAccessToken, getTokenClaim } from './auth';