@misoto22/kioku-ui 0.1.0 → 0.2.0

package/dist/Overlay/Overlay.d.ts

@@ -0,0 +1,17 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/** Props for the dismissal, focus, and scroll behaviour behind modal surfaces. */
+export interface OverlayProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className'> {
+    readonly children: ReactNode;
+    readonly dismissOnOutsideClick?: boolean;
+    readonly lockScroll?: boolean;
+    readonly onDismiss?: () => void;
+    readonly open: boolean;
+    readonly scrim?: boolean;
+    readonly trapFocus?: boolean;
+}
+/**
+ * Owns the behaviour every modal surface repeats: an optional scrim, Escape
+ * and outside-click dismissal, a focus trap, and a scroll lock. It carries no
+ * role of its own so the caller names the surface it wraps.
+ */
+export declare function Overlay({ children, dismissOnOutsideClick, lockScroll, onDismiss, open, scrim, trapFocus, ...props }: OverlayProps): import("react").JSX.Element | null;

package/dist/Overlay/Overlay.doc.d.ts

@@ -0,0 +1,11 @@
+export declare const overlayDoc: {
+    name: string;
+    description: string;
+    props: {
+        name: string;
+        description: string;
+    }[];
+    inheritedProps: string[];
+    example: string;
+    storyId: string;
+};

package/dist/Overlay/Overlay.doc.js

