@acronis-platform/ui-react 0.58.0 → 0.61.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acronis-platform/ui-react",
-  "version": "0.58.0",
+  "version": "0.61.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/acronis/uikit.git",
@@ -49,13 +49,14 @@
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "date-fns": "4.3.0",
+    "embla-carousel-react": "8.6.0",
     "react-day-picker": "10.0.1",
     "react-resizable-panels": "4.11.2",
     "recharts": "3.8.1",
     "tailwind-merge": "3.6.0",
-    "@acronis-platform/design-assets": "0.4.0",
-    "@acronis-platform/icons-react": "0.5.0",
-    "@acronis-platform/tokens-pd": "2.3.0"
+    "@acronis-platform/icons-react": "0.6.0",
+    "@acronis-platform/tokens-pd": "2.5.0",
+    "@acronis-platform/design-assets": "0.4.1"
   },
   "devDependencies": {
     "@figma/code-connect": "1.4.8",

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

@@ -1,60 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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;"}

package/dist/src/components/ui/search-global/index.d.ts

@@ -1 +0,0 @@
-export { SearchGlobal, type SearchGlobalProps } from './search-global';

package/dist/src/components/ui/search-global/search-global.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-export interface SearchGlobalProps extends React.ComponentPropsWithoutRef<'input'> {
-    /** Keyboard-shortcut hint shown at the trailing edge (decorative). Pass `null` to hide. */
-    shortcut?: React.ReactNode;
-}
-declare const SearchGlobal: React.ForwardRefExoticComponent<SearchGlobalProps & React.RefAttributes<HTMLInputElement>>;
-export { SearchGlobal };