@idyeah/diya 0.0.0 → 1.0.0

package/dist/page-header/PageHeader.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from 'react';
+import { cx } from '../internal/cx.js';
+/** A page's heading block with optional breadcrumbs, description, tags, actions and tabs. Data and actions belong to the host app. Optional slots reserve no empty space. */
+export const PageHeader = forwardRef(function PageHeader({ title, headingLevel = 2, breadcrumbs, description, tags, actions, navigation, surface = true, className, ...props }, ref) {
+    const headingId = useId();
+    const Heading = `h${headingLevel}`;
+    return _jsxs("section", { ...props, ref: ref, className: cx('diya-page-header', className), "data-surface": surface, "aria-labelledby": props['aria-labelledby'] ?? headingId, children: [breadcrumbs && _jsx("div", { className: "diya-page-header-breadcrumbs", children: breadcrumbs }), _jsxs("div", { className: "diya-page-header-main", children: [_jsxs("div", { className: "diya-page-header-copy", children: [_jsx(Heading, { id: headingId, children: title }), description && _jsx("div", { className: "diya-page-header-description", children: description }), tags && _jsx("div", { className: "diya-page-header-tags", children: tags })] }), actions && _jsx("div", { className: "diya-page-header-actions", children: actions })] }), navigation && _jsx("div", { className: "diya-page-header-navigation", children: navigation })] });
+});

package/dist/pagination/Pagination.d.ts

