@kadoui/react 1.0.0

package/dist/components/Toast/ToastRoot.jsx

@@ -0,0 +1,38 @@
+"use client";
+import { createPortal } from "react-dom";
+import { useMounted } from "@mantine/hooks";
+import { useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { ToastBox } from "./ToastBox";
+import { useToastStore } from "./toastStore";
+export function ToastRoot({ defaultDuration }) {
+    const mounted = useMounted();
+    const toasts = useToastStore(store => store.toasts);
+    const remove = useToastStore(store => store.remove);
+    useEffect(() => {
+        if (!toasts.length) {
+            return;
+        }
+        ;
+        const lastToast = toasts[toasts.length - 1];
+        if (lastToast) {
+            const duration = lastToast?.duration || defaultDuration || 2_000;
+            setTimeout(() => {
+                remove(lastToast.id);
+            }, duration);
+        }
+    }, [toasts]);
+    if (!mounted) {
+        return null;
+    }
+    ;
+    return createPortal(<>
+      <div className="max-h-screen py-3 space-y-3 fixed top-0 left-center w-fit">
+        <AnimatePresence>
+          {toasts.toReversed().map(item => (<motion.div key={item.id} className="origin-top" initial={{ opacity: 0, y: -10, scale: 0 }} animate={{ opacity: 1, y: 0, scale: 1 }} exit={{ opacity: 0, y: -10, scale: 0 }}>
+              <ToastBox toast={item}/>
+            </motion.div>))}
+        </AnimatePresence>
+      </div>
+    </>, document.body);
+}

package/dist/components/Toast/toastStore.d.ts

@@ -0,0 +1,11 @@
+import { ToastT } from "./ToastRoot";
+type NewToastT = Omit<ToastT, "id">;
+type UseToastStoreT = {
+    toasts: ToastT[];
+    add: (newToast: NewToastT) => void;
+    remove: (id: ToastT["id"]) => void;
+};
+export declare const useToastStore: import("zustand").UseBoundStore<import("zustand").StoreApi<UseToastStoreT>>;
+export declare const addToast: (newToast: NewToastT) => void;
+export {};
+//# sourceMappingURL=toastStore.d.ts.map

package/dist/components/Toast/toastStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toastStore.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/toastStore.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,KAAK,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;AAEpC,KAAK,cAAc,GAAG;IACpB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,GAAG,EAAE,CAAC,QAAQ,EAAE,SAAS,KAAK,IAAI,CAAC;IACnC,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,aAAa,6EAIvB,CAAC;AAEJ,eAAO,MAAM,QAAQ,GAAI,UAAU,SAAS,SAE3C,CAAA"}

package/dist/components/Toast/toastStore.js

@@ -0,0 +1,10 @@
+import { nanoid } from "nanoid";
+import { create } from "zustand";
+export const useToastStore = create((set) => ({
+    toasts: [],
+    add: (newToast) => set(prev => ({ toasts: [...prev.toasts, { id: nanoid(), ...newToast }] })),
+    remove: id => set(prev => ({ toasts: prev.toasts.filter(item => item.id !== id) })),
+}));
+export const addToast = (newToast) => {
+    useToastStore.getState().add(newToast);
+};

package/dist/components/Toggle/Toggle.d.ts

@@ -0,0 +1,6 @@
+import { ToggleRoot } from "./ToggleRoot";
+import { ToggleSwitch } from "./ToggleSwitch";
+export declare const Toggle: typeof ToggleRoot & {
+    Switch: typeof ToggleSwitch;
+};
+//# sourceMappingURL=Toggle.d.ts.map

package/dist/components/Toggle/Toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/Toggle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,eAAO,MAAM,MAAM;;CAEjB,CAAC"}

package/dist/components/Toggle/Toggle.js

@@ -0,0 +1,5 @@
+import { ToggleRoot } from "./ToggleRoot";
+import { ToggleSwitch } from "./ToggleSwitch";
+export const Toggle = Object.assign(ToggleRoot, {
+    Switch: ToggleSwitch
+});

package/dist/components/Toggle/ToggleContext.d.ts

@@ -0,0 +1,8 @@
+import { Dispatch, SetStateAction } from "react";
+export type ToggleContextT = {
+    isToggled: boolean;
+    setToggled: Dispatch<SetStateAction<boolean>>;
+    disabled?: boolean;
+};
+export declare const ToggleContext: import("react").Context<ToggleContextT>;
+//# sourceMappingURL=ToggleContext.d.ts.map

package/dist/components/Toggle/ToggleContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleContext.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/ToggleContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEhE,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAA;AAED,eAAO,MAAM,aAAa,yCAAsD,CAAC"}

package/dist/components/Toggle/ToggleContext.js

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export const ToggleContext = createContext({});

package/dist/components/Toggle/ToggleRoot.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from "react";
+export type ToggleRootPropsT = PropsWithChildren & {
+    defaultToggled?: boolean;
+    onChange?: (toggled: boolean) => void;
+    disabled?: boolean;
+};
+export declare function ToggleRoot({ children, defaultToggled, disabled, onChange }: ToggleRootPropsT): import("react").JSX.Element;
+//# sourceMappingURL=ToggleRoot.d.ts.map

package/dist/components/Toggle/ToggleRoot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleRoot.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/ToggleRoot.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAY,MAAM,OAAO,CAAA;AAInD,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,GAAG;IACjD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAA;AAED,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,cAAsB,EAAE,QAAgB,EAAE,QAAQ,EAAE,EAAE,gBAAgB,+BAa5G"}

package/dist/components/Toggle/ToggleRoot.jsx

@@ -0,0 +1,13 @@
+"use client";
+import { useState } from "react";
+import { ToggleContext } from "./ToggleContext";
+export function ToggleRoot({ children, defaultToggled = false, disabled = false, onChange }) {
+    const [isToggled, setToggled] = useState(defaultToggled);
+    const handleToggle = (newValue) => {
+        setToggled(newValue);
+        onChange?.(newValue);
+    };
+    return (<ToggleContext value={{ isToggled, disabled, setToggled: () => handleToggle }}>
+      {children}
+    </ToggleContext>);
+}

package/dist/components/Toggle/ToggleSwitch.d.ts

@@ -0,0 +1,4 @@
+import { HTMLAttributes } from "react";
+export type ToggleSwitchPropsT = HTMLAttributes<HTMLButtonElement>;
+export declare function ToggleSwitch({ onClick, ...p }: ToggleSwitchPropsT): import("react").JSX.Element;
+//# sourceMappingURL=ToggleSwitch.d.ts.map

package/dist/components/Toggle/ToggleSwitch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleSwitch.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/ToggleSwitch.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAO,MAAM,OAAO,CAAC;AAI5C,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,iBAAiB,CAAC,CAAC;AAEnE,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,GAAG,CAAC,EAAE,EAAE,kBAAkB,+BAgCjE"}

package/dist/components/Toggle/ToggleSwitch.jsx

@@ -0,0 +1,23 @@
+"use client";
+import { use } from "react";
+import { ToggleContext } from "./ToggleContext";
+export function ToggleSwitch({ onClick, ...p }) {
+    const { isToggled, setToggled, disabled } = use(ToggleContext);
+    const handleClick = (ev) => {
+        if (!disabled) {
+            onClick?.(ev);
+            setToggled(!isToggled);
+        }
+    };
+    const handleKeyDown = (ev) => {
+        if ((ev.key === " " || ev.key === "Enter") && !disabled) {
+            ev.preventDefault();
+            setToggled(!isToggled);
+        }
+    };
+    return (<button type="button" role="switch" disabled={disabled} onClick={handleClick} aria-checked={isToggled} onKeyDown={handleKeyDown} {...p}>
+      <span className={isToggled ? "toggle-track-on" : "toggle-track-off"}>
+        <span className={isToggled ? "toggle-thumb-on" : "toggle-thumb-off"}/>
+      </span>
+    </button>);
+}

package/dist/index.d.ts

@@ -0,0 +1,29 @@
+export * from "./components/AccessNavigation/AccessNavigation";
+export * from "./components/Accordion/Accordion";
+export * from "./components/Affix/Affix";
+export * from "./components/Breadcrumbs/Breadcrumbs";
+export * from "./components/Carousel/Carousel";
+export * from "./components/ClientOnly/ClientOnly";
+export * from "./components/Clipboard/Clipboard";
+export * from "./components/ContextMenu/ContextMenu";
+export * from "./components/Drawer/Drawer";
+export * from "./components/Dropdown/Dropdown";
+export * from "./components/LinkLoader/LinkLoader";
+export * from "./components/Modal/Modal";
+export * from "./components/Otp/Otp";
+export * from "./components/Pagination/Pagination";
+export * from "./components/PasswordInput/PasswordInput";
+export * from "./components/Portal/Portal";
+export * from "./components/Progress/Progress";
+export * from "./components/QrCode/QrCode";
+export * from "./components/Rating/Rating";
+export * from "./components/Sheet/Sheet";
+export * from "./components/ShowMore/ShowMore";
+export * from "./components/Slide/Slide";
+export * from "./components/Spoiler/Spoiler";
+export * from "./components/Steps/Steps";
+export * from "./components/Swap/Swap";
+export * from "./components/Tabs/Tabs";
+export * from "./components/Toast/Toast";
+export * from "./components/Toggle/Toggle";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gDAAgD,CAAC;AAC/D,cAAc,kCAAkC,CAAC;AACjD,cAAc,0BAA0B,CAAC;AACzC,cAAc,sCAAsC,CAAC;AACrD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,kCAAkC,CAAC;AACjD,cAAc,sCAAsC,CAAC;AACrD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oCAAoC,CAAC;AACnD,cAAc,0CAA0C,CAAC;AACzD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC"}

package/dist/index.js

@@ -0,0 +1,28 @@
+export * from "./components/AccessNavigation/AccessNavigation";
+export * from "./components/Accordion/Accordion";
+export * from "./components/Affix/Affix";
+export * from "./components/Breadcrumbs/Breadcrumbs";
+export * from "./components/Carousel/Carousel";
+export * from "./components/ClientOnly/ClientOnly";
+export * from "./components/Clipboard/Clipboard";
+export * from "./components/ContextMenu/ContextMenu";
+export * from "./components/Drawer/Drawer";
+export * from "./components/Dropdown/Dropdown";
+export * from "./components/LinkLoader/LinkLoader";
+export * from "./components/Modal/Modal";
+export * from "./components/Otp/Otp";
+export * from "./components/Pagination/Pagination";
+export * from "./components/PasswordInput/PasswordInput";
+export * from "./components/Portal/Portal";
+export * from "./components/Progress/Progress";
+export * from "./components/QrCode/QrCode";
+export * from "./components/Rating/Rating";
+export * from "./components/Sheet/Sheet";
+export * from "./components/ShowMore/ShowMore";
+export * from "./components/Slide/Slide";
+export * from "./components/Spoiler/Spoiler";
+export * from "./components/Steps/Steps";
+export * from "./components/Swap/Swap";
+export * from "./components/Tabs/Tabs";
+export * from "./components/Toast/Toast";
+export * from "./components/Toggle/Toggle";

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@kadoui/react",
+  "version": "1.0.0",
+  "description": "Kadoui primitive components for React",
+  "author": "Jstation",
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "build": "tsc"
+  },
+  "exports": {
+    ".": "./dist/index.js"
+  },
+  "keywords": [
+    "@kadoui/react",
+    "kado",
+    "ui",
+    "react",
+    "next",
+    "primitive",
+    "component"
+  ],
+  "dependencies": {
+    "@kadoui/utils": "workspace:*",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "next": "15.4.5",
+    "@mantine/hooks": "^8.1.3",
+    "framer-motion": "^12.23.0",
+    "lucide-react": "^0.525.0",
+    "qrcode": "^1.5.4",
+    "zustand": "^5.0.6",
+    "nanoid": "^5.1.5"
+  },
+  "devDependencies": {
+    "@repo/tsconfig": "workspace:*",
+    "typescript": "^5",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@types/qrcode": "^1.5.5"
+  }
+}

