@stealthscale/component-surfaces 0.0.1 → 0.1.2

package/dist/pages/card/card.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"AsideProps": {"conditions": 284, "foreign": 1041}, "ContentProps": {"conditions": 284, "foreign": 1041}, "DescriptionProps": {"conditions": 284, "foreign": 1041}, "FooterProps": {"conditions": 284, "foreign": 1041}, "HeaderProps": {"conditions": 284, "foreign": 1041}, "IndicatorProps": {"conditions": 284, "foreign": 1041}, "MediaProps": {"conditions": 284, "foreign": 1041}, "OverlayProps": {"conditions": 284, "foreign": 1041}, "RootProps": {"conditions": 284, "foreign": 1041}, "SectionProps": {"conditions": 284, "foreign": 1041}, "TitleProps": {"conditions": 284, "foreign": 1041}};
+export const parts = {"AsideProps": [], "ContentProps": [], "DescriptionProps": [], "FooterProps": [], "HeaderProps": [], "IndicatorProps": [], "MediaProps": [], "OverlayProps": [], "RootProps": [{"accepts": "boolean", "fallback": "", "kind": "variant", "name": "disabled", "refers": [], "required": false, "says": "Unavailable look: the card at the disabled opacity, with no pointer events on any band."}, {"accepts": "boolean", "fallback": "", "kind": "variant", "name": "divided", "refers": [], "required": false, "says": "Rules under the header and above the footer."}, {"accepts": "\"glow\"", "fallback": "", "kind": "variant", "name": "effect", "refers": [], "required": false, "says": "Halo around the card in the palette's solid at half opacity."}, {"accepts": "boolean", "fallback": "", "kind": "variant", "name": "interactive", "refers": [], "required": false, "says": "Whole-card press through the link in the title."}, {"accepts": "Justify", "fallback": "", "kind": "variant", "name": "justify", "refers": ["kit.Justify"], "required": false, "says": "Alignment of the footer's controls along the row."}, {"accepts": "\"fade\" | \"reveal\" | \"rise\"", "fallback": "", "kind": "variant", "name": "motion", "refers": [], "required": false, "says": ""}, {"accepts": "\"horizontal\" | \"vertical\"", "fallback": "", "kind": "variant", "name": "orientation", "refers": [], "required": false, "says": "Placement of the picture: bled across the top of a vertical card, or along the leading third of a horizontal one."}, {"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": "Palette of the card's tint, border, focus ring and glow."}, {"accepts": "Corner", "fallback": "", "kind": "variant", "name": "radius", "refers": ["kit.Corner"], "required": false, "says": ""}, {"accepts": "boolean", "fallback": "", "kind": "variant", "name": "scrim", "refers": [], "required": false, "says": "Scrim behind the overlay: 64% black across the lower half of the picture, fading to transparent at the top."}, {"accepts": "Step", "fallback": "", "kind": "variant", "name": "size", "refers": ["kit.Step"], "required": false, "says": "Inset, gap, title style, header gaps and indicator media at each size."}, {"accepts": "\"elevated\" | \"glass\" | \"outline\" | \"plain\" | \"subtle\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": "Treatment of the panel."}], "SectionProps": [], "TitleProps": []};
+export const shapes = {"kit.Justify": [{"accepts": "", "name": "\"around\"", "says": ""}, {"accepts": "", "name": "\"between\"", "says": ""}, {"accepts": "", "name": "\"center\"", "says": ""}, {"accepts": "", "name": "\"end\"", "says": ""}, {"accepts": "", "name": "\"evenly\"", "says": ""}, {"accepts": "", "name": "\"start\"", "says": ""}], "kit.Corner": [{"accepts": "", "name": "\"full\"", "says": ""}, {"accepts": "", "name": "\"l1\"", "says": ""}, {"accepts": "", "name": "\"l2\"", "says": ""}, {"accepts": "", "name": "\"l3\"", "says": ""}], "kit.Step": [{"accepts": "", "name": "\"lg\"", "says": ""}, {"accepts": "", "name": "\"md\"", "says": ""}, {"accepts": "", "name": "\"sm\"", "says": ""}, {"accepts": "", "name": "\"xl\"", "says": ""}]};

package/dist/pages/pages.json