@@ -0,0 +1,44 @@
+import { type HTMLAttributes } from 'react';
+import { paginationMessages } from './messages.js';
+declare module '../messages.js' {
+    interface DiyaMessages {
+        pagination: typeof paginationMessages;
+    }
+}
+export type PaginationProps = HTMLAttributes<HTMLDivElement> & {
+    /** Current page, starting at 1; clamped to the pages that exist. */
+    page: number;
+    /** Total number of items across all pages, not the number of pages. */
+    total: number;
+    /** Items per page. */
+    pageSize: number;
+    /** Called with the 1-based page a person picks. */
+    onPageChange: (page: number) => void;
+    /** When given, shows a "Per page" select and is called with the new size. */
+    onPageSizeChange?: (size: number) => void;
+    /** Sizes offered by the "Per page" select; the current `pageSize` is always included. Defaults to `[10, 25, 50]`. */
+    pageSizeOptions?: number[];
+    /** Shows the visible range, such as "11–20 of 42", announced as a status. Defaults to true. */
+    showCount?: boolean;
+    /** Shows numbered page buttons between Previous and Next, with gaps for long runs. Defaults to true. */
+    showNumbers?: boolean;
+};
+/** Previous / Next page controls with optional page numbers, a range count and a page-size select; narrow spaces get arrow buttons. The ref, `className`, `style` and other attributes go to the outer element. */
+export declare const Pagination: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    /** Current page, starting at 1; clamped to the pages that exist. */
+    page: number;
+    /** Total number of items across all pages, not the number of pages. */
+    total: number;
+    /** Items per page. */
+    pageSize: number;
+    /** Called with the 1-based page a person picks. */
+    onPageChange: (page: number) => void;
+    /** When given, shows a "Per page" select and is called with the new size. */
+    onPageSizeChange?: (size: number) => void;
+    /** Sizes offered by the "Per page" select; the current `pageSize` is always included. Defaults to `[10, 25, 50]`. */
+    pageSizeOptions?: number[];
+    /** Shows the visible range, such as "11–20 of 42", announced as a status. Defaults to true. */
+    showCount?: boolean;
+    /** Shows numbered page buttons between Previous and Next, with gaps for long runs. Defaults to true. */
+    showNumbers?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/pagination/Pagination.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Select } from '../select/Select.js';
+import { Button } from '../button/Button.js';
+import { useDiyaMessages } from '../DiyaProvider.js';
+import { cx } from '../internal/cx.js';
+import { paginationMessages } from './messages.js';
+const chevron = (path) => _jsx("svg", { className: "diya-pagination-chevron", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: _jsx("path", { d: path }) });
+/** Previous / Next page controls with optional page numbers, a range count and a page-size select; narrow spaces get arrow buttons. The ref, `className`, `style` and other attributes go to the outer element. */
+export const Pagination = forwardRef(function Pagination({ page, total, pageSize, onPageChange, onPageSizeChange, pageSizeOptions = [10, 25, 50], showCount = true, showNumbers = true, className, ...props }, ref) {
+    const t = useDiyaMessages('pagination', paginationMessages);
+    const count = Math.max(0, Math.floor(total));
+    const size = Math.max(1, Math.floor(pageSize));
+    const pages = Math.max(1, Math.ceil(count / size));
+    const current = Math.max(1, Math.min(pages, page));
+    const visible = Array.from(new Set([1, pages, current - 1, current, current + 1].filter((n) => n >= 1 && n <= pages))).sort((a, b) => a - b);
+    const cells = [];
+    visible.forEach((n, i) => { if (i && n - visible[i - 1] > 1) {
+        if (n - visible[i - 1] === 2)
+            cells.push(n - 1);
+        else
+            cells.push(`gap-${n}`);
+    } ; cells.push(n); });
+    return _jsxs("div", { ...props, ref: ref, className: cx('diya-pagination', className), children: [showCount && _jsx("p", { className: "diya-pagination-count", role: "status", children: count ? t.range((current - 1) * size + 1, Math.min(current * size, count), count) : t.noResults }), _jsxs("nav", { "aria-label": t.label, "data-cells": showNumbers ? cells.length : undefined, children: [_jsxs(Button, { size: "small", variant: "quiet", shape: "pill", disabled: current === 1 || count === 0, onClick: () => onPageChange(current - 1), children: [chevron('m15 5-7 7 7 7'), _jsx("span", { className: "diya-pagination-step", children: t.previous })] }), showNumbers && cells.map((cell) => typeof cell === 'string' ? _jsx("span", { className: "diya-pagination-gap", "aria-hidden": "true", children: "\u2026" }, cell) : _jsx(Button, { size: "small", variant: current === cell ? 'solid' : 'quiet', shape: "pill", "aria-label": t.page(cell), "aria-current": current === cell ? 'page' : undefined, "data-far": Math.abs(cell - current) > 1 || undefined, disabled: count === 0, onClick: () => onPageChange(cell), children: cell }, cell)), _jsxs(Button, { size: "small", variant: "quiet", shape: "pill", disabled: current === pages || count === 0, onClick: () => onPageChange(current + 1), children: [_jsx("span", { className: "diya-pagination-step", children: t.next }), chevron('m9 5 7 7-7 7')] })] }), onPageSizeChange && _jsxs("div", { className: "diya-pagination-size", children: [_jsx("span", { children: t.perPage }), _jsx(Select, { label: t.resultsPerPage, hideLabel: true, size: "small", value: String(size), onValueChange: value => onPageSizeChange(Number(value)), options: Array.from(new Set([...pageSizeOptions, size])).sort((a, b) => a - b).map(n => ({ value: String(n), label: String(n) })) })] })] });
+});

package/dist/pagination/messages.d.ts

@@ -0,0 +1,11 @@
+/** pagination: English defaults, overridable through DiyaProvider `messages`. */
+export declare const paginationMessages: {
+    label: string;
+    previous: string;
+    next: string;
+    perPage: string;
+    resultsPerPage: string;
+    page: (page: number) => string;
+    range: (start: number, end: number, total: number) => string;
+    noResults: string;
+};

package/dist/pagination/messages.js

@@ -0,0 +1,2 @@
+/** pagination: English defaults, overridable through DiyaProvider `messages`. */
+export const paginationMessages = { label: 'Pagination', previous: 'Previous', next: 'Next', perPage: 'Per page', resultsPerPage: 'Results per page', page: (page) => `Page ${page}`, range: (start, end, total) => `${start}–${end} of ${total}`, noResults: '0 results' };

