@deepgram/styles 0.2.11 → 0.2.13

package/lib/tailwind-theme.css

@@ -9,7 +9,6 @@
 
 /* Source scanning for class detection */
 @source "./deepgram.css";
-@source inline("visible");
 
 /* Dark mode support */
 @variant dark (&.dark);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deepgram/styles",
-  "version": "0.2.11",
+  "version": "0.2.13",
   "description": "Tailwind-based design system and styles library for Deepgram design system and demos",
   "author": "Deepgram",
   "license": "ISC",
@@ -24,6 +24,7 @@
   "files": [
     "dist/",
     "lib/",
+    "src/",
     "design-system.yaml",
     "README.md",
     "LICENSE"
@@ -85,17 +86,31 @@
     },
     "./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/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>;
+  }
+);

package/src/react/Columns.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { forwardRef, type ComponentPropsWithRef } from 'react';
+
+export interface ColumnsProps extends ComponentPropsWithRef<'div'> {
+  fixed?: boolean;
+}
+
+export const Columns = forwardRef<HTMLDivElement, ColumnsProps>(
+  function Columns({ fixed, className, children, ...props }, ref) {
+    const cls = [
+      'dg-columns',
+      fixed && 'dg-columns--fixed',
+      className,
+    ].filter(Boolean).join(' ');
+    return <div ref={ref} className={cls} {...props}>{children}</div>;
+  }
+);
+
+export interface ColumnsWrapperProps extends ComponentPropsWithRef<'div'> {
+}
+
+export const ColumnsWrapper = forwardRef<HTMLDivElement, ColumnsWrapperProps>(
+  function ColumnsWrapper({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-columns__wrapper',
+      className,
+    ].filter(Boolean).join(' ');
+    return <div ref={ref} className={cls} {...props}>{children}</div>;
+  }
+);
+
+export interface ColumnsMobileHeaderProps extends ComponentPropsWithRef<'div'> {
+}
+
+export const ColumnsMobileHeader = forwardRef<HTMLDivElement, ColumnsMobileHeaderProps>(
+  function ColumnsMobileHeader({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-columns__mobile-header',
+      className,
+    ].filter(Boolean).join(' ');
+    return <div ref={ref} className={cls} {...props}>{children}</div>;
+  }
+);
+
+export interface ColumnsSidebarToggleProps extends ComponentPropsWithRef<'div'> {
+}
+
+export const ColumnsSidebarToggle = forwardRef<HTMLDivElement, ColumnsSidebarToggleProps>(
+  function ColumnsSidebarToggle({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-columns__sidebar-toggle',
+      className,
+    ].filter(Boolean).join(' ');
+    return <div ref={ref} className={cls} {...props}>{children}</div>;
+  }
+);
+
+export interface ColumnsColumnProps extends Omit<ComponentPropsWithRef<'div'>, 'is'> {
+  is?: React.ElementType;
+  left?: boolean;
+  right?: boolean;
+  center?: boolean;
+  sm?: boolean;
+  lg?: boolean;
+  xl?: boolean;
+}
+
+export const ColumnsColumn = forwardRef<HTMLElement, ColumnsColumnProps>(
+  function ColumnsColumn({ is: Tag = 'div', left, right, center, sm, lg, xl, className, children, ...props }, ref) {
+    const cls = [
+      'dg-columns__column',
+      left && 'dg-columns__column--left',
+      right && 'dg-columns__column--right',
+      center && 'dg-columns__column--center',
+      sm && 'dg-columns__column--sm',
+      lg && 'dg-columns__column--lg',
+      xl && 'dg-columns__column--xl',
+      className,
+    ].filter(Boolean).join(' ');
+    return <Tag ref={ref} className={cls} {...props}>{children}</Tag>;
+  }
+);

package/src/react/ConstrainWidth.tsx

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

package/src/react/DragDropZone.tsx

