gbs-add-block 2.0.4 → 2.3.0

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

@@ -0,0 +1,382 @@
+{
+  "passportVersion": "1.0.0",
+  "identity": {
+    "component": "Textarea",
+    "folder": "textarea",
+    "exports": [
+      "Textarea"
+    ]
+  },
+  "source": {
+    "libraryVersion": "2.3.0",
+    "files": [
+      "core/count.ts",
+      "core/index.ts",
+      "core/size.ts",
+      "core/types.ts",
+      "index.ts",
+      "react/Textarea.tsx",
+      "react/locale.ts",
+      "react/props.ts"
+    ],
+    "sourceHash": "sha256:b3e29db45b921e5ecadffedfea1d53e436780971331cf2eba5615bb45ad935d3"
+  },
+  "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": "autoFocus",
+      "type": "boolean",
+      "typeText": "boolean | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "autoResize",
+      "type": "boolean",
+      "typeText": "boolean | undefined",
+      "required": false,
+      "default": false,
+      "origin": "derived",
+      "description": "Grow and shrink with the text, between `minRows` and `maxRows`. Default false.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "className",
+      "type": "string",
+      "typeText": "string | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "classNames",
+      "type": "other",
+      "typeText": "Partial<Record<TextareaSlot, string>> | undefined",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "cols",
+      "type": "number",
+      "typeText": "number | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "defaultValue",
+      "type": "string",
+      "typeText": "string | undefined",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "description",
+      "type": "other",
+      "typeText": "ReactNode",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "typeText": "boolean | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "error",
+      "type": "other",
+      "typeText": "ReactNode",
+      "required": false,
+      "origin": "derived",
+      "description": "Message below the field; also marks it invalid.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "form",
+      "type": "string",
+      "typeText": "string | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "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"
+    },
+    {
+      "name": "localeText",
+      "type": "other",
+      "typeText": "Partial<TextareaLocaleText> | undefined",
+      "required": false,
+      "origin": "derived"
+    },
+    {
+      "name": "maxLength",
+      "type": "number",
+      "typeText": "number | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "maxRows",
+      "type": "number",
+      "typeText": "number | undefined",
+      "required": false,
+      "origin": "derived",
+      "description": "Largest height in rows before the text scrolls. No limit by default.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "minRows",
+      "type": "number",
+      "typeText": "number | undefined",
+      "required": false,
+      "origin": "derived",
+      "description": "Smallest height in rows. Default `rows`, or 3.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "name",
+      "type": "string",
+      "typeText": "string | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "onValueChange",
+      "type": "function",
+      "signature": "((value: string) => void) | undefined",
+      "required": false,
+      "origin": "derived",
+      "description": "The new text on every change. The native `onChange` fires as well.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "placeholder",
+      "type": "string",
+      "typeText": "string | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "readOnly",
+      "type": "boolean",
+      "typeText": "boolean | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "ref",
+      "type": "other",
+      "typeText": "Ref<HTMLTextAreaElement> | undefined",
+      "required": false,
+      "origin": "derived",
+      "description": "The `<textarea>` element.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "required",
+      "type": "boolean",
+      "typeText": "boolean | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "resize",
+      "type": "enum",
+      "values": [
+        "both",
+        "horizontal",
+        "none",
+        "vertical"
+      ],
+      "typeText": "TextareaResize | undefined",
+      "required": false,
+      "origin": "derived",
+      "description": "Which way people can drag to resize. Default `vertical`, or `none` with `autoResize`.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "role",
+      "type": "other",
+      "typeText": "AriaRole | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "rows",
+      "type": "number",
+      "typeText": "number | undefined",
+      "required": false,
+      "origin": "inherited"
+    },
+    {
+      "name": "showCount",
+      "type": "boolean",
+      "typeText": "boolean | undefined",
+      "required": false,
+      "default": false,
+      "origin": "derived",
+      "description": "A character counter; shows `count / maxLength` when `maxLength` is set.",
+      "descriptionOrigin": "jsdoc"
+    },
+    {
+      "name": "size",
+      "type": "enum",
+      "values": [
+        "lg",
+        "md",
+        "sm"
+      ],
+      "typeText": "FieldSize | undefined",
+      "required": false,
+      "default": "md",
+      "origin": "derived"
+    },
+    {
+      "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": "value",
+      "type": "string",
+      "typeText": "string | undefined",
+      "required": false,
+      "origin": "derived"
+    }
+  ],
+  "inherits": [
+    {
+      "from": "TextareaHTMLAttributes<HTMLTextAreaElement>",
+      "omitted": [
+        "defaultValue",
+        "value"
+      ],
+      "passthrough": true
+    }
+  ],
+  "events": [
+    {
+      "name": "onValueChange",
+      "signature": "((value: string) => void) | undefined"
+    }
+  ],
+  "slots": [
+    "root",
+    "label",
+    "textarea",
+    "description",
+    "error",
+    "count"
+  ],
+  "states": [
+    {
+      "attr": "data-autoresize"
+    },
+    {
+      "attr": "data-disabled"
+    },
+    {
+      "attr": "data-invalid"
+    },
+    {
+      "attr": "data-over"
+    },
+    {
+      "attr": "data-required"
+    },
+    {
+      "attr": "data-resize",
+      "values": [
+        "both",
+        "horizontal",
+        "none",
+        "vertical"
+      ]
+    },
+    {
+      "attr": "data-size",
+      "values": [
+        "lg",
+        "sm"
+      ]
+    },
+    {
+      "attr": "data-theme",
+      "values": [
+        "dark",
+        "light"
+      ]
+    }
+  ],
+  "accessibility": {
+    "supplied": [],
+    "required": []
+  },
+  "composition": {},
+  "operations": {},
+  "intentDomains": [],
+  "safeMutations": {},
+  "examples": [],
+  "coverage": {
+    "propsTotal": 35,
+    "propsDescribed": 8,
+    "describedPct": 23,
+    "authoredSections": [
+      "accessibility"
+    ]
+  }
+}

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

