gbs-add-block 2.1.0 → 2.3.0

package/source/beta-components/popover/passport.json

@@ -0,0 +1,238 @@
+{
+  "passportVersion": "1.0.0",
+  "identity": {
+    "component": "Popover",
+    "folder": "popover",
+    "exports": [
+      "Popover"
+    ]
+  },
+  "source": {
+    "libraryVersion": "2.3.0",
+    "files": [
+      "core/index.ts",
+      "core/types.ts",
+      "index.ts",
+      "react/Popover.tsx",
+      "react/locale.ts",
+      "react/props.ts"
+    ],
+    "sourceHash": "sha256:1d654ca03fa59b72acd7820668095bf86052efaf96480f3d8c5981a03a55891e"
+  },
+  "props": [
+    {
+      "name": "align",
+      "type": "enum",
+      "values": [
+        "end",
+        "start"
+      ],
+      "typeText": "PopoverAlign | undefined",
+      "required": false,
+      "default": "start",
+      "origin": "derived",
+      "description": "Default `start`.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "aria-label",
+      "type": "string",
+      "typeText": "string | undefined",
+      "required": false,
+      "origin": "derived",
+      "description": "Names the panel when there is no `title`.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "autoFocus",
+      "type": "boolean",
+      "typeText": "boolean | undefined",
+      "required": false,
+      "default": true,
+      "origin": "derived",
+      "description": "Move focus into the panel when it opens. Default true.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "children",
+      "type": "other",
+      "typeText": "ReactNode | ((props: PopoverRenderProps) => ReactNode)",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "className",
+      "type": "string",
+      "typeText": "string | undefined",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "classNames",
+      "type": "other",
+      "typeText": "Partial<Record<PopoverSlot, string>> | undefined",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "defaultOpen",
+      "type": "boolean",
+      "typeText": "boolean | undefined",
+      "required": false,
+      "default": false,
+      "origin": "derived"
+    },
+    {
+      "name": "description",
+      "type": "other",
+      "typeText": "ReactNode",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "gap",
+      "type": "number",
+      "typeText": "number | undefined",
+      "required": false,
+      "default": 6,
+      "origin": "derived",
+      "description": "Distance from the trigger, in pixels. Default 6.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "id",
+      "type": "string",
+      "typeText": "string | undefined",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "localeText",
+      "type": "other",
+      "typeText": "Partial<PopoverLocaleText> | undefined",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "onOpenChange",
+      "type": "function",
+      "signature": "((open: boolean, reason?: PopoverCloseReason) => void) | undefined",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "open",
+      "type": "boolean",
+      "typeText": "boolean | undefined",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "ref",
+      "type": "other",
+      "typeText": "Ref<PopoverHandle> | undefined",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "scrollable",
+      "type": "boolean",
+      "typeText": "boolean | undefined",
+      "required": false,
+      "default": false,
+      "origin": "derived",
+      "description": "Cap the panel to the space available and let it scroll. Default false.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "side",
+      "type": "enum",
+      "values": [
+        "bottom",
+        "left",
+        "right",
+        "top"
+      ],
+      "typeText": "PopoverSide | undefined",
+      "required": false,
+      "default": "bottom",
+      "origin": "derived",
+      "description": "Side of the trigger to open on, before flipping for space. Default `bottom`.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "style",
+      "type": "other",
+      "typeText": "CSSProperties | undefined",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "title",
+      "type": "other",
+      "typeText": "ReactNode",
+      "required": false,
+      "origin": "derived",
+      "description": "Heading inside the panel, which also names it.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "trigger",
+      "type": "other",
+      "typeText": "ReactElement<{ [attribute: string]: unknown; ref?: Ref<HTMLElement>; }, string | import(\"react\").JSXElementConstructor<any>>",
+      "required": true,
+      "origin": "derived",
+      "description": "The element that opens it. It is cloned with a ref and the ARIA attributes\r\nthat tie it to the panel, so pass a single element that forwards both — any\r\nbutton in this library does.",
+      "descriptionOrigin": "jsdoc"
+    }
+  ],
+  "events": [
+    {
+      "name": "onOpenChange",
+      "signature": "((open: boolean, reason?: PopoverCloseReason) => void) | undefined"
+    }
+  ],
+  "slots": [
+    "root",
+    "panel",
+    "header",
+    "title",
+    "description",
+    "body",
+    "arrow"
+  ],
+  "states": [
+    {
+      "attr": "data-side",
+      "values": [
+        "left",
+        "right",
+        "top"
+      ]
+    },
+    {
+      "attr": "data-theme",
+      "values": [
+        "dark",
+        "light"
+      ]
+    }
+  ],
+  "accessibility": {
+    "supplied": [],
+    "required": []
+  },
+  "composition": {},
+  "operations": {},
+  "intentDomains": [],
+  "safeMutations": {},
+  "examples": [],
+  "coverage": {
+    "propsTotal": 19,
+    "propsDescribed": 8,
+    "describedPct": 42,
+    "authoredSections": [
+      "accessibility"
+    ]
+  }
+}

