@payloadcms/ui 4.0.0-internal.4804abd → 4.0.0-internal.4a8e202

package/dist/widgets/WidgetCard/index.css

@@ -0,0 +1,155 @@
+@layer payload-default {
+  .card.widget-card {
+    --widget-card-visible-rows: 5;
+    --widget-card-row-gap: var(--spacer-1);
+    --widget-card-row-height: 40px;
+    --widget-card-scrollbar-width: 6px;
+    --widget-card-rows-height: calc(
+      (var(--widget-card-row-height) + var(--widget-card-row-gap)) *
+        var(--widget-card-visible-rows) - var(--widget-card-row-gap)
+    );
+
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--spacer-2-5);
+    height: 100%;
+    /* Border + padding + header + header/rows gap + the visible row viewport. */
+    max-height: calc(
+      (var(--stroke-width-small) * 2) + (var(--spacer-2-5) * 3) +
+        var(--text-heading-medium-line-height) + var(--widget-card-rows-height)
+    );
+    overflow: hidden;
+    padding: var(--spacer-2-5);
+  }
+
+  .widget-card__header {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+  }
+
+  .widget-card__title {
+    margin: 0;
+    color: var(--color-text);
+    font-family: var(--text-heading-medium-font-family);
+    font-size: var(--text-heading-medium-font-size);
+    font-weight: var(--text-heading-medium-font-weight);
+    line-height: var(--text-heading-medium-line-height);
+    letter-spacing: var(--text-heading-medium-letter-spacing);
+  }
+
+  .widget-card__rows {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--widget-card-row-gap);
+    min-height: 0;
+    overflow-y: auto;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    scrollbar-color: GrayText transparent;
+    scrollbar-width: thin;
+
+    &::-webkit-scrollbar {
+      width: var(--widget-card-scrollbar-width);
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-corner,
+    &::-webkit-scrollbar-track,
+    &::-webkit-scrollbar-track-piece {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: var(--radius-small, 3px);
+      background: GrayText;
+    }
+  }
+
+  .widget-card__row {
+    margin: 0;
+  }
+
+  .widget-card__row-link {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacer-2);
+    min-height: var(--widget-card-row-height);
+    padding: var(--spacer-1) calc(var(--spacer-1) * 1.5);
+    border: var(--stroke-width-small) solid var(--color-border);
+    border-radius: var(--radius-small, 3px);
+    background: var(--color-bg);
+    color: var(--color-text);
+    text-decoration: none;
+
+    &:hover {
+      background: var(--color-bg-secondary-hover);
+      text-decoration: none;
+    }
+  }
+
+  .widget-card__row-main,
+  .widget-card__row-meta {
+    display: inline-flex;
+    align-items: center;
+    min-width: 0;
+  }
+
+  .widget-card__row-main {
+    flex: 1 1 auto;
+    gap: calc(var(--spacer-1) * 1.5);
+  }
+
+  .widget-card__row-title {
+    overflow: hidden;
+    color: var(--color-text);
+    font-family: var(--text-body-medium-strong-font-family);
+    font-size: var(--text-body-medium-strong-font-size);
+    font-weight: var(--text-body-medium-strong-font-weight);
+    line-height: var(--text-body-medium-strong-line-height);
+    letter-spacing: var(--text-body-medium-strong-letter-spacing);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .widget-card__row-meta {
+    flex: 0 0 auto;
+    gap: var(--spacer-1);
+    padding-left: calc(var(--spacer-1) * 1.5);
+    color: var(--color-text-secondary);
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    line-height: var(--text-body-medium-line-height);
+    letter-spacing: var(--text-body-medium-letter-spacing);
+    white-space: nowrap;
+  }
+
+  .widget-card__type {
+    flex: 0 0 auto;
+    padding: 0 var(--spacer-1);
+    border-radius: var(--radius-small, 3px);
+    background: var(--color-bg-secondary);
+    color: var(--color-text-secondary);
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    line-height: var(--text-body-medium-line-height);
+    letter-spacing: var(--text-body-medium-letter-spacing);
+    white-space: nowrap;
+  }
+
+  .widget-card__thumbnail {
+    width: 24px;
+    height: 24px;
+    flex: 0 0 auto;
+    object-fit: cover;
+    border-radius: var(--radius-small, 3px);
+  }
+
+  .widget-card__empty {
+    margin: 0;
+    color: var(--color-text-secondary);
+  }
+}

package/dist/widgets/WidgetCard/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import '../../elements/Card/index.css';
+import './index.css';
+export type WidgetListItem = {
+    href: string;
+    key: string;
+    main: React.ReactNode;
+    meta?: React.ReactNode;
+};
+export declare function WidgetCard({ children, className, title, }: {
+    children: React.ReactNode;
+    className?: string;
+    title: React.ReactNode;
+}): React.JSX.Element;
+export declare function WidgetList({ emptyMessage, items, }: {
+    emptyMessage: string;
+    items: WidgetListItem[];
+}): React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/widgets/WidgetCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/widgets/WidgetCard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,+BAA+B,CAAA;AACtC,OAAO,aAAa,CAAA;AAEpB,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,CAAA;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,qBASA;AAED,wBAAgB,UAAU,CAAC,EACzB,YAAY,EACZ,KAAK,GACN,EAAE;IACD,YAAY,EAAE,MAAM,CAAA;IACpB,KAAK,EAAE,cAAc,EAAE,CAAA;CACxB,qBAiBA"}

