@sableui/react 0.6.2 → 0.7.1

package/dist/components/gradient-art/renderer.js

@@ -0,0 +1,336 @@
+"use client";
+
+// src/components/gradient-art/renderer.ts
+import {
+  getShaderNoiseTexture,
+  grainGradientFragmentShader,
+  grainGradientMeta,
+  staticMeshGradientFragmentShader,
+  staticMeshGradientMeta
+} from "@paper-design/shaders";
+var VERTEX = `#version 300 es
+precision mediump float;
+
+layout(location = 0) in vec4 a_position;
+
+uniform vec2 u_resolution;
+uniform float u_pixelRatio;
+uniform float u_originX;
+uniform float u_originY;
+uniform float u_worldWidth;
+uniform float u_worldHeight;
+uniform float u_fit;
+uniform float u_scale;
+uniform float u_rotation;
+uniform float u_offsetX;
+uniform float u_offsetY;
+
+out vec2 v_objectUV;
+out vec2 v_objectBoxSize;
+out vec2 v_patternUV;
+out vec2 v_patternBoxSize;
+
+vec3 getBoxSize(float boxRatio, vec2 givenBoxSize) {
+  vec2 box = vec2(0.);
+  box.x = boxRatio * min(givenBoxSize.x / boxRatio, givenBoxSize.y);
+  float noFitBoxWidth = box.x;
+  if (u_fit == 1.) {
+    box.x = boxRatio * min(u_resolution.x / boxRatio, u_resolution.y);
+  } else if (u_fit == 2.) {
+    box.x = boxRatio * max(u_resolution.x / boxRatio, u_resolution.y);
+  }
+  box.y = box.x / boxRatio;
+  return vec3(box, noFitBoxWidth);
+}
+
+void main() {
+  gl_Position = a_position;
+
+  vec2 uv = gl_Position.xy * .5;
+  vec2 boxOrigin = vec2(.5 - u_originX, u_originY - .5);
+  vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight);
+  givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio;
+  float r = u_rotation * 3.14159265358979323846 / 180.;
+  mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));
+  vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);
+
+  vec2 fixedRatioBoxGivenSize = vec2(
+    (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,
+    (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y
+  );
+  v_objectBoxSize = getBoxSize(1., fixedRatioBoxGivenSize).xy;
+  vec2 objectWorldScale = u_resolution.xy / v_objectBoxSize;
+  v_objectUV = uv;
+  v_objectUV *= objectWorldScale;
+  v_objectUV += boxOrigin * (objectWorldScale - 1.);
+  v_objectUV += graphicOffset;
+  v_objectUV /= u_scale;
+  v_objectUV = graphicRotation * v_objectUV;
+
+  vec2 patternBoxGivenSize = vec2(
+    (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,
+    (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y
+  );
+  float patternBoxRatio = patternBoxGivenSize.x / patternBoxGivenSize.y;
+  vec3 boxSizeData = getBoxSize(patternBoxRatio, patternBoxGivenSize);
+  v_patternBoxSize = boxSizeData.xy;
+  float patternBoxNoFitBoxWidth = boxSizeData.z;
+  vec2 patternBoxScale = u_resolution.xy / v_patternBoxSize;
+  v_patternUV = uv;
+  v_patternUV += graphicOffset / patternBoxScale;
+  v_patternUV += boxOrigin;
+  v_patternUV -= boxOrigin / patternBoxScale;
+  v_patternUV *= u_resolution.xy;
+  v_patternUV /= u_pixelRatio;
+  if (u_fit > 0.) {
+    v_patternUV *= (patternBoxNoFitBoxWidth / v_patternBoxSize.x);
+  }
+  v_patternUV /= u_scale;
+  v_patternUV = graphicRotation * v_patternUV;
+  v_patternUV += boxOrigin / patternBoxScale;
+  v_patternUV -= boxOrigin;
+  v_patternUV *= .01;
+}
+`;
+var FRAGMENTS = { mesh: staticMeshGradientFragmentShader, grain: grainGradientFragmentShader };
+var MAX_COLORS = { mesh: staticMeshGradientMeta.maxColorCount, grain: grainGradientMeta.maxColorCount };
+var GRAIN_CORNERS = 4;
+var state;
+var noiseImage = null;
+var listeners = /* @__PURE__ */ new Set();
+function onArtInvalidate(listener) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+var invalidate = () => {
+  for (const listener of listeners) listener();
+};
+function compile(gl, type, source) {
+  const shader = gl.createShader(type);
+  if (!shader) return null;
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    console.error("GradientArt: shader failed to compile", gl.getShaderInfoLog(shader));
+    gl.deleteShader(shader);
+    return null;
+  }
+  return shader;
+}
+function programFor(s, variant) {
+  const cached = s.programs[variant];
+  if (cached !== void 0) return cached;
+  s.programs[variant] = null;
+  const { gl } = s;
+  const vertex = compile(gl, gl.VERTEX_SHADER, VERTEX);
+  const fragment = compile(gl, gl.FRAGMENT_SHADER, FRAGMENTS[variant]);
+  if (!vertex || !fragment) return null;
+  const program = gl.createProgram();
+  if (!program) return null;
+  gl.attachShader(program, vertex);
+  gl.attachShader(program, fragment);
+  gl.linkProgram(program);
+  gl.deleteShader(vertex);
+  gl.deleteShader(fragment);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    console.error("GradientArt: shader failed to link", gl.getProgramInfoLog(program));
+    return null;
+  }
+  const entry = { program, uniforms: /* @__PURE__ */ new Map() };
+  s.programs[variant] = entry;
+  return entry;
+}
+function setup(s) {
+  const { gl } = s;
+  const buffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]), gl.STATIC_DRAW);
+  gl.enableVertexAttribArray(0);
+  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+  s.programs = {};
+  s.noise = null;
+  if (noiseImage?.complete && noiseImage.naturalWidth) uploadNoise(s, noiseImage);
+}
+function uploadNoise(s, image) {
+  const { gl } = s;
+  const texture = gl.createTexture();
+  gl.activeTexture(gl.TEXTURE0);
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+  s.noise = texture;
+}
+function getState() {
+  if (state !== void 0) return state;
+  if (typeof document === "undefined") return null;
+  const canvas = document.createElement("canvas");
+  const gl = canvas.getContext("webgl2", { alpha: true, premultipliedAlpha: true, antialias: false, preserveDrawingBuffer: true });
+  if (!gl) {
+    state = null;
+    return state;
+  }
+  const s = { canvas, gl, programs: {}, noise: null, lost: false };
+  setup(s);
+  canvas.addEventListener("webglcontextlost", (event) => {
+    event.preventDefault();
+    s.lost = true;
+  });
+  canvas.addEventListener("webglcontextrestored", () => {
+    s.lost = false;
+    setup(s);
+    invalidate();
+  });
+  state = s;
+  return state;
+}
+function noiseReady(s) {
+  if (s.noise) return true;
+  if (!noiseImage) {
+    noiseImage = getShaderNoiseTexture() ?? null;
+    noiseImage?.decode().then(
+      () => {
+        const current = getState();
+        if (current && noiseImage) uploadNoise(current, noiseImage);
+        invalidate();
+      },
+      () => {
+      }
+    );
+  }
+  return false;
+}
+function artSupported() {
+  return getState() !== null;
+}
+function paintArt(target, job) {
+  const s = getState();
+  if (!s || s.lost) return false;
+  if (job.variant === "grain" && !noiseReady(s)) return false;
+  const entry = programFor(s, job.variant);
+  if (!entry) return false;
+  const { gl, canvas } = s;
+  const { width, height } = job;
+  if (canvas.width !== width || canvas.height !== height) {
+    canvas.width = width;
+    canvas.height = height;
+  }
+  gl.viewport(0, 0, width, height);
+  gl.useProgram(entry.program);
+  const at = (name) => {
+    if (!entry.uniforms.has(name)) entry.uniforms.set(name, gl.getUniformLocation(entry.program, name));
+    return entry.uniforms.get(name) ?? null;
+  };
+  const float = (name, value) => gl.uniform1f(at(name), value);
+  gl.uniform2f(at("u_resolution"), width, height);
+  float("u_pixelRatio", job.pixelRatio);
+  float("u_originX", 0.5);
+  float("u_originY", 0.5);
+  float("u_worldWidth", 0);
+  float("u_worldHeight", 0);
+  float("u_fit", 2);
+  float("u_scale", 1);
+  float("u_offsetX", 0);
+  float("u_offsetY", 0);
+  const max = MAX_COLORS[job.variant];
+  const fill = (colors) => {
+    const flat = new Float32Array(max * 4);
+    colors.slice(0, max).forEach((color, i) => flat.set(color, i * 4));
+    gl.uniform4fv(at("u_colors"), flat);
+    float("u_colorsCount", Math.min(colors.length, max));
+  };
+  if (job.variant === "mesh") {
+    float("u_scale", 0.72);
+    float("u_rotation", job.seed * 360);
+    fill(job.colors);
+    float("u_positions", job.seed * 100);
+    float("u_waveX", job.warp);
+    float("u_waveXShift", job.seed);
+    float("u_waveY", job.warp);
+    float("u_waveYShift", job.seed * 7.3 % 1);
+    float("u_mixing", job.softness);
+    float("u_grainMixer", job.grain * 0.6);
+    float("u_grainOverlay", job.grain);
+  } else {
+    const [ground = [0, 0, 0, 1], ...bands] = job.colors;
+    float("u_rotation", job.seed * 360);
+    gl.uniform4fv(at("u_colorBack"), ground);
+    fill(bands.length ? bands : [ground]);
+    float("u_time", job.seed * 100);
+    float("u_softness", job.softness * 0.8);
+    float("u_intensity", 0.15 + job.warp * 0.2);
+    float("u_noise", 0.15 + job.grain * 0.5);
+    float("u_shape", GRAIN_CORNERS);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, s.noise);
+    gl.uniform1i(at("u_noiseTexture"), 0);
+  }
+  gl.clearColor(0, 0, 0, 0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  gl.drawArrays(gl.TRIANGLES, 0, 6);
+  if (target.width !== width || target.height !== height) {
+    target.width = width;
+    target.height = height;
+  }
+  const context = target.getContext("2d");
+  if (!context) return false;
+  context.clearRect(0, 0, width, height);
+  context.drawImage(canvas, 0, 0);
+  return true;
+}
+var swatch;
+var parsed = /* @__PURE__ */ new Map();
+function cssColorToRgba(color) {
+  const hit = parsed.get(color);
+  if (hit) return hit;
+  if (swatch === void 0) {
+    swatch = typeof document === "undefined" ? null : document.createElement("canvas").getContext("2d", { willReadFrequently: true });
+    if (swatch) swatch.canvas.width = swatch.canvas.height = 1;
+  }
+  if (!swatch) return null;
+  swatch.clearRect(0, 0, 1, 1);
+  swatch.fillStyle = "transparent";
+  swatch.fillStyle = color;
+  swatch.fillRect(0, 0, 1, 1);
+  const [r, g, b, a] = swatch.getImageData(0, 0, 1, 1).data;
+  const out = [r / 255, g / 255, b / 255, a / 255];
+  if (parsed.size > 512) parsed.clear();
+  parsed.set(color, out);
+  return out;
+}
+var themeListeners = /* @__PURE__ */ new Set();
+var observer = null;
+var pending = 0;
+function onThemeChange(listener) {
+  themeListeners.add(listener);
+  if (!observer && typeof MutationObserver !== "undefined") {
+    const notify = () => {
+      if (pending) return;
+      pending = requestAnimationFrame(() => {
+        pending = 0;
+        for (const fn of themeListeners) fn();
+      });
+    };
+    observer = new MutationObserver(notify);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "style", "data-sable-theme"] });
+    observer.observe(document.head, { childList: true, subtree: true, characterData: true });
+  }
+  return () => {
+    themeListeners.delete(listener);
+    if (!themeListeners.size && observer) {
+      observer.disconnect();
+      observer = null;
+      cancelAnimationFrame(pending);
+      pending = 0;
+    }
+  };
+}
+export {
+  artSupported,
+  cssColorToRgba,
+  onArtInvalidate,
+  onThemeChange,
+  paintArt
+};

