ionbase-ui 0.13.1 → 0.17.0

package/dist/meta/index.json

@@ -0,0 +1,479 @@
+{
+  "package": "ionbase-ui",
+  "version": "0.17.0",
+  "usage": "Pick a component here, then read dist/meta/<Name>.json for its full contract.",
+  "hooks": [
+    "useToast"
+  ],
+  "components": {
+    "Alert": {
+      "summary": "A persistent, in-page status message. Intent picks the ARIA role for you.",
+      "status": "stable",
+      "variants": {
+        "intent": [
+          "neutral",
+          "primary",
+          "success",
+          "warning",
+          "error",
+          "information"
+        ],
+        "emphasis": [
+          "subtle",
+          "solid"
+        ],
+        "layout": [
+          "inline",
+          "banner"
+        ]
+      },
+      "detail": "dist/meta/Alert.json",
+      "hasIntent": true
+    },
+    "Avatar": {
+      "summary": "Avatar picks its content the way Figma's `Type` variant does, but by",
+      "variants": {
+        "size": [
+          "mini",
+          "sm",
+          "md",
+          "lg"
+        ],
+        "shape": [
+          "circle",
+          "square"
+        ]
+      },
+      "detail": "dist/meta/Avatar.json",
+      "hasIntent": false
+    },
+    "AvatarGroup": {
+      "summary": "AvatarGroup overlaps its children by a quarter of the avatar size, matching",
+      "variants": {
+        "size": [
+          "mini",
+          "sm",
+          "md",
+          "lg"
+        ],
+        "shape": [
+          "circle",
+          "square"
+        ]
+      },
+      "detail": "dist/meta/AvatarGroup.json",
+      "hasIntent": false
+    },
+    "Badge": {
+      "summary": "Badge is presentational — no role, no interaction. React Aria has nothing to",
+      "variants": {
+        "intent": [
+          "neutral",
+          "primary",
+          "success",
+          "warning",
+          "error",
+          "information"
+        ]
+      },
+      "detail": "dist/meta/Badge.json",
+      "hasIntent": false
+    },
+    "Button": {
+      "summary": "Triggers an action in place. Never navigates.",
+      "status": "stable",
+      "variants": {
+        "variant": [
+          "success",
+          "primary-brand",
+          "primary-neutral",
+          "primary-soft",
+          "secondary",
+          "tertiary",
+          "destructive"
+        ],
+        "size": [
+          "sm",
+          "md",
+          "lg",
+          "xl"
+        ]
+      },
+      "detail": "dist/meta/Button.json",
+      "hasIntent": true
+    },
+    "Checkbox": {
+      "summary": "Checkbox wraps a native `<input type=\"checkbox\">` and hides it.",
+      "variants": {
+        "size": [
+          "sm",
+          "md",
+          "lg"
+        ],
+        "intent": [
+          "neutral",
+          "brand",
+          "danger"
+        ]
+      },
+      "detail": "dist/meta/Checkbox.json",
+      "hasIntent": false
+    },
+    "Divider": {
+      "summary": "A single `<hr>`, matching Figma's `Border` (70:22153).",
+      "variants": {
+        "orientation": [
+          "horizontal",
+          "vertical"
+        ]
+      },
+      "detail": "dist/meta/Divider.json",
+      "hasIntent": false
+    },
+    "FullCard": {
+      "summary": "Full Card — the full-bleed case study row from Figma `Full Card` (592:857).",
+      "variants": {
+        "alignment": [
+          "right",
+          "left"
+        ]
+      },
+      "detail": "dist/meta/FullCard.json",
+      "hasIntent": false
+    },
+    "Header": {
+      "summary": "Header renders Figma's four Device variants — Desktop, Tablet,",
+      "variants": {},
+      "detail": "dist/meta/Header.json",
+      "hasIntent": false
+    },
+    "Icon": {
+      "summary": "Wrapper that applies the design system's icon sizing and accessibility",
+      "variants": {},
+      "detail": "dist/meta/Icon.json",
+      "hasIntent": false
+    },
+    "Input": {
+      "summary": "A single-line text field, together with its label, helper text and error message.",
+      "status": "stable",
+      "variants": {
+        "size": [
+          "sm",
+          "md",
+          "lg"
+        ],
+        "autoCapitalize": [
+          "none",
+          "off",
+          "on",
+          "sentences",
+          "words",
+          "characters"
+        ]
+      },
+      "detail": "dist/meta/Input.json",
+      "hasIntent": true
+    },
+    "Link": {
+      "summary": "Link — Figma `Link` (774:1516).",
+      "variants": {
+        "variant": [
+          "inline",
+          "standalone"
+        ]
+      },
+      "detail": "dist/meta/Link.json",
+      "hasIntent": false
+    },
+    "Logo": {
+      "summary": "The full lockup: mark + wordmark, matching Figma's `Logo-Ionbase`",
+      "variants": {
+        "size": [
+          "sm",
+          "lg"
+        ],
+        "wordmark": [
+          "text",
+          "vector"
+        ]
+      },
+      "detail": "dist/meta/Logo.json",
+      "hasIntent": false
+    },
+    "LogoMark": {
+      "summary": "The bare icon glyph, no wordmark — what `Header` actually uses.",
+      "variants": {
+        "size": [
+          "sm",
+          "lg"
+        ]
+      },
+      "detail": "dist/meta/LogoMark.json",
+      "hasIntent": false
+    },
+    "Menu": {
+      "summary": "Menu is the list surface, not a popover.",
+      "variants": {},
+      "detail": "dist/meta/Menu.json",
+      "hasIntent": false
+    },
+    "MenuItem": {
+      "summary": null,
+      "variants": {},
+      "detail": "dist/meta/MenuItem.json",
+      "hasIntent": false
+    },
+    "Modal": {
+      "summary": "A focus-trapping dialog. Renders nothing when closed and portals when open.",
+      "status": "stable",
+      "variants": {
+        "size": [
+          "sm",
+          "md",
+          "lg",
+          "fullscreen"
+        ],
+        "align": [
+          "left",
+          "center"
+        ]
+      },
+      "detail": "dist/meta/Modal.json",
+      "hasIntent": true
+    },
+    "NavItem": {
+      "summary": "Nav Item renders an `<a>` when given `href`, a `<button>` otherwise —",
+      "variants": {},
+      "detail": "dist/meta/NavItem.json",
+      "hasIntent": false
+    },
+    "PhoneInput": {
+      "summary": "PhoneInput — Figma `Input/Phone` (80:372).",
+      "variants": {
+        "autoCapitalize": [
+          "none",
+          "off",
+          "on",
+          "sentences",
+          "words",
+          "characters"
+        ],
+        "size": [
+          "sm",
+          "md",
+          "lg"
+        ]
+      },
+      "detail": "dist/meta/PhoneInput.json",
+      "hasIntent": false
+    },
+    "Popover": {
+      "summary": "Popover — Figma `Popover` (825:1853).",
+      "variants": {
+        "placement": [
+          "right",
+          "left",
+          "top",
+          "bottom"
+        ],
+        "size": [
+          "sm",
+          "md",
+          "lg"
+        ]
+      },
+      "detail": "dist/meta/Popover.json",
+      "hasIntent": false
+    },
+    "Radio": {
+      "summary": null,
+      "variants": {
+        "size": [
+          "sm",
+          "md",
+          "lg"
+        ],
+        "intent": [
+          "neutral",
+          "brand",
+          "danger"
+        ]
+      },
+      "detail": "dist/meta/Radio.json",
+      "hasIntent": false
+    },
+    "RadioGroup": {
+      "summary": "Renders a `<fieldset>` with a `<legend>` rather than a div with",
+      "variants": {
+        "size": [
+          "sm",
+          "md",
+          "lg"
+        ],
+        "intent": [
+          "neutral",
+          "brand",
+          "danger"
+        ]
+      },
+      "detail": "dist/meta/RadioGroup.json",
+      "hasIntent": false
+    },
+    "ScrollProgress": {
+      "summary": "The compact rail is the disclosure trigger. It is a real `<button>`, so a",
+      "variants": {},
+      "detail": "dist/meta/ScrollProgress.json",
+      "hasIntent": false
+    },
+    "Select": {
+      "summary": "A dropdown over a native <select>, with the same label and error wiring as Input.",
+      "status": "stable",
+      "variants": {
+        "size": [
+          "sm",
+          "md",
+          "lg"
+        ]
+      },
+      "detail": "dist/meta/Select.json",
+      "hasIntent": true
+    },
+    "TabItem": {
+      "summary": null,
+      "variants": {},
+      "detail": "dist/meta/TabItem.json",
+      "hasIntent": false
+    },
+    "Table": {
+      "summary": "A data table. Table owns the scroll container and density; rows and cells are composed.",
+      "status": "stable",
+      "variants": {
+        "density": [
+          "compact",
+          "default",
+          "relaxed"
+        ]
+      },
+      "detail": "dist/meta/Table.json",
+      "hasIntent": true
+    },
+    "TableBody": {
+      "summary": null,
+      "variants": {},
+      "detail": "dist/meta/TableBody.json",
+      "hasIntent": false
+    },
+    "TableCell": {
+      "summary": "One component covers Figma's `Table Cell` + `Cell Text`: the two are never",
+      "variants": {
+        "scope": [
+          "row",
+          "rowgroup",
+          "col",
+          "colgroup"
+        ],
+        "align": [
+          "center",
+          "leading",
+          "trailing"
+        ],
+        "variant": [
+          "link",
+          "default"
+        ]
+      },
+      "detail": "dist/meta/TableCell.json",
+      "hasIntent": false
+    },
+    "TableHead": {
+      "summary": null,
+      "variants": {},
+      "detail": "dist/meta/TableHead.json",
+      "hasIntent": false
+    },
+    "TableRow": {
+      "summary": "A plain `<tr>`. Hover is CSS-only (`:hover` plus a `data-hovered` escape",
+      "variants": {},
+      "detail": "dist/meta/TableRow.json",
+      "hasIntent": false
+    },
+    "Tabs": {
+      "summary": null,
+      "variants": {
+        "type": [
+          "pill",
+          "underline"
+        ],
+        "size": [
+          "sm",
+          "md",
+          "lg"
+        ],
+        "orientation": [
+          "horizontal",
+          "vertical"
+        ]
+      },
+      "detail": "dist/meta/Tabs.json",
+      "hasIntent": false
+    },
+    "Toast": {
+      "summary": "Toast — Figma `Toast` (820:1655).",
+      "variants": {
+        "intent": [
+          "neutral",
+          "primary",
+          "success",
+          "warning",
+          "error",
+          "information"
+        ]
+      },
+      "detail": "dist/meta/Toast.json",
+      "hasIntent": false
+    },
+    "ToastProvider": {
+      "summary": "Renders the queue and supplies `useToast`.",
+      "variants": {
+        "placement": [
+          "top-left",
+          "top-right",
+          "bottom-left",
+          "bottom-right"
+        ]
+      },
+      "detail": "dist/meta/ToastProvider.json",
+      "hasIntent": false
+    },
+    "Toggle": {
+      "summary": "Toggle is a checkbox with `role=\"switch\"`.",
+      "variants": {
+        "size": [
+          "sm",
+          "md",
+          "lg"
+        ],
+        "intent": [
+          "neutral",
+          "brand",
+          "danger"
+        ]
+      },
+      "detail": "dist/meta/Toggle.json",
+      "hasIntent": false
+    },
+    "Tooltip": {
+      "summary": "Tooltip — Figma `Tooltip` (801:1568).",
+      "variants": {
+        "placement": [
+          "right",
+          "left",
+          "top",
+          "bottom"
+        ]
+      },
+      "detail": "dist/meta/Tooltip.json",
+      "hasIntent": false
+    }
+  }
+}

