@windstream/react-shared-components 0.0.36 → 0.0.38

package/src/components/checkbox/index.tsx

@@ -1,197 +1,197 @@
-"use client";
-
-import React, { useCallback } from "react";
-import { CheckboxProps } from "./types";
-
-import { Button } from "@shared/components/button";
-import { cx } from "@shared/utils";
-
-export const Checkbox: React.FC<CheckboxProps> = ({
-  state,
-  checked = false,
-  onChange,
-  className,
-  label,
-  labelClassName,
-  containerClassName,
-  name,
-  value,
-  id,
-  disabled = false,
-  required = false,
-  error = false,
-  "data-cy": dataCy,
-  renderInfoIcon,
-  ...rest
-}) => {
-  const isDisabled = disabled || state === "disabled";
-  const isFocused = state === "focus";
-  const inputId = id || name;
-
-  const checkboxClasses = cx(
-    "flex items-center justify-center w-6 h-6 rounded-[4px] outline-offset-2",
-    isFocused && "outline",
-    className
-  );
-
-  const handleInputChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      if (!isDisabled) {
-        if (onChange) {
-          // Check if onChange expects a boolean parameter (new signature)
-          if (onChange.length === 1) {
-            (onChange as (isChecked: boolean) => void)(e.target.checked);
-          } else {
-            // Old signature - just call without parameters
-            (onChange as () => void)();
-          }
-        }
-      }
-    },
-    [isDisabled, onChange]
-  );
-
-  const renderIcon = () => {
-    if (checked) {
-      return (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-        >
-          <rect
-            width="24"
-            height="24"
-            rx="4"
-            className={cx(
-              isDisabled
-                ? "fill-checkbox-bg-surface-selected-disabled"
-                : "fill-bg-fill-brand"
-            )}
-          />
-          <path
-            d="M8 11.9593L11.0316 15L17 9"
-            stroke="white"
-            strokeWidth="2.2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </svg>
-      );
-    }
-    return (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-      >
-        <rect
-          x="0.5"
-          y="0.5"
-          width="23"
-          height="23"
-          rx="3.5"
-          className={cx(
-            isDisabled ? "fill-checkbox-bg-surface-disabled" : "fill-white"
-          )}
-        />
-        <rect
-          x="0.5"
-          y="0.5"
-          width="23"
-          height="23"
-          rx="3.5"
-          stroke="#CECECE"
-        />
-      </svg>
-    );
-  };
-
-  const checkboxElement = (
-    <div className={cx("flex items-center gap-3", containerClassName)}>
-      <div className="relative">
-        <input
-          type="checkbox"
-          id={inputId}
-          name={name}
-          value={value}
-          checked={checked}
-          onChange={handleInputChange}
-          disabled={isDisabled}
-          required={required}
-          className="peer sr-only"
-          data-cy={dataCy}
-          {...rest}
-        />
-        <label
-          htmlFor={inputId}
-          className={cx("peer-focus:outline", checkboxClasses)}
-          style={{ pointerEvents: isDisabled ? "none" : "auto" }}
-        >
-          {renderIcon()}
-        </label>
-      </div>
-      {label && (
-        <label
-          htmlFor={inputId}
-          className={cx(
-            "cursor-pointer",
-            error && "text-text-critical",
-            labelClassName
-          )}
-        >
-          {label}
-        </label>
-      )}
-      {renderInfoIcon && (
-        <Button
-          type="button"
-          onClick={renderInfoIcon.onClick}
-          data-testid={renderInfoIcon.dataTestId}
-          className="ml-2 cursor-pointer text-icon-info"
-          aria-label="More information"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-          >
-            <circle
-              cx="12"
-              cy="12"
-              r="10"
-              stroke="currentColor"
-              strokeWidth="2"
-            />
-            <path
-              d="M12 16v-4"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-            <path
-              d="M12 8h.01"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
-        </Button>
-      )}
-    </div>
-  );
-
-  return checkboxElement;
-};
-
-Checkbox.displayName = "Checkbox";
-
-export type { CheckboxProps };
+"use client";
+
+import React, { useCallback } from "react";
+import { CheckboxProps } from "./types";
+
+import { Button } from "@shared/components/button";
+import { cx } from "@shared/utils";
+
+export const Checkbox: React.FC<CheckboxProps> = ({
+  state,
+  checked = false,
+  onChange,
+  className,
+  label,
+  labelClassName,
+  containerClassName,
+  name,
+  value,
+  id,
+  disabled = false,
+  required = false,
+  error = false,
+  "data-cy": dataCy,
+  renderInfoIcon,
+  ...rest
+}) => {
+  const isDisabled = disabled || state === "disabled";
+  const isFocused = state === "focus";
+  const inputId = id || name;
+
+  const checkboxClasses = cx(
+    "flex items-center justify-center w-6 h-6 rounded-[4px] outline-offset-2",
+    isFocused && "outline",
+    className
+  );
+
+  const handleInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (!isDisabled) {
+        if (onChange) {
+          // Check if onChange expects a boolean parameter (new signature)
+          if (onChange.length === 1) {
+            (onChange as (isChecked: boolean) => void)(e.target.checked);
+          } else {
+            // Old signature - just call without parameters
+            (onChange as () => void)();
+          }
+        }
+      }
+    },
+    [isDisabled, onChange]
+  );
+
+  const renderIcon = () => {
+    if (checked) {
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+        >
+          <rect
+            width="24"
+            height="24"
+            rx="4"
+            className={cx(
+              isDisabled
+                ? "fill-checkbox-bg-surface-selected-disabled"
+                : "fill-bg-fill-brand"
+            )}
+          />
+          <path
+            d="M8 11.9593L11.0316 15L17 9"
+            stroke="white"
+            strokeWidth="2.2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      );
+    }
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+      >
+        <rect
+          x="0.5"
+          y="0.5"
+          width="23"
+          height="23"
+          rx="3.5"
+          className={cx(
+            isDisabled ? "fill-checkbox-bg-surface-disabled" : "fill-white"
+          )}
+        />
+        <rect
+          x="0.5"
+          y="0.5"
+          width="23"
+          height="23"
+          rx="3.5"
+          stroke="#CECECE"
+        />
+      </svg>
+    );
+  };
+
+  const checkboxElement = (
+    <div className={cx("flex items-center gap-3", containerClassName)}>
+      <div className="relative">
+        <input
+          type="checkbox"
+          id={inputId}
+          name={name}
+          value={value}
+          checked={checked}
+          onChange={handleInputChange}
+          disabled={isDisabled}
+          required={required}
+          className="peer sr-only"
+          data-cy={dataCy}
+          {...rest}
+        />
+        <label
+          htmlFor={inputId}
+          className={cx("peer-focus:outline", checkboxClasses)}
+          style={{ pointerEvents: isDisabled ? "none" : "auto" }}
+        >
+          {renderIcon()}
+        </label>
+      </div>
+      {label && (
+        <label
+          htmlFor={inputId}
+          className={cx(
+            "cursor-pointer",
+            error && "text-text-critical",
+            labelClassName
+          )}
+        >
+          {label}
+        </label>
+      )}
+      {renderInfoIcon && (
+        <Button
+          type="button"
+          onClick={renderInfoIcon.onClick}
+          data-testid={renderInfoIcon.dataTestId}
+          className="ml-2 cursor-pointer text-icon-info"
+          aria-label="More information"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+          >
+            <circle
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="2"
+            />
+            <path
+              d="M12 16v-4"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M12 8h.01"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </Button>
+      )}
+    </div>
+  );
+
+  return checkboxElement;
+};
+
+Checkbox.displayName = "Checkbox";
+
+export type { CheckboxProps };

