@msqd/lydia 0.0.0-stage → 0.6.0

package/dist/Components/Dialog/Dialog.js

@@ -0,0 +1,83 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { Dialog as b, DialogBackdrop as N, DialogPanel as v, DialogTitle as c, DialogDescription as d } from "@headlessui/react";
+import { XMarkIcon as w } from "@heroicons/react/24/outline";
+import { twMerge as a } from "tailwind-merge";
+import { modalSizeClasses as k } from "./modal.types.js";
+function M({
+  isOpen: o,
+  onClose: t,
+  title: i,
+  description: r,
+  children: m,
+  size: g = "md",
+  className: u,
+  contentClassName: f,
+  titleClassName: p,
+  descriptionClassName: h,
+  showCloseButton: x = !0,
+  initialFocus: l = !0,
+  backdrop: s = !0,
+  ...y
+}) {
+  const D = s ? t : () => {
+  };
+  return /* @__PURE__ */ n(
+    b,
+    {
+      transition: !0,
+      as: "div",
+      open: o,
+      className: a("relative z-10 transition duration-100 data-[closed]:opacity-0", u),
+      onClose: D,
+      initialFocus: typeof l == "boolean" ? void 0 : l,
+      ...y,
+      children: [
+        s && /* @__PURE__ */ e(N, { className: "fixed inset-0 bg-black/25 backdrop-blur-sm" }),
+        /* @__PURE__ */ e("div", { className: "fixed inset-0 overflow-y-auto", children: /* @__PURE__ */ e("div", { className: "flex min-h-full items-center justify-center p-4 text-center", children: /* @__PURE__ */ n(
+          v,
+          {
+            transition: !0,
+            className: a(
+              "w-full transform overflow-hidden rounded-lg bg-white p-6 shadow-xl transition-all duration-100 ease-out data-[closed]:scale-95 data-[closed]:opacity-0",
+              k[g],
+              f
+            ),
+            children: [
+              x && /* @__PURE__ */ e("div", { className: "absolute top-4 right-4", children: /* @__PURE__ */ e(
+                "button",
+                {
+                  type: "button",
+                  className: "rounded-full p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 cursor-pointer",
+                  onClick: t,
+                  "aria-label": "Close dialog",
+                  children: /* @__PURE__ */ e(w, { className: "h-5 w-5", "aria-hidden": "true" })
+                }
+              ) }),
+              i && /* @__PURE__ */ e(
+                c,
+                {
+                  as: "h3",
+                  className: a("text-lg font-semibold leading-6 text-gray-900", p),
+                  children: i
+                }
+              ),
+              r && /* @__PURE__ */ e(d, { className: a("mt-2 text-sm text-gray-500", h), children: r }),
+              m
+            ]
+          }
+        ) }) })
+      ]
+    }
+  );
+}
+function B({ className: o, ...t }) {
+  return /* @__PURE__ */ e(c, { className: a("text-lg font-semibold leading-6 text-gray-900", o), ...t });
+}
+function I({ className: o, ...t }) {
+  return /* @__PURE__ */ e(d, { className: a("mt-2 text-sm text-gray-500", o), ...t });
+}
+export {
+  M as Dialog,
+  I as DialogDescription,
+  B as DialogTitle
+};

package/dist/Components/Dialog/Drawer.d.ts

