@payloadcms/ui 3.0.0-alpha.0

package/dist/elements/Card/index.scss

@@ -0,0 +1,42 @@
+@import '../../scss/styles';
+
+.card {
+  background: var(--theme-elevation-50);
+  padding: base(1.25) $baseline;
+  position: relative;
+
+  &__title {
+    @extend %h5;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__actions {
+    position: relative;
+    z-index: 2;
+    margin-top: base(0.5);
+    display: inline-flex;
+
+    .btn {
+      margin: 0;
+    }
+  }
+
+  &--has-onclick {
+    cursor: pointer;
+
+    &:hover {
+      background: var(--theme-elevation-100);
+    }
+  }
+
+  &__click {
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}

package/dist/elements/Card/types.d.ts

@@ -0,0 +1,12 @@
+import type { ElementType } from 'react';
+export type Props = {
+    Link?: ElementType;
+    actions?: React.ReactNode;
+    buttonAriaLabel?: string;
+    href?: string;
+    id?: string;
+    onClick?: () => void;
+    title: string;
+    titleAs?: ElementType;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/elements/Card/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/Card/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAExC,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,WAAW,CAAA;CACtB,CAAA"}

package/dist/elements/CodeEditor/CodeEditor.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { Props } from './types';
+import './index.scss';
+declare const CodeEditor: React.FC<Props>;
+export default CodeEditor;
+//# sourceMappingURL=CodeEditor.d.ts.map

package/dist/elements/CodeEditor/CodeEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../../src/elements/CodeEditor/CodeEditor.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAIpC,OAAO,cAAc,CAAA;AAIrB,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAiC/B,CAAA;AAED,eAAe,UAAU,CAAA"}

package/dist/elements/CodeEditor/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { Props } from './types';
+export declare const CodeEditor: React.FC<Props>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/CodeEditor/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/CodeEditor/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAA;AAE7C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAOpC,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAQtC,CAAA"}

package/dist/elements/CodeEditor/index.scss

@@ -0,0 +1,22 @@
+@import '../../scss/styles';
+
+.code-editor {
+  direction: ltr;
+  @include formInput;
+  height: auto;
+  padding: 0;
+
+  .monaco-editor {
+    .view-overlays .current-line {
+      max-width: calc(100% - 14px);
+      border-width: 0px;
+    }
+
+    &:focus-within {
+      .view-overlays .current-line {
+        border-right: 0;
+        border-width: 1px;
+      }
+    }
+  }
+}

package/dist/elements/CodeEditor/types.d.ts

@@ -0,0 +1,5 @@
+import type { EditorProps } from '@monaco-editor/react';
+export type Props = EditorProps & {
+    readOnly?: boolean;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/elements/CodeEditor/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/CodeEditor/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAEvD,MAAM,MAAM,KAAK,GAAG,WAAW,GAAG;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA"}

package/dist/elements/Collapsible/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { Props } from './types';
+import './index.scss';
+export declare const Collapsible: React.FC<Props>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/Collapsible/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Collapsible/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAGvC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAKpC,OAAO,cAAc,CAAA;AAKrB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAyFvC,CAAA"}

package/dist/elements/Collapsible/index.scss

@@ -0,0 +1,171 @@
+@import '../../scss/styles.scss';
+
+.collapsible {
+  --toggle-pad-h: #{base(0.75)};
+  --toggle-pad-v: #{base(0.5)};
+
+  border-radius: $style-radius-m;
+
+  &__toggle-wrap {
+    position: relative;
+  }
+
+  &__drag {
+    opacity: 0.5;
+    position: absolute;
+    z-index: 1;
+    top: var(--toggle-pad-v);
+    left: base(0.5);
+  }
+
+  &__toggle {
+    @extend %btn-reset;
+    @extend %body;
+    text-align: left;
+    cursor: pointer;
+    border-top-right-radius: $style-radius-s;
+    border-top-left-radius: $style-radius-s;
+    width: 100%;
+    color: transparent;
+
+    span {
+      user-select: none;
+    }
+  }
+
+  &--style-default {
+    border: 1px solid var(--theme-elevation-200);
+    &:hover {
+      border: 1px solid var(--theme-elevation-300);
+    }
+
+    > .collapsible__toggle-wrap {
+      .row-label {
+        color: var(--theme-text);
+      }
+      .collapsible__toggle {
+        background: var(--theme-elevation-50);
+      }
+    }
+    &.collapsible--hovered {
+      > .collapsible__toggle-wrap .collapsible__toggle {
+        background: var(--theme-elevation-100);
+      }
+    }
+  }
+
+  &__toggle,
+  &__header-wrap {
+    padding: var(--toggle-pad-v) var(--toggle-pad-h);
+  }
+
+  &__header-wrap {
+    position: absolute;
+    top: 0;
+    right: base(3);
+    bottom: 0;
+    left: 0;
+    pointer-events: none;
+
+    > * {
+      pointer-events: all;
+    }
+  }
+
+  &__header-wrap--has-drag-handle {
+    left: base(0.875);
+  }
+
+  &--collapsed {
+    .collapsible__toggle {
+      border-bottom-right-radius: $style-radius-s;
+      border-bottom-left-radius: $style-radius-s;
+    }
+  }
+
+  &__actions-wrap {
+    position: absolute;
+    right: var(--toggle-pad-h);
+    top: var(--toggle-pad-v);
+    pointer-events: none;
+    display: flex;
+  }
+
+  &__actions {
+    pointer-events: all;
+  }
+
+  &__indicator {
+    padding: calc(var(--base) / 4);
+    display: flex;
+    align-items: flex-start;
+  }
+
+  &__content {
+    background-color: var(--theme-elevation-0);
+    border-bottom-left-radius: $style-radius-s;
+    border-bottom-right-radius: $style-radius-s;
+    padding: var(--base);
+  }
+
+  @include small-break {
+    &__content {
+      padding: var(--gutter-h);
+    }
+  }
+}
+
+html[data-theme='dark'] {
+  .collapsible {
+    &--style-error {
+      border: 1px solid var(--theme-error-400);
+      &:hover {
+        border: 1px solid var(--theme-error-500);
+      }
+
+      > .collapsible__toggle-wrap {
+        .row-label {
+          color: var(--theme-error-500);
+        }
+        .collapsible__toggle {
+          background: var(--theme-error-100);
+        }
+      }
+      &.collapsible--hovered {
+        > .collapsible__toggle-wrap .collapsible__toggle {
+          background: var(--theme-error-150);
+        }
+      }
+    }
+  }
+}
+
+html[data-theme='light'] {
+  .collapsible {
+    &--style-error {
+      border: 1px solid var(--theme-error-500);
+      &:hover {
+        border: 1px solid var(--theme-error-600);
+      }
+
+      > .collapsible__toggle-wrap {
+        .row-label {
+          color: var(--theme-error-750);
+        }
+        .collapsible__toggle {
+          background: var(--theme-error-50);
+        }
+      }
+      &.collapsible--hovered {
+        > .collapsible__toggle-wrap .collapsible__toggle {
+          background: var(--theme-error-100);
+        }
+      }
+      &.error {
+        & input {
+          border-color: var(--theme-error-500);
+        }
+      }
+    }
+  }
+}

package/dist/elements/Collapsible/provider.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+type ContextType = {
+    collapsed: boolean;
+    isVisible: boolean;
+    toggle: () => void;
+    withinCollapsible: boolean;
+};
+export declare const CollapsibleProvider: React.FC<{
+    children?: React.ReactNode;
+    collapsed?: boolean;
+    toggle: () => void;
+    withinCollapsible?: boolean;
+}>;
+export declare const useCollapsible: () => ContextType;
+export {};
+//# sourceMappingURL=provider.d.ts.map

package/dist/elements/Collapsible/provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../../src/elements/Collapsible/provider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoC,MAAM,OAAO,CAAA;AAExD,KAAK,WAAW,GAAG;IACjB,SAAS,EAAE,OAAO,CAAA;IAClB,SAAS,EAAE,OAAO,CAAA;IAClB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,iBAAiB,EAAE,OAAO,CAAA;CAC3B,CAAA;AAQD,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC;IACzC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAC5B,CAYA,CAAA;AAED,eAAO,MAAM,cAAc,QAAO,WAAkC,CAAA"}

package/dist/elements/Collapsible/types.d.ts

@@ -0,0 +1,14 @@
+import type React from 'react';
+import type { DragHandleProps } from '../DraggableSortable/DraggableSortableItem/types';
+export type Props = {
+    actions?: React.ReactNode;
+    children: React.ReactNode;
+    className?: string;
+    collapsed?: boolean;
+    collapsibleStyle?: 'default' | 'error';
+    dragHandleProps?: DragHandleProps;
+    header?: React.ReactNode;
+    initCollapsed?: boolean;
+    onToggle?: (collapsed: boolean) => void;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/elements/Collapsible/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/Collapsible/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAA;AAEvF,MAAM,MAAM,KAAK,GAAG;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,gBAAgB,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IACtC,eAAe,CAAC,EAAE,eAAe,CAAA;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;CACxC,CAAA"}

package/dist/elements/ColumnSelector/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { Props } from './types';
+import './index.scss';
+declare const ColumnSelector: React.FC<Props>;
+export default ColumnSelector;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/ColumnSelector/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ColumnSelector/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgB,MAAM,OAAO,CAAA;AAEpC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AASpC,OAAO,cAAc,CAAA;AAIrB,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAkDnC,CAAA;AAED,eAAe,cAAc,CAAA"}

package/dist/elements/ColumnSelector/index.scss

@@ -0,0 +1,28 @@
+@import '../../scss/styles.scss';
+
+.column-selector {
+  display: flex;
+  flex-wrap: wrap;
+  background: var(--theme-elevation-50);
+  padding: base(1) base(1) base(0.5);
+
+  &__column {
+    margin-right: base(0.5);
+    margin-bottom: base(0.5);
+    background-color: transparent;
+    box-shadow: 0 0 0 1px var(--theme-elevation-200);
+
+    &.column-selector__column--active {
+      background-color: var(--theme-elevation-150);
+    }
+  }
+
+  // TODO: delete this once all icons have been migrated to viewbox edge-to-edge
+  .pill__icon {
+    padding: 0;
+  }
+
+  @include small-break {
+    padding: calc(var(--base) / 2) calc(var(--base) / 2) 0;
+  }
+}

package/dist/elements/ColumnSelector/types.d.ts

@@ -0,0 +1,5 @@
+import type { SanitizedCollectionConfig } from 'payload/types';
+export type Props = {
+    collectionSlug: SanitizedCollectionConfig['slug'];
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/elements/ColumnSelector/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/ColumnSelector/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAA;AAE9D,MAAM,MAAM,KAAK,GAAG;IAClB,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;CAClD,CAAA"}

package/dist/elements/CopyToClipboard/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { Props } from './types';
+import './index.scss';
+declare const CopyToClipboard: React.FC<Props>;
+export default CopyToClipboard;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/CopyToClipboard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/CopyToClipboard/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2B,MAAM,OAAO,CAAA;AAE/C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAKpC,OAAO,cAAc,CAAA;AAIrB,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuCpC,CAAA;AAED,eAAe,eAAe,CAAA"}

package/dist/elements/CopyToClipboard/index.scss

@@ -0,0 +1,26 @@
+@import '../../scss/styles.scss';
+
+.copy-to-clipboard {
+  @extend %btn-reset;
+  position: relative;
+  cursor: pointer;
+  vertical-align: middle;
+  border-radius: 100%;
+
+  textarea {
+    position: absolute;
+    opacity: 0;
+    z-index: -1;
+    height: 0px;
+    width: 0px;
+  }
+
+  &:focus,
+  &:active {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: var(--accessibility-outline);
+  }
+}

package/dist/elements/CopyToClipboard/types.d.ts

@@ -0,0 +1,6 @@
+export type Props = {
+    defaultMessage?: string;
+    successMessage?: string;
+    value?: string;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/elements/CopyToClipboard/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/CopyToClipboard/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,KAAK,GAAG;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA"}

package/dist/elements/DatePicker/DatePicker.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import 'react-datepicker/dist/react-datepicker.css';
+import type { Props } from './types';
+import './index.scss';
+declare const DateTime: React.FC<Props>;
+export default DateTime;
+//# sourceMappingURL=DatePicker.d.ts.map

package/dist/elements/DatePicker/DatePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/elements/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,4CAA4C,CAAA;AAEnD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAMpC,OAAO,cAAc,CAAA;AAIrB,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuG7B,CAAA;AAED,eAAe,QAAQ,CAAA"}

package/dist/elements/DatePicker/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { Props } from './types';
+declare const DatePickerField: React.FC<Props>;
+export default DatePickerField;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/DatePicker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DatePicker/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAA;AAE7C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAOpC,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAIpC,CAAA;AAED,eAAe,eAAe,CAAA"}