@msqd/lydia 0.0.0-stage → 0.6.0

package/dist/Components/Inputs/Sliders/RangeSlider.js

@@ -0,0 +1,160 @@
+import { jsxs as p, jsx as s } from "react/jsx-runtime";
+import { useState as E } from "react";
+import { twMerge as o } from "tailwind-merge";
+const F = ({ thumbSize: t, className: e, children: a, ...l }) => /* @__PURE__ */ s(
+  "div",
+  {
+    className: o("range-slider relative flex items-center", e),
+    style: {
+      height: `calc(${t} + 1.6rem)`
+    },
+    ...l,
+    children: a
+  }
+), G = ({ thumbSize: t, className: e, children: a, ...l }) => /* @__PURE__ */ s(
+  "div",
+  {
+    className: o("relative w-full", e),
+    style: {
+      height: t
+    },
+    ...l,
+    children: a
+  }
+), H = ({ thumbSize: t, className: e, children: a, ...l }) => /* @__PURE__ */ s("div", { className: o("w-full absolute", e), style: { height: t }, ...l, children: a }), N = ({ className: t, thumbSize: e = "16px", ...a }) => /* @__PURE__ */ s(
+  "input",
+  {
+    className: o("range-slider-input lydia-input", t),
+    style: { "--thumb-size": e },
+    type: "range",
+    ...a
+  }
+), J = ({ className: t, children: e, ...a }) => /* @__PURE__ */ s(
+  "div",
+  {
+    className: o("absolute w-full top-1/2 -translate-y-1/2 h-[6px] rounded-[3px] bg-gray-200", t),
+    ...a,
+    children: e
+  }
+), K = ({ className: t, ...e }) => /* @__PURE__ */ s("div", { className: o("absolute h-full left-0 top-0 bg-primary-200 opacity-50", t), ...e }), $ = ({ thumbSize: t, thumb: e, className: a, style: l, ...c }) => /* @__PURE__ */ s(
+  "div",
+  {
+    "data-thumb": e,
+    className: o(
+      "absolute rounded-full bg-primary-900 top-1/2 -translate-x-1/2 -translate-y-1/2 ring-1 ring-white cursor-grab",
+      "z-[2]",
+      a
+    ),
+    style: {
+      width: t,
+      height: t,
+      transition: "transform 0.15s ease, box-shadow 0.15s ease, ring 0.15s ease",
+      ...l
+    },
+    ...c
+  }
+), O = ({ markClassName: t, className: e, ...a }) => /* @__PURE__ */ s(
+  "div",
+  {
+    className: o(
+      "bg-gray-200 absolute top-1/2 -translate-x-1/2 -translate-y-1/2 w-[6px] h-[6px] rounded-full ring-1 ring-white",
+      t,
+      e
+    ),
+    ...a
+  }
+), Q = ({ className: t, children: e, ...a }) => /* @__PURE__ */ s(
+  "div",
+  {
+    className: o(
+      "absolute top-full -translate-x-1/2 mt-[8px] text-[10px] font-medium whitespace-nowrap select-none",
+      t
+    ),
+    ...a,
+    children: e
+  }
+), C = (t, e) => {
+  const [a, l] = E(t !== void 0 ? t : e);
+  return [a, l];
+}, Z = ({
+  min: t = 0,
+  max: e = 10,
+  defaultValue: a = void 0,
+  value: l,
+  step: c = 1,
+  onChange: d,
+  onPointerUp: g,
+  thumbSize: r = "16px",
+  marks: P,
+  label: h,
+  className: U,
+  ...V
+}) => {
+  const [R, W] = C(a?.min, t), [D, I] = C(a?.max, e), v = (n) => Math.min(Math.max(n, t), e), u = v(l?.min ?? R), m = v(l?.max ?? D), y = l !== void 0, M = (n) => {
+    n.preventDefault(), g && g({ min: u, max: m });
+  }, j = (n) => {
+    n.preventDefault();
+    const i = Math.min(Number(n.target.value), m - c);
+    y || W(i), d && d({ min: i, max: m });
+  }, L = (n) => {
+    n.preventDefault();
+    const i = Math.max(Number(n.target.value), u + c);
+    y || I(i), d && d({ min: u, max: i });
+  }, f = Math.max(0, Math.min(100, (u - t) / (e - t) * 100)), b = Math.max(0, Math.min(100, (m - t) / (e - t) * 100));
+  return /* @__PURE__ */ p(F, { thumbSize: r, className: U, ...V, children: [
+    /* @__PURE__ */ p(G, { thumbSize: r, children: [
+      /* @__PURE__ */ s(
+        N,
+        {
+          "aria-label": h ? `${h}, minimum` : "Minimum",
+          value: u,
+          min: t,
+          max: e,
+          step: c,
+          onChange: j,
+          onPointerUp: M,
+          thumbSize: r
+        }
+      ),
+      /* @__PURE__ */ s(
+        N,
+        {
+          "aria-label": h ? `${h}, maximum` : "Maximum",
+          value: m,
+          min: t,
+          max: e,
+          step: c,
+          onChange: L,
+          onPointerUp: M,
+          thumbSize: r
+        }
+      )
+    ] }),
+    /* @__PURE__ */ p(H, { thumbSize: r, children: [
+      /* @__PURE__ */ p(J, { children: [
+        /* @__PURE__ */ s(
+          K,
+          {
+            style: {
+              left: `${f}%`,
+              width: `${b - f}%`,
+              transition: "left 0.02s ease-out, width 0.02s ease-out"
+            }
+          }
+        ),
+        P?.map((n, i) => {
+          const x = typeof n == "number" ? n : n.value, w = typeof n == "number" ? null : n.label, q = typeof n == "number" ? void 0 : n.className, A = (x - t) / (e - t) * 100, B = x >= u && x <= m;
+          return /* @__PURE__ */ p("div", { style: { position: "absolute", left: `${A}%`, top: "50%" }, children: [
+            /* @__PURE__ */ s(O, { markClassName: q, className: B ? "bg-primary-200" : void 0 }),
+            w && /* @__PURE__ */ s(Q, { children: w })
+          ] }, i);
+        })
+      ] }),
+      /* @__PURE__ */ s($, { thumb: "min", thumbSize: r, style: { left: `${f}%`, transition: "left 0.02s ease-out" } }),
+      /* @__PURE__ */ s($, { thumb: "max", thumbSize: r, style: { left: `${b}%`, transition: "left 0.02s ease-out" } })
+    ] })
+  ] });
+};
+export {
+  Z as RangeSlider
+};

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

