@oprt/react 0.0.0-stage → 0.2.0

package/dist/Button/Button.js

@@ -0,0 +1,170 @@
+"use client";
+
+// src/Button/Button.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import {
+  Children,
+  Fragment,
+  cloneElement,
+  forwardRef,
+  isValidElement
+} from "react";
+import clsx from "clsx";
+import { useMotion, composeMotionHandlers } from "../_internal/motion.js";
+import { useFocusableWhenUnavailable } from "../_internal/unavailable.js";
+import { ButtonManifest } from "./Button.manifest.js";
+import { devValidate } from "../_internal/devValidate.js";
+import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
+var buttonStyles = cva(
+  [
+    "oprt-cut border border-transparent",
+    // The label is centered, one line or several (design call DC-8). `:where(&)` gives that default
+    // no specificity, as the browser's own button style has, so a caller's `text-left` still wins.
+    "inline-flex items-center justify-center gap-1u [:where(&)]:text-center whitespace-normal",
+    // The height is a minimum (sizes, below), so a row that stretches its items would grow a
+    // one-line button to its tallest neighbor. `fit-content` is not `auto`, so stretch leaves it
+    // alone, and the minimum height still applies.
+    "h-fit",
+    // Tracking is NOT set here — it belongs to the size variant, because the
+    // correct em value depends on the font size the variant selects.
+    "font-sans font-semibold uppercase [&_code]:normal-case [&_code]:tracking-normal [&_code]:oprt-wrap-anywhere [&_kbd]:normal-case [&_kbd]:tracking-normal",
+    "oprt-motion oprt-motion-press",
+    // Keyboard focus is the system's ring around the element's own box, with the edge of the shape
+    // lit inside it.
+    "focus-visible:outline-hidden focus-visible:border-oprt-border-focus focus-visible:shadow-oprt-focus focus-visible:[--oprt-cut-edge:var(--oprt-border-focus)]",
+    "disabled:text-oprt-text-dim disabled:cursor-not-allowed",
+    "data-[disabled]:text-oprt-text-dim data-[disabled]:cursor-not-allowed data-[disabled]:focus-visible:border-oprt-border-focus data-[disabled]:focus-visible:[--oprt-cut-edge:var(--oprt-border-focus)]"
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        // The main action is the one button cut at rest, and a disabled one keeps that cut.
+        primary: "oprt-cut-standing text-oprt-bg [--oprt-cut-fill:var(--oprt-accent)] [--oprt-cut-edge:var(--oprt-accent-active)] hover:[--oprt-cut-fill:var(--oprt-accent-hover)] active:[--oprt-cut-fill:var(--oprt-accent-active)] disabled:[--oprt-cut-fill:var(--oprt-surface-3)] disabled:[--oprt-cut-edge:var(--oprt-border-control)] data-[disabled]:[--oprt-cut-fill:var(--oprt-surface-3)] data-[disabled]:[--oprt-cut-edge:var(--oprt-border-control)]",
+        secondary: "text-oprt-accent [--oprt-cut-fill:transparent] [--oprt-cut-edge:var(--oprt-accent)] hover:[--oprt-cut-fill:var(--oprt-accent-ghost)] disabled:[--oprt-cut-fill:transparent] disabled:[--oprt-cut-edge:var(--oprt-border-control)] data-[disabled]:[--oprt-cut-fill:transparent] data-[disabled]:[--oprt-cut-edge:var(--oprt-border-control)]",
+        // Outline variants draw their boundary in the control outline (design call DC-3).
+        tertiary: "text-oprt-text [--oprt-cut-fill:transparent] [--oprt-cut-edge:var(--oprt-border-control)] hover:[--oprt-cut-edge:var(--oprt-accent)] disabled:[--oprt-cut-fill:transparent] disabled:[--oprt-cut-edge:var(--oprt-border-control)] data-[disabled]:[--oprt-cut-fill:transparent] data-[disabled]:[--oprt-cut-edge:var(--oprt-border-control)]",
+        // Danger keeps its red at full strength; only a disabled one drops to the gray outline
+        // (DC-9). Armed (hovered, focused, pressed), it fills with hazard stripes in place of a flat
+        // tint: `oprt-cut-hazard`.
+        danger: "oprt-cut-hazard text-oprt-error [--oprt-cut-fill:transparent] [--oprt-cut-edge:var(--oprt-error)] disabled:[--oprt-cut-fill:transparent] disabled:[--oprt-cut-edge:var(--oprt-border-control)] data-[disabled]:[--oprt-cut-fill:transparent] data-[disabled]:[--oprt-cut-edge:var(--oprt-border-control)]",
+        // Ghost: no container stroke — text-only until hover, and still none when disabled.
+        // Ideal for asChild links.
+        ghost: "text-oprt-text [--oprt-cut-fill:transparent] [--oprt-cut-edge:transparent] hover:[--oprt-cut-fill:var(--oprt-accent-ghost)] disabled:[--oprt-cut-fill:transparent] disabled:[--oprt-cut-edge:transparent] data-[disabled]:[--oprt-cut-fill:transparent] data-[disabled]:[--oprt-cut-edge:transparent]"
+      },
+      size: {
+        // Sizes carry size AND tracking; weight is set once on the base
+        // (font-semibold, 600). text-oprt-base (11px) is the MIL-STD-1472H floor.
+        // The height is a minimum, so a label that wraps grows the button instead of spilling out
+        // of it. The vertical padding is what is left of the height around one line and the 2 px
+        // of border, so a one-line button is exactly its token height (24, 32 and 40 px).
+        sm: "oprt-cut-sm min-h-oprt-sm px-2u py-[calc((var(--oprt-height-sm)-2px-var(--oprt-line-base))/2)] text-oprt-base tracking-oprt-caps",
+        md: "oprt-cut-md min-h-oprt-md px-3u py-[calc((var(--oprt-height-md)-2px-var(--oprt-line-base))/2)] text-oprt-base tracking-oprt-caps",
+        lg: "oprt-cut-lg min-h-oprt-lg px-4u py-[calc((var(--oprt-height-lg)-2px-var(--oprt-line-md))/2)] text-oprt-md tracking-oprt-caps-lg"
+      }
+    },
+    defaultVariants: { variant: "primary", size: "md" }
+  }
+);
+function flatten(children, prefix = "") {
+  return Children.toArray(children).flatMap((child) => {
+    if (!isValidElement(child)) return [child];
+    if (child.type === Fragment) return flatten(child.props.children, `${prefix}${child.key}/`);
+    return [prefix ? cloneElement(child, { key: `${prefix}${child.key}` }) : child];
+  });
+}
+function isIcon(node) {
+  if (!isValidElement(node)) return false;
+  const hidden = node.props["aria-hidden"];
+  return node.type === "svg" || hidden === true || hidden === "true" || typeof node.type !== "string" && node.props.children == null;
+}
+function splitLabel(children) {
+  const parts = flatten(children);
+  const edge = (node) => isIcon(node) || typeof node === "string" && node.trim() === "";
+  let start = 0;
+  let end = parts.length;
+  while (start < end && edge(parts[start])) start += 1;
+  while (end > start && edge(parts[end - 1])) end -= 1;
+  const label = parts.slice(start, end);
+  const composite = label.some((part) => typeof part !== "string" && typeof part !== "number");
+  return composite ? { before: parts.slice(0, start), label, after: parts.slice(end) } : null;
+}
+var reportedUnavailableLink = false;
+function reportUnavailableLink() {
+  if (process.env.NODE_ENV === "production" || reportedUnavailableLink) return;
+  reportedUnavailableLink = true;
+  console.error(
+    JSON.stringify(
+      {
+        component: "Button",
+        error: "UNAVAILABLE_LINK",
+        prop: "disabled",
+        received: "asChild with disabled",
+        suggestion: "A disabled asChild link is aria-disabled and cancels clicks and middle clicks, but a browser still offers its address (open in a new tab, copy link), and a child that sets its own props can override the block. Show navigation that is not available yet as plain text, and render the link when it is."
+      },
+      null,
+      2
+    )
+  );
+}
+function stopActivation(event) {
+  event.preventDefault();
+  event.stopPropagation();
+}
+var Button = forwardRef((allProps, ref) => {
+  const {
+    className,
+    variant,
+    size,
+    asChild = false,
+    motion = "auto",
+    disabled,
+    children,
+    ...props
+  } = allProps;
+  const motionState = useMotion(motion, "Button");
+  const keepFocusable = useFocusableWhenUnavailable();
+  const Comp = asChild ? Slot : "button";
+  if (process.env.NODE_ENV !== "production") {
+    devValidate("Button", ButtonManifest.Button.props, { ...allProps });
+  }
+  const unavailable = disabled === true;
+  const native = unavailable && !asChild && !keepFocusable;
+  const blocked = unavailable && !native;
+  if (blocked && asChild) reportUnavailableLink();
+  const own = blocked ? {
+    ...props,
+    onClick: void 0,
+    onClickCapture: stopActivation,
+    onAuxClickCapture: stopActivation
+  } : props;
+  const split = asChild ? null : splitLabel(children);
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      type: asChild ? void 0 : "button",
+      className: clsx(
+        buttonStyles({ variant: variant ?? void 0, size: size ?? void 0 }),
+        className
+      ),
+      ...own,
+      ...composeMotionHandlers(motionState.props, own),
+      ...native ? { disabled: true } : {},
+      ...blocked ? {
+        "aria-disabled": true,
+        "data-disabled": "true",
+        ...asChild && !keepFocusable ? { tabIndex: -1 } : {}
+      } : {},
+      children: split ? /* @__PURE__ */ jsxs(Fragment2, { children: [
+        split.before,
+        /* @__PURE__ */ jsx("span", { "data-oprt-button-label": "", className: "min-w-0 [&_svg]:inline-block", children: split.label }),
+        split.after
+      ] }) : children
+    }
+  );
+});
+Button.displayName = "Button";
+export {
+  Button
+};