package/src/components/AccessNavigation/AccessNavigation.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { HTMLAttributes, KeyboardEvent } from "react";
+import { selectAccessibleChildren } from "@kadoui/utils";
+
+export type AccessNavigationPropsT = HTMLAttributes<HTMLDivElement> & {
+  direction?: "y" | "x";
+};
+
+export function AccessNavigation({ direction = "y", dir, onKeyDown, ...p }: AccessNavigationPropsT) {
+  const handleKeyDown = (ev: KeyboardEvent<HTMLDivElement>) => {
+    const focusableChildren = selectAccessibleChildren(ev.currentTarget);
+
+    if (!focusableChildren.length) {
+      return;
+    }
+
+    const currentDir: "ltr" | "rtl" = (dir || document.documentElement.getAttribute("dir") || "ltr") as ("ltr" | "rtl");
+
+    const currentIndex = focusableChildren.findIndex((item) => item === document.activeElement);
+
+    if (ev.key === (direction === "y" ? "ArrowDown" : (currentDir === "ltr" ? "ArrowRight" : "ArrowLeft"))) {
+      ev.preventDefault();
+      const nextIndex =
+        currentIndex === -1 || currentIndex === focusableChildren.length - 1 ? 0 : currentIndex + 1;
+      focusableChildren[nextIndex]?.focus();
+    }
+
+    if (ev.key === (direction === "y" ? "ArrowUp" : (currentDir === "ltr" ? "ArrowLeft" : "ArrowRight"))) {
+      ev.preventDefault();
+      const prevIndex = currentIndex <= 0 ? focusableChildren.length - 1 : currentIndex - 1;
+      focusableChildren[prevIndex]?.focus();
+    }
+  }
+
+  return (
+    <div
+      dir={dir}
+      onKeyDown={ev => {
+        onKeyDown?.(ev);
+        handleKeyDown(ev);
+      }}
+      {...p}
+    />
+  )
+}

