@terrafirmagreg-team/ui 0.0.0-stage → 1.2.0

package/src/types/glb.ts

@@ -0,0 +1,26 @@
+import type { OrbitControls } from '@react-three/drei';
+import type { ComponentRef } from 'react';
+
+export type GlbOrbitControls = ComponentRef<typeof OrbitControls>;
+
+export type GlbHomeView = {
+  position: [number, number, number];
+  target: [number, number, number];
+};
+
+export type GlbSceneHandle = {
+  zoomBy: (factor: number) => void;
+  reset: () => void;
+};
+
+export type GlbSessionProps = {
+  src?: string | null;
+  sources?: string[];
+  title?: string;
+  scale?: number;
+  offset?: number;
+  bare?: boolean;
+
+  resolveResource?: (resourceUrl: string, modelUrl: string) => string | undefined;
+};
+

package/src/types/mdx-directives.ts

@@ -0,0 +1,106 @@
+import type { CalloutType } from '@terrafirmagreg-team/ui/components/mdx/callout';
+
+export type IconDirectiveProps = {
+  name: string;
+  size?: number | string;
+  color?: string;
+  strokeWidth?: number;
+  className?: string;
+};
+
+export type GradientDirectiveProps = {
+  from?: string;
+  to?: string;
+  dir?: string;
+  image?: string;
+  children: string;
+  className?: string;
+};
+
+export type GlowDirectiveProps = {
+  from?: string;
+  to?: string;
+  dir?: string;
+  image?: string;
+  gradient?: boolean;
+  fade?: boolean;
+  children: string;
+  className?: string;
+};
+
+export type CalloutDirectiveProps = {
+  type?: CalloutType;
+  title?: string;
+  children: string;
+  className?: string;
+};
+
+export type CardDirectiveProps = {
+  title?: string;
+  icon?: string;
+  description?: string;
+  href?: string;
+  external?: boolean;
+  children?: string;
+  className?: string;
+};
+
+export type BannerDirectiveProps = {
+  id?: string;
+  height?: string;
+  variant?: 'rainbow' | 'normal';
+  rainbowColors?: string[];
+  changeLayout?: boolean;
+  children?: string;
+  className?: string;
+};
+
+export type TabsDirectiveProps = {
+  items?: string[];
+  defaultIndex?: number;
+  label?: string;
+  children: string;
+  className?: string;
+};
+
+export type AccordionsDirectiveProps = {
+  multiple?: boolean;
+  defaultValue?: string | string[];
+  children: string;
+  className?: string;
+};
+
+export type StepsDirectiveProps = {
+  children: string;
+  className?: string;
+};
+
+export type FilesDirectiveProps = {
+  children: string;
+  className?: string;
+};
+
+export type CodeFenceMetaProps = {
+  title?: string;
+  lineNumbers?: boolean;
+  tab?: string;
+  noCopy?: boolean;
+  twoslash?: boolean;
+};
+
+export type MermaidDirectiveProps = {
+  chart: string;
+};
+
+export type MathDirectiveProps = {
+  children: string;
+  block?: boolean;
+};
+
+export type TypeTableDirectiveProps = {
+  path?: string;
+  name?: string;
+  type?: string;
+  cwd?: boolean;
+};
+

package/src/types/nav.ts