package/dist/styles/index.css

@@ -45,7 +45,9 @@
 @import url('./divider.css');
 @import url('./link.css');
 @import url('./modal.css');
+@import url('./popover.css');
 @import url('./tooltip.css');
+@import url('./toast.css');
 @import url('./nav-item.css');
 @import url('./scroll-progress.css');
 @import url('./full-card.css');

package/dist/styles/popover.css

@@ -0,0 +1,185 @@
+/*
+ * Popover
+ *
+ * Measured from Figma `Popover` (825:1853). Placement x Size.
+ *
+ * IT SITS BETWEEN TOOLTIP AND MODAL
+ *
+ * A tooltip is a hint that cannot hold focusable content; a modal is a task
+ * that takes over the page. A popover holds interactive content but stays
+ * attached to the control that opened it — no visible scrim, anchored to its
+ * trigger, and `surface/raised` rather than Modal's `surface/overlay`.
+ */
+.ion-popover {
+  --ion-popover-width: 320px;
+
+  position: absolute;
+  z-index: 1150;
+
+  /*
+   * Between Modal (1000) and Toast (1200). A popover opened from a control
+   * inside a dialog has to sit above the dialog, and a toast confirming what
+   * the popover did has to sit above both.
+   */
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-12);
+  width: var(--ion-popover-width);
+  max-width: calc(100vw - var(--spacing-16) * 2);
+  padding: var(--spacing-16);
+  background-color: var(--surface-raised);
+
+  /* For dark mode, where surface/raised is neutral.800 against a near-black
+   * page and the shadow alone does not separate them. Same as Toast. */
+  border: var(--border-width-default) solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  box-shadow: var(--ion-shadow-shadow-lg);
+  font-family: var(--font-family-sans);
+}
+
+.ion-popover--sm {
+  --ion-popover-width: 280px;
+}
+
+.ion-popover--lg {
+  --ion-popover-width: 400px;
+}
+
+/*
+ * The underlay listens, it does not paint.
+ *
+ * Modal's scrim is visible because a modal replaces the page. This one is
+ * transparent: it exists only so a click anywhere outside closes the popover,
+ * while everything behind stays legible.
+ */
+.ion-popover__underlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1140;
+}
+
+/*
+ * The arrow, as a rotated square rather than a border triangle.
+ *
+ * Tooltip uses borders because it has no outline to match. This panel has a
+ * 1px border, so the caret needs two of its edges drawn — a rotated square
+ * with a border on two sides is the only shape that produces a continuous
+ * outline where it meets the panel. React Aria positions it along the edge;
+ * these rules only decide which side it sits on and which edges are drawn.
+ */
+.ion-popover__arrow {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  background-color: var(--surface-raised);
+  border: var(--border-width-default) solid var(--border-subtle);
+  transform: rotate(45deg);
+}
+
+/*
+ * `--top` means the popover is ABOVE the trigger, so the caret hangs off the
+ * bottom edge. These follow the RESOLVED placement: react-aria flips on
+ * collision, and an arrow left on the requested side points away from the
+ * trigger entirely.
+ *
+ * The half-width negative offset centres the rotated square on the edge, and
+ * clearing two borders leaves the seam continuous with the panel.
+ */
+.ion-popover--top .ion-popover__arrow {
+  bottom: -7px;
+  border-top: none;
+  border-left: none;
+}
+
+.ion-popover--bottom .ion-popover__arrow {
+  top: -7px;
+  border-bottom: none;
+  border-right: none;
+}
+
+.ion-popover--left .ion-popover__arrow {
+  right: -7px;
+  border-bottom: none;
+  border-left: none;
+}
+
+.ion-popover--right .ion-popover__arrow {
+  left: -7px;
+  border-top: none;
+  border-right: none;
+}
+
+.ion-popover__header {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-12);
+}
+
+.ion-popover__title {
+  margin: 0;
+  flex: 1 1 auto;
+  min-width: 0;
+  color: var(--text-default);
+  font-size: var(--type-body);
+  line-height: var(--type-body-line-height);
+  font-weight: var(--font-weight-medium);
+}
+
+/*
+ * 32px around a 20px glyph — WCAG 2.2 SC 2.5.8 asks 24x24 minimum. Same
+ * reasoning as Modal's close, Alert's dismiss and Toast's.
+ */
+.ion-popover__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--spacing-32);
+  height: var(--spacing-32);
+  padding: 0;
+  background: none;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--icon-secondary);
+  cursor: pointer;
+  transition: background-color var(--ion-duration-base) var(--ion-ease-out);
+}
+
+.ion-popover__close svg {
+  width: var(--icon-size-md);
+  height: var(--icon-size-md);
+}
+
+@media (hover: hover) {
+  .ion-popover__close:hover {
+    background-color: var(--surface-hover);
+  }
+}
+
+.ion-popover__close:focus-visible {
+  outline: var(--border-width-thick) solid var(--ring-focus);
+  outline-offset: 2px;
+}
+
+/*
+ * The body is the only part that scrolls, capped against the viewport. A
+ * popover anchored near an edge would otherwise run off it — Figma panels hug
+ * because a Figma frame has no viewport to overflow.
+ */
+.ion-popover__body {
+  max-height: 60vh;
+  overflow-y: auto;
+  color: var(--text-secondary);
+  font-size: var(--type-body-sm);
+  line-height: var(--type-body-sm-line-height);
+  font-weight: var(--font-weight-regular);
+  overflow-wrap: anywhere;
+}
+
+.ion-popover__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-8);
+  flex-shrink: 0;
+}