@stealthscale/component-media 0.1.0 → 0.2.2

package/dist/theme.js

@@ -1,4 +1,4 @@
-import { a as recipe$5, c as recipe, n as recipe$6, o as recipe$1, r as recipe$2, s as recipe$4, t as recipe$3 } from "./recipe-m4bX2c06.js";
+import { a as recipe$5, c as recipe, n as recipe$6, o as recipe$1, r as recipe$2, s as recipe$4, t as recipe$3 } from "./recipes-CBo6SSP8.js";
 import { definePreset } from "@stealthscale/theme/authoring";
 //#region src/theme.ts
 /**

package/locales/en/specimen/audio.json

@@ -0,0 +1,22 @@
+{
+  "about": "An `audio` element with the browser's controls, as wide as its container. The controls are on unless `controls={false}`, because sound that plays for more than 3 seconds needs a way to stop it (WCAG 1.4.2), and speech needs a transcript in the page beside the player (WCAG 1.2.1).",
+  "chime": {
+    "label": "Notification sound: Two notes",
+    "play": "Play sound",
+    "stop": "Stop sound"
+  },
+  "controlled": {
+    "about": "A notification sound a reader previews from a button. The element's controls are off, so the browser renders nothing for it, and the button calls `play()` and `pause()` through a ref. Its words follow the element's `play`, `pause` and `ended` events.",
+    "title": "Played from a button"
+  },
+  "memo": {
+    "title": "Voice memo from Ada, 13 seconds",
+    "transcript": "Transcript",
+    "words": "Hi, this is Ada from payments. The March payout to Northwind failed, because the bank rejected the account number. I have asked them to confirm it, and I will retry the payout on Monday."
+  },
+  "title": "Audio",
+  "transcribed": {
+    "about": "A voice memo on a support ticket, with the browser's controls and its transcript under a collapsible. The transcript states every word the memo says, so a reader who cannot hear it misses nothing. `preload=\"metadata\"` loads the memo's length and nothing else until the reader presses play.",
+    "title": "With a transcript"
+  }
+}

package/locales/en/specimen/avatar.json

@@ -0,0 +1,71 @@
+{
+  "about": "Shows a person or a thing as a picture, or as initials while the picture is missing, loading or broken. With a name the avatar is an image named by it, so a screen reader hears the name once.",
+  "ada": "Ada Okafor",
+  "badge": {
+    "palette": {
+      "about": "A badge takes its own palette, apart from the avatar's: the eight semantic palettes on a count.",
+      "title": "Badge palettes"
+    },
+    "placement": {
+      "about": "The four corners, in the direction of the text. The badge centres on the point where the avatar's diagonal crosses its rim, so half of it covers the picture.",
+      "title": "Badge corners"
+    },
+    "variant": {
+      "about": "The solid look fills the badge in the palette's solid. The subtle look fills it in the palette's subtle role, which suits an emoji.",
+      "title": "Badge looks"
+    }
+  },
+  "badges": {
+    "about": "Empty, a badge is a status dot. With a count, an emoji or an icon it grows around its content. Its label joins the avatar's description, so a screen reader hears it after the name.",
+    "title": "Badges"
+  },
+  "bram": "Bram Voss",
+  "byline": {
+    "about": "Beside the same name in words, the avatar is hidden from screen readers with `aria-hidden`, so the name is read once. The root is a `span`, so the avatar is placed in the line of text and centred on it. `2xs` is 24px, one line of body text.",
+    "title": "Beside a name"
+  },
+  "cleo": "Cleo Han",
+  "commented": "commented 2 hours ago",
+  "deployBot": "Deploy bot",
+  "devi": "Devi Rao",
+  "effect": {
+    "about": "A halo around the box, in the palette's solid at half opacity. `pulse` animates it, for a person who is speaking, and stops when the reader prefers reduced motion.",
+    "title": "Effects"
+  },
+  "holiday": "On holiday",
+  "more": "3 more",
+  "northwind": "Northwind",
+  "online": "Online",
+  "palette": {
+    "about": "Every palette in every look. The looks are flat, because an avatar is read and not pressed. The palette and the look color the initials and their box, and a loaded picture covers both.",
+    "title": "Palettes and looks"
+  },
+  "pictures": {
+    "about": "A picture covers the box once it loads. Until then, and after it fails, the initials show, so a slow or broken picture never leaves an empty box.",
+    "title": "Pictures and initials"
+  },
+  "presence": {
+    "about": "The dot is 28% of the avatar's side and never under 8px, so one dot fits a 24px avatar in a list and a 56px one on a profile.",
+    "title": "A status at every size"
+  },
+  "services": {
+    "about": "A service or a company takes a square or rounded box, and an icon in place of initials. The box keeps the name for a screen reader.",
+    "title": "Services and companies"
+  },
+  "shape": {
+    "about": "A circle for a person, and a rounded or square box for a company, a service or a bot.",
+    "title": "Shapes"
+  },
+  "size": {
+    "about": "The side is a control height, so an avatar is as tall as a button of its size: 32, 36, 40, 44, 48 and 56px. `2xs` is 24px, for a byline or a list row. The initials take the label style of the same size.",
+    "title": "Sizes"
+  },
+  "team": {
+    "about": "A group overlaps each avatar with the one before it by a quarter of its side and rings each in the panel's ground. The last avatar counts the people left out and is named for them.",
+    "title": "A team"
+  },
+  "title": "Avatar",
+  "unread": "3 unread messages",
+  "verified": "Verified",
+  "warehouse": "Warehouse service"
+}

package/locales/en/specimen/carousel.json

@@ -0,0 +1,74 @@
+{
+  "about": "Shows slides a page at a time in a scroller that snaps: triggers move a page, dots pick one, and a rotation control starts and stops a carousel that plays by itself. Rotation stops when keyboard focus enters, pauses under the pointer and does not start by itself under reduced motion.",
+  "add": "Add to basket",
+  "cards": {
+    "about": "Two cards a page, one card a move, with `slidesPerPage` and `slidesPerMove`. A card out of view is inert, so its button leaves the tab order. The triggers are `aria-disabled` at the ends and keep focus.",
+    "title": "Two cards a page"
+  },
+  "cardsLabel": "Prints",
+  "chooser": "Choose a place",
+  "controlled": {
+    "about": "`page` and `onPageChange` keep the carousel and the segment group above it on the same picture.",
+    "title": "Controlled page"
+  },
+  "controlledLabel": "Places",
+  "controls": {
+    "about": "The controls beside the slides, or over them on `bg.panel` pills.",
+    "title": "Controls"
+  },
+  "gallery": {
+    "about": "Pictures with the triggers and the dots over them, looping, and draggable with the mouse. Focus the scroller or a dot and use the arrow keys, Home and End.",
+    "title": "Gallery"
+  },
+  "galleryLabel": "Landscapes",
+  "goTo": "Go to slide {{page}}",
+  "next": "Next slide",
+  "palette": {
+    "about": "The palette of the dots.",
+    "title": "Palettes"
+  },
+  "pictures": {
+    "dawn": "Purple mountains at dawn",
+    "dunes": "Orange dunes under a pale sky",
+    "harbour": "A harbour skyline at night",
+    "lake": "A lake below green hills",
+    "peaks": "Snowy peaks under a blue sky"
+  },
+  "places": {
+    "dawn": "Mountains",
+    "dunes": "Desert",
+    "lake": "Lake"
+  },
+  "previous": "Previous slide",
+  "price": "€24",
+  "prints": {
+    "dawn": "Dawn print",
+    "dunes": "Dunes print",
+    "harbour": "Harbour print",
+    "lake": "Lake print",
+    "peaks": "Peaks print"
+  },
+  "progress": "{{page}} / {{totalPages}}",
+  "radius": {
+    "about": "The slides' corners, from the tightest to the roundest.",
+    "title": "Corners"
+  },
+  "ratio": {
+    "about": "The scroller's aspect ratio. A picture that is a slide's child covers the slide.",
+    "title": "Ratios"
+  },
+  "rotation": {
+    "about": "`autoplay` rotates every 5 seconds. The rotation control comes first, keyboard focus entering the carousel stops the rotation, the pointer pauses it, and reduced motion keeps it still until the reader starts it.",
+    "title": "Rotation"
+  },
+  "rotationLabel": "Featured landscapes",
+  "slide": "{{index}} of {{count}}",
+  "start": "Start slide rotation",
+  "stop": "Stop slide rotation",
+  "title": "Carousel",
+  "vertical": {
+    "about": "`orientation=\"vertical\"`: the slides run top to bottom in a scroller of the `landscape` ratio, and the up and down keys move a page.",
+    "title": "Vertical"
+  },
+  "verticalLabel": "Landscapes, top to bottom"
+}

package/locales/en/specimen/iframe.json

@@ -0,0 +1,32 @@
+{
+  "about": "An `iframe` for a document the application does not control, sandboxed by default: no scripts, no forms, no popups and no same-origin access. It sends no referrer, loads when the reader scrolls near it, and keeps one of the theme's ratios before its document loads. `title` names it for a screen reader.",
+  "email": {
+    "amount": "€1,240.00 due on 30 March",
+    "body": "Your invoice for March is ready. Pay it by bank transfer or with the card on file.",
+    "from": "Northwind Trading",
+    "heading": "Your March invoice",
+    "title": "Preview of the March invoice email"
+  },
+  "preview": {
+    "about": "A customer's email template in a frame that grants nothing. Its markup and inline styles render as they will in an inbox, and no script in it runs. `ratio=\"portrait\"` gives the preview a tall box.",
+    "title": "Email preview"
+  },
+  "radius": {
+    "about": "The corners of the frame, from the theme's corner tokens.",
+    "title": "Corners"
+  },
+  "ratio": {
+    "about": "The shape the frame keeps before and after its document loads, from the theme's seven ratios, so nothing below it moves when the document arrives. A document taller than its frame scrolls inside it.",
+    "title": "Ratios"
+  },
+  "scripted": {
+    "about": "A partner's currency converter that needs scripts. `sandbox=\"allow-scripts\"` grants that one capability, so the script runs and still cannot read the page around it, submit a form or open a window.",
+    "title": "Granting scripts"
+  },
+  "title": "Iframe",
+  "widget": {
+    "amount": "Amount in USD",
+    "converted": "Converted:",
+    "title": "Currency converter"
+  }
+}

package/locales/en/specimen/image-cropper.json

@@ -0,0 +1,43 @@
+{
+  "about": "Crops a picture: a selection over the part to keep, which a pointer drags and resizes and the arrow keys move, over a picture that zooms, turns, flips and pans. The application reads the crop and exports it as an image.",
+  "banner": {
+    "about": "`fixedCropArea` keeps a 3:1 frame in place. Drag the picture to pan it under the frame, scroll or pinch to zoom, and use the arrow keys on the frame to pan and plus or minus to zoom.",
+    "title": "Fixed frame"
+  },
+  "bannerInstructions": "Use the arrow keys to move the picture under the frame. Press plus or minus to zoom.",
+  "bannerLabel": "Position the banner",
+  "cover": {
+    "about": "A 16:9 crop for a cover photo, with buttons that turn the picture a quarter turn either way, flip it and reset it. The buttons call the api `useImageCropper` returns.",
+    "title": "Cover with rotation and flip"
+  },
+  "coverLabel": "Crop the cover photo",
+  "flip": "Flip horizontally",
+  "free": {
+    "about": "A crop of any shape, at least 80 pixels on each side and at most 200 pixels tall. `onCropChange` reports the crop, and `valueText` writes the value a screen reader hears.",
+    "title": "Free crop"
+  },
+  "label": "Crop the photo",
+  "name": "Ada Okafor",
+  "photo": {
+    "about": "Drag the selection to move it and its handles to resize it. Focus the selection with Tab, move it with the arrow keys, resize it with Alt and an arrow, and zoom with plus and minus. Shift and Control take larger steps.",
+    "title": "Crop"
+  },
+  "profile": {
+    "about": "A round, square crop for a profile picture. `getCroppedImage` exports the crop at 256 pixels, and the avatar shows it.",
+    "title": "Profile picture"
+  },
+  "profileLabel": "Crop your profile picture",
+  "radius": {
+    "about": "The viewport's corners, from the tightest to the roundest. A fully round viewport would clip the selection's corners, so the axis stops at `l3`.",
+    "title": "Corners"
+  },
+  "reset": "Reset",
+  "rotateLeft": "Rotate left",
+  "rotateRight": "Rotate right",
+  "save": "Use as profile picture",
+  "size": "Crop: {{width}} × {{height}} px",
+  "title": "Image cropper",
+  "valueText": "{{width}} by {{height}} pixels",
+  "zoomIn": "Zoom in",
+  "zoomOut": "Zoom out"
+}

package/locales/en/specimen/video.json

@@ -0,0 +1,32 @@
+{
+  "about": "Plays a clip in a frame that keeps its shape before the clip loads. A clip that starts by itself shows its poster to a reader who asks for reduced motion, shows the browser's controls, and plays muted.",
+  "background": {
+    "about": "A decorative loop with `controls={false}` and a button of its own that pauses it, because moving content that starts by itself needs a way to stop it. With reduced motion on, the loop does not start, and the button starts it.",
+    "title": "Background with a pause button"
+  },
+  "fit": {
+    "about": "A 16:9 clip in a square. `cover` fills the square and crops the sides, and `contain` shows the whole frame between `bg.emphasized` bars.",
+    "title": "Fits"
+  },
+  "loop": {
+    "about": "`autoPlay` starts the loop muted, inline and with the browser's controls, so the reader can pause it. Turn on reduced motion in the system settings and reload: the loop shows its poster, and the controls start it.",
+    "title": "Playing by itself"
+  },
+  "loopCaption": "The dashboard updates as each payment settles.",
+  "pause": "Pause the background",
+  "play": "Play the background",
+  "radius": {
+    "about": "The four corners of the theme, from the tightest to the fully round.",
+    "title": "Corners"
+  },
+  "ratio": {
+    "about": "The theme's seven ratios. The element keeps its shape before the clip's metadata loads, so nothing below it moves while the clip loads.",
+    "title": "Ratios"
+  },
+  "title": "Video",
+  "tour": {
+    "about": "The reader starts the clip from the browser's controls, which a keyboard and a screen reader already operate. The figure's caption names the clip.",
+    "title": "Started by the reader"
+  },
+  "tourCaption": "A two-minute tour of the reconciliation screen."
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stealthscale/component-media",
-  "version": "0.1.0",
+  "version": "0.2.2",
   "description": "Renders pictures of people and things, crops pictures, shows slides and plays clips: an avatar, an image cropper, a carousel and a video.",
   "keywords": [
     "avatar",
@@ -22,6 +22,7 @@
   "files": [
     "dist",
     "LICENSE",
+    "locales",
     "README.md"
   ],
   "type": "module",
@@ -38,42 +39,42 @@
     "access": "public"
   },
   "dependencies": {
-    "@zag-js/avatar": "1.44.0",
-    "@zag-js/carousel": "1.44.0",
-    "@zag-js/dom-query": "1.44.0",
-    "@zag-js/image-cropper": "1.44.0",
-    "@zag-js/react": "1.44.0",
-    "@zag-js/types": "1.44.0",
-    "@zag-js/utils": "1.44.0"
+    "@zag-js/avatar": "1.45.0",
+    "@zag-js/carousel": "1.45.0",
+    "@zag-js/dom-query": "1.45.0",
+    "@zag-js/image-cropper": "1.45.0",
+    "@zag-js/react": "1.45.0",
+    "@zag-js/types": "1.45.0",
+    "@zag-js/utils": "1.45.0"
   },
   "devDependencies": {
     "@arethetypeswrong/core": "^0.18",
-    "@stealthscale/component-actions": "^0.1.0",
-    "@stealthscale/component-layout": "^0.1.0",
-    "@stealthscale/hooks": "^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-layout": "^0.2.2",
+    "@stealthscale/hooks": "^0.3.0",
+    "@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/component-actions": "^0.1.0",
-    "@stealthscale/hooks": "^0.1.0",
-    "@stealthscale/theme": "^0.3.0",
+    "@stealthscale/component-actions": "^0.2.3",
+    "@stealthscale/hooks": "^0.3.0",
+    "@stealthscale/theme": "^0.5.0",
     "react": "^19.3"
   },
   "engines": {