@deepgram/styles 0.2.10 → 0.2.12

package/lib/tailwind-theme.css

@@ -9,7 +9,6 @@
 
 /* Source scanning for class detection */
 @source "./deepgram.css";
-@source inline("collapsed selected visible");
 
 /* Dark mode support */
 @variant dark (&.dark);
@@ -18,22 +17,24 @@
 @theme {
   --color-dg-primary: var(--dg-primary, #13ef95);
   --color-dg-secondary: var(--dg-secondary, #149afb);
-  --color-dg-almost-black: #050506;
-  --color-dg-background: #0b0b0c;
-  --color-dg-charcoal: #1a1a1f;
-  --color-dg-translucent: rgba(0, 0, 0, 0.5);
-  --color-dg-border: #2c2c33;
-  --color-dg-pebble: #4e4e52;
-  --color-dg-slate: #949498;
-  --color-dg-text: #fbfbff;
-  --color-dg-fog: #edede2;
-  --color-dg-platinum: #e1e1e5;
-  --color-dg-muted: #949498;
-  --color-dg-success: #12b76a;
-  --color-dg-warning: #fec84b;
-  --color-dg-danger: #f04438;
-  --color-dg-gradient-start: #008fc1;
-  --color-dg-gradient-end: #00f099;
+  --color-dg-almost-black: light-dark(#f8f9fa, #050506);
+  --color-dg-background: light-dark(#ffffff, #0b0b0c);
+  --color-dg-charcoal: light-dark(#f3f4f6, #1a1a1f);
+  --color-dg-solid: light-dark(#000000, #ffffff);
+  --color-dg-translucent: light-dark(rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.5));
+  --color-dg-border: light-dark(#d1d5db, #2c2c33);
+  --color-dg-pebble: light-dark(#9ca3af, #4e4e52);
+  --color-dg-slate: light-dark(#6b7280, #949498);
+  --color-dg-text: light-dark(#111827, #fbfbff);
+  --color-dg-fog: light-dark(#1f2937, #edede2);
+  --color-dg-platinum: light-dark(#374151, #e1e1e5);
+  --color-dg-muted: light-dark(#6b7280, #949498);
+  --color-dg-on-solid: light-dark(#ffffff, #000000);
+  --color-dg-success: light-dark(#15803d, #12b76a);
+  --color-dg-warning: light-dark(#a16207, #fec84b);
+  --color-dg-danger: light-dark(#b91c1c, #f04438);
+  --color-dg-gradient-start: light-dark(#0369a1, #008fc1);
+  --color-dg-gradient-end: light-dark(#059669, #00f099);
 
   --font-dg-sans: "Inter", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
   --font-dg-noto: "Noto Sans", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
@@ -60,10 +61,14 @@
 /* Base styles */
 @layer base {
   :root {
+    color-scheme: light dark;
     --dg-base-font-size: 16px;
     --dg-border-width: 0.125rem;
-    --dg-primary: #13ef95;
-    --dg-secondary: #149afb;
+    --dg-primary: light-dark(#047857, #13ef95);
+    --dg-secondary: light-dark(#0369a1, #149afb);
+    --dg-syntax-keyword: #f97583;
+    --dg-syntax-variable: #79b8ff;
+    --dg-syntax-function: #b392f0;
   }
 
   html {
@@ -141,13 +146,13 @@
 
 /* Custom utilities */
 @utility dg-gradient-border {
-  background-image: linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)), linear-gradient(90deg, color-mix(in srgb, var(--dg-secondary, #149afb) 70%, #000), color-mix(in srgb, var(--dg-primary, #13ef95) 70%, #000), color-mix(in srgb, var(--dg-secondary, #149afb) 70%, #000), color-mix(in srgb, var(--dg-primary, #13ef95) 70%, #000));
+  background-image: linear-gradient(var(--color-dg-on-solid), var(--color-dg-on-solid)), linear-gradient(90deg, color-mix(in srgb, var(--dg-secondary, #149afb) 70%, black), color-mix(in srgb, var(--dg-primary, #13ef95) 70%, black), color-mix(in srgb, var(--dg-secondary, #149afb) 70%, black), color-mix(in srgb, var(--dg-primary, #13ef95) 70%, black));
   background-origin: padding-box, border-box;
   background-clip: padding-box, border-box;
   background-repeat: no-repeat;
   background-position: center;
   background-size: 100% 100%;
-  background-color: rgb(0, 0, 0);
+  background-color: var(--color-dg-on-solid);
 }
 
 @utility dg-bg-reset {
@@ -164,5 +169,5 @@
 }
 
 @utility dg-shadow-subtle {
-  box-shadow: rgba(38, 44, 52, 0.05) 0 0.0625rem 0.125rem;
+  box-shadow: color-mix(in srgb, var(--color-dg-pebble) 5%, transparent) 0 0.0625rem 0.125rem;
 }

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@deepgram/styles",
-  "version": "0.2.10",
+  "version": "0.2.12",
   "description": "Tailwind-based design system and styles library for Deepgram design system and demos",
   "author": "Deepgram",
-  "license": "MIT",
+  "license": "ISC",
   "repository": {
     "type": "git",
     "url": "https://github.com/deepgram/dx-design.git",
@@ -24,6 +24,7 @@
   "files": [
     "dist/",
     "lib/",
+    "src/",
     "design-system.yaml",
     "README.md",
     "LICENSE"
@@ -49,17 +50,67 @@
     },
     "./design-system": {
       "default": "./design-system.yaml"
+    },
+    "./logo/wordmark": {
+      "default": "./dist/logo/wordmark.svg"
+    },
+    "./logo/wordmark-light": {
+      "default": "./dist/logo/wordmark-light.svg"
+    },
+    "./logo/wordmark-dark": {
+      "default": "./dist/logo/wordmark-dark.svg"
+    },
+    "./logo/lettermark": {
+      "default": "./dist/logo/lettermark.svg"
+    },
+    "./logo/lettermark-light": {
+      "default": "./dist/logo/lettermark-light.svg"
+    },
+    "./logo/lettermark-dark": {
+      "default": "./dist/logo/lettermark-dark.svg"
+    },
+    "./logo/lettermark-square": {
+      "default": "./dist/logo/lettermark-square.svg"
+    },
+    "./logo/lettermark-square-light": {
+      "default": "./dist/logo/lettermark-square-light.svg"
+    },
+    "./logo/lettermark-square-dark": {
+      "default": "./dist/logo/lettermark-square-dark.svg"
+    },
+    "./logo/lettermark-circle": {
+      "default": "./dist/logo/lettermark-circle.svg"
+    },
+    "./logo/lettermark-circle-light": {
+      "default": "./dist/logo/lettermark-circle-light.svg"
+    },
+    "./logo/lettermark-circle-dark": {
+      "default": "./dist/logo/lettermark-circle-dark.svg"
+    },
+    "./utils": {
+      "types": "./dist/utils.d.ts",
+      "import": "./dist/utils.js",
+      "default": "./dist/utils.js"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.js",
+      "default": "./dist/react/index.js"
     }
   },
   "publishConfig": {
     "access": "public"
   },
   "peerDependencies": {
-    "tailwindcss": "^4.0.0"
+    "tailwindcss": "^4.0.0",
+    "react": "^18.0.0 || ^19.0.0"
   },
   "peerDependenciesMeta": {
     "tailwindcss": {
       "optional": true
+    },
+    "react": {
+      "optional": true
     }
   }
 }

package/src/react/ActionGroup.tsx

@@ -0,0 +1,14 @@
+import { forwardRef, type ComponentPropsWithRef } from 'react';
+
+export interface ActionGroupProps extends ComponentPropsWithRef<'div'> {
+}
+
+export const ActionGroup = forwardRef<HTMLDivElement, ActionGroupProps>(
+  function ActionGroup({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-action-group',
+      className,
+    ].filter(Boolean).join(' ');
+    return <div ref={ref} className={cls} {...props}>{children}</div>;
+  }
+);

package/src/react/Alert.tsx

@@ -0,0 +1,130 @@
+import { forwardRef, type ComponentPropsWithRef } from 'react';
+
+export interface AlertProps extends ComponentPropsWithRef<'div'> {
+  warning?: boolean;
+  success?: boolean;
+  danger?: boolean;
+  info?: boolean;
+}
+
+export const Alert = forwardRef<HTMLDivElement, AlertProps>(
+  function Alert({ warning, success, danger, info, className, children, ...props }, ref) {
+    const cls = [
+      'dg-alert',
+      warning && 'dg-alert--warning',
+      success && 'dg-alert--success',
+      danger && 'dg-alert--danger',
+      info && 'dg-alert--info',
+      className,
+    ].filter(Boolean).join(' ');
+    return <div ref={ref} className={cls} {...props}>{children}</div>;
+  }
+);
+
+export interface AlertContentProps extends ComponentPropsWithRef<'div'> {
+}
+
+export const AlertContent = forwardRef<HTMLDivElement, AlertContentProps>(
+  function AlertContent({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-alert__content',
+      className,
+    ].filter(Boolean).join(' ');
+    return <div ref={ref} className={cls} {...props}>{children}</div>;
+  }
+);
+
+export interface AlertIconProps extends ComponentPropsWithRef<'i'> {
+  name?: string;
+}
+
+export const AlertIcon = forwardRef<HTMLElement, AlertIconProps>(
+  function AlertIcon({ name, className, children, ...props }, ref) {
+    const cls = [
+      'dg-alert__icon',
+      name && `fas fa-${name}`,
+      className,
+    ].filter(Boolean).join(' ');
+    return <i ref={ref} className={cls} {...props}>{children}</i>;
+  }
+);
+
+export interface AlertBodyProps extends ComponentPropsWithRef<'div'> {
+}
+
+export const AlertBody = forwardRef<HTMLDivElement, AlertBodyProps>(
+  function AlertBody({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-alert__body',
+      className,
+    ].filter(Boolean).join(' ');
+    return <div ref={ref} className={cls} {...props}>{children}</div>;
+  }
+);
+
+export interface AlertTitleProps extends ComponentPropsWithRef<'h3'> {
+}
+
+export const AlertTitle = forwardRef<HTMLHeadingElement, AlertTitleProps>(
+  function AlertTitle({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-alert__title',
+      className,
+    ].filter(Boolean).join(' ');
+    return <h3 ref={ref} className={cls} {...props}>{children}</h3>;
+  }
+);
+
+export interface AlertDescriptionProps extends ComponentPropsWithRef<'div'> {
+}
+
+export const AlertDescription = forwardRef<HTMLDivElement, AlertDescriptionProps>(
+  function AlertDescription({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-alert__description',
+      className,
+    ].filter(Boolean).join(' ');
+    return <div ref={ref} className={cls} {...props}>{children}</div>;
+  }
+);
+
+export interface AlertActionsProps extends ComponentPropsWithRef<'div'> {
+}
+
+export const AlertActions = forwardRef<HTMLDivElement, AlertActionsProps>(
+  function AlertActions({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-alert__actions',
+      className,
+    ].filter(Boolean).join(' ');
+    return <div ref={ref} className={cls} {...props}>{children}</div>;
+  }
+);
+
+export interface AlertListProps extends ComponentPropsWithRef<'ul'> {
+}
+
+export const AlertList = forwardRef<HTMLUListElement, AlertListProps>(
+  function AlertList({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-alert__list',
+      className,
+    ].filter(Boolean).join(' ');
+    return <ul ref={ref} className={cls} {...props}>{children}</ul>;
+  }
+);
+
+export interface AlertDismissProps extends ComponentPropsWithRef<'button'> {
+  name?: string;
+}
+
+export const AlertDismiss = forwardRef<HTMLButtonElement, AlertDismissProps>(
+  function AlertDismiss({ name, className, children, ...props }, ref) {
+    const cls = [
+      'dg-alert__dismiss',
+      name && `fas fa-${name}`,
+      className,
+    ].filter(Boolean).join(' ');
+    return <button ref={ref} className={cls} {...props}>{children}</button>;
+  }
+);

package/src/react/Btn.tsx

@@ -0,0 +1,28 @@
+import { forwardRef, type ComponentPropsWithRef } from 'react';
+
+export interface BtnProps extends ComponentPropsWithRef<'button'> {
+  sm?: boolean;
+  primary?: boolean;
+  secondary?: boolean;
+  ghost?: boolean;
+  dangerGhost?: boolean;
+  iconOnly?: boolean;
+  collapse?: boolean;
+}
+
+export const Btn = forwardRef<HTMLButtonElement, BtnProps>(
+  function Btn({ sm, primary, secondary, ghost, dangerGhost, iconOnly, collapse, className, children, ...props }, ref) {
+    const cls = [
+      'dg-btn',
+      sm && 'dg-btn--sm',
+      primary && 'dg-btn--primary',
+      secondary && 'dg-btn--secondary',
+      ghost && 'dg-btn--ghost',
+      dangerGhost && 'dg-btn--danger-ghost',
+      iconOnly && 'dg-btn--icon-only',
+      collapse && 'dg-btn--collapse',
+      className,
+    ].filter(Boolean).join(' ');
+    return <button ref={ref} className={cls} {...props}>{children}</button>;
+  }
+);

package/src/react/BtnCollapse.tsx

@@ -0,0 +1,14 @@
+import { forwardRef, type ComponentPropsWithRef } from 'react';
+
+export interface BtnCollapseProps extends ComponentPropsWithRef<'div'> {
+}
+
+export const BtnCollapse = forwardRef<HTMLDivElement, BtnCollapseProps>(
+  function BtnCollapse({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-btn-collapse',
+      className,
+    ].filter(Boolean).join(' ');
+    return <div ref={ref} className={cls} {...props}>{children}</div>;
+  }
+);

package/src/react/BtnDangerGhost.tsx

@@ -0,0 +1,14 @@
+import { forwardRef, type ComponentPropsWithRef } from 'react';
+
+export interface BtnDangerGhostProps extends ComponentPropsWithRef<'div'> {
+}
+
+export const BtnDangerGhost = forwardRef<HTMLDivElement, BtnDangerGhostProps>(
+  function BtnDangerGhost({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-btn-danger-ghost',
+      className,
+    ].filter(Boolean).join(' ');
+    return <div ref={ref} className={cls} {...props}>{children}</div>;
+  }
+);

package/src/react/BtnGhost.tsx

@@ -0,0 +1,14 @@
+import { forwardRef, type ComponentPropsWithRef } from 'react';
+
+export interface BtnGhostProps extends ComponentPropsWithRef<'div'> {
+}
+
+export const BtnGhost = forwardRef<HTMLDivElement, BtnGhostProps>(
+  function BtnGhost({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-btn-ghost',
+      className,
+    ].filter(Boolean).join(' ');
+    return <div ref={ref} className={cls} {...props}>{children}</div>;
+  }
+);

package/src/react/BtnIcon.tsx

@@ -0,0 +1,14 @@
+import { forwardRef, type ComponentPropsWithRef } from 'react';
+
+export interface BtnIconProps extends ComponentPropsWithRef<'div'> {
+}
+
+export const BtnIcon = forwardRef<HTMLDivElement, BtnIconProps>(
+  function BtnIcon({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-btn-icon',
+      className,
+    ].filter(Boolean).join(' ');
+    return <div ref={ref} className={cls} {...props}>{children}</div>;
+  }
+);

package/src/react/BtnSecondary.tsx

@@ -0,0 +1,14 @@
+import { forwardRef, type ComponentPropsWithRef } from 'react';
+
+export interface BtnSecondaryProps extends ComponentPropsWithRef<'div'> {
+}
+
+export const BtnSecondary = forwardRef<HTMLDivElement, BtnSecondaryProps>(
+  function BtnSecondary({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-btn-secondary',
+      className,
+    ].filter(Boolean).join(' ');
+    return <div ref={ref} className={cls} {...props}>{children}</div>;
+  }
+);

package/src/react/BtnSmall.tsx

@@ -0,0 +1,14 @@
+import { forwardRef, type ComponentPropsWithRef } from 'react';
+
+export interface BtnSmallProps extends ComponentPropsWithRef<'div'> {
+}
+
+export const BtnSmall = forwardRef<HTMLDivElement, BtnSmallProps>(
+  function BtnSmall({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-btn-small',
+      className,
+    ].filter(Boolean).join(' ');
+    return <div ref={ref} className={cls} {...props}>{children}</div>;
+  }
+);

package/src/react/Card.tsx

@@ -0,0 +1,93 @@
+import { forwardRef, type ComponentPropsWithRef } from 'react';
+
+export interface CardProps extends ComponentPropsWithRef<'div'> {
+  compact?: boolean;
+  spacious?: boolean;
+  bordered?: boolean;
+  structured?: boolean;
+  selectable?: boolean;
+  fileUpload?: boolean;
+}
+
+export const Card = forwardRef<HTMLDivElement, CardProps>(
+  function Card({ compact, spacious, bordered, structured, selectable, fileUpload, className, children, ...props }, ref) {
+    const cls = [
+      'dg-card',
+      compact && 'dg-card--compact',
+      spacious && 'dg-card--spacious',
+      bordered && 'dg-card--bordered',
+      structured && 'dg-card--structured',
+      selectable && 'dg-card--selectable',
+      fileUpload && 'dg-card--file-upload',
+      className,
+    ].filter(Boolean).join(' ');
+    return <div ref={ref} className={cls} {...props}>{children}</div>;
+  }
+);
+
+export interface CardImageProps extends ComponentPropsWithRef<'div'> {
+}
+
+export const CardImage = forwardRef<HTMLDivElement, CardImageProps>(
+  function CardImage({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-card__image',
+      className,
+    ].filter(Boolean).join(' ');
+    return <div ref={ref} className={cls} {...props}>{children}</div>;
+  }
+);
+
+export interface CardIconProps extends ComponentPropsWithRef<'i'> {
+  name?: string;
+}
+
+export const CardIcon = forwardRef<HTMLElement, CardIconProps>(
+  function CardIcon({ name, className, children, ...props }, ref) {
+    const cls = [
+      'dg-card__icon',
+      name && `fas fa-${name}`,
+      className,
+    ].filter(Boolean).join(' ');
+    return <i ref={ref} className={cls} {...props}>{children}</i>;
+  }
+);
+
+export interface CardHeaderProps extends ComponentPropsWithRef<'div'> {
+}
+
+export const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(
+  function CardHeader({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-card__header',
+      className,
+    ].filter(Boolean).join(' ');
+    return <div ref={ref} className={cls} {...props}>{children}</div>;
+  }
+);
+
+export interface CardBodyProps extends ComponentPropsWithRef<'div'> {
+}
+
+export const CardBody = forwardRef<HTMLDivElement, CardBodyProps>(
+  function CardBody({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-card__body',
+      className,
+    ].filter(Boolean).join(' ');
+    return <div ref={ref} className={cls} {...props}>{children}</div>;
+  }
+);
+
+export interface CardFooterProps extends ComponentPropsWithRef<'div'> {
+}
+
+export const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(
+  function CardFooter({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-card__footer',
+      className,
+    ].filter(Boolean).join(' ');
+    return <div ref={ref} className={cls} {...props}>{children}</div>;
+  }
+);

package/src/react/CardHeading.tsx

@@ -0,0 +1,14 @@
+import { forwardRef, type ComponentPropsWithRef } from 'react';
+
+export interface CardHeadingProps extends ComponentPropsWithRef<'h3'> {
+}
+
+export const CardHeading = forwardRef<HTMLHeadingElement, CardHeadingProps>(
+  function CardHeading({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-card-heading',
+      className,
+    ].filter(Boolean).join(' ');
+    return <h3 ref={ref} className={cls} {...props}>{children}</h3>;
+  }
+);

package/src/react/CardHeadings.tsx

@@ -0,0 +1,27 @@
+import { forwardRef, type ComponentPropsWithRef } from 'react';
+
+export interface CardHeadingsProps extends ComponentPropsWithRef<'div'> {
+}
+
+export const CardHeadings = forwardRef<HTMLDivElement, CardHeadingsProps>(
+  function CardHeadings({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-card-headings',
+      className,
+    ].filter(Boolean).join(' ');
+    return <div ref={ref} className={cls} {...props}>{children}</div>;
+  }
+);
+
+export interface CardHeadingsTitleProps extends ComponentPropsWithRef<'h3'> {
+}
+
+export const CardHeadingsTitle = forwardRef<HTMLHeadingElement, CardHeadingsTitleProps>(
+  function CardHeadingsTitle({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-card-headings__title',
+      className,
+    ].filter(Boolean).join(' ');
+    return <h3 ref={ref} className={cls} {...props}>{children}</h3>;
+  }
+);

package/src/react/Checkbox.tsx

@@ -0,0 +1,14 @@
+import { forwardRef, type ComponentPropsWithRef } from 'react';
+
+export interface CheckboxProps extends ComponentPropsWithRef<'input'> {
+}
+
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+  function Checkbox({ className, ...props }, ref) {
+    const cls = [
+      'dg-checkbox',
+      className,
+    ].filter(Boolean).join(' ');
+    return <input ref={ref} type="checkbox" className={cls} {...props} />;
+  }
+);

package/src/react/CheckboxDescription.tsx

@@ -0,0 +1,14 @@
+import { forwardRef, type ComponentPropsWithRef } from 'react';
+
+export interface CheckboxDescriptionProps extends ComponentPropsWithRef<'div'> {
+}
+
+export const CheckboxDescription = forwardRef<HTMLDivElement, CheckboxDescriptionProps>(
+  function CheckboxDescription({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-checkbox-description',
+      className,
+    ].filter(Boolean).join(' ');
+    return <div ref={ref} className={cls} {...props}>{children}</div>;
+  }
+);

package/src/react/CheckboxGroup.tsx

@@ -0,0 +1,14 @@
+import { forwardRef, type ComponentPropsWithRef } from 'react';
+
+export interface CheckboxGroupProps extends ComponentPropsWithRef<'div'> {
+}
+
+export const CheckboxGroup = forwardRef<HTMLDivElement, CheckboxGroupProps>(
+  function CheckboxGroup({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-checkbox-group',
+      className,
+    ].filter(Boolean).join(' ');
+    return <div ref={ref} className={cls} {...props}>{children}</div>;
+  }
+);

package/src/react/CheckboxLabel.tsx

@@ -0,0 +1,14 @@
+import { forwardRef, type ComponentPropsWithRef } from 'react';
+
+export interface CheckboxLabelProps extends ComponentPropsWithRef<'label'> {
+}
+
+export const CheckboxLabel = forwardRef<HTMLLabelElement, CheckboxLabelProps>(
+  function CheckboxLabel({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-checkbox-label',
+      className,
+    ].filter(Boolean).join(' ');
+    return <label ref={ref} className={cls} {...props}>{children}</label>;
+  }
+);

package/src/react/CodeBlock.tsx

@@ -0,0 +1,20 @@
+import { forwardRef, type ComponentPropsWithRef } from 'react';
+
+export interface CodeBlockProps extends ComponentPropsWithRef<'div'> {
+  compact?: boolean;
+  tall?: boolean;
+  noScroll?: boolean;
+}
+
+export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
+  function CodeBlock({ compact, tall, noScroll, className, children, ...props }, ref) {
+    const cls = [
+      'dg-code-block',
+      compact && 'dg-code-block--compact',
+      tall && 'dg-code-block--tall',
+      noScroll && 'dg-code-block--no-scroll',
+      className,
+    ].filter(Boolean).join(' ');
+    return <div ref={ref} className={cls} {...props}>{children}</div>;
+  }
+);