gbs-add-block 2.1.0 → 2.3.0

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

@@ -1,155 +1,154 @@
-/*
- * Alert styles.
- *
- * A banner that sits in the page, tinted by variant. 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 {
-  .al-root {
-    --al-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));
-    --al-muted: var(--gbs-muted, var(--dg-muted, light-dark(#71717a, #a1a1aa)));
-    --al-border: var(--gbs-border, var(--dg-border, light-dark(#e4e4e7, #27272a)));
-    --al-bg: var(--gbs-bg, var(--dg-bg, light-dark(#ffffff, #0b0b0e)));
-    --al-hover: var(--gbs-hover, var(--dg-hover, light-dark(#f4f4f5, #1f1f23)));
-    --al-focus: var(--gbs-focus, var(--dg-focus, light-dark(#2563eb, #60a5fa)));
-    --al-info: var(--gbs-info, var(--gbs-accent, var(--dg-accent, light-dark(#2563eb, #60a5fa))));
-    --al-success: var(--gbs-success, light-dark(#15803d, #4ade80));
-    --al-warning: var(--gbs-warning, light-dark(#b45309, #fbbf24));
-    --al-danger: var(--gbs-danger, var(--dg-danger, light-dark(#dc2626, #f87171)));
-    --al-radius: var(--gbs-radius, var(--dg-radius, 8px));
-    --al-font-size: var(--gbs-font-size, var(--dg-font-size, 13px));
-    --al-accent: var(--al-info);
-    --al-px: 14px;
-    --al-py: 12px;
-
-    color-scheme: inherit;
-    position: relative;
-    display: flex;
-    align-items: flex-start;
-    gap: 10px;
-    min-width: 0;
-    padding: var(--al-py) var(--al-px);
-    /* The bar carries the variant at a glance; the tint alone is too faint to
-       read as a signal, and colour is never the only one — there is a glyph. */
-    border: 1px solid var(--al-border);
-    border-inline-start: 3px solid var(--al-accent);
-    border-radius: var(--al-radius);
-    background: color-mix(in oklab, var(--al-accent) 7%, var(--al-bg));
-    font-size: var(--al-font-size);
-    line-height: 1.5;
-    color: var(--al-fg);
-    text-wrap: pretty;
-  }
-
-  :where(.dark, [data-theme="dark"]) .al-root {
-    color-scheme: dark;
-  }
-  :where(.light, [data-theme="light"]) .al-root {
-    color-scheme: light;
-  }
-
-  :where(.al-root) *,
-  :where(.al-root) *::before,
-  :where(.al-root) *::after {
-    box-sizing: border-box;
-  }
-
-  .al-root[data-variant="success"] {
-    --al-accent: var(--al-success);
-  }
-  .al-root[data-variant="warning"] {
-    --al-accent: var(--al-warning);
-  }
-  .al-root[data-variant="danger"] {
-    --al-accent: var(--al-danger);
-  }
-  .al-root[data-variant="neutral"] {
-    --al-accent: var(--al-muted);
-  }
-
-  .al-root[data-size="sm"] {
-    --al-px: 10px;
-    --al-py: 8px;
-    --al-font-size: 12px;
-    gap: 8px;
-  }
-
-  .al-icon {
-    display: inline-flex;
-    flex: none;
-    /* Optically centred on the first line of text rather than its box. */
-    margin-top: 1px;
-    color: var(--al-accent);
-  }
-  .al-icon > svg {
-    width: 16px;
-    height: 16px;
-  }
-  .al-root[data-size="sm"] .al-icon > svg {
-    width: 14px;
-    height: 14px;
-  }
-
-  .al-content {
-    display: flex;
-    flex: 1 1 auto;
-    flex-direction: column;
-    gap: 2px;
-    min-width: 0;
-  }
-  .al-title {
-    margin: 0;
-    font-weight: 600;
-  }
-  .al-description {
-    margin: 0;
-    /* Not muted: this is the message, not a hint about one. */
-    color: inherit;
-  }
-  .al-description a {
-    color: var(--al-accent);
-    text-underline-offset: 2px;
-  }
-  .al-actions {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 8px;
-    margin-top: 8px;
-  }
-
-  .al-dismiss {
-    display: inline-flex;
-    flex: none;
-    align-items: center;
-    justify-content: center;
-    width: 22px;
-    height: 22px;
-    margin: -2px -4px 0 0;
-    padding: 0;
-    border: 0;
-    border-radius: 4px;
-    background: none;
-    color: var(--al-muted);
-    cursor: pointer;
-  }
-  .al-dismiss:hover {
-    background: var(--al-hover);
-    color: var(--al-fg);
-  }
-  .al-dismiss:focus-visible {
-    outline: 2px solid var(--al-focus);
-    outline-offset: 1px;
-  }
-
-  @media (forced-colors: active) {
-    .al-root {
-      border: 1px solid CanvasText;
-      border-inline-start-width: 3px;
-    }
-  }
-}
+/*
+ * Alert styles.
+ *
+ * A banner that sits in the page, tinted by variant. 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.
+ */
+
+.al-root {
+  --al-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));
+  --al-muted: var(--gbs-muted, var(--dg-muted, light-dark(#71717a, #a1a1aa)));
+  --al-border: var(--gbs-border, var(--dg-border, light-dark(#e4e4e7, #27272a)));
+  --al-bg: var(--gbs-bg, var(--dg-bg, light-dark(#ffffff, #0b0b0e)));
+  --al-hover: var(--gbs-hover, var(--dg-hover, light-dark(#f4f4f5, #1f1f23)));
+  --al-focus: var(--gbs-focus, var(--dg-focus, light-dark(#2563eb, #60a5fa)));
+  --al-info: var(--gbs-info, var(--gbs-accent, var(--dg-accent, light-dark(#2563eb, #60a5fa))));
+  --al-success: var(--gbs-success, light-dark(#15803d, #4ade80));
+  --al-warning: var(--gbs-warning, light-dark(#b45309, #fbbf24));
+  --al-danger: var(--gbs-danger, var(--dg-danger, light-dark(#dc2626, #f87171)));
+  --al-radius: var(--gbs-radius, var(--dg-radius, 8px));
+  --al-font-size: var(--gbs-font-size, var(--dg-font-size, 13px));
+  --al-accent: var(--al-info);
+  --al-px: 14px;
+  --al-py: 12px;
+
+  color-scheme: inherit;
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  min-width: 0;
+  padding: var(--al-py) var(--al-px);
+  /* The bar carries the variant at a glance; the tint alone is too faint to
+     read as a signal, and colour is never the only one — there is a glyph. */
+  border: 1px solid var(--al-border);
+  border-inline-start: 3px solid var(--al-accent);
+  border-radius: var(--al-radius);
+  background: color-mix(in oklab, var(--al-accent) 7%, var(--al-bg));
+  font-size: var(--al-font-size);
+  line-height: 1.5;
+  color: var(--al-fg);
+  text-wrap: pretty;
+}
+
+:where(.dark, [data-theme="dark"]) .al-root {
+  color-scheme: dark;
+}
+:where(.light, [data-theme="light"]) .al-root {
+  color-scheme: light;
+}
+
+:where(.al-root) *,
+:where(.al-root) *::before,
+:where(.al-root) *::after {
+  box-sizing: border-box;
+}
+
+.al-root[data-variant="success"] {
+  --al-accent: var(--al-success);
+}
+.al-root[data-variant="warning"] {
+  --al-accent: var(--al-warning);
+}
+.al-root[data-variant="danger"] {
+  --al-accent: var(--al-danger);
+}
+.al-root[data-variant="neutral"] {
+  --al-accent: var(--al-muted);
+}
+
+.al-root[data-size="sm"] {
+  --al-px: 10px;
+  --al-py: 8px;
+  --al-font-size: 12px;
+  gap: 8px;
+}
+
+.al-icon {
+  display: inline-flex;
+  flex: none;
+  /* Optically centred on the first line of text rather than its box. */
+  margin-top: 1px;
+  color: var(--al-accent);
+}
+.al-icon > svg {
+  width: 16px;
+  height: 16px;
+}
+.al-root[data-size="sm"] .al-icon > svg {
+  width: 14px;
+  height: 14px;
+}
+
+.al-content {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.al-title {
+  margin: 0;
+  font-weight: 600;
+}
+.al-description {
+  margin: 0;
+  /* Not muted: this is the message, not a hint about one. */
+  color: inherit;
+}
+.al-description a {
+  color: var(--al-accent);
+  text-underline-offset: 2px;
+}
+.al-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.al-dismiss {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  margin: -2px -4px 0 0;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: none;
+  color: var(--al-muted);
+  cursor: pointer;
+}
+.al-dismiss:hover {
+  background: var(--al-hover);
+  color: var(--al-fg);
+}
+.al-dismiss:focus-visible {
+  outline: 2px solid var(--al-focus);
+  outline-offset: 1px;
+}
+
+@media (forced-colors: active) {
+  .al-root {
+    border: 1px solid CanvasText;
+    border-inline-start-width: 3px;
+  }
+}

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

@@ -0,0 +1,294 @@
+{
+  "passportVersion": "1.0.0",
+  "identity": {
+    "component": "Avatar",
+    "folder": "avatar",
+    "exports": [
+      "Avatar",
+      "AvatarGroup"
+    ]
+  },
+  "source": {
+    "libraryVersion": "2.3.0",
+    "files": [
+      "core/identity.ts",
+      "core/index.ts",
+      "core/types.ts",
+      "index.ts",
+      "react/Avatar.tsx",
+      "react/AvatarGroup.tsx",
+      "react/locale.ts",
+      "react/props.ts"
+    ],
+    "sourceHash": "sha256:e834c2c121fe5e1388fec8830c46ed570d17a3effae310c535becdfc687865d9"
+  },
+  "props": [
+    {
+      "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",
+      "description": "An icon or anything else to show instead of initials.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "className",
+      "type": "string",
+      "typeText": "string | undefined",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "classNames",
+      "type": "other",
+      "typeText": "Partial<Record<AvatarSlot, string>> | undefined",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "decorative",
+      "type": "boolean",
+      "typeText": "boolean | undefined",
+      "required": false,
+      "default": false,
+      "origin": "derived",
+      "description": "Marks the avatar as decoration, for a name printed next to it.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "hidden",
+      "type": "boolean",
+      "typeText": "boolean | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "id",
+      "type": "string",
+      "typeText": "string | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "initials",
+      "type": "string",
+      "typeText": "string | undefined",
+      "required": false,
+      "origin": "derived",
+      "description": "Overrides the text derived from `name`.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "typeText": "string | undefined",
+      "required": false,
+      "origin": "derived",
+      "description": "Names the set, e.g. \"Assigned to\". A list of faces with no name says nothing.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "localeText",
+      "type": "other",
+      "typeText": "Partial<AvatarLocaleText> | undefined",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "max",
+      "type": "number",
+      "typeText": "number | undefined",
+      "required": false,
+      "default": 4,
+      "origin": "derived",
+      "description": "How many slots there are, the overflow bubble included. Default 4.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "name",
+      "type": "string",
+      "typeText": "string | undefined",
+      "required": false,
+      "default": "",
+      "origin": "derived",
+      "description": "The person or thing. Used for the alternative text, for the initials and\nfor the colour, so the same person is always the same colour.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "ref",
+      "type": "other",
+      "typeText": "Ref<HTMLSpanElement> | undefined",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "role",
+      "type": "other",
+      "typeText": "AriaRole | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "shape",
+      "type": "enum",
+      "values": [
+        "circle",
+        "square"
+      ],
+      "typeText": "AvatarShape | undefined",
+      "required": false,
+      "default": "circle",
+      "origin": "derived",
+      "description": "Default `circle`.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "size",
+      "type": "enum",
+      "values": [
+        "lg",
+        "md",
+        "sm",
+        "xl",
+        "xs"
+      ],
+      "typeText": "AvatarSize | undefined",
+      "required": false,
+      "default": "md",
+      "origin": "derived",
+      "description": "Default `md` (32px).",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "src",
+      "type": "string",
+      "typeText": "string | undefined",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "status",
+      "type": "enum",
+      "values": [
+        "away",
+        "busy",
+        "offline",
+        "online"
+      ],
+      "typeText": "AvatarStatus | undefined",
+      "required": false,
+      "origin": "derived",
+      "description": "A presence dot in the corner.",
+      "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": "string",
+      "typeText": "string | undefined",
+      "required": false,
+      "origin": "inherited"
+    }
+  ],
+  "inherits": [
+    {
+      "from": "HTMLAttributes<HTMLSpanElement>",
+      "omitted": [
+        "children"
+      ],
+      "passthrough": true
+    }
+  ],
+  "events": [],
+  "slots": [
+    "root",
+    "image",
+    "fallback",
+    "status",
+    "overflow"
+  ],
+  "states": [
+    {
+      "attr": "data-shape",
+      "values": [
+        "square"
+      ]
+    },
+    {
+      "attr": "data-size",
+      "values": [
+        "lg",
+        "sm",
+        "xl",
+        "xs"
+      ]
+    },
+    {
+      "attr": "data-status",
+      "values": [
+        "away",
+        "busy",
+        "online"
+      ]
+    },
+    {
+      "attr": "data-theme",
+      "values": [
+        "dark",
+        "light"
+      ]
+    }
+  ],
+  "accessibility": {
+    "supplied": [],
+    "required": []
+  },
+  "composition": {},
+  "operations": {},
+  "intentDomains": [],
+  "safeMutations": {},
+  "examples": [],
+  "coverage": {
+    "propsTotal": 23,
+    "propsDescribed": 9,
+    "describedPct": 39,
+    "authoredSections": [
+      "accessibility"
+    ]
+  }
+}