package/dist/Button/Button.manifest.js

@@ -0,0 +1,36 @@
+// src/Button/Button.manifest.ts
+var ButtonManifest = {
+  Button: {
+    description: "Primary interactive element for triggering actions. Short action labels display uppercase. A label that does not fit wraps and centers, and the button grows with it; a one-line button keeps its exact height, also in a row that stretches its items. A label made of text and an element (an identifier in code, a case-sensitive name in a span) wraps as one block, and an icon at either end stays beside it, drawn at 12, 16 and 20 px for sm, md and lg so it fits the one-line height. Code and kbd retain their casing, and code breaks anywhere; wrap other case-sensitive names or IDs in a child with normal-case tracking-normal oprt-wrap-anywhere. Shape: the primary variant carries a cut top-right corner at rest, and every enabled button takes a second cut at the opposite corner on hover, press and keyboard focus; an armed danger button fills with hazard stripes; segments of an attached ButtonGroup stay square. The fill and edge are drawn by a layer clipped to that shape, so bg-* and border-* classes do not change them: set --oprt-cut-fill and --oprt-cut-edge instead. The oprt-cut-none class squares off one button, or every button inside the element that carries it.",
+    props: {
+      motion: {
+        type: "enum",
+        values: ["auto", "none"],
+        default: "auto",
+        description: "Tactile pointer/touch feedback. None disables motion; keyboard and system reduced motion are always immediate."
+      },
+      variant: {
+        type: "enum",
+        values: ["primary", "secondary", "tertiary", "danger", "ghost"],
+        default: "primary"
+      },
+      size: { type: "enum", values: ["sm", "md", "lg"], default: "md" },
+      disabled: {
+        type: "boolean",
+        default: false,
+        description: "Unavailable: dim text on the control outline, no hover, and it never activates. A Button that is a Tooltip or Popover trigger with an explanation stays in the Tab order (aria-disabled) so the explanation can be reached."
+      },
+      asChild: {
+        type: "boolean",
+        default: false,
+        description: "Renders the child element in place of the button, for example a link; the child's own content is not laid out for you, so put a label made of text and an element in one span. A disabled asChild Button is aria-disabled, leaves the Tab order and blocks the click and the middle click, but a browser still offers the link's address (open in a new tab, copy link) and a child can override the block: show unavailable navigation as plain text."
+      }
+    },
+    composable_with: ["ButtonGroup", "Toolbar", "CardFooter"],
+    never_inside: ["Button", "Badge"],
+    example: '<Button variant="primary" size="md">DEPLOY</Button>'
+  }
+};
+export {
+  ButtonManifest
+};