package/src/components/Accordion/Accordion.ts

@@ -0,0 +1,8 @@
+import { AccordionBody } from "./AccordionBody";
+import { AccordionRoot } from "./AccordionRoot";
+import { AccordionToggle } from "./AccordionToggle";
+
+export const Accordion = Object.assign(AccordionRoot, {
+  Toggle: AccordionToggle,
+  Body: AccordionBody
+});

package/src/components/Accordion/AccordionBody.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { cn } from "@kadoui/utils";
+import { ReactNode, use } from "react";
+import { AnimatePresence, HTMLMotionProps, motion } from "framer-motion";
+
+import { AccordionContext } from "./AccordionContext";
+
+export type AccordionBodyPropsT = HTMLMotionProps<"div">;
+
+export function AccordionBody({ children, className, ...props }: AccordionBodyPropsT) {
+  const { isOpen } = use(AccordionContext);
+
+  return (
+    <AnimatePresence>
+      {isOpen ?
+        <motion.div
+          className={cn("overflow-hidden", className)}
+          initial={{ height: 0, opacity: 0 }}
+          animate={{ height: "auto", opacity: 1 }}
+          exit={{ height: 0, opacity: 0 }}
+          {...props}
+        >
+          <div className="m-3">
+            {children as ReactNode}
+          </div>
+        </motion.div>
+        : null}
+    </AnimatePresence>
+  )
+}