package/src/components/collapse/index.tsx

@@ -1,46 +1,46 @@
-"use client";
-
-import { useEffect, useRef, useState } from "react";
-import { CollapsibleProps } from "./types";
-
-// Collapsible with smooth height/opacity transition
-export const Collapse = (props: CollapsibleProps) => {
-  const { open, children } = props;
-  const contentRef = useRef<HTMLDivElement | null>(null);
-  const [maxHeight, setMaxHeight] = useState<number>(0);
-
-  useEffect(() => {
-    const el = contentRef.current;
-    if (!el) return;
-
-    const updateHeight = () => {
-      setMaxHeight(open ? el.scrollHeight : 0);
-    };
-
-    updateHeight();
-
-    let resizeObserver: ResizeObserver | undefined;
-    if (open) {
-      resizeObserver = new ResizeObserver(() => updateHeight());
-      resizeObserver.observe(el);
-    }
-
-    return () => {
-      if (resizeObserver) resizeObserver.disconnect();
-    };
-  }, [open, children]);
-
-  return (
-    <div
-      className="overflow-hidden transition-all duration-300 ease-in-out"
-      style={{ maxHeight: maxHeight, opacity: open ? 1 : 0 }}
-      aria-hidden={!open}
-    >
-      <div ref={contentRef}>{children}</div>
-    </div>
-  );
-};
-
-Collapse.displayName = "Collapse";
-
-export type { CollapsibleProps };
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { CollapsibleProps } from "./types";
+
+// Collapsible with smooth height/opacity transition
+export const Collapse = (props: CollapsibleProps) => {
+  const { open, children } = props;
+  const contentRef = useRef<HTMLDivElement | null>(null);
+  const [maxHeight, setMaxHeight] = useState<number>(0);
+
+  useEffect(() => {
+    const el = contentRef.current;
+    if (!el) return;
+
+    const updateHeight = () => {
+      setMaxHeight(open ? el.scrollHeight : 0);
+    };
+
+    updateHeight();
+
+    let resizeObserver: ResizeObserver | undefined;
+    if (open) {
+      resizeObserver = new ResizeObserver(() => updateHeight());
+      resizeObserver.observe(el);
+    }
+
+    return () => {
+      if (resizeObserver) resizeObserver.disconnect();
+    };
+  }, [open, children]);
+
+  return (
+    <div
+      className="overflow-hidden transition-all duration-300 ease-in-out"
+      style={{ maxHeight: maxHeight, opacity: open ? 1 : 0 }}
+      aria-hidden={!open}
+    >
+      <div ref={contentRef}>{children}</div>
+    </div>
+  );
+};
+
+Collapse.displayName = "Collapse";
+
+export type { CollapsibleProps };

package/src/components/image/types.ts

@@ -1,33 +1,33 @@
-import type { ComponentType, ForwardRefExoticComponent, ImgHTMLAttributes, RefAttributes } 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;
-}
-
-/** 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?: ImageComponent;
-}
+import type { ComponentType, ForwardRefExoticComponent, ImgHTMLAttributes, RefAttributes } 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;
+}
+
+/** 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?: ImageComponent;
+}

package/src/components/input/index.tsx

@@ -88,19 +88,19 @@ export const InputField: ForwardRefRenderFunction<
 
       <div
         className={cx(
-          "relative flex w-80 flex-row items-center overflow-hidden rounded-xl border border-input-border bg-input-bg-surface",
+          "relative flex 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",
+          !isFocused &&
+          effectiveState !== "error" &&
+          "border-input-border-hover",
           (isFocused ||
             effectiveState === "focus" ||
             effectiveState === "active") &&
-            "border-input-border-selected outline outline-1 outline-input-border-selected",
+          "border-input-border-selected outline outline-1 outline-input-border-selected",
           effectiveState === "error" &&
-            "border-input-border-critical outline outline-1 outline-input-border-critical"
+          "border-input-border-critical outline outline-1 outline-input-border-critical"
         )}
       >
         {prefixIconName ? (