package/dist/Button/index.js

@@ -0,0 +1,7 @@
+// src/Button/index.ts
+import { Button } from "./Button.js";
+import { ButtonManifest } from "./Button.manifest.js";
+export {
+  Button,
+  ButtonManifest
+};

package/dist/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,60 @@
+"use client";
+
+// src/ButtonGroup/ButtonGroup.tsx
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { ButtonGroupManifest } from "./ButtonGroup.manifest.js";
+import { devValidate } from "../_internal/devValidate.js";
+import { jsx } from "react/jsx-runtime";
+var groupStyles = cva("inline-flex max-w-full", {
+  variants: {
+    orientation: {
+      horizontal: "flex-wrap",
+      vertical: "flex-col"
+    },
+    attached: {
+      // Negative 1px margins collapse adjacent 1px borders into a single shared edge (the
+      // compound variants below). hover/focus-visible get relative+z-10 so the active
+      // border/ring is painted on top and never clipped by the neighboring segment, on any row.
+      // A Button has a height of its own so that a stretching row cannot grow a one-line button;
+      // the segments of an attached group are the exception, and take the height of the tallest
+      // segment in their row so the shared edges run straight.
+      // Joined segments are one object, and a cut corner inside the group would notch it, so the
+      // group turns the cut off for everything in it (`oprt-cut-none`, see the cut recipe).
+      true: "oprt-cut-none [&>*]:h-auto [&>*:hover]:relative [&>*:focus-visible]:relative [&>*:hover]:z-10 [&>*:focus-visible]:z-10",
+      false: "gap-1u"
+    }
+  },
+  compoundVariants: [
+    // Every segment, not only the non-first ones, takes the negative margin: the first of each row
+    // then shares its top edge with the row above, and the 1px of padding keeps the first row and
+    // the first column flush with the group's own edge instead of one pixel outside it.
+    { orientation: "horizontal", attached: true, class: "pl-px pt-px [&>*]:-ml-px [&>*]:-mt-px" },
+    { orientation: "vertical", attached: true, class: "pt-px [&>*]:-mt-px" }
+  ],
+  defaultVariants: { orientation: "horizontal", attached: true }
+});
+var ButtonGroup = forwardRef((allProps, ref) => {
+  const { className, orientation = "horizontal", attached = true, ...props } = allProps;
+  if (process.env.NODE_ENV !== "production") {
+    devValidate("ButtonGroup", ButtonGroupManifest.ButtonGroup.props, { ...allProps });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "group",
+      className: clsx(
+        // A null enum value would mean "no variant", which is no layout at all.
+        groupStyles({ orientation: orientation ?? void 0, attached: attached ?? void 0 }),
+        className
+      ),
+      ...props
+    }
+  );
+});
+ButtonGroup.displayName = "ButtonGroup";
+export {
+  ButtonGroup
+};