package/source/beta-components/popover/styles.css

@@ -1,147 +1,148 @@
-/*
- * Popover styles.
- *
- * Tokens read the shared --gbs-* variables when they are set on an ancestor
- * (set them on :root to theme every component at once) and fall back to the
- * same default palette otherwise. Rules live in the `gbs` layer. Declare
- * where that sits in your global CSS — e.g. `@layer reset, gbs, app,
- * utilities;` — and anything in a later layer, Tailwind utilities included,
- * overrides them.
- */
-
-@layer gbs {
-  .pv-root {
-    --pv-bg: var(--gbs-bg, var(--dg-bg, light-dark(#ffffff, #0b0b0e)));
-    --pv-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));
-    --pv-muted: var(--gbs-muted, var(--dg-muted, light-dark(#71717a, #a1a1aa)));
-    --pv-border: var(--gbs-border, var(--dg-border, light-dark(#e4e4e7, #27272a)));
-    --pv-focus: var(--gbs-focus, var(--dg-focus, light-dark(#2563eb, #60a5fa)));
-    --pv-shadow: var(--gbs-shadow, var(--dg-shadow, 0 10px 30px -8px light-dark(rgb(0 0 0 / 0.18), rgb(0 0 0 / 0.6))));
-    --pv-radius: var(--gbs-radius, var(--dg-radius, 8px));
-    --pv-font-size: var(--gbs-font-size, var(--dg-font-size, 13px));
-    --pv-px: 12px;
-    --pv-width: 280px;
-    --pv-duration: 140ms;
-
-    position: fixed;
-    inset: auto;
-    z-index: 60;
-    width: max-content;
-    max-width: min(var(--pv-width), calc(100vw - 16px));
-    margin: 0;
-    padding: 0;
-    overflow: auto;
-    overscroll-behavior: contain;
-    border: 1px solid var(--pv-border);
-    border-radius: var(--pv-radius);
-    background: var(--pv-bg);
-    color: var(--pv-fg);
-    box-shadow: var(--pv-shadow);
-    color-scheme: inherit;
-    font-size: var(--pv-font-size);
-    line-height: 1.5;
-  }
-
-  :where(.dark, [data-theme="dark"]) .pv-root {
-    color-scheme: dark;
-  }
-  :where(.light, [data-theme="light"]) .pv-root {
-    color-scheme: light;
-  }
-
-  :where(.pv-root) *,
-  :where(.pv-root) *::before,
-  :where(.pv-root) *::after {
-    box-sizing: border-box;
-  }
-
-  /* The panel is focused when it opens, which should not draw a ring unless
-     the person is actually navigating by keyboard. */
-  .pv-root:focus {
-    outline: none;
-  }
-  .pv-root:focus-visible {
-    outline: 2px solid var(--pv-focus);
-    outline-offset: 2px;
-  }
-
-  .pv-root:popover-open {
-    animation: pv-in var(--pv-duration) ease;
-  }
-
-  /* Grows from the edge it is anchored to, so it reads as coming from the
-     trigger rather than appearing from nowhere. */
-  @keyframes pv-in {
-    from {
-      opacity: 0;
-      translate: 0 -2px;
-    }
-  }
-  .pv-root[data-side="top"]:popover-open {
-    animation-name: pv-in-top;
-  }
-  @keyframes pv-in-top {
-    from {
-      opacity: 0;
-      translate: 0 2px;
-    }
-  }
-  .pv-root[data-side="left"]:popover-open {
-    animation-name: pv-in-left;
-  }
-  @keyframes pv-in-left {
-    from {
-      opacity: 0;
-      translate: 2px 0;
-    }
-  }
-  .pv-root[data-side="right"]:popover-open {
-    animation-name: pv-in-right;
-  }
-  @keyframes pv-in-right {
-    from {
-      opacity: 0;
-      translate: -2px 0;
-    }
-  }
-
-  /* -------------------------------------------------------------- content */
-
-  .pv-panel {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    padding: var(--pv-px);
-  }
-
-  .pv-header {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-  }
-  .pv-title {
-    margin: 0;
-    font-size: 1.02em;
-    font-weight: 600;
-  }
-  .pv-description {
-    margin: 0;
-    color: var(--pv-muted);
-  }
-
-  .pv-body:empty {
-    display: none;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .pv-root:popover-open {
-      animation: none;
-    }
-  }
-
-  @media (forced-colors: active) {
-    .pv-root {
-      border: 1px solid CanvasText;
-    }
-  }
-}
+/*
+ * Popover styles.
+ *
+ * Tokens read the shared --gbs-* variables when they are set on an ancestor
+ * (set them on :root to theme every component at once) and fall back to the
+ * same default palette otherwise. Rules are unlayered: they beat a framework
+ * reset on specificity, and lose to anything you pass through `className`.
+ * With Tailwind v4, import this file after the framework and inside its
+ * components layer - see the README.
+ */
+
+.pv-root {
+  --pv-bg: var(--gbs-bg, var(--dg-bg, light-dark(#ffffff, #0b0b0e)));
+  --pv-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));
+  --pv-muted: var(--gbs-muted, var(--dg-muted, light-dark(#71717a, #a1a1aa)));
+  --pv-border: var(--gbs-border, var(--dg-border, light-dark(#e4e4e7, #27272a)));
+  --pv-focus: var(--gbs-focus, var(--dg-focus, light-dark(#2563eb, #60a5fa)));
+  --pv-shadow: var(--gbs-shadow, var(--dg-shadow, 0 10px 30px -8px light-dark(rgb(0 0 0 / 0.18), rgb(0 0 0 / 0.6))));
+  --pv-radius: var(--gbs-radius, var(--dg-radius, 8px));
+  --pv-font-size: var(--gbs-font-size, var(--dg-font-size, 13px));
+  --pv-px: 12px;
+  --pv-width: 280px;
+  --pv-duration: 140ms;
+
+  position: fixed;
+  inset: auto;
+  z-index: 60;
+  width: max-content;
+  max-width: min(var(--pv-width), calc(100vw - 16px));
+  margin: 0;
+  padding: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  border: 1px solid var(--pv-border);
+  border-radius: var(--pv-radius);
+  background: var(--pv-bg);
+  color: var(--pv-fg);
+  box-shadow: var(--pv-shadow);
+  color-scheme: inherit;
+  font-size: var(--pv-font-size);
+  line-height: 1.5;
+  scrollbar-width: var(--gbs-scrollbar-width, thin);
+  scrollbar-color: var(--gbs-scrollbar-thumb, light-dark(#c4c4ca, #3f3f46))
+    var(--gbs-scrollbar-track, transparent);
+}
+
+:where(.dark, [data-theme="dark"]) .pv-root {
+  color-scheme: dark;
+}
+:where(.light, [data-theme="light"]) .pv-root {
+  color-scheme: light;
+}
+
+:where(.pv-root) *,
+:where(.pv-root) *::before,
+:where(.pv-root) *::after {
+  box-sizing: border-box;
+}
+
+/* The panel is focused when it opens, which should not draw a ring unless
+   the person is actually navigating by keyboard. */
+.pv-root:focus {
+  outline: none;
+}
+.pv-root:focus-visible {
+  outline: 2px solid var(--pv-focus);
+  outline-offset: 2px;
+}
+
+.pv-root:popover-open {
+  animation: pv-in var(--pv-duration) ease;
+}
+
+/* Grows from the edge it is anchored to, so it reads as coming from the
+   trigger rather than appearing from nowhere. */
+@keyframes pv-in {
+  from {
+    opacity: 0;
+    translate: 0 -2px;
+  }
+}
+.pv-root[data-side="top"]:popover-open {
+  animation-name: pv-in-top;
+}
+@keyframes pv-in-top {
+  from {
+    opacity: 0;
+    translate: 0 2px;
+  }
+}
+.pv-root[data-side="left"]:popover-open {
+  animation-name: pv-in-left;
+}
+@keyframes pv-in-left {
+  from {
+    opacity: 0;
+    translate: 2px 0;
+  }
+}
+.pv-root[data-side="right"]:popover-open {
+  animation-name: pv-in-right;
+}
+@keyframes pv-in-right {
+  from {
+    opacity: 0;
+    translate: -2px 0;
+  }
+}
+
+/* -------------------------------------------------------------- content */
+
+.pv-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: var(--pv-px);
+}
+
+.pv-header {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.pv-title {
+  margin: 0;
+  font-size: 1.02em;
+  font-weight: 600;
+}
+.pv-description {
+  margin: 0;
+  color: var(--pv-muted);
+}
+
+.pv-body:empty {
+  display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pv-root:popover-open {
+    animation: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .pv-root {
+    border: 1px solid CanvasText;
+  }
+}