@hyphen/hyphen-components 6.0.0 → 6.1.0

package/dist/components/AspectRatio/AspectRatio.d.ts

@@ -0,0 +1,3 @@
+import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
+declare const AspectRatio: import("react").ForwardRefExoticComponent<AspectRatioPrimitive.AspectRatioProps & import("react").RefAttributes<HTMLDivElement>>;
+export { AspectRatio };

package/dist/components/AspectRatio/AspectRatio.stories.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { Meta } from '@storybook/react-vite';
+import { AspectRatio } from './AspectRatio';
+declare const meta: Meta<typeof AspectRatio>;
+export default meta;
+export declare const Usage: () => React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "6.0.0",
+  "version": "6.1.0",
   "license": "MIT",
   "author": {
     "name": "@hyphen"
@@ -63,6 +63,7 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@hyphen/hyphen-design-tokens": "^5.1.0",
+    "@radix-ui/react-aspect-ratio": "^1.1.7",
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-popover": "^1.1.15",
@@ -85,13 +86,13 @@
   },
   "devDependencies": {
     "@babel/core": "^7.27.4",
-    "@chromatic-com/storybook": "^4.1.0",
+    "@chromatic-com/storybook": "^4.1.1",
     "@semantic-release/commit-analyzer": "^11.1.0",
     "@size-limit/preset-small-lib": "^11.1.4",
-    "@storybook/addon-a11y": "^9.0.17",
-    "@storybook/addon-docs": "^9.0.17",
-    "@storybook/addon-themes": "^9.0.17",
-    "@storybook/react-vite": "^9.0.17",
+    "@storybook/addon-a11y": "^9.1.3",
+    "@storybook/addon-docs": "^9.1.3",
+    "@storybook/addon-themes": "^9.1.3",
+    "@storybook/react-vite": "^9.1.3",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",

package/src/components/AspectRatio/AspectRatio.mdx

@@ -0,0 +1,15 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as Stories from './AspectRatio.stories';
+
+<Meta of={Stories} />
+
+# Aspect Ratio
+
+Aspect Ratio components are used to maintain a specific aspect ratio for their content.
+
+This component is extended from [Radix](https://www.radix-ui.com/primitives/docs/components/aspect-ratio).
+
+[API Reference](https://www.radix-ui.com/primitives/docs/components/aspect-ratio#api-reference)
+
+<Canvas of={Stories.Usage} />
+

package/src/components/AspectRatio/AspectRatio.stories.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { Meta } from '@storybook/react-vite';
+import { AspectRatio } from './AspectRatio';
+import { Box } from '../Box/Box';
+
+const meta: Meta<typeof AspectRatio> = {
+  title: 'Components/AspectRatio',
+  component: AspectRatio,
+};
+
+export default meta;
+
+export const Usage = () => (
+  <Box width="9xl">
+    <AspectRatio ratio={16 / 9}>
+      <img
+        className="Image"
+        src="https://images.unsplash.com/photo-1750688650545-d9e2a060dfe8?q=80&w=512&auto=format&fit=crop"
+        alt="Landscape photograph by Jonas Degener"
+        style={{
+          objectFit: 'cover',
+          width: '100%',
+          height: '100%',
+        }}
+      />
+    </AspectRatio>
+  </Box>
+);

package/src/components/AspectRatio/AspectRatio.tsx

@@ -0,0 +1,5 @@
+import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
+
+const AspectRatio = AspectRatioPrimitive.Root;
+
+export { AspectRatio };