@12-apps/storage 2.3.0 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/storage",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "type": "module",
   "description": "Image uploads that land at YOUR OWN ORIGIN, never at the bucket (12-20). Isomorphic core (format allowlist, upload ceiling, object-key grammar, rendition set, refusal taxonomy, wire schemas), host-mounted backend surface (./server: createApiStorage, the local-disk driver, the image-pipeline port, the orphan reclaim), Hono adapter (./hono), the S3-compatible driver behind its own subpath (./s3) and the bound picker + upload hook (./react). Standardized adoption contract in ADOPTING.md.",
   "exports": {
@@ -43,7 +43,7 @@
     }
   },
   "dependencies": {
-    "@12-apps/ui": "^6.4.0",
+    "@12-apps/ui": "^6.8.0",
     "zod": "^4.3.5"
   },
   "devDependencies": {

package/src/react/create-web-storage.tsx

@@ -86,6 +86,7 @@ export function createWebStorage(config: WebStorageConfig): WebStorage {
           onChange={setImageKey}
           label={messages.fieldLabel}
           removeLabel={messages.fieldRemove}
+          uploadCopy={messages.field}
           helperText={messages.fieldHelper}
         />
       </Stack>

package/src/react/failures.ts

@@ -1,3 +1,5 @@
+import type { UploadButtonCopy } from '@12-apps/ui/copy';
+
 import { ACCEPTED_CONTENT_TYPES } from '../content-types';
 import { megabytes } from '../limits';
 
@@ -109,6 +111,15 @@ export interface WebStorageMessages {
   fieldLabel: string;
   fieldHelper: string;
   fieldRemove: string;
+  /**
+   * What the dropzone ITSELF says — its hint line, its accessible name, and
+   * the three announcements only a screen reader receives. `@12-apps/ui` stopped
+   * shipping English defaults for these, so a host that answers `fieldLabel`
+   * and nothing else would have a dropzone with no name and a silent progress
+   * bar. `buttonLabel` is unused here: `ImageField` passes `fieldLabel` as the
+   * override, because the field's own label is the one a form already names.
+   */
+  field: UploadButtonCopy;
 }
 
 /** Copy that only makes sense with the configured ceiling in it. */

package/src/react/image-field.tsx

@@ -5,6 +5,7 @@ import { Box } from '@12-apps/ui/mui/Box';
 import { Stack } from '@12-apps/ui/mui/Stack';
 import { Text } from '@12-apps/ui/typography/Text';
 import { Button } from '@12-apps/ui/form/Button';
+import type { UploadButtonCopy } from '@12-apps/ui/copy';
 import { UploadButton } from '@12-apps/ui/form/UploadButton';
 
 import { ACCEPTED_CONTENT_TYPES } from '../content-types';
@@ -38,6 +39,13 @@ export interface ImageFieldProps {
   label: string;
   /** The button that clears a chosen image. REQUIRED, for the same reason. */
   removeLabel: string;
+  /**
+   * What the dropzone itself says — the hint under the label, its accessible
+   * name, and the three announcements only a screen reader receives. REQUIRED:
+   * `@12-apps/ui` ships no default copy, so without this the dropzone has no
+   * name and a silent progress bar.
+   */
+  uploadCopy: UploadButtonCopy;
   helperText?: string;
   /** Passed through per upload — `{ optimize: false }` for a rendered canvas. */
   uploadOptions?: UploadOptions;
@@ -92,6 +100,9 @@ export function ImageField(props: BoundImageFieldProps): JSX.Element {
       ) : null}
       <UploadButton
         variant="dropzone"
+        copy={props.uploadCopy}
+        // The field's own label wins over `uploadCopy.buttonLabel`: a form
+        // already names this field, and naming it twice is how the two drift.
         label={props.label}
         accept={ACCEPT}
         disabled={props.disabled || uploader.uploading}

package/src/react/pt-BR.ts

@@ -35,5 +35,18 @@ export function PT_BR_WEB_STORAGE_MESSAGES(
     fieldLabel: 'Foto do produto',
     fieldHelper: 'A imagem é reduzida no navegador antes do envio.',
     fieldRemove: 'Remover imagem',
+    field: {
+      // `buttonLabel` is never read here — `ImageField` overrides it with
+      // `fieldLabel`. It is still answered, because the type is the whole of
+      // what `UploadButton` may render and a partial answer is not a pack.
+      buttonLabel: 'Foto do produto',
+      dropzoneHint: 'Solte a imagem aqui ou clique para escolher',
+      dropzoneRole: (label) => `Área de upload de imagem. ${label}`,
+      uploading: 'Enviando…',
+      dropReady: 'Imagem pronta para soltar',
+      percentUploaded: (percent) => `${percent}% enviado`,
+      uploadInProgress: (percent) => `Envio em andamento: ${percent}%`,
+      errorAnnouncement: (message) => `Erro: ${message}`,
+    },
   };
 }