@@ -0,0 +1,30 @@
+import "../styles/stylex.css";
+export const overlayDoc = {
+  name: 'Overlay',
+  description: 'Supplies scrim, dismissal, focus, and scroll behaviour.',
+  props: [{
+    name: 'children',
+    description: 'Supplies the surface the overlay wraps.'
+  }, {
+    name: 'dismissOnOutsideClick',
+    description: 'Allows a click on the scrim to dismiss the overlay.'
+  }, {
+    name: 'lockScroll',
+    description: 'Freezes document scrolling while open.'
+  }, {
+    name: 'onDismiss',
+    description: 'Runs on Escape or an outside click.'
+  }, {
+    name: 'open',
+    description: 'Controls whether the overlay renders.'
+  }, {
+    name: 'scrim',
+    description: 'Draws a dimming layer behind the surface.'
+  }, {
+    name: 'trapFocus',
+    description: 'Confines Tab to the wrapped surface.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except children and className'],
+  example: '<Overlay onDismiss={close} open={open}><Card>...</Card></Overlay>',
+  storyId: 'core-overlay--default'
+};

package/dist/Overlay/Overlay.js

@@ -0,0 +1,74 @@
+import * as stylex from '@stylexjs/stylex';
+import { useEffect, useState } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import { useFocusTrap } from '../hooks/useFocusTrap.js';
+import { useScrollLock } from '../hooks/useScrollLock.js';
+import { Layer } from '../Layer/index.js';
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const scrimEnter = "x18re5ia-B";
+/** Props for the dismissal, focus, and scroll behaviour behind modal surfaces. */
+
+/**
+ * Owns the behaviour every modal surface repeats: an optional scrim, Escape
+ * and outside-click dismissal, a focus trap, and a scroll lock. It carries no
+ * role of its own so the caller names the surface it wraps.
+ */
+export function Overlay({
+  children,
+  dismissOnOutsideClick = true,
+  lockScroll = true,
+  onDismiss,
+  open,
+  scrim = true,
+  trapFocus = true,
+  ...props
+}) {
+  const [surface, setSurface] = useState(null);
+  useFocusTrap(surface, open && trapFocus);
+  useScrollLock(open && lockScroll);
+  useEffect(() => {
+    if (!open || !onDismiss) {
+      return;
+    }
+    function handleKeyDown(event) {
+      if (event.key === 'Escape') {
+        event.stopPropagation();
+        onDismiss?.();
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [onDismiss, open]);
+  if (!open) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(Layer, {
+    children: /*#__PURE__*/_jsx("div", {
+      ...props,
+      onMouseDown: event => {
+        if (dismissOnOutsideClick && event.target === event.currentTarget) {
+          onDismiss?.();
+        }
+      },
+      ...{
+        0: {
+          className: "x6s0dn4 x1g14cin xqcmdr3 x1aquc0h xwm07dd x158cxwz x78zum5 x10a8y8t xl56j7k x1cfciu7 xixxii4"
+        },
+        1: {
+          className: "x6s0dn4 x1g14cin xqcmdr3 x1aquc0h xwm07dd x78zum5 x10a8y8t xl56j7k xixxii4 xjbqb8w x1717udv x47corl"
+        }
+      }[!!!scrim << 0],
+      children: /*#__PURE__*/_jsx("div", {
+        ref: setSurface,
+        tabIndex: -1,
+        ...{
+          className: "xmz0i5r x193iq5w x1t137rt x67bb7w x15meki4 xz32tfx x1p22nma x17lds6u"
+        },
+        children: children
+      })
+    })
+  });
+}

package/dist/Overlay/index.d.ts

@@ -0,0 +1 @@
+export { Overlay, type OverlayProps } from './Overlay.js';

package/dist/Overlay/index.js

@@ -0,0 +1,2 @@
+import "../styles/stylex.css";
+export { Overlay } from './Overlay.js';

package/dist/Pagination/Pagination.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'react';
+/** Props for page-number navigation over a bounded result set. */
+export interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'className' | 'onChange'> {
+    readonly label?: string;
+    readonly onChange: (page: number) => void;
+    readonly page: number;
+    readonly pageCount: number;
+    readonly siblingCount?: number;
+}
+/**
+ * Moves between pages of a bounded result set. Use it only when a reader
+ * needs to jump to a specific page; otherwise prefer cursor navigation.
+ */
+export declare function Pagination({ label, onChange, page, pageCount, siblingCount, ...props }: PaginationProps): import("react").JSX.Element;

package/dist/Pagination/Pagination.doc.d.ts

@@ -0,0 +1,11 @@
+export declare const paginationDoc: {
+    name: string;
+    description: string;
+    props: {
+        name: string;
+        description: string;
+    }[];
+    inheritedProps: string[];
+    example: string;
+    storyId: string;
+};

package/dist/Pagination/Pagination.doc.js

@@ -0,0 +1,24 @@
+import "../styles/stylex.css";
+export const paginationDoc = {
+  name: 'Pagination',
+  description: 'Moves between pages of a bounded result set.',
+  props: [{
+    name: 'label',
+    description: 'Names the navigation landmark.'
+  }, {
+    name: 'onChange',
+    description: 'Receives the newly requested page number.'
+  }, {
+    name: 'page',
+    description: 'Identifies the current page, counting from one.'
+  }, {
+    name: 'pageCount',
+    description: 'States how many pages exist in total.'
+  }, {
+    name: 'siblingCount',
+    description: 'Sets how many pages stay visible either side of the current one.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLElement> except children, className, and onChange'],
+  example: '<Pagination onChange={setPage} page={page} pageCount={12} />',
+  storyId: 'core-pagination--default'
+};

package/dist/Pagination/Pagination.js

@@ -0,0 +1,128 @@
+import * as stylex from '@stylexjs/stylex';
+import { semanticTokens } from '../authoring.stylex.js';
+import { useInternationalization } from '../i18n/index.js';
+import { Icon } from '../Icon/index.js';
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Keeps the first page, the last page, and a window around the current one.
+function pageWindow(page, pageCount, span) {
+  const pages = new Set([1, pageCount]);
+  for (let offset = -span; offset <= span; offset += 1) {
+    const candidate = page + offset;
+    if (candidate >= 1 && candidate <= pageCount) {
+      pages.add(candidate);
+    }
+  }
+  const ordered = [...pages].sort((left, right) => left - right);
+  const entries = [];
+  let previous;
+  for (const value of ordered) {
+    if (previous !== undefined && value - previous > 1) {
+      entries.push('gap');
+    }
+    entries.push(value);
+    previous = value;
+  }
+  return entries;
+}
+
+/** Props for page-number navigation over a bounded result set. */
+
+/**
+ * Moves between pages of a bounded result set. Use it only when a reader
+ * needs to jump to a specific page; otherwise prefer cursor navigation.
+ */
+export function Pagination({
+  label = 'Pagination',
+  onChange,
+  page,
+  pageCount,
+  siblingCount = 1,
+  ...props
+}) {
+  const {
+    messages
+  } = useInternationalization();
+  const entries = pageWindow(page, pageCount, siblingCount);
+  return /*#__PURE__*/_jsx("nav", {
+    ...props,
+    "aria-label": label,
+    ...{
+      className: "xj0sio9"
+    },
+    children: /*#__PURE__*/_jsxs("ul", {
+      ...{
+        className: "x6s0dn4 x78zum5 xtl099x x3ct3a4 x10im51j x1c1uobl"
+      },
+      children: [/*#__PURE__*/_jsx("li", {
+        children: /*#__PURE__*/_jsx("button", {
+          "aria-label": messages.paginationPrevious,
+          disabled: page <= 1,
+          onClick: () => {
+            onChange(page - 1);
+          },
+          ...{
+            className: "x6s0dn4 xjbqb8w x8kq9my xng3xce xc342km x9f619 x17y7oyd x1ypdohk x3nfvp2 x7ohnf4 xltg2ad x1vbl8lt xl56j7k x1kbjp2h xx0koyc xov5yc9 x1elc2ff xs2xxs2 xxjumz x609gy3 xtgyt42 x15meki4 xz32tfx x1p22nma x17lds6u xbo0ryh x1kx1cc1 x1975ut4 x1jwpw4l"
+          },
+          type: "button",
+          children: /*#__PURE__*/_jsx(Icon, {
+            children: /*#__PURE__*/_jsx("path", {
+              d: "m15 6-6 6 6 6",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2"
+            })
+          })
+        })
+      }), entries.map((entry, index) => entry === 'gap' ? /*#__PURE__*/_jsx("li", {
+        ...{
+          className: "x1mgtvnk x7ohnf4 xltg2ad x1kbjp2h xov5yc9"
+        },
+        children: /*#__PURE__*/_jsx("span", {
+          "aria-hidden": "true",
+          children: "\u2026"
+        })
+      }, `gap-${index}`) : /*#__PURE__*/_jsx("li", {
+        children: /*#__PURE__*/_jsx("button", {
+          ...(entry === page ? {
+            'aria-current': 'page'
+          } : {}),
+          "aria-label": `Page ${entry}`,
+          onClick: () => {
+            onChange(entry);
+          },
+          ...{
+            0: {
+              className: "x6s0dn4 xjbqb8w x16stqrj x1w5tod1 xeq6m5c x1ejq31n x972fbf xkgv12d xuxrje7 x8kq9my x9f619 x17y7oyd x1ypdohk x3nfvp2 x7ohnf4 xltg2ad xss6m8b x1jcbhmk x1vbl8lt xl56j7k x1kbjp2h xx0koyc xov5yc9 x1elc2ff x1eaenvl xxjumz x15meki4 xz32tfx x1p22nma x17lds6u xbo0ryh x1kx1cc1 x1975ut4 x1jwpw4l"
+            },
+            1: {
+              className: "x6s0dn4 xjbqb8w x1w5tod1 xeq6m5c x1ejq31n x972fbf xkgv12d xuxrje7 x8kq9my x9f619 x3nfvp2 x7ohnf4 xltg2ad xss6m8b x1vbl8lt xl56j7k x1kbjp2h xx0koyc xov5yc9 x1elc2ff x1eaenvl xxjumz x15meki4 xz32tfx x1p22nma x17lds6u x52u802 x1y4yzzg xt0e3qv x1m30uz7"
+            }
+          }[!!(entry === page) << 0],
+          type: "button",
+          children: entry
+        })
+      }, entry)), /*#__PURE__*/_jsx("li", {
+        children: /*#__PURE__*/_jsx("button", {
+          "aria-label": messages.paginationNext,
+          disabled: page >= pageCount,
+          onClick: () => {
+            onChange(page + 1);
+          },
+          ...{
+            className: "x6s0dn4 xjbqb8w x8kq9my xng3xce xc342km x9f619 x17y7oyd x1ypdohk x3nfvp2 x7ohnf4 xltg2ad x1vbl8lt xl56j7k x1kbjp2h xx0koyc xov5yc9 x1elc2ff xs2xxs2 xxjumz x609gy3 xtgyt42 x15meki4 xz32tfx x1p22nma x17lds6u xbo0ryh x1kx1cc1 x1975ut4 x1jwpw4l"
+          },
+          type: "button",
+          children: /*#__PURE__*/_jsx(Icon, {
+            children: /*#__PURE__*/_jsx("path", {
+              d: "m9 6 6 6-6 6",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2"
+            })
+          })
+        })
+      })]
+    })
+  });
+}

package/dist/Pagination/index.d.ts

@@ -0,0 +1 @@
+export { Pagination, type PaginationProps } from './Pagination.js';

package/dist/Pagination/index.js

@@ -0,0 +1,2 @@
+import "../styles/stylex.css";
+export { Pagination } from './Pagination.js';

package/dist/Popover/Popover.d.ts

@@ -0,0 +1,17 @@
+import { type HTMLAttributes, type ReactNode, type RefObject } from 'react';
+import { type Alignment, type Placement } from '../hooks/useAnchoredPosition.js';
+/** Props for a surface anchored to a trigger element. */
+export interface PopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className'> {
+    readonly alignment?: Alignment;
+    readonly anchorRef: RefObject<HTMLElement | null>;
+    readonly children: ReactNode;
+    readonly offset?: number;
+    readonly onDismiss?: () => void;
+    readonly open: boolean;
+    readonly placement?: Placement;
+}
+/**
+ * Floats content beside an anchor. Dismissal is non-modal: Escape and a click
+ * outside both close it, but the page behind stays scrollable and reachable.
+ */
+export declare function Popover({ alignment, anchorRef, children, id, offset, onDismiss, open, placement, role, style, ...props }: PopoverProps): import("react").JSX.Element | null;

package/dist/Popover/Popover.doc.d.ts

@@ -0,0 +1,11 @@
+export declare const popoverDoc: {
+    name: string;
+    description: string;
+    props: {
+        name: string;
+        description: string;
+    }[];
+    inheritedProps: string[];
+    example: string;
+    storyId: string;
+};

package/dist/Popover/Popover.doc.js

@@ -0,0 +1,30 @@
+import "../styles/stylex.css";
+export const popoverDoc = {
+  name: 'Popover',
+  description: 'Floats content beside an anchor without blocking the page.',
+  props: [{
+    name: 'alignment',
+    description: 'Lines the surface up along the cross axis.'
+  }, {
+    name: 'anchorRef',
+    description: 'References the element to float beside.'
+  }, {
+    name: 'children',
+    description: 'Supplies the floating content.'
+  }, {
+    name: 'offset',
+    description: 'Sets the gap between anchor and surface.'
+  }, {
+    name: 'onDismiss',
+    description: 'Runs on Escape or an outside click.'
+  }, {
+    name: 'open',
+    description: 'Controls whether the surface renders.'
+  }, {
+    name: 'placement',
+    description: 'Selects the preferred side of the anchor.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except children and className'],
+  example: '<Popover anchorRef={triggerRef} onDismiss={close} open={open}>Details</Popover>',
+  storyId: 'core-popover--default'
+};

package/dist/Popover/Popover.js

@@ -0,0 +1,93 @@
+import * as stylex from '@stylexjs/stylex';
+import { useEffect, useId } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import { useAnchoredPosition } from '../hooks/useAnchoredPosition.js';
+import { Layer } from '../Layer/index.js';
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Props for a surface anchored to a trigger element. */
+
+/**
+ * Floats content beside an anchor. Dismissal is non-modal: Escape and a click
+ * outside both close it, but the page behind stays scrollable and reachable.
+ */
+export function Popover({
+  alignment,
+  anchorRef,
+  children,
+  id,
+  offset,
+  onDismiss,
+  open,
+  placement,
+  role = 'dialog',
+  style,
+  ...props
+}) {
+  const generatedId = useId();
+  const surfaceId = id ?? generatedId;
+  const {
+    position,
+    surface,
+    surfaceRef
+  } = useAnchoredPosition(anchorRef, open, {
+    ...(alignment ? {
+      alignment
+    } : {}),
+    ...(offset === undefined ? {} : {
+      offset
+    }),
+    ...(placement ? {
+      placement
+    } : {})
+  });
+  useEffect(() => {
+    if (!open || !onDismiss) {
+      return;
+    }
+    function handleKeyDown(event) {
+      if (event.key === 'Escape') {
+        onDismiss?.();
+      }
+    }
+    function handlePointerDown(event) {
+      const target = event.target;
+      if (surface?.contains(target) || anchorRef.current?.contains(target)) {
+        return;
+      }
+      onDismiss?.();
+    }
+    document.addEventListener('keydown', handleKeyDown);
+    document.addEventListener('mousedown', handlePointerDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      document.removeEventListener('mousedown', handlePointerDown);
+    };
+  }, [anchorRef, onDismiss, open, surface]);
+  if (!open) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(Layer, {
+    children: /*#__PURE__*/_jsx("div", {
+      ...props,
+      "data-placement": position?.placement,
+      id: surfaceId,
+      ref: surfaceRef,
+      role: role,
+      ...{
+        0: {
+          className: "x40o0ze x7xrhi9 x165nt33 x1y4yzzg xj0sio9 x1ti3rys xgz4m7n x1ezks3f x14rluyd xixxii4"
+        },
+        1: {
+          className: "x40o0ze x7xrhi9 x165nt33 x1y4yzzg xj0sio9 x1ti3rys xgz4m7n x1ezks3f x14rluyd xixxii4 xlshs6z"
+        }
+      }[!!(position === undefined) << 0],
+      style: {
+        ...style,
+        left: position?.left,
+        top: position?.top
+      },
+      children: children
+    })
+  });
+}

package/dist/Popover/index.d.ts

@@ -0,0 +1 @@
+export { Popover, type PopoverProps } from './Popover.js';

package/dist/Popover/index.js

@@ -0,0 +1,2 @@
+import "../styles/stylex.css";
+export { Popover } from './Popover.js';

package/dist/PowerSearch/PowerSearch.d.ts

@@ -0,0 +1,22 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/** One applied search filter. */
+export interface SearchFilter {
+    readonly id: string;
+    readonly label: string;
+}
+/** Props for a search field that carries applied filters. */
+export interface PowerSearchProps extends Omit<HTMLAttributes<HTMLFormElement>, 'children' | 'className' | 'onSubmit' | 'role'> {
+    readonly filters?: readonly SearchFilter[];
+    readonly label: string;
+    readonly onFiltersChange?: (filters: readonly SearchFilter[]) => void;
+    readonly onSearch: (query: string) => void;
+    readonly clearLabel?: string;
+    readonly placeholder?: string;
+    readonly submitLabel?: ReactNode;
+}
+/**
+ * Searches with the filters already applied shown beside the query, so a
+ * reader can see and undo each narrowing rather than wondering why a result
+ * set looks short.
+ */
+export declare function PowerSearch({ clearLabel, filters, label, onFiltersChange, onSearch, placeholder, submitLabel, ...props }: PowerSearchProps): import("react").JSX.Element;

package/dist/PowerSearch/PowerSearch.doc.d.ts

@@ -0,0 +1,11 @@
+export declare const powerSearchDoc: {
+    name: string;
+    description: string;
+    props: {
+        name: string;
+        description: string;
+    }[];
+    inheritedProps: string[];
+    example: string;
+    storyId: string;
+};

package/dist/PowerSearch/PowerSearch.doc.js

@@ -0,0 +1,27 @@
+import "../styles/stylex.css";
+export const powerSearchDoc = {
+  name: 'PowerSearch',
+  description: 'Searches with the applied filters shown beside the query.',
+  props: [{
+    name: 'filters',
+    description: 'Supplies the filters already applied.'
+  }, {
+    name: 'label',
+    description: 'Names the search field.'
+  }, {
+    name: 'onFiltersChange',
+    description: 'Receives the remaining filters.'
+  }, {
+    name: 'onSearch',
+    description: 'Receives the submitted query.'
+  }, {
+    name: 'placeholder',
+    description: 'Hints at what to search for.'
+  }, {
+    name: 'submitLabel',
+    description: 'Names the submit control.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLFormElement> except children, className, onSubmit, and role'],
+  example: '<PowerSearch label="Search releases" onSearch={run} filters={applied} />',
+  storyId: 'core-power-search--default'
+};

package/dist/PowerSearch/PowerSearch.js

@@ -0,0 +1,108 @@
+import * as stylex from '@stylexjs/stylex';
+import { useState } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import { Button } from '../Button/index.js';
+import { Icon } from '../Icon/index.js';
+import { Token } from '../Token/index.js';
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** One applied search filter. */
+
+/** Props for a search field that carries applied filters. */
+
+/**
+ * Searches with the filters already applied shown beside the query, so a
+ * reader can see and undo each narrowing rather than wondering why a result
+ * set looks short.
+ */
+export function PowerSearch({
+  clearLabel = 'Clear search',
+  filters = [],
+  label,
+  onFiltersChange,
+  onSearch,
+  placeholder,
+  submitLabel = 'Search',
+  ...props
+}) {
+  const [query, setQuery] = useState('');
+  function handleSubmit(event) {
+    event.preventDefault();
+    onSearch(query);
+  }
+  return /*#__PURE__*/_jsxs("form", {
+    ...props,
+    onSubmit: handleSubmit,
+    role: "search",
+    ...{
+      className: "xrvj5dj xj0sio9 x1ap6kct"
+    },
+    children: [/*#__PURE__*/_jsxs("div", {
+      ...{
+        className: "x6s0dn4 x78zum5 x1ap6kct"
+      },
+      children: [/*#__PURE__*/_jsxs("div", {
+        ...{
+          className: "x6s0dn4 xavu78a x1wxkff4 x8kq9my x1jnjmdy xpxnlqs x9f619 x78zum5 x1iyjqo2 x1ap6kct xmm8wyw x10y07nz x1qtbwip x1elc2ff xshfolx xxjumz x12uk28n xc8z1lp x16xryy4 xfswlut xnip9g3 x1lm2vjv"
+        },
+        children: [/*#__PURE__*/_jsx(Icon, {
+          size: "md",
+          tone: "muted",
+          children: /*#__PURE__*/_jsx("path", {
+            d: "M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm5 12 4 4",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2"
+          })
+        }), /*#__PURE__*/_jsx("input", {
+          "aria-label": label,
+          onChange: event => {
+            setQuery(event.currentTarget.value);
+          },
+          placeholder: placeholder,
+          value: query,
+          ...{
+            className: "xjbqb8w xng3xce xc342km x1y4yzzg x1iyjqo2 xj0sio9 x1ti3rys xgz4m7n x1ezks3f xeuugli x1717udv x1ad04t7 x1e4qbc8 xi5y0ii"
+          },
+          type: "search"
+        }), query === '' ? null : /*#__PURE__*/_jsx("button", {
+          "aria-label": clearLabel,
+          onClick: () => {
+            setQuery('');
+          },
+          type: "button",
+          ...{
+            className: "x6s0dn4 xjbqb8w x1l6hjkl xng3xce xc342km x17y7oyd x1ypdohk x3nfvp2 x2lah0s x1717udv x1n2onr6 x1elc2ff xt3l3uh xxjumz x1cpjm7i x17f96yv x1knuo7r xfbisj7 x1hmns74 xbnewub x1o8qpxl x15meki4 xz32tfx x1p22nma x17lds6u x1kz4h7b"
+          },
+          children: /*#__PURE__*/_jsx(Icon, {
+            size: "sm",
+            tone: "inherit",
+            children: /*#__PURE__*/_jsx("path", {
+              d: "M6 6 18 18M18 6 6 18",
+              fill: "none",
+              stroke: "currentColor",
+              strokeLinecap: "round",
+              strokeWidth: "2"
+            })
+          })
+        })]
+      }), /*#__PURE__*/_jsx(Button, {
+        type: "submit",
+        children: submitLabel
+      })]
+    }), filters.length === 0 ? null : /*#__PURE__*/_jsx("ul", {
+      ...{
+        className: "x78zum5 x1a02dak x1ap6kct x3ct3a4 x10im51j x1c1uobl"
+      },
+      children: filters.map(filter => /*#__PURE__*/_jsx("li", {
+        children: /*#__PURE__*/_jsx(Token, {
+          onRemove: () => {
+            onFiltersChange?.(filters.filter(entry => entry.id !== filter.id));
+          },
+          removeLabel: `Remove filter ${filter.label}`,
+          children: filter.label
+        })
+      }, filter.id))
+    })]
+  });
+}

package/dist/PowerSearch/index.d.ts

@@ -0,0 +1 @@
+export { PowerSearch, type PowerSearchProps, type SearchFilter, } from './PowerSearch.js';

package/dist/PowerSearch/index.js

@@ -0,0 +1,2 @@
+import "../styles/stylex.css";
+export { PowerSearch } from './PowerSearch.js';