package/dist/widgets/WidgetCard/index.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import '../../elements/Card/index.css';
+import './index.css';
+export function WidgetCard({
+  children,
+  className,
+  title
+}) {
+  return /*#__PURE__*/_jsxs("div", {
+    className: ['card', 'widget-card', className].filter(Boolean).join(' '),
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "widget-card__header",
+      children: /*#__PURE__*/_jsx("h3", {
+        className: "widget-card__title",
+        children: title
+      })
+    }), children]
+  });
+}
+export function WidgetList({
+  emptyMessage,
+  items
+}) {
+  if (items.length === 0) {
+    return /*#__PURE__*/_jsx("p", {
+      className: "widget-card__empty",
+      children: emptyMessage
+    });
+  }
+  return /*#__PURE__*/_jsx("ul", {
+    className: "widget-card__rows",
+    children: items.map(item => /*#__PURE__*/_jsx("li", {
+      className: "widget-card__row",
+      children: /*#__PURE__*/_jsxs("a", {
+        className: "widget-card__row-link",
+        href: item.href,
+        children: [/*#__PURE__*/_jsx("span", {
+          className: "widget-card__row-main",
+          children: item.main
+        }), item.meta != null ? /*#__PURE__*/_jsx("span", {
+          className: "widget-card__row-meta",
+          children: item.meta
+        }) : null]
+      })
+    }, item.key))
+  });
+}
+//# sourceMappingURL=index.js.map

package/dist/widgets/WidgetCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","WidgetCard","children","className","title","_jsxs","filter","Boolean","join","_jsx","WidgetList","emptyMessage","items","length","map","item","href","main","meta","key"],"sources":["../../../src/widgets/WidgetCard/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport '../../elements/Card/index.css'\nimport './index.css'\n\nexport type WidgetListItem = {\n  href: string\n  key: string\n  main: React.ReactNode\n  meta?: React.ReactNode\n}\n\nexport function WidgetCard({\n  children,\n  className,\n  title,\n}: {\n  children: React.ReactNode\n  className?: string\n  title: React.ReactNode\n}) {\n  return (\n    <div className={['card', 'widget-card', className].filter(Boolean).join(' ')}>\n      <div className=\"widget-card__header\">\n        <h3 className=\"widget-card__title\">{title}</h3>\n      </div>\n      {children}\n    </div>\n  )\n}\n\nexport function WidgetList({\n  emptyMessage,\n  items,\n}: {\n  emptyMessage: string\n  items: WidgetListItem[]\n}) {\n  if (items.length === 0) {\n    return <p className=\"widget-card__empty\">{emptyMessage}</p>\n  }\n\n  return (\n    <ul className=\"widget-card__rows\">\n      {items.map((item) => (\n        <li className=\"widget-card__row\" key={item.key}>\n          <a className=\"widget-card__row-link\" href={item.href}>\n            <span className=\"widget-card__row-main\">{item.main}</span>\n            {item.meta != null ? <span className=\"widget-card__row-meta\">{item.meta}</span> : null}\n          </a>\n        </li>\n      ))}\n    </ul>\n  )\n}\n"],"mappings":";AAAA,OAAOA,KAAA,MAAW;AAElB,OAAO;AACP,OAAO;AASP,OAAO,SAASC,WAAW;EACzBC,QAAQ;EACRC,SAAS;EACTC;AAAK,CAKN;EACC,oBACEC,KAAA,CAAC;IAAIF,SAAA,EAAW,CAAC,QAAQ,eAAeA,SAAA,CAAU,CAACG,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;4BACtEC,IAAA,CAAC;MAAIN,SAAA,EAAU;gBACb,aAAAM,IAAA,CAAC;QAAGN,SAAA,EAAU;kBAAsBC;;QAErCF,QAAA;;AAGP;AAEA,OAAO,SAASQ,WAAW;EACzBC,YAAY;EACZC;AAAK,CAIN;EACC,IAAIA,KAAA,CAAMC,MAAM,KAAK,GAAG;IACtB,oBAAOJ,IAAA,CAAC;MAAEN,SAAA,EAAU;gBAAsBQ;;EAC5C;EAEA,oBACEF,IAAA,CAAC;IAAGN,SAAA,EAAU;cACXS,KAAA,CAAME,GAAG,CAAEC,IAAA,iBACVN,IAAA,CAAC;MAAGN,SAAA,EAAU;gBACZ,aAAAE,KAAA,CAAC;QAAEF,SAAA,EAAU;QAAwBa,IAAA,EAAMD,IAAA,CAAKC,IAAI;gCAClDP,IAAA,CAAC;UAAKN,SAAA,EAAU;oBAAyBY,IAAA,CAAKE;YAC7CF,IAAA,CAAKG,IAAI,IAAI,oBAAOT,IAAA,CAAC;UAAKN,SAAA,EAAU;oBAAyBY,IAAA,CAAKG;aAAe;;OAHhDH,IAAA,CAAKI,GAAG;;AAStD","ignoreList":[]}