@windstream/react-shared-components 0.0.17 → 0.0.20

package/src/components/divider/Divider.stories.tsx

@@ -1,6 +1,6 @@
 import { Divider } from "./index";
-import { DocsPage } from "@shared/stories/DocsTemplate";
 
+import { DocsPage } from "@shared/stories/DocsTemplate";
 import type { Meta, StoryObj } from "@storybook/react";
 
 const meta: Meta<typeof Divider> = {
@@ -37,7 +37,7 @@ export const Default: Story = {
 // Horizontal divider
 export const Horizontal: Story = {
   render: () => (
-    <div className="w-full max-w-md space-y-4">
+    <div className="max-w-md w-full space-y-4">
       <p className="body2 text-text">Content above the divider</p>
       <Divider />
       <p className="body2 text-text">Content below the divider</p>
@@ -57,8 +57,8 @@ export const CustomStyling: Story = {
   args: {
     className: "h-0.5 bg-border-brand",
   },
-  render: (args) => (
-    <div className="w-full max-w-md space-y-4">
+  render: args => (
+    <div className="max-w-md w-full space-y-4">
       <p className="body2 text-text">Content above</p>
       <Divider {...args} />
       <p className="body2 text-text">Content below</p>
@@ -69,19 +69,19 @@ export const CustomStyling: Story = {
 // Multiple dividers
 export const Multiple: Story = {
   render: () => (
-    <div className="w-full max-w-md space-y-4">
+    <div className="max-w-md w-full space-y-4">
       <div>
-        <h3 className="subheading1 text-text mb-2">Section 1</h3>
+        <h3 className="subheading1 mb-2 text-text">Section 1</h3>
         <p className="body2 text-text">Content for section 1</p>
       </div>
       <Divider />
       <div>
-        <h3 className="subheading1 text-text mb-2">Section 2</h3>
+        <h3 className="subheading1 mb-2 text-text">Section 2</h3>
         <p className="body2 text-text">Content for section 2</p>
       </div>
       <Divider />
       <div>
-        <h3 className="subheading1 text-text mb-2">Section 3</h3>
+        <h3 className="subheading1 mb-2 text-text">Section 3</h3>
         <p className="body2 text-text">Content for section 3</p>
       </div>
     </div>
@@ -98,7 +98,7 @@ export const Multiple: Story = {
 // In list
 export const InList: Story = {
   render: () => (
-    <div className="w-full max-w-md space-y-0 border border-border-default rounded">
+    <div className="max-w-md border-border-default w-full space-y-0 rounded border">
       <div className="p-4">
         <p className="body2 text-text">List item 1</p>
       </div>
@@ -126,8 +126,8 @@ export const Thick: Story = {
   args: {
     className: "h-1 bg-border-default",
   },
-  render: (args) => (
-    <div className="w-full max-w-md space-y-4">
+  render: args => (
+    <div className="max-w-md w-full space-y-4">
       <p className="body2 text-text">Content above</p>
       <Divider {...args} />
       <p className="body2 text-text">Content below</p>
@@ -140,8 +140,8 @@ export const Colored: Story = {
   args: {
     className: "h-0.5 bg-border-brand",
   },
-  render: (args) => (
-    <div className="w-full max-w-md space-y-4">
+  render: args => (
+    <div className="max-w-md w-full space-y-4">
       <p className="body2 text-text">Content above</p>
       <Divider {...args} />
       <p className="body2 text-text">Content below</p>
@@ -152,7 +152,7 @@ export const Colored: Story = {
 // All variants showcase
 export const AllVariants: Story = {
   render: () => (
-    <div className="w-full max-w-2xl space-y-8">
+    <div className="max-w-2xl w-full space-y-8">
       <div>
         <h3 className="mb-3 text-lg font-semibold">Default Divider</h3>
         <div className="space-y-4">
@@ -173,13 +173,13 @@ export const AllVariants: Story = {
         <h3 className="mb-3 text-lg font-semibold">Thick Divider</h3>
         <div className="space-y-4">
           <p className="body2 text-text">Content above</p>
-          <Divider className="h-1 bg-border-default" />
+          <Divider className="bg-border-default h-1" />
           <p className="body2 text-text">Content below</p>
         </div>
       </div>
       <div>
         <h3 className="mb-3 text-lg font-semibold">In List</h3>
-        <div className="border border-border-default rounded">
+        <div className="border-border-default rounded border">
           <div className="p-4">
             <p className="body2 text-text">Item 1</p>
           </div>
@@ -203,4 +203,3 @@ export const AllVariants: Story = {
     },
   },
 };
-

package/src/components/divider/index.tsx

@@ -1,16 +1,15 @@
 import React from "react";
+import { DividerProps } from "./type";
 
 import { cx } from "@shared/utils";
 
-import { DividerProps } from "./type";
-
 export const Divider: React.FC<DividerProps> = (props: DividerProps) => {
   const { className, ...rest } = props;
 
   return (
     <div
       className={cx(
-        "bg-bg-surface-tertiary-active h-[1px] border-t-0 opacity-100",
+        "h-[1px] border-t-0 bg-bg-surface-tertiary-active opacity-100",
         className
       )}
       {...rest}

package/src/components/divider/type.ts

@@ -1,3 +1,3 @@
 export type DividerProps = {
-    className?: string;
-} & React.HTMLAttributes<HTMLDivElement>;
+  className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;

package/src/components/image/Image.stories.tsx

@@ -0,0 +1,113 @@
+import { forwardRef } from "react";
+import { Image } from "./index";
+import type { ImageComponentProps } from "./types";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Image> = {
+  title: "Components/Image",
+  component: Image,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "A reusable image component that renders a native img by default. Pass the `as` prop with a custom component (e.g. next/image) to use Next.js Image or another image component.",
+      },
+    },
+  },
+  argTypes: {
+    src: {
+      control: { type: "text" },
+      description: "Image source URL",
+    },
+    alt: {
+      control: { type: "text" },
+      description:
+        "Alt text (required for accessibility; use empty string for decorative images)",
+    },
+    width: {
+      control: { type: "number" },
+      description: "Image width",
+    },
+    height: {
+      control: { type: "number" },
+      description: "Image height",
+    },
+    className: {
+      control: { type: "text" },
+      description: "Custom CSS classes",
+    },
+    loading: {
+      control: { type: "select" },
+      options: ["lazy", "eager"],
+      description: "Loading behavior",
+    },
+    as: {
+      description:
+        "Custom component to render (e.g. next/image). In a Next.js app: import Image from 'next/image' then use <Image as={Image} src={...} alt={...} width={...} height={...} />",
+      control: false,
+    },
+  },
+  args: {
+    src: "https://placehold.co/400x300",
+    alt: "Placeholder image",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithDimensions: Story = {
+  args: {
+    src: "https://placehold.co/300x200",
+    alt: "Image with explicit dimensions",
+    width: 300,
+    height: 200,
+  },
+};
+
+export const WithClassName: Story = {
+  args: {
+    src: "https://placehold.co/400x300",
+    alt: "Styled image",
+    className: "rounded-lg object-cover shadow-md",
+    width: 400,
+    height: 300,
+  },
+};
+
+/** Mock component to demonstrate the `as` prop. In a Next.js app, pass next/image: <Image as={NextImage} ... /> */
+const MockImageComponent = forwardRef<HTMLImageElement, ImageComponentProps>(
+  (props, ref) => <img ref={ref} {...props} />
+);
+MockImageComponent.displayName = "MockImageComponent";
+
+export const WithCustomComponent: Story = {
+  render: args => (
+    <Image
+      {...args}
+      as={MockImageComponent}
+      src="https://placehold.co/350x150"
+      alt="Rendered via custom component (as prop)"
+      width={350}
+      height={150}
+      className="rounded border-2 border-dashed border-gray-300"
+    />
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Use the `as` prop to render with a custom component. In Next.js, pass the Image component from next/image for optimized images.",
+      },
+    },
+  },
+};

package/src/components/image/index.tsx

@@ -0,0 +1,22 @@
+import { forwardRef } from "react";
+
+import type { ImageProps } from "@shared/components/image/types";
+import { cx } from "@shared/utils";
+
+export const Image = forwardRef<HTMLImageElement, ImageProps>(
+  ({ as: ImageComponent, className = "", ...rest }, ref) => {
+    const combinedClassName = cx(className);
+
+    if (ImageComponent) {
+      return (
+        <ImageComponent ref={ref} className={combinedClassName} {...rest} />
+      );
+    }
+
+    return <img ref={ref} className={combinedClassName} {...rest} />;
+  }
+);
+
+Image.displayName = "Image";
+
+export type { ImageProps, ImageComponentProps } from "./types";

package/src/components/image/types.ts

@@ -0,0 +1,28 @@
+import type { ComponentType, ImgHTMLAttributes } from "react";
+
+/**
+ * Props passed to the custom image component when using the `as` prop.
+ * Covers native img attributes plus optional Next.js Image props (fill, sizes, priority, etc.).
+ */
+export interface ImageComponentProps
+  extends Omit<ImgHTMLAttributes<HTMLImageElement>, "alt"> {
+  /** Image source URL */
+  src: string;
+  /** Alt text (required for accessibility; use "" for decorative images) */
+  alt: string;
+  /** Optional; used by Next.js Image when using fill layout */
+  fill?: boolean;
+  /** Optional; used by Next.js Image for responsive sizes */
+  sizes?: string;
+  /** Optional; used by Next.js Image for priority loading */
+  priority?: boolean;
+  /** Optional; used by Next.js Image for blur placeholder */
+  placeholder?: "blur" | "empty";
+  /** Optional; used by Next.js Image for quality (1–100) */
+  quality?: number;
+}
+
+export interface ImageProps extends ImageComponentProps {
+  /** Custom component to render instead of native img (e.g. next/image) */
+  as?: ComponentType<ImageComponentProps>;
+}

package/src/components/input/Input.stories.tsx

@@ -1,6 +1,6 @@
 import { Input } from "./index";
-import { DocsPage } from "@shared/stories/DocsTemplate";
 
+import { DocsPage } from "@shared/stories/DocsTemplate";
 import type { Meta, StoryObj } from "@storybook/react";
 
 const meta: Meta<typeof Input> = {
@@ -116,27 +116,15 @@ export const Error: Story = {
 // Different sizes
 export const Sizes: Story = {
   render: () => (
-    <div className="w-full max-w-md space-y-4">
+    <div className="max-w-md w-full space-y-4">
       <div>
-        <Input
-          size="slim"
-          placeholder="Slim input"
-          label="Slim Size"
-        />
+        <Input size="slim" placeholder="Slim input" label="Slim Size" />
       </div>
       <div>
-        <Input
-          size="medium"
-          placeholder="Medium input"
-          label="Medium Size"
-        />
+        <Input size="medium" placeholder="Medium input" label="Medium Size" />
       </div>
       <div>
-        <Input
-          size="large"
-          placeholder="Large input"
-          label="Large Size"
-        />
+        <Input size="large" placeholder="Large input" label="Large Size" />
       </div>
     </div>
   ),
@@ -201,7 +189,7 @@ export const Disabled: Story = {
 // Different states
 export const States: Story = {
   render: () => (
-    <div className="w-full max-w-md space-y-4">
+    <div className="max-w-md w-full space-y-4">
       <div>
         <Input
           label="Default State"
@@ -210,18 +198,10 @@ export const States: Story = {
         />
       </div>
       <div>
-        <Input
-          label="Hover State"
-          placeholder="Hover over me"
-          state="hover"
-        />
+        <Input label="Hover State" placeholder="Hover over me" state="hover" />
       </div>
       <div>
-        <Input
-          label="Focus State"
-          placeholder="Focus on me"
-          state="focus"
-        />
+        <Input label="Focus State" placeholder="Focus on me" state="focus" />
       </div>
       <div>
         <Input
@@ -263,17 +243,9 @@ export const Phone: Story = {
 // Form example
 export const FormExample: Story = {
   render: () => (
-    <form className="w-full max-w-md space-y-4">
-      <Input
-        label="First Name"
-        placeholder="Enter your first name"
-        required
-      />
-      <Input
-        label="Last Name"
-        placeholder="Enter your last name"
-        required
-      />
+    <form className="max-w-md w-full space-y-4">
+      <Input label="First Name" placeholder="Enter your first name" required />
+      <Input label="Last Name" placeholder="Enter your last name" required />
       <Input
         label="Email"
         placeholder="Enter your email"
@@ -287,11 +259,7 @@ export const FormExample: Story = {
         suffixIconName="visibility"
         required
       />
-      <Input
-        label="Phone Number"
-        placeholder="(555) 123-4567"
-        type="tel"
-      />
+      <Input label="Phone Number" placeholder="(555) 123-4567" type="tel" />
     </form>
   ),
   parameters: {
@@ -306,7 +274,7 @@ export const FormExample: Story = {
 // All variants showcase
 export const AllVariants: Story = {
   render: () => (
-    <div className="w-full max-w-2xl space-y-6">
+    <div className="max-w-2xl w-full space-y-6">
       <div>
         <h3 className="mb-3 text-lg font-semibold">Sizes</h3>
         <div className="space-y-3">
@@ -355,4 +323,3 @@ export const AllVariants: Story = {
     },
   },
 };
-

package/src/components/input/index.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   FocusEventHandler,
   forwardRef,
@@ -6,10 +8,11 @@ import {
   useCallback,
   useState,
 } from "react";
-import { cx } from "@shared/utils";
+import { InputFieldProps, InputProps } from "./types";
+
 import { MaterialIcon } from "@shared/components/material-icon";
 import { Text } from "@shared/components/text";
-import { InputFieldProps, InputProps } from "./types";
+import { cx } from "@shared/utils";
 
 export const InputField: ForwardRefRenderFunction<
   HTMLInputElement,
@@ -64,13 +67,11 @@ export const InputField: ForwardRefRenderFunction<
   };
 
   const togglePasswordVisibility = useCallback<
-  MouseEventHandler<HTMLDivElement>
->(e => {
-  e.stopPropagation();
-  setInputType(prevType =>
-    prevType === "password" ? "text" : "password"
-  );
-}, []);
+    MouseEventHandler<HTMLDivElement>
+  >(e => {
+    e.stopPropagation();
+    setInputType(prevType => (prevType === "password" ? "text" : "password"));
+  }, []);
 
   return (
     <div className="relative">
@@ -87,15 +88,19 @@ export const InputField: ForwardRefRenderFunction<
 
       <div
         className={cx(
-          "relative flex w-80 flex-row items-center rounded-xl border border-input-border bg-input-bg-surface overflow-hidden",
+          "relative flex w-80 flex-row items-center overflow-hidden rounded-xl border border-input-border bg-input-bg-surface",
           sizeClasses[size || "medium"],
           containerClassName,
-          (isHovered || effectiveState === "hover") && !isFocused && effectiveState !== "error" && "border-input-border-hover",
+          (isHovered || effectiveState === "hover") &&
+            !isFocused &&
+            effectiveState !== "error" &&
+            "border-input-border-hover",
           (isFocused ||
             effectiveState === "focus" ||
             effectiveState === "active") &&
             "border-input-border-selected outline outline-1 outline-input-border-selected",
-          effectiveState === "error" && "border-input-border-critical outline outline-1 outline-input-border-critical"
+          effectiveState === "error" &&
+            "border-input-border-critical outline outline-1 outline-input-border-critical"
         )}
       >
         {prefixIconName ? (
@@ -165,9 +170,7 @@ export const InputField: ForwardRefRenderFunction<
   );
 };
 
-export const Input = forwardRef<HTMLInputElement, InputFieldProps>(
-  InputField
-);
+export const Input = forwardRef<HTMLInputElement, InputFieldProps>(InputField);
 
 Input.displayName = "Input";
 

package/src/components/input/types.ts

@@ -34,4 +34,4 @@ export type InputFieldProps = Omit<
   prefixIconClassName?: string;
   loading?: boolean;
   hasError?: boolean;
-};
+};

package/src/components/link/Link.stories.tsx

@@ -1,6 +1,6 @@
 import { Link } from "./index";
-import { DocsPage } from "@shared/stories/DocsTemplate";
 
+import { DocsPage } from "@shared/stories/DocsTemplate";
 import type { Meta, StoryObj } from "@storybook/react";
 
 const meta: Meta<typeof Link> = {

package/src/components/link/index.tsx

@@ -26,8 +26,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
         "transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2";
 
       const variantClasses = {
-        default:
-          "text-text underline",
+        default: "text-text underline",
       };
 
       const stateClasses = [

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/List.stories.tsx

@@ -1,6 +1,6 @@
 import { List, ListItem } from "./index";
-import { DocsPage } from "@shared/stories/DocsTemplate";
 
+import { DocsPage } from "@shared/stories/DocsTemplate";
 import type { Meta, StoryObj } from "@storybook/react";
 
 const meta: Meta<typeof List> = {