@msqd/lydia 0.0.0-stage → 0.6.0

package/dist/Components/Formatter/syntaxTheme.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Maps language aliases to their canonical forms for the syntax highlighter
+ */
+export declare const languageMap: Record<string, string>;
+/**
+ * Normalizes language name for syntax highlighting
+ */
+export declare function normalizeLanguage(language: string): string;

package/dist/Components/Formatter/syntaxTheme.js

@@ -0,0 +1,15 @@
+const a = {
+  html: "markup",
+  xml: "markup",
+  js: "javascript",
+  ts: "typescript",
+  jsx: "javascript",
+  tsx: "typescript"
+};
+function p(t) {
+  return a[t] || t;
+}
+export {
+  a as languageMap,
+  p as normalizeLanguage
+};

package/dist/Components/Formatter/useCodeHighlighting.d.ts

@@ -0,0 +1,15 @@
+import type { SyntaxTree } from "./SyntaxHighlighter.js";
+export type CodeLanguage = "json" | "javascript" | "typescript" | "html" | "css" | "sql" | "text";
+/**
+ * Formats a body, splits it into lines once, and highlights lines on demand.
+ *
+ * The view highlights only the lines it draws, so the cost follows the window
+ * and not the size of the body. Results are cached per line text.
+ */
+export declare function useCodeHighlighting(content: string, language: CodeLanguage): {
+    formattedContent: string;
+    lines: string[];
+    highlightLine: (line: string) => SyntaxTree | null;
+    /** Whether the body is too large to be highlighted, so the view draws it as plain text. */
+    tooLargeToHighlight: boolean;
+};

package/dist/Components/Formatter/useCodeHighlighting.js

@@ -0,0 +1,47 @@
+import { useMemo as s, useDeferredValue as u } from "react";
+import { refractor as o } from "refractor/core";
+import { HIGHLIGHT_CAP as c, FORMAT_CAP as p } from "./bodyLimits.js";
+import { normalizeLanguage as l } from "./syntaxTheme.js";
+import a from "refractor/css";
+import d from "refractor/javascript";
+import C from "refractor/json";
+import x from "refractor/markup";
+import y from "refractor/sql";
+import H from "refractor/typescript";
+o.register(d);
+o.register(H);
+o.register(C);
+o.register(a);
+o.register(y);
+o.register(x);
+function L(t) {
+  try {
+    const r = JSON.parse(t);
+    return JSON.stringify(r, null, 2);
+  } catch {
+    return t;
+  }
+}
+function j(t, r) {
+  return r === "json" && t.length <= p ? L(t) : t;
+}
+function A(t, r) {
+  if (r === "text")
+    return null;
+  try {
+    return o.highlight(t, l(r));
+  } catch (e) {
+    return console.warn(`Failed to highlight code for language "${r}":`, e), null;
+  }
+}
+function S(t, r) {
+  const e = s(() => j(t, r), [t, r]), f = s(() => e.split(`
+`), [e]), m = r !== "text" && e.length > c, h = u(m ? "text" : r, "text"), g = s(() => {
+    const n = /* @__PURE__ */ new Map();
+    return (i) => (n.has(i) || n.set(i, A(i, h)), n.get(i) ?? null);
+  }, [h]);
+  return { formattedContent: e, lines: f, highlightLine: g, tooLargeToHighlight: m };
+}
+export {
+  S as useCodeHighlighting
+};

package/dist/Components/Formatter/useVirtualization.d.ts

@@ -0,0 +1,29 @@
+export interface VirtualizationConfig {
+    /** Item height in pixels */
+    itemHeight: number;
+    /** Container height in pixels */
+    containerHeight: number;
+    /** Number of items to render outside visible area for smooth scrolling */
+    overscan?: number;
+    /** Threshold for enabling virtualization */
+    virtualizationThreshold?: number;
+}
+export interface VirtualizationResult {
+    /** Whether virtualization is enabled */
+    isVirtualized: boolean;
+    /** Start index of visible items */
+    startIndex: number;
+    /** End index of visible items */
+    endIndex: number;
+    /** Total height of virtual content */
+    totalHeight: number;
+    /** Offset from top for positioning */
+    offsetY: number;
+    /** Scroll handler for the scrolling container */
+    onScroll: (e: React.UIEvent<HTMLElement>) => void;
+}
+/**
+ * Custom hook for virtualizing long lists of items
+ * Improves performance when rendering large amounts of content
+ */
+export declare function useVirtualization(totalItems: number, config: VirtualizationConfig): VirtualizationResult;

