@deepgram/styles 0.2.10 → 0.2.12

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>;
+  }
+);

package/src/react/FormField.tsx

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

package/src/react/FormHelper.tsx

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

package/src/react/FormLabel.tsx

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

package/src/react/GridMobileStack.tsx

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

package/src/react/Header.tsx

@@ -0,0 +1,105 @@
+import { forwardRef, type ComponentPropsWithRef } from 'react';
+
+export interface HeaderProps extends ComponentPropsWithRef<'header'> {
+}
+
+export const Header = forwardRef<HTMLElement, HeaderProps>(
+  function Header({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-header',
+      className,
+    ].filter(Boolean).join(' ');
+    return <header ref={ref} className={cls} {...props}>{children}</header>;
+  }
+);
+
+export interface HeaderContainerProps extends ComponentPropsWithRef<'div'> {
+}
+
+export const HeaderContainer = forwardRef<HTMLDivElement, HeaderContainerProps>(
+  function HeaderContainer({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-header__container',
+      className,
+    ].filter(Boolean).join(' ');
+    return <div ref={ref} className={cls} {...props}>{children}</div>;
+  }
+);
+
+export interface HeaderLogoProps extends ComponentPropsWithRef<'div'> {
+}
+
+export const HeaderLogo = forwardRef<HTMLDivElement, HeaderLogoProps>(
+  function HeaderLogo({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-header__logo',
+      className,
+    ].filter(Boolean).join(' ');
+    return <div ref={ref} className={cls} {...props}>{children}</div>;
+  }
+);
+
+export interface HeaderLogoImageProps extends ComponentPropsWithRef<'img'> {
+}
+
+export const HeaderLogoImage = forwardRef<HTMLImageElement, HeaderLogoImageProps>(
+  function HeaderLogoImage({ className, ...props }, ref) {
+    const cls = [
+      'dg-header__logo-image',
+      className,
+    ].filter(Boolean).join(' ');
+    return <img ref={ref} className={cls} {...props} />;
+  }
+);
+
+export interface HeaderLogoTextProps extends ComponentPropsWithRef<'span'> {
+}
+
+export const HeaderLogoText = forwardRef<HTMLSpanElement, HeaderLogoTextProps>(
+  function HeaderLogoText({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-header__logo-text',
+      className,
+    ].filter(Boolean).join(' ');
+    return <span ref={ref} className={cls} {...props}>{children}</span>;
+  }
+);
+
+export interface HeaderNavProps extends ComponentPropsWithRef<'nav'> {
+}
+
+export const HeaderNav = forwardRef<HTMLElement, HeaderNavProps>(
+  function HeaderNav({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-header__nav',
+      className,
+    ].filter(Boolean).join(' ');
+    return <nav ref={ref} className={cls} {...props}>{children}</nav>;
+  }
+);
+
+export interface HeaderProfileLinkProps extends ComponentPropsWithRef<'a'> {
+}
+
+export const HeaderProfileLink = forwardRef<HTMLAnchorElement, HeaderProfileLinkProps>(
+  function HeaderProfileLink({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-header__profile-link',
+      className,
+    ].filter(Boolean).join(' ');
+    return <a ref={ref} className={cls} {...props}>{children}</a>;
+  }
+);
+
+export interface HeaderProfileAvatarProps extends ComponentPropsWithRef<'img'> {
+}
+
+export const HeaderProfileAvatar = forwardRef<HTMLImageElement, HeaderProfileAvatarProps>(
+  function HeaderProfileAvatar({ className, ...props }, ref) {
+    const cls = [
+      'dg-header__profile-avatar',
+      className,
+    ].filter(Boolean).join(' ');
+    return <img ref={ref} className={cls} {...props} />;
+  }
+);

package/src/react/Hero.tsx

