@appcorp/shadcn 1.2.0 → 2.0.0

package/package.json

@@ -1,46 +1,12 @@
 {
   "name": "@appcorp/shadcn",
-  "version": "1.2.0",
-  "scripts": {
-    "build:next": "next build",
-    "build:storybook": "mv ../.pnp.cjs ../.pnp.cjs.bak 2>/dev/null || true && storybook build -c .storybook -o .out && mv ../.pnp.cjs.bak ../.pnp.cjs 2>/dev/null || true",
-    "build:ts": "tsc --project tsconfig.build.json",
-    "build": "yarn clean && yarn build:ts && cp package.json lib && cp README.md lib && cp yarn.lock lib",
-    "clean": "yarn rimraf ./lib",
-    "copy:deploy:files": "cp favicon.ico ./.out/ && cp assets/react-pakistan.jpeg ./.out/",
-    "deploy:storybook:ci": "concurrently \"yarn storybook:ghpages:ci\" \"sleep 15 && rm ./*out*/favicon.ico && yarn copy:deploy:files\"",
-    "deploy:storybook": "concurrently \"yarn storybook:ghpages\" \"sleep 15 && rm ./*out*/favicon.ico && yarn copy:deploy:files\"",
-    "dev": "next dev",
-    "extract": "yarn build:storybook && npx sb extract ./.out && cp ./.out/stories.json . && rm -rf ./.out",
-    "format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,json,css,md}\"",
-    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,md}\"",
-    "generate:sitemap": "scripts/generate-sitemap.sh",
-    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
-    "major": "npm version major",
-    "minor": "npm version minor",
-    "patch": "npm version patch",
-    "prepare": "husky",
-    "publish:npm": "yarn build && cd lib/ && npm publish --access public && cd ..",
-    "start": "next start",
-    "storybook": "mv ../.pnp.cjs ../.pnp.cjs.bak 2>/dev/null || true && storybook dev -p 6006",
-    "test:watch": "jest --watch",
-    "test": "jest",
-    "upgrade": "ncu -u"
-  },
-  "repository": "https://github.com/app-corp/shadcn",
-  "author": "Taimoor Khan <taimoor.m.k@live.com>",
+  "version": "2.0.0",
   "license": "MIT",