@@ -0,0 +1,96 @@
+import type { ComponentProps, ReactNode } from 'react';
+
+export type SwitcherOption = {
+  value: string;
+  title: ReactNode;
+  description?: ReactNode;
+  icon?: ReactNode;
+  url?: string;
+  disabled?: boolean;
+};
+
+export type SwitcherProps = Omit<ComponentProps<'button'>, 'onSelect'> & {
+  options: SwitcherOption[];
+  selected?: string;
+  onSelect?: (value: string) => void;
+  placeholder?: ReactNode;
+  icon?: ReactNode;
+  header?: ReactNode;
+  side?: 'top' | 'bottom' | 'left' | 'right';
+};
+
+export type LinkProps = ComponentProps<'a'> & {
+  href?: string;
+  external?: boolean;
+  prefetch?: boolean;
+  children?: ReactNode;
+};
+
+interface Filterable {
+
+  on?: 'menu' | 'nav' | 'all';
+}
+
+interface WithHref {
+  url: string;
+
+  active?: 'url' | 'nested-url' | 'none';
+  external?: boolean;
+}
+
+export interface MainItemType extends WithHref, Filterable {
+  type?: 'main';
+  icon?: ReactNode;
+  text: ReactNode;
+  description?: ReactNode;
+}
+
+export interface IconItemType extends WithHref, Filterable {
+  type: 'icon';
+
+  label?: string;
+  icon: ReactNode;
+  text: ReactNode;
+
+  secondary?: boolean;
+}
+
+export interface ButtonItemType extends WithHref, Filterable {
+  type: 'button';
+  icon?: ReactNode;
+  text: ReactNode;
+
+  secondary?: boolean;
+}
+
+export interface MenuItemType extends Partial<WithHref>, Filterable {
+  type: 'menu';
+  icon?: ReactNode;
+  text: ReactNode;
+  items: (
+    | (MainItemType & {
+
+        menu?: ComponentProps<'a'> & {
+          banner?: ReactNode;
+        };
+      })
+    | CustomItemType
+  )[];
+
+  secondary?: boolean;
+}
+
+export interface CustomItemType extends Filterable {
+  type: 'custom';
+
+  secondary?: boolean;
+  children: ReactNode;
+}
+
+export type LinkItemType =
+  | MainItemType
+  | IconItemType
+  | ButtonItemType
+  | MenuItemType
+  | CustomItemType;
+

package/src/types/preview.ts

@@ -0,0 +1,15 @@
+export type PreviewIcon =
+  | { type: 'icon'; name: string }
+  | {
+      type: 'entry';
+      kind: string;
+      id: string;
+      dataset?: { id: string; version?: string };
+    };
+
+export type PagePreviewData = {
+  title: string;
+  description?: string;
+  icon?: PreviewIcon;
+};
+

package/src/types/readability.ts

@@ -0,0 +1,29 @@
+export const readabilityLayouts = [
+  'full',
+  'sidebar',
+  'both',
+  'original',
+] as const;
+export type ReadabilityLayout = (typeof readabilityLayouts)[number];
+
+export const spotlightStyles = ['under', 'aside'] as const;
+export type SpotlightStyle = (typeof spotlightStyles)[number];
+
+export type ReadabilityState = {
+  layout: ReadabilityLayout;
+  pageWidth: number;
+  contentWidth: number;
+  spotlight: boolean;
+  spotlightStyle: SpotlightStyle;
+};
+
+export type ReadabilityValue = ReadabilityState & {
+  coarsePointer: boolean;
+  smallScreen: boolean;
+  setLayout: (layout: ReadabilityLayout) => void;
+  setPageWidth: (value: number) => void;
+  setContentWidth: (value: number) => void;
+  setSpotlight: (enabled: boolean) => void;
+  setSpotlightStyle: (style: SpotlightStyle) => void;
+};
+

package/src/types/search.ts

@@ -0,0 +1,57 @@
+import type { Dialog } from '@base-ui/react/dialog';
+import type { Root } from 'hast';
+import type { ReactNode } from 'react';
+
+export interface SharedProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  dialogHandle: Dialog.Handle<unknown>;
+}
+
+export interface SortedResult<Content = string> {
+  id: string;
+  url: string;
+  type: 'page' | 'heading' | 'text';
+  content: Content;
+
+  breadcrumbs?: Content[];
+
+  table?: string;
+}
+
+export type ReactSortedResult = SortedResult<ReactNode>;
+
+export interface SearchResultRecord extends SortedResult {
+
+  hastContent: Root;
+}
+
+export interface SearchResultTable {
+  type: 'table';
+
+  id: string;
+  columns: number;
+
+  header?: Root;
+  rows: SearchResultRecord[];
+}
+
+export type SearchResultItem = SearchResultRecord | SearchResultTable;
+
+export interface SearchResult {
+
+  query: string;
+  items: SearchResultItem[];
+}
+
+export type SearchItemType =
+  | ((ReactSortedResult | SearchResultRecord) & {
+      external?: boolean;
+    })
+  | {
+      id: string;
+      type: 'action';
+      node: ReactNode;
+      onSelect: () => void;
+    };
+

package/src/types/tree.ts