@@ -0,0 +1,105 @@
+import { forwardRef, type ComponentPropsWithRef } from 'react';
+
+export interface HeroProps extends ComponentPropsWithRef<'section'> {
+}
+
+export const Hero = forwardRef<HTMLElement, HeroProps>(
+  function Hero({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-hero',
+      className,
+    ].filter(Boolean).join(' ');
+    return <section ref={ref} className={cls} {...props}>{children}</section>;
+  }
+);
+
+export interface HeroTitleProps extends ComponentPropsWithRef<'h1'> {
+}
+
+export const HeroTitle = forwardRef<HTMLHeadingElement, HeroTitleProps>(
+  function HeroTitle({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-hero__title',
+      className,
+    ].filter(Boolean).join(' ');
+    return <h1 ref={ref} className={cls} {...props}>{children}</h1>;
+  }
+);
+
+export interface HeroContentProps extends ComponentPropsWithRef<'div'> {
+}
+
+export const HeroContent = forwardRef<HTMLDivElement, HeroContentProps>(
+  function HeroContent({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-hero__content',
+      className,
+    ].filter(Boolean).join(' ');
+    return <div ref={ref} className={cls} {...props}>{children}</div>;
+  }
+);
+
+export interface HeroAnnouncementProps extends ComponentPropsWithRef<'a'> {
+}
+
+export const HeroAnnouncement = forwardRef<HTMLAnchorElement, HeroAnnouncementProps>(
+  function HeroAnnouncement({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-hero__announcement',
+      className,
+    ].filter(Boolean).join(' ');
+    return <a ref={ref} className={cls} {...props}>{children}</a>;
+  }
+);
+
+export interface HeroAnnouncementTextProps extends ComponentPropsWithRef<'span'> {
+}
+
+export const HeroAnnouncementText = forwardRef<HTMLSpanElement, HeroAnnouncementTextProps>(
+  function HeroAnnouncementText({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-hero__announcement-text',
+      className,
+    ].filter(Boolean).join(' ');
+    return <span ref={ref} className={cls} {...props}>{children}</span>;
+  }
+);
+
+export interface HeroAnnouncementCtaProps extends ComponentPropsWithRef<'span'> {
+}
+
+export const HeroAnnouncementCta = forwardRef<HTMLSpanElement, HeroAnnouncementCtaProps>(
+  function HeroAnnouncementCta({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-hero__announcement-cta',
+      className,
+    ].filter(Boolean).join(' ');
+    return <span ref={ref} className={cls} {...props}>{children}</span>;
+  }
+);
+
+export interface HeroBodyProps extends ComponentPropsWithRef<'p'> {
+}
+
+export const HeroBody = forwardRef<HTMLParagraphElement, HeroBodyProps>(
+  function HeroBody({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-hero__body',
+      className,
+    ].filter(Boolean).join(' ');
+    return <p ref={ref} className={cls} {...props}>{children}</p>;
+  }
+);
+
+export interface HeroActionsProps extends ComponentPropsWithRef<'div'> {
+}
+
+export const HeroActions = forwardRef<HTMLDivElement, HeroActionsProps>(
+  function HeroActions({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-hero__actions',
+      className,
+    ].filter(Boolean).join(' ');
+    return <div ref={ref} className={cls} {...props}>{children}</div>;
+  }
+);

package/src/react/Icon.tsx

@@ -0,0 +1,16 @@
+import { forwardRef, type ComponentPropsWithRef } from 'react';
+
+export interface IconProps extends ComponentPropsWithRef<'i'> {
+  name?: string;
+}
+
+export const Icon = forwardRef<HTMLElement, IconProps>(
+  function Icon({ name, className, children, ...props }, ref) {
+    const cls = [
+      'dg-icon',
+      name && `fas fa-${name}`,
+      className,
+    ].filter(Boolean).join(' ');
+    return <i ref={ref} className={cls} {...props}>{children}</i>;
+  }
+);

package/src/react/Input.tsx

