@acronis-platform/ui-react 0.23.0 → 0.25.0

package/dist/components/ui/search-global/search-global.js

@@ -0,0 +1,60 @@
+import { jsxs as b, jsx as r } from "react/jsx-runtime";
+import * as t from "react";
+import { MagnifierIcon as n } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as h } from "../../../lib/utils.js";
+const d = t.forwardRef(
+  ({
+    className: o,
+    type: e = "search",
+    placeholder: l = "Search anything",
+    shortcut: a = "⌘K",
+    "aria-label": i = "Search",
+    ...c
+  }, s) => /* @__PURE__ */ b(
+    "div",
+    {
+      className: h(
+        "inline-flex h-[var(--ui-search-global-box-height)] w-[var(--ui-search-global-box-width)] min-w-[var(--ui-search-global-box-width-min)] max-w-[var(--ui-search-global-box-width-max)] items-center gap-[var(--ui-search-global-box-gap)]",
+        "rounded-[var(--ui-search-global-box-border-radius)] border-[length:var(--ui-search-global-box-border-width)] border-solid border-transparent px-[var(--ui-search-global-box-padding-x)]",
+        // Gradient border via padding-box (box fill) + border-box (the `--sg-border` gradient).
+        "[--sg-border:var(--ui-search-global-border-color-idle)] hover:[--sg-border:var(--ui-search-global-border-color-hover)] active:[--sg-border:var(--ui-search-global-border-color-active)]",
+        "[background:linear-gradient(var(--ui-search-global-box-color),var(--ui-search-global-box-color))_padding-box,var(--sg-border)_border-box]",
+        "transition-[background] focus-within:ring-[3px] focus-within:ring-[var(--ui-focus-primary)]",
+        o
+      ),
+      children: [
+        /* @__PURE__ */ r(
+          n,
+          {
+            size: 16,
+            className: "shrink-0 text-[var(--ui-search-global-icon-color)]"
+          }
+        ),
+        /* @__PURE__ */ r(
+          "input",
+          {
+            ref: s,
+            type: e,
+            placeholder: l,
+            "aria-label": i,
+            className: "ui-search-global-placeholoder-text-style h-full min-w-0 flex-1 border-0 bg-transparent p-0 text-foreground outline-none placeholder:text-[var(--ui-search-global-placeholoder-color)] [&::-webkit-search-cancel-button]:appearance-none",
+            ...c
+          }
+        ),
+        a != null && /* @__PURE__ */ r(
+          "span",
+          {
+            "aria-hidden": !0,
+            className: "ui-search-global-shortcut-text-style shrink-0 whitespace-nowrap text-[var(--ui-search-global-shortcut-color)]",
+            children: a
+          }
+        )
+      ]
+    }
+  )
+);
+d.displayName = "SearchGlobal";
+export {
+  d as SearchGlobal
+};
+//# sourceMappingURL=search-global.js.map

