@atelier-ui/react 0.0.1

package/src/lib/button/llm-button.d.ts

@@ -0,0 +1,17 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+import type { LlmButtonSpec } from '@atelier-ui/spec';
+import './llm-button.css';
+/**
+ * Properties for the LlmButton component.
+ */
+export interface LlmButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, LlmButtonSpec {
+    /**
+     * The content to be rendered inside the button.
+     */
+    children?: ReactNode;
+}
+/**
+ * A versatile button component that supports various styles, sizes, and states.
+ */
+export declare const LlmButton: import("react").ForwardRefExoticComponent<LlmButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=llm-button.d.ts.map

package/src/lib/button/llm-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"llm-button.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/button/llm-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AACpE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,kBAAkB,CAAC;AAE1B;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,aAAa;IAC5F;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,SAAS,8GAoCpB,CAAC"}

package/src/lib/button/llm-button.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import './llm-button.css';
+/**
+ * A versatile button component that supports various styles, sizes, and states.
+ */
+export const LlmButton = forwardRef(function LlmButton({ variant = 'primary', size = 'md', disabled = false, loading = false, children, className, ...rest }, ref) {
+    const isDisabled = disabled || loading;
+    const classes = [
+        'llm-button',
+        `variant-${variant}`,
+        `size-${size}`,
+        isDisabled && 'is-disabled',
+        loading && 'is-loading',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs("button", { ref: ref, className: classes, disabled: isDisabled, "aria-disabled": isDisabled || undefined, ...rest, children: [loading && _jsx("span", { className: "spinner", "aria-hidden": "true" }), children] }));
+});
+//# sourceMappingURL=llm-button.js.map

package/src/lib/button/llm-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"llm-button.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/button/llm-button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAmC,UAAU,EAAE,MAAM,OAAO,CAAC;AAEpE,OAAO,kBAAkB,CAAC;AAY1B;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CAAoC,SAAS,SAAS,CACvF,EACE,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EACD,GAAG;IAEH,MAAM,UAAU,GAAG,QAAQ,IAAI,OAAO,CAAC;IACvC,MAAM,OAAO,GAAG;QACd,YAAY;QACZ,WAAW,OAAO,EAAE;QACpB,QAAQ,IAAI,EAAE;QACd,UAAU,IAAI,aAAa;QAC3B,OAAO,IAAI,YAAY;QACvB,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,kBACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,EAClB,QAAQ,EAAE,UAAU,mBACL,UAAU,IAAI,SAAS,KAClC,IAAI,aAEP,OAAO,IAAI,eAAM,SAAS,EAAC,SAAS,iBAAa,MAAM,GAAG,EAC1D,QAAQ,IACF,CACV,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import { ButtonHTMLAttributes, ReactNode, forwardRef } from 'react';\nimport type { LlmButtonSpec } from '@atelier-ui/spec';\nimport './llm-button.css';\n\n/**\n * Properties for the LlmButton component.\n */\nexport interface LlmButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, LlmButtonSpec {\n  /**\n   * The content to be rendered inside the button.\n   */\n  children?: ReactNode;\n}\n\n/**\n * A versatile button component that supports various styles, sizes, and states.\n */\nexport const LlmButton = forwardRef<HTMLButtonElement, LlmButtonProps>(function LlmButton(\n  {\n    variant = 'primary',\n    size = 'md',\n    disabled = false,\n    loading = false,\n    children,\n    className,\n    ...rest\n  },\n  ref\n) {\n  const isDisabled = disabled || loading;\n  const classes = [\n    'llm-button',\n    `variant-${variant}`,\n    `size-${size}`,\n    isDisabled && 'is-disabled',\n    loading && 'is-loading',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      ref={ref}\n      className={classes}\n      disabled={isDisabled}\n      aria-disabled={isDisabled || undefined}\n      {...rest}\n    >\n      {loading && <span className=\"spinner\" aria-hidden=\"true\" />}\n      {children}\n    </button>\n  );\n});\n"]}

package/src/lib/card/llm-card.d.ts