@@ -0,0 +1,19 @@
+import type * as PageTree from '@terrafirmagreg-team/translate/types/tree';
+import type { ReactNode } from 'react';
+
+export interface TreeContextValue {
+
+  root: PageTree.Root | PageTree.Folder;
+  full: PageTree.Root;
+}
+
+export interface TabOption {
+  url: string;
+  title?: ReactNode;
+  icon?: ReactNode;
+  description?: ReactNode;
+  unlisted?: boolean;
+  $folder?: PageTree.Folder;
+  urls?: Set<string>;
+}
+

package/src/types/viewer.ts

@@ -0,0 +1,54 @@
+import type { ReactNode, RefObject } from 'react';
+
+export type ZoomControlsProps = {
+  onZoomIn: () => void;
+  onZoomOut: () => void;
+  onFit?: () => void;
+  fitLabel?: string;
+};
+
+export type PagerControlsProps = {
+  index: number;
+  count: number;
+  onSelect: (index: number) => void;
+};
+
+export type ExpandButtonProps = {
+  target: RefObject<HTMLElement | null>;
+};
+
+export type ViewerSliderSetting = {
+  label: ReactNode;
+  icon?: ReactNode;
+  value: number;
+  onChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  format?: (value: number) => string;
+  disabled?: boolean;
+  live?: boolean;
+};
+
+export type ViewerToggleSetting = {
+  label: ReactNode;
+  icon?: ReactNode;
+  checked: boolean;
+  onChange: (value: boolean) => void;
+};
+
+export type ViewerSettingsProps = {
+  label: string;
+  sliders?: ViewerSliderSetting[];
+  toggles?: ViewerToggleSetting[];
+};
+
+export type ViewerControlsProps = {
+  start?: ReactNode;
+  pager?: PagerControlsProps;
+  zoom?: ZoomControlsProps;
+  expand?: ExpandButtonProps;
+  extra?: ReactNode;
+  settings?: ViewerSettingsProps;
+};
+

package/styles/content/base.css

