@terrafirmagreg-team/ui 0.1.0 → 1.2.0

package/src/components/mdx/banner.tsx

@@ -8,6 +8,17 @@ import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-transl
 
 type BannerVariant = 'rainbow' | 'normal';
 
+export type BannerProps = HTMLAttributes<HTMLDivElement> & {
+
+  height?: string;
+
+  variant?: BannerVariant;
+
+  rainbowColors?: string[];
+
+  changeLayout?: boolean;
+};
+
 export function Banner({
   id,
   variant = 'normal',
@@ -20,16 +31,7 @@ export function Banner({
     'rgba(131,255,166,0.66)',
   ],
   ...props
-}: HTMLAttributes<HTMLDivElement> & {
-
-  height?: string;
-
-  variant?: BannerVariant;
-
-  rainbowColors?: string[];
-
-  changeLayout?: boolean;
-}) {
+}: BannerProps) {
   const t = useTranslations();
   const [open, setOpen] = useState(true);
   const globalKey = id ? `banner-${encodeBase32(id)}` : null;
@@ -50,7 +52,7 @@ export function Banner({
       id={id}
       {...props}
       className={cn(
-        'sticky top-0 z-40 flex flex-row items-center justify-center px-4 text-center text-sm font-medium',
+        'sticky top-0 z-40 flex flex-row items-center justify-center rounded-xl px-4 text-center text-sm font-medium',
         variant === 'normal' && 'bg-secondary',
         variant === 'rainbow' && 'bg-background',
         !open && 'hidden',
@@ -85,7 +87,7 @@ export function Banner({
       {id ? (
         <button
           type="button"
-          aria-label={t('ui.banner_close', { note: 'aria-label' })}
+          aria-label={t('Close Banner', { note: 'ui.banner_close' })}
           onClick={onClose}
           className={cn(
             buttonVariants({
@@ -152,3 +154,4 @@ function encodeBase32(str: string) {
 
   return encoded;
 }
+

package/src/components/mdx/callout.tsx

@@ -94,3 +94,4 @@ export function CalloutDescription({ children, className, ...props }: ComponentP
     </div>
   );
 }
+

package/src/components/mdx/card.tsx

@@ -2,6 +2,7 @@
 import { useUiComponents } from '@terrafirmagreg-team/ui/provider';
 import type { ComponentProps, ComponentType, HTMLAttributes, ReactNode } from 'react';
 import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import { Icon } from '@terrafirmagreg-team/ui/components/mdx/icon';
 
 export function Cards(props: HTMLAttributes<HTMLDivElement>) {
   return (
@@ -12,7 +13,7 @@ export function Cards(props: HTMLAttributes<HTMLDivElement>) {
 }
 
 export type CardProps = Omit<HTMLAttributes<HTMLElement>, 'title'> & {
-  icon?: ReactNode;
+  icon?: ReactNode | string;
   title: ReactNode;
   description?: ReactNode;
 
@@ -22,11 +23,16 @@ export type CardProps = Omit<HTMLAttributes<HTMLElement>, 'title'> & {
 
 export function Card({ icon, title, description, ...props }: CardProps) {
   const { Link } = useUiComponents();
-  const E = (props.href ? Link : 'div') as ComponentType<ComponentProps<'a'>>;
+  const { external, href, ...rest } = props;
+  const E = (href ? Link : 'div') as ComponentType<ComponentProps<'a'>>;
 
   return (
     <E
-      {...props}
+      {...rest}
+      href={href}
+      {...(external
+        ? { target: '_blank', rel: 'noopener noreferrer' }
+        : {})}
       data-card
       className={cn(
         'block rounded-xl border bg-card p-4 text-card-foreground transition-colors @max-lg:col-span-full',
@@ -35,8 +41,8 @@ export function Card({ icon, title, description, ...props }: CardProps) {
       )}
     >
       {icon ? (
-        <div className="not-prose mb-2 w-fit shadow-md rounded-lg border bg-muted p-1.5 text-muted-foreground [&_svg]:size-4">
-          {icon}
+        <div className="not-prose mb-2 inline-flex h-7 min-w-8 items-center justify-center rounded-lg border bg-muted px-2 text-muted-foreground shadow-md [&_svg]:size-4">
+          {typeof icon === 'string' ? <Icon name={icon} /> : icon}
         </div>
       ) : null}
       <h3 className="not-prose mb-1 text-sm font-medium">{title}</h3>
@@ -47,3 +53,4 @@ export function Card({ icon, title, description, ...props }: CardProps) {
     </E>
   );
 }
+

package/src/components/mdx/codeblock.tsx

@@ -142,7 +142,7 @@ function CopyButton({
     if (!pre) return;
 
     const clone = pre.cloneNode(true) as HTMLElement;
-    clone.querySelectorAll('.copy-ignore').forEach((node) => {
+    clone.querySelectorAll('.copy-ignore, .nd-copy-ignore').forEach((node) => {
       node.replaceWith('\n');
     });
 
@@ -168,8 +168,8 @@ function CopyButton({
       {checked ? <Check /> : <Clipboard />}
       <span className="sr-only">
         {checked
-          ? t('ui.copied_text', { note: 'aria-label' })
-          : t('ui.copy_text', { note: 'aria-label' })}
+          ? t('Copied Text', { note: 'ui.copied_text' })
+          : t('Copy Text', { note: 'ui.copy_text' })}
       </span>
     </button>
   );
@@ -232,7 +232,7 @@ export function CodeBlockTabsTrigger({
       {...props}
       className={(s) =>
         cn(
-          'relative group inline-flex text-sm font-medium text-nowrap items-center transition-colors gap-2 px-2 py-1.5 [&_svg]:size-3.5',
+          'relative group inline-flex text-sm font-medium text-nowrap items-center transition-colors gap-2 px-2 py-1.5 [&_svg]:size-3.5 border-b-0',
           s.active ? 'text-primary' : 'hover:text-accent-foreground',
           typeof className === 'function' ? className(s) : className,
         )
@@ -247,3 +247,4 @@ export function CodeBlockTabsTrigger({
 export function CodeBlockTab(props: ComponentProps<typeof TabsContent>) {
   return <TabsContent {...props} />;
 }
+

package/src/components/mdx/collapsible.tsx

@@ -30,3 +30,4 @@ export function CollapsibleContent({
 export type CollapsibleProps = Primitive.Root.Props;
 export type CollapsibleContentProps = Primitive.Panel.Props;
 export type CollapsibleTriggerProps = Primitive.Trigger.Props;
+

package/src/components/mdx/files.tsx

@@ -60,3 +60,4 @@ export function Folder({ name, defaultOpen = false, ...props }: FolderProps): Re
     </Collapsible>
   );
 }
+

package/src/components/mdx/glow-header.tsx

@@ -11,6 +11,7 @@ export function GlowHeader({
   image,
   style,
   className,
+  children,
   ...props
 }: GradientProps & { fade?: boolean; gradient?: boolean } & ComponentProps<'span'>) {
   const boxFrom = from ?? '#fa18cf';
@@ -20,7 +21,7 @@ export function GlowHeader({
   return (
     <span
       className={cn(
-        'mb-6 inline-block rounded-[20px] border border-transparent px-4 py-2.5 text-center',
+        'relative mb-6 inline-block rounded-[20px] px-4 py-2.5 text-center',
         className,
       )}
       style={{
@@ -31,10 +32,23 @@ export function GlowHeader({
           WebkitTextFillColor: 'transparent',
         }),
         boxShadow: `0 10px 20px color-mix(in srgb, ${boxFrom} 25%, transparent)`,
-        ...(fade && { borderImage: `${gradientBg} 1` }),
         ...style,
       }}
       {...props}
-    />
+    >
+      {children}
+      {fade && (
+        <span
+          aria-hidden
+          className="pointer-events-none absolute inset-x-4 -bottom-0.5 h-0.5 rounded-full"
+          style={{
+            backgroundImage: gradientBg,
+            maskImage:
+              'linear-gradient(to right, transparent, black 25%, black 75%, transparent)',
+          }}
+        />
+      )}
+    </span>
   );
 }
+

package/src/components/mdx/gradient-text.tsx

@@ -25,3 +25,4 @@ export function GradientText({
     />
   );
 }
+

package/src/components/mdx/icon.tsx

@@ -0,0 +1,35 @@
+import { icons, type LucideProps } from 'lucide-react';
+import * as SI from '@icons-pack/react-simple-icons';
+import type { ComponentType } from 'react';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+
+const registry = icons as Record<string, ComponentType<LucideProps>>;
+const brands = SI as unknown as Record<string, ComponentType<LucideProps>>;
+
+function toPascal(name: string): string {
+  return name
+    .split(/[-_\s]+/)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join('');
+}
+
+export function Icon({
+  name,
+  className,
+  ...props
+}: { name: string } & LucideProps) {
+  const Component =
+    registry[name] ?? registry[toPascal(name)] ?? brands[`Si${toPascal(name)}`];
+  if (!Component) return null;
+  return (
+    <Component
+      className={cn(
+        'inline-block align-[-0.125em]',
+        props.size === undefined && 'size-[1em]',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+

package/src/components/mdx/image-zoom.tsx

@@ -163,7 +163,7 @@ export function Lightbox({ children }: { children: ReactNode }) {
           <dialog
             ref={initDialog}
             tabIndex={-1}
-            aria-label={t('ui.image_viewer', { note: 'aria-label' })}
+            aria-label={t('Image Viewer', { note: 'ui.image_viewer' })}
             onCancel={(e) => {
               e.preventDefault();
               close();
@@ -179,7 +179,7 @@ export function Lightbox({ children }: { children: ReactNode }) {
           >
             <button
               type="button"
-              aria-label={t('ui.close', { note: 'aria-label' })}
+              aria-label={t('Close', { note: 'ui.close' })}
               onClick={close}
               className={cn(
                 buttonVariants({
@@ -226,7 +226,7 @@ export function Lightbox({ children }: { children: ReactNode }) {
               <>
                 <button
                   type="button"
-                  aria-label={t('ui.prev_image', { note: 'aria-label' })}
+                  aria-label={t('Previous Image', { note: 'ui.prev_image' })}
                   onClick={() => navigate(-1)}
                   className={cn(
                     buttonVariants({
@@ -240,7 +240,7 @@ export function Lightbox({ children }: { children: ReactNode }) {
                 </button>
                 <button
                   type="button"
-                  aria-label={t('ui.next_image', { note: 'aria-label' })}
+                  aria-label={t('Next Image', { note: 'ui.next_image' })}
                   onClick={() => navigate(1)}
                   className={cn(
                     buttonVariants({
@@ -312,3 +312,4 @@ function transition(from: HTMLElement, update: () => HTMLElement) {
       if (to) to.style.viewTransitionName = '';
     });
 }
+

package/src/components/mdx/math.tsx

@@ -0,0 +1,30 @@
+import katex from 'katex';
+import { useMemo } from 'react';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+
+export function Math({
+  children,
+  block = false,
+  className,
+}: {
+  children?: string;
+  block?: boolean;
+  className?: string;
+}) {
+  const html = useMemo(
+    () =>
+      katex.renderToString(children ?? '', {
+        displayMode: block,
+        throwOnError: false,
+      }),
+    [children, block],
+  );
+  const Tag = block ? 'div' : 'span';
+  return (
+    <Tag
+      className={cn(block && 'my-4 overflow-x-auto text-center', className)}
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  );
+}
+

package/src/components/mdx/mermaid.tsx

@@ -7,10 +7,17 @@ export function Mermaid({ chart }: { chart: string }) {
   if (svg === null) {
     return (
       <CodeBlock title="Mermaid">
-        <Pre>{chart}</Pre>
+        <Pre>
+          {chart.split('\n').map((line, i) => (
+            <span key={i} className="line">
+              {line}
+            </span>
+          ))}
+        </Pre>
       </CodeBlock>
     );
   }
 
   return <div dangerouslySetInnerHTML={{ __html: svg }} />;
 }
+

package/src/components/mdx/multiblock.tsx

@@ -16,3 +16,4 @@ export function Multiblock({
     </div>
   );
 }
+

package/src/components/mdx/preview.tsx

@@ -17,7 +17,7 @@ function Pane({
 }) {
   const t = useTranslations();
   const text =
-    label ?? (kind === 'input' ? t('ui.input') : t('ui.output'));
+    label ?? (kind === 'input' ? t('Input', { note: 'ui.input' }) : t('Output', { note: 'ui.output' }));
 
   return (
     <div className={cn('min-w-0', className)}>
@@ -98,3 +98,4 @@ function Output({
 }
 
 export { Preview, Input, Output };
+

package/src/components/mdx/steps.tsx

@@ -7,3 +7,4 @@ export function Steps({ children }: { children: ReactNode }) {
 export function Step({ children }: { children: ReactNode }) {
   return <div className="fd-step">{children}</div>;
 }
+

package/src/components/mdx/table.tsx

@@ -11,3 +11,4 @@ export function Table(props: ComponentProps<'table'>) {
     </div>
   );
 }
+

package/src/components/mdx/tabs.tsx

@@ -224,7 +224,7 @@ export function TabsList({ className, ...props }: React.ComponentProps<typeof Ba
       {...props}
       className={(s) =>
         cn(
-          'flex gap-3.5 text-secondary-foreground overflow-x-auto px-4 not-prose',
+          'flex gap-3.5 text-secondary-foreground overflow-x-auto px-4 not-prose border-b border-border',
           typeof className === 'function' ? className(s) : className,
         )
       }
@@ -351,3 +351,4 @@ function useCollectionIndex() {
 function escapeValue(v: string): string {
   return v.toLowerCase().replace(/\s/, '-');
 }
+

package/src/components/mdx/type-table.tsx

@@ -53,8 +53,8 @@ export function TypeTable({
       {...props}
     >
       <div className="flex font-medium items-center px-3 py-1 not-prose text-muted-foreground">
-        <p className="w-1/4">{t('ui.prop')}</p>
-        <p className="@max-xl:hidden">{t('ui.type')}</p>
+        <p className="w-1/4">{t('Prop', { note: 'ui.prop' })}</p>
+        <p className="@max-xl:hidden">{t('Type', { note: 'ui.type' })}</p>
       </div>
       {Object.entries(type).map(([key, value]) => (
         <Item key={key} parentId={id} name={key} item={value} />
@@ -134,19 +134,19 @@ function Item({
           </div>
           {typeDescription && (
             <>
-              <p className={cn(fieldVariants())}>{t('ui.type')}</p>
+              <p className={cn(fieldVariants())}>{t('Type', { note: 'ui.type' })}</p>
               <p className="my-auto not-prose">{typeDescription}</p>
             </>
           )}
           {defaultValue && (
             <>
-              <p className={cn(fieldVariants())}>{t('ui.default')}</p>
+              <p className={cn(fieldVariants())}>{t('Default', { note: 'ui.default' })}</p>
               <p className="my-auto not-prose">{defaultValue}</p>
             </>
           )}
           {parameters.length > 0 && (
             <>
-              <p className={cn(fieldVariants())}>{t('ui.parameters')}</p>
+              <p className={cn(fieldVariants())}>{t('Parameters', { note: 'ui.parameters' })}</p>
               <div className="flex flex-col gap-2">
                 {parameters.map((param) => (
                   <div key={param.name} className="inline-flex items-center flex-wrap gap-1">
@@ -159,7 +159,7 @@ function Item({
           )}
           {returns && (
             <>
-              <p className={cn(fieldVariants())}>{t('ui.returns')}</p>
+              <p className={cn(fieldVariants())}>{t('Returns', { note: 'ui.returns' })}</p>
               <div className="my-auto prose prose-sm prose-no-margin">{returns}</div>
             </>
           )}
@@ -168,3 +168,4 @@ function Item({
     </Collapsible>
   );
 }
+

package/src/{provider.tsx → components/provider.tsx}

@@ -68,11 +68,9 @@ export interface ThemeOptions extends ThemeProviderProps {
 
   enabled?: boolean;
 
-
   hotKey?: string | ((e: KeyboardEvent) => boolean) | false;
 }
 
-
 function ThemeHotKey({
   hotKey,
 }: {
@@ -106,7 +104,6 @@ function ThemeHotKey({
   return null;
 }
 
-
 export function UiRootProvider({
   children,
   dir = 'ltr',
@@ -139,3 +136,4 @@ export function UiRootProvider({
 
   return <DirectionProvider direction={dir}>{body}</DirectionProvider>;
 }
+

package/src/hooks/canvas/use-flow-hover.ts

@@ -16,3 +16,4 @@ export function useFlowHover(): FlowHoverValue {
 export function useFlowHoverState(): FlowHoverValue {
   return useContext(FlowHoverContext);
 }
+

package/src/hooks/canvas/use-flow-viewport-persist.ts

@@ -31,3 +31,4 @@ export function useFlowViewportPersist(storageKey: string, resetKey: string) {
 
   return { markReady, persist };
 }
+

package/src/hooks/page/use-fit-pages.ts

@@ -89,3 +89,4 @@ export function useFitPages<T>(
     // eslint-disable-next-line react-hooks/exhaustive-deps -- dim is item-keyed
   }, [items, w, h, urlPage, gap, focus, vertical]);
 }
+

package/src/hooks/page/use-location-search.ts

@@ -1,8 +1,8 @@
 'use client';
 
-import { useSyncExternalStore } from 'react';
+import { useMemo, useSyncExternalStore } from 'react';
 
-let search = '';
+let search = typeof window === 'undefined' ? '' : window.location.search.slice(1);
 const listeners = new Set<() => void>();
 
 export function publishLocationSearch(value: string) {
@@ -23,3 +23,9 @@ export function useLocationSearch(): string {
     () => '',
   );
 }
+
+export function useLocationSearchParams(): URLSearchParams {
+  const search = useLocationSearch();
+  return useMemo(() => new URLSearchParams(search), [search]);
+}
+

package/src/hooks/page/use-page-preview.ts

@@ -1,7 +1,7 @@
 'use client';
 import { useEffect, useState } from 'react';
 import { uiConfig } from '@terrafirmagreg-team/ui/lib/config';
-import { createAsyncCache } from '@terrafirmagreg-team/ui/lib/utils/async-cache';
+import { createAsyncCache } from '@terrafirmagreg-team/data/lib/async-cache';
 import type { PagePreviewData } from '@terrafirmagreg-team/ui/types/preview';
 
 const previewCache = createAsyncCache(
@@ -38,3 +38,4 @@ export function usePagePreview(
   }, [href, active, lang]);
   return preview;
 }
+

package/src/hooks/page/use-paged-list.ts

@@ -18,3 +18,4 @@ export function usePagedList<T>(
     return { page, pages, shown, from, to, total: items.length };
   }, [items, pageIndex, pageSize]);
 }
+

package/src/hooks/readability/{provider.ts → use-readability.ts}

@@ -84,3 +84,4 @@ export function ReadabilityProvider({ children }: { children: ReactNode }) {
 
   return createElement(ReadabilityContext.Provider, { value }, children);
 }
+

package/src/hooks/search/{dialog.ts → use-dialog.ts}

@@ -39,3 +39,4 @@ export function useSearchTagsList() {
   if (!ctx) throw new Error('Missing <SearchTagsList />');
   return ctx;
 }
+

package/src/hooks/search/use-highlight-query.ts

@@ -1,5 +1,6 @@
 'use client';
 import { useCallback } from 'react';
+import { injectHighlightStyle } from '@terrafirmagreg-team/ui/lib/utils/highlight-style';
 
 function buildRegexFromQuery(query: string): RegExp | null {
   const source = query
@@ -16,8 +17,13 @@ export function useHighlightQuery(query: string) {
       if (!element || !regex || typeof Highlight === 'undefined')
         return () => {};
       let highlight = CSS.highlights.get('search-hit');
-      if (!highlight)
+      if (!highlight) {
         CSS.highlights.set('search-hit', (highlight = new Highlight()));
+        injectHighlightStyle(
+          'search-hit',
+          'color:var(--color-primary);text-decoration-line:underline',
+        );
+      }
       const walker = document.createTreeWalker(
         element,
         NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT,
@@ -49,3 +55,4 @@ export function useHighlightQuery(query: string) {
     [query],
   );
 }
+

package/src/hooks/search/{provider.ts → use-provider.ts}

@@ -23,3 +23,4 @@ export const SearchContext = createContext<SearchContextType>({
 export function useSearchContext(): SearchContextType {
   return use(SearchContext);
 }
+

package/src/hooks/use-async-value.ts

@@ -32,18 +32,19 @@ export function useAsyncValue<T>(
 export function useAsyncResult<T>(
   factory: (() => Promise<T>) | false | null | undefined,
   deps: DependencyList,
-): { value: T | undefined; pending: boolean } {
+): { value: T | undefined; pending: boolean; error: unknown } {
   const [entry, setEntry] = useState<{
     deps: DependencyList;
     value: T | undefined;
+    error?: unknown;
   }>();
   useAsyncEffect(async (isCancelled) => {
     if (!factory) return;
     try {
       const next = await factory();
       if (!isCancelled()) setEntry({ deps, value: next });
-    } catch {
-      if (!isCancelled()) setEntry({ deps, value: undefined });
+    } catch (error) {
+      if (!isCancelled()) setEntry({ deps, value: undefined, error });
     }
   }, deps);
   const resolved =
@@ -53,5 +54,7 @@ export function useAsyncResult<T>(
   return {
     value: factory && resolved ? entry?.value : undefined,
     pending: Boolean(factory) && !resolved,
+    error: factory && resolved ? entry?.error : undefined,
   };
 }
+

package/src/hooks/use-close-on-scroll.ts

@@ -21,3 +21,4 @@ export function useCloseOnScroll(open: boolean, close: () => void): void {
     return () => window.removeEventListener('scroll', onScroll, true);
   }, [open]);
 }
+

package/src/hooks/use-copy-button.ts

@@ -44,3 +44,4 @@ export function useCopyButton(onCopy: () => unknown): {
 
   return { checked, isLoading, error, onClick };
 }
+

package/src/hooks/use-cycle-index.ts

@@ -73,3 +73,4 @@ export function useCycleIndex(
 
   return [index, setIndex] as const;
 }
+

package/src/hooks/use-document-title.ts

@@ -7,3 +7,4 @@ export function useDocumentTitle(title: string): void {
     document.title = title;
   }, [title]);
 }
+

package/src/hooks/use-element-size.ts

@@ -33,3 +33,4 @@ export function useElementSize(ref: RefObject<HTMLElement | null>) {
 
   return size;
 }
+

package/src/hooks/use-external-meta.ts

@@ -5,7 +5,7 @@ import {
   uiConfig,
   type ExternalMetaProvider,
 } from '@terrafirmagreg-team/ui/lib/config';
-import { createAsyncCache } from '@terrafirmagreg-team/ui/lib/utils/async-cache';
+import { createAsyncCache } from '@terrafirmagreg-team/data/lib/async-cache';
 
 export interface ExternalMeta {
   title: string;
@@ -130,3 +130,4 @@ export function useExternalMeta(
   }, [href, active]);
   return meta;
 }
+

package/src/hooks/use-hot-key.ts

@@ -31,3 +31,4 @@ function isTypingTarget(target: EventTarget | null): boolean {
 
   return target.closest('[role="dialog"]') !== null;
 }
+

package/src/hooks/use-hover-follow.ts

@@ -52,3 +52,4 @@ export function useHoverFollow(): RefCallback<HTMLElement> {
     return () => controller.abort();
   }, []);
 }
+

package/src/hooks/use-in-view.ts

@@ -28,3 +28,4 @@ export function useInView<T extends Element>(
   }, [ref, rootMargin, inView]);
   return inView;
 }
+