gd-design-library 1.8.2 → 1.8.3

package/utils/a2ui/renderers/truncate.d.cts

@@ -0,0 +1,4 @@
+import { A2UIComponent } from '../../../ai/index.js';
+export declare const truncateRenderers: {
+    truncate: (component: A2UIComponent) => import("@emotion/react/jsx-runtime").JSX.Element;
+};

package/utils/a2ui/renderers/truncate.d.ts

@@ -1,4 +1,4 @@
-import { A2UIComponent } from '../../../ai';
+import { A2UIComponent } from '../../../ai/index.js';
 export declare const truncateRenderers: {
     truncate: (component: A2UIComponent) => import("@emotion/react/jsx-runtime").JSX.Element;
 };

package/utils/a2ui/renderers/typography.cjs

@@ -1 +1 @@
-require(`../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../components/atoms/Typography/Typography.cjs`),t=require(`../helpers/styling.cjs`),n=require(`../helpers/misc.cjs`);let r=require(`@emotion/react/jsx-runtime`);var i={typography:i=>(0,r.jsx)(e.Typography,{variant:i.variant,as:i.as,size:i.size,align:i.align||i.styling?.textAlign,color:i.color||i.styling?.color,styleVariant:i.styleVariant,styles:t.getComponentStyles(i.styling),children:n.getComponentText(i)},i.id)};exports.typographyRenderers=i;
+const e=require("../../../components/atoms/Typography/Typography.cjs"),t=require("../helpers/styling.cjs"),n=require("../helpers/misc.cjs");let r=require("@emotion/react/jsx-runtime");var i={typography:i=>(0,r.jsx)(e.Typography,{variant:i.variant,as:i.as,size:i.size,align:i.align||i.styling?.textAlign,color:i.color||i.styling?.color,styleVariant:i.styleVariant,styles:t.getComponentStyles(i.styling),children:n.getComponentText(i)},i.id)};exports.typographyRenderers=i;

package/utils/a2ui/renderers/typography.d.cts

@@ -0,0 +1,4 @@
+import { A2UIComponent } from '../../../ai/index.js';
+export declare const typographyRenderers: {
+    typography: (component: A2UIComponent) => import("@emotion/react/jsx-runtime").JSX.Element;
+};

package/utils/a2ui/renderers/typography.d.ts

@@ -1,4 +1,4 @@
-import { A2UIComponent } from '../../../ai';
+import { A2UIComponent } from '../../../ai/index.js';
 export declare const typographyRenderers: {
     typography: (component: A2UIComponent) => import("@emotion/react/jsx-runtime").JSX.Element;
 };

package/utils/a2ui/types.d.cts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { A2UIComponent, A2UISpec, A2UICustomComponentMeta } from '../../ai/index.js';
+import { INLINE_STYLE_PROP_KEYS } from './constants.js';
+export type RenderableA2UISpec = Pick<A2UISpec, 'ui'>;
+export type DispatchAction = (actionId: string, extraPayload?: Record<string, unknown>) => boolean;
+export type Renderer = (component: A2UIComponent, renderChildren: (children?: A2UIComponent[]) => ReactNode[], dispatchAction?: DispatchAction) => ReactNode;
+export type StyleValue = string | number | undefined;
+export type InlineStyleKey = (typeof INLINE_STYLE_PROP_KEYS)[number];
+/**
+ * A custom component definition that participates in both prompt generation and runtime rendering.
+ *
+ * Pass an array of these to `buildA2UISystemPrompt` (via `customComponents`) so the LLM knows
+ * the type exists, and to `renderA2UISpec` so the renderer can handle it at runtime.
+ * Built-in component types always win on type collisions.
+ */
+export type A2UICustomComponentDefinition = A2UICustomComponentMeta & {
+    /** Renders the component when its `type` appears in a spec produced by the LLM */
+    renderer: Renderer;
+};

