@cimpress/react-components
Version:
React components to support the MCP styleguide
51 lines • 1.49 kB
TypeScript
import type { Meta, StoryObj } from '@storybook/react';
/**
* Experimental spacing utilities.
*
* This is an unstable component, expect breaking changes or complete removal in minor versions.
*
* Available spacing values in pixels: 0, 1, 2, 4, 8, 16, 24, 32, 40, 48, 56, 64, 80, 96.
*
* **Usage**
*
* Wrap the root of your app with the `ScopedSpacingStyles` component (recommended):
*
* ```jsx
* import { unstable_ScopedSpacingStyles as ScopedSpacingStyles } from '@cimpress/react-components';
*
* // ...
*
* <ScopedSpacingStyles>
* <div className="m-16">...</div>
* </ScopedSpacingStyles>
* ```
*
* Or inject styles globally if you need to access them outside of the `ScopedSpacingStyles` component:
*
* ```jsx
* import { unstable_injectGlobalSpacingStyles } from '@cimpress/react-components';
*
* unstable_injectGlobalSpacingStyles();
*
* // ...
*
* <div className="m-16">...</div>
* ```
*/
declare const meta: Meta;
export default meta;
type Story = StoryObj;
/**
* The spacing utilities are available as classes that you can apply to any element.
*/
export declare const Margin: Story;
/**
* You can use the breakpoint prefix to apply margin utilities at specific breakpoints.
*
*/
export declare const MarginBreakpoints: Story;
export declare const MarginSingleSide: Story;
export declare const MarginHorizontal: Story;
export declare const MarginVertical: Story;
export declare const Padding: Story;
//# sourceMappingURL=spacing.stories.d.ts.map