@@ -1,159 +1,158 @@
-/*
- * Textarea 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 `components` layer, so utility classes passed
- * through `className` / `classNames` override them.
- */
-@layer theme, base, components, utilities;
-
-@layer components {
-  .ta-root {
-    --ta-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));
-    --ta-muted: var(--gbs-muted, var(--dg-muted, light-dark(#71717a, #a1a1aa)));
-    --ta-border: var(--gbs-border, var(--dg-border, light-dark(#e4e4e7, #27272a)));
-    --ta-input-bg: var(--gbs-input-bg, var(--dg-input-bg, light-dark(#ffffff, #121216)));
-    --ta-readonly-bg: var(--gbs-readonly-bg, light-dark(#fafafa, #0e0e12));
-    --ta-focus: var(--gbs-focus, var(--dg-focus, light-dark(#2563eb, #60a5fa)));
-    --ta-danger: var(--gbs-danger, var(--dg-danger, light-dark(#dc2626, #f87171)));
-    --ta-radius: var(--gbs-radius, var(--dg-radius, 8px));
-    --ta-font-size: var(--gbs-font-size, var(--dg-font-size, 13px));
-    --ta-px: 10px;
-    --ta-py: 8px;
-
-    color-scheme: inherit;
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    width: 100%;
-    min-width: 0;
-    font-size: var(--ta-font-size);
-    line-height: 1.4;
-    color: var(--ta-fg);
-  }
-
-  :where(.dark, [data-theme="dark"]) .ta-root {
-    color-scheme: dark;
-  }
-  :where(.light, [data-theme="light"]) .ta-root {
-    color-scheme: light;
-  }
-
-  :where(.ta-root) *,
-  :where(.ta-root) *::before,
-  :where(.ta-root) *::after {
-    box-sizing: border-box;
-  }
-
-  .ta-root[data-size="sm"] {
-    --ta-font-size: 12px;
-    --ta-px: 8px;
-    --ta-py: 6px;
-  }
-  .ta-root[data-size="lg"] {
-    --ta-font-size: 14px;
-    --ta-px: 12px;
-    --ta-py: 10px;
-  }
-
-  .ta-label {
-    font-weight: 500;
-  }
-  .ta-label[data-required]::after {
-    content: " *";
-    color: var(--ta-danger);
-  }
-
-  .ta-input {
-    display: block;
-    width: 100%;
-    min-height: calc(1lh + 2 * var(--ta-py) + 2px);
-    margin: 0;
-    padding: var(--ta-py) var(--ta-px);
-    border: 1px solid var(--ta-border);
-    border-radius: var(--ta-radius);
-    background: var(--ta-input-bg);
-    color: inherit;
-    font: inherit;
-    line-height: 1.5;
-  }
-  .ta-input::placeholder {
-    color: var(--ta-muted);
-  }
-  .ta-input:hover:not(:disabled) {
-    border-color: color-mix(in oklab, var(--ta-border), var(--ta-fg) 25%);
-  }
-  .ta-input:focus-visible {
-    outline: 2px solid var(--ta-focus);
-    outline-offset: -1px;
-  }
-  .ta-input[data-invalid] {
-    border-color: var(--ta-danger);
-    outline-color: var(--ta-danger);
-  }
-  .ta-input:read-only {
-    background: var(--ta-readonly-bg);
-  }
-  .ta-input:disabled {
-    opacity: 0.55;
-    cursor: not-allowed;
-  }
-
-  .ta-input[data-resize="none"] {
-    resize: none;
-  }
-  .ta-input[data-resize="vertical"] {
-    resize: vertical;
-  }
-  .ta-input[data-resize="horizontal"] {
-    resize: horizontal;
-  }
-  .ta-input[data-resize="both"] {
-    resize: both;
-  }
-
-  /*
-   * Auto-resize in CSS where supported. The row limits come from the
-   * component; `--ta-max-rows: none` makes max-height invalid, which means no limit.
-   */
-  @supports (field-sizing: content) {
-    .ta-input[data-autoresize] {
-      field-sizing: content;
-      min-height: calc(var(--ta-min-rows, 3) * 1lh + 2 * var(--ta-py) + 2px);
-      max-height: calc(var(--ta-max-rows) * 1lh + 2 * var(--ta-py) + 2px);
-    }
-  }
-
-  .ta-footer {
-    display: flex;
-    align-items: baseline;
-    gap: 8px;
-  }
-  .ta-description {
-    flex: 1 1 auto;
-    min-width: 0;
-    color: var(--ta-muted);
-    font-size: 0.92em;
-  }
-  .ta-count {
-    flex: none;
-    margin-inline-start: auto;
-    color: var(--ta-muted);
-    font-size: 0.92em;
-    font-variant-numeric: tabular-nums;
-  }
-  .ta-count[data-over] {
-    color: var(--ta-danger);
-  }
-  .ta-error {
-    color: var(--ta-danger);
-    font-size: 0.92em;
-  }
-
-  @media (forced-colors: active) {
-    .ta-input:focus-visible {
-      outline-color: Highlight;
-    }
-  }
-}
+/*
+ * Textarea 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.
+ */
+
+.ta-root {
+  --ta-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));
+  --ta-muted: var(--gbs-muted, var(--dg-muted, light-dark(#71717a, #a1a1aa)));
+  --ta-border: var(--gbs-border, var(--dg-border, light-dark(#e4e4e7, #27272a)));
+  --ta-input-bg: var(--gbs-input-bg, var(--dg-input-bg, light-dark(#ffffff, #121216)));
+  --ta-readonly-bg: var(--gbs-readonly-bg, light-dark(#fafafa, #0e0e12));
+  --ta-focus: var(--gbs-focus, var(--dg-focus, light-dark(#2563eb, #60a5fa)));
+  --ta-danger: var(--gbs-danger, var(--dg-danger, light-dark(#dc2626, #f87171)));
+  --ta-radius: var(--gbs-radius, var(--dg-radius, 8px));
+  --ta-font-size: var(--gbs-font-size, var(--dg-font-size, 13px));
+  --ta-px: 10px;
+  --ta-py: 8px;
+
+  color-scheme: inherit;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+  min-width: 0;
+  font-size: var(--ta-font-size);
+  line-height: 1.4;
+  color: var(--ta-fg);
+}
+
+:where(.dark, [data-theme="dark"]) .ta-root {
+  color-scheme: dark;
+}
+:where(.light, [data-theme="light"]) .ta-root {
+  color-scheme: light;
+}
+
+:where(.ta-root) *,
+:where(.ta-root) *::before,
+:where(.ta-root) *::after {
+  box-sizing: border-box;
+}
+
+.ta-root[data-size="sm"] {
+  --ta-font-size: 12px;
+  --ta-px: 8px;
+  --ta-py: 6px;
+}
+.ta-root[data-size="lg"] {
+  --ta-font-size: 14px;
+  --ta-px: 12px;
+  --ta-py: 10px;
+}
+
+.ta-label {
+  font-weight: 500;
+}
+.ta-label[data-required]::after {
+  content: " *";
+  color: var(--ta-danger);
+}
+
+.ta-input {
+  display: block;
+  width: 100%;
+  min-height: calc(1lh + 2 * var(--ta-py) + 2px);
+  margin: 0;
+  padding: var(--ta-py) var(--ta-px);
+  border: 1px solid var(--ta-border);
+  border-radius: var(--ta-radius);
+  background: var(--ta-input-bg);
+  color: inherit;
+  font: inherit;
+  line-height: 1.5;
+}
+.ta-input::placeholder {
+  color: var(--ta-muted);
+}
+.ta-input:hover:not(:disabled) {
+  border-color: color-mix(in oklab, var(--ta-border), var(--ta-fg) 25%);
+}
+.ta-input:focus-visible {
+  outline: 2px solid var(--ta-focus);
+  outline-offset: -1px;
+}
+.ta-input[data-invalid] {
+  border-color: var(--ta-danger);
+  outline-color: var(--ta-danger);
+}
+.ta-input:read-only {
+  background: var(--ta-readonly-bg);
+}
+.ta-input:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.ta-input[data-resize="none"] {
+  resize: none;
+}
+.ta-input[data-resize="vertical"] {
+  resize: vertical;
+}
+.ta-input[data-resize="horizontal"] {
+  resize: horizontal;
+}
+.ta-input[data-resize="both"] {
+  resize: both;
+}
+
+/*
+ * Auto-resize in CSS where supported. The row limits come from the
+ * component; `--ta-max-rows: none` makes max-height invalid, which means no limit.
+ */
+@supports (field-sizing: content) {
+  .ta-input[data-autoresize] {
+    field-sizing: content;
+    min-height: calc(var(--ta-min-rows, 3) * 1lh + 2 * var(--ta-py) + 2px);
+    max-height: calc(var(--ta-max-rows) * 1lh + 2 * var(--ta-py) + 2px);
+  }
+}
+
+.ta-footer {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+.ta-description {
+  flex: 1 1 auto;
+  min-width: 0;
+  color: var(--ta-muted);
+  font-size: 0.92em;
+}
+.ta-count {
+  flex: none;
+  margin-inline-start: auto;
+  color: var(--ta-muted);
+  font-size: 0.92em;
+  font-variant-numeric: tabular-nums;
+}
+.ta-count[data-over] {
+  color: var(--ta-danger);
+}
+.ta-error {
+  color: var(--ta-danger);
+  font-size: 0.92em;
+}
+
+@media (forced-colors: active) {
+  .ta-input:focus-visible {
+    outline-color: Highlight;
+  }
+}