keystone-design-bootstrap 1.0.8 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "keystone-design-bootstrap",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Keystone Design Bootstrap - Sections, Elements, and Theme System for customer websites",
   "type": "module",
   "main": "./src/index.ts",
@@ -30,7 +30,9 @@
   ],
   "scripts": {
     "build": "tsup",
-    "dev": "tsup --watch"
+    "dev": "tsup --watch",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
   },
   "peerDependencies": {
     "next": ">=15.0.0",
@@ -53,6 +55,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}
                     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/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/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, useMemo, 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/index.tsx

@@ -51,14 +51,10 @@ import { AvatarLabelGroup as BaseAvatarLabelGroup } from './avatar/avatar-label-
 import { AvatarProfilePhoto as BaseAvatarProfilePhoto } from './avatar/avatar-profile-photo';
 import { VerifiedTick as BaseVerifiedTick } from './avatar/base-components';
 import { Breadcrumb as BaseBreadcrumb } from './breadcrumb/Breadcrumb';
-import { Tabs as BaseTabs } from './tabs/tabs';
-import { TagGroup as BaseTagGroup, TagList as BaseTagList, Tag as BaseTag } from './tags/tags';
 import { FeaturedIcon as BaseFeaturedIcon } from './featured-icon/featured-icon';
 import { ProgressBar as BaseProgressBar } from './progress-indicators/progress-indicators';
 import { ProgressBarCircle as BaseProgressBarCircle } from './progress-indicators/progress-circles';
 import { CircleProgressBar as BaseCircleProgressBar } from './progress-indicators/simple-circle';
-import { SlideoutMenu as BaseSlideoutMenu } from './slideout-menus/slideout-menu';
-import { Pagination as BasePagination } from './pagination/pagination-base';
 import { PaginationDot as BasePaginationDot } from './pagination/pagination-dot';
 import { PaginationLine as BasePaginationLine } from './pagination/pagination-line';
 import { PaginationPageDefault as BasePaginationPageDefault, PaginationPageMinimalCenter as BasePaginationPageMinimalCenter } from './pagination/pagination';
@@ -74,8 +70,8 @@ import './select/select.aman';
 /**
  * Create themed component wrapper
  */
-function createThemedExport(componentName: string, BaseComponent: React.ComponentType<any>) {
-  return function ThemedComponent(props: any) {
+function createThemedExport<P extends Record<string, unknown>>(componentName: string, BaseComponent: React.ComponentType<P>) {
+  return function ThemedComponent(props: P) {
     const { theme } = useTheme();
     
     try {

package/src/design_system/elements/input/input.aman.tsx

@@ -41,9 +41,8 @@ export const InputBase = ({
     tooltipClassName,
     inputClassName,
     iconClassName,
-    isRequired: _isRequired,
     ...inputProps
-}: Omit<InputBaseProps, "label" | "hint">) => {
+}: Omit<InputBaseProps, "label" | "hint" | "isRequired">) => {
     const hasTrailingIcon = tooltip || isInvalid;
     const hasLeadingIcon = Icon;
     const context = useContext(TextFieldContext);

package/src/design_system/elements/input/input.tsx

@@ -49,10 +49,8 @@ export const InputBase = ({
     tooltipClassName,
     inputClassName,
     iconClassName,
-    // Omit this prop to avoid invalid HTML attribute warning
-    isRequired: _isRequired,
     ...inputProps
-}: Omit<InputBaseProps, "label" | "hint">) => {
+}: Omit<InputBaseProps, "label" | "hint" | "isRequired">) => {
     // Check if the input has a leading icon or tooltip
     const hasTrailingIcon = tooltip || isInvalid;
     const hasLeadingIcon = Icon;