@idyeah/diya 0.0.0 → 1.0.0

package/dist/DiyaProvider.js

@@ -0,0 +1,77 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext, useMemo, useState, useSyncExternalStore } from 'react';
+import { LinkComponentContext } from './internal/link.js';
+import { cx } from './internal/cx.js';
+import { resolveBrand } from './internal/brand.js';
+/** DIYA Sans ships with the stylesheet; a metric-matched Arial covers the moment before it loads. */
+export const DEFAULT_FONT_FAMILY = '"DIYA Sans", "DIYA Sans Fallback", Arial, sans-serif';
+const DEFAULT_BRAND = resolveBrand(undefined);
+const PortalContext = createContext(null);
+const AppearanceContext = createContext({ theme: 'light', glass: false, fontFamily: DEFAULT_FONT_FAMILY, brand: DEFAULT_BRAND.light });
+export function useDiyaPortal() { return useContext(PortalContext); }
+/** The nearest provider's resolved theme, Glass, font and brand accent. */
+export function useDiyaAppearance() { return useContext(AppearanceContext); }
+const MessagesContext = createContext({ overrides: {} });
+/** A nested provider adds to its parent's strings; a key set to undefined keeps the inherited one. */
+function mergeMessages(parent, own) {
+    if (!own)
+        return parent;
+    const out = { ...parent };
+    for (const [component, strings] of Object.entries(own)) {
+        if (!strings)
+            continue;
+        const kept = Object.fromEntries(Object.entries(strings).filter(([, value]) => value !== undefined));
+        out[component] = { ...(out[component] ?? {}), ...kept };
+    }
+    return out;
+}
+/** A component's built-in strings, with any provider overrides applied. */
+export function useDiyaMessages(component, defaults) {
+    const override = useContext(MessagesContext).overrides[component];
+    // Cast through object: a bundle without translatable components has an empty map.
+    return useMemo(() => (override ? { ...defaults, ...override } : defaults), [defaults, override]);
+}
+/** BCP 47 locale for dates and numbers. */
+export function useDiyaLocale() { return useContext(MessagesContext).locale ?? 'en-US'; }
+// theme="system" is pure CSS (prefers-color-scheme); this only tells JavaScript which one won.
+const DARK_QUERY = '(prefers-color-scheme: dark)';
+const media = () => (typeof window !== 'undefined' && typeof window.matchMedia === 'function' ? window.matchMedia(DARK_QUERY) : undefined);
+function subscribeToScheme(onChange) {
+    const query = media();
+    query?.addEventListener?.('change', onChange);
+    return () => query?.removeEventListener?.('change', onChange);
+}
+const ignoreScheme = () => () => { };
+const prefersDark = () => media()?.matches ?? false;
+const serverPrefersDark = () => false;
+/** Scoped appearance; no document mutation, cookies, network calls or global CSS. */
+export const DiyaProvider = forwardRef(function DiyaProvider({ children, theme = 'system', surface = true, glass = false, brandColor, fontFamily = DEFAULT_FONT_FAMILY, messages, locale, linkComponent, className, style, ...rest }, ref) {
+    const [portal, setPortal] = useState(null);
+    const parent = useContext(MessagesContext);
+    const parentLink = useContext(LinkComponentContext);
+    const text = useMemo(() => ({ overrides: mergeMessages(parent.overrides, messages), locale: locale ?? parent.locale }), [parent, messages, locale]);
+    const dark = useSyncExternalStore(theme === 'system' ? subscribeToScheme : ignoreScheme, prefersDark, serverPrefersDark);
+    const resolved = theme === 'system' ? (dark ? 'dark' : 'light') : theme;
+    const brandKey = typeof brandColor === 'object' ? `${brandColor.light}|${brandColor.dark}` : brandColor;
+    const brand = useMemo(() => (brandColor === undefined ? DEFAULT_BRAND : resolveBrand(brandColor)), [brandKey]);
+    const appearance = useMemo(() => ({ theme: resolved, glass, fontFamily, brand: brand[resolved] }), [resolved, glass, fontFamily, brand]);
+    const tokens = {
+        '--diya-font': fontFamily,
+        ...accentVariables(brand),
+        ...style,
+    };
+    return _jsx("div", { ...rest, ref: ref, className: cx('diya-root', className), "data-theme": theme, "data-glass": String(glass), "data-surface": String(surface), style: tokens, children: _jsx(AppearanceContext.Provider, { value: appearance, children: _jsx(MessagesContext.Provider, { value: text, children: _jsxs(PortalContext.Provider, { value: portal, children: [_jsx(LinkComponentContext.Provider, { value: linkComponent ?? parentLink, children: children }), _jsx("div", { className: "diya-portal-root", ref: setPortal })] }) }) }) });
+});
+/** Both themes' accent tokens as private variables; styles.css picks the pair for the theme in effect. */
+function accentVariables(brand) {
+    const out = {};
+    for (const theme of ['light', 'dark']) {
+        const { accent, accentText, accentSoft, accentInk } = brand[theme];
+        out[`--diya-internal-accent-${theme}`] = accent;
+        out[`--diya-internal-accent-text-${theme}`] = accentText;
+        out[`--diya-internal-accent-soft-${theme}`] = accentSoft;
+        out[`--diya-internal-accent-ink-${theme}`] = accentInk;
+    }
+    return out;
+}

