@wix/web5-core 1.56.0

package/dist/cjs/components/ui/PlacementLoader.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_jsxFileName","PlacementLoader","ariaLabel","className","default","createElement","role","__self","__source","fileName","lineNumber","columnNumber","exports"],"sources":["../../../../src/components/ui/PlacementLoader.tsx"],"sourcesContent":["import React, { type FC } from 'react';\n\nexport interface PlacementLoaderProps {\n  /** Accessible label announced to screen readers. */\n  ariaLabel?: string;\n  /** Extra class on the outer container. */\n  className?: string;\n}\n\n/**\n * Default skeleton shown while a placement loads — two stub text lines and a\n * larger content block inside a rounded container. Themed via the\n * `--w5-placement-loader-*` CSS variables in `PlacementLoader.css`; client\n * packages can override those tokens to match their brand.\n */\nexport const PlacementLoader: FC<PlacementLoaderProps> = ({\n  ariaLabel = 'Loading',\n  className,\n}) => (\n  <div\n    className={\n      className\n        ? `w5-placement-loader ${className}`\n        : 'w5-placement-loader'\n    }\n    role=\"status\"\n    aria-live=\"polite\"\n    aria-label={ariaLabel}\n  >\n    <div className=\"w5-placement-loader__lines\">\n      <span className=\"w5-placement-loader__line w5-placement-loader__line--short\" />\n      <span className=\"w5-placement-loader__line\" />\n    </div>\n    <span className=\"w5-placement-loader__block\" />\n  </div>\n);\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,IAAAC,YAAA;AASvC;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,eAAyC,GAAGA,CAAC;EACxDC,SAAS,GAAG,SAAS;EACrBC;AACF,CAAC,kBACCN,MAAA,CAAAO,OAAA,CAAAC,aAAA;EACEF,SAAS,EACPA,SAAS,GACL,uBAAuBA,SAAS,EAAE,GAClC,qBACL;EACDG,IAAI,EAAC,QAAQ;EACb,aAAU,QAAQ;EAClB,cAAYJ,SAAU;EAAAK,MAAA;EAAAC,QAAA;IAAAC,QAAA,EAAAT,YAAA;IAAAU,UAAA;IAAAC,YAAA;EAAA;AAAA,gBAEtBd,MAAA,CAAAO,OAAA,CAAAC,aAAA;EAAKF,SAAS,EAAC,4BAA4B;EAAAI,MAAA;EAAAC,QAAA;IAAAC,QAAA,EAAAT,YAAA;IAAAU,UAAA;IAAAC,YAAA;EAAA;AAAA,gBACzCd,MAAA,CAAAO,OAAA,CAAAC,aAAA;EAAMF,SAAS,EAAC,4DAA4D;EAAAI,MAAA;EAAAC,QAAA;IAAAC,QAAA,EAAAT,YAAA;IAAAU,UAAA;IAAAC,YAAA;EAAA;AAAA,CAAE,CAAC,eAC/Ed,MAAA,CAAAO,OAAA,CAAAC,aAAA;EAAMF,SAAS,EAAC,2BAA2B;EAAAI,MAAA;EAAAC,QAAA;IAAAC,QAAA,EAAAT,YAAA;IAAAU,UAAA;IAAAC,YAAA;EAAA;AAAA,CAAE,CAC1C,CAAC,eACNd,MAAA,CAAAO,OAAA,CAAAC,aAAA;EAAMF,SAAS,EAAC,4BAA4B;EAAAI,MAAA;EAAAC,QAAA;IAAAC,QAAA,EAAAT,YAAA;IAAAU,UAAA;IAAAC,YAAA;EAAA;AAAA,CAAE,CAC3C,CACN;AAACC,OAAA,CAAAX,eAAA,GAAAA,eAAA","ignoreList":[]}

package/dist/cjs/components/ui/PromptEntryEmptyState.css