@@ -0,0 +1,18 @@
+import { forwardRef, type ComponentPropsWithRef } from 'react';
+
+export interface InputProps extends ComponentPropsWithRef<'input'> {
+  inline?: boolean;
+  full?: boolean;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  function Input({ inline, full, className, ...props }, ref) {
+    const cls = [
+      'dg-input',
+      inline && 'dg-input--inline',
+      full && 'dg-input--full',
+      className,
+    ].filter(Boolean).join(' ');
+    return <input ref={ref} className={cls} {...props} />;
+  }
+);

package/src/react/ItemTitle.tsx

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

package/src/react/Link.tsx

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

package/src/react/Modal.tsx

@@ -0,0 +1,29 @@
+import { forwardRef, type ComponentPropsWithRef } from 'react';
+
+export interface ModalProps extends ComponentPropsWithRef<'div'> {
+  visible?: boolean;
+}
+
+export const Modal = forwardRef<HTMLDivElement, ModalProps>(
+  function Modal({ visible, className, children, ...props }, ref) {
+    const cls = [
+      'dg-modal',
+      visible && 'dg-modal--visible',
+      className,
+    ].filter(Boolean).join(' ');
+    return <div ref={ref} className={cls} {...props}>{children}</div>;
+  }
+);
+
+export interface ModalContentProps extends ComponentPropsWithRef<'div'> {
+}
+
+export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
+  function ModalContent({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-modal__content',
+      className,
+    ].filter(Boolean).join(' ');
+    return <div ref={ref} className={cls} {...props}>{children}</div>;
+  }
+);

package/src/react/Newsletter.tsx

@@ -0,0 +1,29 @@
+import { forwardRef, type ComponentPropsWithRef } from 'react';
+
+export interface NewsletterProps extends ComponentPropsWithRef<'div'> {
+  compact?: boolean;
+}
+
+export const Newsletter = forwardRef<HTMLDivElement, NewsletterProps>(
+  function Newsletter({ compact, className, children, ...props }, ref) {
+    const cls = [
+      'dg-newsletter',
+      compact && 'dg-newsletter--compact',
+      className,
+    ].filter(Boolean).join(' ');
+    return <div ref={ref} className={cls} {...props}>{children}</div>;
+  }
+);
+
+export interface NewsletterFormProps extends ComponentPropsWithRef<'form'> {
+}
+
+export const NewsletterForm = forwardRef<HTMLFormElement, NewsletterFormProps>(
+  function NewsletterForm({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-newsletter__form',
+      className,
+    ].filter(Boolean).join(' ');
+    return <form ref={ref} className={cls} {...props}>{children}</form>;
+  }
+);

package/src/react/Option.tsx

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

package/src/react/PageHeading.tsx

@@ -0,0 +1,40 @@
+import { forwardRef, type ComponentPropsWithRef } from 'react';
+
+export interface PageHeadingProps extends ComponentPropsWithRef<'div'> {
+}
+
+export const PageHeading = forwardRef<HTMLDivElement, PageHeadingProps>(
+  function PageHeading({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-page-heading',
+      className,
+    ].filter(Boolean).join(' ');
+    return <div ref={ref} className={cls} {...props}>{children}</div>;
+  }
+);
+
+export interface PageHeadingTitleProps extends ComponentPropsWithRef<'h1'> {
+}
+
+export const PageHeadingTitle = forwardRef<HTMLHeadingElement, PageHeadingTitleProps>(
+  function PageHeadingTitle({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-page-heading__title',
+      className,
+    ].filter(Boolean).join(' ');
+    return <h1 ref={ref} className={cls} {...props}>{children}</h1>;
+  }
+);
+
+export interface PageHeadingDescriptionProps extends ComponentPropsWithRef<'p'> {
+}
+
+export const PageHeadingDescription = forwardRef<HTMLParagraphElement, PageHeadingDescriptionProps>(
+  function PageHeadingDescription({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-page-heading__description',
+      className,
+    ].filter(Boolean).join(' ');
+    return <p ref={ref} className={cls} {...props}>{children}</p>;
+  }
+);