@jirawatpyk/aura-react 5.7.3 → 5.9.0

package/dist/server/index.d.cts

@@ -1,7 +1,86 @@
 import * as React$1 from 'react';
 
+/** Button look. */
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "creative" | "danger" | "danger-secondary";
+/** `md` 44px (default) · `sm` 32px for toolbars, table rows and card footers (still a 44px hit area on touch screens). */
+export type ButtonSize = "sm" | "md";
+/** AURA pill button. Enterprise (`primary`, `secondary`) for product UI; `creative` for marketing moments only. */
+export interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
+	/** Visual variant. Default `primary`. `ghost` has no fill or edge until hover (toolbars, rows, secondary actions beside a primary). `danger` (filled) and `danger-secondary` (outline) are for irreversible or destructive actions only — typically the confirm button of a `Dialog role="alertdialog"`. */
+	variant?: ButtonVariant | undefined;
+	/** Label text — short, Title Case English or Thai. */
+	children: React$1.ReactNode;
+	/** Leading icon name (see `IconName`). Hidden while loading. */
+	icon?: IconInput | undefined;
+	/** Trailing icon name, e.g. `arrow-right` for forward actions. */
+	iconRight?: IconInput | undefined;
+	/** Shows a spinner in place of the leading icon, sets aria-busy and swallows clicks. Keeps the label and width. */
+	loading?: boolean | undefined;
+	/** Fills its container and lets a long label wrap onto more lines (at least 44px tall) — phones, Thai and Swedish labels. */
+	fullWidth?: boolean | undefined;
+	/** `sm` is 32px with tighter padding, for toolbars, table rows and card footers. Default `md` (44px). */
+	size?: ButtonSize | undefined;
+}
+/** An AURA icon name, or any icon element (e.g. `<Building />` from lucide-react). AURA sizes it and hides it from screen readers. */
+export type IconInput = IconName | React$1.ReactElement;
+export type IconName = "check" | "x" | "plus" | "minus" | "search" | "chevron-down" | "chevron-up" | "chevron-left" | "chevron-right" | "arrow-right" | "arrow-up-right" | "arrow-up-down" | "loader-circle" | "circle-alert" | "circle-check" | "info" | "triangle-alert" | "settings" | "user" | "users" | "filter" | "ellipsis" | "external-link" | "copy" | "trash-2" | "pencil" | "download" | "upload" | "calendar" | "bell" | "menu" | "eye" | "log-out" | "circle" | "circle-dot-dashed" | "ban" | "arrow-up" | "arrow-down" | "inbox" | "pin" | "pin-off" | "eye-off" | "columns-3" | "arrow-left" | "rotate-ccw" | "house" | "layout-dashboard" | "folder" | "chart-column" | "file-text" | "mail" | "lock" | "clock" | "trending-up" | "trending-down" | "image" | "paperclip" | "cloud-upload" | "file" | "sun" | "moon" | "monitor" | "panel-left-close" | "panel-left-open" | "server" | "globe" | "activity" | "shield-alert" | "phone" | "wrench";
+/** Lucide stroke icon drawn inline in currentColor. */
+export interface IconProps {
+	/** A name from the set, or an icon element of your own (sized and styled the same way). */
+	name: IconInput;
+	/** `sm` 16 (default) · `md` 20 · `lg` 24, or a px number. */
+	size?: "sm" | "md" | "lg" | number | undefined;
+	/** Accessible name. Omit for decorative icons next to a text label (then aria-hidden). */
+	label?: string | undefined;
+	/** Default 2 (Lucide's). */
+	strokeWidth?: number | undefined;
+	className?: string | undefined;
+}
 /** `warning` (5.1): needs attention but still works — Warning, Problem, Degraded, At risk. */
 export type StatusTone = "neutral" | "progress" | "ready" | "warning" | "blocked";