@@ -0,0 +1,198 @@
+:root {
+  --sidebar-drawer-offset: 100%;
+}
+
+[dir='rtl'] {
+  --sidebar-drawer-offset: -100%;
+}
+
+@theme {
+  --animate-fade-in: fade-in 300ms ease;
+  --animate-fade-out: fade-out 300ms ease;
+
+  --animate-roll-in: roll-in 320ms cubic-bezier(0.22, 1, 0.36, 1);
+
+  --animate-dialog-in: dialog-in 300ms cubic-bezier(0.16, 1, 0.3, 1);
+  --animate-dialog-out: dialog-out 300ms cubic-bezier(0.16, 1, 0.3, 1);
+
+  --animate-popover-in: popover-in 100ms ease;
+  --animate-popover-out: popover-out 100ms ease;
+
+  --animate-sidebar-in: sidebar-in 250ms ease;
+  --animate-sidebar-out: sidebar-out 250ms ease;
+
+  @keyframes sidebar-in {
+    from {
+      transform: translateX(var(--sidebar-drawer-offset));
+    }
+  }
+
+  @keyframes sidebar-out {
+    to {
+      transform: translateX(var(--sidebar-drawer-offset));
+    }
+  }
+
+  @keyframes dialog-in {
+    from {
+      transform: scale(1.06);
+      opacity: 0;
+    }
+    to {
+      transform: scale(1);
+    }
+  }
+
+  @keyframes dialog-out {
+    from {
+      transform: scale(1);
+    }
+    to {
+      transform: scale(1.04);
+      opacity: 0;
+    }
+  }
+
+  @keyframes popover-in {
+    from {
+      opacity: 0;
+      transform: scale(0.9);
+    }
+  }
+
+  @keyframes popover-out {
+    to {
+      opacity: 0;
+      transform: scale(0.9);
+    }
+  }
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes roll-in {
+    from {
+      opacity: 0;
+      translate: 0 calc(var(--roll, 1) * 0.6em);
+      filter: blur(2px);
+    }
+  }
+
+  @keyframes fade-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+}
+
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-border, currentColor);
+  }
+
+  body {
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+  }
+}
+
+@utility scroll-container {
+  &::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    background: var(--color-border);
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-corner {
+    display: none;
+  }
+}
+
+@utility fd-steps {
+  counter-reset: step;
+  position: relative;
+  @apply ps-6 ms-2 border-s sm:ms-4 sm:ps-7;
+}
+
+@utility fd-step {
+  position: relative;
+  @apply pb-6;
+  &:before {
+    background-color: var(--color-secondary);
+    color: var(--color-secondary-foreground);
+    content: counter(step);
+    counter-increment: step;
+    justify-content: center;
+    align-items: center;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    display: flex;
+    position: absolute;
+    top: 0;
+    inset-inline-end: calc(100% + 0.5rem);
+    @media (min-width: 40rem) {
+      inset-inline-end: calc(100% + 0.75rem);
+    }
+    @apply size-8 rounded-full;
+  }
+}
+
+@utility prose-no-margin {
+  & > :first-child {
+    margin-top: 0;
+  }
+
+  & > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+@variant dark (&:where(.dark, .dark *));
+
+@variant layout {
+  #docs-layout:has(&),
+  #notebook-layout:has(&),
+  #home-layout:has(&),
+  #flux-layout:has(&),
+  #glass-layout:has(&),
+  #spacious-layout:has(&) {
+    @slot;
+  }
+}
+
+@property --sidebar-col {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --ai-chat-col {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 0px;
+}
+
+.fd-page-tree-item-name {
+  @apply inline-flex items-center gap-1 w-full;
+}

package/styles/content/default-colors.css

@@ -0,0 +1,51 @@
+@theme {
+  --color-background: hsl(0, 0%, 96%);
+  --color-foreground: hsl(0, 0%, 3.9%);
+  --color-muted: hsl(0, 0%, 96.1%);
+  --color-muted-foreground: hsl(0, 0%, 45.1%);
+  --color-popover: hsl(0, 0%, 98%);
+  --color-popover-foreground: hsl(0, 0%, 15.1%);
+  --color-card: hsl(0, 0%, 94.7%);
+  --color-card-foreground: hsl(0, 0%, 3.9%);
+  --color-border: hsla(0, 0%, 80%, 50%);
+  --color-primary: hsl(0, 0%, 9%);
+  --color-primary-foreground: hsl(0, 0%, 98%);
+  --color-secondary: hsl(0, 0%, 93.1%);
+  --color-secondary-foreground: hsl(0, 0%, 9%);
+  --color-accent: hsla(0, 0%, 82%, 50%);
+  --color-accent-foreground: hsl(0, 0%, 9%);
+  --color-ring: hsl(0, 0%, 63.9%);
+  --color-overlay: hsla(0, 0%, 0%, 0.2);
+}
+
+.dark {
+  --color-background: hsl(0, 0%, 7.04%);
+  --color-foreground: hsl(0, 0%, 92%);
+  --color-muted: hsl(0, 0%, 12.9%);
+  --color-muted-foreground: hsla(0, 0%, 70%, 0.8);
+  --color-popover: hsl(0, 0%, 11.6%);
+  --color-popover-foreground: hsl(0, 0%, 86.9%);
+  --color-card: hsl(0, 0%, 9.8%);
+  --color-card-foreground: hsl(0, 0%, 98%);
+  --color-border: hsla(0, 0%, 40%, 20%);
+  --color-primary: hsl(0, 0%, 98%);
+  --color-primary-foreground: hsl(0, 0%, 9%);
+  --color-secondary: hsl(0, 0%, 12.9%);
+  --color-secondary-foreground: hsl(0, 0%, 92%);
+  --color-accent: hsla(0, 0%, 40.9%, 30%);
+  --color-accent-foreground: hsl(0, 0%, 90%);
+  --color-ring: hsl(0, 0%, 54.9%);
+  --color-overlay: hsla(0, 0%, 0%, 0.2);
+}
+
+@theme static {
+  --color-info: oklch(62.3% 0.214 259.815);
+  --color-warning: oklch(76.9% 0.188 70.08);
+  --color-error: oklch(63.7% 0.237 25.331);
+  --color-success: oklch(72.3% 0.219 149.579);
+  --color-idea: oklch(70.5% 0.209 60.849);
+  --color-diff-remove: rgba(200, 10, 100, 0.12);
+  --color-diff-remove-symbol: rgb(230, 10, 100);
+  --color-diff-add: rgba(14, 180, 100, 0.1);
+  --color-diff-add-symbol: rgb(10, 200, 100);
+}