package/src/components/Accordion/AccordionContext.ts

@@ -0,0 +1,8 @@
+import { createContext, Dispatch, SetStateAction } from "react";
+
+export type AccordionContextT = {
+  isOpen: boolean;
+  setOpen: Dispatch<SetStateAction<boolean>>;
+}
+
+export const AccordionContext = createContext<AccordionContextT>({} as AccordionContextT)

package/src/components/Accordion/AccordionRoot.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { PropsWithChildren, useState } from "react";
+
+import { AccordionContext } from "./AccordionContext";
+
+export type AccordionRootPropsT = PropsWithChildren;
+
+export function AccordionRoot({ children }: AccordionRootPropsT) {
+  const [isOpen, setOpen] = useState(false);
+
+  return (
+    <AccordionContext value={{ isOpen, setOpen }}>
+      {children}
+    </AccordionContext>
+  )
+}

package/src/components/Accordion/AccordionToggle.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { ChevronRightIcon } from "lucide-react";
+import { HTMLAttributes, ReactNode, use } from "react";
+
+import { AccordionContext } from "./AccordionContext";
+
+export type AccordionTogglePropsT = HTMLAttributes<HTMLButtonElement> & {
+  icon?: ReactNode;
+}
+
+export function AccordionToggle({ icon, children, onClick, ...props }: AccordionTogglePropsT) {
+  const { isOpen, setOpen } = use(AccordionContext);
+
+  return (
+    <button
+      onClick={ev => {
+        onClick?.(ev)
+        setOpen(prev => !prev)
+      }}
+      {...props}
+    >
+      <span className={`transition-transform ${isOpen ? "rotate-90" : ""}`}>
+        {icon || <ChevronRightIcon className="compatible-icon" />}
+      </span>
+      {children}
+    </button>
+  )
+}