@@ -0,0 +1,52 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import type { LlmCardSpec } from '@atelier-ui/spec';
+import './llm-card.css';
+/**
+ * Properties for the LlmCard component.
+ */
+export interface LlmCardProps extends HTMLAttributes<HTMLDivElement>, LlmCardSpec {
+    /**
+     * The visual style variant of the card.
+     */
+    variant?: 'elevated' | 'outlined' | 'flat';
+    /**
+     * The padding size within the card.
+     */
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    /**
+     * The content to be rendered inside the card.
+     */
+    children?: ReactNode;
+}
+/**
+ * A card component for grouping related content.
+ */
+export declare function LlmCard({ variant, padding, children, className, ...rest }: LlmCardProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * The header component for an LlmCard.
+ */
+export declare function LlmCardHeader({ children, className, ...rest }: HTMLAttributes<HTMLDivElement> & {
+    /**
+     * The content of the card header.
+     */
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * The main content component for an LlmCard.
+ */
+export declare function LlmCardContent({ children, className, ...rest }: HTMLAttributes<HTMLDivElement> & {
+    /**
+     * The main content of the card.
+     */
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * The footer component for an LlmCard.
+ */
+export declare function LlmCardFooter({ children, className, ...rest }: HTMLAttributes<HTMLDivElement> & {
+    /**
+     * The content of the card footer.
+     */
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=llm-card.d.ts.map

package/src/lib/card/llm-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"llm-card.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/card/llm-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,gBAAgB,CAAC;AAExB;;GAEG;AACH,MAAM,WAAW,YACf,SAAQ,cAAc,CAAC,cAAc,CAAC,EACpC,WAAW;IACb;;OAEG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC;IAC3C;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACtC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAoB,EACpB,OAAc,EACd,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,YAAY,2CASd;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,2CAMA;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,2CAMA;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,2CAMA"}

package/src/lib/card/llm-card.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './llm-card.css';
+/**
+ * A card component for grouping related content.
+ */
+export function LlmCard({ variant = 'elevated', padding = 'md', children, className, ...rest }) {
+    const classes = ['llm-card', `variant-${variant}`, `padding-${padding}`, className]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx("div", { className: classes, ...rest, children: children }));
+}
+/**
+ * The header component for an LlmCard.
+ */
+export function LlmCardHeader({ children, className, ...rest }) {
+    return (_jsx("div", { className: ['llm-card-header', className].filter(Boolean).join(' '), ...rest, children: children }));
+}
+/**
+ * The main content component for an LlmCard.
+ */
+export function LlmCardContent({ children, className, ...rest }) {
+    return (_jsx("div", { className: ['llm-card-content', className].filter(Boolean).join(' '), ...rest, children: children }));
+}
+/**
+ * The footer component for an LlmCard.
+ */
+export function LlmCardFooter({ children, className, ...rest }) {
+    return (_jsx("div", { className: ['llm-card-footer', className].filter(Boolean).join(' '), ...rest, children: children }));
+}
+//# sourceMappingURL=llm-card.js.map

package/src/lib/card/llm-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"llm-card.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/card/llm-card.tsx"],"names":[],"mappings":";AAEA,OAAO,gBAAgB,CAAC;AAsBxB;;GAEG;AACH,MAAM,UAAU,OAAO,CAAC,EACtB,OAAO,GAAG,UAAU,EACpB,OAAO,GAAG,IAAI,EACd,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACM;IACb,MAAM,OAAO,GAAG,CAAC,UAAU,EAAE,WAAW,OAAO,EAAE,EAAE,WAAW,OAAO,EAAE,EAAE,SAAS,CAAC;SAChF,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IACb,OAAO,CACL,cAAK,SAAS,EAAE,OAAO,KAAM,IAAI,YAC9B,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EAMR;IACC,OAAO,CACL,cAAK,SAAS,EAAE,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KAAM,IAAI,YAC/E,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,cAAc,CAAC,EAC7B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EAMR;IACC,OAAO,CACL,cAAK,SAAS,EAAE,CAAC,kBAAkB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KAAM,IAAI,YAChF,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EAMR;IACC,OAAO,CACL,cAAK,SAAS,EAAE,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KAAM,IAAI,YAC/E,QAAQ,GACL,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { HTMLAttributes, ReactNode } from 'react';\nimport type { LlmCardSpec } from '@atelier-ui/spec';\nimport './llm-card.css';\n\n/**\n * Properties for the LlmCard component.\n */\nexport interface LlmCardProps\n  extends HTMLAttributes<HTMLDivElement>,\n    LlmCardSpec {\n  /**\n   * The visual style variant of the card.\n   */\n  variant?: 'elevated' | 'outlined' | 'flat';\n  /**\n   * The padding size within the card.\n   */\n  padding?: 'none' | 'sm' | 'md' | 'lg';\n  /**\n   * The content to be rendered inside the card.\n   */\n  children?: ReactNode;\n}\n\n/**\n * A card component for grouping related content.\n */\nexport function LlmCard({\n  variant = 'elevated',\n  padding = 'md',\n  children,\n  className,\n  ...rest\n}: LlmCardProps) {\n  const classes = ['llm-card', `variant-${variant}`, `padding-${padding}`, className]\n    .filter(Boolean)\n    .join(' ');\n  return (\n    <div className={classes} {...rest}>\n      {children}\n    </div>\n  );\n}\n\n/**\n * The header component for an LlmCard.\n */\nexport function LlmCardHeader({\n  children,\n  className,\n  ...rest\n}: HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The content of the card header.\n   */\n  children?: ReactNode;\n}) {\n  return (\n    <div className={['llm-card-header', className].filter(Boolean).join(' ')} {...rest}>\n      {children}\n    </div>\n  );\n}\n\n/**\n * The main content component for an LlmCard.\n */\nexport function LlmCardContent({\n  children,\n  className,\n  ...rest\n}: HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The main content of the card.\n   */\n  children?: ReactNode;\n}) {\n  return (\n    <div className={['llm-card-content', className].filter(Boolean).join(' ')} {...rest}>\n      {children}\n    </div>\n  );\n}\n\n/**\n * The footer component for an LlmCard.\n */\nexport function LlmCardFooter({\n  children,\n  className,\n  ...rest\n}: HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The content of the card footer.\n   */\n  children?: ReactNode;\n}) {\n  return (\n    <div className={['llm-card-footer', className].filter(Boolean).join(' ')} {...rest}>\n      {children}\n    </div>\n  );\n}\n"]}

package/src/lib/checkbox/llm-checkbox.d.ts

@@ -0,0 +1,41 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+import type { LlmCheckboxSpec } from '@atelier-ui/spec';
+import './llm-checkbox.css';
+/**
+ * Properties for the LlmCheckbox component.
+ */
+export interface LlmCheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange' | 'readOnly'>, LlmCheckboxSpec {
+    /**
+     * Whether the checkbox is checked.
+     */
+    checked?: boolean;
+    /**
+     * Callback triggered when the checked state changes.
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * Whether the checkbox is in an indeterminate state.
+     */
+    indeterminate?: boolean;
+    /**
+     * Whether the checkbox is in an invalid state.
+     */
+    invalid?: boolean;
+    /**
+     * Array of error messages to display.
+     */
+    errors?: string[];
+    /**
+     * Whether the checkbox is read-only.
+     */
+    readOnly?: boolean;
+    /**
+     * The content to be rendered as the label for the checkbox.
+     */
+    children?: ReactNode;
+}
+/**
+ * A checkbox component for selecting one or more options.
+ */
+export declare function LlmCheckbox({ checked, onCheckedChange, indeterminate, invalid, errors, disabled, readOnly: reactReadOnly, readonly: specReadOnly, required, children, className, id, name, ...rest }: LlmCheckboxProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=llm-checkbox.d.ts.map

package/src/lib/checkbox/llm-checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"llm-checkbox.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/checkbox/llm-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,SAAS,EAA4B,MAAM,OAAO,CAAC;AACjF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,oBAAoB,CAAC;AAE5B;;GAEG;AACH,MAAM,WAAW,gBACf,SAAQ,IAAI,CACR,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAC7C,EACD,eAAe;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAe,EACf,eAAe,EACf,aAAqB,EACrB,OAAe,EACf,MAAW,EACX,QAAgB,EAChB,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,YAAY,EACtB,QAAgB,EAChB,QAAQ,EACR,SAAS,EACT,EAAE,EACF,IAAI,EACJ,GAAG,IAAI,EACR,EAAE,gBAAgB,2CAsDlB"}

package/src/lib/checkbox/llm-checkbox.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, useId } from 'react';
+import './llm-checkbox.css';
+/**
+ * A checkbox component for selecting one or more options.
+ */
+export function LlmCheckbox({ checked = false, onCheckedChange, indeterminate = false, invalid = false, errors = [], disabled = false, readOnly: reactReadOnly, readonly: specReadOnly, required = false, children, className, id, name, ...rest }) {
+    const readOnly = reactReadOnly ?? specReadOnly ?? false;
+    const inputRef = useRef(null);
+    const generatedId = useId();
+    const inputId = id || `checkbox-${generatedId}`;
+    const errorId = `${inputId}-errors`;
+    const classes = [
+        'llm-checkbox',
+        checked && 'is-checked',
+        invalid && 'is-invalid',
+        disabled && 'is-disabled',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    useEffect(() => {
+        if (inputRef.current) {
+            inputRef.current.indeterminate = indeterminate;
+        }
+    }, [indeterminate]);
+    return (_jsxs("div", { className: classes, children: [_jsxs("label", { htmlFor: inputId, children: [_jsx("input", { ref: inputRef, type: "checkbox", id: inputId, checked: checked, onChange: (e) => onCheckedChange?.(e.target.checked), disabled: disabled, readOnly: readOnly, required: required, "aria-invalid": invalid || undefined, "aria-required": required || undefined, "aria-describedby": errors.length > 0 ? errorId : undefined, name: name, ...rest }), children] }), errors.length > 0 && (_jsx("div", { className: "errors", id: errorId, "aria-live": "polite", children: errors.map((err, i) => (_jsx("p", { className: "error-message", children: err }, i))) }))] }));
+}
+//# sourceMappingURL=llm-checkbox.js.map

package/src/lib/checkbox/llm-checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"llm-checkbox.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/checkbox/llm-checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAEjF,OAAO,oBAAoB,CAAC;AAyC5B;;GAEG;AACH,MAAM,UAAU,WAAW,CAAC,EAC1B,OAAO,GAAG,KAAK,EACf,eAAe,EACf,aAAa,GAAG,KAAK,EACrB,OAAO,GAAG,KAAK,EACf,MAAM,GAAG,EAAE,EACX,QAAQ,GAAG,KAAK,EAChB,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,YAAY,EACtB,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,SAAS,EACT,EAAE,EACF,IAAI,EACJ,GAAG,IAAI,EACU;IACjB,MAAM,QAAQ,GAAG,aAAa,IAAI,YAAY,IAAI,KAAK,CAAC;IACxD,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAChD,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;IAC5B,MAAM,OAAO,GAAG,EAAE,IAAI,YAAY,WAAW,EAAE,CAAC;IAChD,MAAM,OAAO,GAAG,GAAG,OAAO,SAAS,CAAC;IAEpC,MAAM,OAAO,GAAG;QACd,cAAc;QACd,OAAO,IAAI,YAAY;QACvB,OAAO,IAAI,YAAY;QACvB,QAAQ,IAAI,aAAa;QACzB,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;YACrB,QAAQ,CAAC,OAAO,CAAC,aAAa,GAAG,aAAa,CAAC;QACjD,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,OAAO,CACL,eAAK,SAAS,EAAE,OAAO,aACrB,iBAAO,OAAO,EAAE,OAAO,aACrB,gBACE,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,OAAO,EACX,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EACpD,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,kBACJ,OAAO,IAAI,SAAS,mBACnB,QAAQ,IAAI,SAAS,sBAClB,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EACzD,IAAI,EAAE,IAAI,KACN,IAAI,GACR,EACD,QAAQ,IACH,EACP,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,CACpB,cAAK,SAAS,EAAC,QAAQ,EAAC,EAAE,EAAE,OAAO,eAAY,QAAQ,YACpD,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,CACtB,YAAW,SAAS,EAAC,eAAe,YACjC,GAAG,IADE,CAAC,CAEL,CACL,CAAC,GACE,CACP,IACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { InputHTMLAttributes, ReactNode, useRef, useEffect, useId } from 'react';\nimport type { LlmCheckboxSpec } from '@atelier-ui/spec';\nimport './llm-checkbox.css';\n\n/**\n * Properties for the LlmCheckbox component.\n */\nexport interface LlmCheckboxProps\n  extends Omit<\n      InputHTMLAttributes<HTMLInputElement>,\n      'type' | 'checked' | 'onChange' | 'readOnly'\n    >,\n    LlmCheckboxSpec {\n  /**\n   * Whether the checkbox is checked.\n   */\n  checked?: boolean;\n  /**\n   * Callback triggered when the checked state changes.\n   */\n  onCheckedChange?: (checked: boolean) => void;\n  /**\n   * Whether the checkbox is in an indeterminate state.\n   */\n  indeterminate?: boolean;\n  /**\n   * Whether the checkbox is in an invalid state.\n   */\n  invalid?: boolean;\n  /**\n   * Array of error messages to display.\n   */\n  errors?: string[];\n  /**\n   * Whether the checkbox is read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * The content to be rendered as the label for the checkbox.\n   */\n  children?: ReactNode;\n}\n\n/**\n * A checkbox component for selecting one or more options.\n */\nexport function LlmCheckbox({\n  checked = false,\n  onCheckedChange,\n  indeterminate = false,\n  invalid = false,\n  errors = [],\n  disabled = false,\n  readOnly: reactReadOnly,\n  readonly: specReadOnly,\n  required = false,\n  children,\n  className,\n  id,\n  name,\n  ...rest\n}: LlmCheckboxProps) {\n  const readOnly = reactReadOnly ?? specReadOnly ?? false;\n  const inputRef = useRef<HTMLInputElement>(null);\n  const generatedId = useId();\n  const inputId = id || `checkbox-${generatedId}`;\n  const errorId = `${inputId}-errors`;\n\n  const classes = [\n    'llm-checkbox',\n    checked && 'is-checked',\n    invalid && 'is-invalid',\n    disabled && 'is-disabled',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = indeterminate;\n    }\n  }, [indeterminate]);\n\n  return (\n    <div className={classes}>\n      <label htmlFor={inputId}>\n        <input\n          ref={inputRef}\n          type=\"checkbox\"\n          id={inputId}\n          checked={checked}\n          onChange={(e) => onCheckedChange?.(e.target.checked)}\n          disabled={disabled}\n          readOnly={readOnly}\n          required={required}\n          aria-invalid={invalid || undefined}\n          aria-required={required || undefined}\n          aria-describedby={errors.length > 0 ? errorId : undefined}\n          name={name}\n          {...rest}\n        />\n        {children}\n      </label>\n      {errors.length > 0 && (\n        <div className=\"errors\" id={errorId} aria-live=\"polite\">\n          {errors.map((err, i) => (\n            <p key={i} className=\"error-message\">\n              {err}\n            </p>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}

package/src/lib/dialog/llm-dialog.d.ts

@@ -0,0 +1,68 @@
+import { ReactNode, HTMLAttributes } from 'react';
+import type { LlmDialogSpec } from '@atelier-ui/spec';
+import './llm-dialog.css';
+/**
+ * Properties for the LlmDialog component.
+ */
+export interface LlmDialogProps extends LlmDialogSpec {
+    /**
+     * Whether the dialog is open.
+     */
+    open?: boolean;
+    /**
+     * Callback triggered when the open state changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Whether to close the dialog when clicking on the backdrop.
+     */
+    closeOnBackdrop?: boolean;
+    /**
+     * The size of the dialog.
+     */
+    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    /**
+     * Accessible label for the dialog.
+     */
+    'aria-label'?: string;
+    /**
+     * Accessible label provided by another element.
+     */
+    'aria-labelledby'?: string;
+    /**
+     * The content of the dialog.
+     */
+    children?: ReactNode;
+}
+/**
+ * A dialog (modal) component for displaying content on top of the main UI.
+ */
+export declare function LlmDialog({ open, onOpenChange, closeOnBackdrop, size, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, children, }: LlmDialogProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * The header component for an LlmDialog.
+ */
+export declare function LlmDialogHeader({ children, className, ...rest }: HTMLAttributes<HTMLDivElement> & {
+    /**
+     * The content of the dialog header.
+     */
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * The main content component for an LlmDialog.
+ */
+export declare function LlmDialogContent({ children, className, ...rest }: HTMLAttributes<HTMLDivElement> & {
+    /**
+     * The main content of the dialog.
+     */
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * The footer component for an LlmDialog.
+ */
+export declare function LlmDialogFooter({ children, className, ...rest }: HTMLAttributes<HTMLDivElement> & {
+    /**
+     * The content of the dialog footer.
+     */
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=llm-dialog.d.ts.map

package/src/lib/dialog/llm-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"llm-dialog.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/dialog/llm-dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,SAAS,EACT,cAAc,EAEf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,kBAAkB,CAAC;AAY1B;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,aAAa;IACnD;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IAC1C;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAY,EACZ,YAAY,EACZ,eAAsB,EACtB,IAAW,EACX,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,QAAQ,GACT,EAAE,cAAc,2CA2DhB;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,2CAiCA;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,2CASA;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,2CASA"}

package/src/lib/dialog/llm-dialog.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useId, createContext, useContext, } from 'react';
+import './llm-dialog.css';
+const DialogContext = createContext({
+    headerId: '',
+    close: () => undefined,
+});
+/**
+ * A dialog (modal) component for displaying content on top of the main UI.
+ */
+export function LlmDialog({ open = false, onOpenChange, closeOnBackdrop = true, size = 'md', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, children, }) {
+    const dialogRef = useRef(null);
+    const headerId = useId();
+    const triggerElRef = useRef(null);
+    useEffect(() => {
+        const dialog = dialogRef.current;
+        if (!dialog)
+            return;
+        if (open) {
+            triggerElRef.current = document.activeElement;
+            if (!dialog.open)
+                dialog.showModal();
+        }
+        else {
+            if (dialog.open)
+                dialog.close();
+            triggerElRef.current?.focus();
+            triggerElRef.current = null;
+        }
+    }, [open]);
+    useEffect(() => {
+        const dialog = dialogRef.current;
+        if (!dialog)
+            return;
+        const onClose = () => onOpenChange?.(false);
+        const onCancel = (e) => {
+            e.preventDefault();
+            onOpenChange?.(false);
+        };
+        dialog.addEventListener('close', onClose);
+        dialog.addEventListener('cancel', onCancel);
+        return () => {
+            dialog.removeEventListener('close', onClose);
+            dialog.removeEventListener('cancel', onCancel);
+        };
+    }, [onOpenChange]);
+    const handleBackdropClick = (e) => {
+        if (!closeOnBackdrop)
+            return;
+        if (e.target === dialogRef.current) {
+            onOpenChange?.(false);
+        }
+    };
+    const effectiveAriaLabelledby = ariaLabel ? undefined : (ariaLabelledby ?? headerId);
+    return (_jsx(DialogContext.Provider, { value: { headerId, close: () => onOpenChange?.(false) }, children: _jsx("dialog", { ref: dialogRef, className: `llm-dialog${open ? ' is-open' : ''}`, "aria-label": ariaLabel || undefined, "aria-labelledby": effectiveAriaLabelledby, "aria-modal": "true", onClick: handleBackdropClick, children: _jsx("div", { className: `panel size-${size}`, onClick: (e) => e.stopPropagation(), children: children }) }) }));
+}
+/**
+ * The header component for an LlmDialog.
+ */
+export function LlmDialogHeader({ children, className, ...rest }) {
+    const ctx = useContext(DialogContext);
+    return (_jsxs("div", { id: ctx.headerId, className: ['llm-dialog-header', className].filter(Boolean).join(' '), ...rest, children: [children, _jsx("button", { className: "close-btn", type: "button", "aria-label": "Close dialog", onClick: ctx.close, children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })] }));
+}
+/**
+ * The main content component for an LlmDialog.
+ */
+export function LlmDialogContent({ children, className, ...rest }) {
+    return (_jsx("div", { className: ['llm-dialog-content', className].filter(Boolean).join(' '), ...rest, children: children }));
+}
+/**
+ * The footer component for an LlmDialog.
+ */
+export function LlmDialogFooter({ children, className, ...rest }) {
+    return (_jsx("div", { className: ['llm-dialog-footer', className].filter(Boolean).join(' '), ...rest, children: children }));
+}
+//# sourceMappingURL=llm-dialog.js.map

package/src/lib/dialog/llm-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"llm-dialog.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/dialog/llm-dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  useEffect,\n  useRef,\n  useId,\n  createContext,\n  useContext,\n  ReactNode,\n  HTMLAttributes,\n  MouseEvent,\n} from 'react';\nimport type { LlmDialogSpec } from '@atelier-ui/spec';\nimport './llm-dialog.css';\n\ninterface DialogContextValue {\n  headerId: string;\n  close: () => void;\n}\n\nconst DialogContext = createContext<DialogContextValue>({\n  headerId: '',\n  close: () => undefined,\n});\n\n/**\n * Properties for the LlmDialog component.\n */\nexport interface LlmDialogProps extends LlmDialogSpec {\n  /**\n   * Whether the dialog is open.\n   */\n  open?: boolean;\n  /**\n   * Callback triggered when the open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Whether to close the dialog when clicking on the backdrop.\n   */\n  closeOnBackdrop?: boolean;\n  /**\n   * The size of the dialog.\n   */\n  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';\n  /**\n   * Accessible label for the dialog.\n   */\n  'aria-label'?: string;\n  /**\n   * Accessible label provided by another element.\n   */\n  'aria-labelledby'?: string;\n  /**\n   * The content of the dialog.\n   */\n  children?: ReactNode;\n}\n\n/**\n * A dialog (modal) component for displaying content on top of the main UI.\n */\nexport function LlmDialog({\n  open = false,\n  onOpenChange,\n  closeOnBackdrop = true,\n  size = 'md',\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  children,\n}: LlmDialogProps) {\n  const dialogRef = useRef<HTMLDialogElement>(null);\n  const headerId = useId();\n  const triggerElRef = useRef<Element | null>(null);\n\n  useEffect(() => {\n    const dialog = dialogRef.current;\n    if (!dialog) return;\n    if (open) {\n      triggerElRef.current = document.activeElement;\n      if (!dialog.open) dialog.showModal();\n    } else {\n      if (dialog.open) dialog.close();\n      (triggerElRef.current as HTMLElement | null)?.focus();\n      triggerElRef.current = null;\n    }\n  }, [open]);\n\n  useEffect(() => {\n    const dialog = dialogRef.current;\n    if (!dialog) return;\n    const onClose = () => onOpenChange?.(false);\n    const onCancel = (e: Event) => {\n      e.preventDefault();\n      onOpenChange?.(false);\n    };\n    dialog.addEventListener('close', onClose);\n    dialog.addEventListener('cancel', onCancel);\n    return () => {\n      dialog.removeEventListener('close', onClose);\n      dialog.removeEventListener('cancel', onCancel);\n    };\n  }, [onOpenChange]);\n\n  const handleBackdropClick = (e: MouseEvent<HTMLDialogElement>) => {\n    if (!closeOnBackdrop) return;\n    if (e.target === dialogRef.current) {\n      onOpenChange?.(false);\n    }\n  };\n\n  const effectiveAriaLabelledby = ariaLabel ? undefined : (ariaLabelledby ?? headerId);\n\n  return (\n    <DialogContext.Provider value={{ headerId, close: () => onOpenChange?.(false) }}>\n      <dialog\n        ref={dialogRef}\n        className={`llm-dialog${open ? ' is-open' : ''}`}\n        aria-label={ariaLabel || undefined}\n        aria-labelledby={effectiveAriaLabelledby}\n        aria-modal=\"true\"\n        onClick={handleBackdropClick}\n      >\n        <div className={`panel size-${size}`} onClick={(e) => e.stopPropagation()}>\n          {children}\n        </div>\n      </dialog>\n    </DialogContext.Provider>\n  );\n}\n\n/**\n * The header component for an LlmDialog.\n */\nexport function LlmDialogHeader({\n  children,\n  className,\n  ...rest\n}: HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The content of the dialog header.\n   */\n  children?: ReactNode;\n}) {\n  const ctx = useContext(DialogContext);\n  return (\n    <div\n      id={ctx.headerId}\n      className={['llm-dialog-header', className].filter(Boolean).join(' ')}\n      {...rest}\n    >\n      {children}\n      <button\n        className=\"close-btn\"\n        type=\"button\"\n        aria-label=\"Close dialog\"\n        onClick={ctx.close}\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"14\"\n          height=\"14\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n        </svg>\n      </button>\n    </div>\n  );\n}\n\n/**\n * The main content component for an LlmDialog.\n */\nexport function LlmDialogContent({\n  children,\n  className,\n  ...rest\n}: HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The main content of the dialog.\n   */\n  children?: ReactNode;\n}) {\n  return (\n    <div\n      className={['llm-dialog-content', className].filter(Boolean).join(' ')}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n\n/**\n * The footer component for an LlmDialog.\n */\nexport function LlmDialogFooter({\n  children,\n  className,\n  ...rest\n}: HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The content of the dialog footer.\n   */\n  children?: ReactNode;\n}) {\n  return (\n    <div\n      className={['llm-dialog-footer', className].filter(Boolean).join(' ')}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n"]}

package/src/lib/drawer/llm-drawer.d.ts

@@ -0,0 +1,64 @@
+import { ReactNode, HTMLAttributes } from 'react';
+import type { LlmDrawerSpec } from '@atelier-ui/spec';
+import './llm-drawer.css';
+/**
+ * Properties for the LlmDrawer component.
+ */
+export interface LlmDrawerProps extends LlmDrawerSpec {
+    /**
+     * Whether the drawer is open.
+     */
+    open?: boolean;
+    /**
+     * Callback triggered when the open state changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * The position of the drawer on the screen.
+     */
+    position?: 'left' | 'right' | 'top' | 'bottom';
+    /**
+     * The size of the drawer.
+     */
+    size?: 'sm' | 'md' | 'lg' | 'full';
+    /**
+     * Whether to close the drawer when clicking on the backdrop.
+     */
+    closeOnBackdrop?: boolean;
+    /**
+     * The content of the drawer.
+     */
+    children?: ReactNode;
+}
+/**
+ * A drawer component that slides in from the edge of the screen.
+ */
+export declare function LlmDrawer({ open, onOpenChange, position, size, closeOnBackdrop, children, }: LlmDrawerProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * The header component for an LlmDrawer.
+ */
+export declare function LlmDrawerHeader({ children, className, ...rest }: HTMLAttributes<HTMLDivElement> & {
+    /**
+     * The content of the drawer header.
+     */
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * The main content component for an LlmDrawer.
+ */
+export declare function LlmDrawerContent({ children, className, ...rest }: HTMLAttributes<HTMLDivElement> & {
+    /**
+     * The main content of the drawer.
+     */
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * The footer component for an LlmDrawer.
+ */
+export declare function LlmDrawerFooter({ children, className, ...rest }: HTMLAttributes<HTMLDivElement> & {
+    /**
+     * The content of the drawer footer.
+     */
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=llm-drawer.d.ts.map

package/src/lib/drawer/llm-drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"llm-drawer.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/drawer/llm-drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,SAAS,EACT,cAAc,EAEf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,kBAAkB,CAAC;AAY1B;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,aAAa;IACnD;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IAC/C;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IACnC;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAY,EACZ,YAAY,EACZ,QAAkB,EAClB,IAAW,EACX,eAAsB,EACtB,QAAQ,GACT,EAAE,cAAc,2CAkEhB;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,2CAiCA;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,2CASA;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,2CASA"}

package/src/lib/drawer/llm-drawer.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useId, createContext, useContext, } from 'react';
+import './llm-drawer.css';
+const DrawerContext = createContext({
+    headerId: '',
+    close: () => undefined,
+});
+/**
+ * A drawer component that slides in from the edge of the screen.
+ */
+export function LlmDrawer({ open = false, onOpenChange, position = 'right', size = 'md', closeOnBackdrop = true, children, }) {
+    const dialogRef = useRef(null);
+    const headerId = useId();
+    const triggerElRef = useRef(null);
+    useEffect(() => {
+        const dialog = dialogRef.current;
+        if (!dialog)
+            return;
+        if (open) {
+            triggerElRef.current = document.activeElement;
+            if (!dialog.open)
+                dialog.showModal();
+        }
+        else {
+            if (dialog.open)
+                dialog.close();
+            triggerElRef.current?.focus();
+            triggerElRef.current = null;
+        }
+    }, [open]);
+    useEffect(() => {
+        const dialog = dialogRef.current;
+        if (!dialog)
+            return;
+        const onClose = () => onOpenChange?.(false);
+        const onCancel = (e) => {
+            e.preventDefault();
+            onOpenChange?.(false);
+        };
+        dialog.addEventListener('close', onClose);
+        dialog.addEventListener('cancel', onCancel);
+        return () => {
+            dialog.removeEventListener('close', onClose);
+            dialog.removeEventListener('cancel', onCancel);
+        };
+    }, [onOpenChange]);
+    const handleBackdropClick = (e) => {
+        if (!closeOnBackdrop)
+            return;
+        if (e.target === dialogRef.current) {
+            onOpenChange?.(false);
+        }
+    };
+    const hostClass = [
+        'llm-drawer-host',
+        `position-${position}`,
+        `size-${size}`,
+        open && 'is-open',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx(DrawerContext.Provider, { value: { headerId, close: () => onOpenChange?.(false) }, children: _jsx("div", { className: hostClass, children: _jsx("dialog", { ref: dialogRef, "aria-labelledby": headerId, "aria-modal": "true", onClick: handleBackdropClick, children: _jsx("div", { className: "panel", onClick: (e) => e.stopPropagation(), children: children }) }) }) }));
+}
+/**
+ * The header component for an LlmDrawer.
+ */
+export function LlmDrawerHeader({ children, className, ...rest }) {
+    const ctx = useContext(DrawerContext);
+    return (_jsxs("div", { id: ctx.headerId, className: ['llm-drawer-header', className].filter(Boolean).join(' '), ...rest, children: [children, _jsx("button", { className: "close-btn", type: "button", "aria-label": "Close drawer", onClick: ctx.close, children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })] }));
+}
+/**
+ * The main content component for an LlmDrawer.
+ */
+export function LlmDrawerContent({ children, className, ...rest }) {
+    return (_jsx("div", { className: ['llm-drawer-content', className].filter(Boolean).join(' '), ...rest, children: children }));
+}
+/**
+ * The footer component for an LlmDrawer.
+ */
+export function LlmDrawerFooter({ children, className, ...rest }) {
+    return (_jsx("div", { className: ['llm-drawer-footer', className].filter(Boolean).join(' '), ...rest, children: children }));
+}
+//# sourceMappingURL=llm-drawer.js.map

package/src/lib/drawer/llm-drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"llm-drawer.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/drawer/llm-drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  useEffect,\n  useRef,\n  useId,\n  createContext,\n  useContext,\n  ReactNode,\n  HTMLAttributes,\n  MouseEvent,\n} from 'react';\nimport type { LlmDrawerSpec } from '@atelier-ui/spec';\nimport './llm-drawer.css';\n\ninterface DrawerContextValue {\n  headerId: string;\n  close: () => void;\n}\n\nconst DrawerContext = createContext<DrawerContextValue>({\n  headerId: '',\n  close: () => undefined,\n});\n\n/**\n * Properties for the LlmDrawer component.\n */\nexport interface LlmDrawerProps extends LlmDrawerSpec {\n  /**\n   * Whether the drawer is open.\n   */\n  open?: boolean;\n  /**\n   * Callback triggered when the open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The position of the drawer on the screen.\n   */\n  position?: 'left' | 'right' | 'top' | 'bottom';\n  /**\n   * The size of the drawer.\n   */\n  size?: 'sm' | 'md' | 'lg' | 'full';\n  /**\n   * Whether to close the drawer when clicking on the backdrop.\n   */\n  closeOnBackdrop?: boolean;\n  /**\n   * The content of the drawer.\n   */\n  children?: ReactNode;\n}\n\n/**\n * A drawer component that slides in from the edge of the screen.\n */\nexport function LlmDrawer({\n  open = false,\n  onOpenChange,\n  position = 'right',\n  size = 'md',\n  closeOnBackdrop = true,\n  children,\n}: LlmDrawerProps) {\n  const dialogRef = useRef<HTMLDialogElement>(null);\n  const headerId = useId();\n  const triggerElRef = useRef<Element | null>(null);\n\n  useEffect(() => {\n    const dialog = dialogRef.current;\n    if (!dialog) return;\n    if (open) {\n      triggerElRef.current = document.activeElement;\n      if (!dialog.open) dialog.showModal();\n    } else {\n      if (dialog.open) dialog.close();\n      (triggerElRef.current as HTMLElement | null)?.focus();\n      triggerElRef.current = null;\n    }\n  }, [open]);\n\n  useEffect(() => {\n    const dialog = dialogRef.current;\n    if (!dialog) return;\n    const onClose = () => onOpenChange?.(false);\n    const onCancel = (e: Event) => {\n      e.preventDefault();\n      onOpenChange?.(false);\n    };\n    dialog.addEventListener('close', onClose);\n    dialog.addEventListener('cancel', onCancel);\n    return () => {\n      dialog.removeEventListener('close', onClose);\n      dialog.removeEventListener('cancel', onCancel);\n    };\n  }, [onOpenChange]);\n\n  const handleBackdropClick = (e: MouseEvent<HTMLDialogElement>) => {\n    if (!closeOnBackdrop) return;\n    if (e.target === dialogRef.current) {\n      onOpenChange?.(false);\n    }\n  };\n\n  const hostClass = [\n    'llm-drawer-host',\n    `position-${position}`,\n    `size-${size}`,\n    open && 'is-open',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <DrawerContext.Provider value={{ headerId, close: () => onOpenChange?.(false) }}>\n      <div className={hostClass}>\n        <dialog\n          ref={dialogRef}\n          aria-labelledby={headerId}\n          aria-modal=\"true\"\n          onClick={handleBackdropClick}\n        >\n          <div className=\"panel\" onClick={(e) => e.stopPropagation()}>\n            {children}\n          </div>\n        </dialog>\n      </div>\n    </DrawerContext.Provider>\n  );\n}\n\n/**\n * The header component for an LlmDrawer.\n */\nexport function LlmDrawerHeader({\n  children,\n  className,\n  ...rest\n}: HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The content of the drawer header.\n   */\n  children?: ReactNode;\n}) {\n  const ctx = useContext(DrawerContext);\n  return (\n    <div\n      id={ctx.headerId}\n      className={['llm-drawer-header', className].filter(Boolean).join(' ')}\n      {...rest}\n    >\n      {children}\n      <button\n        className=\"close-btn\"\n        type=\"button\"\n        aria-label=\"Close drawer\"\n        onClick={ctx.close}\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"14\"\n          height=\"14\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n        </svg>\n      </button>\n    </div>\n  );\n}\n\n/**\n * The main content component for an LlmDrawer.\n */\nexport function LlmDrawerContent({\n  children,\n  className,\n  ...rest\n}: HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The main content of the drawer.\n   */\n  children?: ReactNode;\n}) {\n  return (\n    <div\n      className={['llm-drawer-content', className].filter(Boolean).join(' ')}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n\n/**\n * The footer component for an LlmDrawer.\n */\nexport function LlmDrawerFooter({\n  children,\n  className,\n  ...rest\n}: HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The content of the drawer footer.\n   */\n  children?: ReactNode;\n}) {\n  return (\n    <div\n      className={['llm-drawer-footer', className].filter(Boolean).join(' ')}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n"]}

package/src/lib/input/llm-input.d.ts

@@ -0,0 +1,41 @@
+import { InputHTMLAttributes } from 'react';
+import type { LlmInputSpec } from '@atelier-ui/spec';
+import './llm-input.css';
+/**
+ * Properties for the LlmInput component.
+ */
+export interface LlmInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'readOnly'>, LlmInputSpec {
+    /**
+     * The type of input to render.
+     */
+    type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
+    /**
+     * The current value of the input.
+     */
+    value?: string;
+    /**
+     * Callback triggered when the value changes.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Whether the input is in an invalid state.
+     */
+    invalid?: boolean;
+    /**
+     * Array of error messages to display.
+     */
+    errors?: string[];
+    /**
+     * The label for the input.
+     */
+    label?: string;
+    /**
+     * Whether the input is read-only.
+     */
+    readOnly?: boolean;
+}
+/**
+ * A versatile input component for text entry.
+ */
+export declare function LlmInput({ type, value, onChange, onValueChange, invalid, errors, disabled, readOnly: reactReadOnly, readonly: specReadOnly, required, label, className, id, ...rest }: LlmInputProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=llm-input.d.ts.map

package/src/lib/input/llm-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"llm-input.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/input/llm-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,iBAAiB,CAAC;AAEzB;;GAEG;AACH,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC,EACtE,YAAY;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAC;IAChE;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,EACvB,IAAa,EACb,KAAK,EACL,QAAQ,EACR,aAAa,EACb,OAAe,EACf,MAAW,EACX,QAAgB,EAChB,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,YAAY,EACtB,QAAgB,EAChB,KAAK,EACL,SAAS,EACT,EAAE,EACF,GAAG,IAAI,EACR,EAAE,aAAa,2CAgDf"}