@appcorp/shadcn 1.0.10

package/README.md

@@ -0,0 +1,138 @@
+# shadcn
+
+A modern Next.js project with shadcn/ui components, Storybook, TypeScript, and comprehensive tooling.
+
+## Tech Stack
+
+- **Framework**: [Next.js 15](https://nextjs.org/) with App Router
+- **Language**: [TypeScript](https://www.typescriptlang.org/)
+- **Styling**: [Tailwind CSS](https://tailwindcss.com/)
+- **UI Components**: [shadcn/ui](https://ui.shadcn.com/)
+- **Component Development**: [Storybook](https://storybook.js.org/)
+- **Testing**: [Jest](https://jestjs.io/) with [Testing Library](https://testing-library.com/)
+- **Package Manager**: [Yarn](https://yarnpkg.com/)
+- **Code Quality**:
+  - [ESLint](https://eslint.org/) - Linting
+  - [Prettier](https://prettier.io/) - Code formatting
+  - [Husky](https://typicode.github.io/husky/) - Git hooks
+  - [lint-staged](https://github.com/okonet/lint-staged) - Run linters on staged files
+  - [commitlint](https://commitlint.js.org/) - Commit message linting
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js 18+
+- Yarn
+
+### Installation
+
+```bash
+# Install dependencies
+yarn install
+
+# Run the development server
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) to see your application.
+
+## Available Scripts
+
+- `yarn dev` - Start the development server
+- `yarn build` - Build the production application
+- `yarn start` - Start the production server
+- `yarn lint` - Run ESLint
+- `yarn format` - Format code with Prettier
+- `yarn format:check` - Check code formatting
+- `yarn test` - Run tests
+- `yarn test:watch` - Run tests in watch mode
+- `yarn storybook` - Start Storybook development server
+- `yarn build-storybook` - Build Storybook for production
+
+## Project Structure
+
+```
+shadcn/
+├── .husky/              # Git hooks
+├── .storybook/          # Storybook configuration
+├── .vscode/             # VS Code settings (format on save enabled)
+├── src/
+│   ├── __tests__/       # Test files
+│   ├── app/             # Next.js app directory
+│   ├── components/      # React components
+│   │   └── ui/          # shadcn/ui components
+│   ├── lib/             # Utility functions
+│   └── stories/         # Storybook stories
+├── components.json      # shadcn/ui configuration
+├── jest.config.ts       # Jest configuration
+├── next.config.ts       # Next.js configuration
+├── tailwind.config.ts   # Tailwind CSS configuration
+└── tsconfig.json        # TypeScript configuration
+```
+
+## Code Quality
+
+### Format on Save
+
+This project is configured to format code on save in VS Code. Install the recommended extensions:
+
+- Prettier - Code formatter
+- ESLint
+- Tailwind CSS IntelliSense
+
+### Git Hooks
+
+The project uses Husky to enforce code quality:
+
+- **pre-commit**: Runs lint-staged to format and lint staged files
+- **commit-msg**: Validates commit messages using conventional commits format
+
+### Commit Message Format
+
+Follow the [Conventional Commits](https://www.conventionalcommits.org/) specification:
+
+```
+<type>: <description>
+
+[optional body]
+
+[optional footer]
+```
+
+Types: `feat`, `fix`, `docs`, `style`, `refactor`, `perf`, `test`, `build`, `ci`, `chore`, `revert`
+
+Example:
+
+```bash
+git commit -m "feat: add button component"
+```
+
+## shadcn/ui Components
+
+This project includes the shadcn/ui component library. Add new components using:
+
+```bash
+npx shadcn@latest add [component-name]
+```
+
+Note: Due to network restrictions, you may need to add components manually. The utility function for className merging is available at `src/lib/utils.ts`.
+
+## Storybook
+
+View and develop components in isolation:
+
+```bash
+yarn storybook
+```
+
+Open [http://localhost:6006](http://localhost:6006) to see Storybook.
+
+## Testing
+
+Run tests:
+
+```bash
+yarn test          # Run all tests
+yarn test:watch    # Run tests in watch mode
+```

package/app/layout.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { Metadata } from "next";
+import "./globals.css";
+export declare const metadata: Metadata;
+export default function RootLayout({ children, }: Readonly<{
+    children: React.ReactNode;
+}>): React.JSX.Element;

package/app/layout.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.metadata = void 0;
+exports.default = RootLayout;
+var react_1 = __importDefault(require("react"));
+require("./globals.css");
+exports.metadata = {
+    title: "ShadCN/UI App",
+    description: "Next.js app with ShadCN/UI components",
+};
+function RootLayout(_a) {
+    var children = _a.children;
+    return (react_1.default.createElement("html", { lang: "en" },
+        react_1.default.createElement("body", null, children)));
+}

package/app/page.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export default function Home(): React.JSX.Element;

package/app/page.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Home;
+var react_1 = __importDefault(require("react"));
+function Home() {
+    return (react_1.default.createElement("main", { className: "flex min-h-screen flex-col items-center justify-center p-24" },
+        react_1.default.createElement("div", { className: "z-10 w-full max-w-5xl items-center justify-between font-mono text-sm" },
+            react_1.default.createElement("h1", { className: "text-4xl font-bold text-center mb-8" }, "Welcome to Next.js with ShadCN/UI"),
+            react_1.default.createElement("p", { className: "text-center text-muted-foreground mb-8" },
+                "Get started by editing",
+                " ",
+                react_1.default.createElement("code", { className: "font-mono font-bold" }, "src/app/page.tsx")))));
+}

package/components/badge.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+export { Badge, badgeVariants };

package/components/badge.js

@@ -0,0 +1,82 @@
+"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.badgeVariants = void 0;
+exports.Badge = Badge;
+var React = __importStar(require("react"));
+var react_slot_1 = require("@radix-ui/react-slot");
+var class_variance_authority_1 = require("class-variance-authority");
+var utils_1 = require("../lib/utils");
+var badgeVariants = (0, class_variance_authority_1.cva)("inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden", {
+    variants: {
+        variant: {
+            default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+            secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+            destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+            outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+exports.badgeVariants = badgeVariants;
+function Badge(_a) {
+    var className = _a.className, variant = _a.variant, _b = _a.asChild, asChild = _b === void 0 ? false : _b, props = __rest(_a, ["className", "variant", "asChild"]);
+    var Comp = asChild ? react_slot_1.Slot : "span";
+    return (React.createElement(Comp, __assign({ "data-slot": "badge", className: (0, utils_1.cn)(badgeVariants({ variant: variant }), className) }, props)));
+}

package/components/button.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
+    size?: "icon" | "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+export { Button, buttonVariants };

package/components/button.js

@@ -0,0 +1,91 @@
+"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.buttonVariants = void 0;
+exports.Button = Button;
+var React = __importStar(require("react"));
+var react_slot_1 = require("@radix-ui/react-slot");
+var class_variance_authority_1 = require("class-variance-authority");
+var utils_1 = require("../lib/utils");
+var buttonVariants = (0, class_variance_authority_1.cva)("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
+    variants: {
+        variant: {
+            default: "bg-primary text-primary-foreground hover:bg-primary/90",
+            destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+            outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+            secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+            ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+            link: "text-primary underline-offset-4 hover:underline",
+        },
+        size: {
+            default: "h-9 px-4 py-2 has-[>svg]:px-3",
+            sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+            lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+            icon: "size-9",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+exports.buttonVariants = buttonVariants;
+function Button(_a) {
+    var className = _a.className, variant = _a.variant, size = _a.size, _b = _a.asChild, asChild = _b === void 0 ? false : _b, props = __rest(_a, ["className", "variant", "size", "asChild"]);
+    var Comp = asChild ? react_slot_1.Slot : "button";
+    return (React.createElement(Comp, __assign({ "data-slot": "button", className: (0, utils_1.cn)(buttonVariants({ variant: variant, size: size, className: className })) }, props)));
+}

package/components/card.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+declare function Card({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardAction({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };

package/components/card.js

@@ -0,0 +1,94 @@
+"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.Card = Card;
+exports.CardHeader = CardHeader;
+exports.CardFooter = CardFooter;
+exports.CardTitle = CardTitle;
+exports.CardAction = CardAction;
+exports.CardDescription = CardDescription;
+exports.CardContent = CardContent;
+var React = __importStar(require("react"));
+var utils_1 = require("../lib/utils");
+function Card(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (React.createElement("div", __assign({ "data-slot": "card", className: (0, utils_1.cn)("bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm", className) }, props)));
+}
+function CardHeader(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (React.createElement("div", __assign({ "data-slot": "card-header", className: (0, utils_1.cn)("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6", className) }, props)));
+}
+function CardTitle(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (React.createElement("div", __assign({ "data-slot": "card-title", className: (0, utils_1.cn)("leading-none font-semibold", className) }, props)));
+}
+function CardDescription(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (React.createElement("div", __assign({ "data-slot": "card-description", className: (0, utils_1.cn)("text-muted-foreground text-sm", className) }, props)));
+}
+function CardAction(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (React.createElement("div", __assign({ "data-slot": "card-action", className: (0, utils_1.cn)("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className) }, props)));
+}
+function CardContent(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (React.createElement("div", __assign({ "data-slot": "card-content", className: (0, utils_1.cn)("px-6", className) }, props)));
+}
+function CardFooter(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (React.createElement("div", __assign({ "data-slot": "card-footer", className: (0, utils_1.cn)("flex items-center px-6 [.border-t]:pt-6", className) }, props)));
+}

package/components/carousel.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
+import { Button } from "./button";
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+type CarouselProps = {
+    opts?: CarouselOptions;
+    plugins?: CarouselPlugin;
+    orientation?: "horizontal" | "vertical";
+    setApi?: (api: CarouselApi) => void;
+};
+declare function Carousel({ orientation, opts, setApi, plugins, className, children, ...props }: React.ComponentProps<"div"> & CarouselProps): React.JSX.Element;
+declare function CarouselContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CarouselItem({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CarouselPrevious({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
+declare function CarouselNext({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
+export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, };