@@ -0,0 +1,2 @@
+export { RangeSlider } from "./RangeSlider.js";
+export type { Mark, RangeSliderProps } from "./RangeSlider.js";

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

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

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

@@ -0,0 +1,56 @@
+import { type ComponentProps, type ReactNode } from "react";
+export interface TextareaProps extends ComponentProps<"textarea"> {
+    /**
+     * The label for the textarea field
+     */
+    label?: ReactNode;
+    /**
+     * Help text to display below the textarea
+     */
+    helpText?: ReactNode;
+    /**
+     * ID for the help text element for accessibility
+     */
+    helpTextId?: string;
+    /**
+     * Error message to display below the textarea when in error state
+     */
+    errorMessage?: ReactNode;
+    /**
+     * ID for the error message element for accessibility
+     */
+    errorId?: string;
+    /**
+     * Corner hint text to display in the top right
+     */
+    cornerHint?: ReactNode;
+    /**
+     * ID for the corner hint element for accessibility
+     */
+    cornerHintId?: string;
+    /**
+     * Additional CSS classes for the textarea wrapper
+     */
+    wrapperClassName?: string;
+    /**
+     * Additional CSS classes for the label
+     */
+    labelClassName?: string;
+    /**
+     * Additional CSS classes for the textarea element
+     */
+    textareaClassName?: string;
+    /**
+     * Optional visual variant for the textarea
+     */
+    variant?: "default" | "error" | "success";
+    /**
+     * Whether the container should be hidden
+     */
+    hideContainer?: boolean;
+    /**
+     * Whether this input has an error (for use inside Input.Group or other custom setups)
+     */
+    isError?: boolean;
+}
+export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/Components/Inputs/Textarea/Textarea.js