package/dist/components/inline-status/index.js

@@ -0,0 +1,7 @@
+// src/components/inline-status/index.ts
+import { InlineStatus } from "./inline-status.js";
+import { inlineStatusMeta } from "./inline-status.meta.js";
+export {
+  InlineStatus,
+  inlineStatusMeta
+};

package/dist/components/inline-status/inline-status.js

@@ -0,0 +1,33 @@
+// src/components/inline-status/inline-status.tsx
+import { Icon } from "../../icon/index.js";
+import { cn } from "../../lib/cn.js";
+import {
+  inlineStatusVariants,
+  inlineToneIcon
+} from "./inline-status.variants.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function InlineStatus({
+  tone = "neutral",
+  size,
+  icon,
+  className,
+  children,
+  ...props
+}) {
+  const { name, className: iconClassName } = inlineToneIcon[tone];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(inlineStatusVariants({ size }), iconClassName, className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "flex h-[1lh] shrink-0 items-center", children: icon ?? /* @__PURE__ */ jsx(Icon, { name, className: "text-[1.15em]" }) }),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0", children })
+      ]
+    }
+  );
+}
+InlineStatus.displayName = "InlineStatus";
+export {
+  InlineStatus
+};

package/dist/components/inline-status/inline-status.meta.js

@@ -0,0 +1,83 @@
+// src/components/inline-status/inline-status.meta.ts
+var inlineStatusMeta = {
+  name: "InlineStatus",
+  summary: "A borderless single-line status message \u2014 a leading semantic icon + one line of text over the canonical tone scale (neutral/info/success/warning/destructive). The non-boxed sibling of Note for inline affirmations, errors, and progress; pass a custom icon (e.g. a Spinner) for a pending row.",
+  status: "stable",
+  keywords: [
+    "inline status",
+    "state",
+    "message",
+    "availability"
+  ],
+  usage: {
+    description: "Use InlineStatus for short state messages placed near the thing they describe.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Use it beside inputs, rows, actions, or settings that need local status."
+      },
+      {
+        guidance: "do",
+        description: "Keep the message brief and pair color with text."
+      },
+      {
+        guidance: "dont",
+        description: "Do not use InlineStatus for global announcements or page-level alerts."
+      },
+      {
+        guidance: "dont",
+        description: "Do not use tone as the only signal. Colour alone fails for colour-blind users \u2014 the leading icon is what carries the meaning, so never hide it."
+      }
+    ]
+  },
+  related: {
+    components: ["StatusDot", "Badge", "Banner", "Note"]
+  },
+  props: [
+    {
+      name: "tone",
+      type: '"neutral" | "info" | "success" | "warning" | "destructive"',
+      default: '"neutral"',
+      description: "Severity tone \u2014 drives the leading icon (name + color) and the text color. The shared status-tone vocabulary (STATUS_TONES)."
+    },
+    {
+      name: "size",
+      type: '"sm" | "md"',
+      default: '"sm"',
+      description: "Text size: sm (text-body-sm) or md (text-body-md). sm is the default for inline placement under a control; md matches surrounding body copy."
+    },
+    {
+      name: "icon",
+      type: "ReactNode",
+      description: "Override the leading glyph (e.g. a <Spinner />); otherwise the tone selects it."
+    }
+  ],
+  variants: {
+    tone: ["neutral", "info", "success", "warning", "destructive"],
+    size: ["sm", "md"]
+  },
+  tokensUsed: [
+    "tone-info",
+    "success",
+    "tone-warning",
+    "destructive",
+    "muted-foreground"
+  ],
+  a11y: [
+    "Color reinforces, never replaces, meaning \u2014 the leading icon and the message text carry the status.",
+    "For a live status (e.g. a form submit result), render it in an aria-live region or pair it with the field's error wiring so the change is announced."
+  ],
+  examples: [
+    {
+      label: "Tones",
+      code: '<Stack gap={1}><InlineStatus tone="success">Top-up confirmed.</InlineStatus><InlineStatus tone="destructive">Insufficient balance.</InlineStatus></Stack>'
+    },
+    {
+      label: "Pending (custom icon)",
+      code: '<InlineStatus tone="neutral" icon={<Spinner size="sm" />}>Preparing transaction\u2026</InlineStatus>'
+    }
+  ]
+};
+export {
+  inlineStatusMeta
+};