@@ -0,0 +1,68 @@
+import { forwardRef, type ComponentPropsWithRef } from 'react';
+
+export interface DragDropZoneProps extends ComponentPropsWithRef<'div'> {
+}
+
+export const DragDropZone = forwardRef<HTMLDivElement, DragDropZoneProps>(
+  function DragDropZone({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-drag-drop-zone',
+      className,
+    ].filter(Boolean).join(' ');
+    return <div ref={ref} className={cls} {...props}>{children}</div>;
+  }
+);
+
+export interface DragDropZoneInputProps extends ComponentPropsWithRef<'input'> {
+}
+
+export const DragDropZoneInput = forwardRef<HTMLInputElement, DragDropZoneInputProps>(
+  function DragDropZoneInput({ className, ...props }, ref) {
+    const cls = [
+      'dg-drag-drop-zone__input',
+      className,
+    ].filter(Boolean).join(' ');
+    return <input ref={ref} type="file" className={cls} {...props} />;
+  }
+);
+
+export interface DragDropZoneIconProps extends ComponentPropsWithRef<'i'> {
+  name?: string;
+}
+
+export const DragDropZoneIcon = forwardRef<HTMLElement, DragDropZoneIconProps>(
+  function DragDropZoneIcon({ name, className, children, ...props }, ref) {
+    const cls = [
+      'dg-drag-drop-zone__icon',
+      name && `fas fa-${name}`,
+      className,
+    ].filter(Boolean).join(' ');
+    return <i ref={ref} className={cls} {...props}>{children}</i>;
+  }
+);
+
+export interface DragDropZoneTextProps extends ComponentPropsWithRef<'p'> {
+}
+
+export const DragDropZoneText = forwardRef<HTMLParagraphElement, DragDropZoneTextProps>(
+  function DragDropZoneText({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-drag-drop-zone__text',
+      className,
+    ].filter(Boolean).join(' ');
+    return <p ref={ref} className={cls} {...props}>{children}</p>;
+  }
+);
+
+export interface DragDropZoneHintProps extends ComponentPropsWithRef<'p'> {
+}
+
+export const DragDropZoneHint = forwardRef<HTMLParagraphElement, DragDropZoneHintProps>(
+  function DragDropZoneHint({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-drag-drop-zone__hint',
+      className,
+    ].filter(Boolean).join(' ');
+    return <p ref={ref} className={cls} {...props}>{children}</p>;
+  }
+);

package/src/react/Footer.tsx

@@ -0,0 +1,40 @@
+import { forwardRef, type ComponentPropsWithRef } from 'react';
+
+export interface FooterProps extends ComponentPropsWithRef<'footer'> {
+}
+
+export const Footer = forwardRef<HTMLElement, FooterProps>(
+  function Footer({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-footer',
+      className,
+    ].filter(Boolean).join(' ');
+    return <footer ref={ref} className={cls} {...props}>{children}</footer>;
+  }
+);
+
+export interface FooterSocialLinksProps extends ComponentPropsWithRef<'div'> {
+}
+
+export const FooterSocialLinks = forwardRef<HTMLDivElement, FooterSocialLinksProps>(
+  function FooterSocialLinks({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-footer__social-links',
+      className,
+    ].filter(Boolean).join(' ');
+    return <div ref={ref} className={cls} {...props}>{children}</div>;
+  }
+);
+
+export interface FooterSocialLinkProps extends ComponentPropsWithRef<'a'> {
+}
+
+export const FooterSocialLink = forwardRef<HTMLAnchorElement, FooterSocialLinkProps>(
+  function FooterSocialLink({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-footer__social-link',
+      className,
+    ].filter(Boolean).join(' ');
+    return <a ref={ref} className={cls} {...props}>{children}</a>;
+  }
+);

package/src/react/FormError.tsx

@@ -0,0 +1,14 @@
+import { forwardRef, type ComponentPropsWithRef } from 'react';
+
+export interface FormErrorProps extends ComponentPropsWithRef<'span'> {
+}
+
+export const FormError = forwardRef<HTMLSpanElement, FormErrorProps>(
+  function FormError({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-form-error',
+      className,
+    ].filter(Boolean).join(' ');
+    return <span ref={ref} className={cls} {...props}>{children}</span>;
+  }
+);