package/utils/a2ui/types.d.ts

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
-import { A2UIComponent, A2UISpec, A2UICustomComponentMeta } from '../../ai';
-import { INLINE_STYLE_PROP_KEYS } from './constants';
+import { A2UIComponent, A2UISpec, A2UICustomComponentMeta } from '../../ai/index.js';
+import { INLINE_STYLE_PROP_KEYS } from './constants.js';
 export type RenderableA2UISpec = Pick<A2UISpec, 'ui'>;
-export type DispatchAction = (actionId: string, extraPayload?: Record<string, unknown>) => void;
+export type DispatchAction = (actionId: string, extraPayload?: Record<string, unknown>) => boolean;
 export type Renderer = (component: A2UIComponent, renderChildren: (children?: A2UIComponent[]) => ReactNode[], dispatchAction?: DispatchAction) => ReactNode;
 export type StyleValue = string | number | undefined;
 export type InlineStyleKey = (typeof INLINE_STYLE_PROP_KEYS)[number];

package/utils/a2ui.d.cts

@@ -0,0 +1,2 @@
+export { renderA2UISpec, A2UI_RENDERER_COMPONENT_TYPES } from './a2ui/index.js';
+export type { A2UICustomComponentDefinition } from './a2ui/index.js';

package/utils/a2ui.d.ts

@@ -1,2 +1,2 @@
-export { renderA2UISpec, A2UI_RENDERER_COMPONENT_TYPES } from './a2ui/index';
-export type { A2UICustomComponentDefinition } from './a2ui/index';
+export { renderA2UISpec, A2UI_RENDERER_COMPONENT_TYPES } from './a2ui/index.js';
+export type { A2UICustomComponentDefinition } from './a2ui/index.js';

package/utils/animationFrame.cjs

@@ -1 +1 @@
-"use client";require(`../_virtual/_rolldown/runtime.cjs`);let e=require(`react`);function t(t,n=0){let r=(0,e.useRef)(t),i=(0,e.useRef)(0);r.current=t,(0,e.useEffect)(()=>{let e;function t(){let a=Date.now();(!n||a-i.current>=n)&&(i.current=a,r.current()),e=requestAnimationFrame(t)}return e=requestAnimationFrame(t),()=>{cancelAnimationFrame(e)}},[n])}exports.useAnimationFrame=t;
+"use client";let e=require("react");function t(t,n=0){let r=(0,e.useRef)(t),i=(0,e.useRef)(0);r.current=t,(0,e.useEffect)(()=>{let e;function t(){let a=Date.now();(!n||a-i.current>=n)&&(i.current=a,r.current()),e=requestAnimationFrame(t)}return e=requestAnimationFrame(t),()=>{cancelAnimationFrame(e)}},[n])}exports.useAnimationFrame=t;

package/utils/animationFrame.d.cts

@@ -0,0 +1,15 @@
+/**
+ * Custom React hook that runs a callback on every animation frame,
+ * with optional throttling.
+ *
+ * @param {() => void} callback - The function to be called on each animation frame.
+ * @param {number} [throttleMs=0] - Optional throttle interval in milliseconds. If set, the callback will not be called more often than this interval.
+ *
+ * @example
+ * // Call on every animation frame
+ * useAnimationFrame(() => { ... });
+ *
+ * // Call at most once every 100ms
+ * useAnimationFrame(() => { ... }, 100);
+ */
+export declare function useAnimationFrame(callback: () => void, throttleMs?: number): void;

package/utils/commands/vitest-a11y-command.d.cts

