Create emcn component

Author: TheodoreSpeaks

apps/sim/components/emcn/components/callout/callout.tsx

@@ -0,0 +1,60 @@
+import type * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { AlertTriangle, CheckCircle2, Info } from 'lucide-react'
+import { cn } from '@/lib/core/utils/cn'
+
+const calloutVariants = cva('flex items-center gap-2 rounded-lg border px-2.5 py-1.5 text-[12px]', {
+  variants: {
+    variant: {
+      default: 'border-[var(--border)] bg-[var(--surface-2)] text-[var(--text-muted)]',
+      info: 'border-[var(--border)] bg-[var(--surface-2)] text-[var(--text-muted)]',
+      success:
+        'border-[color-mix(in_srgb,var(--badge-success-text)_30%,transparent)] bg-[var(--badge-success-bg)] text-[var(--badge-success-text)]',
+      warning:
+        'border-[color-mix(in_srgb,var(--badge-amber-text)_30%,transparent)] bg-[var(--badge-amber-bg)] text-[var(--badge-amber-text)]',
+      destructive:
+        'border-[color-mix(in_srgb,var(--text-error)_40%,transparent)] bg-[color-mix(in_srgb,var(--text-error)_10%,transparent)] text-[var(--text-error)]',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+})
+
+const DEFAULT_ICONS = {
+  default: Info,
+  info: Info,
+  success: CheckCircle2,
+  warning: AlertTriangle,
+  destructive: AlertTriangle,
+} as const
+
+export interface CalloutProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof calloutVariants> {
+  /** Icon component shown before the content. Pass `null` to hide. Defaults per variant. */
+  icon?: React.ComponentType<{ className?: string }> | null
+}
+
+/**
+ * Inline note used to highlight short pieces of context inside a page or section.
+ *
+ * @example
+ * ```tsx
+ * <Callout>Applies organization-wide</Callout>
+ * <Callout variant='warning'>This action is irreversible</Callout>
+ * ```
+ */
+function Callout({ className, variant, icon, children, ...props }: CalloutProps) {
+  const variantKey = (variant ?? 'default') as keyof typeof DEFAULT_ICONS
+  const Icon = icon === null ? null : (icon ?? DEFAULT_ICONS[variantKey])
+
+  return (
+    <div className={cn(calloutVariants({ variant }), className)} {...props}>
+      {Icon && <Icon className='h-3.5 w-3.5 flex-shrink-0' />}
+      <p>{children}</p>
+    </div>
+  )
+}
+
+export { Callout, calloutVariants }

apps/sim/components/emcn/components/index.ts

@@ -18,6 +18,7 @@ export {
   buttonGroupItemVariants,
   buttonGroupVariants,
 } from './button-group/button-group'
+export { Callout, type CalloutProps, calloutVariants } from './callout/callout'
 export {
   Checkbox,
   type CheckboxProps,

apps/sim/ee/data-retention/components/data-retention-settings.tsx

@@ -3,9 +3,7 @@
 import { useEffect, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
-import { Info } from 'lucide-react'
-import { Button, Combobox, toast } from '@/components/emcn'
-
+import { Button, Callout, Combobox, toast } from '@/components/emcn'
 import { useSession } from '@/lib/auth/auth-client'
 import { isBillingEnabled } from '@/lib/core/config/feature-flags'
 import { getUserRole } from '@/lib/workspaces/organization/utils'
@@ -171,10 +169,7 @@ export function DataRetentionSettings() {
 
   return (
     <div className='flex flex-col gap-8'>
-      <div className='flex items-center gap-2 rounded-lg border border-[var(--border)] bg-[var(--surface-2)] px-2.5 py-1.5'>
-        <Info className='h-3.5 w-3.5 flex-shrink-0 text-[var(--text-muted)]' />
-        <p className='text-[12px] text-[var(--text-muted)]'>Applies organization-wide</p>
-      </div>
+      <Callout>Applies organization-wide</Callout>
       <section>
         <div className='flex flex-col gap-5'>
           <SettingRow

apps/sim/ee/whitelabeling/components/whitelabeling-settings.tsx

@@ -3,10 +3,10 @@
 import { useEffect, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
-import { Info, X } from 'lucide-react'
+import { X } from 'lucide-react'
 import Image from 'next/image'
 import { useParams } from 'next/navigation'
-import { Button, Input, Label, Loader, Skeleton, toast } from '@/components/emcn'
+import { Button, Callout, Input, Label, Loader, Skeleton, toast } from '@/components/emcn'
 import { useSession } from '@/lib/auth/auth-client'
 import { getSubscriptionAccessState } from '@/lib/billing/client/utils'
 import { HEX_COLOR_REGEX } from '@/lib/branding'
@@ -318,10 +318,7 @@ export function WhitelabelingSettings() {
 
   return (
     <div className='flex flex-col gap-8'>
-      <div className='flex items-center gap-2 rounded-lg border border-[var(--border)] bg-[var(--surface-2)] px-2.5 py-1.5'>
-        <Info className='h-3.5 w-3.5 flex-shrink-0 text-[var(--text-muted)]' />
-        <p className='text-[12px] text-[var(--text-muted)]'>Applies organization-wide</p>
-      </div>
+      <Callout>Applies organization-wide</Callout>
       <section>
         <SectionTitle>Brand Identity</SectionTitle>
         <div className='flex flex-col gap-5'>