package/dist/popover/Popover.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from 'react';
+import { type FloatingTriggerProps } from '../overlay/FloatingSurface.js';
+export type PopoverProps = FloatingTriggerProps & {
+    /** The trigger button's visible text and the panel's accessible name; with `trigger`, only the panel's name. */
+    label: string;
+    /** Preferred side for the panel; it moves to stay on screen. Defaults to 'bottom'. */
+    placement?: 'top' | 'bottom';
+    /** Disables the trigger and closes an open panel. */
+    disabled?: boolean;
+    /** The panel's content, or a function that renders it; call `close` to shut it and return focus to the trigger. */
+    children: ReactNode | ((close: () => void) => ReactNode);
+};
+/** A button that opens a small panel of interactive content beside it; `className`, `style`, other attributes and the ref go to the trigger. */
+export declare const Popover: import("react").ForwardRefExoticComponent<FloatingTriggerProps & {
+    /** The trigger button's visible text and the panel's accessible name; with `trigger`, only the panel's name. */
+    label: string;
+    /** Preferred side for the panel; it moves to stay on screen. Defaults to 'bottom'. */
+    placement?: "top" | "bottom";
+    /** Disables the trigger and closes an open panel. */
+    disabled?: boolean;
+    /** The panel's content, or a function that renders it; call `close` to shut it and return focus to the trigger. */
+    children: ReactNode | ((close: () => void) => ReactNode);
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/popover/Popover.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { FloatingSurface } from '../overlay/FloatingSurface.js';
+/** A button that opens a small panel of interactive content beside it; `className`, `style`, other attributes and the ref go to the trigger. */
+export const Popover = forwardRef(function Popover({ label, placement = 'bottom', disabled = false, children, ...props }, ref) {
+    return _jsx(FloatingSurface, { ...props, ref: ref, label: label, placement: placement, disabled: disabled, children: children });
+});

package/dist/progress/Progress.d.ts

@@ -0,0 +1,33 @@
+import { type HTMLAttributes } from 'react';
+import { progressMessages } from './messages.js';
+declare module '../messages.js' {
+    interface DiyaMessages {
+        progress: typeof progressMessages;
+    }
+}
+/** Without a `value`, progress is indeterminate: working, amount unknown. */
+export type ProgressProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** Percent complete, 0–100 (clamped); omit it for indeterminate progress. */
+    value?: number;
+    /** 'linear' is a bar; 'circular' is a ring. Defaults to 'linear'. */
+    variant?: 'linear' | 'circular';
+    /** Forces indeterminate progress even when `value` is set. */
+    indeterminate?: boolean;
+    /** Shows the rounded percentage beside the meter, visually only; hidden while indeterminate. Defaults to true. */
+    showValue?: boolean;
+    /** Accessible name for the progress bar, such as 'Uploading report'; not shown. */
+    label: string;
+};
+/** A bar or ring showing how much of a task is done, or that work is under way. */
+export declare const Progress: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** Percent complete, 0–100 (clamped); omit it for indeterminate progress. */
+    value?: number;
+    /** 'linear' is a bar; 'circular' is a ring. Defaults to 'linear'. */
+    variant?: "linear" | "circular";
+    /** Forces indeterminate progress even when `value` is set. */
+    indeterminate?: boolean;
+    /** Shows the rounded percentage beside the meter, visually only; hidden while indeterminate. Defaults to true. */
+    showValue?: boolean;
+    /** Accessible name for the progress bar, such as 'Uploading report'; not shown. */
+    label: string;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/progress/Progress.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useDiyaLocale, useDiyaMessages } from '../DiyaProvider.js';
+import { cx } from '../internal/cx.js';
+import { progressMessages } from './messages.js';
+/** A bar or ring showing how much of a task is done, or that work is under way. */
+export const Progress = forwardRef(function Progress({ value, variant = 'linear', indeterminate: forced = false, showValue = true, label, className, ...props }, ref) {
+    const t = useDiyaMessages('progress', progressMessages);
+    const locale = useDiyaLocale();
+    const indeterminate = forced || value === undefined || !Number.isFinite(value);
+    const amount = indeterminate ? 0 : Math.min(100, Math.max(0, value));
+    return _jsxs("div", { ...props, ref: ref, className: cx('diya-progress', className), "data-variant": variant, "data-indeterminate": indeterminate, children: [_jsx("div", { className: "diya-progress-meter", role: "progressbar", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": indeterminate ? undefined : amount, "aria-valuetext": indeterminate ? t.inProgress : undefined, children: variant === 'linear' ? _jsx("div", { className: "diya-progress-track", children: _jsx("span", { style: { width: indeterminate ? '35%' : `${amount}%` } }) }) : _jsxs("svg", { viewBox: "0 0 100 100", "aria-hidden": "true", children: [_jsx("circle", { className: "diya-progress-track-circle", cx: "50", cy: "50", r: "42" }), _jsx("circle", { className: "diya-progress-fill-circle", cx: "50", cy: "50", r: "42", pathLength: "100", strokeDasharray: "100", strokeDashoffset: indeterminate ? 72 : 100 - amount })] }) }), showValue && !indeterminate && _jsx("span", { className: "diya-progress-value", "aria-hidden": "true", children: new Intl.NumberFormat(locale, { style: 'percent', maximumFractionDigits: 0 }).format(Math.round(amount) / 100) })] });
+});

package/dist/progress/messages.d.ts

@@ -0,0 +1,4 @@
+/** progress: English defaults, overridable through DiyaProvider `messages`. */
+export declare const progressMessages: {
+    inProgress: string;
+};

package/dist/progress/messages.js

@@ -0,0 +1,2 @@
+/** progress: English defaults, overridable through DiyaProvider `messages`. */
+export const progressMessages = { inProgress: 'In progress' };

package/dist/prose/Prose.d.ts

@@ -0,0 +1,14 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type ProseProps = HTMLAttributes<HTMLDivElement> & {
+    /** Your own HTML content: headings, paragraphs, links, lists, quotes, code, tables and images. Rendered HTML can come in through `dangerouslySetInnerHTML` instead. */
+    children?: ReactNode;
+    /** Text size, with headings, tables and captions in step: 'small' (15px) for writing inside an app, such as a drawer or a card; 'medium' (17px) for articles and docs pages; 'large' (20px) for long reads. Defaults to 'medium'. */
+    size?: 'small' | 'medium' | 'large';
+};
+/** Gives the plain HTML inside it DIYA's type and rhythm, for articles, docs pages, changelogs and legal pages. DIYA components placed inside keep their own styles. Needs no provider context, so it renders in Server Components. */
+export declare const Prose: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    /** Your own HTML content: headings, paragraphs, links, lists, quotes, code, tables and images. Rendered HTML can come in through `dangerouslySetInnerHTML` instead. */
+    children?: ReactNode;
+    /** Text size, with headings, tables and captions in step: 'small' (15px) for writing inside an app, such as a drawer or a card; 'medium' (17px) for articles and docs pages; 'large' (20px) for long reads. Defaults to 'medium'. */
+    size?: "small" | "medium" | "large";
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/prose/Prose.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cx } from '../internal/cx.js';
+/** Gives the plain HTML inside it DIYA's type and rhythm, for articles, docs pages, changelogs and legal pages. DIYA components placed inside keep their own styles. Needs no provider context, so it renders in Server Components. */
+export const Prose = forwardRef(function Prose({ size = 'medium', className, children, ...props }, ref) {
+    return _jsx("div", { ...props, ref: ref, className: cx('diya-prose', className), "data-size": size, children: children });
+});

package/dist/rating/Rating.d.ts

@@ -0,0 +1,32 @@
+import { type HTMLAttributes } from 'react';
+import { ratingMessages } from './messages.js';
+declare module '../messages.js' {
+    interface DiyaMessages {
+        rating: typeof ratingMessages;
+    }
+}
+export type RatingProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
+    /** The rating, from 0 to `max`. Values outside that range are clamped, and one that isn't a number shows as 0. The stars fill to the nearest half (4.3 shows four and a half); the number and the accessible name keep one decimal. */
+    value: number;
+    /** How many stars: a whole number from 1 to 10. Defaults to 5. */
+    max?: number;
+    /** How many reviews the rating comes from, shown after the stars as '(128)' and announced as '128 reviews'. Leave it out to show the stars alone. */
+    count?: number;
+    /** Shows the value as a number before the stars, such as '4.3'. Defaults to false. */
+    showValue?: boolean;
+    /** Star and text size. Defaults to 'medium'. */
+    size?: 'small' | 'medium' | 'large';
+};
+/** A read-only star rating, with an optional number and review count, announced as one phrase such as "Rated 4.3 out of 5, 128 reviews". */
+export declare const Rating: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLSpanElement>, "children"> & {
+    /** The rating, from 0 to `max`. Values outside that range are clamped, and one that isn't a number shows as 0. The stars fill to the nearest half (4.3 shows four and a half); the number and the accessible name keep one decimal. */
+    value: number;
+    /** How many stars: a whole number from 1 to 10. Defaults to 5. */
+    max?: number;
+    /** How many reviews the rating comes from, shown after the stars as '(128)' and announced as '128 reviews'. Leave it out to show the stars alone. */
+    count?: number;
+    /** Shows the value as a number before the stars, such as '4.3'. Defaults to false. */
+    showValue?: boolean;
+    /** Star and text size. Defaults to 'medium'. */
+    size?: "small" | "medium" | "large";
+} & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/rating/Rating.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useDiyaLocale, useDiyaMessages } from '../DiyaProvider.js';
+import { cx } from '../internal/cx.js';
+import { ratingMessages } from './messages.js';
+// A five-point star with softened corners in a 24-unit box, and its left half. A half
+// star draws the half over an empty star, so no seam shows down the middle.
+const STAR = 'M11.25 2.24Q12 .6 12.75 2.24L15.14 7.4Q15.55 8.31 16.55 8.43L22.2 9.1Q23.98 9.31 22.66 10.53L18.49 14.39Q17.75 15.07 17.95 16.05L19.06 21.63Q19.41 23.4 17.84 22.52L12.87 19.74Q12 19.25 11.13 19.74L6.16 22.52Q4.59 23.4 4.94 21.63L6.05 16.05Q6.25 15.07 5.51 14.39L1.34 10.53Q.02 9.31 1.8 9.1L7.45 8.43Q8.45 8.31 8.86 7.4Z';
+const HALF = 'M12 19.5Q11.56 19.5 11.13 19.74L6.16 22.52Q4.59 23.4 4.94 21.63L6.05 16.05Q6.25 15.07 5.51 14.39L1.34 10.53Q.02 9.31 1.8 9.1L7.45 8.43Q8.45 8.31 8.86 7.4L11.25 2.24Q11.62 1.42 12 1.42Z';
+/** A read-only star rating, with an optional number and review count, announced as one phrase such as "Rated 4.3 out of 5, 128 reviews". */
+export const Rating = forwardRef(function Rating({ value, max = 5, count, showValue = false, size = 'medium', className, ...props }, ref) {
+    const t = useDiyaMessages('rating', ratingMessages);
+    const locale = useDiyaLocale();
+    const stars = Number.isFinite(max) ? Math.min(10, Math.max(1, Math.round(max))) : 5;
+    const number = Number(value);
+    // One decimal is what people read and hear; the stars round that to the nearest half.
+    const rated = Math.round((Number.isNaN(number) ? 0 : Math.min(stars, Math.max(0, number))) * 10) / 10;
+    const filled = Math.round(rated * 2) / 2;
+    const reviews = typeof count === 'number' && Number.isFinite(count) ? Math.max(0, Math.floor(count)) : undefined;
+    const whole = new Intl.NumberFormat(locale);
+    const spoken = t.rated(new Intl.NumberFormat(locale, { maximumFractionDigits: 1 }).format(rated), whole.format(stars));
+    return _jsxs("span", { role: "img", ...props, ref: ref, className: cx('diya-rating', className), "data-size": size, "aria-label": reviews === undefined ? spoken : `${spoken}, ${t.reviews(reviews, whole.format(reviews))}`, children: [showValue && _jsx("span", { className: "diya-rating-value", "aria-hidden": "true", children: new Intl.NumberFormat(locale, { minimumFractionDigits: 1, maximumFractionDigits: 1 }).format(rated) }), _jsx("span", { className: "diya-rating-stars", "aria-hidden": "true", children: Array.from({ length: stars }, (_, index) => {
+                    const fill = Math.min(1, Math.max(0, filled - index));
+                    return _jsxs("svg", { viewBox: "0 0 24 24", width: "16", height: "16", "data-fill": fill === 1 ? 'full' : fill ? 'half' : 'empty', children: [fill < 1 && _jsx("path", { className: "diya-rating-empty", d: STAR }), fill > 0 && _jsx("path", { d: fill === 1 ? STAR : HALF })] }, index);
+                }) }), reviews !== undefined && _jsx("span", { className: "diya-rating-count", "aria-hidden": "true", children: t.count(whole.format(reviews)) })] });
+});

package/dist/rating/messages.d.ts

@@ -0,0 +1,6 @@
+/** rating: English defaults, overridable through DiyaProvider `messages`. */
+export declare const ratingMessages: {
+    rated: (value: string, max: string) => string;
+    reviews: (count: number, formatted: string) => string;
+    count: (formatted: string) => string;
+};

package/dist/rating/messages.js

@@ -0,0 +1,2 @@
+/** rating: English defaults, overridable through DiyaProvider `messages`. */
+export const ratingMessages = { rated: (value, max) => `Rated ${value} out of ${max}`, reviews: (count, formatted) => `${formatted} ${count === 1 ? 'review' : 'reviews'}`, count: (formatted) => `(${formatted})` };

package/dist/search/Search.d.ts

@@ -0,0 +1,11 @@
+import { type TextInputProps } from '../text-input/TextInput.js';
+/** TextInput's props, with the search type and magnifier icon built in. */
+export type SearchProps = Omit<TextInputProps, 'type' | 'leadingIcon'> & {
+    /** Corner style of the field; defaults to 'rounded', the same corners as every other control. 'pill' is fully round. */
+    shape?: 'rounded' | 'pill';
+};
+/** A search field: a TextInput with type="search" and a magnifier icon. */
+export declare const Search: import("react").ForwardRefExoticComponent<Omit<TextInputProps, "type" | "leadingIcon"> & {
+    /** Corner style of the field; defaults to 'rounded', the same corners as every other control. 'pill' is fully round. */
+    shape?: "rounded" | "pill";
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/search/Search.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cx } from '../internal/cx.js';
+import { TextInput } from '../text-input/TextInput.js';
+/** A search field: a TextInput with type="search" and a magnifier icon. */
+export const Search = forwardRef(function Search({ shape = 'rounded', className, ...props }, ref) {
+    return _jsx(TextInput, { ...props, ref: ref, className: cx('diya-search', `diya-search-${shape}`, className), type: "search", leadingIcon: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: [_jsx("circle", { cx: "10.5", cy: "10.5", r: "6.5" }), _jsx("path", { d: "m16 16 5 5" })] }) });
+});

