@flood-md/react 0.2.0 → 0.2.2

package/README.md

@@ -3,7 +3,7 @@
 Original React 18.3/19 components for TypeScript and Next.js App Router. Native
 HTML semantics and refs, no third-party component library or Tailwind dependency.
 
-This package documents the **0.2.0** API. Keep Flood package versions aligned
+This package documents the **0.2.2** API. Keep Flood package versions aligned
 and follow the guide matching your installed version.
 
 ```tsx
@@ -29,11 +29,20 @@ radii, control sizes and state recipes. No new light foundations profile is
 included. Legacy controls outside FloodRoot keep their earlier theme behavior.
 
 Exports: FloodRoot, Text, Heading, Stack, Inline, Surface, Divider, IconSlot,
-IconButton, Button, Input, Textarea, Checkbox, Radio, Switch, Field and Link,
+IconButton, CodeSnippet, Button, Input, Textarea, Checkbox, Radio, Switch, Field and Link,
 plus TypeScript prop types. Button variants are solid/subtle/outline/ghost;
 sizes are 2xs/xs/sm/md/lg/xl/2xl. Prefer subtle for standalone secondary actions;
 ghost belongs in a clear parent context. Loading disables activation.
 
+Heading adds `size="display"` for large marketing headings: 5.5rem / 1.12,
+weight 500, tracking -.04em. Existing heading sizes retain their metrics.
+Text adds `size="lead"` for introductory copy: 1.375rem / 1.45, weight 400,
+tracking -.01em. The body role remains unchanged.
+CodeSnippet takes required `code: string`, optional `action: ReactNode` and
+native div props/ref. It escapes/selects/wraps code and uses the semantic mono
+font stack; the host owns copy actions and status messages. Both additions are
+compatible extensions in 0.2.2; they do not replace existing defaults.
+
 Input/Textarea controlSize is sm/md/lg/xl; native Input size is preserved.
 Field uses `{props => <Input {...props} />}`. Its required prop forwards native
 required and displays a marker; describedBy merges external IDs with hint/error

package/dist/foundations.css

@@ -41,6 +41,32 @@
 .flood-root .flood-tone--info { color: var(--flood-sys-color-feedback-info); }
 .flood-root .flood-stack { display: flex; flex-direction: column; gap: var(--flood-layout-gap); min-inline-size: 0; }
 .flood-root .flood-inline { display: flex; flex-wrap: wrap; gap: var(--flood-layout-gap); min-inline-size: 0; }
+.flood-root .flood-code-snippet {
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--flood-sys-space-2);
+  min-inline-size: 0;
+  padding: var(--flood-sys-space-3) var(--flood-sys-space-4);
+  border: var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative);
+  border-radius: var(--flood-sys-radius-field);
+  background: var(--flood-sys-color-surface-default);
+  color: var(--flood-sys-color-content-default);
+}
+.flood-root .flood-code-snippet__code {
+  flex: 1;
+  min-inline-size: 0;
+  font-family: var(--flood-sys-font-mono);
+  font-size: var(--flood-sys-type-compact-size);
+  font-weight: var(--flood-sys-type-compact-weight);
+  line-height: var(--flood-sys-type-compact-line-height);
+  letter-spacing: normal;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  user-select: text;
+}
+.flood-root .flood-code-snippet__action { flex: none; }
 .flood-root .flood-surface {
   box-sizing: border-box;
   border-radius: var(--flood-sys-radius-block);
@@ -85,7 +111,7 @@
 }
 .flood-root .flood-button--outline { border-color: var(--flood-sys-color-field-boundary); }
 .flood-root .flood-icon-button { min-inline-size: var(--flood-control-height); padding: var(--flood-sys-space-1); }
-.flood-root .flood-icon { display: inline-flex; flex: none; inline-size: var(--flood-icon-size); block-size: var(--flood-icon-size); color: inherit; }
+.flood-root .flood-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; flex: none; inline-size: var(--flood-icon-size); block-size: var(--flood-icon-size); color: inherit; }
 .flood-root .flood-icon > svg { display: block; inline-size: 100%; block-size: 100%; }
 .flood-root .flood-input {
   display: block;
@@ -151,6 +177,18 @@
 }
 
 /* Role recipes keep every value in the authored token source. */
+.flood-root .flood-type--lead {
+  --flood-type-size: var(--flood-sys-type-lead-size);
+  --flood-type-line: var(--flood-sys-type-lead-line-height);
+  --flood-type-tracking: var(--flood-sys-type-lead-tracking);
+  --flood-type-weight: var(--flood-sys-type-lead-weight);
+}
+.flood-root .flood-type--display {
+  --flood-type-size: var(--flood-sys-type-display-size);
+  --flood-type-line: var(--flood-sys-type-display-line-height);
+  --flood-type-tracking: var(--flood-sys-type-display-tracking);
+  --flood-type-weight: var(--flood-sys-type-display-weight);
+}
 .flood-root .flood-type--large {
   --flood-type-size: var(--flood-sys-type-large-size);
   --flood-type-line: var(--flood-sys-type-large-line-height);

package/dist/index.d.ts

@@ -43,13 +43,13 @@ export declare const Link: import("react").ForwardRefExoticComponent<AnchorHTMLA
 export declare const FloodRoot: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 export interface TextProps extends HTMLAttributes<HTMLElement> {
     as?: "span" | "p" | "div";
-    size?: "body" | "compact" | "label" | "helper";
+    size?: "lead" | "body" | "compact" | "label" | "helper";
     tone?: "default" | "subtle" | "error" | "success" | "warning" | "info";
 }
 export declare const Text: import("react").ForwardRefExoticComponent<TextProps & import("react").RefAttributes<HTMLElement>>;
 export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
     level?: 1 | 2 | 3 | 4 | 5 | 6;
-    size?: "large" | "page" | "section";
+    size?: "display" | "large" | "page" | "section";
 }
 export declare const Heading: import("react").ForwardRefExoticComponent<HeadingProps & import("react").RefAttributes<HTMLHeadingElement>>;
 export type Space = "0" | "1" | "2" | "3" | "4" | "6" | "8" | "12";
@@ -77,3 +77,9 @@ export interface IconButtonProps extends Omit<ButtonProps, "aria-label"> {
 }
 export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const Divider: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLHRElement> & import("react").RefAttributes<HTMLHRElement>>;
+export interface CodeSnippetProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    code: string;
+    action?: ReactNode;
+}
+/** Selectable code with an optional host-owned action; no clipboard side effects. */
+export declare const CodeSnippet: import("react").ForwardRefExoticComponent<CodeSnippetProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/index.js

@@ -64,3 +64,7 @@ export const IconButton = forwardRef(function IconButton({ label, size = "md", v
 export const Divider = forwardRef(function Divider({ className, ...props }, ref) {
     return _jsx("hr", { ...props, ref: ref, className: classes("flood-divider", className) });
 });
+/** Selectable code with an optional host-owned action; no clipboard side effects. */
+export const CodeSnippet = forwardRef(function CodeSnippet({ code, action, className, ...props }, ref) {
+    return (_jsxs("div", { ...props, ref: ref, className: classes("flood-code-snippet", className), children: [_jsx("code", { className: "flood-code-snippet__code", children: code }), action != null && _jsx("div", { className: "flood-code-snippet__action", children: action })] }));
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flood-md/react",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "type": "module",
   "description": "Original Flood components for React and Next.js.",
   "license": "MIT",
@@ -30,7 +30,7 @@
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "dependencies": {
-    "@flood-md/tokens": "0.2.0"
+    "@flood-md/tokens": "0.2.2"
   },
   "publishConfig": {
     "access": "public"