@@ -0,0 +1,172 @@
+.web5-empty-state {
+  width: 100%;
+  /* Subtract the host's fixed top-nav height (measured into this var by
+     inject-host-nav-offset.ts) so the centered empty state fills exactly the
+     space below the nav instead of a full viewport — which would overflow by
+     the nav height and add unnecessary vertical scroll. Falls back to 0px
+     (full 100dvh) when embedded without a pinned host nav. */
+  min-height: calc(100dvh - var(--web5-window-scroll-top-offset, 0px));
+  padding:
+    clamp(1.5rem, 4vw, 3rem)
+    clamp(1.5rem, 4vw, 3rem)
+    clamp(2rem, 5vw, 3rem);
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+}
+
+/* Decorative full-bleed layer behind the content (e.g. a hero image). */
+.web5-empty-state__bg {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.web5-empty-state__inner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  position: relative;
+  z-index: 1;
+}
+
+/* ── Hero (left-aligned) variant ── */
+.web5-empty-state--start .web5-empty-state__inner {
+  justify-content: flex-start;
+}
+
+.web5-empty-state--start .web5-empty-state__content {
+  align-items: flex-start;
+  text-align: left;
+  width: min(100%, var(--pi-empty-start-max-w, 38rem));
+}
+
+.web5-empty-state--start .web5-empty-state__copy {
+  align-items: flex-start;
+}
+
+.web5-empty-state--start .web5-empty-state__prompt {
+  width: 100%;
+}
+
+.web5-empty-state__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--pi-empty-stack-gap, 2rem);
+  width: min(100%, var(--pi-empty-max-w, 60rem));
+  text-align: center;
+}
+
+.web5-empty-state__copy {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.875rem;
+  max-width: min(100%, 42rem);
+}
+
+.web5-empty-state__eyebrow {
+  margin: 0;
+  color: var(--pi-empty-eyebrow-color, var(--pi-field-text));
+  font-family: var(--pi-field-font-family);
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.4;
+  letter-spacing: -0.01em;
+}
+
+.web5-empty-state__title {
+  margin: 0;
+  color: var(--pi-empty-title-color, var(--pi-field-text));
+  font-family: var(--pi-field-font-family);
+  font-size: clamp(2rem, 4vw, 2.625rem);
+  font-weight: 600;
+  line-height: 1.1;
+  letter-spacing: -0.03em;
+  text-wrap: balance;
+}
+
+.web5-empty-state__description {
+  margin: 0;
+  color: var(--pi-empty-description-color, var(--pi-field-text));
+  font-family: var(--pi-field-font-family);
+  font-size: clamp(1rem, 1.3vw, 1.125rem);
+  line-height: 1.45;
+  text-wrap: pretty;
+}
+
+.web5-empty-state__prompt {
+  width: min(100%, 42.1875rem);
+}
+
+.web5-empty-state__prompt .web5-prompt-shell__panel {
+  padding-block: 0;
+  background: transparent;
+  box-shadow: none;
+  backdrop-filter: none;
+}
+
+.web5-empty-state__prompt .web5-prompt-shell__stack {
+  gap: var(--pi-stack-gap);
+}
+
+.web5-empty-state__prompt .web5-prompt-search__inner {
+  width: min(100%, 42.1875rem);
+}
+
+.web5-empty-state__prompt .web5-prompt-field {
+  /* Start as a single line; the textarea auto-grows (SearchSection) up to the
+     input max-height (5 lines) below. */
+  min-height: var(--pi-field-min-h, 3.5rem);
+  align-items: center;
+  padding: 0.75rem 1.3125rem;
+  border-radius: var(--pi-home-entry-field-radius, var(--pi-field-radius-multiline));
+  background: var(--pi-field-bg);
+  box-shadow: var(--pi-field-shadow);
+}
+
+.web5-empty-state__prompt .web5-prompt-input {
+  min-height: 1.75rem;
+  /* Grow up to 5 lines (5 × 1.5rem line-height), then scroll. */
+  max-height: 7.5rem;
+  padding-right: 3.375rem;
+  color: #52575b;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.web5-empty-state__prompt .web5-prompt-input::placeholder {
+  color: var(--pi-field-placeholder);
+}
+
+.web5-empty-state__prompt .web5-prompt-actions {
+  top: auto;
+  right: 0.875rem;
+  bottom: 0.8125rem;
+  transform: none;
+}
+
+@media (max-width: 48rem) {
+  .web5-empty-state {
+    padding:
+      1.5rem
+      1.25rem
+      2rem;
+  }
+
+  .web5-empty-state__content {
+    gap: 1.5rem;
+  }
+
+  .web5-empty-state__copy {
+    max-width: 32rem;
+  }
+
+}

