keystone-design-bootstrap 1.0.8 → 1.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "keystone-design-bootstrap",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "Keystone Design Bootstrap - Sections, Elements, and Theme System for customer websites",
   "type": "module",
   "main": "./src/index.ts",
@@ -30,7 +30,11 @@
   ],
   "scripts": {
     "build": "tsup",
-    "dev": "tsup --watch"
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "npm run typecheck && npm run build",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
   },
   "peerDependencies": {
     "next": ">=15.0.0",
@@ -53,6 +57,8 @@
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.1",
     "tsup": "^8.5.1",
     "typescript": "^5"
   }

package/src/design_system/elements/avatar/avatar-profile-photo.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import Image from "next/image";
 import { User01 } from "@untitledui/icons";
 import { cx } from '../../../utils/cx';
 import { type AvatarProps } from "./avatar";
@@ -61,10 +62,12 @@ export const AvatarProfilePhoto = ({
     const renderMainContent = () => {
         if (src && !isFailed) {
             return (
-                <img
+                <Image
                     src={src}
-                    alt={alt}
+                    alt={alt || ''}
                     onError={() => setIsFailed(true)}
+                    width={100}
+                    height={100}
                     className={cx(
                         "size-full rounded-full object-cover",
                         contrastBorder && "outline-1 -outline-offset-1 outline-avatar-contrast-border",

package/src/design_system/elements/avatar/avatar.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { type FC, type ReactNode, useState } from "react";
+import Image from "next/image";
 import { User01 } from "@untitledui/icons";
 import { cx } from '../../../utils/cx';
 import { AvatarOnlineIndicator, VerifiedTick } from "./base-components";
@@ -81,7 +82,7 @@ export const Avatar = ({
 
     const renderMainContent = () => {
         if (src && !isFailed) {
-            return <img data-avatar-img className="size-full rounded-full object-cover" src={src} alt={alt} onError={() => setIsFailed(true)} />;
+            return <Image data-avatar-img className="size-full rounded-full object-cover" src={src} alt={alt || ''} onError={() => setIsFailed(true)} width={100} height={100} />;
         }
 
         if (initials) {

package/src/design_system/elements/avatar/base-components/avatar-company-icon.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import Image from "next/image";
 import { cx } from '../../../../utils/cx';
 
 const sizes = {
@@ -18,9 +19,11 @@ interface AvatarCompanyIconProps {
 }
 
 export const AvatarCompanyIcon = ({ size, src, alt }: AvatarCompanyIconProps) => (
-    <img
+    <Image
         src={src}
-        alt={alt}
+        alt={alt || ""}
+        width={20}
+        height={20}
         className={cx("bg-primary-25 absolute -right-0.5 -bottom-0.5 rounded-full object-cover ring-[1.5px] ring-bg-primary", sizes[size])}
     />
 );

package/src/design_system/elements/badges/avatar.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { type FC, type ReactNode, useState } from "react";
+import Image from "next/image";
 import { User01 } from "@untitledui/icons";
 import { cx } from '../../../utils/cx';
 import { AvatarOnlineIndicator, VerifiedTick } from '../avatar/base-components';
@@ -81,7 +82,7 @@ export const Avatar = ({
 
     const renderMainContent = () => {
         if (src && !isFailed) {
-            return <img data-avatar-img className="size-full rounded-full object-cover" src={src} alt={alt} onError={() => setIsFailed(true)} />;
+            return <Image data-avatar-img className="size-full rounded-full object-cover" src={src} alt={alt || ''} onError={() => setIsFailed(true)} width={100} height={100} />;
         }
 
         if (initials) {

package/src/design_system/elements/badges/badge-groups.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { FC, ReactNode } from "react";
-import { isValidElement } from "react";
+import { createElement, isValidElement } from "react";
 import { ArrowRight } from "@untitledui/icons";
 import { cx, sortCx } from '../../../utils/cx';
 import { isReactComponent } from '../../../utils/is-react-component';
@@ -152,7 +152,7 @@ export const BadgeGroup = ({
                     {addonText}
 
                     {/* Trailing icon */}
-                    {isReactComponent(IconTrailing) && <IconTrailing className={iconClasses} />}
+                    {isReactComponent(IconTrailing) && createElement(IconTrailing, { className: iconClasses } as Record<string, unknown>)}
                     {isValidElement(IconTrailing) && IconTrailing}
                 </span>
             </div>
@@ -169,7 +169,7 @@ export const BadgeGroup = ({
             {children}
 
             {/* Trailing icon */}
-            {isReactComponent(IconTrailing) && <IconTrailing className={iconClasses} />}
+            {isReactComponent(IconTrailing) && createElement(IconTrailing, { className: iconClasses } as Record<string, unknown>)}
             {isValidElement(IconTrailing) && IconTrailing}
         </div>
     );

package/src/design_system/elements/badges/badges.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import type { MouseEventHandler, ReactNode, HTMLAttributes } from "react";
+import Image from "next/image";
 import { X as CloseX } from "@untitledui/icons";
 import { cx } from '../../../utils/cx';
 import type { BadgeColors, BadgeTypeToColorMap, BadgeTypes, FlagTypes, IconComponentType, Sizes } from "./badge-types";
@@ -290,7 +291,7 @@ export const BadgeWithFlag = <T extends BadgeTypes>(props: BadgeWithFlagProps<T>
 
     return (
         <span className={cx(colors.common, sizes[type][size], colors.styles[color].root)}>
-            <img src={`https://www.untitledui.com/images/flags/${flag}.svg`} className="size-4 max-w-none rounded-full" alt={`${flag} flag`} />
+            <Image src={`https://www.untitledui.com/images/flags/${flag}.svg`} className="size-4 max-w-none rounded-full" alt={`${flag} flag`} width={16} height={16} />
             {children}
         </span>
     );
@@ -328,7 +329,7 @@ export const BadgeWithImage = <T extends BadgeTypes>(props: BadgeWithImageProps<
 
     return (
         <span className={cx(colors.common, sizes[type][size], colors.styles[color].root)}>
-            <img src={imgSrc} className="size-4 max-w-none rounded-full" alt="Badge image" />
+            <Image src={imgSrc} className="size-4 max-w-none rounded-full" alt="Badge image" width={16} height={16} />
             {children}
         </span>
     );

package/src/design_system/elements/button-group/button-group.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { type FC, type PropsWithChildren, type ReactNode, type RefAttributes, createContext, isValidElement, useContext } from "react";
+import { type FC, type PropsWithChildren, type ReactNode, type RefAttributes, createContext, createElement, isValidElement, useContext } from "react";
 import {
     ToggleButton as AriaToggleButton,
     ToggleButtonGroup as AriaToggleButtonGroup,
@@ -75,12 +75,12 @@ export const ButtonGroupItem = ({
             data-icon-leading={IconLeading ? true : undefined}
             className={cx(styles.common.root, styles.sizes[size].root, className)}
         >
-            {isReactComponent(IconLeading) && <IconLeading className={cx(styles.common.icon, styles.sizes[size].icon)} />}
+            {isReactComponent(IconLeading) && createElement(IconLeading, { className: cx(styles.common.icon, styles.sizes[size].icon) } as Record<string, unknown>)}
             {isValidElement(IconLeading) && IconLeading}
 
             {children}
 
-            {isReactComponent(IconTrailing) && <IconTrailing className={cx(styles.common.icon, styles.sizes[size].icon)} />}
+            {isReactComponent(IconTrailing) && createElement(IconTrailing, { className: cx(styles.common.icon, styles.sizes[size].icon) } as Record<string, unknown>)}
             {isValidElement(IconTrailing) && IconTrailing}
         </AriaToggleButton>
     );

package/src/design_system/elements/buttons/button-utility.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { AnchorHTMLAttributes, ButtonHTMLAttributes, DetailedHTMLProps, FC, ReactNode } from "react";
-import { isValidElement } from "react";
+import { createElement, isValidElement } from "react";
 import type { Placement } from "react-aria";
 import type { ButtonProps as AriaButtonProps } from "react-aria-components";
 import { Button as AriaButton, Link as AriaLink } from "react-aria-components";
@@ -99,7 +99,7 @@ export const ButtonUtility = ({
                 className,
             )}
         >
-            {isReactComponent(Icon) && <Icon data-icon />}
+            {isReactComponent(Icon) && createElement(Icon, { 'data-icon': true } as Record<string, unknown>)}
             {isValidElement(Icon) && Icon}
         </Component>
     );

package/src/design_system/elements/buttons/button.aman.tsx

@@ -135,7 +135,7 @@ export const Button = ({
             )}
         >
             {isValidElement(IconLeading) && IconLeading}
-            {isReactComponent(IconLeading) && <IconLeading data-icon="leading" className={styles.common.icon} />}
+            {isReactComponent(IconLeading) && React.createElement(IconLeading, { 'data-icon': 'leading', className: styles.common.icon } as Record<string, unknown>)}
 
             {loading && (
                 <svg
@@ -165,7 +165,7 @@ export const Button = ({
             )}
 
             {isValidElement(IconTrailing) && IconTrailing}
-            {isReactComponent(IconTrailing) && <IconTrailing data-icon="trailing" className={styles.common.icon} />}
+            {isReactComponent(IconTrailing) && React.createElement(IconTrailing, { 'data-icon': 'trailing', className: styles.common.icon } as Record<string, unknown>)}
         </Component>
     );
 };

package/src/design_system/elements/buttons/button.tsx

@@ -232,7 +232,7 @@ export const Button = ({
         >
             {/* Leading icon */}
             {isValidElement(IconLeading) && IconLeading}
-            {isReactComponent(IconLeading) && <IconLeading data-icon="leading" className={styles.common.icon} />}
+            {isReactComponent(IconLeading) && React.createElement(IconLeading, { 'data-icon': 'leading', className: styles.common.icon } as Record<string, unknown>)}
 
             {loading && (
                 <svg
@@ -265,7 +265,7 @@ export const Button = ({
 
             {/* Trailing icon */}
             {isValidElement(IconTrailing) && IconTrailing}
-            {isReactComponent(IconTrailing) && <IconTrailing data-icon="trailing" className={styles.common.icon} />}
+            {isReactComponent(IconTrailing) && React.createElement(IconTrailing, { 'data-icon': 'trailing', className: styles.common.icon } as Record<string, unknown>)}
         </Component>
     );
 };

package/src/design_system/elements/buttons/round-button.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import type { ComponentPropsWithRef, FC } from "react";
+import { createElement } from "react";
 import { Button } from '..';
 import { cx } from '../../../utils/cx';
 import { isReactComponent } from '../../../utils/is-react-component';
@@ -20,9 +21,7 @@ export const RoundButton = ({ icon: Icon, ...props }: RoundButtonProps) => {
             )}
         >
             {props.children ??
-                (isReactComponent(Icon) ? (
-                    <Icon className="size-5 text-fg-quaternary transition-inherit-all group-hover:text-fg-quaternary_hover md:size-6" />
-                ) : null)}
+                (isReactComponent(Icon) ? createElement(Icon, { className: "size-5 text-fg-quaternary transition-inherit-all group-hover:text-fg-quaternary_hover md:size-6" } as Record<string, unknown>) : null)}
         </Button>
     );
 };

package/src/design_system/elements/carousel/carousel-base.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { CSSProperties, ComponentPropsWithRef, HTMLAttributes, KeyboardEvent, ReactNode, Ref } from "react";
-import { cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useState } from "react";
+import { cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useRef, useSyncExternalStore } from "react";
 import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
 import { cx } from '../../../utils/cx';
 
@@ -52,6 +52,14 @@ export const useCarousel = () => {
     return context;
 };
 
+// Stable default snapshot for SSR - must be a constant to avoid infinite loops
+const DEFAULT_SNAPSHOT = {
+    canScrollPrev: false,
+    canScrollNext: false,
+    selectedIndex: 0,
+    scrollSnaps: [] as number[],
+};
+
 const CarouselRoot = ({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }: ComponentPropsWithRef<"div"> & CarouselProps) => {
     const [carouselRef, api] = useEmblaCarousel(
         {
@@ -60,24 +68,58 @@ const CarouselRoot = ({ orientation = "horizontal", opts, setApi, plugins, class
         },
         plugins,
     );
-    const [canScrollPrev, setCanScrollPrev] = useState(false);
-    const [canScrollNext, setCanScrollNext] = useState(false);
-    const [selectedIndex, setSelectedIndex] = useState(0);
-    const [scrollSnaps, setScrollSnaps] = useState<number[]>([]);
+    
+    // Cache the snapshot object to avoid creating new objects on every call
+    const snapshotRef = useRef(DEFAULT_SNAPSHOT);
+    
+    const getSnapshot = useCallback(() => {
+        if (!api) {
+            return DEFAULT_SNAPSHOT;
+        }
+
+        const canScrollPrev = api.canScrollPrev();
+        const canScrollNext = api.canScrollNext();
+        const selectedIndex = api.selectedScrollSnap();
+        const scrollSnaps = api.scrollSnapList();
+        
+        // Only create a new object if values have changed
+        if (
+            snapshotRef.current.canScrollPrev !== canScrollPrev ||
+            snapshotRef.current.canScrollNext !== canScrollNext ||
+            snapshotRef.current.selectedIndex !== selectedIndex ||
+            snapshotRef.current.scrollSnaps.length !== scrollSnaps.length ||
+            snapshotRef.current.scrollSnaps.some((val, idx) => val !== scrollSnaps[idx])
+        ) {
+            snapshotRef.current = {
+                canScrollPrev,
+                canScrollNext,
+                selectedIndex,
+                scrollSnaps,
+            };
+        }
+        
+        return snapshotRef.current;
+    }, [api]);
 
-    const onInit = useCallback((api: CarouselApi) => {
-        if (!api) return;
+    // Stable server snapshot - returns the same cached object reference for SSR
+    const getServerSnapshot = useCallback(() => DEFAULT_SNAPSHOT, []);
 
-        setScrollSnaps(api.scrollSnapList());
-    }, []);
+    const subscribe = useCallback(
+        (onStoreChange: () => void) => {
+            if (!api) return () => {};
 
-    const onSelect = useCallback((api: CarouselApi) => {
-        if (!api) return;
+            api.on("select", onStoreChange);
+            api.on("reInit", onStoreChange);
 
-        setCanScrollPrev(api.canScrollPrev());
-        setCanScrollNext(api.canScrollNext());
-        setSelectedIndex(api.selectedScrollSnap());
-    }, []);
+            return () => {
+                api.off("select", onStoreChange);
+                api.off("reInit", onStoreChange);
+            };
+        },
+        [api],
+    );
+
+    const { canScrollPrev, canScrollNext, selectedIndex, scrollSnaps } = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 
     const scrollPrev = useCallback(() => {
         api?.scrollPrev();
@@ -106,21 +148,6 @@ const CarouselRoot = ({ orientation = "horizontal", opts, setApi, plugins, class
         setApi(api);
     }, [api, setApi]);
 
-    useEffect(() => {
-        if (!api) return;
-
-        onInit(api);
-        onSelect(api);
-
-        api.on("reInit", onInit);
-        api.on("reInit", onSelect);
-        api.on("select", onSelect);
-
-        return () => {
-            api?.off("select", onSelect);
-        };
-    }, [api, onInit, onSelect]);
-
     return (
         <CarouselContext.Provider
             value={{
@@ -192,7 +219,11 @@ const Trigger = ({ className, children, asChild, direction, style, ...props }: T
     const handleClick = () => {
         if (isDisabled) return;
 
-        direction === "prev" ? scrollPrev() : scrollNext();
+        if (direction === "prev") {
+            scrollPrev();
+        } else {
+            scrollNext();
+        }
     };
 
     const computedClassName = typeof className === "function" ? className({ isDisabled }) : className;

package/src/design_system/elements/carousel/carousel.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { CSSProperties, ComponentPropsWithRef, HTMLAttributes, KeyboardEvent, ReactNode, Ref } from "react";
-import { cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useState } from "react";
+import { cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useRef, useSyncExternalStore } from "react";
 import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
 import { cx } from '../../../utils/cx';
 
@@ -52,6 +52,14 @@ export const useCarousel = () => {
     return context;
 };
 
+// Stable default snapshot for SSR - must be a constant to avoid infinite loops
+const DEFAULT_SNAPSHOT = {
+    canScrollPrev: false,
+    canScrollNext: false,
+    selectedIndex: 0,
+    scrollSnaps: [] as number[],
+};
+
 const CarouselRoot = ({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }: ComponentPropsWithRef<"div"> & CarouselProps) => {
     const [carouselRef, api] = useEmblaCarousel(
         {
@@ -60,24 +68,58 @@ const CarouselRoot = ({ orientation = "horizontal", opts, setApi, plugins, class
         },
         plugins,
     );
-    const [canScrollPrev, setCanScrollPrev] = useState(false);
-    const [canScrollNext, setCanScrollNext] = useState(false);
-    const [selectedIndex, setSelectedIndex] = useState(0);
-    const [scrollSnaps, setScrollSnaps] = useState<number[]>([]);
+    
+    // Cache the snapshot object to avoid creating new objects on every call
+    const snapshotRef = useRef(DEFAULT_SNAPSHOT);
+    
+    const getSnapshot = useCallback(() => {
+        if (!api) {
+            return DEFAULT_SNAPSHOT;
+        }
+
+        const canScrollPrev = api.canScrollPrev();
+        const canScrollNext = api.canScrollNext();
+        const selectedIndex = api.selectedScrollSnap();
+        const scrollSnaps = api.scrollSnapList();
+        
+        // Only create a new object if values have changed
+        if (
+            snapshotRef.current.canScrollPrev !== canScrollPrev ||
+            snapshotRef.current.canScrollNext !== canScrollNext ||
+            snapshotRef.current.selectedIndex !== selectedIndex ||
+            snapshotRef.current.scrollSnaps.length !== scrollSnaps.length ||
+            snapshotRef.current.scrollSnaps.some((val, idx) => val !== scrollSnaps[idx])
+        ) {
+            snapshotRef.current = {
+                canScrollPrev,
+                canScrollNext,
+                selectedIndex,
+                scrollSnaps,
+            };
+        }
+        
+        return snapshotRef.current;
+    }, [api]);
 
-    const onInit = useCallback((api: CarouselApi) => {
-        if (!api) return;
+    // Stable server snapshot - returns the same cached object reference for SSR
+    const getServerSnapshot = useCallback(() => DEFAULT_SNAPSHOT, []);
 
-        setScrollSnaps(api.scrollSnapList());
-    }, []);
+    const subscribe = useCallback(
+        (onStoreChange: () => void) => {
+            if (!api) return () => {};
 
-    const onSelect = useCallback((api: CarouselApi) => {
-        if (!api) return;
+            api.on("select", onStoreChange);
+            api.on("reInit", onStoreChange);
 
-        setCanScrollPrev(api.canScrollPrev());
-        setCanScrollNext(api.canScrollNext());
-        setSelectedIndex(api.selectedScrollSnap());
-    }, []);
+            return () => {
+                api.off("select", onStoreChange);
+                api.off("reInit", onStoreChange);
+            };
+        },
+        [api],
+    );
+
+    const { canScrollPrev, canScrollNext, selectedIndex, scrollSnaps } = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 
     const scrollPrev = useCallback(() => {
         api?.scrollPrev();
@@ -106,21 +148,6 @@ const CarouselRoot = ({ orientation = "horizontal", opts, setApi, plugins, class
         setApi(api);
     }, [api, setApi]);
 
-    useEffect(() => {
-        if (!api) return;
-
-        onInit(api);
-        onSelect(api);
-
-        api.on("reInit", onInit);
-        api.on("reInit", onSelect);
-        api.on("select", onSelect);
-
-        return () => {
-            api?.off("select", onSelect);
-        };
-    }, [api, onInit, onSelect]);
-
     return (
         <CarouselContext.Provider
             value={{
@@ -192,7 +219,11 @@ const Trigger = ({ className, children, asChild, direction, style, ...props }: T
     const handleClick = () => {
         if (isDisabled) return;
 
-        direction === "prev" ? scrollPrev() : scrollNext();
+        if (direction === "prev") {
+            scrollPrev();
+        } else {
+            scrollNext();
+        }
     };
 
     const computedClassName = typeof className === "function" ? className({ isDisabled }) : className;

package/src/design_system/elements/date-picker/date-input.tsx

@@ -4,7 +4,7 @@ import type { DateInputProps as AriaDateInputProps } from "react-aria-components
 import { DateInput as AriaDateInput, DateSegment as AriaDateSegment } from "react-aria-components";
 import { cx } from '../../../utils/cx';
 
-interface DateInputProps extends Omit<AriaDateInputProps, "children"> {}
+type DateInputProps = Omit<AriaDateInputProps, "children">;
 
 export const DateInput = (props: DateInputProps) => {
     return (

package/src/design_system/elements/featured-icon/featured-icon.tsx

@@ -1,5 +1,5 @@
 import type { FC, ReactNode, Ref } from "react";
-import { isValidElement } from "react";
+import { createElement, isValidElement } from "react";
 import { cx, sortCx } from '../../../utils/cx';
 import { isReactComponent } from '../../../utils/is-react-component';
 
@@ -145,7 +145,7 @@ export const FeaturedIcon = (props: FeaturedIconProps) => {
                 props.className,
             )}
         >
-            {isReactComponent(Icon) && <Icon data-icon className="z-1" />}
+            {isReactComponent(Icon) && createElement(Icon, { 'data-icon': true, className: "z-1" } as Record<string, unknown>)}
             {isValidElement(Icon) && <div className="z-1">{Icon}</div>}
 
             {props.children}