gbs-add-block 2.1.0 → 2.3.0

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

@@ -0,0 +1,270 @@
+{
+  "passportVersion": "1.0.0",
+  "identity": {
+    "component": "Progress",
+    "folder": "progress",
+    "exports": [
+      "CircularProgress",
+      "Progress"
+    ]
+  },
+  "source": {
+    "libraryVersion": "2.3.0",
+    "files": [
+      "core/index.ts",
+      "core/progress.ts",
+      "core/types.ts",
+      "index.ts",
+      "react/CircularProgress.tsx",
+      "react/Progress.tsx",
+      "react/locale.ts",
+      "react/props.ts"
+    ],
+    "sourceHash": "sha256:4684455b4f9c43c803373f5742e9cd51a5d6b889c12d45e6ad92f8796e24cbb5"
+  },
+  "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"
+    },
+    {
+      "name": "className",
+      "type": "string",
+      "typeText": "string | undefined",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "classNames",
+      "type": "other",
+      "typeText": "Partial<Record<ProgressSlot, string>> | undefined",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "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": "other",
+      "typeText": "ReactNode",
+      "required": false,
+      "origin": "derived",
+      "description": "Names the bar. Shown above it, and used as the accessible name.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "localeText",
+      "type": "other",
+      "typeText": "Partial<ProgressLocaleText> | undefined",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "max",
+      "type": "number",
+      "typeText": "number | undefined",
+      "required": false,
+      "default": 100,
+      "origin": "derived",
+      "description": "What `value` is measured against. Default 100.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "ref",
+      "type": "other",
+      "typeText": "Ref<HTMLDivElement> | undefined",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "showValue",
+      "type": "boolean",
+      "typeText": "boolean | undefined",
+      "required": false,
+      "default": false,
+      "origin": "derived",
+      "description": "Show the percentage beside the label.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "size",
+      "type": "enum",
+      "values": [
+        "lg",
+        "md",
+        "sm"
+      ],
+      "typeText": "ProgressSize | undefined",
+      "required": false,
+      "default": "md",
+      "origin": "derived",
+      "description": "Default `md`.",
+      "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": "thickness",
+      "type": "number",
+      "typeText": "number | undefined",
+      "required": false,
+      "default": 4,
+      "origin": "derived",
+      "description": "Ring thickness in pixels. Default 4.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "title",
+      "type": "string",
+      "typeText": "string | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "value",
+      "type": "number",
+      "typeText": "number | null | undefined",
+      "required": false,
+      "default": null,
+      "origin": "derived",
+      "description": "How far along. `null` means the length is not known yet.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "valueText",
+      "type": "other",
+      "typeText": "ReactNode",
+      "required": false,
+      "origin": "derived",
+      "description": "Replace what is shown and read, e.g. \"3.2 MB of 8 MB\".",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "variant",
+      "type": "enum",
+      "values": [
+        "accent",
+        "danger",
+        "success",
+        "warning"
+      ],
+      "typeText": "ProgressVariant | undefined",
+      "required": false,
+      "default": "accent",
+      "origin": "derived",
+      "description": "Default `accent`.",
+      "descriptionOrigin": "jsdoc"
+    }
+  ],
+  "inherits": [
+    {
+      "from": "HTMLAttributes<HTMLDivElement>",
+      "omitted": [
+        "role"
+      ],
+      "passthrough": true
+    }
+  ],
+  "events": [],
+  "slots": [
+    "root",
+    "header",
+    "label",
+    "value",
+    "track",
+    "bar",
+    "svg"
+  ],
+  "states": [
+    {
+      "attr": "data-indeterminate"
+    },
+    {
+      "attr": "data-size",
+      "values": [
+        "lg",
+        "sm"
+      ]
+    },
+    {
+      "attr": "data-theme",
+      "values": [
+        "dark",
+        "light"
+      ]
+    },
+    {
+      "attr": "data-variant",
+      "values": [
+        "danger",
+        "success",
+        "warning"
+      ]
+    }
+  ],
+  "accessibility": {
+    "supplied": [],
+    "required": []
+  },
+  "composition": {},
+  "operations": {},
+  "intentDomains": [],
+  "safeMutations": {},
+  "examples": [],
+  "coverage": {
+    "propsTotal": 21,
+    "propsDescribed": 8,
+    "describedPct": 38,
+    "authoredSections": [
+      "accessibility"
+    ]
+  }
+}

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