package/dist/Components/Formatter/useVirtualization.js

@@ -0,0 +1,18 @@
+import { useState as H, useCallback as m } from "react";
+function v(t, s) {
+  const { itemHeight: n, containerHeight: e, overscan: i = 5, virtualizationThreshold: a = 100 } = s, [l, h] = H(0), r = Math.min(l, Math.max(0, t - 1)), o = t > a, d = Math.min(t - 1, r + Math.ceil(e / n)), c = Math.max(0, r - i), u = Math.min(t - 1, d + i), f = t * n, x = c * n, M = m(
+    (g) => h(Math.floor(g.currentTarget.scrollTop / n)),
+    [n]
+  );
+  return {
+    isVirtualized: o,
+    startIndex: o ? c : 0,
+    endIndex: o ? u : t - 1,
+    totalHeight: o ? f : e,
+    offsetY: o ? x : 0,
+    onScroll: M
+  };
+}
+export {
+  v as useVirtualization
+};

package/dist/Components/Inputs/Checkbox/Checkbox.d.ts

@@ -0,0 +1,6 @@
+import { type ChoiceInputProps } from "../choiceInput.js";
+export interface CheckboxProps extends ChoiceInputProps {
+    /** Draws a partial tick: some, not all, of what the box stands for. Not an HTML attribute, so set on the DOM node. */
+    indeterminate?: boolean;
+}
+export declare function Checkbox({ name, label, checked, containerProps, labelProps, disabled, indeterminate, ref: consumerRef, ...inputProps }: CheckboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Inputs/Checkbox/Checkbox.js

@@ -0,0 +1,75 @@
+import { jsxs as d, jsx as n } from "react/jsx-runtime";
+import { useRef as g, useCallback as h, useEffect as k } from "react";
+import { twMerge as s } from "tailwind-merge";
+import { useChoiceInputId as v } from "../choiceInput.js";
+function j({
+  name: e,
+  label: c = void 0,
+  checked: p = void 0,
+  containerProps: l = {},
+  labelProps: o = {},
+  disabled: i = !1,
+  indeterminate: u = !1,
+  ref: f,
+  ...a
+}) {
+  const t = g(null), m = v(a.id), x = h(
+    (r) => (t.current = r, y(f, r)),
+    [f]
+  );
+  k(() => {
+    t.current && (t.current.indeterminate = u);
+  }, [u]);
+  const N = (r) => {
+    r.target.tagName !== "INPUT" && t.current && (t.current.click(), t.current.focus());
+  };
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      ...l,
+      className: s(
+        "relative flex gap-x-3 select-none w-full",
+        l.className,
+        i ? "" : "cursor-pointer"
+      ),
+      onClick: N,
+      children: [
+        /* @__PURE__ */ n("div", { className: "flex h-6 items-center", children: /* @__PURE__ */ n(
+          "input",
+          {
+            name: e,
+            type: "checkbox",
+            checked: p,
+            ...a,
+            id: m,
+            ref: x,
+            className: s(
+              "lydia-input h-4 w-4 border-gray-300 text-primary-600 focus:ring-primary-600 cursor-pointer",
+              a.className
+            ),
+            disabled: i
+          }
+        ) }),
+        /* @__PURE__ */ n("div", { className: "text-sm leading-6 flex-1 min-w-0", children: /* @__PURE__ */ n(
+          "label",
+          {
+            htmlFor: m,
+            ...o,
+            className: s("font-medium text-gray-900 block", o.className, i ? "" : "cursor-pointer"),
+            onClick: (r) => {
+              r.preventDefault();
+            },
+            children: c ?? e
+          }
+        ) })
+      ]
+    }
+  );
+}
+function y(e, c) {
+  if (typeof e == "function") return e(c);
+  e && (e.current = c);
+}
+export {
+  j as Checkbox
+};

package/dist/Components/Inputs/Checkbox/index.d.ts

@@ -0,0 +1 @@
+export * from "./Checkbox.js";