package/dist/components/ui/search-global/search-global.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-global.js","sources":["../../../../src/components/ui/search-global/search-global.tsx"],"sourcesContent":["import * as React from 'react';\nimport { MagnifierIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// A global (\"search anything\") field: a 48px pill with a gradient border (the\n// dedicated `--ui-search-global-*` token tier), a leading magnifier, a borderless\n// native input, and a trailing keyboard-shortcut hint (⌘K by default).\n//\n// The border is a brand gradient, not a flat color, so it can't go through\n// `border-color`. Instead a private `--sg-border` custom property holds the\n// active gradient and the box paints it with the standard padding-box/border-box\n// double-background trick (box fill in padding-box, gradient in border-box over a\n// transparent border). State swaps only the gradient: idle\n// (`--ui-search-global-border-color-idle`) / hover / active (`:active`, the\n// darkest). Focus reuses the idle gradient plus a 3px `--ui-focus-primary` ring\n// via `focus-within`, mirroring the Figma focused state. The magnifier +\n// placeholder take the AI-purple `--ui-search-global-icon-color` /\n// `-placeholoder-color` (the token tier keeps Figma's \"placeholoder\" spelling);\n// the shortcut is `--ui-search-global-shortcut-color`.\n\nexport interface SearchGlobalProps extends React.ComponentPropsWithoutRef<'input'> {\n  /** Keyboard-shortcut hint shown at the trailing edge (decorative). Pass `null` to hide. */\n  shortcut?: React.ReactNode;\n}\n\nconst SearchGlobal = React.forwardRef<HTMLInputElement, SearchGlobalProps>(\n  (\n    {\n      className,\n      type = 'search',\n      placeholder = 'Search anything',\n      shortcut = '⌘K',\n      'aria-label': ariaLabel = 'Search',\n      ...props\n    },\n    ref\n  ) => (\n    <div\n      className={cn(\n        'inline-flex h-[var(--ui-search-global-box-height)] w-[var(--ui-search-global-box-width)] min-w-[var(--ui-search-global-box-width-min)] max-w-[var(--ui-search-global-box-width-max)] items-center gap-[var(--ui-search-global-box-gap)]',\n        'rounded-[var(--ui-search-global-box-border-radius)] border-[length:var(--ui-search-global-box-border-width)] border-solid border-transparent px-[var(--ui-search-global-box-padding-x)]',\n        // Gradient border via padding-box (box fill) + border-box (the `--sg-border` gradient).\n        '[--sg-border:var(--ui-search-global-border-color-idle)] hover:[--sg-border:var(--ui-search-global-border-color-hover)] active:[--sg-border:var(--ui-search-global-border-color-active)]',\n        '[background:linear-gradient(var(--ui-search-global-box-color),var(--ui-search-global-box-color))_padding-box,var(--sg-border)_border-box]',\n        'transition-[background] focus-within:ring-[3px] focus-within:ring-[var(--ui-focus-primary)]',\n        className\n      )}\n    >\n      <MagnifierIcon\n        size={16}\n        className=\"shrink-0 text-[var(--ui-search-global-icon-color)]\"\n      />\n      <input\n        ref={ref}\n        type={type}\n        placeholder={placeholder}\n        aria-label={ariaLabel}\n        className=\"ui-search-global-placeholoder-text-style h-full min-w-0 flex-1 border-0 bg-transparent p-0 text-foreground outline-none placeholder:text-[var(--ui-search-global-placeholoder-color)] [&::-webkit-search-cancel-button]:appearance-none\"\n        {...props}\n      />\n      {shortcut != null && (\n        <span\n          aria-hidden\n          className=\"ui-search-global-shortcut-text-style shrink-0 whitespace-nowrap text-[var(--ui-search-global-shortcut-color)]\"\n        >\n          {shortcut}\n        </span>\n      )}\n    </div>\n  )\n);\nSearchGlobal.displayName = 'SearchGlobal';\n\nexport { SearchGlobal };\n"],"names":["SearchGlobal","React","className","type","placeholder","shortcut","ariaLabel","props","ref","jsxs","cn","jsx","MagnifierIcon"],"mappings":";;;;AA0BA,MAAMA,IAAeC,EAAM;AAAA,EACzB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,aAAAC,IAAc;AAAA,IACd,UAAAC,IAAW;AAAA,IACX,cAAcC,IAAY;AAAA,IAC1B,GAAGC;AAAA,EAAA,GAELC,MAEA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA;AAAA,QAEA;AAAA,QACA;AAAA,QACA;AAAA,QACAR;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,gBAAAS;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,MAAM;AAAA,YACN,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAEZ,gBAAAD;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAAH;AAAA,YACA,MAAAL;AAAA,YACA,aAAAC;AAAA,YACA,cAAYE;AAAA,YACZ,WAAU;AAAA,YACT,GAAGC;AAAA,UAAA;AAAA,QAAA;AAAA,QAELF,KAAY,QACX,gBAAAM;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAW;AAAA,YACX,WAAU;AAAA,YAET,UAAAN;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAIR;AACAL,EAAa,cAAc;"}