package/dist/select/Select.d.ts

@@ -0,0 +1,65 @@
+import { type ReactNode, type SelectHTMLAttributes } from 'react';
+import { selectMessages } from './messages.js';
+declare module '../messages.js' {
+    interface DiyaMessages {
+        select: typeof selectMessages;
+    }
+}
+export type SelectOption = {
+    /** The value reported when this option is chosen; unique within the list. */
+    value: string;
+    /** Visible option text. */
+    label: string;
+    /** Shows the option but stops it being chosen. */
+    disabled?: boolean;
+};
+/** A native single select. Native attributes, including `name`, `onChange(event)`, `onBlur` and the ref, go on the select; `className` and `style` go on the outer field wrapper. */
+export type SelectProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size' | 'children' | 'multiple' | 'value' | 'defaultValue'> & {
+    /** Visible label above the select; also its accessible name. Hide it with hideLabel. */
+    label: string;
+    /** Hides the label visually but keeps it as the select's accessible name. */
+    hideLabel?: boolean;
+    /** Visible hint below the select, announced with it; `error` replaces it while set. */
+    helperText?: string;
+    /** Visible error message below the select; marks the field invalid while set. */
+    error?: string;
+    /** Control height and type size; defaults to 'medium'. */
+    size?: 'small' | 'medium' | 'large';
+    /** Visible text of the empty, unselectable first option, shown while value is ''; defaults to the `select.placeholder` message. */
+    placeholder?: string;
+    /** Decorative icon inside the select's start edge; hidden from assistive tech. */
+    leadingIcon?: ReactNode;
+    /** The chosen option's value, or '' for none, when controlled; pair it with `onValueChange`. */
+    value?: string;
+    /** The initially chosen value when uncontrolled; defaults to '' (the placeholder), and a form reset returns to it. */
+    defaultValue?: string;
+    /** The choices, in display order. */
+    options: SelectOption[];
+    /** Called with the chosen option's value, like every other DIYA field. The native `onChange` still works. */
+    onValueChange?: (value: string) => void;
+};
+/** A labeled native dropdown for choosing one option; pair `value` with `onValueChange`. */
+export declare const Select: import("react").ForwardRefExoticComponent<Omit<SelectHTMLAttributes<HTMLSelectElement>, "value" | "children" | "size" | "multiple" | "defaultValue"> & {
+    /** Visible label above the select; also its accessible name. Hide it with hideLabel. */
+    label: string;
+    /** Hides the label visually but keeps it as the select's accessible name. */
+    hideLabel?: boolean;
+    /** Visible hint below the select, announced with it; `error` replaces it while set. */
+    helperText?: string;
+    /** Visible error message below the select; marks the field invalid while set. */
+    error?: string;
+    /** Control height and type size; defaults to 'medium'. */
+    size?: "small" | "medium" | "large";
+    /** Visible text of the empty, unselectable first option, shown while value is ''; defaults to the `select.placeholder` message. */
+    placeholder?: string;
+    /** Decorative icon inside the select's start edge; hidden from assistive tech. */
+    leadingIcon?: ReactNode;
+    /** The chosen option's value, or '' for none, when controlled; pair it with `onValueChange`. */
+    value?: string;
+    /** The initially chosen value when uncontrolled; defaults to '' (the placeholder), and a form reset returns to it. */
+    defaultValue?: string;
+    /** The choices, in display order. */
+    options: SelectOption[];
+    /** Called with the chosen option's value, like every other DIYA field. The native `onChange` still works. */
+    onValueChange?: (value: string) => void;
+} & import("react").RefAttributes<HTMLSelectElement>>;