package/dist/Components/Inputs/Checkbox/index.js

@@ -0,0 +1,4 @@
+import { Checkbox as r } from "./Checkbox.js";
+export {
+  r as Checkbox
+};

package/dist/Components/Inputs/DateRangeSelector/DateRangeSelector.d.ts

@@ -0,0 +1,48 @@
+import { type ComponentProps } from "react";
+export interface DateRange {
+    startDate: string;
+    endDate: string;
+}
+export interface DateRangeSelectorProps extends Omit<ComponentProps<"div">, "onChange"> {
+    /**
+     * The label for the date range selector
+     */
+    label?: string;
+    /**
+     * The current date range
+     */
+    value?: DateRange;
+    /**
+     * Placeholder for the start date input
+     */
+    startDatePlaceholder?: string;
+    /**
+     * Placeholder for the end date input
+     */
+    endDatePlaceholder?: string;
+    /**
+     * Callback when date range changes
+     */
+    onChange?: (range: DateRange) => void;
+    /**
+     * Additional CSS class for the component
+     */
+    className?: string;
+    /**
+     * Minimum allowed date (ISO format: YYYY-MM-DD)
+     */
+    minDate?: string;
+    /**
+     * Maximum allowed date (ISO format: YYYY-MM-DD)
+     */
+    maxDate?: string;
+    /**
+     * Whether to disable past dates
+     */
+    disablePastDates?: boolean;
+    /**
+     * Whether to disable future dates
+     */
+    disableFutureDates?: boolean;
+}
+export declare function DateRangeSelector({ label, value, startDatePlaceholder, endDatePlaceholder, onChange, className, minDate, maxDate, disablePastDates, disableFutureDates, ...props }: DateRangeSelectorProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Inputs/DateRangeSelector/DateRangeSelector.js

@@ -0,0 +1,71 @@
+import { jsxs as D, jsx as i } from "react/jsx-runtime";
+import { useId as x } from "react";
+import { twMerge as B } from "tailwind-merge";
+import { Input as b } from "../Input/Input.js";
+import { localToday as E } from "../../../Models/Filters/dates.js";
+function T({
+  label: a,
+  value: t = { startDate: "", endDate: "" },
+  startDatePlaceholder: p = "Start date",
+  endDatePlaceholder: g = "End date",
+  onChange: r,
+  className: y,
+  minDate: o,
+  maxDate: c,
+  disablePastDates: w = !1,
+  disableFutureDates: N = !1,
+  ...S
+}) {
+  const h = x(), m = x(), n = E(), d = w && !(o && o > n) ? n : o, s = N && !(c && c < n) ? n : c, e = !!(t.startDate?.trim() && t.endDate?.trim()) && t.startDate > t.endDate ? "Start date cannot be after end date" : null, I = (l) => {
+    const f = l.target.value;
+    r && r({
+      ...t,
+      startDate: f
+    });
+  }, j = (l) => {
+    const f = l.target.value;
+    r && r({
+      ...t,
+      endDate: f
+    });
+  };
+  return /* @__PURE__ */ D("div", { role: "group", "aria-labelledby": a ? h : void 0, className: B("w-full", y), ...S, children: [
+    (a || e) && /* @__PURE__ */ D("div", { className: "flex justify-between items-center mb-1", children: [
+      a && /* @__PURE__ */ i("span", { id: h, className: "block text-sm font-medium leading-6 text-gray-900", children: a }),
+      e && /* @__PURE__ */ i("span", { id: m, className: "text-xs text-danger-600", children: e })
+    ] }),
+    /* @__PURE__ */ D("div", { className: "grid grid-cols-2 gap-2", children: [
+      /* @__PURE__ */ i(
+        b,
+        {
+          type: "date",
+          value: t.startDate,
+          onChange: I,
+          placeholder: p,
+          "aria-label": p,
+          variant: e ? "error" : "default",
+          "aria-describedby": e ? m : void 0,
+          ...d ? { min: d } : {},
+          ...t.endDate && t.endDate.trim() ? { max: t.endDate } : s ? { max: s } : {}
+        }
+      ),
+      /* @__PURE__ */ i(
+        b,
+        {
+          type: "date",
+          value: t.endDate,
+          onChange: j,
+          placeholder: g,
+          "aria-label": g,
+          variant: e ? "error" : "default",
+          "aria-describedby": e ? m : void 0,
+          ...t.startDate && t.startDate.trim() ? { min: t.startDate } : d ? { min: d } : {},
+          ...s ? { max: s } : {}
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  T as DateRangeSelector
+};

package/dist/Components/Inputs/DateRangeSelector/index.d.ts

@@ -0,0 +1 @@
+export * from "./DateRangeSelector.js";

package/dist/Components/Inputs/DateRangeSelector/index.js

@@ -0,0 +1,4 @@
+import { DateRangeSelector as r } from "./DateRangeSelector.js";
+export {
+  r as DateRangeSelector
+};

package/dist/Components/Inputs/Field/Field.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+export declare const fieldWrapperClassName = "mt-2 flex rounded-sm bg-white outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-primary-600";
+export interface FieldProps {
+    controlId: string;
+    helpTextId: string;
+    errorId: string;
+    cornerHintId: string;
+    label?: ReactNode;
+    labelClassName?: string;
+    required?: boolean;
+    cornerHint?: ReactNode;
+    helpText?: ReactNode;
+    errorMessage?: ReactNode;
+    className?: string;
+    /** The control. Its wrapper owns the gap under the label. */
+    children: ReactNode;
+}
+/** The label, corner hint, help text and error shared by every text field. */
+export declare function Field({ controlId, helpTextId, errorId, cornerHintId, label, labelClassName, required, cornerHint, helpText, errorMessage, className, children, }: FieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Inputs/Field/Field.js

@@ -0,0 +1,35 @@
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { twMerge as m } from "tailwind-merge";
+const y = "mt-2 flex rounded-sm bg-white outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-primary-600", h = "block text-sm/6 font-medium text-gray-900", p = "mt-2 text-sm text-gray-500", N = "mt-2 text-sm text-danger-600";
+function b({
+  controlId: n,
+  helpTextId: o,
+  errorId: d,
+  cornerHintId: c,
+  label: s,
+  labelClassName: r,
+  required: f,
+  cornerHint: e,
+  helpText: i,
+  errorMessage: l,
+  className: u,
+  children: x
+}) {
+  return /* @__PURE__ */ a("div", { className: m("w-full", u), children: [
+    (s || e) && /* @__PURE__ */ a("div", { className: e ? "flex justify-between items-baseline" : void 0, children: [
+      s && /* @__PURE__ */ a("label", { htmlFor: n, className: m(h, r), children: [
+        s,
+        " ",
+        f && /* @__PURE__ */ t("span", { className: "text-danger-500", children: "*" })
+      ] }),
+      e && /* @__PURE__ */ t("span", { id: c, className: "text-sm/6 text-gray-500", children: e })
+    ] }),
+    x,
+    i && !l && /* @__PURE__ */ t("p", { id: o, className: p, children: i }),
+    l && /* @__PURE__ */ t("p", { id: d, className: N, children: l })
+  ] });
+}
+export {
+  b as Field,
+  y as fieldWrapperClassName
+};

package/dist/Components/Inputs/Field/index.d.ts

@@ -0,0 +1,2 @@
+export { Field, fieldWrapperClassName, type FieldProps } from "./Field.js";
+export { useField, type FieldOptions } from "./useField.js";

package/dist/Components/Inputs/Field/index.js

@@ -0,0 +1,7 @@
+import { Field as l, fieldWrapperClassName as o } from "./Field.js";
+import { useField as a } from "./useField.js";
+export {
+  l as Field,
+  o as fieldWrapperClassName,
+  a as useField
+};

package/dist/Components/Inputs/Field/useField.d.ts

@@ -0,0 +1,33 @@
+import { type ReactNode } from "react";
+export interface FieldOptions {
+    id?: string;
+    helpTextId?: string;
+    errorId?: string;
+    cornerHintId?: string;
+    helpText?: ReactNode;
+    errorMessage?: ReactNode;
+    cornerHint?: ReactNode;
+    /** True when the variant alone marks the control invalid, with or without a message. */
+    invalid?: boolean;
+    /** The consumer's own `aria-describedby`, kept after the ones the field generates. */
+    describedBy?: string;
+    /** False when the frame is not rendered, so no description exists to point at. */
+    framed?: boolean;
+}
+/**
+ * Generates the ids of a field (control, help text, error, corner hint) unless the consumer passes
+ * them, and derives the ARIA attributes of its control from the descriptions actually rendered.
+ */
+export declare function useField({ id, helpTextId, errorId, cornerHintId, helpText, errorMessage, cornerHint, invalid, describedBy, framed, }: FieldOptions): {
+    ids: {
+        control: string;
+        help: string;
+        error: string;
+        cornerHint: string;
+    };
+    controlProps: {
+        id: string;
+        "aria-describedby": string | undefined;
+        "aria-invalid": true | undefined;
+    };
+};

package/dist/Components/Inputs/Field/useField.js

@@ -0,0 +1,36 @@
+import { useId as h } from "react";
+function $({
+  id: t,
+  helpTextId: e,
+  errorId: c,
+  cornerHintId: d,
+  helpText: u,
+  errorMessage: r,
+  cornerHint: p,
+  invalid: s = !1,
+  describedBy: a,
+  framed: i = !0
+}) {
+  const n = h(), o = {
+    control: t ?? n,
+    help: e ?? `${n}-help`,
+    error: c ?? `${n}-error`,
+    cornerHint: d ?? `${n}-hint`
+  }, l = [
+    i && r ? o.error : null,
+    i && u && !r ? o.help : null,
+    i && p ? o.cornerHint : null,
+    a
+  ].filter(Boolean);
+  return {
+    ids: o,
+    controlProps: {
+      id: o.control,
+      "aria-describedby": l.length > 0 ? l.join(" ") : void 0,
+      "aria-invalid": s || r ? !0 : void 0
+    }
+  };
+}
+export {
+  $ as useField
+};

package/dist/Components/Inputs/Input/Input.d.ts

@@ -0,0 +1,85 @@
+import { type ComponentProps, type ReactNode } from "react";
+import { type InputButtonProps } from "../InputButton/index.js";
+export interface InputProps extends ComponentProps<"input"> {
+    /**
+     * The label for the input field
+     */
+    label?: ReactNode;
+    /**
+     * Optional help text displayed below the input
+     */
+    helpText?: string;
+    /**
+     * ID for the help text element
+     */
+    helpTextId?: string;
+    /**
+     * Optional error message
+     */
+    errorMessage?: string;
+    /**
+     * ID for the error message element
+     */
+    errorId?: string;
+    /**
+     * Optional corner hint text (shown on the right side of the label)
+     */
+    cornerHint?: string;
+    /**
+     * ID for the corner hint element
+     */
+    cornerHintId?: string;
+    /**
+     * Optional CSS classes to add to the input wrapper
+     */
+    wrapperClassName?: string;
+    /**
+     * Optional CSS classes to add to the label
+     */
+    labelClassName?: string;
+    /**
+     * Optional CSS classes to add directly to the input element
+     */
+    inputClassName?: string;
+    /**
+     * Visual state variant of the input.
+     */
+    variant?: "default" | "error" | "success";
+    /**
+     * Leading icon (ReactNode for flexibility)
+     */
+    leadingIcon?: ReactNode;
+    /**
+     * Trailing icon (ReactNode for flexibility)
+     */
+    trailingIcon?: ReactNode;
+    /**
+     * Leading button configuration
+     */
+    leadingButton?: Omit<InputButtonProps, "position">;
+    /**
+     * Trailing button configuration
+     */
+    trailingButton?: Omit<InputButtonProps, "position">;
+    /**
+     * Keyboard shortcut to display
+     */
+    keyboardShortcut?: string;
+    /**
+     * Custom leading element (overrides leadingIcon and leadingButton)
+     */
+    leadingElement?: ReactNode;
+    /**
+     * Custom trailing element (overrides trailingIcon, trailingButton, and keyboardShortcut)
+     */
+    trailingElement?: ReactNode;
+    /**
+     * Hide container div (creates inline input)
+     */
+    hideContainer?: boolean;
+}
+/**
+ * Input component with cleaner props interface
+ * Provides simplified props for common use cases while maintaining flexibility
+ */
+export declare const Input: import("react").ForwardRefExoticComponent<Omit<InputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;