-  "devDependencies": {
-    "@ai-sdk/react": "^3",
-    "@base-ui/react": "^1.5.0",
-    "@commitlint/cli": "^20",
-    "@commitlint/config-conventional": "^20",
-    "@dnd-kit/core": "^6",
-    "@dnd-kit/modifiers": "^9",
-    "@emotion/is-prop-valid": "^1",
-    "@eslint/eslintrc": "^3",
-    "@eslint/js": "^9",
-    "@hookform/resolvers": "^5",
+  "author": "Taimoor Khan <taimoor.m.k@live.com>",
+  "repository": "https://github.com/app-corp/shadcn",
+  "type": "module",
+  "sideEffects": false,
+  "peerDependencies": {
     "@radix-ui/react-accordion": "^1",
     "@radix-ui/react-alert-dialog": "^1",
     "@radix-ui/react-aspect-ratio": "^1",
@@ -66,75 +32,28 @@
     "@radix-ui/react-switch": "^1",
     "@radix-ui/react-tabs": "^1",
     "@radix-ui/react-toggle": "^1",
-    "@react-pakistan/util-functions": "^1.25.69",
-    "@storybook/addon-docs": "^10.3.6",
-    "@storybook/addon-onboarding": "^10.3.6",
-    "@storybook/nextjs": "^10.3.6",
-    "@tabler/icons-react": "^3",
-    "@tailwindcss/postcss": "^4",
-    "@tanstack/react-table": "^8",
-    "@testing-library/dom": "^10",
-    "@testing-library/jest-dom": "^6",
-    "@testing-library/react": "^16",
-    "@testing-library/user-event": "^14",
-    "@types/color": "^4",
-    "@types/jest": "^30",
-    "@types/lodash.throttle": "^4",
-    "@types/node": "^24",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "@types/react-is": "^19",
-    "@uidotdev/usehooks": "^2",
-    "autoprefixer": "^10",
+    "@radix-ui/react-tooltip": "^1",
+    "@react-pakistan/util-functions": "^2.0.2",
     "class-variance-authority": "^0",
     "clsx": "^2",
     "cmdk": "^1",
-    "color": "^5",
-    "date-fns": "^4",
-    "dayjs": "^1",
     "embla-carousel-react": "^8",
-    "eslint": "^9",
-    "eslint-config-next": "^16",
-    "eslint-config-prettier": "^10",
-    "eslint-plugin-react-hooks": "^4",
-    "eslint-plugin-storybook": "^10.3.5",
-    "husky": "^9",
     "input-otp": "^1",
-    "jest": "^30",
-    "jest-environment-jsdom": "^30",
-    "jotai": "^2",
-    "libphonenumber-js": "^1",
-    "lint-staged": "^16",
-    "lodash.throttle": "^4",
     "lucide-react": "^0",
-    "motion": "^12",
     "next": "^16",
     "next-themes": "^0",
-    "postcss": "^8",
-    "prettier": "^3",
-    "radix-ui": "^1.4.3",
     "react": "^19",
     "react-day-picker": "^9",
     "react-dom": "^19",
     "react-dropzone": "^14",
     "react-easy-crop": "^5",
     "react-hook-form": "^7",
-    "react-is": "^19",
     "react-resizable-panels": "^3",
     "recharts": "3",
-    "rimraf": "^6",
     "sonner": "^2",
-    "storybook": "^10.3.6",
     "tailwind-merge": "^3",
-    "tailwindcss": "^4",
-    "ts-node": "^10",
-    "typescript": "^5",
-    "uuid": "^13",
-    "vaul": "^1",
-    "webpack": "5",
-    "zod": "^4"
+    "vaul": "^1"
   },
-  "packageManager": "yarn@4.14.1",
   "engines": {
     "node": "^24.0.0",
     "yarn": "4.13.0"

package/utils/transform-breadcrumbs.js

@@ -1,11 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.transformBreadcrumbs = void 0;
-var transformBreadcrumbs = function (string) {
-    var items = string.split("/").filter(Boolean);
-    return items.map(function (item) { return ({
+export const transformBreadcrumbs = (string) => {
+    const items = string.split("/").filter(Boolean);
+    return items.map((item) => ({
         label: item.charAt(0).toUpperCase() + item.slice(1).replace(/-/g, " "),
         href: "#",
-    }); });
+    }));
 };
-exports.transformBreadcrumbs = transformBreadcrumbs;

package/utils/transform-navitems.js

@@ -1,33 +1,18 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.transformNavItems = void 0;
 /**
  * Updates navItems to set isActive based on current pathname
  * Checks both main nav URLs and subItem URLs for matches
  * Also marks individual subItems as active when their URL matches
  */
-var transformNavItems = function (navItems, pathname) {
-    return navItems.map(function (navItem) {
+export const transformNavItems = (navItems, pathname) => {
+    return navItems.map((navItem) => {
         // Check if main nav item URL matches
-        var isMainActive = navItem.url !== "#" && pathname === navItem.url;
+        const isMainActive = navItem.url !== "#" && pathname === navItem.url;
         // Transform subItems to mark active ones
-        var updatedSubItems = navItem.subItems.map(function (subItem) {
-            return __assign(__assign({}, subItem), { isActive: subItem.url !== "#" && pathname === subItem.url });
+        const updatedSubItems = navItem.subItems.map((subItem) => {
+            return Object.assign(Object.assign({}, subItem), { isActive: subItem.url !== "#" && pathname === subItem.url });
         });
         // Check if any subItem is active
-        var hasActiveSubItem = updatedSubItems.some(function (subItem) { return subItem.isActive; });
-        return __assign(__assign({}, navItem), { isActive: isMainActive || hasActiveSubItem, subItems: updatedSubItems });
+        const hasActiveSubItem = updatedSubItems.some((subItem) => subItem.isActive);
+        return Object.assign(Object.assign({}, navItem), { isActive: isMainActive || hasActiveSubItem, subItems: updatedSubItems });
     });
 };
-exports.transformNavItems = transformNavItems;

package/components/aceternity-ui/apple-cards-carousel.d.ts

@@ -1,35 +0,0 @@
-import React, { JSX } from "react";
-import { ImageProps } from "next/image";
-interface AppleCardsCarouselProps {
-    items: JSX.Element[];
-    initialScroll?: number;
-}
-type Card = {
-    src: string;
-    title: string;
-    category: string;
-    content: React.ReactNode;
-};
-export declare const CarouselContext: React.Context<{
-    onCardClose: (index: number) => void;
-    currentIndex: number;
-}>;
-export declare const AppleCardsCarousel: ({ items, initialScroll, }: AppleCardsCarouselProps) => JSX.Element;
-export declare const AppleCardsCarouselMobileControls: ({ canScrollLeft, canScrollRight, onLeft, onRight, mounted, coords, }: {
-    canScrollLeft: boolean;
-    canScrollRight: boolean;
-    onLeft: () => void;
-    onRight: () => void;
-    mounted: boolean;
-    coords?: {
-        right: number;
-        top: number;
-    } | null;
-}) => React.ReactPortal | null;
-export declare const Card: ({ card, index, layout, }: {
-    card: Card;
-    index: number;
-    layout?: boolean;
-}) => JSX.Element;
-export declare const BlurImage: ({ height, width, src, className, alt, ...rest }: ImageProps) => JSX.Element;
-export {};

package/components/aceternity-ui/apple-cards-carousel.js

@@ -1,263 +0,0 @@
-"use client";
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BlurImage = exports.Card = exports.AppleCardsCarouselMobileControls = exports.AppleCardsCarousel = exports.CarouselContext = void 0;
-var react_1 = __importStar(require("react"));
-var react_dom_1 = require("react-dom");
-var icons_react_1 = require("@tabler/icons-react");
-var utils_1 = require("@/lib/utils");
-var react_2 = require("motion/react");
-var use_outside_click_1 = require("@/hooks/use-outside-click");
-exports.CarouselContext = (0, react_1.createContext)({
-    onCardClose: function () { },
-    currentIndex: 0,
-});
-var AppleCardsCarousel = function (_a) {
-    var items = _a.items, _b = _a.initialScroll, initialScroll = _b === void 0 ? 0 : _b;
-    var carouselRef = react_1.default.useRef(null);
-    var _c = react_1.default.useState(false), canScrollLeft = _c[0], setCanScrollLeft = _c[1];
-    var _d = react_1.default.useState(true), canScrollRight = _d[0], setCanScrollRight = _d[1];
-    var _e = (0, react_1.useState)(0), currentIndex = _e[0], setCurrentIndex = _e[1];
-    (0, react_1.useEffect)(function () {
-        if (carouselRef.current) {
-            carouselRef.current.scrollLeft = initialScroll;
-            checkScrollability();
-        }
-    }, [initialScroll]);
-    (0, react_1.useEffect)(function () {
-        // Ensure control enabled/disabled state is correct on mount and resize
-        try {
-            checkScrollability();
-        }
-        catch (_a) {
-            /* ignore if DOM not yet ready */
-        }
-        var onResize = function () { return checkScrollability(); };
-        window.addEventListener("resize", onResize);
-        return function () { return window.removeEventListener("resize", onResize); };
-    }, []);
-    // mounted flag for portal rendering
-    var _f = (0, react_1.useState)(false), isMounted = _f[0], setIsMounted = _f[1];
-    (0, react_1.useEffect)(function () {
-        setIsMounted(true);
-        return function () { return setIsMounted(false); };
-    }, []);
-    // controls position (viewport-fixed coords) for mobile portal
-    var _g = (0, react_1.useState)(null), controlsPos = _g[0], setControlsPos = _g[1];
-    var updateControlsPosition = function () {
-        var el = carouselRef.current;
-        if (!el)
-            return;
-        var rect = el.getBoundingClientRect();
-        // Compute viewport-based coords (use getBoundingClientRect directly)
-        // Compute viewport-based coords so controls appear under the cards on the right
-        var pad = 12;
-        var offset = 8; // px below the carousel
-        // Position fixed: distance from viewport right edge to align with carousel right
-        var right = Math.max(pad, window.innerWidth - rect.right + pad);
-        var top = rect.bottom + offset;
-        top = Math.max(pad, Math.min(top, window.innerHeight - pad));
-        setControlsPos({ right: right, top: top });
-    };
-    (0, react_1.useEffect)(function () {
-        updateControlsPosition();
-        var onResize = function () { return updateControlsPosition(); };
-        var onScroll = function () { return updateControlsPosition(); };
-        window.addEventListener("resize", onResize);
-        window.addEventListener("scroll", onScroll, { passive: true });
-        return function () {
-            window.removeEventListener("resize", onResize);
-            window.removeEventListener("scroll", onScroll);
-        };
-    }, [carouselRef.current]);
-    var checkScrollability = function () {
-        if (carouselRef.current) {
-            var _a = carouselRef.current, scrollLeft_1 = _a.scrollLeft, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth;
-            setCanScrollLeft(scrollLeft_1 > 0);
-            setCanScrollRight(scrollLeft_1 < scrollWidth - clientWidth);
-        }
-    };
-    var scrollLeft = function () {
-        if (carouselRef.current) {
-            carouselRef.current.scrollBy({ left: -300, behavior: "smooth" });
-        }
-    };
-    var scrollRight = function () {
-        if (carouselRef.current) {
-            carouselRef.current.scrollBy({ left: 300, behavior: "smooth" });
-        }
-    };
-    var handleCardClose = function (index) {
-        if (carouselRef.current) {
-            var cardWidth = isMobile() ? 230 : 384; // (md:w-96)
-            var gap = isMobile() ? 4 : 8;
-            var scrollPosition = (cardWidth + gap) * (index + 1);
-            carouselRef.current.scrollTo({
-                left: scrollPosition,
-                behavior: "smooth",
-            });
-            setCurrentIndex(index);
-        }
-    };
-    var isMobile = function () {
-        return window && window.innerWidth < 768;
-    };
-    return (react_1.default.createElement(exports.CarouselContext.Provider, { value: { onCardClose: handleCardClose, currentIndex: currentIndex } },
-        react_1.default.createElement("div", { className: "relative w-full h-auto" },
-            react_1.default.createElement("div", { className: "flex w-full overflow-x-scroll overscroll-x-auto scroll-smooth py-10 [scrollbar-width:none] md:py-20", ref: carouselRef, onScroll: checkScrollability },
-                react_1.default.createElement("div", { className: (0, utils_1.cn)("absolute right-0 z-[1000] h-auto w-[5%] overflow-hidden bg-gradient-to-l") }),
-                react_1.default.createElement("div", { className: (0, utils_1.cn)("flex flex-row justify-start gap-4 pl-4", "mx-auto max-w-7xl" // remove max-w-4xl if you want the carousel to span the full width of its container
-                    ) }, items.map(function (item, index) { return (react_1.default.createElement(react_2.motion.div, { initial: {
-                        opacity: 0,
-                        y: 20,
-                    }, animate: {
-                        opacity: 1,
-                        y: 0,
-                        transition: {
-                            duration: 0.5,
-                            delay: 0.2 * index,
-                            ease: "easeOut",
-                        },
-                    }, viewport: { once: true }, key: "card" + index, className: "rounded-3xl last:pr-[5%] md:last:pr-[33%]" }, item)); }))),
-            react_1.default.createElement("div", { className: "hidden md:flex mr-10 justify-end gap-2" },
-                react_1.default.createElement("button", { className: "relative z-40 flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 disabled:opacity-50", onClick: scrollLeft, disabled: !canScrollLeft, "aria-label": "Scroll left" },
-                    react_1.default.createElement(icons_react_1.IconArrowNarrowLeft, { className: "h-6 w-6 text-gray-500" })),
-                react_1.default.createElement("button", { className: "relative z-40 flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 disabled:opacity-50", onClick: scrollRight, disabled: !canScrollRight, "aria-label": "Scroll right" },
-                    react_1.default.createElement(icons_react_1.IconArrowNarrowRight, { className: "h-6 w-6 text-gray-500" }))),
-            isMounted && (react_1.default.createElement(exports.AppleCardsCarouselMobileControls, { canScrollLeft: canScrollLeft, canScrollRight: canScrollRight, onLeft: scrollLeft, onRight: scrollRight, mounted: isMounted, coords: controlsPos })))));
-};
-exports.AppleCardsCarousel = AppleCardsCarousel;
-// Render mobile controls via portal so fixed positioning isn't clipped
-// Portal is placed after component to avoid SSR issues (renders only on mount)
-var AppleCardsCarouselMobileControls = function (_a) {
-    var canScrollLeft = _a.canScrollLeft, canScrollRight = _a.canScrollRight, onLeft = _a.onLeft, onRight = _a.onRight, mounted = _a.mounted, coords = _a.coords;
-    if (!mounted || typeof document === "undefined")
-        return null;
-    var fallbackStyle = {
-        position: "fixed",
-        left: "50%",
-        bottom: "calc(env(safe-area-inset-bottom, 0px) + 1rem)",
-        transform: "translateX(-50%)",
-    };
-    var positionedStyle = coords
-        ? {
-            position: "fixed",
-            right: coords.right,
-            top: coords.top,
-        }
-        : undefined;
-    return (0, react_dom_1.createPortal)(react_1.default.createElement("div", { className: "z-50 flex gap-2 md:hidden", style: positionedStyle !== null && positionedStyle !== void 0 ? positionedStyle : fallbackStyle },
-        react_1.default.createElement("button", { className: "relative z-40 flex h-12 w-12 items-center justify-center rounded-full bg-gray-100 disabled:opacity-50", onClick: onLeft, disabled: !canScrollLeft, "aria-label": "Scroll left" },
-            react_1.default.createElement(icons_react_1.IconArrowNarrowLeft, { className: "h-6 w-6 text-gray-500" })),
-        react_1.default.createElement("button", { className: "relative z-40 flex h-12 w-12 items-center justify-center rounded-full bg-gray-100 disabled:opacity-50", onClick: onRight, disabled: !canScrollRight, "aria-label": "Scroll right" },
-            react_1.default.createElement(icons_react_1.IconArrowNarrowRight, { className: "h-6 w-6 text-gray-500" }))), document.body);
-};
-exports.AppleCardsCarouselMobileControls = AppleCardsCarouselMobileControls;
-var Card = function (_a) {
-    var card = _a.card, index = _a.index, _b = _a.layout, layout = _b === void 0 ? false : _b;
-    var _c = (0, react_1.useState)(false), open = _c[0], setOpen = _c[1];
-    var containerRef = (0, react_1.useRef)(null);
-    var onCardClose = (0, react_1.useContext)(exports.CarouselContext).onCardClose;
-    (0, react_1.useEffect)(function () {
-        function onKeyDown(event) {
-            if (event.key === "Escape") {
-                handleClose();
-            }
-        }
-        if (open) {
-            document.body.style.overflow = "hidden";
-        }
-        else {
-            document.body.style.overflow = "auto";
-        }
-        window.addEventListener("keydown", onKeyDown);
-        return function () { return window.removeEventListener("keydown", onKeyDown); };
-    }, [open]);
-    (0, use_outside_click_1.useOutsideClick)(containerRef, function () {
-        return handleClose();
-    });
-    var handleOpen = function () {
-        setOpen(true);
-    };
-    var handleClose = function () {
-        setOpen(false);
-        onCardClose(index);
-    };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(react_2.AnimatePresence, null, open && (react_1.default.createElement("div", { className: "fixed inset-0 z-50 h-screen overflow-auto" },
-            react_1.default.createElement(react_2.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, className: "fixed inset-0 h-full w-full bg-black/80 backdrop-blur-lg" }),
-            react_1.default.createElement(react_2.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, ref: containerRef, layoutId: layout ? "card-".concat(card.title) : undefined, className: "relative z-[60] mx-auto my-10 h-fit max-w-5xl rounded-3xl bg-white p-4 font-sans md:p-10 dark:bg-neutral-900" },
-                react_1.default.createElement("button", { className: "sticky top-4 right-0 ml-auto flex h-8 w-8 items-center justify-center rounded-full bg-black dark:bg-white", onClick: handleClose },
-                    react_1.default.createElement(icons_react_1.IconX, { className: "h-6 w-6 text-neutral-100 dark:text-neutral-900" })),
-                react_1.default.createElement(react_2.motion.p, { layoutId: layout ? "category-".concat(card.title) : undefined, className: "text-base font-medium text-black dark:text-white" }, card.category),
-                react_1.default.createElement(react_2.motion.p, { layoutId: layout ? "title-".concat(card.title) : undefined, className: "mt-4 text-2xl font-semibold text-neutral-700 md:text-5xl dark:text-white" }, card.title),
-                react_1.default.createElement("div", { className: "py-10" }, card.content))))),
-        react_1.default.createElement(react_2.motion.button, { layoutId: layout ? "card-".concat(card.title) : undefined, onClick: handleOpen, className: "relative z-10 flex h-80 w-56 flex-col items-start justify-start overflow-hidden rounded-3xl bg-gray-100 md:h-[40rem] md:w-96 dark:bg-neutral-900" },
-            react_1.default.createElement("div", { className: "pointer-events-none absolute inset-x-0 top-0 z-30 h-full bg-gradient-to-b from-black/50 via-transparent to-transparent" }),
-            react_1.default.createElement("div", { className: "relative z-40 p-8" },
-                react_1.default.createElement(react_2.motion.p, { layoutId: layout ? "category-".concat(card.category) : undefined, className: "text-left font-sans text-sm font-medium text-white md:text-base" }, card.category),
-                react_1.default.createElement(react_2.motion.p, { layoutId: layout ? "title-".concat(card.title) : undefined, className: "mt-2 max-w-xs text-left font-sans text-xl font-semibold [text-wrap:balance] text-white md:text-3xl" }, card.title)),
-            react_1.default.createElement(exports.BlurImage, { src: card.src, alt: card.title, fill: true, className: "absolute inset-0 z-10 object-cover" }))));
-};
-exports.Card = Card;
-var BlurImage = function (_a) {
-    var height = _a.height, width = _a.width, src = _a.src, className = _a.className, alt = _a.alt, rest = __rest(_a, ["height", "width", "src", "className", "alt"]);
-    var _b = (0, react_1.useState)(true), isLoading = _b[0], setLoading = _b[1];
-    return (react_1.default.createElement("img", __assign({ className: (0, utils_1.cn)("h-full w-full transition duration-300", isLoading ? "blur-sm" : "blur-0", className), onLoad: function () { return setLoading(false); }, src: src, width: width, height: height, loading: "lazy", decoding: "async", blurDataURL: typeof src === "string" ? src : undefined, alt: alt ? alt : "Background of a beautiful view" }, rest)));
-};
-exports.BlurImage = BlurImage;

package/components/shadcn-example/ai-chat/chat-interface.d.ts

@@ -1,11 +0,0 @@
-import type { ChangeEvent, FC, FormEvent } from "react";
-import type { UIMessage as Message } from "@ai-sdk/react";
-interface ChatInterfaceProps {
-    messages: Message[];
-    input: string;
-    handleInputChange: (e: ChangeEvent<HTMLInputElement>) => void;
-    handleSubmit: (e: FormEvent<HTMLFormElement>) => void;
-    isLoading: boolean;
-}
-export declare const ChatInterface: FC<ChatInterfaceProps>;
-export {};

package/components/shadcn-example/ai-chat/chat-interface.js

@@ -1,70 +0,0 @@
-"use client";
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ChatInterface = void 0;
-var react_1 = __importDefault(require("react"));
-var button_1 = require("../../../components/ui/button");
-var input_1 = require("../../../components/ui/input");
-var scroll_area_1 = require("../../../components/ui/scroll-area");
-var avatar_1 = require("../../../components/ui/avatar");
-var lucide_react_1 = require("lucide-react");
-function getMessageText(message) {
-    // UIMessage uses `parts` with text parts having { type: 'text', text }
-    var parts = message.parts || [];
-    return parts
-        .filter(function (p) { return (p === null || p === void 0 ? void 0 : p.type) === "text"; })
-        .map(function (p) { return p.text; })
-        .join("");
-}
-var ChatInterface = function (_a) {
-    var messages = _a.messages, input = _a.input, handleInputChange = _a.handleInputChange, handleSubmit = _a.handleSubmit, isLoading = _a.isLoading;
-    return (react_1.default.createElement("div", { className: "flex flex-1 flex-col min-h-0" },
-        react_1.default.createElement(scroll_area_1.ScrollArea, { className: "flex-1 min-h-0 h-full p-4 block" },
-            react_1.default.createElement("div", { className: "mx-auto max-w-6xl space-y-6 flex-1 min-h-0 flex flex-col justify-end h-full" },
-                messages.map(function (message) { return (react_1.default.createElement("div", { key: message.id, className: "flex gap-4" }, message.role === "user" ? (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement("div", { className: "flex-1" },
-                        react_1.default.createElement("div", { className: "bg-muted rounded-lg p-4" },
-                            react_1.default.createElement("p", null, getMessageText(message)))),
-                    react_1.default.createElement(avatar_1.Avatar, null,
-                        react_1.default.createElement(avatar_1.AvatarImage, { src: "/placeholder.svg?height=32&width=32" }),
-                        react_1.default.createElement(avatar_1.AvatarFallback, null, "JD")))) : (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(avatar_1.Avatar, null,
-                        react_1.default.createElement(avatar_1.AvatarFallback, { className: "bg-blue-500" }, "AI")),
-                    react_1.default.createElement("div", { className: "flex-1" },
-                        react_1.default.createElement("div", { className: "bg-muted rounded-lg border p-4" },
-                            react_1.default.createElement("p", { className: "mb-4" }, getMessageText(message)),
-                            react_1.default.createElement("div", { className: "flex items-center gap-2" },
-                                react_1.default.createElement(button_1.Button, { variant: "ghost", size: "sm", className: "h-8 w-8 p-0" },
-                                    react_1.default.createElement(lucide_react_1.Copy, { className: "h-4 w-4" })),
-                                react_1.default.createElement(button_1.Button, { variant: "ghost", size: "sm", className: "h-8 w-8 p-0" },
-                                    react_1.default.createElement(lucide_react_1.Share, { className: "h-4 w-4" })),
-                                react_1.default.createElement("div", { className: "ml-auto flex items-center gap-1" },
-                                    react_1.default.createElement(button_1.Button, { variant: "ghost", size: "sm", className: "h-8 w-8 p-0" },
-                                        react_1.default.createElement(lucide_react_1.ThumbsDown, { className: "h-4 w-4" })),
-                                    react_1.default.createElement(button_1.Button, { variant: "ghost", size: "sm", className: "h-8 w-8 p-0" },
-                                        react_1.default.createElement(lucide_react_1.ThumbsUp, { className: "h-4 w-4" })))))))))); }),
-                isLoading && (react_1.default.createElement("div", { className: "flex gap-4" },
-                    react_1.default.createElement(avatar_1.Avatar, { className: "h-8 w-8" },
-                        react_1.default.createElement(avatar_1.AvatarFallback, { className: "bg-blue-500" }, "AI")),
-                    react_1.default.createElement("div", { className: "flex-1" },
-                        react_1.default.createElement("div", { className: "bg-muted rounded-lg border p-4" },
-                            react_1.default.createElement("div", { className: "flex items-center gap-2" },
-                                react_1.default.createElement("div", { className: "bg-muted h-2 w-2 animate-bounce rounded-full" }),
-                                react_1.default.createElement("div", { className: "bg-muted h-2 w-2 animate-bounce rounded-full", style: { animationDelay: "0.1s" } }),
-                                react_1.default.createElement("div", { className: "bg-muted h-2 w-2 animate-bounce rounded-full", style: { animationDelay: "0.2s" } })))))))),
-        react_1.default.createElement("div", { className: "border-t px-4 py-2" },
-            react_1.default.createElement("div", { className: "mx-auto max-w-6xl" },
-                react_1.default.createElement("form", { onSubmit: handleSubmit, className: "relative" },
-                    react_1.default.createElement("div", { className: "bg-muted flex items-center gap-2 rounded-lg border p-2" },
-                        react_1.default.createElement(button_1.Button, { type: "button", variant: "ghost", size: "sm", className: "h-8 w-8 p-0" },
-                            react_1.default.createElement(lucide_react_1.Paperclip, { className: "h-4 w-4" })),
-                        react_1.default.createElement(input_1.Input, { value: input, onChange: handleInputChange, placeholder: "Ask me anything...", className: "flex-1 border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0", disabled: isLoading }),
-                        react_1.default.createElement(button_1.Button, { type: "button", variant: "ghost", size: "sm", className: "h-8 w-8 p-0" },
-                            react_1.default.createElement(lucide_react_1.Mic, { className: "h-4 w-4" })),
-                        react_1.default.createElement(button_1.Button, { type: "submit", size: "sm", disabled: !input.trim() || isLoading, className: "h-8 w-8 p-0" },
-                            react_1.default.createElement(lucide_react_1.Send, { className: "h-4 w-4" }))))))));
-};
-exports.ChatInterface = ChatInterface;

package/components/shadcn-example/ai-chat/index.d.ts

@@ -1,38 +0,0 @@
-import React from "react";
-import { Suggestion } from "./welcome-section";
-import { UIMessage, UseChatHelpers } from "@ai-sdk/react";
-export interface Message {
-    id: string;
-    role: "user" | "assistant";
-    parts: {
-        type: "text";
-        text: string;
-    }[];
-}
-export interface Chat {
-    id: string;
-    title: string;
-    preview: string;
-    timestamp: Date;
-    messages: Message[];
-}
-type AiChatProps = {
-    initialSelectedChatId?: string | null;
-    username?: string;
-    chats: Chat[];
-    suggestions: Suggestion[];
-    selectedChatId: string;
-    onSelectedChatIdChange: (chatId: string) => void;
-    chat: UseChatHelpers<UIMessage<unknown, Record<string, unknown>, Record<string, {
-        input: unknown;
-        output: unknown | undefined;
-    }>>>;
-    completion: {
-        input: string;
-        handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-        handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
-        isLoading: boolean;
-    };
-};
-export declare const AiChat: ({ chat, chats, completion, onSelectedChatIdChange, selectedChatId, suggestions, username, }: AiChatProps) => React.JSX.Element;
-export {};