package/dist/select/Select.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from 'react';
+import { useDiyaMessages } from '../DiyaProvider.js';
+import { cx } from '../internal/cx.js';
+import { selectMessages } from './messages.js';
+/** A labeled native dropdown for choosing one option; pair `value` with `onValueChange`. */
+export const Select = forwardRef(function Select({ label, hideLabel = false, helperText, error, size = 'medium', placeholder, leadingIcon, options, id, disabled, className, style, value, defaultValue, onChange, onValueChange, 'aria-invalid': ariaInvalid, 'aria-describedby': describedBy, ...props }, ref) {
+    const generated = useId();
+    const t = useDiyaMessages('select', selectMessages);
+    const fieldId = id ?? generated;
+    const description = error || helperText;
+    const descriptionId = `${fieldId}-description`;
+    return (_jsxs("div", { className: cx('diya-text-field diya-select-field', className), style: style, "data-size": size, "data-disabled": disabled || undefined, "data-invalid": !!error || undefined, children: [_jsx("label", { htmlFor: fieldId, className: hideLabel ? 'diya-sr-only' : undefined, children: label }), _jsxs("div", { className: "diya-select-control", children: [leadingIcon && (_jsx("span", { className: "diya-select-leading", "aria-hidden": "true", children: leadingIcon })), _jsxs("select", { ...props, ref: ref, id: fieldId, ...(value !== undefined ? { value } : { defaultValue: defaultValue ?? '' }), disabled: disabled, onChange: (event) => {
+                            onChange?.(event);
+                            onValueChange?.(event.target.value);
+                        }, "aria-invalid": error ? true : ariaInvalid, "aria-describedby": [describedBy, description ? descriptionId : undefined].filter(Boolean).join(' ') ||
+                            undefined, children: [_jsx("option", { value: "", disabled: true, children: placeholder ?? t.placeholder }), options.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)))] }), _jsx("svg", { className: "diya-select-chevron", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: _jsx("path", { d: "m6 9 6 6 6-6" }) })] }), description && (_jsxs("p", { id: descriptionId, className: "diya-text-field-description", children: [error && _jsx("span", { "aria-hidden": "true", children: "!" }), description] }))] }));
+});

