@lablup/ui-common 0.2.0-alpha.17 → 0.2.0-alpha.19

package/README.md

@@ -102,14 +102,14 @@ there):
 
 ```yaml
 overrides:
-  "@astryxdesign/lab>@astryxdesign/core": "0.6.5"
+  "@astryxdesign/lab>@astryxdesign/core": "0.7.0"
 ```
 
 npm, in the root `package.json`:
 
 ```json
 "overrides": {
-  "@astryxdesign/lab": { "@astryxdesign/core": "0.6.5" }
+  "@astryxdesign/lab": { "@astryxdesign/core": "0.7.0" }
 }
 ```
 
@@ -293,6 +293,7 @@ import { Modal } from "@lablup/ui-common/Modal";
 | `AlertModal`                                                   | An alert dialog, in place of Astryx `AlertDialog`           | `/AlertModal`                    |
 | `DeleteConfirmModal`                                           | Confirms a deletion, with typed confirmation when needed    | `/components/DeleteConfirmModal` |
 | `StepNumberInput`, `NumberStepper`                             | A number field that steps along a list of values            | `/components/StepNumberInput`    |
+| `Board`                                                        | A dashboard grid of movable, resizable items                | `/components/Board`              |
 | `BoardItemTitle`                                               | A dashboard panel's sticky title row                        | `/components/BoardItemTitle`     |
 | `Statistic`                                                    | A metric with a caption, a large value and a notched bar    | `/components/Statistic`          |
 | `DividedRow`                                                   | A wrapping row with dividers between neighbours on a line   | `/components/DividedRow`         |

package/astryx/components/Board.doc.mjs

@@ -0,0 +1,122 @@
+/**
+ * `astryx component Board` (and `ui-common component Board`).
+ *
+ * @type {import('@astryxdesign/cli/authoring').ComponentDoc}
+ */
+export default {
+  type: "component",
+  name: "Board",
+  displayName: "Board",
+  import: "@lablup/ui-common",
+  category: "Layout",
+  keywords: [
+    "board",
+    "dashboard",
+    "grid",
+    "drag",
+    "resize",
+    "panel",
+    "widget",
+    "layout",
+  ],
+  description:
+    "A dashboard grid of items the user can move and resize, by pointer or keyboard. The column count follows the board's width (1, 2, 4 or 6 columns by default); each item persists as its spans plus a column offset per column count, the model of @cloudscape-design/board-components, so a layout stored by that board renders the same here. Controlled: onItemsChange reports the whole board in its new order and the parent passes it back.",
+  props: [
+    {
+      name: "items",
+      type: "ReadonlyArray<BoardItem<D>>",
+      description:
+        "The items: id, data, optional rowSpan (from 2) and columnSpan (from 1), definition (minRowSpan, minColumnSpan, defaultRowSpan, defaultColumnSpan) and columnOffset, a column per column count ({ 4: 2, 6: 3 }) the board writes back.",
+      required: true,
+    },
+    {
+      name: "renderItem",
+      type: "(item: BoardItem<D>, actions: { removeItem: () => void }) => ReactNode",
+      description:
+        "An item's content. The board draws the surface, border and handles around it; the content area scrolls, so a BoardItemTitle inside stays at the top. removeItem reports the board without the item.",
+      required: true,
+    },
+    {
+      name: "onItemsChange",
+      type: "(detail: BoardItemsChangeDetail<D>) => void",
+      description:
+        "Called when the user moves, resizes or removes an item, with items (the whole board in its new order, spans and columnOffset updated) and the movedItem, resizedItem or removedItem. A move that ends where it started does not fire.",
+      required: true,
+    },
+    {
+      name: "isMovable",
+      type: "boolean",
+      description: "Renders a drag handle at each item's top-left corner.",
+      default: "false",
+    },
+    {
+      name: "isResizable",
+      type: "boolean",
+      description: "Renders a resize handle at each item's bottom-right corner.",
+      default: "false",
+    },
+    {
+      name: "variant",
+      type: "'bordered' | 'plain'",
+      description: "bordered draws a border on each item.",
+      default: "'plain'",
+    },
+    {
+      name: "emptyContent",
+      type: "ReactNode",
+      description: "Rendered in place of the grid when items is empty.",
+    },
+    {
+      name: "columnBreakpoints",
+      type: "ReadonlyArray<{ minWidth: number; columns: number }>",
+      description: "Content width (px) to column count.",
+      default: "1 under 688px, 2 under 912px, 4 under 2100px, else 6",
+    },
+    {
+      name: "itemClassName",
+      type: "string | ((item: BoardItem<D>) => string | undefined)",
+      description: "An extra class on each item's surface.",
+    },
+    {
+      name: "dragHandleIcon, resizeHandleIcon",
+      type: "ReactNode",
+      description: "The handles' glyphs.",
+      default: "a grip, a corner grip",
+    },
+    {
+      name: "dragHandleLabel, resizeHandleLabel",
+      type: "string",
+      description: "Accessible names of the handles.",
+      default: "the catalog's uic.Board.dragHandle / resizeHandle",
+    },
+    {
+      name: "liveAnnouncementDndStarted, liveAnnouncementDndCommitted, liveAnnouncementDndDiscarded",
+      type: "(operation: 'move' | 'resize') => string",
+      description:
+        "Live-region announcements at the start and end of a move or resize.",
+      default: "the catalog's uic.Board.* keys",
+    },
+    {
+      name: "liveAnnouncementDndItemMoved, liveAnnouncementDndItemResized",
+      type: "(detail: { item: BoardItem<D>; placement: { x; y; width; height } }) => string",
+      description: "Live-region announcement at each step; the placement is 0-based.",
+      default: "the catalog's uic.Board.itemMoved / itemResized",
+    },
+    {
+      name: "liveAnnouncementItemRemoved",
+      type: "(detail: { item: BoardItem<D> }) => string",
+      description: "Live-region announcement when an item is removed.",
+      default: "the catalog's uic.Board.itemRemoved",
+    },
+  ],
+  usage: {
+    description:
+      "Persist what onItemsChange reports (minus data) and pass it back as items; the board snaps back otherwise. Drag a handle to move or resize by pointer (a resized item follows the pointer's size and snaps to the grid on release). Click a handle, or press Enter or Space on it, to activate it: direction buttons appear and they or the arrow keys step one cell, Enter, Space or leaving the handle commits, Escape discards. A step that would overlap an item only partly, in the direction of the move, is a conflict and does not commit. The drag handle overlays the item's top-left corner, so give the content a horizontal inset. A pointer drag held near an edge of the nearest scroll container scrolls it. CSS knobs on the root or above: --board-row-height (96px), --board-gap (--spacing-5), --board-item-radius (--radius-container), --board-transition-duration (200ms, off under prefers-reduced-motion), --board-handle-z (51; BoardItemTitle's sticky row is 50). Other div attributes reach the root.",
+  },
+  examples: [
+    {
+      label: "A movable, resizable dashboard",
+      code: '<Board\n  items={items}\n  isMovable\n  isResizable\n  variant="bordered"\n  renderItem={(item) => (\n    <Stack gap={2} xstyle={inset}>\n      <BoardItemTitle title={item.data.title} />\n      {item.data.content}\n    </Stack>\n  )}\n  onItemsChange={({ items }) => setItems(items)}\n/>',
+    },
+  ],
+};