@@ -0,0 +1,29 @@
+import { BrowserCommand } from 'vitest/node';
+export interface A11yViolation {
+    id: string;
+    impact: 'minor' | 'moderate' | 'serious' | 'critical' | null;
+    description: string;
+    help: string;
+    helpUrl: string;
+    nodes: Array<{
+        html: string;
+        target: string[];
+        failureSummary?: string;
+    }>;
+}
+export interface CheckA11yOptions {
+    /** axe runOnly tags. Default: ['wcag2a', 'wcag2aa', 'aria'] */
+    tags?: string[];
+    /** CSS selector to scope the audit. Default: 'body' */
+    selector?: string;
+    /** axe rule IDs to disable */
+    disableRules?: string[];
+}
+export type CheckA11yResult = {
+    passed: true;
+    violations: [];
+} | {
+    passed: false;
+    violations: A11yViolation[];
+};
+export declare const checkA11yCommand: BrowserCommand<[options?: CheckA11yOptions], CheckA11yResult>;

package/utils/commands/vitest-a11y-command.d.ts

@@ -0,0 +1,29 @@
+import { BrowserCommand } from 'vitest/node';
+export interface A11yViolation {
+    id: string;
+    impact: 'minor' | 'moderate' | 'serious' | 'critical' | null;
+    description: string;
+    help: string;
+    helpUrl: string;
+    nodes: Array<{
+        html: string;
+        target: string[];
+        failureSummary?: string;
+    }>;
+}
+export interface CheckA11yOptions {
+    /** axe runOnly tags. Default: ['wcag2a', 'wcag2aa', 'aria'] */
+    tags?: string[];
+    /** CSS selector to scope the audit. Default: 'body' */
+    selector?: string;
+    /** axe rule IDs to disable */
+    disableRules?: string[];
+}
+export type CheckA11yResult = {
+    passed: true;
+    violations: [];
+} | {
+    passed: false;
+    violations: A11yViolation[];
+};
+export declare const checkA11yCommand: BrowserCommand<[options?: CheckA11yOptions], CheckA11yResult>;

package/utils/commands/vitest-a2ui-judge-command.d.cts

@@ -0,0 +1,25 @@
+import { BrowserCommand } from 'vitest/node';
+export type MetricName = 'taskCompletion' | 'promptAlignment' | 'imageCoherence' | 'hallucination';
+export interface MetricScore {
+    score: number;
+    reasoning: string;
+}
+export interface MetricConfig {
+    enabled: boolean;
+    threshold: number;
+    failureMode: 'hard' | 'soft';
+}
+export type JudgeConfig = Record<MetricName, MetricConfig>;
+export type JudgeA2uiSpecSkipped = {
+    skipped: true;
+};
+export interface JudgeA2uiSpecVerdict {
+    metrics: Record<MetricName, MetricScore>;
+    summary: string;
+    passed: boolean;
+}
+export type JudgeA2uiSpecResult = JudgeA2uiSpecSkipped | JudgeA2uiSpecVerdict;
+export declare const judgeA2uiSpecCommand: BrowserCommand<[
+    userPrompt: string,
+    screenshotDataUrl: string
+], JudgeA2uiSpecResult>;

package/utils/commands/vitest-a2ui-judge-command.d.ts

@@ -0,0 +1,25 @@
+import { BrowserCommand } from 'vitest/node';
+export type MetricName = 'taskCompletion' | 'promptAlignment' | 'imageCoherence' | 'hallucination';
+export interface MetricScore {
+    score: number;
+    reasoning: string;
+}
+export interface MetricConfig {
+    enabled: boolean;
+    threshold: number;
+    failureMode: 'hard' | 'soft';
+}
+export type JudgeConfig = Record<MetricName, MetricConfig>;
+export type JudgeA2uiSpecSkipped = {
+    skipped: true;
+};
+export interface JudgeA2uiSpecVerdict {
+    metrics: Record<MetricName, MetricScore>;
+    summary: string;
+    passed: boolean;
+}
+export type JudgeA2uiSpecResult = JudgeA2uiSpecSkipped | JudgeA2uiSpecVerdict;
+export declare const judgeA2uiSpecCommand: BrowserCommand<[
+    userPrompt: string,
+    screenshotDataUrl: string
+], JudgeA2uiSpecResult>;

package/utils/commands/vitest-a2ui-llm-command.d.cts

