feat(drop-zone): add DropZone component with examples and documentation

[rmojica-godaddy]

Summary

Adds a new DropZone component — a standalone drag-and-drop target region for file uploads. It wraps react-aria-components DropZone (v1.18.0), which handles all DnD event management, keyboard accessibility, and screen reader support out of the box.

The component uses a Flex wrapper with as={RACDropZone} to compose Antares layout with RAC behavior, applying a teal dashed border and semi-transparent background from design tokens. Default children render an instructional text label; consumers can replace it with children to communicate accepted file types and size limits.

Changes Made

• src/index.tsx — DropZone component: forwardRef wrapper around RAC DropZone via Flex as={RACDropZone}; re-exports isFileDropItem, isTextDropItem, isDirectoryDropItem
• src/index.module.css — CSS module with design tokens and all RAC data-attribute states: [data-hovered], [data-focused], [data-focus-visible], [data-drop-target], [data-disabled]; TODO markers for hover/focused visual treatment and consumer-controlled invalid/processing states pending Design Foundations spec
• examples/ — default.tsx, disabled.tsx, custom-content.tsx, drop-zone-playground.tsx
• test/drop-zone.browser.test.tsx — 5 browser tests (container render, default text, custom children, no default text with custom children, data-disabled attribute)
• test/drop-zone.node.test.tsx — SSR renderToString snapshot tests for all 4 examples
• drop-zone.stories.tsx — Storybook stories with Props table, Default, CustomContent, Disabled, and Playground
• README.mdx — component docs: installation, props, examples, keyboard/screen reader accessibility, best practices
• packages/@godaddy/antares/index.ts — barrel export

Links

Previews deploy after the PR’s CI finishes — links may 404 until then.

DropZone

• Storybook
• Site

Test Plan

• Open the Storybook preview link below and verify: dashed teal border, rounded corners, tinted background, centered text
• Drag a file over the drop zone → border becomes solid, background intensifies ([data-drop-target])
• Tab to the drop zone → focus ring appears ([data-focus-visible])
• Disabled story renders at 40% opacity with not-allowed cursor
• Custom content story shows custom text, no default "Drop files to upload."
• All browser and SSR tests pass locally (npx vitest run drop-zone)

Checklist

• My code follows the project's code style (biome)
• I have added/updated tests that prove my fix is effective or that my feature works
• I have added/updated documentation (README, Storybook stories, etc.)
• All new and existing tests pass locally
• I have added a changeset (run npm run changeset if this affects packages)
• I have reviewed my own code and commented any complex areas

Pending

• Hover state ([data-hovered]): visual treatment TBD — awaiting Design Foundations spec from Sean Rice
• Focused/pressed state ([data-focused]): visual treatment TBD — awaiting Design Foundations spec
• Invalid state: consumer-controlled (no RAC data attribute); design spec pending
• Processing state: consumer-controlled (no RAC data attribute); design spec pending

[changeset-bot]

🦋 Changeset detected

Latest commit: f97339f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@godaddy/antares	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Docs Site Preview

Preview URL: https://godaddy.github.io/antares/pr-216-site/

Preview will be automatically deleted when this PR is closed.

[github-actions]

📚 Storybook Preview

Preview URL: https://godaddy.github.io/antares/pr-216-storybook/

Preview will be automatically deleted when this PR is closed.