ic-ai-component-v0 0.1.0

package/README.md

@@ -0,0 +1 @@
+# ai-components-v0

package/dist/index.cjs

@@ -0,0 +1,259 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Button: () => Button,
+  Card: () => Card,
+  CardContent: () => CardContent,
+  CardDescription: () => CardDescription,
+  CardFooter: () => CardFooter,
+  CardHeader: () => CardHeader,
+  CardTitle: () => CardTitle,
+  Input: () => Input,
+  buttonVariants: () => buttonVariants,
+  cn: () => cn
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/ui/button.tsx
+var React = __toESM(require("react"), 1);
+var import_react_slot = require("@radix-ui/react-slot");
+var import_class_variance_authority = require("class-variance-authority");
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/ui/button.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority.cva)(
+  "inline-flex items-center justify-center gap-1 whitespace-nowrap font-medium transition-all focus-visible:outline-none disabled:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        primary: "",
+        neutral: "",
+        error: ""
+      },
+      fill: {
+        filled: "",
+        stroke: "border bg-white",
+        lighter: "",
+        ghost: "bg-transparent"
+      },
+      size: {
+        md: "h-10 rounded-[10px] px-2.5 text-sm leading-5 tracking-[-0.6px] [&_svg]:size-5",
+        sm: "h-9 rounded-lg px-2 text-sm leading-5 tracking-[-0.6px] [&_svg]:size-5",
+        xs: "h-8 rounded-lg px-1.5 text-sm leading-5 tracking-[-0.6px] [&_svg]:size-5",
+        "2xs": "h-7 rounded-lg px-1 text-xs leading-4 tracking-[-0.5px] [&_svg]:size-4"
+      }
+    },
+    compoundVariants: [
+      // ── Filled ──
+      {
+        variant: "primary",
+        fill: "filled",
+        className: "bg-btn-primary text-white hover:bg-btn-primary-hover focus-visible:shadow-[0_0_0_2px_#fff,0_0_0_4px_var(--ic-btn-primary-alpha)] disabled:bg-btn-disabled-bg disabled:text-btn-disabled-text"
+      },
+      {
+        variant: "neutral",
+        fill: "filled",
+        className: "bg-btn-neutral text-white hover:bg-btn-neutral-hover focus-visible:shadow-[0_0_0_2px_#fff,0_0_0_4px_var(--ic-btn-neutral-alpha)] disabled:bg-btn-disabled-bg disabled:text-btn-disabled-text"
+      },
+      {
+        variant: "error",
+        fill: "filled",
+        className: "bg-btn-error text-white hover:bg-btn-error-hover focus-visible:shadow-[0_0_0_2px_#fff,0_0_0_4px_var(--ic-btn-error-alpha)] disabled:bg-btn-disabled-bg disabled:text-btn-disabled-text"
+      },
+      // ── Stroke ──
+      {
+        variant: "primary",
+        fill: "stroke",
+        className: "border-btn-primary text-btn-primary hover:bg-btn-primary-alpha focus-visible:shadow-[0_0_0_2px_#fff,0_0_0_4px_var(--ic-btn-primary-alpha)] disabled:border-btn-disabled-text disabled:text-btn-disabled-text disabled:bg-white"
+      },
+      {
+        variant: "neutral",
+        fill: "stroke",
+        className: "border-btn-stroke-neutral text-btn-neutral-text hover:bg-btn-lighter-neutral-bg focus-visible:shadow-[0_0_0_2px_#fff,0_0_0_4px_var(--ic-btn-neutral-alpha)] disabled:border-btn-disabled-text disabled:text-btn-disabled-text disabled:bg-white"
+      },
+      {
+        variant: "error",
+        fill: "stroke",
+        className: "border-btn-error text-btn-error hover:bg-btn-error-alpha focus-visible:shadow-[0_0_0_2px_#fff,0_0_0_4px_var(--ic-btn-error-alpha)] disabled:border-btn-disabled-text disabled:text-btn-disabled-text disabled:bg-white"
+      },
+      // ── Lighter ──
+      {
+        variant: "primary",
+        fill: "lighter",
+        className: "bg-btn-primary-alpha text-btn-primary hover:bg-btn-primary/20 focus-visible:shadow-[0_0_0_2px_#fff,0_0_0_4px_var(--ic-btn-primary-alpha)] disabled:bg-btn-disabled-bg disabled:text-btn-disabled-text"
+      },
+      {
+        variant: "neutral",
+        fill: "lighter",
+        className: "bg-btn-lighter-neutral-bg text-btn-neutral-text hover:bg-btn-neutral-alpha focus-visible:shadow-[0_0_0_2px_#fff,0_0_0_4px_var(--ic-btn-neutral-alpha)] disabled:bg-btn-disabled-bg disabled:text-btn-disabled-text"
+      },
+      {
+        variant: "error",
+        fill: "lighter",
+        className: "bg-btn-error-alpha text-btn-error hover:bg-btn-error/20 focus-visible:shadow-[0_0_0_2px_#fff,0_0_0_4px_var(--ic-btn-error-alpha)] disabled:bg-btn-disabled-bg disabled:text-btn-disabled-text"
+      },
+      // ── Ghost ──
+      {
+        variant: "primary",
+        fill: "ghost",
+        className: "text-btn-primary hover:bg-btn-primary-alpha focus-visible:shadow-[0_0_0_2px_#fff,0_0_0_4px_var(--ic-btn-primary-alpha)] disabled:text-btn-disabled-text"
+      },
+      {
+        variant: "neutral",
+        fill: "ghost",
+        className: "text-btn-neutral-ghost-text hover:bg-btn-lighter-neutral-bg focus-visible:shadow-[0_0_0_2px_#fff,0_0_0_4px_var(--ic-btn-neutral-alpha)] disabled:text-btn-disabled-text"
+      },
+      {
+        variant: "error",
+        fill: "ghost",
+        className: "text-btn-error hover:bg-btn-error-alpha focus-visible:shadow-[0_0_0_2px_#fff,0_0_0_4px_var(--ic-btn-error-alpha)] disabled:text-btn-disabled-text"
+      }
+    ],
+    defaultVariants: {
+      variant: "primary",
+      fill: "filled",
+      size: "md"
+    }
+  }
+);
+var iconOnlySizeMap = {
+  md: "size-10 px-0",
+  sm: "size-9 px-0",
+  xs: "size-8 px-0",
+  "2xs": "size-7 px-0"
+};
+var Button = React.forwardRef(
+  ({
+    className,
+    variant = "primary",
+    fill = "filled",
+    size = "md",
+    asChild = false,
+    leftIcon,
+    rightIcon,
+    iconOnly = false,
+    children,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? import_react_slot.Slot : "button";
+    const classes = cn(
+      buttonVariants({ variant, fill, size }),
+      iconOnly && iconOnlySizeMap[size ?? "md"],
+      className
+    );
+    if (asChild) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Comp, { className: classes, ref, ...props, children });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Comp, { className: classes, ref, ...props, children: [
+      leftIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "shrink-0", children: leftIcon }),
+      iconOnly ? children : children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "px-1", children }),
+      rightIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "shrink-0", children: rightIcon })
+    ] });
+  }
+);
+Button.displayName = "Button";
+
+// src/components/ui/card.tsx
+var React2 = __toESM(require("react"), 1);
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Card = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      ref,
+      className: cn("rounded-lg border border-border bg-card text-card-foreground shadow-sm", className),
+      ...props
+    }
+  )
+);
+Card.displayName = "Card";
+var CardHeader = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })
+);
+CardHeader.displayName = "CardHeader";
+var CardTitle = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref, className: cn("text-2xl font-semibold leading-none tracking-tight", className), ...props })
+);
+CardTitle.displayName = "CardTitle";
+var CardDescription = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref, className: cn("text-sm text-muted-foreground", className), ...props })
+);
+CardDescription.displayName = "CardDescription";
+var CardContent = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref, className: cn("p-6 pt-0", className), ...props })
+);
+CardContent.displayName = "CardContent";
+var CardFooter = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref, className: cn("flex items-center p-6 pt-0", className), ...props })
+);
+CardFooter.displayName = "CardFooter";
+
+// src/components/ui/input.tsx
+var React3 = __toESM(require("react"), 1);
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Input = React3.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "input",
+      {
+        type,
+        className: cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Input,
+  buttonVariants,
+  cn
+});