package/dist/cjs/components/ui/PromptEntryEmptyState.js

@@ -0,0 +1,96 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.PromptEntryEmptyState = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("../../lib/utils");
+var _jsxFileName = "/home/builduser/work/c2b6ca0b3fa984ee/packages/web5-core/dist/cjs/components/ui/PromptEntryEmptyState.tsx";
+const PromptEntryEmptyState = ({
+  eyebrow,
+  title,
+  description,
+  children,
+  className,
+  align = 'center',
+  background
+}) => {
+  return /*#__PURE__*/_react.default.createElement("section", {
+    className: (0, _utils.cn)('web5-empty-state', align === 'start' && 'web5-empty-state--start', className),
+    "aria-labelledby": "web5-empty-state-title",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 33,
+      columnNumber: 5
+    }
+  }, background ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "web5-empty-state__bg",
+    "aria-hidden": "true",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 42,
+      columnNumber: 9
+    }
+  }, background) : null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "web5-empty-state__inner",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 46,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "web5-empty-state__content",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 47,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/_react.default.createElement("header", {
+    className: "web5-empty-state__copy",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 48,
+      columnNumber: 11
+    }
+  }, eyebrow ? /*#__PURE__*/_react.default.createElement("p", {
+    className: "web5-empty-state__eyebrow",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 50,
+      columnNumber: 15
+    }
+  }, eyebrow) : null, /*#__PURE__*/_react.default.createElement("h1", {
+    id: "web5-empty-state-title",
+    className: "web5-empty-state__title",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 52,
+      columnNumber: 13
+    }
+  }, title), description ? /*#__PURE__*/_react.default.createElement("p", {
+    className: "web5-empty-state__description",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 56,
+      columnNumber: 15
+    }
+  }, description) : null), children ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "web5-empty-state__prompt",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 61,
+      columnNumber: 13
+    }
+  }, children) : null)));
+};
+exports.PromptEntryEmptyState = PromptEntryEmptyState;
+//# sourceMappingURL=PromptEntryEmptyState.js.map