package/dist/ButtonGroup/ButtonGroup.manifest.js

@@ -0,0 +1,22 @@
+// src/ButtonGroup/ButtonGroup.manifest.ts
+var ButtonGroupManifest = {
+  ButtonGroup: {
+    description: "Segmented row or column of Buttons with collapsed shared borders. A row that does not fit wraps onto more rows and grows taller, so no action is hidden; attached segments keep their shared edges across rows and take the height of the tallest segment in their row, so the edges run straight when one label wrapped; in a detached group each segment keeps its own height. A column stacks. Attached segments stay square: the group turns off the cut a Button otherwise carries.",
+    props: {
+      orientation: {
+        type: "enum",
+        values: ["horizontal", "vertical"],
+        default: "horizontal"
+      },
+      attached: { type: "boolean", default: true }
+    },
+    slots: {
+      children: { type: "Button", required: true }
+    },
+    composable_with: ["Toolbar", "CardFooter"],
+    example: "<ButtonGroup>\n  <Button>COPY</Button>\n  <Button>PASTE</Button>\n</ButtonGroup>"
+  }
+};
+export {
+  ButtonGroupManifest
+};

package/dist/ButtonGroup/index.js

@@ -0,0 +1,7 @@
+// src/ButtonGroup/index.ts
+import { ButtonGroup } from "./ButtonGroup.js";
+import { ButtonGroupManifest } from "./ButtonGroup.manifest.js";
+export {
+  ButtonGroup,
+  ButtonGroupManifest
+};

