@cntyclub/ui-react 0.1.1 → 0.3.0

package/src/components/ui/fab.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+import { Button, type ButtonProps } from "./button";
+
+const fabVariants = cva(
+  "fixed z-50 rounded-full shadow-lg transition-transform duration-150 hover:scale-105 active:scale-95 before:rounded-full",
+  {
+    defaultVariants: {
+      position: "bottom-right",
+    },
+    variants: {
+      position: {
+        "bottom-right": "right-4 bottom-4 sm:right-6 sm:bottom-6",
+        "bottom-left": "bottom-4 left-4 sm:bottom-6 sm:left-6",
+        "top-right": "top-4 right-4 sm:top-6 sm:right-6",
+        "top-left": "top-4 left-4 sm:top-6 sm:left-6",
+      },
+    },
+  },
+);
+
+export interface FabProps extends ButtonProps {
+  position?: VariantProps<typeof fabVariants>["position"];
+}
+
+/**
+ * Floating action button — a fixed, round icon button used to summon overlays
+ * such as chat widgets. Composes `Button`, so all button variants/sizes apply.
+ */
+function Fab({ className, position, size = "icon-xl", ...props }: FabProps) {
+  return (
+    <Button
+      className={cn(fabVariants({ className, position }))}
+      data-slot="fab"
+      size={size}
+      {...props}
+    />
+  );
+}
+
+export { Fab, fabVariants };

package/src/components/ui/markdown.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import type * as React from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+import { cn } from "../../lib/utils/css";
+
+export interface MarkdownProps {
+  /** The markdown source to render. */
+  children: string;
+  className?: string;
+}
+
+/**
+ * Markdown renderer for assistant/chat content (GitHub-flavored markdown).
+ * Raw HTML in the source is NOT rendered — output is limited to markdown
+ * elements, which keeps untrusted model output safe to display.
+ */
+function Markdown({ children, className }: MarkdownProps) {
+  return (
+    <div
+      className={cn(
+        "space-y-2 break-words text-foreground text-sm leading-relaxed",
+        className,
+      )}
+      data-slot="markdown"
+    >
+      <ReactMarkdown
+        components={{
+          a: ({ node: _node, ...props }) => (
+            <a
+              className="font-medium text-primary underline underline-offset-2 hover:opacity-80"
+              rel="noreferrer noopener"
+              target="_blank"
+              {...props}
+            />
+          ),
+          blockquote: ({ node: _node, ...props }) => (
+            <blockquote
+              className="border-border border-l-2 pl-3 text-muted-foreground italic"
+              {...props}
+            />
+          ),
+          code: ({ node: _node, className: codeClassName, ...props }) => {
+            const isBlock = /language-/.test(codeClassName ?? "");
+            return (
+              <code
+                className={cn(
+                  "rounded bg-muted font-mono text-[0.85em]",
+                  isBlock ? "block overflow-x-auto p-3" : "px-1 py-0.5",
+                  codeClassName,
+                )}
+                {...props}
+              />
+            );
+          },
+          h1: ({ node: _node, ...props }) => (
+            <h1 className="font-semibold text-base" {...props} />
+          ),
+          h2: ({ node: _node, ...props }) => (
+            <h2 className="font-semibold text-base" {...props} />
+          ),
+          h3: ({ node: _node, ...props }) => (
+            <h3 className="font-semibold text-sm" {...props} />
+          ),
+          hr: ({ node: _node, ...props }) => (
+            <hr className="border-border" {...props} />
+          ),
+          li: ({ node: _node, ...props }) => <li className="my-0.5" {...props} />,
+          ol: ({ node: _node, ...props }) => (
+            <ol className="list-decimal space-y-1 pl-5" {...props} />
+          ),
+          pre: ({ node: _node, ...props }) => (
+            <pre
+              className="overflow-x-auto rounded-lg bg-muted p-0 text-[0.85em]"
+              {...props}
+            />
+          ),
+          table: ({ node: _node, ...props }) => (
+            <div className="overflow-x-auto rounded-lg border border-border">
+              <table className="w-full text-left text-sm" {...props} />
+            </div>
+          ),
+          td: ({ node: _node, ...props }) => (
+            <td className="border-border border-t px-3 py-1.5 align-top" {...props} />
+          ),
+          th: ({ node: _node, ...props }) => (
+            <th
+              className="bg-muted px-3 py-1.5 font-medium text-muted-foreground"
+              {...props}
+            />
+          ),
+          ul: ({ node: _node, ...props }) => (
+            <ul className="list-disc space-y-1 pl-5" {...props} />
+          ),
+        }}
+        remarkPlugins={[remarkGfm]}
+        skipHtml
+      >
+        {children}
+      </ReactMarkdown>
+    </div>
+  );
+}
+
+export { Markdown };

package/src/index.ts

@@ -19,16 +19,19 @@ export * from "./components/ui/calendar";
 export * from "./components/ui/card";
 export * from "./components/ui/carousel";
 export * from "./components/ui/chart";
+export * from "./components/ui/chat";
 export * from "./components/ui/checkbox";
 export * from "./components/ui/checkbox-group";
 export * from "./components/ui/collapsible";
 export * from "./components/ui/combobox";
 export * from "./components/ui/command";
 export * from "./components/ui/credit-card";
+export * from "./components/ui/data-table-paged";
 export * from "./components/ui/drawer";
 export * from "./components/ui/context-menu";
 export * from "./components/ui/dialog";
 export * from "./components/ui/empty";
+export * from "./components/ui/fab";
 export * from "./components/ui/featured-icon";
 export * from "./components/ui/field";
 export * from "./components/ui/fieldset";
@@ -43,6 +46,7 @@ export * from "./components/ui/input-otp";
 export * from "./components/ui/item";
 export * from "./components/ui/kbd";
 export * from "./components/ui/label";
+export * from "./components/ui/markdown";
 export * from "./components/ui/menu";
 export * from "./components/ui/menubar";
 export * from "./components/ui/meter";