@photon-ai/pho-ui 4.12.0 → 4.13.0

package/dist/chunks/box-search-C9EVZgcb.js

@@ -0,0 +1,56 @@
+"use client";
+import { t as m } from "./cn-ChIgwEl3.js";
+import { t as d } from "./IconSearch-BKAHkLyX.js";
+import { t as f } from "./IconX-pZ9vrtSr.js";
+import { t } from "./input-group-fc9_jD4d.js";
+import { useRef as x } from "react";
+import { jsx as e, jsxs as b } from "react/jsx-runtime";
+var y = "has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-pho-primary has-[input:focus-visible]:ring-1 has-[input:focus-visible]:ring-pho-primary", g = "my-0.5 w-full min-w-0 flex-1 bg-transparent py-1.5 text-pho-primary outline-none placeholder:text-pho-placeholder disabled:cursor-not-allowed [&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none";
+function A({ className: l, onClear: a, trailing: i, value: n, onChange: p, disabled: s, ref: o, ...u }) {
+  const c = x(null), h = n != null && String(n) !== "";
+  return /* @__PURE__ */ b(t.Root, {
+    size: "sm",
+    className: m("group/search", y, l),
+    children: [
+      /* @__PURE__ */ e(t.Addon, { children: /* @__PURE__ */ e(d, {
+        "aria-hidden": !0,
+        className: "text-pho-description group-focus-within/search:text-pho-primary transition-colors duration-100 ease-linear"
+      }) }),
+      /* @__PURE__ */ e("input", {
+        ref: (r) => {
+          c.current = r, typeof o == "function" ? o(r) : o != null && (o.current = r);
+        },
+        type: "search",
+        value: n,
+        onChange: (r) => {
+          r.stopPropagation(), p?.(r);
+        },
+        disabled: s,
+        autoComplete: "off",
+        spellCheck: !1,
+        className: g,
+        ...u
+      }),
+      i != null ? /* @__PURE__ */ e(t.Addon, {
+        className: "text-pho-description text-xs tabular-nums",
+        children: i
+      }) : null,
+      a != null && h && !s ? /* @__PURE__ */ e(t.Addon, { children: /* @__PURE__ */ e("button", {
+        type: "button",
+        "aria-label": "Clear search",
+        tabIndex: -1,
+        onClick: () => {
+          a(), c.current?.focus();
+        },
+        className: "text-pho-secondary hover:text-pho-secondary-hover flex cursor-pointer items-center transition-colors duration-100 ease-linear",
+        children: /* @__PURE__ */ e(f, { "aria-hidden": !0 })
+      }) }) : null
+    ]
+  });
+}
+export {
+  y as n,
+  A as t
+};
+
+//# sourceMappingURL=box-search-C9EVZgcb.js.map