@@ -0,0 +1,5 @@
+import { BrowserCommand } from 'vitest/node';
+export type FetchA2uiSpecResult = {
+    spec: unknown;
+};
+export declare const fetchA2uiSpecCommand: BrowserCommand<[userPrompt: string], FetchA2uiSpecResult>;

package/utils/commands/vitest-a2ui-llm-command.d.ts

@@ -0,0 +1,5 @@
+import { BrowserCommand } from 'vitest/node';
+export type FetchA2uiSpecResult = {
+    spec: unknown;
+};
+export declare const fetchA2uiSpecCommand: BrowserCommand<[userPrompt: string], FetchA2uiSpecResult>;

package/utils/commands/vitest-a2ui-schema-command.d.cts

@@ -0,0 +1,6 @@
+import { BrowserCommand } from 'vitest/node';
+export type ValidateA2uiSpecResult = {
+    valid: boolean;
+    errors: string;
+};
+export declare const validateA2uiSpecCommand: BrowserCommand<[spec: unknown], ValidateA2uiSpecResult>;

package/utils/commands/vitest-a2ui-schema-command.d.ts

@@ -0,0 +1,6 @@
+import { BrowserCommand } from 'vitest/node';
+export type ValidateA2uiSpecResult = {
+    valid: boolean;
+    errors: string;
+};
+export declare const validateA2uiSpecCommand: BrowserCommand<[spec: unknown], ValidateA2uiSpecResult>;

package/utils/common.d.cts

@@ -0,0 +1,3 @@
+import { ReactNode } from 'react';
+export declare const isChildPrimitive: (children: ReactNode) => children is string | number;
+export declare const getWindow: () => (Window & typeof globalThis) | Record<string, never>;

package/utils/date.d.cts

@@ -0,0 +1,9 @@
+export interface DateFormat {
+    date: Date | number | string;
+    locale?: string;
+    format?: {
+        day?: 'numeric' | '2-digit';
+        month?: 'short' | 'long' | 'narrow';
+    };
+}
+export declare const formatDate: ({ date, locale, format }: DateFormat) => string;

package/utils/focus.d.cts

@@ -0,0 +1,32 @@
+export interface ClosestFocusableOptions {
+    /**
+     * @description:
+     * current HTML element
+     */
+    initial: Element;
+    /**
+     * @description:
+     * determine if only keyboard focus is of interest
+     */
+    keyboard?: boolean;
+    /**
+     * @description:
+     * should it look backwards instead (find item that will be focused with Shift + Tab)
+     */
+    previous?: boolean;
+    /**
+     * @description:
+     * top Node limiting the search area
+     */
+    root: Node;
+}
+export declare const svgNodeFilter: Exclude<NodeFilter, (node: Node) => number>;
+export declare function isHTMLElement(node: unknown): node is HTMLElement;
+export declare function isElement(node?: Element | EventTarget | Node | null): node is Element;
+/**
+ * Checks for signs that element can be focused with keyboard. tabIndex above 0 is ignored to
+ * only target natural focus order.
+ */
+export declare function isNativeKeyboardFocusable(element: Element): boolean;
+export declare function isNativeMouseFocusable(element: Element): boolean;
+export declare function getClosestFocusable({ initial, root, previous, keyboard, }: ClosestFocusableOptions): HTMLElement | null;

package/utils/getContrastColor.d.cts

@@ -0,0 +1,2 @@
+/** Determine if text should be white or dark based on background color luminance */
+export declare function getContrastColor(hex: string): string;

package/utils/helpers.d.cts