package/dist/components/inline-status/inline-status.variants.js

@@ -0,0 +1,18 @@
+// src/components/inline-status/inline-status.variants.ts
+import { cva } from "class-variance-authority";
+import { STATUS_TONE_ICON } from "../../lib/status-tone.js";
+var inlineStatusVariants = cva("inline-flex items-start gap-1.5", {
+  variants: {
+    size: {
+      sm: "text-body-sm",
+      md: "text-body-md"
+    }
+  },
+  defaultVariants: {
+    size: "sm"
+  }
+});
+export {
+  inlineStatusVariants,
+  STATUS_TONE_ICON as inlineToneIcon
+};

package/dist/components/input/index.js

@@ -0,0 +1,7 @@
+// src/components/input/index.ts
+import { Input } from "./input.js";
+import { inputMeta } from "./input.meta.js";
+export {
+  Input,
+  inputMeta
+};

package/dist/components/input/input.js

@@ -0,0 +1,33 @@
+// src/components/input/input.tsx
+import { Input as BaseInput } from "@base-ui/react/input";
+import { cn } from "../../lib/cn.js";
+import { FIELD_INVALID, FIELD_SHELL, FIELD_SHELL_XS, MOBILE_FIELD_TIER } from "../../lib/field-shell.js";
+import { useDensity, useTypeTier } from "../../lib/density.js";
+import { jsx } from "react/jsx-runtime";
+function Input({ className, type, size = "md", ref, ...props }) {
+  const tier = useTypeTier();
+  const density = useDensity();
+  return /* @__PURE__ */ jsx(
+    BaseInput,
+    {
+      ref,
+      type: type ?? "text",
+      className: cn(
+        "flex w-full text-foreground",
+        FIELD_SHELL,
+        FIELD_INVALID,
+        size === "xs" ? cn("h-(--control-xs) px-1.5", FIELD_SHELL_XS) : "h-(--control-md) px-3",
+        // type="file": style the native selector button (otherwise unstyled).
+        "file:mr-3 file:cursor-pointer file:border-0 file:bg-transparent file:py-2 file:text-foreground",
+        tier.body,
+        density === "comfortable" && MOBILE_FIELD_TIER,
+        className
+      ),
+      ...props
+    }
+  );
+}
+Input.displayName = "Input";
+export {
+  Input
+};