package/dist/cjs/components/ui/PromptEntryEmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_utils","_jsxFileName","PromptEntryEmptyState","eyebrow","title","description","children","className","align","background","default","createElement","cn","__self","__source","fileName","lineNumber","columnNumber","id","exports"],"sources":["../../../../src/components/ui/PromptEntryEmptyState.tsx"],"sourcesContent":["import React, { FC, ReactNode } from 'react';\nimport { cn } from '../../lib/utils';\n\nexport interface PromptEntryEmptyStateProps {\n  eyebrow?: string;\n  title: string;\n  description?: string;\n  children?: ReactNode;\n  className?: string;\n  /**\n   * Content alignment. `'center'` (default) keeps the classic centered card.\n   * `'start'` left-aligns the copy + prompt against the left edge for a hero\n   * layout (used together with a full-bleed `background`).\n   */\n  align?: 'center' | 'start';\n  /**\n   * Optional decorative layer rendered behind the content (e.g. a hero image).\n   * Sits in an absolutely-positioned, non-interactive layer below the copy.\n   */\n  background?: ReactNode;\n}\n\nexport const PromptEntryEmptyState: FC<PromptEntryEmptyStateProps> = ({\n  eyebrow,\n  title,\n  description,\n  children,\n  className,\n  align = 'center',\n  background,\n}) => {\n  return (\n    <section\n      className={cn(\n        'web5-empty-state',\n        align === 'start' && 'web5-empty-state--start',\n        className,\n      )}\n      aria-labelledby=\"web5-empty-state-title\"\n    >\n      {background ? (\n        <div className=\"web5-empty-state__bg\" aria-hidden=\"true\">\n          {background}\n        </div>\n      ) : null}\n      <div className=\"web5-empty-state__inner\">\n        <div className=\"web5-empty-state__content\">\n          <header className=\"web5-empty-state__copy\">\n            {eyebrow ? (\n              <p className=\"web5-empty-state__eyebrow\">{eyebrow}</p>\n            ) : null}\n            <h1 id=\"web5-empty-state-title\" className=\"web5-empty-state__title\">\n              {title}\n            </h1>\n            {description ? (\n              <p className=\"web5-empty-state__description\">{description}</p>\n            ) : null}\n          </header>\n\n          {children ? (\n            <div className=\"web5-empty-state__prompt\">{children}</div>\n          ) : null}\n        </div>\n      </div>\n    </section>\n  );\n};\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAAqC,IAAAE,YAAA;AAqB9B,MAAMC,qBAAqD,GAAGA,CAAC;EACpEC,OAAO;EACPC,KAAK;EACLC,WAAW;EACXC,QAAQ;EACRC,SAAS;EACTC,KAAK,GAAG,QAAQ;EAChBC;AACF,CAAC,KAAK;EACJ,oBACEZ,MAAA,CAAAa,OAAA,CAAAC,aAAA;IACEJ,SAAS,EAAE,IAAAK,SAAE,EACX,kBAAkB,EAClBJ,KAAK,KAAK,OAAO,IAAI,yBAAyB,EAC9CD,SACF,CAAE;IACF,mBAAgB,wBAAwB;IAAAM,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAd,YAAA;MAAAe,UAAA;MAAAC,YAAA;IAAA;EAAA,GAEvCR,UAAU,gBACTZ,MAAA,CAAAa,OAAA,CAAAC,aAAA;IAAKJ,SAAS,EAAC,sBAAsB;IAAC,eAAY,MAAM;IAAAM,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAd,YAAA;MAAAe,UAAA;MAAAC,YAAA;IAAA;EAAA,GACrDR,UACE,CAAC,GACJ,IAAI,eACRZ,MAAA,CAAAa,OAAA,CAAAC,aAAA;IAAKJ,SAAS,EAAC,yBAAyB;IAAAM,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAd,YAAA;MAAAe,UAAA;MAAAC,YAAA;IAAA;EAAA,gBACtCpB,MAAA,CAAAa,OAAA,CAAAC,aAAA;IAAKJ,SAAS,EAAC,2BAA2B;IAAAM,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAd,YAAA;MAAAe,UAAA;MAAAC,YAAA;IAAA;EAAA,gBACxCpB,MAAA,CAAAa,OAAA,CAAAC,aAAA;IAAQJ,SAAS,EAAC,wBAAwB;IAAAM,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAd,YAAA;MAAAe,UAAA;MAAAC,YAAA;IAAA;EAAA,GACvCd,OAAO,gBACNN,MAAA,CAAAa,OAAA,CAAAC,aAAA;IAAGJ,SAAS,EAAC,2BAA2B;IAAAM,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAd,YAAA;MAAAe,UAAA;MAAAC,YAAA;IAAA;EAAA,GAAEd,OAAW,CAAC,GACpD,IAAI,eACRN,MAAA,CAAAa,OAAA,CAAAC,aAAA;IAAIO,EAAE,EAAC,wBAAwB;IAACX,SAAS,EAAC,yBAAyB;IAAAM,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAd,YAAA;MAAAe,UAAA;MAAAC,YAAA;IAAA;EAAA,GAChEb,KACC,CAAC,EACJC,WAAW,gBACVR,MAAA,CAAAa,OAAA,CAAAC,aAAA;IAAGJ,SAAS,EAAC,+BAA+B;IAAAM,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAd,YAAA;MAAAe,UAAA;MAAAC,YAAA;IAAA;EAAA,GAAEZ,WAAe,CAAC,GAC5D,IACE,CAAC,EAERC,QAAQ,gBACPT,MAAA,CAAAa,OAAA,CAAAC,aAAA;IAAKJ,SAAS,EAAC,0BAA0B;IAAAM,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAd,YAAA;MAAAe,UAAA;MAAAC,YAAA;IAAA;EAAA,GAAEX,QAAc,CAAC,GACxD,IACD,CACF,CACE,CAAC;AAEd,CAAC;AAACa,OAAA,CAAAjB,qBAAA,GAAAA,qBAAA","ignoreList":[]}