package/src/components/Affix/Affix.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { cn } from "@kadoui/utils";
+import { ChevronUpIcon } from "lucide-react";
+import { useState, useEffect, HTMLAttributes } from "react";
+
+export type AffixPropsT = HTMLAttributes<HTMLButtonElement>
+
+export const Affix = ({ className, onClick, "aria-label": ariaLabel, children, ...props }: AffixPropsT) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const [lastScrollY, setLastScrollY] = useState(0);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const currentScrollY = window.scrollY;
+      const viewportHeight = window.innerHeight;
+      const scrollThreshold = viewportHeight * 0.5;
+
+      if (currentScrollY > scrollThreshold && currentScrollY > lastScrollY) {
+        setIsVisible(true);
+      } else if (currentScrollY < lastScrollY && currentScrollY < scrollThreshold) {
+        setIsVisible(false);
+      }
+
+      setLastScrollY(currentScrollY);
+    };
+
+    window.addEventListener("scroll", handleScroll, {
+      passive: true
+    });
+
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [lastScrollY]);
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth"
+    });
+  };
+
+  return (
+    <button
+      onClick={ev => {
+        onClick?.(ev)
+        scrollToTop()
+      }}
+      aria-label={ariaLabel || "Scroll to top"}
+      className={cn(
+        "fixed bottom-3 right-4 transition-all z-50",
+        isVisible ? "" : "opacity-0 translate-y-3 pointer-events-none",
+        className
+      )}
+      {...props}
+    >
+      {children || <ChevronUpIcon className="compatible-icon" />}
+    </button>
+  );
+}

package/src/components/Breadcrumbs/Breadcrumbs.ts

@@ -0,0 +1,6 @@
+import { BreadcrumbsItem } from "./BreadcrumbsItem";
+import { BreadcrumbsRoot } from "./BreadcrumbsRoot";
+
+export const Breadcrumbs = Object.assign(BreadcrumbsRoot, {
+  Item: BreadcrumbsItem,
+});

package/src/components/Breadcrumbs/BreadcrumbsContext.ts

@@ -0,0 +1,7 @@
+import { createContext, ReactNode } from "react";
+
+export type BreadcrumbsContextT = {
+  separator: ReactNode;
+}
+
+export const BreadcrumbsContext = createContext<BreadcrumbsContextT>({} as BreadcrumbsContextT);

package/src/components/Breadcrumbs/BreadcrumbsItem.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import { cn } from "@kadoui/utils";
+import { type HTMLAttributes, use } from "react";
+
+import { BreadcrumbsContext } from "./BreadcrumbsContext";
+
+export type BreadcrumbsItemPropsT = HTMLAttributes<HTMLDivElement> & {
+  isLast?: boolean;
+}
+
+export function BreadcrumbsItem({ isLast = false, className, children, ...p }: BreadcrumbsItemPropsT) {
+  const { separator } = use(BreadcrumbsContext);
+
+  return (
+    <div
+      className={cn("f-center gap-1.5", className)}
+      {...p}
+    >
+      {children}
+      {!isLast && separator}
+    </div>
+  )
+}

package/src/components/Breadcrumbs/BreadcrumbsRoot.tsx

