@deepgram/styles 0.2.11 → 0.2.13

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