@@ -0,0 +1,26 @@
+{
+  "format": 1,
+  "pages": [
+    {
+      "about": "card.about",
+      "group": "",
+      "id": "components/surfaces/card",
+      "module": "card/card.js",
+      "namespace": "",
+      "props": "card/card.props.js",
+      "specimen": "src/card/card.specimen.tsx",
+      "title": "card.title"
+    }
+  ],
+  "requires": {
+    "@stealthscale/component-actions": "^0.2.0",
+    "@stealthscale/component-data": "^0.2.0",
+    "@stealthscale/component-disclosure": "^0.2.0",
+    "@stealthscale/component-feedback": "^0.2.0",
+    "@stealthscale/component-forms": "^0.3.0",
+    "@stealthscale/component-navigation": "^0.3.0",
+    "@stealthscale/component-typography": "^0.3.0",
+    "@stealthscale/specimen": "^0.3.0",
+    "lucide-react": "^1.52.0"
+  }
+}

package/dist/{recipe-BSMN8WoK.js → recipes-DG4wIA5R.js}

@@ -197,8 +197,10 @@ function sectioned() {
 *   The root is a flex column in both orientations. In the horizontal orientation the picture is
 *   positioned along the leading third and the root pads its start past it, so every other band
 *   still stacks in one column. The header is a three-column grid: the indicator and the aside each
-*   span the title and the description rows and are centred on them. The root clips its content, so
-*   a bled picture takes the root's corners.
+*   span the title and the description rows and are centred on them. The middle column shrinks
+*   with the card, so a word or a code span wider than the card does not widen the column, and the
+*   title and the description wrap inside the card. The root clips its content, so a bled picture
+*   takes the root's corners.
 */
 /**
 * Width of the picture along the leading side of a horizontal card.
@@ -227,9 +229,9 @@ const recipe = defineSlotRecipe({
 			gap: dense("{spacing.gap.sm}")
 		},
 		description: {
+			textStyle: "body.sm",
 			color: "fg.muted",
-			gridColumn: "2",
-			textStyle: "body.sm"
+			gridColumn: "2"
 		},
 		footer: {
 			alignItems: "center",
@@ -240,7 +242,7 @@ const recipe = defineSlotRecipe({
 		header: {
 			alignItems: "center",
 			display: "grid",
-			gridTemplateColumns: "auto 1fr auto"
+			gridTemplateColumns: "auto minmax(0, 1fr) auto"
 		},
 		indicator: {
 			alignItems: "center",
@@ -490,8 +492,8 @@ const recipe = defineSlotRecipe({
 				boxShadow: "md"
 			} },
 			glass: { root: {
-				boxShadow: "none",
-				layerStyle: "glass"
+				layerStyle: "glass",
+				boxShadow: "none"
 			} },
 			outline: { root: { boxShadow: "none" } },
 			plain: { root: {

package/dist/shared-qwSz4fS5.js

@@ -0,0 +1,124 @@
+import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
+import { t as recipe } from "./recipes-DG4wIA5R.js";
+import { createSlotRecipeContext } from "@stealthscale/theme";
+import { createElement } from "react";
+//#region src/card/context.ts
+/**
+* Binds the card slot recipe to the React context its parts share.
+*
+* @remarks
+*   The binding is a separate module from `recipe.ts`, because an application's style compiler
+*   imports the recipe at build time without the React runtime.
+*/
+/**
+* Factories that bind the root, which resolves the variants, and every other part, which reads
+* them.
+*/
+const { withContext, withProvider } = createSlotRecipeContext(recipe);
+//#endregion
+//#region src/card/aside.ts
+/**
+* Renders the aside slot at the end of the header.
+*/
+const Aside = withContext("div", "aside");
+//#endregion
+//#region src/card/content.ts
+/**
+* Renders the content slot.
+*/
+const Content = withContext("div", "content");
+//#endregion
+//#region src/card/description.ts
+/**
+* Renders the description slot under the title.
+*/
+const Description = withContext("p", "description");
+//#endregion
+//#region src/card/footer.ts
+/**
+* Renders the footer slot.
+*/
+const Footer = withContext("div", "footer");
+//#endregion
+//#region src/card/header.ts
+/**
+* Renders the header slot.
+*/
+const Header = withContext("div", "header");
+//#endregion
+//#region src/card/indicator.ts
+/**
+* Renders the indicator slot at the start of the header.
+*/
+const Indicator = withContext("div", "indicator");
+//#endregion
+//#region src/card/media.ts
+/**
+* Renders the media slot.
+*/
+const Media = withContext("div", "media");
+//#endregion
+//#region src/card/overlay.ts
+/**
+* Renders the overlay slot.
+*/
+const Overlay = withContext("div", "overlay");
+//#endregion
+//#region src/card/root.ts
+/**
+* Renders the panel that contains every band of a card.
+*
+* @remarks
+*   The element is an `article`, which a screen reader lists and moves between. Name it: point
+*   `aria-labelledby` at the title's `id`, or pass `aria-label`. Pass `as="div"` for a card that is
+*   part of its surroundings. The root resolves every variant, and the other parts read them from
+*   context.
+*/
+/**
+* Renders the root slot and provides the recipe's variants to the other parts.
+*/
+const Styled = withProvider("article", "root");
+/**
+* Renders the root, with `aria-disabled` on a disabled card.
+*
+* @remarks
+*   `aria-disabled` announces the card's content as unavailable and marks it inactive for contrast
+*   checks. An `aria-disabled` the caller passes takes precedence.
+* @param props - The recipe's variants and the props of an `article`.
+* @returns The root element.
+*/
+function Root(props) {
+	return createElement(Styled, props.disabled === true ? {
+		"aria-disabled": true,
+		...props
+	} : props);
+}
+//#endregion
+//#region src/card/section.ts
+/**
+* Renders the section slot.
+*/
+const Section = withContext("div", "section");
+//#endregion
+//#region src/card/title.ts
+/**
+* Renders the title slot in the header grid's second column.
+*/
+const Title = withContext("h3", "title");
+//#endregion
+//#region src/card/index.ts
+var card_exports = /* @__PURE__ */ __exportAll({
+	Aside: () => Aside,
+	Content: () => Content,
+	Description: () => Description,
+	Footer: () => Footer,
+	Header: () => Header,
+	Indicator: () => Indicator,
+	Media: () => Media,
+	Overlay: () => Overlay,
+	Root: () => Root,
+	Section: () => Section,
+	Title: () => Title
+});
+//#endregion
+export { Overlay as a, Header as c, Content as d, Aside as f, Root as i, Footer as l, Title as n, Media as o, Section as r, Indicator as s, card_exports as t, Description as u };

package/dist/theme.js

@@ -1,4 +1,4 @@
-import { t as recipe } from "./recipe-BSMN8WoK.js";
+import { t as recipe } from "./recipes-DG4wIA5R.js";
 import { definePreset } from "@stealthscale/theme/authoring";
 //#region src/theme.ts
 /**

package/locales/en/specimen/card.json

@@ -0,0 +1,156 @@
+{
+  "about": "A panel of bands: a picture, a header, content or sections, and a footer of controls.",
+  "article": {
+    "date": "Published on 12 September",
+    "read": "6 min read",
+    "summary": "Batching by currency cut settlement from five days to two. The ledger balances at every step.",
+    "title": "How we settle payouts in two days",
+    "topic": "Payments"
+  },
+  "balance": {
+    "help": "Up 8% on August",
+    "label": "Outstanding",
+    "value": "£12,480"
+  },
+  "disabled": {
+    "about": "An interactive card at rest and disabled. A disabled card takes no pointer events.",
+    "title": "Disabled"
+  },
+  "divided": {
+    "about": "Rules between the header, the content and the footer, beside a card without them.",
+    "title": "Divided"
+  },
+  "effect": {
+    "about": "The glow around a card, in the info palette.",
+    "title": "Effect"
+  },
+  "expandable": {
+    "amount": "£3,240 to Northwind Ltd",
+    "show": "Show the three transfers",
+    "title": "Payout 1093",
+    "transfers": {
+      "first": "12 September · £1,200",
+      "second": "14 September · £1,040",
+      "third": "16 September · £1,000"
+    }
+  },
+  "interactive": {
+    "about": "A card whose whole face follows the link in its title, beside a static card with the same link.",
+    "title": "Interactive"
+  },
+  "invoice": {
+    "issued": "Issued on 2 September",
+    "lines": "Three lines, one unbilled.",
+    "more": "More actions for invoice 4821",
+    "remind": "Remind",
+    "send": "Send",
+    "title": "Invoice 4821"
+  },
+  "justify": {
+    "about": "Each alignment of the footer's controls.",
+    "title": "Footer alignment"
+  },
+  "loading": {
+    "label": "Loading a profile"
+  },
+  "motion": {
+    "about": "How the card enters the page. Every motion stops under reduced motion.",
+    "title": "Motion"
+  },
+  "orientation": {
+    "about": "The picture across the top of a vertical card, and along the leading third of a horizontal one.",
+    "title": "Orientation"
+  },
+  "palette": {
+    "about": "Every palette on a subtle balance card, which fills and borders in the palette.",
+    "title": "Palettes"
+  },
+  "plan": {
+    "features": {
+      "exports": "Ledger exports",
+      "payouts": "Unlimited payouts",
+      "reconcile": "Daily reconciliation",
+      "support": "Priority support"
+    },
+    "for": "For teams that reconcile daily",
+    "name": "Growth",
+    "per": "per seat, per month",
+    "popular": "Popular",
+    "price": "£29",
+    "start": "Start a trial"
+  },
+  "product": {
+    "add": "Add to basket",
+    "detail": "Oiled walnut, 32 × 12 cm",
+    "name": "Walnut desk tray",
+    "new": "New",
+    "price": "£48"
+  },
+  "profile": {
+    "bio": "Runs month-end close across four entities and owns the payouts calendar.",
+    "close": "Month-end close",
+    "message": "Message",
+    "name": "Amara Okafor",
+    "payouts": "Payouts",
+    "role": "Finance lead, Lagos",
+    "treasury": "Treasury"
+  },
+  "radius": {
+    "about": "Every corner radius on a medium card.",
+    "title": "Corners"
+  },
+  "scenes": {
+    "article": {
+      "about": "An interactive card with a linked title and a picture, with a badge and a caption over a scrim.",
+      "title": "Article"
+    },
+    "balance": {
+      "about": "A subtle card around a stat.",
+      "title": "Balance"
+    },
+    "expandable": {
+      "about": "A subtle collapsible in the content. Its trigger toggles the list, and the card is static.",
+      "title": "Expandable"
+    },
+    "loading": {
+      "about": "Skeletons in the avatar, the title, the description and the content while the data loads.",
+      "title": "Loading"
+    },
+    "plan": {
+      "about": "An outline card in the primary palette, with a badge in the aside and the features in a section.",
+      "title": "Pricing plan"
+    },
+    "product": {
+      "about": "A picture with a badge in the overlay, a price in the content and one action.",
+      "title": "Product"
+    },
+    "profile": {
+      "about": "A banner picture, an avatar in the indicator, an action in the aside and badges in the footer.",
+      "title": "Profile"
+    },
+    "settings": {
+      "about": "One section per switch. Each rule spans the full width of the card.",
+      "title": "Settings"
+    }
+  },
+  "scrim": {
+    "about": "The overlay's caption over a picture, without and with the scrim behind it.",
+    "title": "Scrim"
+  },
+  "settings": {
+    "about": "Choose what reaches your inbox.",
+    "digest": "Weekly digest",
+    "overdue": "Invoice overdue",
+    "payouts": "Payout settled",
+    "title": "Notifications"
+  },
+  "size": {
+    "about": "Each size sets the inset, the gap, the title style and the indicator's icon.",
+    "title": "Sizes"
+  },
+  "title": "Card",
+  "variant": {
+    "about": "Every look of the panel.",
+    "title": "Looks"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stealthscale/component-surfaces",
-  "version": "0.0.1",
+  "version": "0.1.2",
   "description": "Draws the surface under a thing, and the rule between two of them.",
   "keywords": [
     "card",
@@ -19,6 +19,7 @@
   "files": [
     "dist",
     "LICENSE",
+    "locales",
     "README.md"
   ],
   "type": "module",
@@ -36,29 +37,29 @@
   },
   "devDependencies": {
     "@arethetypeswrong/core": "^0.18",
-    "@stealthscale/component-actions": "^0.1.0",
-    "@stealthscale/component-navigation": "^0.1.0",
-    "@stealthscale/theme": "^0.3.0",
-    "@stealthscale/vite-config": "^0.6.0",
-    "@stealthscale/vite-config-i18n": "^0.1.0",
-    "@stealthscale/vite-config-react": "^0.8.0",
-    "@stealthscale/vite-config-specimen": "^0.1.0",
-    "@stealthscale/vite-config-theme": "^0.1.0",
+    "@stealthscale/component-actions": "^0.2.3",
+    "@stealthscale/component-navigation": "^0.3.2",
+    "@stealthscale/theme": "^0.5.0",
+    "@stealthscale/vite-config": "^0.8.0",
+    "@stealthscale/vite-config-i18n": "^0.2.2",
+    "@stealthscale/vite-config-react": "^0.9.1",
+    "@stealthscale/vite-config-specimen": "^0.3.0",
+    "@stealthscale/vite-config-theme": "^0.3.0",
     "@stealthscale/vite-config-typescript": "^0.3.0",
     "@testing-library/react": "^16.3",
     "@types/react": "^19.3",
     "@types/react-dom": "^19.3",
     "happy-dom": "^20.14",
-    "lucide-react": "^1.48",
-    "oxc-transform-react": "^0.151",
+    "lucide-react": "^1.52",
+    "oxc-transform-react": "^0.153",
     "publint": "^0.3",
     "react": "^19.3",
     "react-dom": "^19.3",
     "typescript": "^7.0",
-    "vitest": "5.0.1"
+    "vitest": "5.0.3"
   },
   "peerDependencies": {
-    "@stealthscale/theme": "^0.3.0",
+    "@stealthscale/theme": "^0.5.0",
     "react": "^19.3"
   },
   "engines": {