@@ -0,0 +1,21 @@
+type PropertyKey = string | number;
+type PropertyPath = any;
+export declare const isArray: (value: unknown) => boolean;
+export declare const isObject: (value: unknown) => boolean;
+export declare const get: <T = any>(obj: any, path: PropertyPath, defaultValue?: T) => T;
+/**
+ * Parses a path string into an array of keys, handling:
+ * - Dot notation: 'a.b.c'
+ * - Bracket notation: 'a[0].b'
+ * - Mixed notation: 'a.b[0].c["key"]'
+ * - Quoted keys with dots: 'colors.neutral["grey.30"]'
+ */
+export declare const parsePathString: (pathStr: string) => string[];
+export declare const set: <T = any>(obj: T, path: PropertyPath, value: unknown, isExtend?: boolean) => T;
+export declare const without: <T>(array: T[], ...values: T[]) => T[];
+export declare const pick: <T extends object, K extends keyof T>(obj: T, keys: K[]) => Pick<T, K>;
+export declare const take: <T>(array: T[], n?: number) => T[];
+export declare const size: (collection: Array<unknown> | Record<PropertyKey, unknown> | string | null | undefined) => number;
+export declare const toNumber: (value: unknown) => number | null;
+export declare const debounce: <Args extends unknown[]>(func: (...args: Args) => unknown, wait: number) => ((...args: Args) => void);
+export {};

package/utils/index.d.cts

@@ -0,0 +1,10 @@
+export * from './uniqueKeys.js';
+export * from './math.js';
+export * from './focus.js';
+export * from './helpers.js';
+export * from './setInRange.js';
+export * from './common.js';
+export * from './date.js';
+export * from './animationFrame.js';
+export * from './layout.js';
+export * from './getContrastColor.js';

package/utils/index.d.ts

@@ -1,11 +1,10 @@
-export * from './getCharCount';
-export * from './uniqueKeys';
-export * from './math';
-export * from './focus';
-export * from './helpers';
-export * from './setInRange';
-export * from './common';
-export * from './date';
-export * from './animationFrame';
-export * from './layout';
-export * from './getContrastColor';
+export * from './uniqueKeys.js';
+export * from './math.js';
+export * from './focus.js';
+export * from './helpers.js';
+export * from './setInRange.js';
+export * from './common.js';
+export * from './date.js';
+export * from './animationFrame.js';
+export * from './layout.js';
+export * from './getContrastColor.js';

package/utils/layout.d.cts

@@ -0,0 +1,6 @@
+import { AlignType, JustifyType } from '../types/index.js';
+export declare const calculateAlign: (align: AlignType) => "center" | "stretch" | "flex-start" | "flex-end";
+export declare const calculateJustify: (justify: JustifyType) => "center" | "flex-start" | "flex-end" | "space-between" | "space-around";
+export declare const calculateGutter: (gutter?: number | string) => string;
+export declare const calculateGridColumns: (columns?: number | string) => string;
+export declare const calculateGridRows: (rows?: number | string) => string;

package/utils/layout.d.ts

@@ -1,4 +1,4 @@
-import { AlignType, JustifyType } from '../types';
+import { AlignType, JustifyType } from '../types/index.js';
 export declare const calculateAlign: (align: AlignType) => "center" | "stretch" | "flex-start" | "flex-end";
 export declare const calculateJustify: (justify: JustifyType) => "center" | "flex-start" | "flex-end" | "space-between" | "space-around";
 export declare const calculateGutter: (gutter?: number | string) => string;

package/utils/math.d.cts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export declare const convertToFormattedPercents: (props: {
+    max: number;
+    target: number;
+    formatChar?: ReactNode;
+}) => ReactNode;

package/utils/setInRange.d.cts

@@ -0,0 +1,5 @@
+export declare const setInRange: (props: {
+    max: number;
+    min: number;
+    value: number;
+}) => number;

package/utils/uniqueKeys.d.cts

@@ -0,0 +1 @@
+export declare const generateUniqueId: (id?: string | number, prefix?: string) => string;

package/components/atoms/Icon/utils.d.ts

