gbs-add-block 2.1.0 → 2.3.0

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

@@ -1,208 +1,207 @@
-/*
- * Accordion styles.
- *
- * Each section is a native <details>, so the marker has to be taken off (two
- * ways: `list-item` display in Firefox, the WebKit pseudo-element elsewhere)
- * before a chevron of our own goes on. Tokens read the shared --gbs-*
- * variables when they are set on an ancestor (set them on :root to theme
- * every component at once). Rules live in the `gbs` layer; declare where it
- * sits in your global CSS, e.g. `@layer reset, gbs, app, utilities;`, and
- * anything in a later layer overrides them.
- */
-
-@layer gbs {
-  .ac-root {
-    --ac-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));
-    --ac-muted: var(--gbs-muted, var(--dg-muted, light-dark(#71717a, #a1a1aa)));
-    --ac-bg: var(--gbs-bg, var(--dg-bg, light-dark(#ffffff, #0b0b0e)));
-    --ac-border: var(--gbs-border, var(--dg-border, light-dark(#e4e4e7, #27272a)));
-    --ac-hover: var(--gbs-hover, var(--dg-hover, light-dark(#f4f4f5, #1f1f23)));
-    --ac-focus: var(--gbs-focus, var(--dg-focus, light-dark(#2563eb, #60a5fa)));
-    --ac-radius: var(--gbs-radius, var(--dg-radius, 8px));
-    --ac-font-size: var(--gbs-font-size, var(--dg-font-size, 13px));
-    --ac-px: 14px;
-    --ac-py: 12px;
-    --ac-duration: 180ms;
-
-    color-scheme: inherit;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    min-width: 0;
-    font-size: var(--ac-font-size);
-    line-height: 1.5;
-    color: var(--ac-fg);
-  }
-
-  :where(.dark, [data-theme="dark"]) .ac-root {
-    color-scheme: dark;
-  }
-  :where(.light, [data-theme="light"]) .ac-root {
-    color-scheme: light;
-  }
-
-  :where(.ac-root) *,
-  :where(.ac-root) *::before,
-  :where(.ac-root) *::after {
-    box-sizing: border-box;
-  }
-
-  .ac-root[data-size="sm"] {
-    --ac-px: 10px;
-    --ac-py: 8px;
-    --ac-font-size: 12px;
-  }
-  .ac-root[data-size="lg"] {
-    --ac-px: 18px;
-    --ac-py: 16px;
-    --ac-font-size: 14px;
-  }
-
-  /* ---------------------------------------------------------------- item */
-
-  .ac-item {
-    min-width: 0;
-    border: 1px solid var(--ac-border);
-    border-radius: var(--ac-radius);
-    background: var(--ac-bg);
-  }
-
-  /* Contained: one block with dividers instead of separate cards. */
-  .ac-root[data-variant="contained"] {
-    gap: 0;
-    border: 1px solid var(--ac-border);
-    border-radius: var(--ac-radius);
-    overflow: hidden;
-  }
-  .ac-root[data-variant="contained"] .ac-item {
-    border: 0;
-    border-block-end: 1px solid var(--ac-border);
-    border-radius: 0;
-  }
-  .ac-root[data-variant="contained"] .ac-item:last-child {
-    border-block-end: 0;
-  }
-
-  /* Plain: rules only, for a sidebar or a FAQ. */
-  .ac-root[data-variant="plain"] {
-    gap: 0;
-  }
-  .ac-root[data-variant="plain"] .ac-item {
-    border: 0;
-    border-block-end: 1px solid var(--ac-border);
-    border-radius: 0;
-    background: none;
-  }
-  .ac-root[data-variant="plain"] .ac-header {
-    padding-inline: 0;
-  }
-  .ac-root[data-variant="plain"] .ac-body {
-    padding-inline: 0;
-  }
-
-  /* -------------------------------------------------------------- header */
-
-  .ac-header {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: var(--ac-py) var(--ac-px);
-    border-radius: inherit;
-    cursor: pointer;
-    user-select: none;
-    /* Firefox draws the triangle through `display: list-item`. */
-    list-style: none;
-  }
-  .ac-header::-webkit-details-marker {
-    display: none;
-  }
-  .ac-header:hover {
-    background: var(--ac-hover);
-  }
-  .ac-header:focus-visible {
-    outline: 2px solid var(--ac-focus);
-    outline-offset: -2px;
-  }
-  .ac-item[data-disabled] .ac-header {
-    cursor: not-allowed;
-  }
-  .ac-item[data-disabled] .ac-title {
-    color: var(--ac-muted);
-  }
-
-  .ac-heading {
-    display: flex;
-    flex: 1 1 auto;
-    flex-direction: column;
-    gap: 1px;
-    min-width: 0;
-  }
-  .ac-title {
-    font-weight: 600;
-  }
-  .ac-description {
-    color: var(--ac-muted);
-    font-weight: 400;
-  }
-  .ac-meta {
-    display: inline-flex;
-    flex: none;
-    align-items: center;
-    gap: 6px;
-    color: var(--ac-muted);
-  }
-
-  .ac-icon {
-    display: inline-flex;
-    flex: none;
-    color: var(--ac-muted);
-    transition: rotate var(--ac-duration) ease;
-  }
-  .ac-icon > svg {
-    width: 16px;
-    height: 16px;
-  }
-  .ac-item[open] > .ac-header .ac-icon {
-    rotate: 180deg;
-  }
-
-  /* ------------------------------------------------------------- content */
-
-  .ac-body {
-    padding: 0 var(--ac-px) var(--ac-py);
-  }
-
-  /*
-   * Opening animates where the browser can do it: `interpolate-size` lets a
-   * height of `auto` be interpolated, and `::details-content` is the box to
-   * animate. Browsers without either simply show and hide, which is the
-   * behaviour everything else falls back to anyway.
-   */
-  @supports (interpolate-size: allow-keywords) {
-    .ac-root {
-      interpolate-size: allow-keywords;
-    }
-    .ac-item::details-content {
-      height: 0;
-      overflow: hidden;
-      transition:
-        height var(--ac-duration) ease,
-        content-visibility var(--ac-duration) allow-discrete;
-    }
-    .ac-item[open]::details-content {
-      height: auto;
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .ac-root {
-      --ac-duration: 0s;
-    }
-  }
-
-  @media (forced-colors: active) {
-    .ac-item {
-      border: 1px solid CanvasText;
-    }
-  }
-}
+/*
+ * Accordion styles.
+ *
+ * Each section is a native <details>, so the marker has to be taken off (two
+ * ways: `list-item` display in Firefox, the WebKit pseudo-element elsewhere)
+ * before a chevron of our own goes on. Tokens read the shared --gbs-*
+ * variables when they are set on an ancestor (set them on :root to theme every
+ * component at once). 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.
+ */
+
+.ac-root {
+  --ac-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));
+  --ac-muted: var(--gbs-muted, var(--dg-muted, light-dark(#71717a, #a1a1aa)));
+  --ac-bg: var(--gbs-bg, var(--dg-bg, light-dark(#ffffff, #0b0b0e)));
+  --ac-border: var(--gbs-border, var(--dg-border, light-dark(#e4e4e7, #27272a)));
+  --ac-hover: var(--gbs-hover, var(--dg-hover, light-dark(#f4f4f5, #1f1f23)));
+  --ac-focus: var(--gbs-focus, var(--dg-focus, light-dark(#2563eb, #60a5fa)));
+  --ac-radius: var(--gbs-radius, var(--dg-radius, 8px));
+  --ac-font-size: var(--gbs-font-size, var(--dg-font-size, 13px));
+  --ac-px: 14px;
+  --ac-py: 12px;
+  --ac-duration: 180ms;
+
+  color-scheme: inherit;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+  font-size: var(--ac-font-size);
+  line-height: 1.5;
+  color: var(--ac-fg);
+}
+
+:where(.dark, [data-theme="dark"]) .ac-root {
+  color-scheme: dark;
+}
+:where(.light, [data-theme="light"]) .ac-root {
+  color-scheme: light;
+}
+
+:where(.ac-root) *,
+:where(.ac-root) *::before,
+:where(.ac-root) *::after {
+  box-sizing: border-box;
+}
+
+.ac-root[data-size="sm"] {
+  --ac-px: 10px;
+  --ac-py: 8px;
+  --ac-font-size: 12px;
+}
+.ac-root[data-size="lg"] {
+  --ac-px: 18px;
+  --ac-py: 16px;
+  --ac-font-size: 14px;
+}
+
+/* ---------------------------------------------------------------- item */
+
+.ac-item {
+  min-width: 0;
+  border: 1px solid var(--ac-border);
+  border-radius: var(--ac-radius);
+  background: var(--ac-bg);
+}
+
+/* Contained: one block with dividers instead of separate cards. */
+.ac-root[data-variant="contained"] {
+  gap: 0;
+  border: 1px solid var(--ac-border);
+  border-radius: var(--ac-radius);
+  overflow: hidden;
+}
+.ac-root[data-variant="contained"] .ac-item {
+  border: 0;
+  border-block-end: 1px solid var(--ac-border);
+  border-radius: 0;
+}
+.ac-root[data-variant="contained"] .ac-item:last-child {
+  border-block-end: 0;
+}
+
+/* Plain: rules only, for a sidebar or a FAQ. */
+.ac-root[data-variant="plain"] {
+  gap: 0;
+}
+.ac-root[data-variant="plain"] .ac-item {
+  border: 0;
+  border-block-end: 1px solid var(--ac-border);
+  border-radius: 0;
+  background: none;
+}
+.ac-root[data-variant="plain"] .ac-header {
+  padding-inline: 0;
+}
+.ac-root[data-variant="plain"] .ac-body {
+  padding-inline: 0;
+}
+
+/* -------------------------------------------------------------- header */
+
+.ac-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: var(--ac-py) var(--ac-px);
+  border-radius: inherit;
+  cursor: pointer;
+  user-select: none;
+  /* Firefox draws the triangle through `display: list-item`. */
+  list-style: none;
+}
+.ac-header::-webkit-details-marker {
+  display: none;
+}
+.ac-header:hover {
+  background: var(--ac-hover);
+}
+.ac-header:focus-visible {
+  outline: 2px solid var(--ac-focus);
+  outline-offset: -2px;
+}
+.ac-item[data-disabled] .ac-header {
+  cursor: not-allowed;
+}
+.ac-item[data-disabled] .ac-title {
+  color: var(--ac-muted);
+}
+
+.ac-heading {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+.ac-title {
+  font-weight: 600;
+}
+.ac-description {
+  color: var(--ac-muted);
+  font-weight: 400;
+}
+.ac-meta {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: 6px;
+  color: var(--ac-muted);
+}
+
+.ac-icon {
+  display: inline-flex;
+  flex: none;
+  color: var(--ac-muted);
+  transition: rotate var(--ac-duration) ease;
+}
+.ac-icon > svg {
+  width: 16px;
+  height: 16px;
+}
+.ac-item[open] > .ac-header .ac-icon {
+  rotate: 180deg;
+}
+
+/* ------------------------------------------------------------- content */
+
+.ac-body {
+  padding: 0 var(--ac-px) var(--ac-py);
+}
+
+/*
+ * Opening animates where the browser can do it: `interpolate-size` lets a
+ * height of `auto` be interpolated, and `::details-content` is the box to
+ * animate. Browsers without either simply show and hide, which is the
+ * behaviour everything else falls back to anyway.
+ */
+@supports (interpolate-size: allow-keywords) {
+  .ac-root {
+    interpolate-size: allow-keywords;
+  }
+  .ac-item::details-content {
+    height: 0;
+    overflow: hidden;
+    transition:
+      height var(--ac-duration) ease,
+      content-visibility var(--ac-duration) allow-discrete;
+  }
+  .ac-item[open]::details-content {
+    height: auto;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ac-root {
+    --ac-duration: 0s;
+  }
+}
+
+@media (forced-colors: active) {
+  .ac-item {
+    border: 1px solid CanvasText;
+  }
+}

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

@@ -0,0 +1,250 @@
+{
+  "passportVersion": "1.0.0",
+  "identity": {
+    "component": "Alert",
+    "folder": "alert",
+    "exports": [
+      "Alert"
+    ]
+  },
+  "source": {
+    "libraryVersion": "2.3.0",
+    "files": [
+      "core/index.ts",
+      "core/live.ts",
+      "core/types.ts",
+      "index.ts",
+      "react/Alert.tsx",
+      "react/icons.tsx",
+      "react/locale.ts",
+      "react/props.ts"
+    ],
+    "sourceHash": "sha256:96504522986d483b4f6afdc67af3ea93ec6489dc16c4859a60a03c0d09430d61"
+  },
+  "props": [
+    {
+      "name": "actions",
+      "type": "other",
+      "typeText": "ReactNode",
+      "required": false,
+      "origin": "derived",
+      "description": "Buttons under the message: \"Try again\", \"Go to billing\".",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "aria-describedby",
+      "type": "string",
+      "typeText": "string | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "aria-label",
+      "type": "string",
+      "typeText": "string | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "aria-labelledby",
+      "type": "string",
+      "typeText": "string | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "children",
+      "type": "other",
+      "typeText": "ReactNode",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "className",
+      "type": "string",
+      "typeText": "string | undefined",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "classNames",
+      "type": "other",
+      "typeText": "Partial<Record<AlertSlot, string>> | undefined",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "description",
+      "type": "other",
+      "typeText": "ReactNode",
+      "required": false,
+      "origin": "derived",
+      "description": "The message. `children` works too, and is the better place for links.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "hidden",
+      "type": "boolean",
+      "typeText": "boolean | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "icon",
+      "type": "other",
+      "typeText": "ReactNode",
+      "required": false,
+      "origin": "derived",
+      "description": "Replace the variant's glyph, or pass `false` for none.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "id",
+      "type": "string",
+      "typeText": "string | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "localeText",
+      "type": "other",
+      "typeText": "Partial<AlertLocaleText> | undefined",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "onDismiss",
+      "type": "function",
+      "signature": "(() => void) | undefined",
+      "required": false,
+      "origin": "derived",
+      "description": "Show a close button. The alert does not hide itself; remove it in the handler.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "ref",
+      "type": "other",
+      "typeText": "Ref<HTMLDivElement> | undefined",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "size",
+      "type": "enum",
+      "values": [
+        "md",
+        "sm"
+      ],
+      "typeText": "AlertSize | undefined",
+      "required": false,
+      "default": "md",
+      "origin": "derived",
+      "description": "Default `md`. `sm` drops the title to one line of text.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "style",
+      "type": "other",
+      "typeText": "CSSProperties | undefined",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "tabIndex",
+      "type": "number",
+      "typeText": "number | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "title",
+      "type": "other",
+      "typeText": "ReactNode",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "variant",
+      "type": "enum",
+      "values": [
+        "danger",
+        "info",
+        "neutral",
+        "success",
+        "warning"
+      ],
+      "typeText": "AlertVariant | undefined",
+      "required": false,
+      "default": "info",
+      "origin": "derived",
+      "description": "Default `info`.",
+      "descriptionOrigin": "jsdoc"
+    }
+  ],
+  "inherits": [
+    {
+      "from": "HTMLAttributes<HTMLDivElement>",
+      "omitted": [
+        "role",
+        "title"
+      ],
+      "passthrough": true
+    }
+  ],
+  "events": [
+    {
+      "name": "onDismiss",
+      "signature": "(() => void) | undefined"
+    }
+  ],
+  "slots": [
+    "root",
+    "icon",
+    "content",
+    "title",
+    "description",
+    "actions",
+    "dismiss"
+  ],
+  "states": [
+    {
+      "attr": "data-size",
+      "values": [
+        "sm"
+      ]
+    },
+    {
+      "attr": "data-theme",
+      "values": [
+        "dark",
+        "light"
+      ]
+    },
+    {
+      "attr": "data-variant",
+      "values": [
+        "danger",
+        "neutral",
+        "success",
+        "warning"
+      ]
+    }
+  ],
+  "accessibility": {
+    "supplied": [],
+    "required": []
+  },
+  "composition": {},
+  "operations": {},
+  "intentDomains": [],
+  "safeMutations": {},
+  "examples": [],
+  "coverage": {
+    "propsTotal": 19,
+    "propsDescribed": 6,
+    "describedPct": 32,
+    "authoredSections": [
+      "accessibility"
+    ]
+  }
+}