@@ -0,0 +1,79 @@
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as T } from "react";
+import { twMerge as a } from "tailwind-merge";
+import { useField as q } from "../Field/useField.js";
+import { fieldWrapperClassName as F, Field as j } from "../Field/Field.js";
+const C = "w-full border-0 px-1.5 py-1.5 text-gray-900 text-left placeholder:text-gray-400 focus:outline-none sm:text-sm/6", E = T(
+  ({
+    label: f,
+    helpText: o,
+    helpTextId: m,
+    errorMessage: l,
+    errorId: u,
+    cornerHint: d,
+    cornerHintId: x,
+    className: i,
+    wrapperClassName: p,
+    labelClassName: h,
+    textareaClassName: w,
+    variant: y = "default",
+    hideContainer: s = !1,
+    isError: N = !1,
+    id: b,
+    "aria-describedby": g,
+    ...t
+  }, I) => {
+    const n = y === "error" || N, { ids: e, controlProps: v } = q({
+      id: b,
+      helpTextId: m,
+      errorId: u,
+      cornerHintId: x,
+      helpText: o,
+      errorMessage: l,
+      cornerHint: d,
+      invalid: n,
+      describedBy: g,
+      framed: !s
+    }), c = /* @__PURE__ */ r(
+      "div",
+      {
+        className: a(
+          F,
+          n && "outline-danger-500 focus-within:outline-danger-500",
+          t.disabled && "opacity-50 cursor-not-allowed",
+          p
+        ),
+        children: /* @__PURE__ */ r(
+          "textarea",
+          {
+            className: a(C, w),
+            ref: I,
+            ...v,
+            ...t
+          }
+        )
+      }
+    );
+    return s ? /* @__PURE__ */ r("div", { className: a("w-full", i), children: c }) : /* @__PURE__ */ r(
+      j,
+      {
+        controlId: e.control,
+        helpTextId: e.help,
+        errorId: e.error,
+        cornerHintId: e.cornerHint,
+        label: f,
+        labelClassName: h,
+        required: t.required,
+        cornerHint: d,
+        helpText: o,
+        errorMessage: l,
+        className: i,
+        children: c
+      }
+    );
+  }
+);
+E.displayName = "Textarea";
+export {
+  E as Textarea
+};

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

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

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

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

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

@@ -0,0 +1,12 @@
+import type { ComponentProps, ReactNode } from "react";
+/** Props shared by the controls that pair a native input with a label: `Checkbox` and `Radio`. */
+export interface ChoiceInputProps extends ComponentProps<"input"> {
+    name: string;
+    label?: string | ReactNode;
+    checked?: boolean;
+    containerProps?: ComponentProps<"div">;
+    labelProps?: ComponentProps<"label">;
+    disabled?: boolean;
+}
+/** The id of the input, generated when the consumer passes none. `useId` always runs to keep hook order stable. */
+export declare function useChoiceInputId(id: string | undefined): string;

package/dist/Components/Inputs/choiceInput.js

@@ -0,0 +1,8 @@
+import { useId as n } from "react";
+function r(e) {
+  const t = n();
+  return e ?? t;
+}
+export {
+  r as useChoiceInputId
+};

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

