@windstream/react-shared-components 0.0.21 → 0.0.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windstream/react-shared-components",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "type": "module",
   "description": "Shared React components for Kinetic applications",
   "main": "dist/index.js",
@@ -16,6 +16,9 @@
       ],
       "contentful": [
         "./dist/contentful/index.d.ts"
+      ],
+      "next": [
+        "./dist/next/index.d.ts"
       ]
     }
   },
@@ -40,6 +43,11 @@
       "import": "./dist/contentful/index.esm.js",
       "require": "./dist/contentful/index.js"
     },
+    "./next": {
+      "types": "./dist/next/index.d.ts",
+      "import": "./dist/next/index.esm.js",
+      "require": "./dist/next/index.js"
+    },
     "./tailwind.config": {
       "types": "./tailwind.config.cjs",
       "require": "./tailwind.config.cjs",
@@ -83,9 +91,15 @@
     "build-storybook": "storybook build"
   },
   "peerDependencies": {
+    "next": ">=13.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "@types/react-modal": "3.16.3",
     "@types/react-transition-group": "4.4.12",
@@ -123,6 +137,7 @@
     "eslint-plugin-storybook": "9.1.3",
     "jest": "30.0.5",
     "jest-environment-jsdom": "30.0.5",
+    "next": "^16.1.6",
     "postcss": "8.5.6",
     "postcss-loader": "8.1.1",
     "prettier": "3.6.2",
@@ -132,6 +147,7 @@
     "rollup-plugin-dts": "6.2.3",
     "rollup-plugin-peer-deps-external": "2.2.4",
     "rollup-plugin-postcss": "4.0.2",
+    "rollup-plugin-preserve-directives": "^0.4.0",
     "storybook": "9.1.3",
     "tailwind-merge": "3.3.1",
     "tailwindcss": "3.4.17",

package/src/components/accordion/index.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 
 import { AccordionProps } from "@shared/components/accordion/types";

package/src/components/alert-card/types.ts

@@ -1,9 +1,9 @@
-import { ReactNode } from "react";
-
-import { TextVariant } from "@shared/components/text";
-
-export type AlertCardProps = {
-  errorMessage?: string | ReactNode;
-  className?: string;
-  textVariant?: TextVariant;
-};
+import { ReactNode } from "react";
+
+import { TextVariant } from "@shared/components/text";
+
+export type AlertCardProps = {
+  errorMessage?: string | ReactNode;
+  className?: string;
+  textVariant?: TextVariant;
+};

package/src/components/brand-button/index.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 import { getLabelSizeBasedOnButtonSize, sizeToClassNames } from "./helpers";
 

package/src/components/button/index.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 
 import { ButtonProps } from "@shared/components/button/types";

package/src/components/button/types.ts

@@ -1,14 +1,14 @@
-import {
-  type ButtonHTMLAttributes,
-  type CSSProperties,
-  type ReactNode,
-} from "react";
-
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  /** Content to render inside the button */
-  children?: ReactNode;
-  /** Custom className for the button */
-  className?: string;
-  /** Custom styles */
-  style?: CSSProperties;
-}
+import {
+  type ButtonHTMLAttributes,
+  type CSSProperties,
+  type ReactNode,
+} from "react";
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Content to render inside the button */
+  children?: ReactNode;
+  /** Custom className for the button */
+  className?: string;
+  /** Custom styles */
+  style?: CSSProperties;
+}

package/src/components/checkbox/index.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useCallback } from "react";
 import { CheckboxProps } from "./types";
 

package/src/components/collapse/index.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useRef, useState } from "react";
 import { CollapsibleProps } from "./types";
 

package/src/components/image/index.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 
 import type { ImageProps } from "@shared/components/image/types";
