gbs-add-block 2.1.0 → 2.3.0

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

@@ -1,187 +1,185 @@
-/*
- * Skeleton and Empty 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 {
-  .sk-root,
-  .em-root {
-    --sk-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));
-    --sk-muted: var(--gbs-muted, var(--dg-muted, light-dark(#71717a, #a1a1aa)));
-    --sk-border: var(--gbs-border, var(--dg-border, light-dark(#e4e4e7, #27272a)));
-    --sk-base: var(--gbs-skeleton, var(--gbs-hover, var(--dg-hover, light-dark(#ececee, #232329))));
-    --sk-sheen: light-dark(rgb(255 255 255 / 0.65), rgb(255 255 255 / 0.06));
-    --sk-radius: var(--gbs-radius, var(--dg-radius, 8px));
-    --sk-font-size: var(--gbs-font-size, var(--dg-font-size, 13px));
-    --sk-duration: 1.4s;
-
-    color-scheme: inherit;
-    font-size: var(--sk-font-size);
-    line-height: 1.5;
-  }
-
-  :where(.dark, [data-theme="dark"]) :is(.sk-root, .em-root) {
-    color-scheme: dark;
-  }
-  :where(.light, [data-theme="light"]) :is(.sk-root, .em-root) {
-    color-scheme: light;
-  }
-
-  :where(.sk-root, .em-root) *,
-  :where(.sk-root, .em-root) *::before,
-  :where(.sk-root, .em-root) *::after {
-    box-sizing: border-box;
-  }
-
-  /* ------------------------------------------------------------ skeleton */
-
-  .sk-root {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    width: var(--sk-width, 100%);
-    height: var(--sk-height);
-  }
-
-  .sk-line {
-    flex: none;
-    height: 100%;
-    border-radius: var(--sk-radius);
-    background: var(--sk-base);
-  }
-
-  /* Text bars are sized from the font, so a paragraph placeholder takes the
-     space the paragraph will. */
-  .sk-root[data-variant="text"] {
-    height: var(--sk-height);
-  }
-  .sk-root[data-variant="text"] .sk-line {
-    height: var(--sk-height, 0.85em);
-    border-radius: 4px;
-  }
-
-  .sk-root[data-variant="circle"] {
-    width: var(--sk-width, 40px);
-    height: var(--sk-height, var(--sk-width, 40px));
-  }
-  .sk-root[data-variant="circle"] .sk-line {
-    border-radius: 50%;
-  }
-
-  .sk-root[data-variant="rect"] {
-    height: var(--sk-height, 80px);
-  }
-
-  .sk-root[data-animation="pulse"] .sk-line {
-    animation: sk-pulse var(--sk-duration) ease-in-out infinite;
-  }
-  @keyframes sk-pulse {
-    50% {
-      opacity: 0.45;
-    }
-  }
-
-  .sk-root[data-animation="wave"] .sk-line {
-    position: relative;
-    overflow: hidden;
-  }
-  .sk-root[data-animation="wave"] .sk-line::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(90deg, transparent, var(--sk-sheen), transparent);
-    animation: sk-wave var(--sk-duration) linear infinite;
-  }
-  @keyframes sk-wave {
-    from {
-      translate: -100% 0;
-    }
-    to {
-      translate: 100% 0;
-    }
-  }
-
-  .sk-sr-only,
-  .em-sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    margin: -1px;
-    padding: 0;
-    overflow: hidden;
-    border: 0;
-    clip-path: inset(50%);
-    white-space: nowrap;
-  }
-
-  /* --------------------------------------------------------------- empty */
-
-  .em-root {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 6px;
-    padding: 40px 24px;
-    color: var(--sk-fg);
-    text-align: center;
-    text-wrap: pretty;
-  }
-  .em-root[data-size="sm"] {
-    padding: 24px 16px;
-  }
-  .em-root[data-size="lg"] {
-    padding: 64px 24px;
-  }
-
-  .em-icon {
-    display: inline-flex;
-    margin-bottom: 4px;
-    color: var(--sk-muted);
-  }
-  .em-root[data-size="sm"] .em-icon {
-    margin-bottom: 0;
-  }
-
-  .em-title {
-    margin: 0;
-    font-size: 1.05em;
-    font-weight: 600;
-  }
-  .em-root[data-size="lg"] .em-title {
-    font-size: 1.2em;
-  }
-
-  .em-description {
-    max-width: 46ch;
-    margin: 0;
-    color: var(--sk-muted);
-  }
-
-  .em-actions {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 8px;
-    margin-top: 10px;
-  }
-
-  /* Movement that repeats forever is the kind reduced-motion means. */
-  @media (prefers-reduced-motion: reduce) {
-    .sk-root .sk-line,
-    .sk-root .sk-line::after {
-      animation: none;
-    }
-  }
-
-  @media (forced-colors: active) {
-    .sk-line {
-      border: 1px solid CanvasText;
-    }
-  }
-}
+/*
+ * Skeleton and Empty 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.
+ */
+
+.sk-root,
+.em-root {
+  --sk-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));
+  --sk-muted: var(--gbs-muted, var(--dg-muted, light-dark(#71717a, #a1a1aa)));
+  --sk-border: var(--gbs-border, var(--dg-border, light-dark(#e4e4e7, #27272a)));
+  --sk-base: var(--gbs-skeleton, var(--gbs-hover, var(--dg-hover, light-dark(#ececee, #232329))));
+  --sk-sheen: light-dark(rgb(255 255 255 / 0.65), rgb(255 255 255 / 0.06));
+  --sk-radius: var(--gbs-radius, var(--dg-radius, 8px));
+  --sk-font-size: var(--gbs-font-size, var(--dg-font-size, 13px));
+  --sk-duration: 1.4s;
+
+  color-scheme: inherit;
+  font-size: var(--sk-font-size);
+  line-height: 1.5;
+}
+
+:where(.dark, [data-theme="dark"]) :is(.sk-root, .em-root) {
+  color-scheme: dark;
+}
+:where(.light, [data-theme="light"]) :is(.sk-root, .em-root) {
+  color-scheme: light;
+}
+
+:where(.sk-root, .em-root) *,
+:where(.sk-root, .em-root) *::before,
+:where(.sk-root, .em-root) *::after {
+  box-sizing: border-box;
+}
+
+/* ------------------------------------------------------------ skeleton */
+
+.sk-root {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: var(--sk-width, 100%);
+  height: var(--sk-height);
+}
+
+.sk-line {
+  flex: none;
+  height: 100%;
+  border-radius: var(--sk-radius);
+  background: var(--sk-base);
+}
+
+/* Text bars are sized from the font, so a paragraph placeholder takes the
+   space the paragraph will. */
+.sk-root[data-variant="text"] {
+  height: var(--sk-height);
+}
+.sk-root[data-variant="text"] .sk-line {
+  height: var(--sk-height, 0.85em);
+  border-radius: 4px;
+}
+
+.sk-root[data-variant="circle"] {
+  width: var(--sk-width, 40px);
+  height: var(--sk-height, var(--sk-width, 40px));
+}
+.sk-root[data-variant="circle"] .sk-line {
+  border-radius: 50%;
+}
+
+.sk-root[data-variant="rect"] {
+  height: var(--sk-height, 80px);
+}
+
+.sk-root[data-animation="pulse"] .sk-line {
+  animation: sk-pulse var(--sk-duration) ease-in-out infinite;
+}
+@keyframes sk-pulse {
+  50% {
+    opacity: 0.45;
+  }
+}
+
+.sk-root[data-animation="wave"] .sk-line {
+  position: relative;
+  overflow: hidden;
+}
+.sk-root[data-animation="wave"] .sk-line::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, transparent, var(--sk-sheen), transparent);
+  animation: sk-wave var(--sk-duration) linear infinite;
+}
+@keyframes sk-wave {
+  from {
+    translate: -100% 0;
+  }
+  to {
+    translate: 100% 0;
+  }
+}
+
+.sk-sr-only,
+.em-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/* --------------------------------------------------------------- empty */
+
+.em-root {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding: 40px 24px;
+  color: var(--sk-fg);
+  text-align: center;
+  text-wrap: pretty;
+}
+.em-root[data-size="sm"] {
+  padding: 24px 16px;
+}
+.em-root[data-size="lg"] {
+  padding: 64px 24px;
+}
+
+.em-icon {
+  display: inline-flex;
+  margin-bottom: 4px;
+  color: var(--sk-muted);
+}
+.em-root[data-size="sm"] .em-icon {
+  margin-bottom: 0;
+}
+
+.em-title {
+  margin: 0;
+  font-size: 1.05em;
+  font-weight: 600;
+}
+.em-root[data-size="lg"] .em-title {
+  font-size: 1.2em;
+}
+
+.em-description {
+  max-width: 46ch;
+  margin: 0;
+  color: var(--sk-muted);
+}
+
+.em-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 10px;
+}
+
+/* Movement that repeats forever is the kind reduced-motion means. */
+@media (prefers-reduced-motion: reduce) {
+  .sk-root .sk-line,
+  .sk-root .sk-line::after {
+    animation: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .sk-line {
+    border: 1px solid CanvasText;
+  }
+}

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

@@ -0,0 +1,245 @@
+{
+  "passportVersion": "1.0.0",
+  "identity": {
+    "component": "Spinner",
+    "folder": "spinner",
+    "exports": [
+      "Spinner"
+    ]
+  },
+  "source": {
+    "libraryVersion": "2.3.0",
+    "files": [
+      "core/index.ts",
+      "core/types.ts",
+      "core/visibility.ts",
+      "index.ts",
+      "react/Spinner.tsx",
+      "react/locale.ts",
+      "react/props.ts",
+      "react/useDelayedLoading.ts"
+    ],
+    "sourceHash": "sha256:2fa8e093614019fb84f1acc9820f25c9175d0711384c48094e81cb089f9d0a98"
+  },
+  "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": "Content to cover while loading. It becomes inert, so it can't be clicked or focused.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "className",
+      "type": "string",
+      "typeText": "string | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "classNames",
+      "type": "other",
+      "typeText": "Partial<Record<SpinnerSlot, string>> | undefined",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "delay",
+      "type": "number",
+      "typeText": "number | undefined",
+      "required": false,
+      "default": 0,
+      "origin": "derived",
+      "description": "Milliseconds to wait before showing, so fast work doesn't flash. Default 0.",
+      "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": "label",
+      "type": "string",
+      "typeText": "string | undefined",
+      "required": false,
+      "origin": "derived",
+      "description": "What screen readers announce. Default \"Loading\".",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "loading",
+      "type": "boolean",
+      "typeText": "boolean | undefined",
+      "required": false,
+      "default": true,
+      "origin": "derived",
+      "description": "Default true. With `children`, the spinner covers them while this is true.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "localeText",
+      "type": "other",
+      "typeText": "Partial<SpinnerLocaleText> | undefined",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "minDuration",
+      "type": "number",
+      "typeText": "number | undefined",
+      "required": false,
+      "default": 0,
+      "origin": "derived",
+      "description": "Once shown, stay at least this many milliseconds. Default 0.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "role",
+      "type": "other",
+      "typeText": "AriaRole | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "showLabel",
+      "type": "boolean",
+      "typeText": "boolean | undefined",
+      "required": false,
+      "default": false,
+      "origin": "derived",
+      "description": "Show the label next to the spinner.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "size",
+      "type": "other",
+      "typeText": "number | SpinnerSize | undefined",
+      "required": false,
+      "default": "md",
+      "origin": "derived",
+      "description": "Default `md` (24 px); a number is pixels.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "style",
+      "type": "other",
+      "typeText": "CSSProperties | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "tabIndex",
+      "type": "number",
+      "typeText": "number | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "typeText": "string | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "variant",
+      "type": "enum",
+      "values": [
+        "dots",
+        "ring"
+      ],
+      "typeText": "SpinnerVariant | undefined",
+      "required": false,
+      "default": "ring",
+      "origin": "derived",
+      "description": "Default `ring`.",
+      "descriptionOrigin": "jsdoc"
+    }
+  ],
+  "inherits": [
+    {
+      "from": "HTMLAttributes<HTMLElement>",
+      "omitted": [
+        "children"
+      ],
+      "passthrough": true
+    }
+  ],
+  "events": [],
+  "slots": [
+    "root",
+    "status",
+    "indicator",
+    "label",
+    "content",
+    "overlay"
+  ],
+  "states": [
+    {
+      "attr": "data-loading"
+    },
+    {
+      "attr": "data-theme",
+      "values": [
+        "dark",
+        "light"
+      ]
+    },
+    {
+      "attr": "data-variant",
+      "values": [
+        "dots"
+      ]
+    }
+  ],
+  "accessibility": {
+    "supplied": [],
+    "required": []
+  },
+  "composition": {},
+  "operations": {},
+  "intentDomains": [],
+  "safeMutations": {},
+  "examples": [],
+  "coverage": {
+    "propsTotal": 20,
+    "propsDescribed": 8,
+    "describedPct": 40,
+    "authoredSections": [
+      "accessibility"
+    ]
+  }
+}