package/dist/Icon.d.ts

@@ -0,0 +1,10 @@
+import type { CSSProperties } from 'react';
+/** A decorative line icon from a small built-in set; hidden from screen readers. */
+export declare function Icon({ name, size, style, }: {
+    /** Icon name, such as 'search', 'close' or 'download'; unknown names draw 'grid'. */
+    name: string;
+    /** Width and height in pixels. Defaults to 18. */
+    size?: number;
+    /** Inline styles on the svg. */
+    style?: CSSProperties;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/Icon.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/** A decorative line icon from a small built-in set; hidden from screen readers. */
+export function Icon({ name, size = 18, style, }) {
+    const paths = {
+        paperclip: _jsx("path", { d: "m21 11-8 8a6 6 0 0 1-8-8l9-9a4 4 0 0 1 6 6l-9 9a2 2 0 0 1-3-3l8-8" }),
+        'chevron-down': _jsx("path", { d: "m6 9 6 6 6-6" }),
+        download: _jsx("path", { d: "M12 3v12m-4-4 4 4 4-4M4 16v5h16v-5" }),
+        search: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "10.5", cy: "10.5", r: "6.5" }), _jsx("path", { d: "m16 16 4 4" })] })),
+        grid: (_jsxs(_Fragment, { children: [_jsx("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1.5" }), _jsx("rect", { x: "14", y: "3", width: "7", height: "7", rx: "1.5" }), _jsx("rect", { x: "3", y: "14", width: "7", height: "7", rx: "1.5" }), _jsx("rect", { x: "14", y: "14", width: "7", height: "7", rx: "1.5" })] })),
+        layers: (_jsx(_Fragment, { children: _jsx("path", { d: "m12 3 9 5-9 5-9-5 9-5Zm-9 9 9 5 9-5M3 16l9 5 9-5" }) })),
+        bookmark: _jsx("path", { d: "M6 4h12v17l-6-4-6 4V4Z" }),
+        arrow: _jsx("path", { d: "M4 12h16m-6-6 6 6-6 6" }),
+        close: _jsx("path", { d: "m6 6 12 12M6 18 18 6" }),
+        sun: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "4" }), _jsx("path", { d: "M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1 1m12 12 1 1M5 19l1-1M18 6l1-1" })] })),
+        moon: _jsx("path", { d: "M20 14A8 8 0 0 1 10 4a8 8 0 1 0 10 10Z" }),
+        system: (_jsxs(_Fragment, { children: [_jsx("rect", { x: "3", y: "4", width: "18", height: "12", rx: "2" }), _jsx("path", { d: "M8 21h8m-4-5v5" })] })),
+        filter: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M4 7h16M4 17h16" }), _jsx("circle", { cx: "9", cy: "7", r: "2" }), _jsx("circle", { cx: "15", cy: "17", r: "2" })] })),
+        plus: _jsx("path", { d: "M12 5v14M5 12h14" }),
+        check: _jsx("path", { d: "m5 12 4 4L19 6" }),
+        copy: (_jsxs(_Fragment, { children: [_jsx("rect", { x: "8", y: "8", width: "12", height: "12", rx: "2.5" }), _jsx("path", { d: "M16 8V6.5A2.5 2.5 0 0 0 13.5 4h-7A2.5 2.5 0 0 0 4 6.5v7A2.5 2.5 0 0 0 6.5 16H8" })] })),
+        compass: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "9" }), _jsx("path", { d: "m16 8-3 5-5 3 3-5 5-3Z" })] })),
+        code: _jsx("path", { d: "m8 6-6 6 6 6m8-12 6 6-6 6m-5-14-2 16" }),
+        type: _jsx("path", { d: "M4 5h16M12 5v15M8 20h8" }),
+        book: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M12 6c-3-2-6-2-9-1v15c3-1 6-1 9 1 3-2 6-2 9-1V5c-3-1-6-1-9 1Z" }), _jsx("path", { d: "M12 6v15" })] })),
+    };
+    return (_jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", style: style, children: paths[name] ?? paths.grid }));
+}

