@openconsole/shadcn 0.2.5 → 0.2.7

package/styles.css

@@ -1,124 +1,124 @@
-@import "tw-animate-css";
-
-/* Register this package's source files as Tailwind content sources. */
-@source "./**/*.{ts,tsx}";
-
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-}
-
-:root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  /* 品牌主色 #17b3a3 (teal) */
-  --primary: oklch(0.7 0.12 183);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.7 0.12 183);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.7 0.12 183);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.7 0.12 183);
-}
-
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  /* 品牌主色 #17b3a3 (teal) —— 双模一致便于品牌识别 */
-  --primary: oklch(0.7 0.12 183);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.7 0.12 183);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.7 0.12 183);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.7 0.12 183);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
+@import "tw-animate-css";
+
+/* Register this package's source files as Tailwind content sources. */
+@source "./**/*.{ts,tsx}";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  /* 品牌主色 #17b3a3 (teal) */
+  --primary: oklch(0.7 0.12 183);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.7 0.12 183);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.7 0.12 183);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.7 0.12 183);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  /* 品牌主色 #17b3a3 (teal) —— 双模一致便于品牌识别 */
+  --primary: oklch(0.7 0.12 183);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.7 0.12 183);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.7 0.12 183);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.7 0.12 183);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/components/ai-elements/agent.tsx

@@ -1,141 +0,0 @@
-"use client";
-
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "../ui/accordion";
-import { Badge } from "../ui/badge";
-import { cn } from "../../lib/utils";
-import type { Tool } from "ai";
-import { BotIcon } from "lucide-react";
-import type { ComponentProps } from "react";
-import { memo } from "react";
-
-import { CodeBlock } from "./code-block";
-
-export type AgentProps = ComponentProps<"div">;
-
-export const Agent = memo(({ className, ...props }: AgentProps) => (
-  <div
-    className={cn("not-prose w-full rounded-md border", className)}
-    {...props}
-  />
-));
-
-export type AgentHeaderProps = ComponentProps<"div"> & {
-  name: string;
-  model?: string;
-};
-
-export const AgentHeader = memo(
-  ({ className, name, model, ...props }: AgentHeaderProps) => (
-    <div
-      className={cn(
-        "flex w-full items-center justify-between gap-4 p-3",
-        className
-      )}
-      {...props}
-    >
-      <div className="flex items-center gap-2">
-        <BotIcon className="size-4 text-muted-foreground" />
-        <span className="font-medium text-sm">{name}</span>
-        {model && (
-          <Badge className="font-mono text-xs" variant="secondary">
-            {model}
-          </Badge>
-        )}
-      </div>
-    </div>
-  )
-);
-
-export type AgentContentProps = ComponentProps<"div">;
-
-export const AgentContent = memo(
-  ({ className, ...props }: AgentContentProps) => (
-    <div className={cn("space-y-4 p-4 pt-0", className)} {...props} />
-  )
-);
-
-export type AgentInstructionsProps = ComponentProps<"div"> & {
-  children: string;
-};
-
-export const AgentInstructions = memo(
-  ({ className, children, ...props }: AgentInstructionsProps) => (
-    <div className={cn("space-y-2", className)} {...props}>
-      <span className="font-medium text-muted-foreground text-sm">
-        Instructions
-      </span>
-      <div className="rounded-md bg-muted/50 p-3 text-muted-foreground text-sm">
-        <p>{children}</p>
-      </div>
-    </div>
-  )
-);
-
-export type AgentToolsProps = ComponentProps<typeof Accordion>;
-
-export const AgentTools = memo(({ className, ...props }: AgentToolsProps) => (
-  <div className={cn("space-y-2", className)}>
-    <span className="font-medium text-muted-foreground text-sm">Tools</span>
-    <Accordion className="rounded-md border" {...props} />
-  </div>
-));
-
-export type AgentToolProps = ComponentProps<typeof AccordionItem> & {
-  tool: Tool;
-};
-
-export const AgentTool = memo(
-  ({ className, tool, value, ...props }: AgentToolProps) => {
-    const schema =
-      "jsonSchema" in tool && tool.jsonSchema
-        ? tool.jsonSchema
-        : tool.inputSchema;
-
-    return (
-      <AccordionItem
-        className={cn("border-b last:border-b-0", className)}
-        value={value}
-        {...props}
-      >
-        <AccordionTrigger className="px-3 py-2 text-sm hover:no-underline">
-          {tool.description ?? "No description"}
-        </AccordionTrigger>
-        <AccordionContent className="px-3 pb-3">
-          <div className="rounded-md bg-muted/50">
-            <CodeBlock code={JSON.stringify(schema, null, 2)} language="json" />
-          </div>
-        </AccordionContent>
-      </AccordionItem>
-    );
-  }
-);
-
-export type AgentOutputProps = ComponentProps<"div"> & {
-  schema: string;
-};
-
-export const AgentOutput = memo(
-  ({ className, schema, ...props }: AgentOutputProps) => (
-    <div className={cn("space-y-2", className)} {...props}>
-      <span className="font-medium text-muted-foreground text-sm">
-        Output Schema
-      </span>
-      <div className="rounded-md bg-muted/50">
-        <CodeBlock code={schema} language="typescript" />
-      </div>
-    </div>
-  )
-);
-
-Agent.displayName = "Agent";
-AgentHeader.displayName = "AgentHeader";
-AgentContent.displayName = "AgentContent";
-AgentInstructions.displayName = "AgentInstructions";
-AgentTools.displayName = "AgentTools";
-AgentTool.displayName = "AgentTool";
-AgentOutput.displayName = "AgentOutput";

