styled-components 6.4.0-prerelease.7 → 6.4.0-prerelease.8

package/dist/styled-components.js

@@ -11,7 +11,7 @@
         'data-styled';
     const SC_ATTR_ACTIVE = 'active';
     const SC_ATTR_VERSION = 'data-styled-version';
-    const SC_VERSION = "6.4.0-prerelease.7";
+    const SC_VERSION = "6.4.0-prerelease.8";
     const SPLITTER = '/*!sc*/\n';
     const IS_BROWSER = typeof window !== 'undefined' && typeof document !== 'undefined';
     function readSpeedyFlag(name) {
@@ -723,6 +723,7 @@
         return isFunction(test) && !(test.prototype && test.prototype.isReactComponent);
     }
 
+    /** Type guard that returns true if the target is a styled component. */
     function isStyledComponent(target) {
         return typeof target === 'object' && 'styledComponentId' in target;
     }
@@ -1292,6 +1293,7 @@
     function useStyleSheetContext() {
         return React.useContext(StyleSheetContext);
     }
+    /** Configure style injection for descendant styled components (target element, stylis plugins, prop forwarding). */
     function StyleSheetManager(props) {
         // In RSC environments without context support, StyleSheetManager becomes a no-op
         if (!React.useMemo) {
@@ -1482,6 +1484,16 @@
         return addTag(flatten(interleave(styleStringArray, interpolations)));
     }
 
+    /**
+     * Create a component that injects global CSS when mounted. Supports theming and dynamic props.
+     *
+     * ```tsx
+     * const GlobalStyle = createGlobalStyle`
+     *   body { margin: 0; font-family: system-ui; }
+     * `;
+     * // Render <GlobalStyle /> at the root of your app
+     * ```
+     */
     function createGlobalStyle(strings, ...interpolations) {
         const rules = css(strings, ...interpolations);
         const styledComponentId = `sc-global-${generateComponentId(JSON.stringify(rules))}`;
@@ -1713,6 +1725,17 @@
     }
     _a = KEYFRAMES_SYMBOL;
 
+    /**
+     * Define a CSS `@keyframes` animation with an automatically scoped name.
+     *
+     * ```tsx
+     * const rotate = keyframes`
+     *   from { transform: rotate(0deg); }
+     *   to { transform: rotate(360deg); }
+     * `;
+     * const Spinner = styled.div`animation: ${rotate} 1s linear infinite;`;
+     * ```
+     */
     function keyframes(strings, ...interpolations) {
         /* Warning if you've used keyframes on React Native */
         if (typeof navigator !== 'undefined' &&
@@ -1818,6 +1841,7 @@
         return targetComponent;
     }
 
+    /** Higher-order component that injects the current theme as a prop. Prefer `useTheme` in function components. */
     function withTheme(Component) {
         const WithTheme = React.forwardRef((props, ref) => {
             const theme = React.useContext(ThemeContext) ;
@@ -1831,6 +1855,16 @@
         return hoistNonReactStatics(WithTheme, Component);
     }
 
+    /**
+     * Collect styled-components CSS during server-side rendering.
+     *
+     * ```tsx
+     * const sheet = new ServerStyleSheet();
+     * const html = renderToString(sheet.collectStyles(<App />));
+     * const styleTags = sheet.getStyleTags();
+     * sheet.seal();
+     * ```
+     */
     class ServerStyleSheet {
         constructor({ nonce } = {}) {
             this._emitSheetCSS = () => {
@@ -2377,6 +2411,14 @@
         return templateFunction;
     }
 
+    /**
+     * Create a styled component from an HTML element or React component.
+     *
+     * ```tsx
+     * const Button = styled.button`color: red;`;
+     * const Link = styled(RouterLink)`text-decoration: none;`;
+     * ```
+     */
     const baseStyled = (tag) => constructWithOptions(createStyledComponent, tag);
     const styled = baseStyled;
     // Shorthands for all valid HTML Elements