package/dist/accordion/Accordion.d.ts

@@ -0,0 +1,34 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type AccordionItem = {
+    /** Unique key for the section. */
+    id: string;
+    /** Visible heading text on the button that opens and closes the section. */
+    label: string;
+    /** Content shown while the section is open. */
+    content: ReactNode;
+};
+export type AccordionProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** The sections, in order; all start closed. */
+    items: AccordionItem[];
+    /** Lets several sections stay open at once; by default opening one closes the others. */
+    multiple?: boolean;
+    /** Draws lines between sections. Defaults to true. */
+    divided?: boolean;
+    /** Disables every section's button. */
+    disabled?: boolean;
+    /** Heading level of each section's button, h1 to h6. Defaults to 3. */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+};
+/** Stacked sections that open and close under their headings. */
+export declare const Accordion: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** The sections, in order; all start closed. */
+    items: AccordionItem[];
+    /** Lets several sections stay open at once; by default opening one closes the others. */
+    multiple?: boolean;
+    /** Draws lines between sections. Defaults to true. */
+    divided?: boolean;
+    /** Disables every section's button. */
+    disabled?: boolean;
+    /** Heading level of each section's button, h1 to h6. Defaults to 3. */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/accordion/Accordion.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useState } from 'react';
+import { cx } from '../internal/cx.js';
+/** Stacked sections that open and close under their headings. */
+export const Accordion = forwardRef(function Accordion({ items, multiple = false, divided = true, disabled = false, headingLevel = 3, className, ...props }, ref) {
+    const id = useId();
+    const [expanded, setExpanded] = useState([]);
+    const visible = multiple ? expanded : expanded.slice(-1);
+    const Heading = `h${headingLevel}`;
+    return _jsx("div", { ...props, ref: ref, className: cx('diya-accordion', className), "data-divided": divided, children: items.map((item, index) => {
+            const open = visible.includes(item.id);
+            return _jsxs("section", { className: "diya-accordion-item", children: [_jsx(Heading, { className: "diya-accordion-heading", children: _jsxs("button", { type: "button", disabled: disabled, id: `${id}-trigger-${index}`, "aria-expanded": open, "aria-controls": `${id}-panel-${index}`, onClick: () => setExpanded(open ? visible.filter((key) => key !== item.id) : multiple ? [...visible, item.id] : [item.id]), children: [item.label, _jsx("svg", { "aria-hidden": "true", viewBox: "0 0 20 20", width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: _jsx("path", { d: open ? 'M5 12l5-5 5 5' : 'M5 8l5 5 5-5' }) })] }) }), _jsx("div", { role: "region", id: `${id}-panel-${index}`, "aria-labelledby": `${id}-trigger-${index}`, hidden: !open, className: "diya-accordion-content", children: item.content })] }, item.id);
+        }) });
+});

package/dist/alert/Alert.d.ts