@@ -0,0 +1,21 @@
+"use client"
+
+import { cn } from "@kadoui/utils";
+import type { HTMLAttributes, ReactNode } from "react";
+
+import { BreadcrumbsContext } from "./BreadcrumbsContext";
+
+export type BreadcrumbsRootPropsT = HTMLAttributes<HTMLElement> & {
+  separator?: ReactNode;
+}
+
+export function BreadcrumbsRoot({ separator = "/", className, ...p }: BreadcrumbsRootPropsT) {
+  return (
+    <BreadcrumbsContext value={{ separator }}>
+      <nav
+        className={cn("f-align gap-3", className)}
+        {...p}
+      />
+    </BreadcrumbsContext>
+  )
+}

package/src/components/Carousel/Carousel.ts

@@ -0,0 +1,6 @@
+import { CarouselRoot } from "./CarouselRoot";
+import { CarouselContainer } from "./CarouselContainer";
+
+export const Carousel = Object.assign(CarouselRoot, {
+  Container: CarouselContainer
+});

package/src/components/Carousel/CarouselContainer.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { cn } from "@kadoui/utils";
+import { HTMLAttributes, use } from "react";
+
+import { CarouselContext } from "./CarouselContext";
+
+export type CarouselContainerPropsT = HTMLAttributes<HTMLDivElement>;
+
+export function CarouselContainer({ children, className, ...p }: CarouselContainerPropsT) {
+  const { scrollRef } = use(CarouselContext);
+
+  return (
+    <div ref={scrollRef} className={cn("f-align-scroll", className)} {...p}>
+      {children}
+    </div>
+  );
+}

package/src/components/Carousel/CarouselContext.ts

@@ -0,0 +1,7 @@
+import { createContext, RefObject } from "react";
+
+export type CarouselContextPropsT = {
+  scrollRef: RefObject<HTMLDivElement | null>;
+}
+
+export const CarouselContext = createContext<CarouselContextPropsT>({} as CarouselContextPropsT);

package/src/components/Carousel/CarouselRoot.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { cn } from "@kadoui/utils";
+import { HTMLAttributes, useEffect, useRef, useState } from "react";
+
+import { CarouselContext } from "./CarouselContext";
+
+export type CarouselRootPropsT = HTMLAttributes<HTMLDivElement>;
+
+export function CarouselRoot({ children, className, ...props }: CarouselRootPropsT) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [leftOpacity, setLeftOpacity] = useState(0);
+  const [rightOpacity, setRightOpacity] = useState(1);
+
+  const updateFade = () => {
+    const el = scrollRef.current;
+    if (!el) return;
+
+    const { scrollLeft, scrollWidth, clientWidth } = el;
+    const maxScroll = scrollWidth - clientWidth;
+
+    if (maxScroll <= 0) {
+      setLeftOpacity(0);
+      setRightOpacity(0);
+      return;
+    }
+
+    const scrollRatio = Math.abs(+(scrollLeft / maxScroll));
+
+    const left = Math.min(1, scrollRatio * 2);
+    const right = Math.min(1, (1 - scrollRatio) * 2);
+
+    setLeftOpacity(+left.toFixed(1));
+    setRightOpacity(+right.toFixed(1));
+  };
+
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+
+    updateFade();
+
+    el.addEventListener("scroll", updateFade);
+    window.addEventListener("resize", updateFade);
+
+    return () => {
+      el.removeEventListener("scroll", updateFade);
+      window.removeEventListener("resize", updateFade);
+    };
+  }, []);
+
+  return (
+    <CarouselContext value={{ scrollRef }}>
+      <div className={cn("relative", className)} {...props}>
+        {/* Left Fade */}
+        <div
+          className="pointer-events-none absolute right-0 top-0 h-full w-1/6 bg-gradient-to-l from-background from-5% to-transparent z-10 transition-opacity"
+          style={{ opacity: leftOpacity }}
+        />
+        {/* --- */}
+
+        {/* Scrollable container */}
+        {children}
+        {/* --- */}
+
+        {/* Right Fade */}
+        <div
+          className="pointer-events-none absolute left-0 top-0 h-full w-1/6 bg-gradient-to-r from-background from-5% to-transparent z-10 transition-opacity"
+          style={{ opacity: rightOpacity }}
+        />
+        {/* --- */}
+      </div>
+    </CarouselContext>
+  );
+}