package/astryx/components/Board.tsx

@@ -0,0 +1,3 @@
+// The Astryx CLI pairs each component doc with a same-stem source file.
+// ui-common ships no source, so this names the export instead.
+export { Board } from "@lablup/ui-common";

package/astryx/components/Form.doc.mjs

@@ -102,7 +102,7 @@ export default {
   ],
   usage: {
     description:
-      "Data-entry screens whose state, validation and submit need more than a few controlled fields. Style hooks: .uic-form-item and its __label, __control, __explain-error, __extra elements, and --form-item-margin-bottom, --form-item-gap and --form-item-line-height. Help, extra and the tooltip glyph take the theme's --color-text-description when it declares one (default --color-text-secondary). A control reaches its item's status through Form.Item.useStatus() or FormItemInputContext.",
+      "Data-entry screens whose state, validation and submit need more than a few controlled fields. Form.Item's labelExtra puts actions (a filter or sort toggle) in the label row, outside the <label> so they stay out of the control's accessible name: at the far end in vertical layout, right after the label otherwise. Style hooks: .uic-form-item and its __label, __label-extra, __control, __explain-error, __extra elements, and --form-item-margin-bottom, --form-item-gap and --form-item-line-height. Help, extra and the tooltip glyph take the theme's --color-text-description when it declares one (default --color-text-secondary). A control reaches its item's status through Form.Item.useStatus() or FormItemInputContext.",
   },
   examples: [
     {

package/astryx/docs/ui-common.doc.mjs

@@ -69,7 +69,7 @@ export const docs = {
             "`AlertModal`: the alert-dialog pattern on Modal, in its level stack. ui-common hides AlertDialog; use this.",
             "`DeleteConfirmModal`: confirms a deletion on Modal; typed confirmation for irreversible ones.",
             "`StepNumberInput`: a number field that steps along a list of values (1, 2, 4, 8); `NumberStepper` is its stepper column.",
-            "`BoardItemTitle`: a dashboard panel's sticky title row, with a help tooltip and actions at the end.",
+            "`Board`: a dashboard grid of items the user moves and resizes by pointer or keyboard; items persist as spans plus a column offset per column count, as in Cloudscape's board. `BoardItemTitle`: a dashboard panel's sticky title row, with a help tooltip and actions at the end.",
             "`Statistic`: a metric with a caption, a large value and a notched usage bar. `DividedRow`: a wrapping row with dividers between neighbours on a line.",
             '`TokenList`: values inline, the rest behind +N on hover. `TokenRow`: tokens cut off with "and N more".',
             "`NotificationItem`: the title, description, actions and footer of one notice.",

package/dist/assets/components/Board/Board.css

@@ -0,0 +1,2 @@
+@layer reset, theme, base, astryx-base, astryx-theme, ui-common, components, utilities;
+@layer ui-common{.uic-board{min-width:0;position:relative}.uic-board__grid{grid-auto-rows:var(--board-row-height,96px);gap:var(--board-gap,var(--spacing-5));display:grid}.uic-board__placeholder{border-radius:var(--board-item-radius,var(--radius-container))}.uic-board__placeholder--active{background-color:var(--color-background-muted)}.uic-board__placeholder--hover{background-color:var(--color-accent-muted)}.uic-board-item{isolation:isolate;border-radius:var(--board-item-radius,var(--radius-container));background-color:var(--color-background-surface);flex-direction:column;height:100%;min-height:0;display:flex;position:relative}.uic-board-item--sliding{transition:transform var(--board-transition-duration,.2s) var(--ease-standard)}.uic-board-item--bordered{border:var(--border-width) solid var(--color-border)}.uic-board-item--active{z-index:1;box-shadow:0 0 0 var(--spacing-0-5) var(--color-accent)}.uic-board-item--dragging,.uic-board-item--resizing{transition:none}.uic-board-item--resizing{place-self:start}.uic-board-item__content{border-radius:inherit;flex:1;min-height:0;overflow:auto}.uic-board-item__handle{z-index:var(--board-handle-z,51);display:inline-flex;position:absolute}.uic-board-item__handle--drag{inset-block-start:var(--spacing-2);inset-inline-start:var(--spacing-1)}.uic-board-item__handle--resize{inset-block-end:0;inset-inline-end:0}.uic-board-item__drag-handle,.uic-board-item__resize-handle,.uic-board-item__drag-handle:hover,.uic-board-item__resize-handle:hover,.uic-board-item__drag-handle:active,.uic-board-item__resize-handle:active{background-color:#0000}.uic-board-item__drag-handle,.uic-board-item__resize-handle{color:var(--color-icon-disabled);touch-action:none}.uic-board-item__drag-handle:hover,.uic-board-item__resize-handle:hover,.uic-board-item--active .uic-board-item__drag-handle,.uic-board-item--active .uic-board-item__resize-handle{color:var(--color-icon-primary)}.uic-board-item__drag-handle{cursor:grab}.uic-board-item--dragging .uic-board-item__drag-handle{cursor:grabbing}.uic-board-item__resize-handle{cursor:nwse-resize}.uic-board__direction{appearance:none;font:inherit;box-sizing:border-box;width:var(--spacing-6);height:var(--spacing-6);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-full);background-color:var(--color-background-surface);color:var(--color-icon-primary);box-shadow:var(--shadow-low);cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;padding:0;display:inline-flex;position:absolute}.uic-board__direction:hover{background-color:var(--color-background-muted)}.uic-board__direction--up{inset-block-start:calc(-1 * (var(--spacing-6) + var(--spacing-1)));inset-inline-start:calc(50% - var(--spacing-3))}.uic-board__direction--down{inset-block-end:calc(-1 * (var(--spacing-6) + var(--spacing-1)));inset-inline-start:calc(50% - var(--spacing-3))}.uic-board__direction--left{inset-block-start:calc(50% - var(--spacing-3));inset-inline-start:calc(-1 * (var(--spacing-6) + var(--spacing-1)))}.uic-board__direction--right{inset-block-start:calc(50% - var(--spacing-3));inset-inline-end:calc(-1 * (var(--spacing-6) + var(--spacing-1)))}@media (prefers-reduced-motion:reduce){.uic-board-item--sliding{transition:none}}}

package/dist/assets/components/Form/FormItemVisual.css

@@ -1,2 +1,2 @@
 @layer reset, theme, base, astryx-base, astryx-theme, ui-common, components, utilities;
-@layer ui-common{.uic-form[data-layout=inline]{flex-wrap:wrap;display:flex}.uic-form[data-layout=inline]>.uic-form-item,.uic-form[data-layout=inline] .uic-form-item[data-layout=inline]{flex:none;margin-inline-end:var(--spacing-4)}.uic-form-item{box-sizing:border-box;vertical-align:top;margin-bottom:var(--form-item-margin-bottom,var(--spacing-6));font-size:var(--font-size-base);line-height:var(--form-item-line-height,var(--text-body-leading))}.uic-form-item[data-layout=inline]{margin-bottom:0}.uic-form-item[data-hidden]{display:none}.uic-form-item__row{flex-flow:wrap;min-width:0;display:flex}.uic-form-item[data-layout=vertical] .uic-form-item__row{flex-direction:column}.uic-form-item[data-layout=inline] .uic-form-item__row{flex-wrap:nowrap}.uic-form-item__label-col{white-space:nowrap;text-align:end;vertical-align:middle;box-sizing:border-box;flex-grow:0;max-width:100%;overflow:hidden}.uic-form-item__label-col[data-align=left]{text-align:start}.uic-form-item__label-col[data-wrap]{overflow:unset;line-height:var(--form-item-line-height,var(--text-body-leading));white-space:unset}.uic-form-item__label-col[data-wrap]>.uic-form-item__label{vertical-align:middle;text-wrap:balance}.uic-form-item[data-layout=vertical] .uic-form-item__label-col{padding:0 0 var(--form-item-gap,var(--spacing-2));white-space:initial;text-align:start;margin:0}.uic-form-item[data-layout=inline] .uic-form-item__label-col{flex:none}.uic-form-item__label{max-width:100%;height:var(--size-element-md);color:var(--color-text-primary);font-size:var(--font-size-base);line-height:var(--form-item-line-height,var(--text-body-leading));align-items:center;display:inline-flex;position:relative}.uic-form-item[data-layout=vertical] .uic-form-item__label{height:auto;margin:0}.uic-form-item[data-size=small] .uic-form-item__label{height:var(--size-element-sm)}.uic-form-item[data-size=large] .uic-form-item__label{height:var(--size-element-lg)}.uic-form-item__label--required:before{color:var(--color-error);font-size:var(--font-size-base);content:"*";margin-inline-end:var(--spacing-1);font-family:sans-serif;line-height:1;display:inline-block}.uic-form-item__label[data-required-mark]:before{display:none}.uic-form-item__label:after{content:":";margin-block:0;margin-inline-start:var(--spacing-0-5);margin-inline-end:var(--spacing-2);position:relative}.uic-form-item__label[data-no-colon]:after{content:" "}.uic-form-item[data-layout=vertical] .uic-form-item__label:after{visibility:hidden}.uic-form-item__optional{color:var(--color-text-description,var(--color-text-secondary));margin-inline-start:var(--spacing-1);display:inline-block}.uic-form-item__tooltip{color:var(--color-text-description,var(--color-text-secondary));cursor:help;writing-mode:horizontal-tb;align-items:center;margin-inline-start:var(--spacing-1);display:inline-flex}.uic-form-item__control{box-sizing:border-box;flex-direction:column;flex-grow:1;min-width:0;display:flex}.uic-form-item__row>.uic-form-item__control:first-child:not([data-span]){width:100%}.uic-form-item:not([data-layout=vertical]) .uic-form-item__label-col+.uic-form-item__control{flex:1 1 0}.uic-form-item[data-layout=vertical] .uic-form-item__control{width:100%}.uic-form-item__control-input{min-height:var(--size-element-md);align-items:center;display:flex;position:relative}.uic-form-item[data-size=small] .uic-form-item__control-input{min-height:var(--size-element-sm)}.uic-form-item[data-size=large] .uic-form-item__control-input{min-height:var(--size-element-lg)}.uic-form-item__control-input-content{flex:auto;max-width:100%}.uic-form-item__additional{flex-direction:column;display:flex}.uic-form-item__explain,.uic-form-item__extra{clear:both;color:var(--color-text-description,var(--color-text-secondary));font-size:var(--font-size-base);line-height:var(--form-item-line-height,var(--text-body-leading))}.uic-form-item__extra{min-height:var(--size-element-sm)}.uic-form-item__explain-error{color:var(--color-error)}.uic-form-item__explain-warning{color:var(--color-warning)}.uic-form-item__feedback-icon{inset-inline-end:var(--spacing-3);height:calc(var(--font-size-base) * var(--form-item-line-height,var(--text-body-leading)));color:var(--color-accent);font-size:var(--font-size-base);pointer-events:none;justify-content:center;align-items:center;display:inline-flex;position:absolute;top:50%;transform:translateY(-50%)}.uic-form-item__feedback-icon[data-status=success]{color:var(--color-success)}.uic-form-item__feedback-icon[data-status=warning]{color:var(--color-warning)}.uic-form-item__feedback-icon[data-status=error]{color:var(--color-error)}.uic-form-item__feedback-glyph[data-status=validating]{animation:1s linear infinite uic-form-item-feedback-spin}@keyframes uic-form-item-feedback-spin{to{transform:rotate(360deg)}}}
+@layer ui-common{.uic-form[data-layout=inline]{flex-wrap:wrap;display:flex}.uic-form[data-layout=inline]>.uic-form-item,.uic-form[data-layout=inline] .uic-form-item[data-layout=inline]{flex:none;margin-inline-end:var(--spacing-4)}.uic-form-item{box-sizing:border-box;vertical-align:top;margin-bottom:var(--form-item-margin-bottom,var(--spacing-6));font-size:var(--font-size-base);line-height:var(--form-item-line-height,var(--text-body-leading))}.uic-form-item[data-layout=inline]{margin-bottom:0}.uic-form-item[data-hidden]{display:none}.uic-form-item__row{flex-flow:wrap;min-width:0;display:flex}.uic-form-item[data-layout=vertical] .uic-form-item__row{flex-direction:column}.uic-form-item[data-layout=inline] .uic-form-item__row{flex-wrap:nowrap}.uic-form-item__label-col{white-space:nowrap;text-align:end;vertical-align:middle;box-sizing:border-box;flex-grow:0;max-width:100%;overflow:hidden}.uic-form-item__label-col[data-align=left]{text-align:start}.uic-form-item__label-col[data-wrap]{overflow:unset;line-height:var(--form-item-line-height,var(--text-body-leading));white-space:unset}.uic-form-item__label-col[data-wrap]>.uic-form-item__label{vertical-align:middle;text-wrap:balance}.uic-form-item[data-layout=vertical] .uic-form-item__label-col{padding:0 0 var(--form-item-gap,var(--spacing-2));white-space:initial;text-align:start;margin:0}.uic-form-item[data-layout=inline] .uic-form-item__label-col{flex:none}.uic-form-item__label{max-width:100%;height:var(--size-element-md);color:var(--color-text-primary);font-size:var(--font-size-base);line-height:var(--form-item-line-height,var(--text-body-leading));align-items:center;display:inline-flex;position:relative}.uic-form-item[data-layout=vertical] .uic-form-item__label{height:auto;margin:0}.uic-form-item[data-size=small] .uic-form-item__label{height:var(--size-element-sm)}.uic-form-item[data-size=large] .uic-form-item__label{height:var(--size-element-lg)}.uic-form-item__label--required:before{color:var(--color-error);font-size:var(--font-size-base);content:"*";margin-inline-end:var(--spacing-1);font-family:sans-serif;line-height:1;display:inline-block}.uic-form-item__label[data-required-mark]:before{display:none}.uic-form-item__label:after{content:":";margin-block:0;margin-inline-start:var(--spacing-0-5);margin-inline-end:var(--spacing-2);position:relative}.uic-form-item__label[data-no-colon]:after{content:" "}.uic-form-item[data-layout=vertical] .uic-form-item__label:after{visibility:hidden}.uic-form-item__label-col[data-has-label-extra]{justify-content:flex-end;align-items:center;display:flex}.uic-form-item__label-col[data-has-label-extra][data-align=left]{justify-content:flex-start}.uic-form-item[data-layout=vertical] .uic-form-item__label-col[data-has-label-extra]{justify-content:space-between;overflow:visible}.uic-form-item__label-col[data-has-label-extra]>.uic-form-item__label{min-width:0}.uic-form-item__label-col[data-has-label-extra]:not([data-wrap])>.uic-form-item__label{overflow:hidden}.uic-form-item__label-col[data-has-label-extra]>.uic-form-item__label:after{content:none}.uic-form-item__label-extra{flex:none;align-items:center;margin-inline-start:var(--spacing-1);display:inline-flex}.uic-form-item__label-extra:after{content:":";margin-inline-start:var(--spacing-0-5);margin-inline-end:var(--spacing-2)}.uic-form-item__label-extra[data-no-colon]:after{content:" "}.uic-form-item[data-layout=vertical] .uic-form-item__label-extra:after{content:none}.uic-form-item__optional{color:var(--color-text-description,var(--color-text-secondary));margin-inline-start:var(--spacing-1);display:inline-block}.uic-form-item__tooltip{color:var(--color-text-description,var(--color-text-secondary));cursor:help;writing-mode:horizontal-tb;align-items:center;margin-inline-start:var(--spacing-1);display:inline-flex}.uic-form-item__control{box-sizing:border-box;flex-direction:column;flex-grow:1;min-width:0;display:flex}.uic-form-item__row>.uic-form-item__control:first-child:not([data-span]){width:100%}.uic-form-item:not([data-layout=vertical]) .uic-form-item__label-col+.uic-form-item__control{flex:1 1 0}.uic-form-item[data-layout=vertical] .uic-form-item__control{width:100%}.uic-form-item__control-input{min-height:var(--size-element-md);align-items:center;display:flex;position:relative}.uic-form-item[data-size=small] .uic-form-item__control-input{min-height:var(--size-element-sm)}.uic-form-item[data-size=large] .uic-form-item__control-input{min-height:var(--size-element-lg)}.uic-form-item__control-input-content{flex:auto;max-width:100%}.uic-form-item__additional{flex-direction:column;display:flex}.uic-form-item__explain,.uic-form-item__extra{clear:both;color:var(--color-text-description,var(--color-text-secondary));font-size:var(--font-size-base);line-height:var(--form-item-line-height,var(--text-body-leading))}.uic-form-item__extra{min-height:var(--size-element-sm)}.uic-form-item__explain-error{color:var(--color-error)}.uic-form-item__explain-warning{color:var(--color-warning)}.uic-form-item__feedback-icon{inset-inline-end:var(--spacing-3);height:calc(var(--font-size-base) * var(--form-item-line-height,var(--text-body-leading)));color:var(--color-accent);font-size:var(--font-size-base);pointer-events:none;justify-content:center;align-items:center;display:inline-flex;position:absolute;top:50%;transform:translateY(-50%)}.uic-form-item__feedback-icon[data-status=success]{color:var(--color-success)}.uic-form-item__feedback-icon[data-status=warning]{color:var(--color-warning)}.uic-form-item__feedback-icon[data-status=error]{color:var(--color-error)}.uic-form-item__feedback-glyph[data-status=validating]{animation:1s linear infinite uic-form-item-feedback-spin}@keyframes uic-form-item-feedback-spin{to{transform:rotate(360deg)}}}

package/dist/astryx/DateInput/tokens.stylex.d.ts

@@ -0,0 +1 @@
+export * from '@astryxdesign/core/DateInput/tokens.stylex';

package/dist/astryx/DateInput/tokens.stylex.js

@@ -0,0 +1 @@
+export * from "@astryxdesign/core/DateInput/tokens.stylex";

package/dist/astryx/Icon/IconSize.stylex.d.ts

@@ -0,0 +1 @@
+export * from '@astryxdesign/core/Icon/IconSize.stylex';

package/dist/astryx/Icon/IconSize.stylex.js

@@ -0,0 +1 @@
+export * from "@astryxdesign/core/Icon/IconSize.stylex";

package/dist/astryx/Indicator/indicator.markers.stylex.d.ts

@@ -0,0 +1 @@
+export * from '@astryxdesign/core/Indicator/indicator.markers.stylex';

package/dist/astryx/Indicator/indicator.markers.stylex.js

@@ -0,0 +1 @@
+export * from "@astryxdesign/core/Indicator/indicator.markers.stylex";

package/dist/astryx/Layer/layerAnimations.stylex.d.ts

@@ -0,0 +1 @@
+export * from '@astryxdesign/core/Layer/layerAnimations.stylex';

package/dist/astryx/Layer/layerAnimations.stylex.js

@@ -0,0 +1 @@
+export * from "@astryxdesign/core/Layer/layerAnimations.stylex";

package/dist/astryx/Layer/layerTextReset.stylex.d.ts

@@ -0,0 +1 @@
+export * from '@astryxdesign/core/Layer/layerTextReset.stylex';

package/dist/astryx/Layer/layerTextReset.stylex.js

@@ -0,0 +1 @@
+export * from "@astryxdesign/core/Layer/layerTextReset.stylex";

package/dist/astryx/Layer/layerViewportInset.stylex.d.ts

@@ -0,0 +1 @@
+export * from '@astryxdesign/core/Layer/layerViewportInset.stylex';

package/dist/astryx/Layer/layerViewportInset.stylex.js

@@ -0,0 +1 @@
+export * from "@astryxdesign/core/Layer/layerViewportInset.stylex";

package/dist/astryx/Layout/container.stylex.d.ts

@@ -0,0 +1 @@
+export * from '@astryxdesign/core/Layout/container.stylex';

package/dist/astryx/Layout/container.stylex.js

@@ -0,0 +1 @@
+export * from "@astryxdesign/core/Layout/container.stylex";

package/dist/astryx/Layout/edgeCompensation.stylex.d.ts

@@ -0,0 +1 @@
+export * from '@astryxdesign/core/Layout/edgeCompensation.stylex';

package/dist/astryx/Layout/edgeCompensation.stylex.js

@@ -0,0 +1 @@
+export * from "@astryxdesign/core/Layout/edgeCompensation.stylex";

package/dist/astryx/Layout/padding.stylex.d.ts

@@ -0,0 +1 @@
+export * from '@astryxdesign/core/Layout/padding.stylex';

package/dist/astryx/Layout/padding.stylex.js

@@ -0,0 +1 @@
+export * from "@astryxdesign/core/Layout/padding.stylex";

package/dist/astryx/Markdown/plugin-renderer.d.ts

@@ -0,0 +1 @@
+export * from '@astryxdesign/core/Markdown/plugin-renderer';

package/dist/astryx/Markdown/plugin-renderer.js

@@ -0,0 +1 @@
+export * from "@astryxdesign/core/Markdown/plugin-renderer";

package/dist/astryx/NavItem/navItemStyles.stylex.d.ts

@@ -0,0 +1 @@
+export * from '@astryxdesign/core/NavItem/navItemStyles.stylex';

package/dist/astryx/NavItem/navItemStyles.stylex.js

@@ -0,0 +1 @@
+export * from "@astryxdesign/core/NavItem/navItemStyles.stylex";

package/dist/astryx/Selector/selectorPresentation.stylex.d.ts

@@ -0,0 +1 @@
+export * from '@astryxdesign/core/Selector/selectorPresentation.stylex';

package/dist/astryx/Selector/selectorPresentation.stylex.js

@@ -0,0 +1 @@
+export * from "@astryxdesign/core/Selector/selectorPresentation.stylex";

package/dist/astryx/Stack/stack.stylex.d.ts

@@ -0,0 +1 @@
+export * from '@astryxdesign/core/Stack/stack.stylex';

package/dist/astryx/Stack/stack.stylex.js

@@ -0,0 +1 @@
+export * from "@astryxdesign/core/Stack/stack.stylex";

package/dist/astryx/Stack/stackItem.stylex.d.ts

@@ -0,0 +1 @@
+export * from '@astryxdesign/core/Stack/stackItem.stylex';

package/dist/astryx/Stack/stackItem.stylex.js

@@ -0,0 +1 @@
+export * from "@astryxdesign/core/Stack/stackItem.stylex";

package/dist/astryx/Text/text.stylex.d.ts

@@ -0,0 +1 @@
+export * from '@astryxdesign/core/Text/text.stylex';

package/dist/astryx/Text/text.stylex.js

@@ -0,0 +1 @@
+export * from "@astryxdesign/core/Text/text.stylex";

package/dist/astryx/theme/dataTokens.stylex.d.ts

@@ -0,0 +1 @@
+export * from '@astryxdesign/core/theme/dataTokens.stylex';

package/dist/astryx/theme/dataTokens.stylex.js

@@ -0,0 +1 @@
+export * from "@astryxdesign/core/theme/dataTokens.stylex";

package/dist/astryx/theme/neutral/fonts.css

@@ -0,0 +1,3 @@
+@layer reset, theme, base, astryx-base, astryx-theme, ui-common, components, utilities;
+/* @generated by scripts/gen-exports.mjs. Do not edit. */
+@import "@astryxdesign/theme-neutral/fonts.css";

package/dist/astryx/utils/focusOutline.stylex.d.ts

@@ -0,0 +1 @@
+export * from '@astryxdesign/core/utils/focusOutline.stylex';

package/dist/astryx/utils/focusOutline.stylex.js

@@ -0,0 +1 @@
+export * from "@astryxdesign/core/utils/focusOutline.stylex";

package/dist/astryx/utils/interactionOverlay.stylex.d.ts

@@ -0,0 +1 @@
+export * from '@astryxdesign/core/utils/interactionOverlay.stylex';

package/dist/astryx/utils/interactionOverlay.stylex.js

@@ -0,0 +1 @@
+export * from "@astryxdesign/core/utils/interactionOverlay.stylex";

package/dist/components/Board/Board.d.ts

@@ -0,0 +1,102 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { Rect } from './engine';
+import { BoardItem } from './layout';
+export type BoardOperation = "move" | "resize";
+export interface BoardItemPlacement {
+    /** Column, from 0. */
+    x: number;
+    /** Row, from 0. */
+    y: number;
+    width: number;
+    height: number;
+}
+export interface BoardDndDetail<D = unknown> {
+    item: BoardItem<D>;
+    /** Where the item is at this step. */
+    placement: BoardItemPlacement;
+}
+export interface BoardItemRemovedDetail<D = unknown> {
+    item: BoardItem<D>;
+}
+export interface BoardItemsChangeDetail<D = unknown> {
+    /** The whole board in its new order, spans and column offsets updated. */
+    items: ReadonlyArray<BoardItem<D>>;
+    movedItem?: BoardItem<D>;
+    resizedItem?: BoardItem<D>;
+    removedItem?: BoardItem<D>;
+}
+export interface BoardItemActions {
+    /** Removes the item: `onItemsChange` fires with the rest, re-laid out. */
+    removeItem: () => void;
+}
+export interface BoardColumnBreakpoint {
+    /** The least content width, in px, at which the board has `columns` columns. */
+    minWidth: number;
+    columns: number;
+}
+/** Cloudscape's: 1 column under 688px, 2 under 912px, 4 under 2100px, else 6. */
+export declare const DEFAULT_BOARD_COLUMN_BREAKPOINTS: ReadonlyArray<BoardColumnBreakpoint>;
+/** How far a pointer travels before a press on a handle is a drag, not a click. */
+export declare const CLICK_DRAG_THRESHOLD_PX = 3;
+export interface BoardProps<D = unknown> extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "onChange"> {
+    items: ReadonlyArray<BoardItem<D>>;
+    /** An item's content. The board draws the surface, border and handles around it. */
+    renderItem: (item: BoardItem<D>, actions: BoardItemActions) => ReactNode;
+    /** Called when the user moves, resizes or removes an item. */
+    onItemsChange: (detail: BoardItemsChangeDetail<D>) => void;
+    /** Whether items have a drag handle and can be moved. @default false */
+    isMovable?: boolean;
+    /** Whether items have a resize handle and can be resized. @default false */
+    isResizable?: boolean;
+    /** `bordered` draws a border on each item. @default 'plain' */
+    variant?: "bordered" | "plain";
+    /** Rendered in place of the grid when there are no items. */
+    emptyContent?: ReactNode;
+    /** Content width to column count. @default DEFAULT_BOARD_COLUMN_BREAKPOINTS */
+    columnBreakpoints?: ReadonlyArray<BoardColumnBreakpoint>;
+    /** An extra class on each item's surface; a function gets the item. */
+    itemClassName?: string | ((item: BoardItem<D>) => string | undefined);
+    /** Glyph of the drag handle. @default a grip */
+    dragHandleIcon?: ReactNode;
+    /** Glyph of the resize handle. @default a corner grip */
+    resizeHandleIcon?: ReactNode;
+    /** Accessible name of the drag handle. Default: the catalog's `uic.Board.dragHandle` */
+    dragHandleLabel?: string;
+    /** Accessible name of the resize handle. Default: the catalog's `uic.Board.resizeHandle` */
+    resizeHandleLabel?: string;
+    /** Announced when a move or resize starts. Default: `uic.Board.moveStarted` / `resizeStarted` */
+    liveAnnouncementDndStarted?: (operation: BoardOperation) => string;
+    /** Announced at each step of a move. Default: `uic.Board.itemMoved` */
+    liveAnnouncementDndItemMoved?: (detail: BoardDndDetail<D>) => string;
+    /** Announced at each step of a resize. Default: `uic.Board.itemResized` */
+    liveAnnouncementDndItemResized?: (detail: BoardDndDetail<D>) => string;
+    /** Announced when a move or resize is committed. Default: `uic.Board.moveCommitted` / `resizeCommitted` */
+    liveAnnouncementDndCommitted?: (operation: BoardOperation) => string;
+    /** Announced when a move or resize is discarded. Default: `uic.Board.moveDiscarded` / `resizeDiscarded` */
+    liveAnnouncementDndDiscarded?: (operation: BoardOperation) => string;
+    /** Announced when an item is removed. Default: `uic.Board.itemRemoved` */
+    liveAnnouncementItemRemoved?: (detail: BoardItemRemovedDetail<D>) => string;
+}
+export interface BoardMetrics {
+    cellWidth: number;
+    cellHeight: number;
+    gap: number;
+}
+interface Box {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+}
+export declare function columnsForWidth(width: number, breakpoints: ReadonlyArray<BoardColumnBreakpoint>): number;
+/**
+ * The cells a box covers, in grid units: each edge of the box snaps to the
+ * nearest edge among the cells it touches, and the cells inside the snapped
+ * bounds are hovered. Null when the box touches no cell.
+ */
+export declare function hoveredCells(box: Box, columns: number, rows: number, metrics: BoardMetrics): Rect | null;
+export declare function Board<D = unknown>({ items, renderItem, onItemsChange, isMovable, isResizable, variant, emptyContent, columnBreakpoints, itemClassName, dragHandleIcon, resizeHandleIcon, dragHandleLabel, resizeHandleLabel, liveAnnouncementDndStarted, liveAnnouncementDndItemMoved, liveAnnouncementDndItemResized, liveAnnouncementDndCommitted, liveAnnouncementDndDiscarded, liveAnnouncementItemRemoved, className, ...divProps }: BoardProps<D>): ReactNode;
+export declare namespace Board {
+    var displayName: string;
+}
+export {};

package/dist/components/Board/Board.messages.d.ts

@@ -0,0 +1,62 @@
+export declare const boardMessages: {
+    readonly "uic.Board.dragHandle": {
+        readonly defaultMessage: "Drag handle";
+        readonly description: "Accessible name of the button at a board item's top-left corner that moves the item";
+    };
+    readonly "uic.Board.resizeHandle": {
+        readonly defaultMessage: "Resize handle";
+        readonly description: "Accessible name of the button at a board item's bottom-right corner that resizes the item";
+    };
+    readonly "uic.Board.moveStarted": {
+        readonly defaultMessage: "Dragging.";
+        readonly description: "Screen reader announcement when a board item is picked up to be moved";
+    };
+    readonly "uic.Board.resizeStarted": {
+        readonly defaultMessage: "Resizing.";
+        readonly description: "Screen reader announcement when a board item starts being resized";
+    };
+    readonly "uic.Board.itemMoved": {
+        readonly defaultMessage: "Item moved to column {column}, row {row}.";
+        readonly description: "Screen reader announcement while a board item moves. {column} and {row} are 1-based";
+    };
+    readonly "uic.Board.itemResized": {
+        readonly defaultMessage: "Item resized to {columns} columns by {rows} rows.";
+        readonly description: "Screen reader announcement while a board item is resized";
+    };
+    readonly "uic.Board.moveCommitted": {
+        readonly defaultMessage: "Move committed.";
+        readonly description: "Screen reader announcement when a board item is dropped in its new place";
+    };
+    readonly "uic.Board.resizeCommitted": {
+        readonly defaultMessage: "Resize committed.";
+        readonly description: "Screen reader announcement when a board item's new size is applied";
+    };
+    readonly "uic.Board.moveDiscarded": {
+        readonly defaultMessage: "Move discarded.";
+        readonly description: "Screen reader announcement when moving a board item is cancelled";
+    };
+    readonly "uic.Board.resizeDiscarded": {
+        readonly defaultMessage: "Resize discarded.";
+        readonly description: "Screen reader announcement when resizing a board item is cancelled";
+    };
+    readonly "uic.Board.itemRemoved": {
+        readonly defaultMessage: "Item removed.";
+        readonly description: "Screen reader announcement when a board item is removed";
+    };
+    readonly "uic.Board.directionUp": {
+        readonly defaultMessage: "Up";
+        readonly description: "Accessible name of the button that moves an activated board item, or shrinks a resized one, one row up";
+    };
+    readonly "uic.Board.directionDown": {
+        readonly defaultMessage: "Down";
+        readonly description: "Accessible name of the button that moves an activated board item, or grows a resized one, one row down";
+    };
+    readonly "uic.Board.directionLeft": {
+        readonly defaultMessage: "Left";
+        readonly description: "Accessible name of the button that moves an activated board item, or shrinks a resized one, one column left";
+    };
+    readonly "uic.Board.directionRight": {
+        readonly defaultMessage: "Right";
+        readonly description: "Accessible name of the button that moves an activated board item, or grows a resized one, one column right";
+    };
+};

package/dist/components/Board/Board.messages.js

@@ -0,0 +1,68 @@
+import { defineMessages as e } from "../../i18n/catalog.js";
+//#region src/components/Board/Board.messages.ts
+var t = e({
+	"uic.Board.dragHandle": {
+		defaultMessage: "Drag handle",
+		description: "Accessible name of the button at a board item's top-left corner that moves the item"
+	},
+	"uic.Board.resizeHandle": {
+		defaultMessage: "Resize handle",
+		description: "Accessible name of the button at a board item's bottom-right corner that resizes the item"
+	},
+	"uic.Board.moveStarted": {
+		defaultMessage: "Dragging.",
+		description: "Screen reader announcement when a board item is picked up to be moved"
+	},
+	"uic.Board.resizeStarted": {
+		defaultMessage: "Resizing.",
+		description: "Screen reader announcement when a board item starts being resized"
+	},
+	"uic.Board.itemMoved": {
+		defaultMessage: "Item moved to column {column}, row {row}.",
+		description: "Screen reader announcement while a board item moves. {column} and {row} are 1-based"
+	},
+	"uic.Board.itemResized": {
+		defaultMessage: "Item resized to {columns} columns by {rows} rows.",
+		description: "Screen reader announcement while a board item is resized"
+	},
+	"uic.Board.moveCommitted": {
+		defaultMessage: "Move committed.",
+		description: "Screen reader announcement when a board item is dropped in its new place"
+	},
+	"uic.Board.resizeCommitted": {
+		defaultMessage: "Resize committed.",
+		description: "Screen reader announcement when a board item's new size is applied"
+	},
+	"uic.Board.moveDiscarded": {
+		defaultMessage: "Move discarded.",
+		description: "Screen reader announcement when moving a board item is cancelled"
+	},
+	"uic.Board.resizeDiscarded": {
+		defaultMessage: "Resize discarded.",
+		description: "Screen reader announcement when resizing a board item is cancelled"
+	},
+	"uic.Board.itemRemoved": {
+		defaultMessage: "Item removed.",
+		description: "Screen reader announcement when a board item is removed"
+	},
+	"uic.Board.directionUp": {
+		defaultMessage: "Up",
+		description: "Accessible name of the button that moves an activated board item, or shrinks a resized one, one row up"
+	},
+	"uic.Board.directionDown": {
+		defaultMessage: "Down",
+		description: "Accessible name of the button that moves an activated board item, or grows a resized one, one row down"
+	},
+	"uic.Board.directionLeft": {
+		defaultMessage: "Left",
+		description: "Accessible name of the button that moves an activated board item, or shrinks a resized one, one column left"
+	},
+	"uic.Board.directionRight": {
+		defaultMessage: "Right",
+		description: "Accessible name of the button that moves an activated board item, or grows a resized one, one column right"
+	}
+});
+//#endregion
+export { t as boardMessages };
+
+//# sourceMappingURL=Board.messages.js.map

package/dist/components/Board/Board.messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Board.messages.js","names":[],"sources":["../../../src/components/Board/Board.messages.ts"],"sourcesContent":["import { defineMessages } from \"../../i18n/catalog\";\n\nexport const boardMessages = defineMessages({\n  \"uic.Board.dragHandle\": {\n    defaultMessage: \"Drag handle\",\n    description:\n      \"Accessible name of the button at a board item's top-left corner that moves the item\",\n  },\n  \"uic.Board.resizeHandle\": {\n    defaultMessage: \"Resize handle\",\n    description:\n      \"Accessible name of the button at a board item's bottom-right corner that resizes the item\",\n  },\n  \"uic.Board.moveStarted\": {\n    defaultMessage: \"Dragging.\",\n    description:\n      \"Screen reader announcement when a board item is picked up to be moved\",\n  },\n  \"uic.Board.resizeStarted\": {\n    defaultMessage: \"Resizing.\",\n    description: \"Screen reader announcement when a board item starts being resized\",\n  },\n  \"uic.Board.itemMoved\": {\n    defaultMessage: \"Item moved to column {column}, row {row}.\",\n    description:\n      \"Screen reader announcement while a board item moves. {column} and {row} are 1-based\",\n  },\n  \"uic.Board.itemResized\": {\n    defaultMessage: \"Item resized to {columns} columns by {rows} rows.\",\n    description: \"Screen reader announcement while a board item is resized\",\n  },\n  \"uic.Board.moveCommitted\": {\n    defaultMessage: \"Move committed.\",\n    description:\n      \"Screen reader announcement when a board item is dropped in its new place\",\n  },\n  \"uic.Board.resizeCommitted\": {\n    defaultMessage: \"Resize committed.\",\n    description: \"Screen reader announcement when a board item's new size is applied\",\n  },\n  \"uic.Board.moveDiscarded\": {\n    defaultMessage: \"Move discarded.\",\n    description: \"Screen reader announcement when moving a board item is cancelled\",\n  },\n  \"uic.Board.resizeDiscarded\": {\n    defaultMessage: \"Resize discarded.\",\n    description: \"Screen reader announcement when resizing a board item is cancelled\",\n  },\n  \"uic.Board.itemRemoved\": {\n    defaultMessage: \"Item removed.\",\n    description: \"Screen reader announcement when a board item is removed\",\n  },\n  \"uic.Board.directionUp\": {\n    defaultMessage: \"Up\",\n    description:\n      \"Accessible name of the button that moves an activated board item, or shrinks a resized one, one row up\",\n  },\n  \"uic.Board.directionDown\": {\n    defaultMessage: \"Down\",\n    description:\n      \"Accessible name of the button that moves an activated board item, or grows a resized one, one row down\",\n  },\n  \"uic.Board.directionLeft\": {\n    defaultMessage: \"Left\",\n    description:\n      \"Accessible name of the button that moves an activated board item, or shrinks a resized one, one column left\",\n  },\n  \"uic.Board.directionRight\": {\n    defaultMessage: \"Right\",\n    description:\n      \"Accessible name of the button that moves an activated board item, or grows a resized one, one column right\",\n  },\n});\n"],"mappings":";;AAEA,IAAa,IAAgB,EAAe;CAC1C,wBAAwB;EACtB,gBAAgB;EAChB,aACE;CACJ;CACA,0BAA0B;EACxB,gBAAgB;EAChB,aACE;CACJ;CACA,yBAAyB;EACvB,gBAAgB;EAChB,aACE;CACJ;CACA,2BAA2B;EACzB,gBAAgB;EAChB,aAAa;CACf;CACA,uBAAuB;EACrB,gBAAgB;EAChB,aACE;CACJ;CACA,yBAAyB;EACvB,gBAAgB;EAChB,aAAa;CACf;CACA,2BAA2B;EACzB,gBAAgB;EAChB,aACE;CACJ;CACA,6BAA6B;EAC3B,gBAAgB;EAChB,aAAa;CACf;CACA,2BAA2B;EACzB,gBAAgB;EAChB,aAAa;CACf;CACA,6BAA6B;EAC3B,gBAAgB;EAChB,aAAa;CACf;CACA,yBAAyB;EACvB,gBAAgB;EAChB,aAAa;CACf;CACA,yBAAyB;EACvB,gBAAgB;EAChB,aACE;CACJ;CACA,2BAA2B;EACzB,gBAAgB;EAChB,aACE;CACJ;CACA,2BAA2B;EACzB,gBAAgB;EAChB,aACE;CACJ;CACA,4BAA4B;EAC1B,gBAAgB;EAChB,aACE;CACJ;AACF,CAAC"}