@@ -8,9 +10,10 @@ export const Image = forwardRef<HTMLImageElement, ImageProps>(
     const combinedClassName = cx(className);
 
     if (ImageComponent) {
-      return (
-        <ImageComponent ref={ref} className={combinedClassName} {...rest} />
-      );
+      // Cast to any to allow ref forwarding for custom components
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const Component = ImageComponent as any;
+      return <Component ref={ref} className={combinedClassName} {...rest} />;
     }
 
     return <img ref={ref} className={combinedClassName} {...rest} />;

package/src/components/image/types.ts

@@ -1,4 +1,4 @@
-import type { ComponentType, ImgHTMLAttributes } from "react";
+import type { ComponentType, ForwardRefExoticComponent, ImgHTMLAttributes, RefAttributes } from "react";
 
 /**
  * Props passed to the custom image component when using the `as` prop.
@@ -22,7 +22,12 @@ export interface ImageComponentProps
   quality?: number;
 }
 
+/** Type for custom image component that supports ref forwarding */
+type ImageComponent = 
+  | ComponentType<ImageComponentProps>
+  | ForwardRefExoticComponent<ImageComponentProps & RefAttributes<HTMLImageElement>>;
+
 export interface ImageProps extends ImageComponentProps {
   /** Custom component to render instead of native img (e.g. next/image) */
-  as?: ComponentType<ImageComponentProps>;
+  as?: ImageComponent;
 }

package/src/components/input/index.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   FocusEventHandler,
   forwardRef,

package/src/components/link/index.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { forwardRef } from "react";
 import { cx } from "../../utils";
 import { LinkProps } from "./types";

package/src/components/link/types.ts

@@ -1,25 +1,25 @@
-import {
-  type AnchorHTMLAttributes,
-  type CSSProperties,
-  type MouseEvent,
-  type ReactNode,
-} from "react";
-
-export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-  /** Content to render inside the link */
-  children: ReactNode;
-  /** URL to navigate to */
-  href?: string;
-  /** Custom className for the link */
-  className?: string;
-  /** Click handler function */
-  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
-  /** Additional styling options */
-  variant?: "default" | "unstyled";
-  /** Custom styles */
-  style?: CSSProperties;
-  /** External link behavior - opens in new tab */
-  external?: boolean;
-  /** Disable the link */
-  disabled?: boolean;
-}
+import {
+  type AnchorHTMLAttributes,
+  type CSSProperties,
+  type MouseEvent,
+  type ReactNode,
+} from "react";
+
+export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  /** Content to render inside the link */
+  children: ReactNode;
+  /** URL to navigate to */
+  href?: string;
+  /** Custom className for the link */
+  className?: string;
+  /** Click handler function */
+  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+  /** Additional styling options */
+  variant?: "default" | "unstyled";
+  /** Custom styles */
+  style?: CSSProperties;
+  /** External link behavior - opens in new tab */
+  external?: boolean;
+  /** Disable the link */
+  disabled?: boolean;
+}

package/src/components/list/index.tsx