@@ -0,0 +1,11 @@
+export * from "./Checkbox/index.js";
+export * from "./Radio/index.js";
+export * from "./Sliders/index.js";
+export * from "./DateRangeSelector/index.js";
+export * from "./Textarea/index.js";
+export * from "./SearchInput/index.js";
+export { Input, type InputProps } from "./Input/index.js";
+export * from "./KeyboardShortcut/index.js";
+export * from "./InputIcon/index.js";
+export * from "./InputButton/index.js";
+export * from "./InputAddon/index.js";

package/dist/Components/Inputs/index.js

@@ -0,0 +1,24 @@
+import { Checkbox as t } from "./Checkbox/Checkbox.js";
+import { DateRangeSelector as p } from "./DateRangeSelector/DateRangeSelector.js";
+import { Input as f } from "./Input/Input.js";
+import { InputAddon as n } from "./InputAddon/InputAddon.js";
+import { InputButton as u } from "./InputButton/InputButton.js";
+import { InputIcon as c } from "./InputIcon/InputIcon.js";
+import { KeyboardShortcut as S } from "./KeyboardShortcut/KeyboardShortcut.js";
+import { Radio as R } from "./Radio/Radio.js";
+import { RangeSlider as g } from "./Sliders/RangeSlider.js";
+import { SearchInput as l } from "./SearchInput/SearchInput.js";
+import { Textarea as y } from "./Textarea/Textarea.js";
+export {
+  t as Checkbox,
+  p as DateRangeSelector,
+  f as Input,
+  n as InputAddon,
+  u as InputButton,
+  c as InputIcon,
+  S as KeyboardShortcut,
+  R as Radio,
+  g as RangeSlider,
+  l as SearchInput,
+  y as Textarea
+};

package/dist/Components/Layouts/DefaultLayout.d.ts