package/dist/index.d.cts

@@ -0,0 +1,32 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { ClassValue } from 'clsx';
+
+declare const buttonVariants: (props?: ({
+    variant?: "primary" | "neutral" | "error" | null | undefined;
+    fill?: "filled" | "stroke" | "lighter" | "ghost" | null | undefined;
+    size?: "md" | "sm" | "xs" | "2xs" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    iconOnly?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+declare function cn(...inputs: ClassValue[]): string;
+
+export { Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Input, type InputProps, buttonVariants, cn };

package/dist/index.d.ts

@@ -0,0 +1,32 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { ClassValue } from 'clsx';
+
+declare const buttonVariants: (props?: ({
+    variant?: "primary" | "neutral" | "error" | null | undefined;
+    fill?: "filled" | "stroke" | "lighter" | "ghost" | null | undefined;
+    size?: "md" | "sm" | "xs" | "2xs" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    iconOnly?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+declare function cn(...inputs: ClassValue[]): string;
+
+export { Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Input, type InputProps, buttonVariants, cn };

package/dist/index.js

@@ -0,0 +1,213 @@
+// src/components/ui/button.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/ui/button.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-1 whitespace-nowrap font-medium transition-all focus-visible:outline-none disabled:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        primary: "",
+        neutral: "",
+        error: ""
+      },
+      fill: {
+        filled: "",
+        stroke: "border bg-white",
+        lighter: "",
+        ghost: "bg-transparent"
+      },
+      size: {
+        md: "h-10 rounded-[10px] px-2.5 text-sm leading-5 tracking-[-0.6px] [&_svg]:size-5",
+        sm: "h-9 rounded-lg px-2 text-sm leading-5 tracking-[-0.6px] [&_svg]:size-5",
+        xs: "h-8 rounded-lg px-1.5 text-sm leading-5 tracking-[-0.6px] [&_svg]:size-5",
+        "2xs": "h-7 rounded-lg px-1 text-xs leading-4 tracking-[-0.5px] [&_svg]:size-4"
+      }
+    },
+    compoundVariants: [
+      // ── Filled ──
+      {
+        variant: "primary",
+        fill: "filled",
+        className: "bg-btn-primary text-white hover:bg-btn-primary-hover focus-visible:shadow-[0_0_0_2px_#fff,0_0_0_4px_var(--ic-btn-primary-alpha)] disabled:bg-btn-disabled-bg disabled:text-btn-disabled-text"
+      },
+      {
+        variant: "neutral",
+        fill: "filled",
+        className: "bg-btn-neutral text-white hover:bg-btn-neutral-hover focus-visible:shadow-[0_0_0_2px_#fff,0_0_0_4px_var(--ic-btn-neutral-alpha)] disabled:bg-btn-disabled-bg disabled:text-btn-disabled-text"
+      },
+      {
+        variant: "error",
+        fill: "filled",
+        className: "bg-btn-error text-white hover:bg-btn-error-hover focus-visible:shadow-[0_0_0_2px_#fff,0_0_0_4px_var(--ic-btn-error-alpha)] disabled:bg-btn-disabled-bg disabled:text-btn-disabled-text"
+      },
+      // ── Stroke ──
+      {
+        variant: "primary",
+        fill: "stroke",
+        className: "border-btn-primary text-btn-primary hover:bg-btn-primary-alpha focus-visible:shadow-[0_0_0_2px_#fff,0_0_0_4px_var(--ic-btn-primary-alpha)] disabled:border-btn-disabled-text disabled:text-btn-disabled-text disabled:bg-white"
+      },
+      {
+        variant: "neutral",
+        fill: "stroke",
+        className: "border-btn-stroke-neutral text-btn-neutral-text hover:bg-btn-lighter-neutral-bg focus-visible:shadow-[0_0_0_2px_#fff,0_0_0_4px_var(--ic-btn-neutral-alpha)] disabled:border-btn-disabled-text disabled:text-btn-disabled-text disabled:bg-white"
+      },
+      {
+        variant: "error",
+        fill: "stroke",
+        className: "border-btn-error text-btn-error hover:bg-btn-error-alpha focus-visible:shadow-[0_0_0_2px_#fff,0_0_0_4px_var(--ic-btn-error-alpha)] disabled:border-btn-disabled-text disabled:text-btn-disabled-text disabled:bg-white"
+      },
+      // ── Lighter ──
+      {
+        variant: "primary",
+        fill: "lighter",
+        className: "bg-btn-primary-alpha text-btn-primary hover:bg-btn-primary/20 focus-visible:shadow-[0_0_0_2px_#fff,0_0_0_4px_var(--ic-btn-primary-alpha)] disabled:bg-btn-disabled-bg disabled:text-btn-disabled-text"
+      },
+      {
+        variant: "neutral",
+        fill: "lighter",
+        className: "bg-btn-lighter-neutral-bg text-btn-neutral-text hover:bg-btn-neutral-alpha focus-visible:shadow-[0_0_0_2px_#fff,0_0_0_4px_var(--ic-btn-neutral-alpha)] disabled:bg-btn-disabled-bg disabled:text-btn-disabled-text"
+      },
+      {
+        variant: "error",
+        fill: "lighter",
+        className: "bg-btn-error-alpha text-btn-error hover:bg-btn-error/20 focus-visible:shadow-[0_0_0_2px_#fff,0_0_0_4px_var(--ic-btn-error-alpha)] disabled:bg-btn-disabled-bg disabled:text-btn-disabled-text"
+      },
+      // ── Ghost ──
+      {
+        variant: "primary",
+        fill: "ghost",
+        className: "text-btn-primary hover:bg-btn-primary-alpha focus-visible:shadow-[0_0_0_2px_#fff,0_0_0_4px_var(--ic-btn-primary-alpha)] disabled:text-btn-disabled-text"
+      },
+      {
+        variant: "neutral",
+        fill: "ghost",
+        className: "text-btn-neutral-ghost-text hover:bg-btn-lighter-neutral-bg focus-visible:shadow-[0_0_0_2px_#fff,0_0_0_4px_var(--ic-btn-neutral-alpha)] disabled:text-btn-disabled-text"
+      },
+      {
+        variant: "error",
+        fill: "ghost",
+        className: "text-btn-error hover:bg-btn-error-alpha focus-visible:shadow-[0_0_0_2px_#fff,0_0_0_4px_var(--ic-btn-error-alpha)] disabled:text-btn-disabled-text"
+      }
+    ],
+    defaultVariants: {
+      variant: "primary",
+      fill: "filled",
+      size: "md"
+    }
+  }
+);
+var iconOnlySizeMap = {
+  md: "size-10 px-0",
+  sm: "size-9 px-0",
+  xs: "size-8 px-0",
+  "2xs": "size-7 px-0"
+};
+var Button = React.forwardRef(
+  ({
+    className,
+    variant = "primary",
+    fill = "filled",
+    size = "md",
+    asChild = false,
+    leftIcon,
+    rightIcon,
+    iconOnly = false,
+    children,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    const classes = cn(
+      buttonVariants({ variant, fill, size }),
+      iconOnly && iconOnlySizeMap[size ?? "md"],
+      className
+    );
+    if (asChild) {
+      return /* @__PURE__ */ jsx(Comp, { className: classes, ref, ...props, children });
+    }
+    return /* @__PURE__ */ jsxs(Comp, { className: classes, ref, ...props, children: [
+      leftIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: leftIcon }),
+      iconOnly ? children : children && /* @__PURE__ */ jsx("span", { className: "px-1", children }),
+      rightIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: rightIcon })
+    ] });
+  }
+);
+Button.displayName = "Button";
+
+// src/components/ui/card.tsx
+import * as React2 from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Card = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ref,
+      className: cn("rounded-lg border border-border bg-card text-card-foreground shadow-sm", className),
+      ...props
+    }
+  )
+);
+Card.displayName = "Card";
+var CardHeader = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx2("div", { ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })
+);
+CardHeader.displayName = "CardHeader";
+var CardTitle = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx2("div", { ref, className: cn("text-2xl font-semibold leading-none tracking-tight", className), ...props })
+);
+CardTitle.displayName = "CardTitle";
+var CardDescription = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx2("div", { ref, className: cn("text-sm text-muted-foreground", className), ...props })
+);
+CardDescription.displayName = "CardDescription";
+var CardContent = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx2("div", { ref, className: cn("p-6 pt-0", className), ...props })
+);
+CardContent.displayName = "CardContent";
+var CardFooter = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx2("div", { ref, className: cn("flex items-center p-6 pt-0", className), ...props })
+);
+CardFooter.displayName = "CardFooter";
+
+// src/components/ui/input.tsx
+import * as React3 from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Input = React3.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ jsx3(
+      "input",
+      {
+        type,
+        className: cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+export {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Input,
+  buttonVariants,
+  cn
+};

package/dist/styles.css

@@ -0,0 +1,108 @@
+@import "tailwindcss";
+
+/* ============================================================
+ * Theme tokens
+ * Naming convention: --ic-{semantic-role}
+ * ============================================================ */
+
+@theme inline {
+  --color-background: var(--ic-background);
+  --color-foreground: var(--ic-foreground);
+  --color-primary: var(--ic-primary);
+  --color-primary-foreground: var(--ic-primary-foreground);
+  --color-secondary: var(--ic-secondary);
+  --color-secondary-foreground: var(--ic-secondary-foreground);
+  --color-muted: var(--ic-muted);
+  --color-muted-foreground: var(--ic-muted-foreground);
+  --color-accent: var(--ic-accent);
+  --color-accent-foreground: var(--ic-accent-foreground);
+  --color-destructive: var(--ic-destructive);
+  --color-destructive-foreground: var(--ic-destructive-foreground);
+  --color-border: var(--ic-border);
+  --color-input: var(--ic-input);
+  --color-ring: var(--ic-ring);
+  --color-card: var(--ic-card);
+  --color-card-foreground: var(--ic-card-foreground);
+  --radius-sm: calc(var(--ic-radius) - 4px);
+  --radius-md: calc(var(--ic-radius) - 2px);
+  --radius-lg: var(--ic-radius);
+  --radius-xl: calc(var(--ic-radius) + 4px);
+
+  /* Button tokens */
+  --color-btn-primary: var(--ic-btn-primary);
+  --color-btn-primary-hover: var(--ic-btn-primary-hover);
+  --color-btn-error: var(--ic-btn-error);
+  --color-btn-error-hover: var(--ic-btn-error-hover);
+  --color-btn-neutral: var(--ic-btn-neutral);
+  --color-btn-neutral-hover: var(--ic-btn-neutral-hover);
+  --color-btn-neutral-text: var(--ic-btn-neutral-text);
+  --color-btn-neutral-ghost-text: var(--ic-btn-neutral-ghost-text);
+  --color-btn-neutral-ghost-icon: var(--ic-btn-neutral-ghost-icon);
+  --color-btn-disabled-text: var(--ic-btn-disabled-text);
+  --color-btn-disabled-bg: var(--ic-btn-disabled-bg);
+  --color-btn-stroke-neutral: var(--ic-btn-stroke-neutral);
+  --color-btn-lighter-neutral-bg: var(--ic-btn-lighter-neutral-bg);
+  --color-btn-primary-alpha: var(--ic-btn-primary-alpha);
+  --color-btn-error-alpha: var(--ic-btn-error-alpha);
+  --color-btn-neutral-alpha: var(--ic-btn-neutral-alpha);
+}
+
+:root {
+  --ic-background: oklch(1 0 0);
+  --ic-foreground: oklch(0.145 0 0);
+  --ic-primary: oklch(0.205 0 0);
+  --ic-primary-foreground: oklch(0.985 0 0);
+  --ic-secondary: oklch(0.97 0 0);
+  --ic-secondary-foreground: oklch(0.205 0 0);
+  --ic-muted: oklch(0.97 0 0);
+  --ic-muted-foreground: oklch(0.556 0 0);
+  --ic-accent: oklch(0.97 0 0);
+  --ic-accent-foreground: oklch(0.205 0 0);
+  --ic-destructive: oklch(0.577 0.245 27.325);
+  --ic-destructive-foreground: oklch(0.577 0.245 27.325);
+  --ic-border: oklch(0.922 0 0);
+  --ic-input: oklch(0.922 0 0);
+  --ic-ring: oklch(0.708 0 0);
+  --ic-card: oklch(1 0 0);
+  --ic-card-foreground: oklch(0.145 0 0);
+  --ic-radius: 0.625rem;
+
+  /* Button tokens */
+  --ic-btn-primary: #ff6a00;
+  --ic-btn-primary-hover: #bf3e00;
+  --ic-btn-error: #fb3748;
+  --ic-btn-error-hover: #d02533;
+  --ic-btn-neutral: #262626;
+  --ic-btn-neutral-hover: #171717;
+  --ic-btn-neutral-text: #171717;
+  --ic-btn-neutral-ghost-text: #7b7b7b;
+  --ic-btn-neutral-ghost-icon: #5c5c5c;
+  --ic-btn-disabled-text: #d1d1d1;
+  --ic-btn-disabled-bg: #f7f7f7;
+  --ic-btn-stroke-neutral: #ebebeb;
+  --ic-btn-lighter-neutral-bg: #f7f7f7;
+  --ic-btn-primary-alpha: rgba(255, 106, 0, 0.1);
+  --ic-btn-error-alpha: rgba(251, 55, 72, 0.1);
+  --ic-btn-neutral-alpha: rgba(153, 160, 174, 0.16);
+}
+
+.dark {
+  --ic-background: oklch(0.145 0 0);
+  --ic-foreground: oklch(0.985 0 0);
+  --ic-primary: oklch(0.985 0 0);
+  --ic-primary-foreground: oklch(0.205 0 0);
+  --ic-secondary: oklch(0.269 0 0);
+  --ic-secondary-foreground: oklch(0.985 0 0);
+  --ic-muted: oklch(0.269 0 0);
+  --ic-muted-foreground: oklch(0.708 0 0);
+  --ic-accent: oklch(0.269 0 0);
+  --ic-accent-foreground: oklch(0.985 0 0);
+  --ic-destructive: oklch(0.396 0.141 25.723);
+  --ic-destructive-foreground: oklch(0.637 0.237 25.331);
+  --ic-border: oklch(0.269 0 0);
+  --ic-input: oklch(0.269 0 0);
+  --ic-ring: oklch(0.439 0 0);
+  --ic-card: oklch(0.205 0 0);
+  --ic-card-foreground: oklch(0.985 0 0);
+  --ic-radius: 0.625rem;
+}

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "ic-ai-component-v0",
+  "version": "0.1.0",
+  "description": "React component library built with shadcn/ui + Tailwind CSS v4",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "dev": "vite",
+    "build": "tsup",
+    "check": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "pnpm run clean && pnpm run build"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "tailwindcss": "^4.0.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-slot": "^1.2.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.3.0"
+  },
+  "devDependencies": {
+    "@figma/code-connect": "^1.4.2",
+    "@tailwindcss/vite": "^4.1.3",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "@vitejs/plugin-react": "^4.7.0",
+    "jsdom": "^26.1.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "tailwindcss": "^4.1.3",
+    "tsup": "^8.5.1",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.2",
+    "vitest": "^3.1.1"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "esbuild"
+    ]
+  },
+  "packageManager": "pnpm@10.33.0",
+  "license": "MIT"
+}