@deepgram/styles 0.2.11 → 0.2.13

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

package/src/react/PageHeadings.tsx

@@ -0,0 +1,53 @@
+import { forwardRef, type ComponentPropsWithRef } from 'react';
+
+export interface PageHeadingsProps extends ComponentPropsWithRef<'div'> {
+}
+
+export const PageHeadings = forwardRef<HTMLDivElement, PageHeadingsProps>(
+  function PageHeadings({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-page-headings',
+      className,
+    ].filter(Boolean).join(' ');
+    return <div ref={ref} className={cls} {...props}>{children}</div>;
+  }
+);
+
+export interface PageHeadingsTitleWrapperProps extends ComponentPropsWithRef<'div'> {
+}
+
+export const PageHeadingsTitleWrapper = forwardRef<HTMLDivElement, PageHeadingsTitleWrapperProps>(
+  function PageHeadingsTitleWrapper({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-page-headings__title-wrapper',
+      className,
+    ].filter(Boolean).join(' ');
+    return <div ref={ref} className={cls} {...props}>{children}</div>;
+  }
+);
+
+export interface PageHeadingsTitleProps extends ComponentPropsWithRef<'h2'> {
+}
+
+export const PageHeadingsTitle = forwardRef<HTMLHeadingElement, PageHeadingsTitleProps>(
+  function PageHeadingsTitle({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-page-headings__title',
+      className,
+    ].filter(Boolean).join(' ');
+    return <h2 ref={ref} className={cls} {...props}>{children}</h2>;
+  }
+);
+
+export interface PageHeadingsActionsProps extends ComponentPropsWithRef<'div'> {
+}
+
+export const PageHeadingsActions = forwardRef<HTMLDivElement, PageHeadingsActionsProps>(
+  function PageHeadingsActions({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-page-headings__actions',
+      className,
+    ].filter(Boolean).join(' ');
+    return <div ref={ref} className={cls} {...props}>{children}</div>;
+  }
+);

package/src/react/Prose.tsx

@@ -0,0 +1,18 @@
+import { forwardRef, type ComponentPropsWithRef } from 'react';
+
+export interface ProseProps extends ComponentPropsWithRef<'p'> {
+  large?: boolean;
+  small?: boolean;
+}
+
+export const Prose = forwardRef<HTMLParagraphElement, ProseProps>(
+  function Prose({ large, small, className, children, ...props }, ref) {
+    const cls = [
+      'dg-prose',
+      large && 'dg-prose--large',
+      small && 'dg-prose--small',
+      className,
+    ].filter(Boolean).join(' ');
+    return <p ref={ref} className={cls} {...props}>{children}</p>;
+  }
+);

package/src/react/Radio.tsx

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

package/src/react/RadioDescription.tsx

@@ -0,0 +1,27 @@
+import { forwardRef, type ComponentPropsWithRef } from 'react';
+
+export interface RadioDescriptionProps extends ComponentPropsWithRef<'div'> {
+}
+
+export const RadioDescription = forwardRef<HTMLDivElement, RadioDescriptionProps>(
+  function RadioDescription({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-radio-description',
+      className,
+    ].filter(Boolean).join(' ');
+    return <div ref={ref} className={cls} {...props}>{children}</div>;
+  }
+);
+
+export interface RadioDescriptionHintProps extends ComponentPropsWithRef<'span'> {
+}
+
+export const RadioDescriptionHint = forwardRef<HTMLSpanElement, RadioDescriptionHintProps>(
+  function RadioDescriptionHint({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-radio-description__hint',
+      className,
+    ].filter(Boolean).join(' ');
+    return <span ref={ref} className={cls} {...props}>{children}</span>;
+  }
+);

package/src/react/RadioGroup.tsx

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

package/src/react/RadioLabel.tsx

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

package/src/react/Section.tsx

@@ -0,0 +1,24 @@
+import { forwardRef, type ComponentPropsWithRef } from 'react';
+
+export interface SectionProps extends ComponentPropsWithRef<'div'> {
+  compact?: boolean;
+  spacious?: boolean;
+  bordered?: boolean;
+  elevated?: boolean;
+  fieldset?: boolean;
+}
+
+export const Section = forwardRef<HTMLDivElement, SectionProps>(
+  function Section({ compact, spacious, bordered, elevated, fieldset, className, children, ...props }, ref) {
+    const cls = [
+      'dg-section',
+      compact && 'dg-section--compact',
+      spacious && 'dg-section--spacious',
+      bordered && 'dg-section--bordered',
+      elevated && 'dg-section--elevated',
+      fieldset && 'dg-section--fieldset',
+      className,
+    ].filter(Boolean).join(' ');
+    return <div ref={ref} className={cls} {...props}>{children}</div>;
+  }
+);

package/src/react/SectionHeading.tsx

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

package/src/react/Select.tsx

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

package/src/react/Spinner.tsx

@@ -0,0 +1,27 @@
+import { forwardRef, type ComponentPropsWithRef } from 'react';
+
+export interface SpinnerProps extends ComponentPropsWithRef<'div'> {
+}
+
+export const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(
+  function Spinner({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-spinner',
+      className,
+    ].filter(Boolean).join(' ');
+    return <div ref={ref} className={cls} {...props}>{children}</div>;
+  }
+);
+
+export interface SpinnerTitleProps extends ComponentPropsWithRef<'p'> {
+}
+
+export const SpinnerTitle = forwardRef<HTMLParagraphElement, SpinnerTitleProps>(
+  function SpinnerTitle({ className, children, ...props }, ref) {
+    const cls = [
+      'dg-spinner__title',
+      className,
+    ].filter(Boolean).join(' ');
+    return <p ref={ref} className={cls} {...props}>{children}</p>;
+  }
+);

package/src/react/Status.tsx

@@ -0,0 +1,30 @@
+import { forwardRef, type ComponentPropsWithRef } from 'react';
+
+export interface StatusProps extends ComponentPropsWithRef<'div'> {
+  info?: boolean;
+  success?: boolean;
+  warning?: boolean;
+  error?: boolean;
+  primary?: boolean;
+  secondary?: boolean;
+  withIcon?: boolean;
+  compact?: boolean;
+}
+
+export const Status = forwardRef<HTMLDivElement, StatusProps>(
+  function Status({ info, success, warning, error, primary, secondary, withIcon, compact, className, children, ...props }, ref) {
+    const cls = [
+      'dg-status',
+      info && 'dg-status--info',
+      success && 'dg-status--success',
+      warning && 'dg-status--warning',
+      error && 'dg-status--error',
+      primary && 'dg-status--primary',
+      secondary && 'dg-status--secondary',
+      withIcon && 'dg-status--with-icon',
+      compact && 'dg-status--compact',
+      className,
+    ].filter(Boolean).join(' ');
+    return <div ref={ref} className={cls} {...props}>{children}</div>;
+  }
+);

package/src/react/TextUtilities.tsx

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

package/src/react/Textarea.tsx

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

package/src/react/Toggle.tsx

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

package/src/react/ToggleGroup.tsx

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

package/src/react/ToggleLabel.tsx

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