feat: add callout component

Author: scriptcoded

packages/ui-react/.storybook/preview.ts

@@ -1,6 +1,7 @@
 import type { Preview } from "@storybook/react";
 
 import "../src/style.css";
+import "./style.css";
 
 const preview = {
   parameters: {

packages/ui-react/.storybook/style.css

@@ -0,0 +1,9 @@
+@import "tailwindcss/preflight.css" layer(base);
+@import "../src/theme.css";
+
+@layer base {
+  html {
+    /* @apply text-gray-dark; */
+    @apply text-red;
+  }
+}

packages/ui-react/src/components/callout/callout.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, Preview } from "@storybook/react";
+import { TentTreeIcon } from "lucide-react";
+import * as Callout from "./callout.js";
+
+export default {
+  title: "Components/Callout",
+  component: Callout.Callout,
+  argTypes: {
+    children: {
+      control: false,
+    },
+    icon: {
+      control: false,
+    },
+  },
+} satisfies Meta;
+
+export const Simple = {
+  args: {
+    children: "This is a callout component.",
+  },
+} satisfies Preview;
+
+export const LongContent = {
+  args: {
+    children: `
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget
+      urna in nulla finibus feugiat. Nulla facilisi. Sed varius eros at felis
+      eleifend, nec venenatis risus tincidunt. Praesent ullamcorper arcu at
+      ligula feugiat, in lacinia turpis consequat. Cras commodo enim sit amet
+      justo ultrices, non fringilla felis dignissim. Donec pulvinar lectus non
+      turpis eleifend, non lacinia magna accumsan. Nullam in elit magna. Ut ut
+      urna sit amet nunc faucibus commodo.
+    `,
+  },
+} satisfies Preview;
+
+export const WithCustomIcon = {
+  args: {
+    children: "This callout has a custom icon.",
+    icon: TentTreeIcon,
+  },
+} satisfies Preview;

packages/ui-react/src/components/callout/callout.tsx

@@ -0,0 +1,91 @@
+import { Slot } from "@radix-ui/react-slot";
+import { type VariantProps, cva } from "class-variance-authority";
+import {
+  CheckIcon,
+  CircleAlertIcon,
+  InfoIcon,
+  type LucideIcon,
+  TriangleAlertIcon,
+} from "lucide-react";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils.js";
+
+const calloutVariants = cva(
+  `
+    flex gap-2
+    p-4
+    border
+    rounded-lg
+  `,
+  {
+    variants: {
+      variant: {
+        default: `
+          [--callout-icon-color:var(--color-gray-dark)]
+          bg-gray-light text-gray-dark
+          border-gray-300
+        `,
+        info: `
+          [--callout-icon-color:var(--color-blue-00)]
+          bg-blue-100 text-blue-800
+          border-blue-200
+        `,
+        warning: `
+          [--callout-icon-color:var(--color-orange-800)]
+          bg-orange-100 text-orange-800
+          border-orange-200
+        `,
+        error: `
+          [--callout-icon-color:var(--color-red-800)]
+          bg-red-100 text-red-800
+          border-red-200
+        `,
+        success: `
+          [--callout-icon-color:var(--color-trackergreen-800)]
+          bg-trackergreen-100 text-trackergreen-800
+          border-trackergreen-200
+        `,
+      },
+    },
+  },
+);
+
+type Variants = NonNullable<VariantProps<typeof calloutVariants>["variant"]>;
+const variantIcons: Record<Variants, LucideIcon> = {
+  default: InfoIcon,
+  info: InfoIcon,
+  warning: CircleAlertIcon,
+  error: TriangleAlertIcon,
+  success: CheckIcon,
+};
+
+export type CalloutProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof calloutVariants> & {
+    asChild?: boolean;
+    icon?: LucideIcon;
+  };
+
+const Callout = forwardRef<HTMLDivElement, CalloutProps>(
+  ({ className, asChild = false, variant, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : "div";
+
+    variant = variant || "default";
+    const Icon = props.icon || variantIcons[variant];
+
+    return (
+      <Comp
+        className={cn(calloutVariants({ variant, className }))}
+        ref={ref}
+        {...props}
+      >
+        <div>
+          <Icon className="h-6 w-6 text-(--callout-icon-color)" />
+        </div>
+        {children}
+      </Comp>
+    );
+  },
+);
+Callout.displayName = "Callout";
+
+export { Callout };

packages/ui-react/src/components/form-field/form-field.tsx

@@ -17,7 +17,7 @@ const Field = forwardRef<HTMLDivElement, FieldProps>(
     const Comp = asChild ? Slot : "div";
 
     return (
-      <Comp className={cn("")} ref={ref} {...props}>
+      <Comp className={cn("", className)} ref={ref} {...props}>
         {children}
       </Comp>
     );

packages/ui-react/src/index.ts

@@ -4,3 +4,4 @@ export * as FormField from "./components/form-field/form-field.js";
 export * as Input from "./components/input/input.js";
 export * as Select from "./components/select/select.js";
 export * as Toast from "./components/toast/toast.js";
+export * as Callout from "./components/callout/callout.js";