@atelier-ui/react 0.0.1

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import './llm-toggle.css';
+/**
+ * A toggle switch component for binary choices, supporting validation and custom labels.
+ */
+export function LlmToggle({ checked = false, onCheckedChange, invalid = false, errors = [], disabled = false, readOnly: reactReadOnly, readonly: specReadOnly, required = false, children, className, id, name, ...rest }) {
+    const readOnly = reactReadOnly ?? specReadOnly ?? false;
+    const generatedId = useId();
+    const inputId = id || `toggle-${generatedId}`;
+    const errorId = `${inputId}-errors`;
+    const classes = [
+        'llm-toggle',
+        checked && 'is-checked',
+        invalid && 'is-invalid',
+        disabled && 'is-disabled',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs("div", { className: classes, children: [_jsxs("label", { htmlFor: inputId, children: [_jsx("input", { type: "checkbox", role: "switch", id: inputId, checked: checked, onChange: (e) => onCheckedChange?.(e.target.checked), disabled: disabled, readOnly: readOnly, required: required, "aria-checked": checked, "aria-invalid": invalid || undefined, "aria-required": required || undefined, "aria-describedby": errors.length > 0 ? errorId : undefined, name: name, ...rest }), _jsx("span", { className: "track", "aria-hidden": "true", children: _jsx("span", { className: "thumb" }) }), 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-toggle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"llm-toggle.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/toggle/llm-toggle.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkC,KAAK,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,kBAAkB,CAAC;AA0B1B;;GAEG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,OAAO,GAAG,KAAK,EACf,eAAe,EACf,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,EACQ;IACf,MAAM,QAAQ,GAAG,aAAa,IAAI,YAAY,IAAI,KAAK,CAAC;IACxD,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;IAC5B,MAAM,OAAO,GAAG,EAAE,IAAI,UAAU,WAAW,EAAE,CAAC;IAC9C,MAAM,OAAO,GAAG,GAAG,OAAO,SAAS,CAAC;IAEpC,MAAM,OAAO,GAAG;QACd,YAAY;QACZ,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,OAAO,CACL,eAAK,SAAS,EAAE,OAAO,aACrB,iBAAO,OAAO,EAAE,OAAO,aACrB,gBACE,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,QAAQ,EACb,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,kBACP,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,EACF,eAAM,SAAS,EAAC,OAAO,iBAAa,MAAM,YACxC,eAAM,SAAS,EAAC,OAAO,GAAG,GACrB,EACN,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, useId } from 'react';\nimport type { LlmToggleSpec } from '@atelier-ui/spec';\nimport './llm-toggle.css';\n\n/**\n * Properties for the LlmToggle component.\n */\nexport interface LlmToggleProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange' | 'readOnly'>,\n    LlmToggleSpec {\n  /**\n   * Whether the toggle is read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * Callback fired when the checked state changes.\n   */\n  onCheckedChange?: (checked: boolean) => void;\n  /**\n   * List of error messages to display.\n   */\n  errors?: string[];\n  /**\n   * Optional content to display alongside the toggle.\n   */\n  children?: ReactNode;\n}\n\n/**\n * A toggle switch component for binary choices, supporting validation and custom labels.\n */\nexport function LlmToggle({\n  checked = false,\n  onCheckedChange,\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}: LlmToggleProps) {\n  const readOnly = reactReadOnly ?? specReadOnly ?? false;\n  const generatedId = useId();\n  const inputId = id || `toggle-${generatedId}`;\n  const errorId = `${inputId}-errors`;\n\n  const classes = [\n    'llm-toggle',\n    checked && 'is-checked',\n    invalid && 'is-invalid',\n    disabled && 'is-disabled',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={classes}>\n      <label htmlFor={inputId}>\n        <input\n          type=\"checkbox\"\n          role=\"switch\"\n          id={inputId}\n          checked={checked}\n          onChange={(e) => onCheckedChange?.(e.target.checked)}\n          disabled={disabled}\n          readOnly={readOnly}\n          required={required}\n          aria-checked={checked}\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        <span className=\"track\" aria-hidden=\"true\">\n          <span className=\"thumb\" />\n        </span>\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/tooltip/llm-tooltip.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import type { LlmTooltipSpec } from '@atelier-ui/spec';
+import './llm-tooltip.css';
+/**
+ * Properties for the LlmTooltip component.
+ */
+export interface LlmTooltipProps extends LlmTooltipSpec {
+    /**
+     * The content to trigger the tooltip.
+     */
+    children: ReactNode;
+}
+/**
+ * A tooltip component that displays additional information when the trigger is hovered or focused.
+ */
+export declare function LlmTooltip({ llmTooltip, llmTooltipPosition, llmTooltipDisabled, llmTooltipShowDelay, llmTooltipHideDelay, children, }: LlmTooltipProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=llm-tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"llm-tooltip.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/tooltip/llm-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,SAAS,EAAS,MAAM,OAAO,CAAC;AACtE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,mBAAmB,CAAC;AAE3B;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,EACzB,UAAU,EACV,kBAA4B,EAC5B,kBAA0B,EAC1B,mBAAyB,EACzB,mBAAuB,EACvB,QAAQ,GACT,EAAE,eAAe,2CAiFjB"}

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

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useId } from 'react';
+import './llm-tooltip.css';
+/**
+ * A tooltip component that displays additional information when the trigger is hovered or focused.
+ */
+export function LlmTooltip({ llmTooltip, llmTooltipPosition = 'above', llmTooltipDisabled = false, llmTooltipShowDelay = 300, llmTooltipHideDelay = 0, children, }) {
+    const [visible, setVisible] = useState(false);
+    const showTimer = useRef(null);
+    const hideTimer = useRef(null);
+    const wrapperRef = useRef(null);
+    const id = useId();
+    const tooltipId = `tooltip-${id}`;
+    const show = () => {
+        if (llmTooltipDisabled || !llmTooltip)
+            return;
+        if (hideTimer.current) {
+            clearTimeout(hideTimer.current);
+            hideTimer.current = null;
+        }
+        if (!visible) {
+            showTimer.current = setTimeout(() => {
+                showTimer.current = null;
+                setVisible(true);
+            }, llmTooltipShowDelay);
+        }
+    };
+    const hide = () => {
+        if (showTimer.current) {
+            clearTimeout(showTimer.current);
+            showTimer.current = null;
+        }
+        hideTimer.current = setTimeout(() => {
+            hideTimer.current = null;
+            setVisible(false);
+        }, llmTooltipHideDelay);
+    };
+    // Set aria-describedby on the child element
+    useEffect(() => {
+        const el = wrapperRef.current?.firstElementChild;
+        if (el && visible) {
+            el.setAttribute('aria-describedby', tooltipId);
+        }
+        else if (el) {
+            el.removeAttribute('aria-describedby');
+        }
+    }, [visible, tooltipId]);
+    // Handle Escape key to dismiss
+    useEffect(() => {
+        const keyHandler = (e) => {
+            if (e.key === 'Escape')
+                setVisible(false);
+        };
+        document.addEventListener('keydown', keyHandler);
+        return () => document.removeEventListener('keydown', keyHandler);
+    }, []);
+    // Cleanup timers on unmount
+    useEffect(() => {
+        return () => {
+            if (showTimer.current)
+                clearTimeout(showTimer.current);
+            if (hideTimer.current)
+                clearTimeout(hideTimer.current);
+        };
+    }, []);
+    return (_jsxs("span", { ref: wrapperRef, className: "llm-tooltip-wrapper", onMouseEnter: show, onMouseLeave: hide, onFocus: show, onBlur: hide, children: [children, visible && !llmTooltipDisabled && llmTooltip && (_jsx("div", { id: tooltipId, role: "tooltip", className: `llm-tooltip position-${llmTooltipPosition}`, children: llmTooltip }))] }));
+}
+//# sourceMappingURL=llm-tooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"llm-tooltip.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/tooltip/llm-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useRef, useEffect, ReactNode, useId } from 'react';\nimport type { LlmTooltipSpec } from '@atelier-ui/spec';\nimport './llm-tooltip.css';\n\n/**\n * Properties for the LlmTooltip component.\n */\nexport interface LlmTooltipProps extends LlmTooltipSpec {\n  /**\n   * The content to trigger the tooltip.\n   */\n  children: ReactNode;\n}\n\n/**\n * A tooltip component that displays additional information when the trigger is hovered or focused.\n */\nexport function LlmTooltip({\n  llmTooltip,\n  llmTooltipPosition = 'above',\n  llmTooltipDisabled = false,\n  llmTooltipShowDelay = 300,\n  llmTooltipHideDelay = 0,\n  children,\n}: LlmTooltipProps) {\n  const [visible, setVisible] = useState(false);\n  const showTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const hideTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const wrapperRef = useRef<HTMLSpanElement>(null);\n  const id = useId();\n  const tooltipId = `tooltip-${id}`;\n\n  const show = () => {\n    if (llmTooltipDisabled || !llmTooltip) return;\n    if (hideTimer.current) {\n      clearTimeout(hideTimer.current);\n      hideTimer.current = null;\n    }\n    if (!visible) {\n      showTimer.current = setTimeout(() => {\n        showTimer.current = null;\n        setVisible(true);\n      }, llmTooltipShowDelay);\n    }\n  };\n\n  const hide = () => {\n    if (showTimer.current) {\n      clearTimeout(showTimer.current);\n      showTimer.current = null;\n    }\n    hideTimer.current = setTimeout(() => {\n      hideTimer.current = null;\n      setVisible(false);\n    }, llmTooltipHideDelay);\n  };\n\n  // Set aria-describedby on the child element\n  useEffect(() => {\n    const el = wrapperRef.current?.firstElementChild as HTMLElement | null;\n    if (el && visible) {\n      el.setAttribute('aria-describedby', tooltipId);\n    } else if (el) {\n      el.removeAttribute('aria-describedby');\n    }\n  }, [visible, tooltipId]);\n\n  // Handle Escape key to dismiss\n  useEffect(() => {\n    const keyHandler = (e: globalThis.KeyboardEvent) => {\n      if (e.key === 'Escape') setVisible(false);\n    };\n    document.addEventListener('keydown', keyHandler);\n    return () => document.removeEventListener('keydown', keyHandler);\n  }, []);\n\n  // Cleanup timers on unmount\n  useEffect(() => {\n    return () => {\n      if (showTimer.current) clearTimeout(showTimer.current);\n      if (hideTimer.current) clearTimeout(hideTimer.current);\n    };\n  }, []);\n\n  return (\n    <span\n      ref={wrapperRef}\n      className=\"llm-tooltip-wrapper\"\n      onMouseEnter={show}\n      onMouseLeave={hide}\n      onFocus={show}\n      onBlur={hide}\n    >\n      {children}\n      {visible && !llmTooltipDisabled && llmTooltip && (\n        <div\n          id={tooltipId}\n          role=\"tooltip\"\n          className={`llm-tooltip position-${llmTooltipPosition}`}\n        >\n          {llmTooltip}\n        </div>\n      )}\n    </span>\n  );\n}\n"]}