package/dist/components/input/input.meta.js

@@ -0,0 +1,155 @@
+// src/components/input/input.meta.ts
+var inputMeta = {
+  name: "Input",
+  summary: "Styled native text input. Soft-square (rounded-sm), card surface, 2px focus ring; aria-invalid raises the destructive error treatment.",
+  keywords: [
+    "input",
+    "text input",
+    "field",
+    "form",
+    "email",
+    "search",
+    "file",
+    "invalid",
+    "validation"
+  ],
+  usage: {
+    description: "Use Input for short freeform text, search, email, password, file, and native input types. In forms, wrap Input in Field so label, description, required state, and validation messaging stay accessible and consistent.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Pair every Input with a visible label through Field or an explicit label/htmlFor connection."
+      },
+      {
+        guidance: "do",
+        description: "Use type, inputMode, autoComplete, and placeholder as progressive hints, not as the only label."
+      },
+      {
+        guidance: "do",
+        description: "Set aria-invalid or use Field error copy when validation fails."
+      },
+      {
+        guidance: "do",
+        description: "Keep a focusable field at 16px or larger on mobile. iOS Safari zooms the whole page when a focused input computes under 16px and never zooms back out. Input handles this itself \u2014 below the sm breakpoint it renders text-body-lg (17px) and returns to text-body-md at sm and up. Build a custom field the same way: a second paired tier under a max-sm: variant, never a hand-set font-size."
+      },
+      {
+        guidance: "dont",
+        description: "Override an Input's type with a page tier below 16px (text-body-md, text-body-sm, text-label-*) without a >=16px mobile arm \u2014 that reintroduces the iOS focus zoom."
+      },
+      {
+        guidance: "dont",
+        description: "Use placeholder text as the label; it disappears once the user types and is not enough context."
+      },
+      {
+        guidance: "dont",
+        description: "Use Input for long body copy. Use Textarea for multi-line content."
+      }
+    ],
+    anatomy: [
+      {
+        name: "Input",
+        required: true,
+        description: "The native input element with Sable surface, disabled, focus, and invalid styling."
+      },
+      {
+        name: "Label",
+        required: true,
+        description: "Usually provided by Field or a separate Label. It gives the input its visible purpose."
+      },
+      {
+        name: "Description",
+        required: false,
+        description: "Optional helper copy connected through aria-describedby when using Field."
+      },
+      {
+        name: "Error",
+        required: false,
+        description: "Validation message paired with aria-invalid and destructive styling."
+      }
+    ]
+  },
+  related: {
+    components: ["Field", "Form", "Textarea", "SearchInput", "NumberField"],
+    patterns: ["SettingsPage", "AuthPage"]
+  },
+  status: "stable",
+  props: [
+    {
+      name: "size",
+      type: '"md" | "xs"',
+      default: '"md"',
+      description: "md is the form field. xs is the dense inset field of a tool panel (an inset panel-field fill, no outline, tight padding) \u2014 the same ladder as Select and Combobox. Use it instead of overriding the height with className."
+    },
+    {
+      name: "type",
+      type: "string",
+      default: '"text"',
+      description: 'Native input type (text, email, password, search, number, file, \u2026). type="file" themes the native selector button via file: token utilities.'
+    },
+    {
+      name: "disabled",
+      type: "boolean",
+      default: "false",
+      description: "Dims the control and blocks pointer interaction."
+    },
+    {
+      name: "aria-invalid",
+      type: "boolean",
+      description: "Surfaces the destructive border + ring. Base UI form fields set this automatically."
+    },
+    {
+      name: "...props",
+      type: 'ComponentPropsWithRef<"input">',
+      description: "All native input attributes (placeholder, value, onChange, ref, \u2026) pass through."
+    }
+  ],
+  tokensUsed: [
+    "input",
+    "card",
+    "foreground",
+    "muted-foreground",
+    "ring",
+    "destructive"
+  ],
+  a11y: [
+    "Renders a native <input> \u2014 labels, keyboard, and form semantics come for free.",
+    "Renders through Base UI's Input (Field.Control): inside a Field it picks up the label, description, error and validity wiring from context, even when nested in a wrapper.",
+    "Always associate a <label htmlFor> (or wrap) \u2014 placeholder text is not a label.",
+    "Focus-visible ring uses the --ring token at 40% opacity.",
+    "Set aria-invalid='true' on error so the destructive treatment is conveyed, not color-only."
+  ],
+  variants: {
+    size: ["md", "xs"]
+  },
+  examples: [
+    { label: "Default", code: '<Input placeholder="Search posts" />' },
+    {
+      label: "With a label",
+      code: '<Field label="Email"><Input type="email" placeholder="you@example.com" /></Field>'
+    },
+    {
+      label: "Field with helper text",
+      code: '<Field label="Display name" description="Shown on your public profile."><Input placeholder="Nova Reed" /></Field>'
+    },
+    {
+      label: "Field error",
+      code: '<Field label="Email" error="Enter a valid email address."><Input type="email" defaultValue="not-an-email" /></Field>'
+    },
+    {
+      label: "Search input",
+      code: '<Field label="Search posts"><Input type="search" placeholder="Search by title, creator, or tag" /></Field>'
+    },
+    {
+      label: "Invalid",
+      code: '<Input aria-invalid defaultValue="not-an-email" />'
+    },
+    {
+      label: "File",
+      code: '<Input type="file" accept="image/*" />'
+    },
+    { label: "Disabled", code: '<Input disabled placeholder="Disabled" />' }
+  ]
+};
+export {
+  inputMeta
+};

package/dist/components/kbd/index.js

@@ -0,0 +1,8 @@
+// src/components/kbd/index.ts
+import { Kbd, KbdGroup } from "./kbd.js";
+import { kbdMeta } from "./kbd.meta.js";
+export {
+  Kbd,
+  KbdGroup,
+  kbdMeta
+};