@@ -0,0 +1,45 @@
+import { DialogDescription, DialogTitle } from "@headlessui/react";
+import type { ComponentProps } from "react";
+import { type BaseModalProps, type DrawerPosition, type ModalSize } from "./modal.types.js";
+export type DrawerSize = ModalSize;
+export interface DrawerProps extends BaseModalProps {
+    size?: DrawerSize;
+    position?: DrawerPosition;
+}
+/**
+ * Drawer component for displaying slide-out panels from the side of the screen.
+ * Shares similar props interface with Dialog component for consistency.
+ *
+ * @example
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false);
+ *
+ * <Button onClick={() => setIsOpen(true)}>Open Drawer</Button>
+ *
+ * <Drawer
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Settings"
+ *   description="Configure your application settings"
+ *   position="right"
+ *   size="lg"
+ * >
+ *   <div className="space-y-4">
+ *     Your content goes here
+ *   </div>
+ * </Drawer>
+ * ```
+ */
+export declare function Drawer({ isOpen, onClose, title, description, children, size, position, className, contentClassName, titleClassName, descriptionClassName, showCloseButton, initialFocus, backdrop, ...props }: DrawerProps): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Drawer.Title component for creating accessible drawer titles.
+ * Use this when you need more customization than the basic title prop.
+ */
+export type DrawerTitleProps = ComponentProps<typeof DialogTitle>;
+export declare function DrawerTitle({ className, ...props }: DrawerTitleProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Drawer.Description component for creating accessible drawer descriptions.
+ * Use this when you need more customization than the basic description prop.
+ */
+export type DrawerDescriptionProps = ComponentProps<typeof DialogDescription>;
+export declare function DrawerDescription({ className, ...props }: DrawerDescriptionProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Dialog/Drawer.js

@@ -0,0 +1,120 @@
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { Dialog as D, DialogPanel as k, DialogDescription as g, DialogTitle as w } from "@headlessui/react";
+import { XMarkIcon as T } from "@heroicons/react/24/outline";
+import { twMerge as a } from "tailwind-merge";
+import { modalSizeClasses as j } from "./modal.types.js";
+const z = {
+  right: {
+    container: "inset-y-0 right-0",
+    panel: "pointer-events-auto w-screen transform transition duration-100 ease-in-out data-[closed]:translate-x-full"
+  },
+  left: {
+    container: "inset-y-0 left-0",
+    panel: "pointer-events-auto w-screen transform transition duration-100 ease-in-out data-[closed]:-translate-x-full"
+  }
+};
+function X({
+  isOpen: n,
+  onClose: t,
+  title: i,
+  description: r,
+  children: l,
+  size: c = "lg",
+  position: d = "right",
+  className: o,
+  contentClassName: m,
+  titleClassName: u,
+  descriptionClassName: x,
+  showCloseButton: h = !0,
+  initialFocus: v = !0,
+  backdrop: b = !0,
+  ...y
+}) {
+  const f = z[d], p = a(f.panel, j[c], m);
+  return b ? /* @__PURE__ */ s(
+    D,
+    {
+      open: n,
+      onClose: t,
+      className: a("relative z-10", o),
+      initialFocus: typeof v == "boolean" ? void 0 : v,
+      ...y,
+      children: [
+        /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black/25 backdrop-blur-sm" }),
+        /* @__PURE__ */ e("div", { className: "fixed inset-0 overflow-hidden", children: /* @__PURE__ */ e("div", { className: "absolute inset-0 overflow-hidden", children: /* @__PURE__ */ e("div", { className: a("pointer-events-none fixed flex max-w-full", f.container), children: /* @__PURE__ */ e(k, { transition: !0, className: p, children: /* @__PURE__ */ e(
+          N,
+          {
+            Title: w,
+            Description: g,
+            title: i,
+            description: r,
+            titleClassName: u,
+            descriptionClassName: x,
+            showCloseButton: h,
+            onClose: t,
+            children: l
+          }
+        ) }) }) }) })
+      ]
+    }
+  ) : n ? /* @__PURE__ */ e("div", { className: a("relative z-10", o), children: /* @__PURE__ */ e("div", { className: "fixed inset-0 overflow-hidden pointer-events-none", children: /* @__PURE__ */ e("div", { className: "absolute inset-0 overflow-hidden pointer-events-none", children: /* @__PURE__ */ e("div", { className: a("pointer-events-none fixed flex max-w-full", f.container), children: /* @__PURE__ */ e("div", { className: p, children: /* @__PURE__ */ e(
+    N,
+    {
+      Title: "h3",
+      Description: "p",
+      title: i,
+      description: r,
+      titleClassName: u,
+      descriptionClassName: x,
+      showCloseButton: h,
+      onClose: t,
+      children: l
+    }
+  ) }) }) }) }) }) : null;
+}
+function N({
+  Title: n,
+  Description: t,
+  title: i,
+  description: r,
+  titleClassName: l,
+  descriptionClassName: c,
+  showCloseButton: d,
+  onClose: o,
+  children: m
+}) {
+  return /* @__PURE__ */ e("div", { className: "flex h-full flex-col bg-white shadow-xl relative", "data-drawer-content": !0, children: /* @__PURE__ */ s("div", { className: "flex-1 overflow-y-auto py-6", children: [
+    /* @__PURE__ */ e("div", { className: "px-4 sm:px-6", children: /* @__PURE__ */ s("div", { className: "flex items-start justify-between", children: [
+      /* @__PURE__ */ s("div", { className: "flex-1", children: [
+        i && /* @__PURE__ */ e(n, { className: a("text-base font-semibold text-gray-900", l), children: i }),
+        r && /* @__PURE__ */ e(t, { className: a("mt-1 text-sm text-gray-500", c), children: r })
+      ] }),
+      d && /* @__PURE__ */ e("div", { className: "ml-3 flex h-7 items-center", children: /* @__PURE__ */ s(
+        "button",
+        {
+          type: "button",
+          onClick: o,
+          className: "relative rounded-md bg-white text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:outline-none cursor-pointer",
+          "aria-label": "Close drawer",
+          children: [
+            /* @__PURE__ */ e("span", { className: "absolute -inset-2.5" }),
+            /* @__PURE__ */ e("span", { className: "sr-only", children: "Close panel" }),
+            /* @__PURE__ */ e(T, { "aria-hidden": "true", className: "h-6 w-6" })
+          ]
+        }
+      ) })
+    ] }) }),
+    /* @__PURE__ */ e("div", { className: "relative mt-6 flex-1 px-4 sm:px-6", children: m })
+  ] }) });
+}
+function q({ className: n, ...t }) {
+  return /* @__PURE__ */ e(w, { className: a("text-base font-semibold text-gray-900", n), ...t });
+}
+function A({ className: n, ...t }) {
+  return /* @__PURE__ */ e(g, { className: a("mt-1 text-sm text-gray-500", n), ...t });
+}
+export {
+  X as Drawer,
+  A as DrawerDescription,
+  q as DrawerTitle
+};

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

@@ -0,0 +1,3 @@
+export * from "./Dialog.js";
+export * from "./Drawer.js";
+export * from "./modal.types.js";

package/dist/Components/Dialog/index.js

@@ -0,0 +1,12 @@
+import { Dialog as o, DialogDescription as i, DialogTitle as a } from "./Dialog.js";
+import { Drawer as l, DrawerDescription as t, DrawerTitle as p } from "./Drawer.js";
+import { modalSizeClasses as m } from "./modal.types.js";
+export {
+  o as Dialog,
+  i as DialogDescription,
+  a as DialogTitle,
+  l as Drawer,
+  t as DrawerDescription,
+  p as DrawerTitle,
+  m as modalSizeClasses
+};

package/dist/Components/Dialog/modal.types.d.ts

@@ -0,0 +1,47 @@
+import type { Dialog as HeadlessDialog } from "@headlessui/react";
+import type { ReactNode } from "react";
+import type { ComponentProps } from "react";
+/**
+ * Shared base interface for Dialog and Drawer components
+ * to ensure consistent API and behavior across modal components.
+ */
+export interface BaseModalProps extends Omit<ComponentProps<typeof HeadlessDialog>, "className" | "initialFocus"> {
+    /** Whether the modal is open */
+    isOpen: boolean;
+    /** Callback when the modal is closed */
+    onClose: () => void;
+    /** Optional title for the modal */
+    title?: string;
+    /** Optional description for the modal */
+    description?: string;
+    /** Modal content */
+    children?: ReactNode;
+    /** Additional CSS classes for the modal container */
+    className?: string;
+    /** Additional CSS classes for the modal content */
+    contentClassName?: string;
+    /** Additional CSS classes for the title */
+    titleClassName?: string;
+    /** Additional CSS classes for the description */
+    descriptionClassName?: string;
+    /** Whether to show the close button */
+    showCloseButton?: boolean;
+    /** Element to focus when the modal opens (defaults to true) */
+    initialFocus?: React.RefObject<HTMLElement> | boolean;
+    /**
+     * Whether to show backdrop with click-to-close and scroll blocking.
+     * When true: backdrop is shown, clicking it closes modal, background scroll is blocked.
+     * When false: no backdrop, modal can only be closed programmatically or via close button, background is interactive.
+     */
+    backdrop?: boolean;
+}
+/**
+ * Size options for modal components based on viewport width percentages
+ */
+export type ModalSize = "sm" | "md" | "lg";
+/**
+ * Position options for drawer components
+ */
+export type DrawerPosition = "left" | "right";
+/** Maximum width of the panel for each modal size */
+export declare const modalSizeClasses: Record<ModalSize, string>;

package/dist/Components/Dialog/modal.types.js

@@ -0,0 +1,8 @@
+const m = {
+  sm: "max-w-[30vw]",
+  md: "max-w-[55vw]",
+  lg: "max-w-[80vw]"
+};
+export {
+  m as modalSizeClasses
+};

package/dist/Components/Facets/FacetCount.d.ts

@@ -0,0 +1,11 @@
+export interface FacetCountProps {
+    /** The count value to display */
+    count: number;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * FacetCount component displays a count value with consistent styling.
+ * Used in facet labels to show the number of items matching a filter option.
+ */
+export declare function FacetCount({ count, className }: FacetCountProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Facets/FacetCount.js

@@ -0,0 +1,8 @@
+import { jsx as e } from "react/jsx-runtime";
+function s({ count: o, className: t }) {
+  const n = ["text-[11px]", "text-gray-500", "font-light"];
+  return t && n.push(t), /* @__PURE__ */ e("span", { className: n.join(" "), children: o });
+}
+export {
+  s as FacetCount
+};

package/dist/Components/Facets/FacetCountsCaption.d.ts

@@ -0,0 +1,16 @@
+import type { FilterMeta } from "../../Models/Filters/index.js";
+import type { ComponentProps } from "react";
+export declare const DEFAULT_COUNTS_CAPTION = "Counts cover all transactions";
+/**
+ * The caption a facet shows, if any: none when the consumer passes an empty one, and none when no option has a count
+ * to explain. A `0` is a count; the codes under a class count too.
+ */
+export declare function countsCaptionOf(options: (FilterMeta & {
+    under?: FilterMeta[];
+})[], caption: string): string | undefined;
+export type FacetCountsCaptionProps = ComponentProps<"p">;
+/**
+ * Says what the counts of a facet are counts of. The facet's option group points at it with `aria-describedby`, so a
+ * screen reader reads it on entering the group.
+ */
+export declare function FacetCountsCaption({ className, ...props }: FacetCountsCaptionProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Facets/FacetCountsCaption.js

@@ -0,0 +1,14 @@
+import { jsx as e } from "react/jsx-runtime";
+const r = "Counts cover all transactions";
+function a(o, t) {
+  return o.some((n) => n.count !== void 0 || n.under?.some(s)) && t ? t : void 0;
+}
+const s = (o) => o.count !== void 0;
+function i({ className: o, ...t }) {
+  return /* @__PURE__ */ e("p", { className: ["text-xs text-gray-600", o].filter(Boolean).join(" "), ...t });
+}
+export {
+  r as DEFAULT_COUNTS_CAPTION,
+  i as FacetCountsCaption,
+  a as countsCaptionOf
+};

package/dist/Components/Facets/FacetInnerLightButton.d.ts

@@ -0,0 +1,10 @@
+export interface FacetInnerLightButtonProps {
+    /** Button label text */
+    label: string;
+    /** Click handler function */
+    handler: () => void;
+}
+/**
+ * FacetInnerLightButton component for action buttons inside facet labels.
+ */
+export declare function FacetInnerLightButton({ label, handler }: FacetInnerLightButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Facets/FacetInnerLightButton.js

@@ -0,0 +1,17 @@
+import { jsx as n } from "react/jsx-runtime";
+function a({ label: o, handler: r }) {
+  return /* @__PURE__ */ n(
+    "button",
+    {
+      className: "text-gray-500 mx-1 font-normal text-xs hover:text-gray-700 transition-colors cursor-pointer",
+      onClick: (t) => {
+        t.preventDefault(), t.stopPropagation(), r();
+      },
+      type: "button",
+      children: o
+    }
+  );
+}
+export {
+  a as FacetInnerLightButton
+};

package/dist/Components/Facets/FacetLabel.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from "react";
+export interface FacetLabelProps {
+    /** The main text/value to display */
+    name: string;
+    /** Optional count to show in parentheses */
+    count?: number;
+    /** Optional children (like "only" button) */
+    children?: ReactNode;
+}
+/**
+ * FacetLabel component that displays a filter option with its name, count, and optional action buttons.
+ */
+export declare function FacetLabel({ name, count, children }: FacetLabelProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Facets/FacetLabel.js

@@ -0,0 +1,15 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import "react";
+import { FacetCount as s } from "./FacetCount.js";
+function n({ name: i, count: t, children: r }) {
+  return /* @__PURE__ */ a("div", { className: "flex items-center justify-between w-full group", children: [
+    /* @__PURE__ */ e("span", { className: "truncate", children: i }),
+    /* @__PURE__ */ a("div", { className: "flex items-center space-x-2 ml-auto", children: [
+      /* @__PURE__ */ e("div", { className: "opacity-0 group-hover:opacity-100 transition-opacity", children: r }),
+      t !== void 0 && /* @__PURE__ */ e(s, { count: t })
+    ] })
+  ] });
+}
+export {
+  n as FacetLabel
+};

package/dist/Components/Facets/FacetList.d.ts

@@ -0,0 +1,40 @@
+import type { FilterChangeHandler, Filters } from "../../Models/Filters/index.js";
+import { type ComponentProps, type ReactNode } from "react";
+export interface FacetListProps extends ComponentProps<"div"> {
+    /** Whether to add dividers between facet sections */
+    hasDividers?: boolean;
+    /** Additional CSS classes for the container */
+    className?: string;
+    /** Filter facet components as children */
+    children: ReactNode;
+}
+/**
+ * Layout for a collection of filter facets: a container, and optional dividers between them.
+ *
+ * It holds no filter state and provides no context, so each facet is given its own `filters` and
+ * `onFiltersChange` and reads them itself. That is deliberate — see `useFacetState` below if you
+ * want somewhere to keep the state — but it does mean this component has nothing to do with the
+ * values, and asking it for them would be asking for something it never reads.
+ *
+ * @example
+ * ```tsx
+ * const { filters, handleFilterChange } = useFacetState();
+ *
+ * <FacetList>
+ *   <MultipleChoiceFacet name="status" title="Status" filters={filters} onFiltersChange={handleFilterChange} ... />
+ *   <SingleChoiceFacet name="method" title="Method" filters={filters} onFiltersChange={handleFilterChange} ... />
+ * </FacetList>
+ * ```
+ */
+export declare function FacetList({ hasDividers, className, children, ...props }: FacetListProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to help manage filter state in components using FacetList
+ * Returns the filters and the handlers to change, remove and reset them
+ */
+export declare function useFacetState(initialFilters?: Filters): {
+    filters: Filters;
+    setFilters: import("react").Dispatch<import("react").SetStateAction<Filters>>;
+    handleFilterChange: FilterChangeHandler;
+    resetFilters: () => void;
+    removeFilter: (filterName: string) => void;
+};

package/dist/Components/Facets/FacetList.js

@@ -0,0 +1,37 @@
+import { jsx as c } from "react/jsx-runtime";
+import { useState as m } from "react";
+import { twMerge as d } from "tailwind-merge";
+function g({ hasDividers: t = !0, className: r, children: e, ...o }) {
+  const n = d(
+    "overflow-hidden text-gray-900 sm:text-sm",
+    t && "divide-y divide-gray-100",
+    r
+  );
+  return /* @__PURE__ */ c("div", { className: n, ...o, children: e });
+}
+function h(t = {}) {
+  const [r, e] = m(t);
+  return {
+    filters: r,
+    setFilters: e,
+    handleFilterChange: (s, i) => {
+      e((a) => ({
+        ...a,
+        [s]: i
+      }));
+    },
+    resetFilters: () => {
+      e({});
+    },
+    removeFilter: (s) => {
+      e((i) => {
+        const { [s]: a, ...l } = i;
+        return l;
+      });
+    }
+  };
+}
+export {
+  g as FacetList,
+  h as useFacetState
+};

package/dist/Components/Facets/FacetListCard.d.ts

@@ -0,0 +1,38 @@
+import { Card } from "../Cards/index.js";
+import { type Filters } from "../../Models/Filters/index.js";
+import { type ComponentProps, type ReactNode } from "react";
+export interface FacetListCardProps extends Omit<ComponentProps<typeof Card>, "children"> {
+    /** Current filter values, read to decide whether the reset button has anything to reset */
+    filters: Filters;
+    /** Handler for resetting all filters */
+    onResetFilters?: () => void;
+    /** Custom header content (e.g., title, reset button) */
+    headerContent?: ReactNode;
+    /** Whether to show default header with title and reset button */
+    showDefaultHeader?: boolean;
+    /** Title for the default header */
+    title?: string;
+    /** Filter facet components as children */
+    children: ReactNode;
+    /** Whether to skip the Card wrapper and render directly as FacetList */
+    skipCardWrapper?: boolean;
+}
+/**
+ * FacetListCard component that provides a card container for filter facets.
+ * This component combines the Card layout with FacetList functionality,
+ * providing a clean container for facet collections.
+ *
+ * @example
+ * ```tsx
+ * <FacetListCard
+ *   filters={filters}
+ *   onResetFilters={() => setFilters({})}
+ *   title="Filters"
+ *   showDefaultHeader
+ * >
+ *   <MultipleChoiceFacet name="status" title="Status" ... />
+ *   <SingleChoiceFacet name="method" title="Method" ... />
+ * </FacetListCard>
+ * ```
+ */
+export declare function FacetListCard({ filters, onResetFilters, headerContent, showDefaultHeader, title, children, skipCardWrapper, ...cardProps }: FacetListCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Facets/FacetListCard.js

@@ -0,0 +1,47 @@
+import { jsx as t, jsxs as s } from "react/jsx-runtime";
+import { ArrowPathIcon as x } from "@heroicons/react/16/solid";
+import { HeadingLevel as p } from "../Typography/HeadingLevel.js";
+import "react";
+import { FacetList as a } from "./FacetList.js";
+import { countActiveFilters as u } from "../../Models/Filters/active.js";
+import { Card as h } from "../Cards/Card.js";
+function A({
+  filters: o,
+  onResetFilters: l,
+  headerContent: e,
+  showDefaultHeader: r = !1,
+  title: m = "Filters",
+  children: i,
+  skipCardWrapper: n = !1,
+  ...c
+}) {
+  const f = u(o) > 0, d = r ? /* @__PURE__ */ s("div", { className: "flex justify-between items-center", children: [
+    /* @__PURE__ */ t("h3", { className: "text-lg font-medium text-gray-900", children: m }),
+    l && f && /* @__PURE__ */ s(
+      "button",
+      {
+        className: "text-gray-500 mx-1 font-normal text-xs hover:text-gray-700 transition-colors cursor-pointer",
+        onClick: l,
+        type: "button",
+        "aria-label": "Reset all filters",
+        children: [
+          /* @__PURE__ */ t(x, { className: "h-3 w-3 inline-block mr-1" }),
+          "reset"
+        ]
+      }
+    )
+  ] }) : null;
+  return n ? /* @__PURE__ */ t(a, { children: i }) : /* @__PURE__ */ t(
+    h,
+    {
+      header: e || d,
+      hasDefaultPadding: !1,
+      headerClassName: r || e ? void 0 : "hidden",
+      ...c,
+      children: r && !e ? /* @__PURE__ */ t(p, { level: 3, children: /* @__PURE__ */ t(a, { children: i }) }) : /* @__PURE__ */ t(a, { children: i })
+    }
+  );
+}
+export {
+  A as FacetListCard
+};

package/dist/Components/Facets/FacetResetLink.d.ts

@@ -0,0 +1,13 @@
+export interface FacetResetLinkProps {
+    /** Title/label for the facet being reset */
+    title: string;
+    /** Click handler for reset action */
+    onReset: () => void;
+    /** Text content for the link */
+    children?: React.ReactNode;
+}
+/**
+ * FacetResetLink component provides a consistent reset link for facets.
+ * Displays a small "reset" link with an arrow icon that clears filter values.
+ */
+export declare function FacetResetLink({ title, onReset, children }: FacetResetLinkProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Facets/FacetResetLink.js

@@ -0,0 +1,23 @@
+import { jsxs as a, jsx as s } from "react/jsx-runtime";
+import { ArrowPathIcon as i } from "@heroicons/react/16/solid";
+function m({ title: e, onReset: t, children: r }) {
+  const o = r || "reset";
+  return /* @__PURE__ */ a(
+    "a",
+    {
+      href: "#",
+      className: "text-gray-500 font-normal text-[11px] hover:text-gray-700 transition-colors",
+      onClick: (n) => {
+        n.preventDefault(), t();
+      },
+      "aria-label": `Reset ${e}`,
+      children: [
+        /* @__PURE__ */ s(i, { className: "h-2.5 w-2.5 inline-block mr-0.5" }),
+        o
+      ]
+    }
+  );
+}
+export {
+  m as FacetResetLink
+};