package/dist/select/messages.d.ts

@@ -0,0 +1,4 @@
+/** select: English defaults, overridable through DiyaProvider `messages`. */
+export declare const selectMessages: {
+    placeholder: string;
+};

package/dist/select/messages.js

@@ -0,0 +1,2 @@
+/** select: English defaults, overridable through DiyaProvider `messages`. */
+export const selectMessages = { placeholder: 'Choose an option' };

package/dist/site-header/SiteHeader.d.ts

@@ -0,0 +1,88 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { siteHeaderMessages } from './messages.js';
+declare module '../messages.js' {
+    interface DiyaMessages {
+        siteHeader: typeof siteHeaderMessages;
+    }
+}
+export type SiteHeaderItem = {
+    /** Stable key; matched against the header's `value` and passed to `onValueChange`. */
+    value: string;
+    /** Visible link text. */
+    label: string;
+    /** Renders a real link through the provider's `linkComponent`; plain clicks call `onValueChange` instead of navigating when it is given. */
+    href?: string;
+    /** Shows the item but prevents choosing it. */
+    disabled?: boolean;
+};
+export type SiteHeaderProps = HTMLAttributes<HTMLDivElement> & {
+    /** Logo or product name at the start of the header. */
+    brand: ReactNode;
+    /** Accessible name of the brand link or button (not shown); defaults to "Home". */
+    brandLabel?: string;
+    /** Makes the brand a link to this URL, through the provider's `linkComponent`. */
+    brandHref?: string;
+    /** Makes the brand a button that calls this, when there is no `brandHref`. */
+    onBrandClick?: () => void;
+    /** Top-level navigation links; they collapse into a menu button when space runs out. */
+    items?: SiteHeaderItem[];
+    /** The current item's `value`; it is marked as the current page. */
+    value?: string;
+    /** Called with an item's `value` when it is chosen; routing belongs to the caller. */
+    onValueChange?: (value: string) => void;
+    /** Accessible name for the navigation landmark (not shown); defaults to "Main navigation". */
+    navigationLabel?: string;
+    /** Adds a search field; the caller owns its text. */
+    search?: {
+        /** The search field's text. */
+        value: string;
+        /** Called with the new text on every keystroke. */
+        onValueChange: (value: string) => void;
+        /** Called with the text when the person presses Enter. */
+        onSubmit?: (value: string) => void;
+        /** Accessible name for the field and search landmark (not shown); defaults to "Search". */
+        label?: string;
+        /** Placeholder text; defaults to "Search". */
+        placeholder?: string;
+    };
+    /** Slot for icon buttons such as notifications or help, before the avatar. */
+    utilities?: ReactNode;
+    /** Slot at the end for the account avatar or its menu. */
+    avatar?: ReactNode;
+};
+/** A responsive top bar with brand, navigation, search and utilities that collapses its links into a menu when space runs out. The ref, `className`, `style` and other attributes go to the outer container. */
+export declare const SiteHeader: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    /** Logo or product name at the start of the header. */
+    brand: ReactNode;
+    /** Accessible name of the brand link or button (not shown); defaults to "Home". */
+    brandLabel?: string;
+    /** Makes the brand a link to this URL, through the provider's `linkComponent`. */
+    brandHref?: string;
+    /** Makes the brand a button that calls this, when there is no `brandHref`. */
+    onBrandClick?: () => void;
+    /** Top-level navigation links; they collapse into a menu button when space runs out. */
+    items?: SiteHeaderItem[];
+    /** The current item's `value`; it is marked as the current page. */
+    value?: string;
+    /** Called with an item's `value` when it is chosen; routing belongs to the caller. */
+    onValueChange?: (value: string) => void;
+    /** Accessible name for the navigation landmark (not shown); defaults to "Main navigation". */
+    navigationLabel?: string;
+    /** Adds a search field; the caller owns its text. */
+    search?: {
+        /** The search field's text. */
+        value: string;
+        /** Called with the new text on every keystroke. */
+        onValueChange: (value: string) => void;
+        /** Called with the text when the person presses Enter. */
+        onSubmit?: (value: string) => void;
+        /** Accessible name for the field and search landmark (not shown); defaults to "Search". */
+        label?: string;
+        /** Placeholder text; defaults to "Search". */
+        placeholder?: string;
+    };
+    /** Slot for icon buttons such as notifications or help, before the avatar. */
+    utilities?: ReactNode;
+    /** Slot at the end for the account avatar or its menu. */
+    avatar?: ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;