@@ -0,0 +1,30 @@
+import { type NavBarProps } from "../NavBar/index.js";
+import { type ReactNode } from "react";
+export interface DefaultLayoutProps {
+    /**
+     * The content to be rendered inside the layout
+     */
+    children: ReactNode;
+    /**
+     * Props to be passed to the NavBar component
+     */
+    navBarProps?: NavBarProps;
+    /**
+     * Additional CSS classes for the main content area
+     */
+    contentClassName?: string;
+    /**
+     * The page's title, drawn as its one `h1` in a header band above the
+     * content. Without it there is no band, and the page says its own title.
+     */
+    title?: ReactNode;
+    /**
+     * What the page is holding and what acts on it, beside the title. Wraps at
+     * narrow widths rather than running off the edge (WCAG 1.4.10).
+     */
+    toolbar?: ReactNode;
+}
+/**
+ * Default layout with a navbar at the top and a content area
+ */
+export declare function DefaultLayout({ children, navBarProps, contentClassName, title, toolbar, }: DefaultLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Layouts/DefaultLayout.js

@@ -0,0 +1,25 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import "react";
+import { twMerge as m } from "tailwind-merge";
+import { NavBar as n } from "../NavBar/NavBar.js";
+function f({
+  children: i,
+  navBarProps: s,
+  contentClassName: t = "p-4 sm:p-6 lg:p-8",
+  title: l,
+  toolbar: a
+}) {
+  return /* @__PURE__ */ e("div", { className: "flex flex-col min-h-screen", children: [
+    /* @__PURE__ */ r(n, { ...s }),
+    /* @__PURE__ */ e("main", { className: m("flex-grow", t), children: [
+      l === void 0 ? null : /* @__PURE__ */ e("div", { className: "flex flex-wrap items-baseline gap-3 border-b border-gray-200 bg-white px-4 py-3", children: [
+        /* @__PURE__ */ r("h1", { className: "text-base font-semibold", children: l }),
+        a === void 0 ? null : /* @__PURE__ */ r("div", { className: "ml-auto flex flex-wrap items-center justify-end gap-3 text-xs text-gray-500", children: a })
+      ] }),
+      i
+    ] })
+  ] });
+}
+export {
+  f as DefaultLayout
+};

package/dist/Components/Layouts/index.d.ts

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

package/dist/Components/Layouts/index.js

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

package/dist/Components/NavBar/Assets/defaultAvatar.d.ts

@@ -0,0 +1,4 @@
+export interface DefaultAvatarProps {
+    className?: string;
+}
+export declare function DefaultAvatar({ className }: DefaultAvatarProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/NavBar/Assets/defaultAvatar.js

@@ -0,0 +1,28 @@
+import { jsxs as e, jsx as t } from "react/jsx-runtime";
+function r({ className: i = "size-8 rounded-full" }) {
+  return /* @__PURE__ */ e(
+    "svg",
+    {
+      className: i,
+      width: "40",
+      height: "40",
+      viewBox: "0 0 40 40",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ t("rect", { width: "40", height: "40", rx: "20", fill: "#6366F1" }),
+        /* @__PURE__ */ t(
+          "path",
+          {
+            d: "M20 20C23.3137 20 26 17.3137 26 14C26 10.6863 23.3137 8 20 8C16.6863 8 14 10.6863 14 14C14 17.3137 16.6863 20 20 20Z",
+            fill: "white"
+          }
+        ),
+        /* @__PURE__ */ t("path", { d: "M10 32C10 26.4772 14.4772 22 20 22C25.5228 22 30 26.4772 30 32V33H10V32Z", fill: "white" })
+      ]
+    }
+  );
+}
+export {
+  r as DefaultAvatar
+};

package/dist/Components/NavBar/Assets/index.d.ts

@@ -0,0 +1,2 @@
+export { DefaultAvatar } from "./defaultAvatar.js";
+export type { DefaultAvatarProps } from "./defaultAvatar.js";

package/dist/Components/NavBar/Assets/index.js

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

package/dist/Components/NavBar/NavBar.d.ts

@@ -0,0 +1,58 @@
+import type { ComponentProps, ComponentType } from "react";
+/**
+ * Default component for the brand
+ */
+export interface DefaultBrandProps {
+    text?: string;
+}
+export declare const DefaultBrand: ({ text }: DefaultBrandProps) => import("react/jsx-runtime").JSX.Element;
+export interface User {
+    name: string;
+    email: string;
+    avatar?: React.ReactNode;
+}
+/**
+ * Component rendering every link of the bar. It must spread its props (`className`, `onClick`,
+ * and the attributes the menus inject) on the element it renders.
+ */
+export type LinkComponentType = ComponentType<ComponentProps<"a"> & {
+    href: string;
+}>;
+export interface NavigationItem {
+    name: string;
+    href: string;
+    current?: boolean;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+}
+export interface NavBarProps {
+    navigation?: NavigationItem[];
+    userNavigation?: NavigationItem[];
+    /**
+     * The signed-in user. Omit it for a signed-out bar: no identity, no avatar and no user menu.
+     * The library never invents a user, since a placeholder identity is indistinguishable from a
+     * real one to a consumer that has not built authentication yet.
+     */
+    user?: User;
+    /**
+     * Logo to display before the brand. None by default.
+     */
+    logo?: React.ReactNode;
+    /**
+     * Brand to display next to the logo. Can be a string or a ReactNode.
+     * By default, shows the text "lydia" through the DefaultBrand component
+     */
+    brand?: React.ReactNode;
+    /**
+     * What the settings control opens. Omit it and no cog is drawn: the bar has no settings of its
+     * own to show, and a control that names itself and does nothing is indistinguishable from a
+     * working one to whoever reaches for it - the same argument this component already makes about
+     * inventing a user.
+     */
+    onSettings?: () => void;
+    /**
+     * Custom Link component used for every navigation and user item.
+     * By default, uses standard anchor tags
+     */
+    linkComponent?: LinkComponentType;
+}
+export declare function NavBar({ navigation, userNavigation, user, logo, brand, onSettings, linkComponent: LinkComponent, }: NavBarProps): import("react/jsx-runtime").JSX.Element;