package/components/ai-elements/artifact.tsx

@@ -1,148 +0,0 @@
-"use client";
-
-import { Button } from "../ui/button";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "../ui/tooltip";
-import { cn } from "../../lib/utils";
-import type { LucideIcon } from "lucide-react";
-import { XIcon } from "lucide-react";
-import type { ComponentProps, HTMLAttributes } from "react";
-
-export type ArtifactProps = HTMLAttributes<HTMLDivElement>;
-
-export const Artifact = ({ className, ...props }: ArtifactProps) => (
-  <div
-    className={cn(
-      "flex flex-col overflow-hidden rounded-lg border bg-background shadow-sm",
-      className
-    )}
-    {...props}
-  />
-);
-
-export type ArtifactHeaderProps = HTMLAttributes<HTMLDivElement>;
-
-export const ArtifactHeader = ({
-  className,
-  ...props
-}: ArtifactHeaderProps) => (
-  <div
-    className={cn(
-      "flex items-center justify-between border-b bg-muted/50 px-4 py-3",
-      className
-    )}
-    {...props}
-  />
-);
-
-export type ArtifactCloseProps = ComponentProps<typeof Button>;
-
-export const ArtifactClose = ({
-  className,
-  children,
-  size = "sm",
-  variant = "ghost",
-  ...props
-}: ArtifactCloseProps) => (
-  <Button
-    className={cn(
-      "size-8 p-0 text-muted-foreground hover:text-foreground",
-      className
-    )}
-    size={size}
-    type="button"
-    variant={variant}
-    {...props}
-  >
-    {children ?? <XIcon className="size-4" />}
-    <span className="sr-only">Close</span>
-  </Button>
-);
-
-export type ArtifactTitleProps = HTMLAttributes<HTMLParagraphElement>;
-
-export const ArtifactTitle = ({ className, ...props }: ArtifactTitleProps) => (
-  <p
-    className={cn("font-medium text-foreground text-sm", className)}
-    {...props}
-  />
-);
-
-export type ArtifactDescriptionProps = HTMLAttributes<HTMLParagraphElement>;
-
-export const ArtifactDescription = ({
-  className,
-  ...props
-}: ArtifactDescriptionProps) => (
-  <p className={cn("text-muted-foreground text-sm", className)} {...props} />
-);
-
-export type ArtifactActionsProps = HTMLAttributes<HTMLDivElement>;
-
-export const ArtifactActions = ({
-  className,
-  ...props
-}: ArtifactActionsProps) => (
-  <div className={cn("flex items-center gap-1", className)} {...props} />
-);
-
-export type ArtifactActionProps = ComponentProps<typeof Button> & {
-  tooltip?: string;
-  label?: string;
-  icon?: LucideIcon;
-};
-
-export const ArtifactAction = ({
-  tooltip,
-  label,
-  icon: Icon,
-  children,
-  className,
-  size = "sm",
-  variant = "ghost",
-  ...props
-}: ArtifactActionProps) => {
-  const button = (
-    <Button
-      className={cn(
-        "size-8 p-0 text-muted-foreground hover:text-foreground",
-        className
-      )}
-      size={size}
-      type="button"
-      variant={variant}
-      {...props}
-    >
-      {Icon ? <Icon className="size-4" /> : children}
-      <span className="sr-only">{label || tooltip}</span>
-    </Button>
-  );
-
-  if (tooltip) {
-    return (
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>{button}</TooltipTrigger>
-          <TooltipContent>
-            <p>{tooltip}</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-    );
-  }
-
-  return button;
-};
-
-export type ArtifactContentProps = HTMLAttributes<HTMLDivElement>;
-
-export const ArtifactContent = ({
-  className,
-  ...props
-}: ArtifactContentProps) => (
-  <div className={cn("flex-1 overflow-auto p-4", className)} {...props} />
-);