@@ -1,86 +1,88 @@
-import React, { forwardRef } from "react";
-import { cx } from "../../utils";
-import { ListItem, ListItemProps } from "./list-item";
-import { ListProps } from "./types";
-
-export const List = forwardRef<HTMLUListElement | HTMLOListElement, ListProps>(
-  (
-    {
-      type = "ul",
-      items,
-      className = "",
-      renderItem,
-      children,
-      variant = "unstyled",
-      style,
-      ...props
-    },
-    ref
-  ) => {
-    // Get Tailwind classes for different variants
-    const getVariantClasses = () => {
-      if (variant === "unstyled") {
-        return "";
-      }
-
-      // TODO: Add styles based on the figma design for all variants
-      const baseClasses = "m-0 p-0";
-      const typeClasses =
-        type === "ol" ? "pl-6 list-decimal" : "pl-5 list-disc";
-
-      return `${baseClasses} ${typeClasses}`;
-    };
-
-    const tailwindClasses = getVariantClasses();
-    const combinedClassName = cx(
-      tailwindClasses,
-      `list--${type}`,
-      `list--${variant}`,
-      className
-    );
-
-    // Render items if provided
-    const renderItems = () => {
-      if (!items || items.length === 0) return null;
-
-      return items.map((item, index) => {
-        if (renderItem) {
-          return renderItem(item, index);
-        }
-
-        return (
-          <ListItem
-            key={item.id || index}
-            className={item.className}
-            variant={variant}
-          >
-            {item.content}
-          </ListItem>
-        );
-      });
-    };
-
-    const content = children || renderItems();
-
-    // Create props object to avoid duplication
-    const listProps = {
-      className: combinedClassName,
-      style,
-      ...props,
-      children: content,
-    };
-
-    // Return appropriate list type with conditional rendering for proper TypeScript inference
-    if (type === "ol") {
-      return <ol {...listProps} ref={ref as React.Ref<HTMLOListElement>} />;
-    }
-
-    return <ul {...listProps} ref={ref as React.Ref<HTMLUListElement>} />;
-  }
-);
-
-List.displayName = "List";
-
-export { ListItem };
-
-export type { ListProps, ListItemProps };
+"use client";
+
+import React, { forwardRef } from "react";
+import { cx } from "../../utils";
+import { ListItem, ListItemProps } from "./list-item";
+import { ListProps } from "./types";
+
+export const List = forwardRef<HTMLUListElement | HTMLOListElement, ListProps>(
+  (
+    {
+      type = "ul",
+      items,
+      className = "",
+      renderItem,
+      children,
+      variant = "unstyled",
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    // Get Tailwind classes for different variants
+    const getVariantClasses = () => {
+      if (variant === "unstyled") {
+        return "";
+      }
+
+      // TODO: Add styles based on the figma design for all variants
+      const baseClasses = "m-0 p-0";
+      const typeClasses =
+        type === "ol" ? "pl-6 list-decimal" : "pl-5 list-disc";
+
+      return `${baseClasses} ${typeClasses}`;
+    };
+
+    const tailwindClasses = getVariantClasses();
+    const combinedClassName = cx(
+      tailwindClasses,
+      `list--${type}`,
+      `list--${variant}`,
+      className
+    );
+
+    // Render items if provided
+    const renderItems = () => {
+      if (!items || items.length === 0) return null;
+
+      return items.map((item, index) => {
+        if (renderItem) {
+          return renderItem(item, index);
+        }
+
+        return (
+          <ListItem
+            key={item.id || index}
+            className={item.className}
+            variant={variant}
+          >
+            {item.content}
+          </ListItem>
+        );
+      });
+    };
+
+    const content = children || renderItems();
+
+    // Create props object to avoid duplication
+    const listProps = {
+      className: combinedClassName,
+      style,
+      ...props,
+      children: content,
+    };
+
+    // Return appropriate list type with conditional rendering for proper TypeScript inference
+    if (type === "ol") {
+      return <ol {...listProps} ref={ref as React.Ref<HTMLOListElement>} />;
+    }
+
+    return <ul {...listProps} ref={ref as React.Ref<HTMLUListElement>} />;
+  }
+);
+
+List.displayName = "List";
+
+export { ListItem };
+
+export type { ListProps, ListItemProps };

package/src/components/list/list-item/index.tsx

@@ -1,36 +1,38 @@
-import { forwardRef } from "react";
-import { cx } from "../../../utils";
-import { ListItemProps } from "./types";
-
-export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
-  (
-    { children, className = "", variant = "unstyled", style, ...props },
-    ref
-  ) => {
-    // Get Tailwind classes for different variants
-    const getVariantClasses = () => {
-      if (variant === "unstyled") return "";
-
-      // TODO: Add styles based on the figma design for all variants
-      return "mb-1 leading-6";
-    };
-
-    const tailwindClasses = getVariantClasses();
-    const combinedClassName = cx(
-      tailwindClasses,
-      "list-item",
-      `list-item--${variant}`,
-      className
-    );
-
-    return (
-      <li ref={ref} className={combinedClassName} style={style} {...props}>
-        {children}
-      </li>
-    );
-  }
-);
-
-ListItem.displayName = "ListItem";
-
-export type { ListItemProps };
+"use client";
+
+import { forwardRef } from "react";
+import { cx } from "../../../utils";
+import { ListItemProps } from "./types";
+
+export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
+  (
+    { children, className = "", variant = "unstyled", style, ...props },
+    ref
+  ) => {
+    // Get Tailwind classes for different variants
+    const getVariantClasses = () => {
+      if (variant === "unstyled") return "";
+
+      // TODO: Add styles based on the figma design for all variants
+      return "mb-1 leading-6";
+    };
+
+    const tailwindClasses = getVariantClasses();
+    const combinedClassName = cx(
+      tailwindClasses,
+      "list-item",
+      `list-item--${variant}`,
+      className
+    );
+
+    return (
+      <li ref={ref} className={combinedClassName} style={style} {...props}>
+        {children}
+      </li>
+    );
+  }
+);
+
+ListItem.displayName = "ListItem";
+
+export type { ListItemProps };

