@deepgram/styles 0.2.11 → 0.2.12

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

package/src/react/index.ts

@@ -0,0 +1,43 @@
+export { Btn, type BtnProps } from './Btn.js';
+export { ActionGroup, type ActionGroupProps } from './ActionGroup.js';
+export { Section, type SectionProps } from './Section.js';
+export { Card, type CardProps, CardImage, type CardImageProps, CardIcon, type CardIconProps, CardHeader, type CardHeaderProps, CardBody, type CardBodyProps, CardFooter, type CardFooterProps } from './Card.js';
+export { CodeBlock, type CodeBlockProps } from './CodeBlock.js';
+export { Hero, type HeroProps, HeroTitle, type HeroTitleProps, HeroContent, type HeroContentProps, HeroAnnouncement, type HeroAnnouncementProps, HeroAnnouncementText, type HeroAnnouncementTextProps, HeroAnnouncementCta, type HeroAnnouncementCtaProps, HeroBody, type HeroBodyProps, HeroActions, type HeroActionsProps } from './Hero.js';
+export { SectionHeading, type SectionHeadingProps } from './SectionHeading.js';
+export { PageHeading, type PageHeadingProps, PageHeadingTitle, type PageHeadingTitleProps, PageHeadingDescription, type PageHeadingDescriptionProps } from './PageHeading.js';
+export { PageHeadings, type PageHeadingsProps, PageHeadingsTitleWrapper, type PageHeadingsTitleWrapperProps, PageHeadingsTitle, type PageHeadingsTitleProps, PageHeadingsActions, type PageHeadingsActionsProps } from './PageHeadings.js';
+export { CardHeading, type CardHeadingProps } from './CardHeading.js';
+export { CardHeadings, type CardHeadingsProps, CardHeadingsTitle, type CardHeadingsTitleProps } from './CardHeadings.js';
+export { ItemTitle, type ItemTitleProps } from './ItemTitle.js';
+export { Prose, type ProseProps } from './Prose.js';
+export { Icon, type IconProps } from './Icon.js';
+export { Input, type InputProps } from './Input.js';
+export { Textarea, type TextareaProps } from './Textarea.js';
+export { Checkbox, type CheckboxProps } from './Checkbox.js';
+export { Select, type SelectProps } from './Select.js';
+export { Option, type OptionProps } from './Option.js';
+export { Radio, type RadioProps } from './Radio.js';
+export { Toggle, type ToggleProps } from './Toggle.js';
+export { CheckboxLabel, type CheckboxLabelProps } from './CheckboxLabel.js';
+export { CheckboxDescription, type CheckboxDescriptionProps } from './CheckboxDescription.js';
+export { CheckboxGroup, type CheckboxGroupProps } from './CheckboxGroup.js';
+export { RadioLabel, type RadioLabelProps } from './RadioLabel.js';
+export { RadioDescription, type RadioDescriptionProps, RadioDescriptionHint, type RadioDescriptionHintProps } from './RadioDescription.js';
+export { RadioGroup, type RadioGroupProps } from './RadioGroup.js';
+export { ToggleLabel, type ToggleLabelProps } from './ToggleLabel.js';
+export { ToggleGroup, type ToggleGroupProps } from './ToggleGroup.js';
+export { FormLabel, type FormLabelProps } from './FormLabel.js';
+export { FormHelper, type FormHelperProps } from './FormHelper.js';
+export { FormError, type FormErrorProps } from './FormError.js';
+export { FormField, type FormFieldProps } from './FormField.js';
+export { DragDropZone, type DragDropZoneProps, DragDropZoneInput, type DragDropZoneInputProps, DragDropZoneIcon, type DragDropZoneIconProps, DragDropZoneText, type DragDropZoneTextProps, DragDropZoneHint, type DragDropZoneHintProps } from './DragDropZone.js';
+export { Status, type StatusProps } from './Status.js';
+export { Spinner, type SpinnerProps, SpinnerTitle, type SpinnerTitleProps } from './Spinner.js';
+export { ConstrainWidth, type ConstrainWidthProps } from './ConstrainWidth.js';
+export { GridMobileStack, type GridMobileStackProps } from './GridMobileStack.js';
+export { Columns, type ColumnsProps, ColumnsWrapper, type ColumnsWrapperProps, ColumnsMobileHeader, type ColumnsMobileHeaderProps, ColumnsSidebarToggle, type ColumnsSidebarToggleProps, ColumnsColumn, type ColumnsColumnProps } from './Columns.js';
+export { Footer, type FooterProps, FooterSocialLinks, type FooterSocialLinksProps, FooterSocialLink, type FooterSocialLinkProps } from './Footer.js';
+export { TextUtilities, type TextUtilitiesProps } from './TextUtilities.js';
+export { Newsletter, type NewsletterProps, NewsletterForm, type NewsletterFormProps } from './Newsletter.js';
+export { Alert, type AlertProps, AlertContent, type AlertContentProps, AlertIcon, type AlertIconProps, AlertBody, type AlertBodyProps, AlertTitle, type AlertTitleProps, AlertDescription, type AlertDescriptionProps, AlertActions, type AlertActionsProps, AlertList, type AlertListProps, AlertDismiss, type AlertDismissProps } from './Alert.js';

package/src/utils.ts

@@ -0,0 +1,60 @@
+const STORAGE_KEY = 'dg-theme';
+const EVENT_NAME = 'dg-theme-change';
+
+type Theme = 'light' | 'dark' | 'system';
+
+function applyAndPersist(theme: Theme): void {
+  if (theme === 'system') {
+    document.documentElement.style.removeProperty('color-scheme');
+  } else {
+    document.documentElement.style.colorScheme = theme;
+  }
+  localStorage.setItem(STORAGE_KEY, theme);
+  document.dispatchEvent(
+    new CustomEvent(EVENT_NAME, { detail: { theme } })
+  );
+}
+
+export function setLight(): void {
+  applyAndPersist('light');
+}
+
+export function setDark(): void {
+  applyAndPersist('dark');
+}
+
+export function setSystem(): void {
+  applyAndPersist('system');
+}
+
+/** Read the current theme from the `<html>` inline style. */
+export function getTheme(): Theme {
+  const value = document.documentElement.style.colorScheme;
+  if (value === 'light') return 'light';
+  if (value === 'dark') return 'dark';
+  return 'system';
+}
+
+/**
+ * Restore the saved theme from localStorage.
+ * Call this in an inline `<script>` in `<head>` to prevent FOUC.
+ */
+export function restoreTheme(): void {
+  const saved = localStorage.getItem(STORAGE_KEY);
+  if (saved === 'light' || saved === 'dark') {
+    document.documentElement.style.colorScheme = saved;
+  }
+}
+
+/**
+ * Subscribe to theme changes. Returns an unsubscribe function.
+ */
+export function onThemeChange(
+  callback: (theme: Theme) => void
+): () => void {
+  const handler = (e: Event) => {
+    callback((e as CustomEvent<{ theme: Theme }>).detail.theme);
+  };
+  document.addEventListener(EVENT_NAME, handler);
+  return () => document.removeEventListener(EVENT_NAME, handler);
+}