@oppulence/design-system 1.0.2

package/src/components/molecules/accordion.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+
+function Accordion({
+  ...props
+}: Omit<AccordionPrimitive.Root.Props, "className">) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className="flex w-full flex-col"
+      {...props}
+    />
+  );
+}
+
+function AccordionItem({
+  ...props
+}: Omit<AccordionPrimitive.Item.Props, "className">) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className="not-last:border-b"
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({
+  children,
+  ...props
+}: Omit<AccordionPrimitive.Trigger.Props, "className">) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className="focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-md py-4 text-left text-sm font-medium hover:underline focus-visible:ring-[3px] **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50"
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+        />
+        <ChevronUpIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+        />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({
+  children,
+  ...props
+}: Omit<AccordionPrimitive.Panel.Props, "className">) {
+  return (
+    <AccordionPrimitive.Panel
+      data-slot="accordion-content"
+      className="data-open:animate-accordion-down data-closed:animate-accordion-up text-sm overflow-hidden"
+      {...props}
+    >
+      <div className="pt-0 pb-4 [&_a]:hover:text-foreground h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4">
+        {children}
+      </div>
+    </AccordionPrimitive.Panel>
+  );
+}
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/src/components/molecules/ai-chat.tsx

@@ -0,0 +1,251 @@
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import { MessageCircleIcon, SparklesIcon, XIcon } from "lucide-react";
+import * as React from "react";
+
+const aiChatTriggerVariants = cva(
+  "fixed bottom-6 right-6 z-50 flex items-center justify-center rounded-full transition-all duration-200 cursor-pointer",
+  {
+    variants: {
+      size: {
+        default: "size-14",
+        sm: "size-12",
+        lg: "size-16",
+      },
+      variant: {
+        default:
+          "bg-primary text-primary-foreground hover:bg-primary/90 active:scale-95",
+        secondary:
+          "bg-foreground text-background hover:bg-foreground/90 active:scale-95",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+      variant: "default",
+    },
+  },
+);
+
+const aiChatPanelVariants = cva(
+  "fixed bottom-24 right-6 z-50 flex flex-col bg-background border border-border/40 rounded-2xl overflow-hidden transition-all duration-200 origin-bottom-right",
+  {
+    variants: {
+      size: {
+        default: "w-96 h-[500px]",
+        sm: "w-80 h-[400px]",
+        lg: "w-[450px] h-[600px]",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  },
+);
+
+interface AIChatProps extends VariantProps<typeof aiChatTriggerVariants> {
+  /** Whether the chat panel is open */
+  open?: boolean;
+  /** Default open state (uncontrolled) */
+  defaultOpen?: boolean;
+  /** Callback when open state changes */
+  onOpenChange?: (open: boolean) => void;
+  /** Custom trigger icon */
+  triggerIcon?: React.ReactNode;
+  /** Panel size */
+  panelSize?: "sm" | "default" | "lg";
+  /** Content to render inside the chat panel */
+  children?: React.ReactNode;
+}
+
+function AIChat({
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  triggerIcon,
+  size = "default",
+  variant = "default",
+  panelSize = "default",
+  children,
+}: AIChatProps) {
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+  const isOpen = openProp ?? internalOpen;
+
+  const handleToggle = () => {
+    const newValue = !isOpen;
+    if (openProp === undefined) {
+      setInternalOpen(newValue);
+    }
+    onOpenChange?.(newValue);
+  };
+
+  return (
+    <>
+      {/* Chat Panel */}
+      <div
+        data-slot="ai-chat-panel"
+        className={`${aiChatPanelVariants({ size: panelSize })} ${
+          isOpen
+            ? "scale-100 opacity-100"
+            : "scale-95 opacity-0 pointer-events-none"
+        }`}
+        style={{
+          boxShadow:
+            "0 8px 32px -4px rgb(0 0 0 / 0.12), 0 4px 16px -2px rgb(0 0 0 / 0.08)",
+        }}
+      >
+        {children || <AIChatDefaultContent onClose={handleToggle} />}
+      </div>
+
+      {/* Floating Trigger Button */}
+      <button
+        type="button"
+        data-slot="ai-chat-trigger"
+        onClick={handleToggle}
+        className={aiChatTriggerVariants({ size, variant })}
+        style={{
+          boxShadow:
+            "0 4px 16px -2px rgb(0 0 0 / 0.15), 0 2px 8px -2px rgb(0 0 0 / 0.1)",
+        }}
+        aria-label={isOpen ? "Close chat" : "Open chat"}
+      >
+        <span
+          className={`absolute transition-all duration-200 ${
+            isOpen
+              ? "scale-0 opacity-0 rotate-90"
+              : "scale-100 opacity-100 rotate-0"
+          }`}
+        >
+          {triggerIcon || <SparklesIcon className="size-6" />}
+        </span>
+        <span
+          className={`absolute transition-all duration-200 ${
+            isOpen
+              ? "scale-100 opacity-100 rotate-0"
+              : "scale-0 opacity-0 -rotate-90"
+          }`}
+        >
+          <XIcon className="size-6" />
+        </span>
+      </button>
+    </>
+  );
+}
+
+// Default content when no children provided
+function AIChatDefaultContent({ onClose }: { onClose: () => void }) {
+  return (
+    <>
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-3 border-b border-border/40">
+        <div className="flex items-center gap-2">
+          <span className="flex size-8 items-center justify-center rounded-full bg-primary/10 text-primary">
+            <SparklesIcon className="size-4" />
+          </span>
+          <div>
+            <div className="font-semibold text-sm">AI Assistant</div>
+            <div className="text-xs text-muted-foreground">Ask me anything</div>
+          </div>
+        </div>
+        <button
+          type="button"
+          onClick={onClose}
+          className="size-8 flex items-center justify-center rounded-md hover:bg-muted/50 text-muted-foreground hover:text-foreground transition-colors"
+        >
+          <XIcon className="size-4" />
+        </button>
+      </div>
+
+      {/* Messages Area */}
+      <div className="flex-1 overflow-auto p-4">
+        <div className="flex flex-col gap-4">
+          {/* AI Welcome Message */}
+          <div className="flex gap-3">
+            <span className="flex size-7 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary">
+              <SparklesIcon className="size-3.5" />
+            </span>
+            <div className="flex-1 rounded-2xl rounded-tl-sm bg-muted/50 dark:bg-muted px-3 py-2 text-sm">
+              Hi! I'm your AI assistant. How can I help you today?
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Input Area */}
+      <div className="p-3 border-t border-border/40">
+        <div className="flex items-center gap-2 rounded-xl bg-muted/50 dark:bg-muted px-3 py-2">
+          <input
+            type="text"
+            placeholder="Ask a question..."
+            className="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+          />
+          <button
+            type="button"
+            className="flex size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
+          >
+            <MessageCircleIcon className="size-4" />
+          </button>
+        </div>
+        <div className="mt-2 text-center text-xs text-muted-foreground">
+          Powered by AI
+        </div>
+      </div>
+    </>
+  );
+}
+
+// Compound components for custom content
+function AIChatHeader({
+  children,
+  ...props
+}: Omit<React.ComponentProps<"div">, "className">) {
+  return (
+    <div
+      data-slot="ai-chat-header"
+      className="flex items-center justify-between px-4 py-3 border-b border-border/40"
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+function AIChatBody({
+  children,
+  ...props
+}: Omit<React.ComponentProps<"div">, "className">) {
+  return (
+    <div
+      data-slot="ai-chat-body"
+      className="flex-1 overflow-auto p-4"
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+function AIChatFooter({
+  children,
+  ...props
+}: Omit<React.ComponentProps<"div">, "className">) {
+  return (
+    <div
+      data-slot="ai-chat-footer"
+      className="p-3 border-t border-border/40"
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export {
+  AIChat,
+  AIChatHeader,
+  AIChatBody,
+  AIChatFooter,
+  aiChatTriggerVariants,
+  aiChatPanelVariants,
+};
+export type { AIChatProps };

package/src/components/molecules/alert.tsx

@@ -0,0 +1,131 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { AlertCircle, AlertTriangle, CheckCircle2, Info } from "lucide-react";
+import * as React from "react";
+
+const alertVariants = cva(
+  'grid gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*="size-"])]:size-4 w-full relative group/alert',
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        info: "border-blue-200 bg-blue-50 text-blue-800 dark:border-blue-800 dark:bg-blue-950/50 dark:text-blue-200 *:data-[slot=alert-description]:text-blue-700 dark:*:data-[slot=alert-description]:text-blue-300",
+        success:
+          "border-green-200 bg-green-50 text-green-800 dark:border-green-800 dark:bg-green-950/50 dark:text-green-200 *:data-[slot=alert-description]:text-green-700 dark:*:data-[slot=alert-description]:text-green-300",
+        warning:
+          "border-yellow-200 bg-yellow-50 text-yellow-800 dark:border-yellow-800 dark:bg-yellow-950/50 dark:text-yellow-200 *:data-[slot=alert-description]:text-yellow-700 dark:*:data-[slot=alert-description]:text-yellow-300",
+        destructive:
+          "border-red-200 bg-red-50 text-red-800 dark:border-red-800 dark:bg-red-950/50 dark:text-red-200 *:data-[slot=alert-description]:text-red-700 dark:*:data-[slot=alert-description]:text-red-300",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+const variantIcons = {
+  default: null,
+  info: Info,
+  success: CheckCircle2,
+  warning: AlertTriangle,
+  destructive: AlertCircle,
+} as const;
+
+type AlertVariant = NonNullable<VariantProps<typeof alertVariants>["variant"]>;
+
+interface AlertProps
+  extends
+    Omit<React.ComponentProps<"div">, "className" | "title">,
+    VariantProps<typeof alertVariants> {
+  /** Alert title - renders AlertTitle component */
+  title?: React.ReactNode;
+  /** Alert description - renders AlertDescription component */
+  description?: React.ReactNode;
+  /** Custom icon - if not provided, uses default icon for the variant */
+  icon?: React.ReactNode;
+  /** Hide the default variant icon */
+  hideIcon?: boolean;
+}
+
+function Alert({
+  variant = "default",
+  title,
+  description,
+  icon,
+  hideIcon,
+  children,
+  ...props
+}: AlertProps) {
+  // Determine the icon to show
+  const showIcon = !hideIcon && (icon !== undefined || variant !== "default");
+  const IconComponent = variantIcons[variant as AlertVariant];
+  const renderedIcon = icon ?? (IconComponent ? <IconComponent /> : null);
+
+  // If title/description are provided, render the simple API
+  if (title || description) {
+    return (
+      <div
+        data-slot="alert"
+        role="alert"
+        className={alertVariants({ variant })}
+        {...props}
+      >
+        {showIcon && renderedIcon}
+        {title && <AlertTitle>{title}</AlertTitle>}
+        {description && <AlertDescription>{description}</AlertDescription>}
+        {children}
+      </div>
+    );
+  }
+
+  // Otherwise, render children (compound component pattern)
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={alertVariants({ variant })}
+      {...props}
+    >
+      {showIcon && renderedIcon}
+      {children}
+    </div>
+  );
+}
+
+function AlertTitle({
+  ...props
+}: Omit<React.ComponentProps<"div">, "className">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className="font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3"
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({
+  ...props
+}: Omit<React.ComponentProps<"div">, "className">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className="text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3"
+      {...props}
+    />
+  );
+}
+
+function AlertAction({
+  ...props
+}: Omit<React.ComponentProps<"div">, "className">) {
+  return (
+    <div
+      data-slot="alert-action"
+      className="absolute top-2.5 right-3"
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertAction, AlertDescription, AlertTitle, alertVariants };