package/dist/chunks/box-search-C9EVZgcb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"box-search-C9EVZgcb.js","names":[],"sources":["../../src/components/input-group/box-search.tsx"],"sourcesContent":["import { useRef, type ComponentProps, type ReactNode } from \"react\";\nimport { IconSearch, IconX } from \"@tabler/icons-react\";\nimport { cn } from \"../../utils/cn\";\nimport { InputGroup } from \"./input-group\";\n\n/**\n * The quiet focus of a search riding on a list or table. The field keeps\n * its resting hairline when it takes focus: the list it narrows is where\n * the eye goes, and a ring would box the field off from it. Focus shows\n * in the caret and in the magnifier, which takes the primary ink. Put it\n * on the field's surface after the surface's own classes (an `Input`'s\n * `wrapperClassName`, an `InputGroup.Root`'s `className`): tailwind-merge\n * keeps the ring at its rest width and ink.\n */\nexport const QUIET_SEARCH_FOCUS =\n  \"has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-pho-primary has-[input:focus-visible]:ring-1 has-[input:focus-visible]:ring-pho-primary\";\n\n/**\n * The text control: `InputGroup.Input`'s `sm` classes on a plain input.\n * Not a Base UI `Field.Control` — inside a host's `Field` that would make\n * the search the field's control, taking its name and its label. The\n * browser's own clear glyph gives way to the field's.\n */\nconst BOX_SEARCH_INPUT =\n  \"my-0.5 w-full min-w-0 flex-1 bg-transparent py-1.5 text-pho-primary outline-none placeholder:text-pho-placeholder disabled:cursor-not-allowed [&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none\";\n\nexport interface BoxSearchProps extends Omit<\n  ComponentProps<\"input\">,\n  \"type\" | \"size\" | \"children\"\n> {\n  /**\n   * Empties the query from the field's own clear button, shown while the\n   * field holds text; focus stays in the field. Without it, no button.\n   */\n  onClear?: () => void;\n  /** Quiet words at the field's end, before the clear button — a count. */\n  trailing?: ReactNode;\n  /** Classes for the field's surface: its width, its place in a row. */\n  className?: string;\n}\n\n/**\n * The boxed search over a list or table — an `sm` field with the\n * magnifier leading, a `trailing` slot, and a clear button. Its focus is\n * quiet (see `QUIET_SEARCH_FOCUS`). Shared by `BasicPage.Search`,\n * `FilterBar`, and `Scope`; the boxless face is `GhostSearch`.\n */\nexport function BoxSearch({\n  className,\n  onClear,\n  trailing,\n  value,\n  onChange,\n  disabled,\n  ref,\n  ...props\n}: BoxSearchProps) {\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const filled = value != null && String(value) !== \"\";\n  return (\n    <InputGroup.Root\n      size=\"sm\"\n      className={cn(\"group/search\", QUIET_SEARCH_FOCUS, className)}\n    >\n      <InputGroup.Addon>\n        <IconSearch\n          aria-hidden\n          className=\"text-pho-description group-focus-within/search:text-pho-primary transition-colors duration-100 ease-linear\"\n        />\n      </InputGroup.Addon>\n      <input\n        ref={(node) => {\n          inputRef.current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref != null) ref.current = node;\n        }}\n        type=\"search\"\n        value={value}\n        // The query is the list's, not a form's: an enclosing form that\n        // saves on change or shows a save row once dirty never hears it.\n        onChange={(event) => {\n          event.stopPropagation();\n          onChange?.(event);\n        }}\n        disabled={disabled}\n        autoComplete=\"off\"\n        spellCheck={false}\n        className={BOX_SEARCH_INPUT}\n        {...props}\n      />\n      {trailing != null ? (\n        <InputGroup.Addon className=\"text-pho-description text-xs tabular-nums\">\n          {trailing}\n        </InputGroup.Addon>\n      ) : null}\n      {onClear != null && filled && !disabled ? (\n        <InputGroup.Addon>\n          <button\n            type=\"button\"\n            aria-label=\"Clear search\"\n            // Reachable by click, skipped by Tab: `Escape` clears from the\n            // keyboard, and Tab moves on to the list.\n            tabIndex={-1}\n            onClick={() => {\n              onClear();\n              inputRef.current?.focus();\n            }}\n            className=\"text-pho-secondary hover:text-pho-secondary-hover flex cursor-pointer items-center transition-colors duration-100 ease-linear\"\n          >\n            <IconX aria-hidden />\n          </button>\n        </InputGroup.Addon>\n      ) : null}\n    </InputGroup.Root>\n  );\n}\n"],"mappings":";;;;;;;AAcA,IAAa,IACX,iJAQI,IACJ;AAuBF,SAAgB,EAAU,EACxB,WAAA,GACA,SAAA,GACA,UAAA,GACA,OAAA,GACA,UAAA,GACA,UAAA,GACA,KAAA,GACA,GAAG,EAAA,GACc;AACjB,QAAM,IAAW,EAAgC,IAAI,GAC/C,IAAS,KAAS,QAAQ,OAAO,CAAK,MAAM;AAClD,SACE,gBAAA,EAAC,EAAW,MAAZ;AAAA,IACE,MAAK;AAAA,IACL,WAAW,EAAG,gBAAgB,GAAoB,CAAS;AAAA,IAF7D,UAAA;AAAA,MAIE,gBAAA,EAAC,EAAW,OAAZ,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,QACE,eAAA;AAAA,QACA,WAAU;AAAA,MACX,CAAA,EACe,CAAA;AAAA,MAClB,gBAAA,EAAC,SAAD;AAAA,QACE,KAAA,CAAM,MAAS;AACb,UAAA,EAAS,UAAU,GACf,OAAO,KAAQ,aAAY,EAAI,CAAI,IAC9B,KAAO,SAAM,EAAI,UAAU;AAAA,QACtC;AAAA,QACA,MAAK;AAAA,QACE,OAAA;AAAA,QAGP,UAAA,CAAW,MAAU;AACnB,UAAA,EAAM,gBAAgB,GACtB,IAAW,CAAK;AAAA,QAClB;AAAA,QACU,UAAA;AAAA,QACV,cAAa;AAAA,QACb,YAAY;AAAA,QACZ,WAAW;AAAA,QACX,GAAI;AAAA,MACL,CAAA;AAAA,MACA,KAAY,OACX,gBAAA,EAAC,EAAW,OAAZ;AAAA,QAAkB,WAAU;AAAA,QACzB,UAAA;AAAA,MACe,CAAA,IAChB;AAAA,MACH,KAAW,QAAQ,KAAU,CAAC,IAC7B,gBAAA,EAAC,EAAW,OAAZ,EAAA,UACE,gBAAA,EAAC,UAAD;AAAA,QACE,MAAK;AAAA,QACL,cAAW;AAAA,QAGX,UAAU;AAAA,QACV,SAAA,MAAe;AACb,UAAA,EAAQ,GACR,EAAS,SAAS,MAAM;AAAA,QAC1B;AAAA,QACA,WAAU;AAAA,QAEV,UAAA,gBAAA,EAAC,GAAD,EAAO,eAAA,GAAa,CAAA;AAAA,MACd,CAAA,EACQ,CAAA,IAChB;AAAA,IACW;AAAA;AAErB"}