package/dist/Calendar/Calendar.js

@@ -0,0 +1,106 @@
+"use client";
+
+// src/Calendar/Calendar.tsx
+import { forwardRef, useId, useMemo } from "react";
+import { GregorianCalendar, toCalendar } from "@internationalized/date";
+import {
+  Button,
+  Calendar as AriaCalendar,
+  CalendarCell,
+  CalendarGrid,
+  CalendarGridBody,
+  CalendarGridHeader,
+  CalendarHeaderCell,
+  Heading
+} from "react-aria-components";
+import { cva } from "class-variance-authority";
+import clsx from "clsx";
+import { ChevronLeft, ChevronRight } from "@oprt/icons";
+import { dateConfiguration, dateWithinBounds } from "../_internal/date.js";
+import { definedOnly } from "../_internal/aria.js";
+import { useHydrationRoot } from "../_internal/hydration.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var calendarStyles = cva(
+  "flex w-fit min-w-[calc(7*var(--oprt-space-3))] max-w-full flex-col gap-2u font-sans text-oprt-base text-oprt-text"
+);
+var CALENDAR_ROOT = "flex w-[calc(7*var(--oprt-space-4))] min-w-[calc(7*var(--oprt-space-3))] max-w-full flex-col gap-2u";
+var FOCUS_OUTLINE = "focus-visible:outline-hidden forced-colors:data-[focus-visible]:outline-solid forced-colors:data-[focus-visible]:outline-2 forced-colors:data-[focus-visible]:outline-[CanvasText]";
+var navigationStyles = `flex min-h-3u min-w-3u shrink-0 items-center justify-center border border-oprt-border-control bg-oprt-surface-2 text-oprt-text ${FOCUS_OUTLINE} forced-colors:data-[focus-visible]:outline-offset-2 data-[hovered]:border-oprt-accent data-[focus-visible]:border-oprt-border-focus data-[focus-visible]:shadow-oprt-focus data-[disabled]:cursor-not-allowed data-[disabled]:text-oprt-text-dim`;
+var dayStyles = `flex aspect-square w-full min-h-3u min-w-3u items-center justify-center border border-transparent font-sans text-oprt-base font-medium tabular-nums ${FOCUS_OUTLINE} forced-colors:data-[focus-visible]:-outline-offset-2 data-[outside-month]:text-oprt-text-dim data-[selected]:border-oprt-accent data-[selected]:bg-oprt-surface-3 data-[selected]:font-semibold data-[hovered]:border-oprt-border data-[focus-visible]:border-oprt-border-focus data-[focus-visible]:shadow-oprt-focus data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 forced-colors:data-[selected]:border-[Highlight]`;
+function CalendarContent() {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2u", children: [
+      /* @__PURE__ */ jsx(Button, { slot: "previous", className: navigationStyles, children: /* @__PURE__ */ jsx(ChevronLeft, { size: 16 }) }),
+      /* @__PURE__ */ jsx(Heading, { className: "m-0 text-center font-sans text-oprt-base font-semibold uppercase tracking-oprt-caps" }),
+      /* @__PURE__ */ jsx(Button, { slot: "next", className: navigationStyles, children: /* @__PURE__ */ jsx(ChevronRight, { size: 16 }) })
+    ] }),
+    /* @__PURE__ */ jsxs(CalendarGrid, { className: "w-full table-fixed border-collapse", weekdayStyle: "short", children: [
+      /* @__PURE__ */ jsx(CalendarGridHeader, { children: (day) => /* @__PURE__ */ jsx(CalendarHeaderCell, { className: "p-0 font-medium text-oprt-text-dim", children: day }) }),
+      /* @__PURE__ */ jsx(CalendarGridBody, { children: (date) => /* @__PURE__ */ jsx(CalendarCell, { date, className: dayStyles }) })
+    ] })
+  ] });
+}
+var Calendar = forwardRef(
+  ({
+    label,
+    value,
+    onValueChange,
+    min,
+    max,
+    disabled = false,
+    readOnly = false,
+    required = false,
+    id,
+    className
+  }, ref) => {
+    const generated = useId();
+    const errorId = `${id ?? generated}-error`;
+    const hydration = useHydrationRoot(id);
+    const config = useMemo(() => dateConfiguration(value, min, max), [value, min, max]);
+    const error = config.error ?? (required && value === null ? "A date is required." : null);
+    return (
+      // The key remounts the error with the calendar, so both take the client's ids when hydration
+      // disagrees with the server markup and the calendar's description still names the error
+      // (Calendar-R1).
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ...hydration.probeProps,
+          className: clsx(calendarStyles(), className),
+          children: [
+            /* @__PURE__ */ jsx(
+              AriaCalendar,
+              {
+                ...definedOnly({ id, "aria-describedby": error ? errorId : void 0 }),
+                ref,
+                "aria-label": label,
+                value: config.date,
+                minValue: config.min,
+                maxValue: config.max,
+                isDisabled: disabled || config.invalidBounds,
+                isReadOnly: readOnly,
+                isInvalid: !!error,
+                createCalendar: () => new GregorianCalendar(),
+                className: CALENDAR_ROOT,
+                onChange: (next) => {
+                  const date = toCalendar(next, new GregorianCalendar());
+                  if (!disabled && !readOnly && !config.invalidBounds && dateWithinBounds(date, config.min, config.max))
+                    onValueChange(date.toString());
+                },
+                children: /* @__PURE__ */ jsx(CalendarContent, {})
+              }
+            ),
+            error && /* @__PURE__ */ jsx("p", { id: errorId, className: "m-0 max-w-full text-oprt-error", children: error })
+          ]
+        },
+        hydration.key
+      )
+    );
+  }
+);
+Calendar.displayName = "Calendar";
+export {
+  CALENDAR_ROOT,
+  Calendar,
+  CalendarContent
+};