@@ -0,0 +1,49 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import type { Tone } from '../badge/Badge.js';
+import { alertMessages } from './messages.js';
+declare module '../messages.js' {
+    interface DiyaMessages {
+        alert: typeof alertMessages;
+    }
+}
+/** Alerts carry a status, so every tone except neutral. */
+export type AlertTone = Exclude<Tone, 'neutral'>;
+export type AlertProps = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children'> & {
+    /** 'card' is a contained box; 'banner' is a full-width strip with its content in one row. Defaults to 'card'. */
+    layout?: 'card' | 'banner';
+    /** 'info' for information, 'success' done, 'warning' needs care, 'error' failed, 'brand' the provider's brand color; sets the icon and color and is announced before the message. Defaults to 'info'. */
+    tone?: AlertTone;
+    /** Visible bold first line. */
+    title?: string;
+    /** Visible message. */
+    children: ReactNode;
+    /** One visible button after the message; `label` is its text. */
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    /** When given, shows a close button that calls it. */
+    onDismiss?: () => void;
+    /** Announces immediately as `role="alert"`, interrupting a screen reader; otherwise it is a polite status. Use for errors that need action. */
+    urgent?: boolean;
+};
+/** An inline message that reports a status, with an optional action and close button. */
+export declare const Alert: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children" | "title"> & {
+    /** 'card' is a contained box; 'banner' is a full-width strip with its content in one row. Defaults to 'card'. */
+    layout?: "card" | "banner";
+    /** 'info' for information, 'success' done, 'warning' needs care, 'error' failed, 'brand' the provider's brand color; sets the icon and color and is announced before the message. Defaults to 'info'. */
+    tone?: AlertTone;
+    /** Visible bold first line. */
+    title?: string;
+    /** Visible message. */
+    children: ReactNode;
+    /** One visible button after the message; `label` is its text. */
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    /** When given, shows a close button that calls it. */
+    onDismiss?: () => void;
+    /** Announces immediately as `role="alert"`, interrupting a screen reader; otherwise it is a polite status. Use for errors that need action. */
+    urgent?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/alert/Alert.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useDiyaMessages } from '../DiyaProvider.js';
+import { cx } from '../internal/cx.js';
+import { alertMessages } from './messages.js';
+/** An inline message that reports a status, with an optional action and close button. */
+export const Alert = forwardRef(function Alert({ layout = 'card', tone = 'info', title, children, action, onDismiss, urgent = false, className, ...props }, ref) {
+    const t = useDiyaMessages('alert', alertMessages);
+    return _jsxs("div", { ...props, ref: ref, className: cx('diya-alert', className), "data-tone": tone, "data-layout": layout, children: [_jsx("svg", { className: "diya-alert-icon", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: tone === 'warning' ? _jsxs(_Fragment, { children: [_jsx("path", { d: "m12 3 10 18H2Z" }), _jsx("path", { d: "M12 9v5m0 3v.1" })] }) : _jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "9" }), tone === 'success' ? _jsx("path", { d: "m8 12 3 3 5-6" }) : tone === 'error' ? _jsx("path", { d: "m9 9 6 6m0-6-6 6" }) : _jsx("path", { d: "M12 11v6m0-10v.1" })] }) }), _jsxs("div", { className: "diya-alert-copy", children: [_jsxs("div", { role: urgent ? 'alert' : 'status', "aria-atomic": "true", children: [_jsxs("span", { className: "diya-alert-sr", children: [t[tone], ": "] }), title && _jsx("p", { className: "diya-alert-title", children: title }), _jsx("div", { className: "diya-alert-description", children: children })] }), action && _jsx("button", { type: "button", className: "diya-alert-action", onClick: action.onClick, children: action.label })] }), onDismiss && _jsx("button", { type: "button", className: "diya-alert-dismiss", "aria-label": t.dismiss, onClick: onDismiss, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", "aria-hidden": "true", children: _jsx("path", { d: "m6 6 12 12M18 6 6 18" }) }) })] });
+});

package/dist/alert/messages.d.ts

@@ -0,0 +1,9 @@
+/** alert: English defaults, overridable through DiyaProvider `messages`. */
+export declare const alertMessages: {
+    dismiss: string;
+    brand: string;
+    success: string;
+    warning: string;
+    error: string;
+    info: string;
+};

package/dist/alert/messages.js

@@ -0,0 +1,2 @@
+/** alert: English defaults, overridable through DiyaProvider `messages`. */
+export const alertMessages = { dismiss: 'Dismiss alert', brand: 'brand', success: 'success', warning: 'warning', error: 'error', info: 'info' };