@msqd/lydia 0.0.0-stage → 0.6.0

package/dist/Components/Inputs/Input/Input.js

@@ -0,0 +1,146 @@
+import { jsx as t, jsxs as T } from "react/jsx-runtime";
+import { forwardRef as V } from "react";
+import { twMerge as d } from "tailwind-merge";
+import { fieldWrapperClassName as q, Field as B } from "../Field/Field.js";
+import { useField as G } from "../Field/useField.js";
+import { InputButton as N } from "../InputButton/InputButton.js";
+import { InputIcon as E } from "../InputIcon/InputIcon.js";
+import { KeyboardShortcut as J } from "../KeyboardShortcut/KeyboardShortcut.js";
+const O = d(q, "items-center h-[38px]"), Q = "lydia-input w-full border-0 px-1.5 text-gray-900 text-left placeholder:text-gray-400 focus:outline-none sm:text-sm/6 h-full flex items-center leading-[38px]", U = V(
+  ({
+    // Basic props
+    label: A,
+    helpText: c,
+    helpTextId: k,
+    errorMessage: u,
+    errorId: C,
+    cornerHint: m,
+    cornerHintId: P,
+    // Styling props
+    className: W,
+    wrapperClassName: j,
+    labelClassName: L,
+    inputClassName: M,
+    // State
+    variant: p = "default",
+    // Icon props
+    leadingIcon: f,
+    trailingIcon: g,
+    // Button props
+    leadingButton: x,
+    trailingButton: y,
+    // Keyboard shortcut
+    keyboardShortcut: h,
+    // Advanced customization
+    leadingElement: z,
+    trailingElement: F,
+    // Backward compatibility
+    hideContainer: l = !1,
+    // Input props
+    id: $,
+    "aria-describedby": D,
+    ...e
+  }, H) => {
+    const v = p === "error", K = p === "success", { ids: r, controlProps: R } = G({
+      id: $,
+      helpTextId: k,
+      errorId: C,
+      cornerHintId: P,
+      helpText: c,
+      errorMessage: u,
+      cornerHint: m,
+      invalid: v,
+      describedBy: D,
+      framed: !l
+    });
+    let i = "", n = "";
+    v ? (i = "outline-danger-300 focus-within:outline-danger-600", n = "text-danger-900 placeholder:text-danger-300") : K && (i = "outline-success-300 focus-within:outline-success-600", n = "text-success-900 placeholder:text-success-400");
+    const s = z || (x ? /* @__PURE__ */ t(N, { position: "leading", ...x }) : null) || (f ? /* @__PURE__ */ t(E, { position: "leading", children: f }) : null), a = F || (y ? /* @__PURE__ */ t(N, { position: "trailing", ...y }) : null) || (h ? /* @__PURE__ */ t(J, { shortcut: h }) : null) || (g ? /* @__PURE__ */ t(E, { position: "trailing", children: g }) : null);
+    let w = "", I = "";
+    s && (w = "pl-10 sm:pl-9"), a && (I = "pr-10 sm:pr-9");
+    let b = "";
+    e.type === "date" && (b = `pr-8 ${!e.value || e.value === "" ? "text-gray-400" : "text-gray-900"} placeholder:text-gray-400`);
+    const S = () => /* @__PURE__ */ t(
+      "div",
+      {
+        className: `pointer-events-none absolute right-1.5 top-1/2 -translate-y-1/2 ${e.disabled ? "text-gray-300" : "text-gray-400"}`,
+        children: /* @__PURE__ */ t(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            strokeWidth: 1.5,
+            stroke: "currentColor",
+            className: "size-5 sm:size-4",
+            children: /* @__PURE__ */ t(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"
+              }
+            )
+          }
+        )
+      }
+    ), o = /* @__PURE__ */ T(
+      "div",
+      {
+        className: d(
+          O,
+          i,
+          s || a || e.type === "date" ? "grid grid-cols-1 pl-0 relative" : "",
+          e.disabled ? "bg-gray-50 outline-gray-200 cursor-not-allowed" : "",
+          l ? "mt-0" : "",
+          j
+        ),
+        children: [
+          s,
+          /* @__PURE__ */ t(
+            "input",
+            {
+              ref: H,
+              type: e.type || "text",
+              className: d(
+                Q,
+                n,
+                s || a || e.type === "date" ? "col-start-1 row-start-1" : "",
+                w,
+                I,
+                e.type === "date" ? b : "",
+                e.type === "date" ? "calendar-icon-right" : "",
+                e.disabled ? "text-gray-500 placeholder:text-gray-400" : "",
+                M
+              ),
+              ...R,
+              ...e
+            }
+          ),
+          e.type === "date" && /* @__PURE__ */ t(S, {}),
+          a
+        ]
+      }
+    );
+    return l || l ? o : /* @__PURE__ */ t(
+      B,
+      {
+        controlId: r.control,
+        helpTextId: r.help,
+        errorId: r.error,
+        cornerHintId: r.cornerHint,
+        label: A,
+        labelClassName: L,
+        cornerHint: m,
+        helpText: c,
+        errorMessage: u,
+        className: W,
+        children: o
+      }
+    );
+  }
+);
+U.displayName = "Input";
+export {
+  U as Input
+};

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