package/dist/Calendar/Calendar.manifest.js

@@ -0,0 +1,32 @@
+// src/Calendar/Calendar.manifest.ts
+var CalendarManifest = {
+  Calendar: {
+    description: "Controlled Gregorian calendar with date-only strings, keyboard day/month navigation, strict date bounds and visible configuration errors.",
+    props: {
+      label: { type: "string", required: true },
+      value: {
+        type: "string",
+        required: true,
+        description: "YYYY-MM-DD in years 0001\u20139999, or null for no selection. Never an instant or a local Date."
+      },
+      onValueChange: {
+        type: "function",
+        required: true,
+        description: "Requests the chosen date-only string. The parent accepts it through value."
+      },
+      min: { type: "string", description: "Inclusive YYYY-MM-DD lower bound." },
+      max: { type: "string", description: "Inclusive YYYY-MM-DD upper bound." },
+      disabled: { type: "boolean", default: false },
+      readOnly: { type: "boolean", default: false },
+      required: { type: "boolean", default: false },
+      id: { type: "string" },
+      className: { type: "string" }
+    },
+    composable_with: ["FormSection", "DatePicker"],
+    never_inside: ["Button"],
+    example: '<Calendar label="Inspection date" value={date} onValueChange={setDate} min="2026-01-01" max="2026-12-31" />'
+  }
+};
+export {
+  CalendarManifest
+};

package/dist/Calendar/index.js

@@ -0,0 +1,7 @@
+// src/Calendar/index.ts
+import { Calendar } from "./Calendar.js";
+import { CalendarManifest } from "./Calendar.manifest.js";
+export {
+  Calendar,
+  CalendarManifest
+};

package/dist/Card/Card.js