@@ -1,201 +1,200 @@
-/*
- * Progress and CircularProgress styles.
- *
- * The bar is drawn from --pr-fraction (0 to 1) rather than a width in percent,
- * so the same number drives the bar, the ring and any transition. 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 `components`
- * layer, so utility classes passed through `className` / `classNames` override
- * them.
- */
-
-@layer gbs {
-  .pr-root,
-  .pr-circle {
-    --pr-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));
-    --pr-muted: var(--gbs-muted, var(--dg-muted, light-dark(#71717a, #a1a1aa)));
-    --pr-track: var(--gbs-subtle, light-dark(#e4e4e7, #27272a));
-    --pr-accent: var(--gbs-accent, var(--dg-accent, light-dark(#2563eb, #60a5fa)));
-    --pr-success: var(--gbs-success, light-dark(#15803d, #4ade80));
-    --pr-warning: var(--gbs-warning, light-dark(#b45309, #fbbf24));
-    --pr-danger: var(--gbs-danger, var(--dg-danger, light-dark(#dc2626, #f87171)));
-    --pr-font-size: var(--gbs-font-size, var(--dg-font-size, 13px));
-    --pr-height: 8px;
-    --pr-duration: 240ms;
-    --pr-bar: var(--pr-accent);
-
-    color-scheme: inherit;
-    font-size: var(--pr-font-size);
-    color: var(--pr-fg);
-  }
-
-  :where(.dark, [data-theme="dark"]) :is(.pr-root, .pr-circle) {
-    color-scheme: dark;
-  }
-  :where(.light, [data-theme="light"]) :is(.pr-root, .pr-circle) {
-    color-scheme: light;
-  }
-
-  :where(.pr-root, .pr-circle) *,
-  :where(.pr-root, .pr-circle) *::before,
-  :where(.pr-root, .pr-circle) *::after {
-    box-sizing: border-box;
-  }
-
-  .pr-root[data-variant="success"],
-  .pr-circle[data-variant="success"] {
-    --pr-bar: var(--pr-success);
-  }
-  .pr-root[data-variant="warning"],
-  .pr-circle[data-variant="warning"] {
-    --pr-bar: var(--pr-warning);
-  }
-  .pr-root[data-variant="danger"],
-  .pr-circle[data-variant="danger"] {
-    --pr-bar: var(--pr-danger);
-  }
-
-  /* ------------------------------------------------------------------ bar */
-
-  .pr-root {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    min-width: 0;
-  }
-  .pr-root[data-size="sm"] {
-    --pr-height: 4px;
-    --pr-font-size: 12px;
-  }
-  .pr-root[data-size="lg"] {
-    --pr-height: 12px;
-  }
-
-  .pr-header {
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: 12px;
-    min-width: 0;
-  }
-  .pr-label {
-    overflow: hidden;
-    font-weight: 500;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .pr-value {
-    flex: none;
-    color: var(--pr-muted);
-    font-variant-numeric: tabular-nums;
-  }
-
-  .pr-track {
-    position: relative;
-    width: 100%;
-    height: var(--pr-height);
-    border-radius: 999px;
-    background: var(--pr-track);
-    overflow: hidden;
-  }
-
-  .pr-bar {
-    width: 100%;
-    height: 100%;
-    border-radius: inherit;
-    background: var(--pr-bar);
-    /* `scaleX` from the origin: the compositor handles it, so a bar that ticks
-       up every few milliseconds costs nothing in layout. */
-    transform-origin: left center;
-    scale: var(--pr-fraction, 0) 1;
-    transition: scale var(--pr-duration) ease;
-  }
-  .pr-root:dir(rtl) .pr-bar {
-    transform-origin: right center;
-  }
-
-  /* With no length to show, a short bar sweeps the track instead. */
-  .pr-root[data-indeterminate] .pr-bar {
-    width: 35%;
-    scale: 1 1;
-    animation: pr-sweep 1.3s ease-in-out infinite;
-  }
-  @keyframes pr-sweep {
-    from {
-      translate: -100%;
-    }
-    to {
-      translate: 300%;
-    }
-  }
-
-  /* ----------------------------------------------------------------- ring */
-
-  .pr-circle {
-    position: relative;
-    display: inline-flex;
-    flex: none;
-    align-items: center;
-    justify-content: center;
-    vertical-align: middle;
-  }
-  .pr-svg {
-    width: 100%;
-    height: 100%;
-    /* Zero is at three o'clock in SVG; a progress ring starts at the top. */
-    rotate: -90deg;
-  }
-  .pr-circle-track {
-    stroke: var(--pr-track);
-  }
-  .pr-circle-bar {
-    stroke: var(--pr-bar);
-    transition: stroke-dashoffset var(--pr-duration) ease;
-  }
-  .pr-circle[data-indeterminate] .pr-svg {
-    animation: pr-spin 1s linear infinite;
-  }
-  @keyframes pr-spin {
-    from {
-      rotate: -90deg;
-    }
-    to {
-      rotate: 270deg;
-    }
-  }
-
-  .pr-circle-label {
-    position: absolute;
-    font-size: calc(var(--pr-font-size) - 1px);
-    font-variant-numeric: tabular-nums;
-    font-weight: 600;
-    line-height: 1;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .pr-bar,
-    .pr-circle-bar {
-      transition: none;
-    }
-    /* Movement that repeats forever is what reduced motion is about, but a
-       stopped indeterminate bar would look broken — so it slows instead. */
-    .pr-root[data-indeterminate] .pr-bar {
-      animation-duration: 3s;
-    }
-    .pr-circle[data-indeterminate] .pr-svg {
-      animation-duration: 2.5s;
-    }
-  }
-
-  @media (forced-colors: active) {
-    .pr-track {
-      border: 1px solid CanvasText;
-    }
-    .pr-bar {
-      background: Highlight;
-    }
-    .pr-circle-bar {
-      stroke: Highlight;
-    }
-  }
-}
+/*
+ * Progress and CircularProgress styles.
+ *
+ * The bar is drawn from --pr-fraction (0 to 1) rather than a width in percent,
+ * so the same number drives the bar, the ring and any transition. 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.
+ */
+
+.pr-root,
+.pr-circle {
+  --pr-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));
+  --pr-muted: var(--gbs-muted, var(--dg-muted, light-dark(#71717a, #a1a1aa)));
+  --pr-track: var(--gbs-subtle, light-dark(#e4e4e7, #27272a));
+  --pr-accent: var(--gbs-accent, var(--dg-accent, light-dark(#2563eb, #60a5fa)));
+  --pr-success: var(--gbs-success, light-dark(#15803d, #4ade80));
+  --pr-warning: var(--gbs-warning, light-dark(#b45309, #fbbf24));
+  --pr-danger: var(--gbs-danger, var(--dg-danger, light-dark(#dc2626, #f87171)));
+  --pr-font-size: var(--gbs-font-size, var(--dg-font-size, 13px));
+  --pr-height: 8px;
+  --pr-duration: 240ms;
+  --pr-bar: var(--pr-accent);
+
+  color-scheme: inherit;
+  font-size: var(--pr-font-size);
+  color: var(--pr-fg);
+}
+
+:where(.dark, [data-theme="dark"]) :is(.pr-root, .pr-circle) {
+  color-scheme: dark;
+}
+:where(.light, [data-theme="light"]) :is(.pr-root, .pr-circle) {
+  color-scheme: light;
+}
+
+:where(.pr-root, .pr-circle) *,
+:where(.pr-root, .pr-circle) *::before,
+:where(.pr-root, .pr-circle) *::after {
+  box-sizing: border-box;
+}
+
+.pr-root[data-variant="success"],
+.pr-circle[data-variant="success"] {
+  --pr-bar: var(--pr-success);
+}
+.pr-root[data-variant="warning"],
+.pr-circle[data-variant="warning"] {
+  --pr-bar: var(--pr-warning);
+}
+.pr-root[data-variant="danger"],
+.pr-circle[data-variant="danger"] {
+  --pr-bar: var(--pr-danger);
+}
+
+/* ------------------------------------------------------------------ bar */
+
+.pr-root {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
+.pr-root[data-size="sm"] {
+  --pr-height: 4px;
+  --pr-font-size: 12px;
+}
+.pr-root[data-size="lg"] {
+  --pr-height: 12px;
+}
+
+.pr-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  min-width: 0;
+}
+.pr-label {
+  overflow: hidden;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pr-value {
+  flex: none;
+  color: var(--pr-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.pr-track {
+  position: relative;
+  width: 100%;
+  height: var(--pr-height);
+  border-radius: 999px;
+  background: var(--pr-track);
+  overflow: hidden;
+}
+
+.pr-bar {
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--pr-bar);
+  /* `scaleX` from the origin: the compositor handles it, so a bar that ticks
+     up every few milliseconds costs nothing in layout. */
+  transform-origin: left center;
+  scale: var(--pr-fraction, 0) 1;
+  transition: scale var(--pr-duration) ease;
+}
+.pr-root:dir(rtl) .pr-bar {
+  transform-origin: right center;
+}
+
+/* With no length to show, a short bar sweeps the track instead. */
+.pr-root[data-indeterminate] .pr-bar {
+  width: 35%;
+  scale: 1 1;
+  animation: pr-sweep 1.3s ease-in-out infinite;
+}
+@keyframes pr-sweep {
+  from {
+    translate: -100%;
+  }
+  to {
+    translate: 300%;
+  }
+}
+
+/* ----------------------------------------------------------------- ring */
+
+.pr-circle {
+  position: relative;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+}
+.pr-svg {
+  width: 100%;
+  height: 100%;
+  /* Zero is at three o'clock in SVG; a progress ring starts at the top. */
+  rotate: -90deg;
+}
+.pr-circle-track {
+  stroke: var(--pr-track);
+}
+.pr-circle-bar {
+  stroke: var(--pr-bar);
+  transition: stroke-dashoffset var(--pr-duration) ease;
+}
+.pr-circle[data-indeterminate] .pr-svg {
+  animation: pr-spin 1s linear infinite;
+}
+@keyframes pr-spin {
+  from {
+    rotate: -90deg;
+  }
+  to {
+    rotate: 270deg;
+  }
+}
+
+.pr-circle-label {
+  position: absolute;
+  font-size: calc(var(--pr-font-size) - 1px);
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  line-height: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pr-bar,
+  .pr-circle-bar {
+    transition: none;
+  }
+  /* Movement that repeats forever is what reduced motion is about, but a
+     stopped indeterminate bar would look broken — so it slows instead. */
+  .pr-root[data-indeterminate] .pr-bar {
+    animation-duration: 3s;
+  }
+  .pr-circle[data-indeterminate] .pr-svg {
+    animation-duration: 2.5s;
+  }
+}
+
+@media (forced-colors: active) {
+  .pr-track {
+    border: 1px solid CanvasText;
+  }
+  .pr-bar {
+    background: Highlight;
+  }
+  .pr-circle-bar {
+    stroke: Highlight;
+  }
+}