@@ -1,3 +0,0 @@
-import { ComponentProps } from 'react';
-import { IconProps } from '.';
-export declare const createLazyIcon: () => ({ ...props }: ComponentProps<"svg"> & IconProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/components/core/index.d.ts

@@ -1,54 +0,0 @@
-/**
- * @deprecated This module is deprecated and will be removed in v2.0.0.
- * Please import from the new Atomic Design structure instead:
- *
- * - Atoms: `@components/atoms` (Button, Input, Icon, etc.)
- * - Molecules: `@components/molecules` (Accordion, Tabs, etc.)
- * - Organisms: `@components/organisms` (Modal, Card, etc.)
- * - Layout: `@components/layout` (Row, Column, Portal, etc.)
- *
- * Or use the main barrel export: `import { Component } from '@components'`
- *
- * @example
- * // Before (deprecated):
- * import { Button } from '@components/core';
- *
- * // After (recommended):
- * import { Button } from '@components';
- * // or
- * import { Button } from '@components/atoms/Button';
- */
-export * from '../atoms/Badge';
-export * from '../atoms/Box';
-export * from '../atoms/Button';
-export * from '../atoms/Icon';
-export * from '../atoms/Image';
-export * from '../atoms/Input';
-export * from '../atoms/InputFile';
-export * from '../atoms/Label';
-export * from '../atoms/Link';
-export * from '../atoms/Loader';
-export * from '../atoms/Select';
-export * from '../atoms/Separator';
-export * from '../atoms/Skeleton';
-export * from '../atoms/Slider';
-export * from '../atoms/Switch';
-export * from '../atoms/Textarea';
-export * from '../atoms/Toggle';
-export * from '../atoms/Truncate';
-export * from '../atoms/Typography';
-export * from '../atoms/Wrapper';
-export * from '../molecules/Breadcrumbs';
-export * from '../molecules/Dropdown';
-export * from '../molecules/DropdownItem';
-export * from '../molecules/Form';
-export * from '../molecules/InlineNotification';
-export * from '../molecules/List';
-export * from '../molecules/Menu';
-export * from '../molecules/Snackbar';
-export * from '../molecules/Table';
-export * from '../molecules/Tooltip';
-export * from '../organisms/Modal';
-export * from '../layout/Portal';
-export * from '../layout/Scroll';
-export * from '../atoms/types/index.types';

package/components/domainSpecific/index.d.ts

@@ -1,36 +0,0 @@
-/**
- * @deprecated This module is deprecated and will be removed in v2.0.0.
- * Please import from the new Atomic Design structure instead:
- *
- * - Atoms: `@components/atoms` (Avatar, etc.)
- * - Molecules: `@components/molecules` (Accordion, Tabs, Rating, etc.)
- * - Organisms: `@components/organisms` (Card, Header, Carousel, etc.)
- *
- * Or use the main barrel export: `import { Component } from '@components'`
- *
- * @example
- * // Before (deprecated):
- * import { Card } from '@components/domainSpecific';
- *
- * // After (recommended):
- * import { Card } from '@components';
- * // or
- * import { Card } from '@components/organisms/Card';
- */
-export * from '../atoms/Avatar';
-export * from '../molecules/Accordion';
-export * from '../molecules/Counter';
-export * from '../molecules/Price';
-export * from '../molecules/ProgressBar';
-export * from '../molecules/RadioGroup';
-export * from '../molecules/Rating';
-export * from '../molecules/Stepper';
-export * from '../molecules/Tabs';
-export * from '../organisms/Card';
-export * from '../organisms/Carousel';
-export * from '../organisms/ChatBubble';
-export * from '../organisms/ContentCarousel';
-export * from '../organisms/DragAndDropFiles';
-export * from '../organisms/Header';
-export * from '../organisms/Search';
-export * from '../organisms/SearchModal';

package/utils/getCharCount.d.ts

@@ -1,3 +0,0 @@
-import { ChangeEvent } from 'react';
-import { Maybe } from '../types';
-export declare const getCharCount: <T extends HTMLTextAreaElement | HTMLInputElement>(element: Maybe<T>, event: ChangeEvent<T>, maxLength?: number) => Maybe<number>;