@@ -0,0 +1,70 @@
+"use client";
+
+// src/Card/Card.tsx
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+var Card = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: clsx(
+      "flex min-w-0 flex-col bg-oprt-surface-1 border border-oprt-border font-sans",
+      className
+    ),
+    ...props
+  }
+));
+Card.displayName = "Card";
+var CardHeader = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: clsx(
+        // A long title takes its own row and wraps; a badge or button that does not fit beside it
+        // drops to the next one. The gap keeps them apart in either case.
+        "flex min-w-0 flex-wrap items-center justify-between gap-x-2u gap-y-1u px-3u py-2u border-b border-oprt-border oprt-wrap-anywhere text-oprt-sm uppercase tracking-oprt-sm text-oprt-text [&_code]:normal-case [&_code]:tracking-normal [&_kbd]:normal-case [&_kbd]:tracking-normal",
+        className
+      ),
+      ...props
+    }
+  )
+);
+CardHeader.displayName = "CardHeader";
+var CardBody = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: clsx(
+        "min-w-0 break-words px-3u py-3u text-oprt-md normal-case text-oprt-text",
+        className
+      ),
+      ...props
+    }
+  )
+);
+CardBody.displayName = "CardBody";
+var CardFooter = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: clsx(
+        // Actions that do not fit side by side wrap onto further rows, right-aligned: a plain row
+        // ran off its start edge, where nothing can scroll to it.
+        "flex flex-wrap items-center justify-end gap-2u px-3u py-2u border-t border-oprt-border",
+        className
+      ),
+      ...props
+    }
+  )
+);
+CardFooter.displayName = "CardFooter";
+export {
+  Card,
+  CardBody,
+  CardFooter,
+  CardHeader
+};

package/dist/Card/Card.manifest.js

@@ -0,0 +1,57 @@
+// src/Card/Card.manifest.ts
+var CardManifest = {
+  Card: {
+    description: "Bordered surface container. Use with CardHeader, CardBody, CardFooter.",
+    props: {},
+    slots: {
+      children: { type: "CardHeader | CardBody | CardFooter", required: true }
+    },
+    composable_with: ["DataTable", "Sidebar"],
+    never_inside: ["Card"],
+    example: "<Card>\n  <CardHeader>STATUS</CardHeader>\n  <CardBody>All systems nominal.</CardBody>\n</Card>"
+  },
+  CardHeader: {
+    description: "Uppercase card title row, allows text + Badge + small buttons. Code and kbd retain their casing; wrap other names, IDs, or supporting text in a child with normal-case tracking-normal.",
+    props: {},
+    slots: {
+      children: { type: "text | Badge | Button(size=sm)", required: false }
+    },
+    composable_with: ["Card"],
+    never_inside: ["CardHeader", "CardBody", "CardFooter"],
+    example: "<CardHeader>STATUS</CardHeader>"
+  },
+  CardBody: {
+    description: "Card body slot \u2014 arbitrary content, preserving original casing.",
+    props: {},
+    slots: {
+      children: { type: "any", required: false }
+    },
+    composable_with: ["Card"],
+    never_inside: ["CardHeader", "CardBody", "CardFooter"],
+    example: "<CardBody>All systems nominal.</CardBody>"
+  },
+  CardFooter: {
+    description: "Card footer slot \u2014 action row, allows Button and ButtonGroup.",
+    props: {},
+    slots: {
+      children: { type: "Button | ButtonGroup", required: false }
+    },
+    composable_with: ["Card"],
+    never_inside: ["CardHeader", "CardBody", "CardFooter"],
+    example: '<CardFooter><Button variant="primary">DEPLOY</Button></CardFooter>'
+  }
+};
+var CardCompositionRules = {
+  Card: {
+    allowed_children: ["CardHeader", "CardBody", "CardFooter"],
+    children: {
+      CardHeader: { allowed_children: ["text", "Badge", "Button"] },
+      CardBody: { allowed_children: ["any"] },
+      CardFooter: { allowed_children: ["Button", "ButtonGroup"] }
+    }
+  }
+};
+export {
+  CardCompositionRules,
+  CardManifest
+};

package/dist/Card/index.js

@@ -0,0 +1,16 @@
+// src/Card/index.ts
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  CardFooter
+} from "./Card.js";
+import { CardManifest, CardCompositionRules } from "./Card.manifest.js";
+export {
+  Card,
+  CardBody,
+  CardCompositionRules,
+  CardFooter,
+  CardHeader,
+  CardManifest
+};