@@ -0,0 +1 @@
+export { Input, type InputProps } from "./Input.js";

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

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

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

@@ -0,0 +1,21 @@
+import type { ComponentProps, ReactNode } from "react";
+export interface InputAddonProps extends ComponentProps<"div"> {
+    /**
+     * Position of the addon relative to the input
+     */
+    position?: "leading" | "trailing";
+    /**
+     * Render inside the input's outline rather than as a box beside it
+     */
+    inline?: boolean;
+    /**
+     * Addon content, such as a protocol prefix, a currency or a unit
+     */
+    children?: ReactNode;
+}
+/**
+ * Leading or trailing decoration for an input, such as a `https://` prefix, a `USD` suffix or a
+ * `+1` dialling code. Unlike InputIcon it stays in the accessibility tree, since its content
+ * carries meaning; give it an `id` and point the input's `aria-describedby` at it.
+ */
+export declare function InputAddon({ children, className, position, inline, ...props }: InputAddonProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Inputs/InputAddon/InputAddon.js

@@ -0,0 +1,18 @@
+import { jsx as m } from "react/jsx-runtime";
+import { twMerge as d } from "tailwind-merge";
+function o({ children: r, className: s, position: t = "leading", inline: e = !1, ...l }) {
+  const a = d(
+    "flex items-center",
+    !e && "bg-white outline-1 -outline-offset-1 outline-gray-300 py-1.5 text-gray-500 sm:text-sm/6 h-[38px] px-3",
+    e && "shrink-0 text-gray-500 select-none sm:text-sm/6 h-full leading-[38px]",
+    !e && t === "leading" && "rounded-l-sm",
+    !e && t === "trailing" && "rounded-r-sm",
+    e && t === "leading" && "pr-2",
+    e && t === "trailing" && "pl-2",
+    s
+  );
+  return /* @__PURE__ */ m("div", { className: a, ...l, children: r });
+}
+export {
+  o as InputAddon
+};

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

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

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

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

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

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+import { type ButtonProps } from "../../Buttons/index.js";
+export interface InputButtonProps extends Omit<ButtonProps, "size"> {
+    /**
+     * Position of the button relative to the input
+     */
+    position?: "trailing" | "leading";
+    /**
+     * Optional icon to display in the button
+     */
+    icon?: ReactNode;
+    /**
+     * Children content (button text)
+     */
+    children?: ReactNode;
+}
+/**
+ * Button component designed for use within input fields
+ * Uses the project's Button component as a base with input-specific styling
+ */
+export declare function InputButton({ children, className, position, icon, variant, ...props }: InputButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Inputs/InputButton/InputButton.js

@@ -0,0 +1,29 @@
+import { jsxs as u } from "react/jsx-runtime";
+import { twMerge as l } from "tailwind-merge";
+import { Button as m } from "../../Buttons/Button.js";
+function c({
+  children: t,
+  className: r,
+  position: n = "trailing",
+  icon: e,
+  variant: o = "secondary",
+  ...i
+}) {
+  const p = l(
+    // Base input button styles
+    "h-[38px] flex items-center gap-x-1.5 px-3",
+    // Position-specific border radius
+    n === "trailing" && "rounded-l-none",
+    n === "leading" && "rounded-r-none",
+    // Override default Button padding since we need specific height
+    "!py-0",
+    r
+  );
+  return /* @__PURE__ */ u(m, { variant: o, className: p, ...i, children: [
+    e,
+    t
+  ] });
+}
+export {
+  c as InputButton
+};

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

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

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

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

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

@@ -0,0 +1,20 @@
+import type { ComponentProps, ReactNode } from "react";
+export interface InputIconProps extends ComponentProps<"div"> {
+    /**
+     * Position of the icon
+     */
+    position: "leading" | "trailing";
+    /**
+     * Optional size of the icon (default: normal)
+     */
+    size?: "normal" | "small";
+    /**
+     * Icon content (usually an SVG or icon component)
+     */
+    children: ReactNode;
+}
+/**
+ * Icon component for input fields
+ * Positions icons at the leading or trailing edge of input fields
+ */
+export declare function InputIcon({ children, className, position, size, ...props }: InputIconProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Inputs/InputIcon/InputIcon.js

@@ -0,0 +1,16 @@
+import { jsx as l } from "react/jsx-runtime";
+import { twMerge as o } from "tailwind-merge";
+function c({ children: t, className: n, position: e, size: r = "normal", ...s }) {
+  const a = o(
+    "pointer-events-none col-start-1 row-start-1 self-center text-gray-400",
+    e === "leading" && "ml-3",
+    e === "trailing" && "mr-3 justify-self-end",
+    r === "normal" && "size-5",
+    r === "small" && "sm:size-4",
+    n
+  );
+  return /* @__PURE__ */ l("div", { className: a, "aria-hidden": "true", ...s, children: t });
+}
+export {
+  c as InputIcon
+};

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

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

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

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

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

@@ -0,0 +1,12 @@
+import type { ComponentProps } from "react";
+export interface KeyboardShortcutProps extends ComponentProps<"kbd"> {
+    /**
+     * Shortcut keys to display
+     */
+    shortcut: string;
+}
+/**
+ * A keyboard shortcut display component
+ * Shows keyboard shortcut keys in a styled format
+ */
+export declare function KeyboardShortcut({ shortcut, className, ...props }: KeyboardShortcutProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Inputs/KeyboardShortcut/KeyboardShortcut.js

@@ -0,0 +1,18 @@
+import { jsx as e } from "react/jsx-runtime";
+import { twMerge as o } from "tailwind-merge";
+function d({ shortcut: r, className: t, ...n }) {
+  return /* @__PURE__ */ e("div", { className: "flex items-center h-full py-1.5 pr-1.5", children: /* @__PURE__ */ e(
+    "kbd",
+    {
+      className: o(
+        "inline-flex items-center rounded-sm border border-gray-200 px-1 font-sans text-xs text-gray-500",
+        t
+      ),
+      ...n,
+      children: r
+    }
+  ) });
+}
+export {
+  d as KeyboardShortcut
+};

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

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

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

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

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

@@ -0,0 +1,3 @@
+import { type ChoiceInputProps } from "../choiceInput.js";
+export type RadioProps = ChoiceInputProps;
+export declare function Radio({ name, label, checked, containerProps, labelProps, disabled, ...inputProps }: RadioProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Inputs/Radio/Radio.js

@@ -0,0 +1,59 @@
+import { jsxs as n, jsx as c } from "react/jsx-runtime";
+import { twMerge as t } from "tailwind-merge";
+import { useChoiceInputId as f } from "../choiceInput.js";
+function d({
+  name: i,
+  label: s = void 0,
+  checked: l = void 0,
+  containerProps: o = {},
+  labelProps: a = {},
+  disabled: r = !1,
+  ...e
+}) {
+  const m = f(e.id);
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      ...o,
+      className: t(
+        "flex items-center gap-x-3 w-full",
+        r ? "" : "cursor-pointer",
+        o.className
+      ),
+      children: [
+        /* @__PURE__ */ c(
+          "input",
+          {
+            name: i,
+            type: "radio",
+            checked: l,
+            disabled: r,
+            ...e,
+            id: m,
+            className: t(
+              "lydia-input h-4 w-4 border-gray-300 text-primary-600 focus:ring-primary-600",
+              r ? "opacity-60" : "cursor-pointer",
+              e.className
+            )
+          }
+        ),
+        /* @__PURE__ */ c(
+          "label",
+          {
+            htmlFor: m,
+            ...a,
+            className: t(
+              "block text-sm font-medium leading-6 text-gray-900 flex-1",
+              r ? "text-gray-400" : "cursor-pointer",
+              a.className
+            ),
+            children: s ?? i
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  d as Radio
+};

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

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

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

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

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

@@ -0,0 +1,9 @@
+import type { ComponentProps } from "react";
+export interface SearchInputProps extends Omit<ComponentProps<"input">, "onChange"> {
+    label?: string;
+    placeHolder?: string;
+    setSearch?: (value: string) => void;
+    className?: string;
+    search?: string | null;
+}
+export declare const SearchInput: ({ label, setSearch, className, placeHolder, search, id, ...moreProps }: SearchInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Components/Inputs/SearchInput/SearchInput.js

@@ -0,0 +1,48 @@
+import { jsxs as i, jsx as n } from "react/jsx-runtime";
+import { useId as y, useRef as x, useState as w, useEffect as N } from "react";
+import { twMerge as b } from "tailwind-merge";
+import { KeyboardShortcut as C } from "../KeyboardShortcut/KeyboardShortcut.js";
+const v = "w-full", k = "mt-2 space-x-1 py-1 pl-1.5 flex text-base items-center rounded ring-1 text-gray-900 ring-inset ring-gray-200 placeholder:text-gray-400 focus-within:ring-2 focus-within:ring-inset focus-within:ring-primary-600", E = "lydia-input overflow-ellipsis w-full border-0 p-0 focus:outline-none focus:ring-0 ml-1", I = "inset-y-0 right-0 flex hover:cursor-pointer", K = "block text-sm font-medium leading-6 text-gray-900", B = ({
+  label: a,
+  setSearch: e,
+  className: c,
+  placeHolder: u,
+  search: r,
+  id: m,
+  ...f
+}) => {
+  const p = y(), o = m ?? p, s = x(null), [d, l] = w(r ?? "");
+  N(() => {
+    l(r ?? "");
+  }, [r]);
+  const g = (t) => {
+    t.key === "Enter" && e && e(t.currentTarget.value);
+  }, h = () => {
+    s.current && e && e(s.current.value);
+  };
+  return /* @__PURE__ */ i("div", { className: b(v, c), children: [
+    a && /* @__PURE__ */ n("label", { htmlFor: o, className: K, children: a }),
+    /* @__PURE__ */ i("div", { className: k, children: [
+      /* @__PURE__ */ n(
+        "input",
+        {
+          ref: s,
+          type: "text",
+          autoComplete: "off",
+          name: "search",
+          id: o,
+          placeholder: u,
+          onKeyDown: g,
+          value: d,
+          onChange: (t) => l(t.target.value),
+          className: E,
+          ...f
+        }
+      ),
+      /* @__PURE__ */ n("button", { type: "button", "aria-label": "Search with Enter", onClick: h, className: I, children: /* @__PURE__ */ n(C, { shortcut: "Enter" }) })
+    ] })
+  ] });
+};
+export {
+  B as SearchInput
+};

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

@@ -0,0 +1,2 @@
+export { SearchInput } from "./SearchInput.js";
+export type { SearchInputProps } from "./SearchInput.js";

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

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

package/dist/Components/Inputs/Sliders/RangeSlider.d.ts

@@ -0,0 +1,40 @@
+import type { ComponentProps, FC } from "react";
+export type Mark = number | {
+    value: number;
+    label: string;
+    className?: string;
+};
+export interface RangeSliderProps {
+    min?: number;
+    max?: number;
+    defaultValue?: {
+        min?: number;
+        max?: number;
+    };
+    value?: {
+        min?: number;
+        max?: number;
+    };
+    step?: number;
+    onChange?: (value: {
+        min?: number;
+        max?: number;
+    }) => void;
+    onPointerUp?: (value: {
+        min?: number;
+        max?: number;
+    }) => void;
+    thumbSize?: string;
+    marks?: Mark[];
+    /**
+     * What the range bounds, for the names of its two thumbs: "Response time,
+     * minimum" and "Response time, maximum". Without it they are "Minimum" and
+     * "Maximum", which still tells the two apart.
+     */
+    label?: string;
+    className?: string;
+}
+/**
+ * RangeSlider component for selecting min and max values within a range
+ */
+export declare const RangeSlider: FC<RangeSliderProps & Omit<ComponentProps<"div">, "onPointerUp" | "defaultValue">>;