+/** Status pill: tone fill + icon + the status word. Tone comes from the word unless given. */
+export interface StatusPillProps extends Omit<React$1.HTMLAttributes<HTMLSpanElement>, "children"> {
+	/** The status word shown, e.g. "In Progress". Other attributes (`id`, `data-*`, `aria-*`) go on the pill (5.8). */
+	children: React$1.ReactNode;
+	/** Force a tone. Default: matched from the word (Ready/Done → ready, In Progress/In Review → progress, Warning/Problem/Degraded/At risk → warning (5.1), Blocked/Failed → blocked, anything else → neutral). */
+	tone?: StatusTone | undefined;
+	className?: string | undefined;
+}
+export type FeedbackTone = "info" | "success" | "warning" | "danger";
+export interface AlertProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title" | "role"> {
+	tone?: FeedbackTone | undefined;
+	/** Default: `alert` for warning and danger, `status` otherwise (5.8). Pass `status` for a standing notice in a
+	 * warning or danger tone that shouldn't interrupt; `note` or `none` for one that isn't a live region. */
+	role?: "alert" | "status" | "note" | "none" | undefined;
+	/** Replaces the tone's icon (5.8): a name or your own element; always hidden from screen readers. */
+	icon?: IconInput | undefined;
+	title?: React$1.ReactNode | undefined;
+	children?: React$1.ReactNode | undefined;
+	/** Usually a secondary Button. */
+	action?: React$1.ReactNode | undefined;
+	/** Adds a close button. */
+	onDismiss?: (() => void) | undefined;
+	className?: string | undefined;
+}
+/** Other attributes (`id`, `data-*`, `aria-*`) go on the card's root (5.8). */
+export interface CardProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "title"> {
+	title?: React$1.ReactNode | undefined;
+	description?: React$1.ReactNode | undefined;
+	/** Top-right, usually an IconButton. */
+	actions?: React$1.ReactNode | undefined;
+	footer?: React$1.ReactNode | undefined;
+	children?: React$1.ReactNode | undefined;
+	/** Default `enterprise`. `creative` is for marketing and onboarding only. */
+	variant?: "enterprise" | "creative" | undefined;
+	/** Heading level of the title. Default 3 — use 2 when cards sit directly under the page h1. */
+	headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
+	/** Hover edge for clickable cards. */
+	interactive?: boolean | undefined;
+	as?: keyof React$1.JSX.IntrinsicElements | undefined;
+	className?: string | undefined;
+	/** id for the title element; the card is then labelled by it (aria-labelledby). */
+	titleId?: string | undefined;
+}
 /** ISO date string, `YYYY-MM-DD` (Gregorian — the era is display only). */
 export type ISODate = string;
 export interface DateDisplayOptions {
@@ -10,6 +89,24 @@ export interface DateDisplayOptions {
 	/** `buddhist` (พ.ศ.; default for th) or `gregory` (ค.ศ.; default for en and sv). */
 	calendar?: "buddhist" | "gregory" | undefined;
 }
+export type Tone = "neutral" | "accent" | "success" | "warning" | "danger";
+export interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
+	tone?: Tone | undefined;
+	/** soft (default) · solid · outline */
+	variant?: "soft" | "solid" | "outline" | undefined;
+	icon?: IconInput | undefined;
+}
+export interface EmptyStateProps {
+	title: React$1.ReactNode;
+	description?: React$1.ReactNode | undefined;
+	icon?: IconInput | undefined;
+	/** One or two buttons. */
+	action?: React$1.ReactNode | undefined;
+	size?: "sm" | "md" | undefined;
+	bordered?: boolean | undefined;
+	headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
+	className?: string | undefined;
+}
 export interface ThemeOptions {
 	/** The project's brand colour, #rgb or #rrggbb. Replaces AURA violet (links, focus ring, selection, info, progress, creative shadow in dark, mesh). */
 	brand: string;
@@ -142,6 +239,12 @@ export interface AuraStrings {
 	pageN: (p: number) => string;
 	accepts: (list?: string, max?: number | string) => string;
 }
+/** Built-in strings by locale. th and sv also ship as packs (`@jirawatpyk/aura-react/locales/th`, `/sv`, 5.9); in 6.0
+ * only en stays built in and a Thai or Swedish app passes its pack to AuraProvider `strings`. */
+/** A whole language for AuraProvider `strings` (5.9): every built-in label, and assignable to the prop. */
+export type AuraLocalePack = AuraStrings & {
+	[key: string]: string | ((...args: any[]) => string);
+};
 export declare const STRINGS: {
 	en: AuraStrings;
 	th: AuraStrings;
@@ -173,8 +276,46 @@ export declare const breakpoints: {
 	lg: 1024;
 	xl: 1280;
 };
+/** One SVG child: element name and its attributes. */
+export type IconShape = [
+	string,
+	Record<string, string>
+];
+/** An AURA icon component from `@jirawatpyk/aura-react/icons` (5.9), e.g. `IconUsers`. */
+export type AuraIcon = React$1.ForwardRefExoticComponent<Omit<IconProps, "name"> & React$1.RefAttributes<SVGSVGElement>> & {
+	/** The icon's path data. */
+	readonly auraShapes: IconShape[];
+	/** Its name in the set, e.g. `users`. */
+	readonly iconName: string;
+};
+/** The class list of a Button (5.8): put it on your own link or `<Link>` to make it look like one, e.g. in a Server
+ * Component — `<Link href="/renew" className={buttonClass({ variant: 'secondary' })}>Renew</Link>`. */
+export declare function buttonClass(opts?: {
+	variant?: ButtonProps["variant"];
+	size?: ButtonProps["size"];
+	fullWidth?: boolean | undefined;
+	loading?: boolean | undefined;
+	className?: string | undefined;
+}): string;
+declare function ServerAlert(props: Omit<AlertProps, "onDismiss">): React$1.ReactElement;
+declare function ServerCard(props: CardProps): React$1.ReactElement;
+declare function ServerStatusPill(props: StatusPillProps): React$1.ReactElement;
+declare function ServerBadge(props: BadgeProps): React$1.ReactElement;
+declare function ServerEmptyState(props: EmptyStateProps): React$1.ReactElement;
+/** Makes icon names as strings work: `registerIcons(allIcons)` once at startup, with `allIcons` from
+ * `@jirawatpyk/aura-react/icons`, or only the icons you use (`registerIcons([IconUsers, IconPlus])`). In 5.x every
+ * name already works and this only says you are ready for 6.0 (it silences the notice); in 6.0 it is required. Call it in the module
+ * graph that renders the names: a client module for the components, and also a server module if Server Components
+ * render names with `/server`'s Icon (the two entries keep separate registries). */
+export declare function registerIcons(icons: readonly AuraIcon[]): void;
+export declare const Icon: React$1.ForwardRefExoticComponent<IconProps & React$1.RefAttributes<SVGSVGElement>>;
 
 export {
+	ServerAlert as Alert,
+	ServerBadge as Badge,
+	ServerCard as Card,
+	ServerEmptyState as EmptyState,
+	ServerStatusPill as StatusPill,
 	scale as brandScale,
 	toneFor as statusTone,
 };

package/dist/server/index.d.ts

@@ -1,7 +1,86 @@
 import * as React$1 from 'react';
 
+/** Button look. */
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "creative" | "danger" | "danger-secondary";
+/** `md` 44px (default) · `sm` 32px for toolbars, table rows and card footers (still a 44px hit area on touch screens). */
+export type ButtonSize = "sm" | "md";
+/** AURA pill button. Enterprise (`primary`, `secondary`) for product UI; `creative` for marketing moments only. */
+export interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
+	/** Visual variant. Default `primary`. `ghost` has no fill or edge until hover (toolbars, rows, secondary actions beside a primary). `danger` (filled) and `danger-secondary` (outline) are for irreversible or destructive actions only — typically the confirm button of a `Dialog role="alertdialog"`. */
+	variant?: ButtonVariant | undefined;
+	/** Label text — short, Title Case English or Thai. */
+	children: React$1.ReactNode;
+	/** Leading icon name (see `IconName`). Hidden while loading. */
+	icon?: IconInput | undefined;
+	/** Trailing icon name, e.g. `arrow-right` for forward actions. */
+	iconRight?: IconInput | undefined;
+	/** Shows a spinner in place of the leading icon, sets aria-busy and swallows clicks. Keeps the label and width. */
+	loading?: boolean | undefined;
+	/** Fills its container and lets a long label wrap onto more lines (at least 44px tall) — phones, Thai and Swedish labels. */
+	fullWidth?: boolean | undefined;
+	/** `sm` is 32px with tighter padding, for toolbars, table rows and card footers. Default `md` (44px). */
+	size?: ButtonSize | undefined;
+}
+/** An AURA icon name, or any icon element (e.g. `<Building />` from lucide-react). AURA sizes it and hides it from screen readers. */
+export type IconInput = IconName | React$1.ReactElement;
+export type IconName = "check" | "x" | "plus" | "minus" | "search" | "chevron-down" | "chevron-up" | "chevron-left" | "chevron-right" | "arrow-right" | "arrow-up-right" | "arrow-up-down" | "loader-circle" | "circle-alert" | "circle-check" | "info" | "triangle-alert" | "settings" | "user" | "users" | "filter" | "ellipsis" | "external-link" | "copy" | "trash-2" | "pencil" | "download" | "upload" | "calendar" | "bell" | "menu" | "eye" | "log-out" | "circle" | "circle-dot-dashed" | "ban" | "arrow-up" | "arrow-down" | "inbox" | "pin" | "pin-off" | "eye-off" | "columns-3" | "arrow-left" | "rotate-ccw" | "house" | "layout-dashboard" | "folder" | "chart-column" | "file-text" | "mail" | "lock" | "clock" | "trending-up" | "trending-down" | "image" | "paperclip" | "cloud-upload" | "file" | "sun" | "moon" | "monitor" | "panel-left-close" | "panel-left-open" | "server" | "globe" | "activity" | "shield-alert" | "phone" | "wrench";
+/** Lucide stroke icon drawn inline in currentColor. */
+export interface IconProps {
+	/** A name from the set, or an icon element of your own (sized and styled the same way). */
+	name: IconInput;
+	/** `sm` 16 (default) · `md` 20 · `lg` 24, or a px number. */
+	size?: "sm" | "md" | "lg" | number | undefined;
+	/** Accessible name. Omit for decorative icons next to a text label (then aria-hidden). */
+	label?: string | undefined;
+	/** Default 2 (Lucide's). */
+	strokeWidth?: number | undefined;
+	className?: string | undefined;
+}
 /** `warning` (5.1): needs attention but still works — Warning, Problem, Degraded, At risk. */
 export type StatusTone = "neutral" | "progress" | "ready" | "warning" | "blocked";
+/** Status pill: tone fill + icon + the status word. Tone comes from the word unless given. */
+export interface StatusPillProps extends Omit<React$1.HTMLAttributes<HTMLSpanElement>, "children"> {
+	/** The status word shown, e.g. "In Progress". Other attributes (`id`, `data-*`, `aria-*`) go on the pill (5.8). */
+	children: React$1.ReactNode;
+	/** Force a tone. Default: matched from the word (Ready/Done → ready, In Progress/In Review → progress, Warning/Problem/Degraded/At risk → warning (5.1), Blocked/Failed → blocked, anything else → neutral). */
+	tone?: StatusTone | undefined;
+	className?: string | undefined;
+}
+export type FeedbackTone = "info" | "success" | "warning" | "danger";
+export interface AlertProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title" | "role"> {
+	tone?: FeedbackTone | undefined;
+	/** Default: `alert` for warning and danger, `status` otherwise (5.8). Pass `status` for a standing notice in a
+	 * warning or danger tone that shouldn't interrupt; `note` or `none` for one that isn't a live region. */
+	role?: "alert" | "status" | "note" | "none" | undefined;
+	/** Replaces the tone's icon (5.8): a name or your own element; always hidden from screen readers. */
+	icon?: IconInput | undefined;
+	title?: React$1.ReactNode | undefined;
+	children?: React$1.ReactNode | undefined;
+	/** Usually a secondary Button. */
+	action?: React$1.ReactNode | undefined;
+	/** Adds a close button. */
+	onDismiss?: (() => void) | undefined;
+	className?: string | undefined;
+}
+/** Other attributes (`id`, `data-*`, `aria-*`) go on the card's root (5.8). */
+export interface CardProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "title"> {
+	title?: React$1.ReactNode | undefined;
+	description?: React$1.ReactNode | undefined;
+	/** Top-right, usually an IconButton. */
+	actions?: React$1.ReactNode | undefined;
+	footer?: React$1.ReactNode | undefined;
+	children?: React$1.ReactNode | undefined;
+	/** Default `enterprise`. `creative` is for marketing and onboarding only. */
+	variant?: "enterprise" | "creative" | undefined;
+	/** Heading level of the title. Default 3 — use 2 when cards sit directly under the page h1. */
+	headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
+	/** Hover edge for clickable cards. */
+	interactive?: boolean | undefined;
+	as?: keyof React$1.JSX.IntrinsicElements | undefined;
+	className?: string | undefined;
+	/** id for the title element; the card is then labelled by it (aria-labelledby). */
+	titleId?: string | undefined;
+}
 /** ISO date string, `YYYY-MM-DD` (Gregorian — the era is display only). */
 export type ISODate = string;
 export interface DateDisplayOptions {
@@ -10,6 +89,24 @@ export interface DateDisplayOptions {
 	/** `buddhist` (พ.ศ.; default for th) or `gregory` (ค.ศ.; default for en and sv). */
 	calendar?: "buddhist" | "gregory" | undefined;
 }
+export type Tone = "neutral" | "accent" | "success" | "warning" | "danger";
+export interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
+	tone?: Tone | undefined;
+	/** soft (default) · solid · outline */
+	variant?: "soft" | "solid" | "outline" | undefined;
+	icon?: IconInput | undefined;
+}
+export interface EmptyStateProps {
+	title: React$1.ReactNode;
+	description?: React$1.ReactNode | undefined;
+	icon?: IconInput | undefined;
+	/** One or two buttons. */
+	action?: React$1.ReactNode | undefined;
+	size?: "sm" | "md" | undefined;
+	bordered?: boolean | undefined;
+	headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
+	className?: string | undefined;
+}
 export interface ThemeOptions {
 	/** The project's brand colour, #rgb or #rrggbb. Replaces AURA violet (links, focus ring, selection, info, progress, creative shadow in dark, mesh). */
 	brand: string;
@@ -142,6 +239,12 @@ export interface AuraStrings {
 	pageN: (p: number) => string;
 	accepts: (list?: string, max?: number | string) => string;
 }
+/** Built-in strings by locale. th and sv also ship as packs (`@jirawatpyk/aura-react/locales/th`, `/sv`, 5.9); in 6.0
+ * only en stays built in and a Thai or Swedish app passes its pack to AuraProvider `strings`. */
+/** A whole language for AuraProvider `strings` (5.9): every built-in label, and assignable to the prop. */
+export type AuraLocalePack = AuraStrings & {
+	[key: string]: string | ((...args: any[]) => string);
+};
 export declare const STRINGS: {
 	en: AuraStrings;
 	th: AuraStrings;
@@ -173,8 +276,46 @@ export declare const breakpoints: {
 	lg: 1024;
 	xl: 1280;
 };
+/** One SVG child: element name and its attributes. */
+export type IconShape = [
+	string,
+	Record<string, string>
+];
+/** An AURA icon component from `@jirawatpyk/aura-react/icons` (5.9), e.g. `IconUsers`. */
+export type AuraIcon = React$1.ForwardRefExoticComponent<Omit<IconProps, "name"> & React$1.RefAttributes<SVGSVGElement>> & {
+	/** The icon's path data. */
+	readonly auraShapes: IconShape[];
+	/** Its name in the set, e.g. `users`. */
+	readonly iconName: string;
+};
+/** The class list of a Button (5.8): put it on your own link or `<Link>` to make it look like one, e.g. in a Server
+ * Component — `<Link href="/renew" className={buttonClass({ variant: 'secondary' })}>Renew</Link>`. */
+export declare function buttonClass(opts?: {
+	variant?: ButtonProps["variant"];
+	size?: ButtonProps["size"];
+	fullWidth?: boolean | undefined;
+	loading?: boolean | undefined;
+	className?: string | undefined;
+}): string;
+declare function ServerAlert(props: Omit<AlertProps, "onDismiss">): React$1.ReactElement;
+declare function ServerCard(props: CardProps): React$1.ReactElement;
+declare function ServerStatusPill(props: StatusPillProps): React$1.ReactElement;
+declare function ServerBadge(props: BadgeProps): React$1.ReactElement;
+declare function ServerEmptyState(props: EmptyStateProps): React$1.ReactElement;
+/** Makes icon names as strings work: `registerIcons(allIcons)` once at startup, with `allIcons` from
+ * `@jirawatpyk/aura-react/icons`, or only the icons you use (`registerIcons([IconUsers, IconPlus])`). In 5.x every
+ * name already works and this only says you are ready for 6.0 (it silences the notice); in 6.0 it is required. Call it in the module
+ * graph that renders the names: a client module for the components, and also a server module if Server Components
+ * render names with `/server`'s Icon (the two entries keep separate registries). */
+export declare function registerIcons(icons: readonly AuraIcon[]): void;
+export declare const Icon: React$1.ForwardRefExoticComponent<IconProps & React$1.RefAttributes<SVGSVGElement>>;
 
 export {
+	ServerAlert as Alert,
+	ServerBadge as Badge,
+	ServerCard as Card,
+	ServerEmptyState as EmptyState,
+	ServerStatusPill as StatusPill,
 	scale as brandScale,
 	toneFor as statusTone,
 };