package/src/components/list/list-item/types.ts

@@ -1,13 +1,13 @@
-import { CSSProperties, LiHTMLAttributes, ReactNode } from "react";
-import { ListVariant } from "../types";
-
-export interface ListItemProps extends LiHTMLAttributes<HTMLLIElement> {
-  /** Content to render inside the list item */
-  children: ReactNode;
-  /** Custom className for the list item */
-  className?: string;
-  /** Additional styling options */
-  variant?: ListVariant;
-  /** Custom styles */
-  style?: CSSProperties;
-}
+import { CSSProperties, LiHTMLAttributes, ReactNode } from "react";
+import { ListVariant } from "../types";
+
+export interface ListItemProps extends LiHTMLAttributes<HTMLLIElement> {
+  /** Content to render inside the list item */
+  children: ReactNode;
+  /** Custom className for the list item */
+  className?: string;
+  /** Additional styling options */
+  variant?: ListVariant;
+  /** Custom styles */
+  style?: CSSProperties;
+}

package/src/components/list/types.ts

@@ -1,29 +1,29 @@
-import { CSSProperties, HTMLAttributes, ReactNode } from "react";
-
-export type ListType = "ul" | "ol";
-export type ListVariant = "default" | "unstyled";
-
-export type ListItem = {
-  id: string | number;
-  content: ReactNode;
-  className?: string;
-  [key: string]: any;
-};
-
-export interface ListProps
-  extends Omit<HTMLAttributes<HTMLUListElement | HTMLOListElement>, "type"> {
-  /** List type - unordered (ul) or ordered (ol) */
-  type?: ListType;
-  /** Array of items to render */
-  items?: ListItem[];
-  /** Custom className for the list */
-  className?: string;
-  /** Custom item renderer function */
-  renderItem?: (item: ListItem, index: number) => ReactNode;
-  /** Children to render instead of items */
-  children?: ReactNode;
-  /** Additional styling options */
-  variant?: ListVariant;
-  /** Custom styles */
-  style?: CSSProperties;
-}
+import { CSSProperties, HTMLAttributes, ReactNode } from "react";
+
+export type ListType = "ul" | "ol";
+export type ListVariant = "default" | "unstyled";
+
+export type ListItem = {
+  id: string | number;
+  content: ReactNode;
+  className?: string;
+  [key: string]: any;
+};
+
+export interface ListProps
+  extends Omit<HTMLAttributes<HTMLUListElement | HTMLOListElement>, "type"> {
+  /** List type - unordered (ul) or ordered (ol) */
+  type?: ListType;
+  /** Array of items to render */
+  items?: ListItem[];
+  /** Custom className for the list */
+  className?: string;
+  /** Custom item renderer function */
+  renderItem?: (item: ListItem, index: number) => ReactNode;
+  /** Children to render instead of items */
+  children?: ReactNode;
+  /** Additional styling options */
+  variant?: ListVariant;
+  /** Custom styles */
+  style?: CSSProperties;
+}