@goldlabelapps/theme 3.2.8 → 3.6.0

package/dist/design-system/components/images/FeaturedImage/FeaturedImage.js

@@ -3,8 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ErrorOutlineRoundedIcon from '@mui/icons-material/ErrorOutlineRounded';
 import { Box } from '@mui/material';
 import { alpha, useTheme as useMuiTheme } from '@mui/material/styles';
-import { useState } from 'react';
-import { useTheme as useThemeContext } from '../../../../context/ThemeContext';
+import { useContext, useState } from 'react';
+import { ThemeContext } from '../../../../context/ThemeContext';
 import defaultOgManifest from '../../../../data/og-images.json';
 function findOgImageItem(manifest, slug) {
     if (!slug || !manifest?.items)
@@ -24,9 +24,9 @@ function findOgImageItem(manifest, slug) {
     return undefined;
 }
 export default function FeaturedImage({ image, slug = 'nx', alt, width = '100%', height, objectFit: propObjectFit, manifest = defaultOgManifest, borderRadius: propBorderRadius, flushTop = false, }) {
-    const contextTheme = useThemeContext()?.theme;
+    const themeContext = useContext(ThemeContext);
     const muiTheme = useMuiTheme();
-    const activeTheme = contextTheme === 'dark' || muiTheme?.palette?.mode === 'dark' ? 'dark' : 'light';
+    const activeTheme = themeContext ? themeContext.theme : (muiTheme?.palette?.mode ?? 'dark');
     let resolvedSrc = image?.src;
     let resolvedAlt = typeof alt === 'string' ? alt : (typeof image?.alt === 'string' ? image.alt : null);
     let resolvedImageWidth = image?.width;
@@ -44,7 +44,7 @@ export default function FeaturedImage({ image, slug = 'nx', alt, width = '100%',
             if (version) {
                 resolvedSrc = version.path;
                 if (resolvedAlt == null) {
-                    resolvedAlt = ogItem.name;
+                    resolvedAlt = ogItem.name ?? null;
                 }
                 if (resolvedImageWidth == null && version.dimensions?.width) {
                     resolvedImageWidth = version.dimensions.width;
@@ -78,7 +78,7 @@ export default function FeaturedImage({ image, slug = 'nx', alt, width = '100%',
             ...(resolvedPaddingTop ? { paddingTop: resolvedPaddingTop } : {}),
             overflow: 'hidden',
             borderRadius: propBorderRadius ?? defaultRadius,
-            bgcolor: 'grey.100',
+            bgcolor: 'transparent',
             position: 'relative',
         }, children: [status === 'error' ? (_jsxs(Box, { "data-testid": "featured-image-error", sx: {
                     position: 'absolute',

package/dist/design-system/components/layout/index.d.ts

@@ -3,5 +3,6 @@ export { default as PageSection } from './PageSection/PageSection';
 export { default as SectionTitle } from './SectionTitle/SectionTitle';
 export { default as SiteFooter } from './Footer/Footer';
 export { default as Header } from './Header/Header';
+export { LayoutActions } from '../../../components/navigation/LayoutActions';
 export { default as MenuDrawer } from './MenuDrawer/MenuDrawer';
 export { default as SiteMain } from './Main/Main';

package/dist/design-system/components/layout/index.js

@@ -3,5 +3,6 @@ export { default as PageSection } from './PageSection/PageSection';
 export { default as SectionTitle } from './SectionTitle/SectionTitle';
 export { default as SiteFooter } from './Footer/Footer';
 export { default as Header } from './Header/Header';
+export { LayoutActions } from '../../../components/navigation/LayoutActions';
 export { default as MenuDrawer } from './MenuDrawer/MenuDrawer';
 export { default as SiteMain } from './Main/Main';

package/dist/design-system/components/navigation/SiteNav/SiteNav.js

@@ -78,5 +78,5 @@ export default function SiteNav({ items, navigateTo }) {
         const pathname = window.location.pathname;
         setCurrentPath(pathname.endsWith('/') && pathname !== '/' ? pathname.slice(0, -1) : pathname);
     }, []);
-    return renderNavItems(items, navigateTo, 0, 'nav', currentPath);
+    return renderNavItems(items ?? [], navigateTo, 0, 'nav', currentPath);
 }

package/dist/design-system/components/nxStyle.d.ts

@@ -40,13 +40,6 @@ export declare const nxLightStyle: {
         color: string;
         transition: string;
     };
-    a: {
-        color: string;
-        textDecoration: string;
-        '&:hover': {
-            color: string;
-        };
-    };
     code: {
         backgroundColor: string;
         color: string;
@@ -103,13 +96,6 @@ export declare const nxDarkStyle: {
         color: string;
         transition: string;
     };
-    a: {
-        color: string;
-        textDecoration: string;
-        '&:hover': {
-            color: string;
-        };
-    };
     code: {
         backgroundColor: string;
         color: string;
@@ -166,13 +152,6 @@ export declare function getNxStyle(mode: 'light' | 'dark'): {
         color: string;
         transition: string;
     };
-    a: {
-        color: string;
-        textDecoration: string;
-        '&:hover': {
-            color: string;
-        };
-    };
     code: {
         backgroundColor: string;
         color: string;

package/dist/design-system/components/nxStyle.js

@@ -40,13 +40,6 @@ export const nxLightStyle = {
         color: '#1E1E1E',
         transition: 'background-color 0.2s ease',
     },
-    a: {
-        color: '#012867',
-        textDecoration: 'none',
-        '&:hover': {
-            color: '#011f52',
-        },
-    },
     code: {
         backgroundColor: '#F1F5F9',
         color: '#0F172A',
@@ -103,13 +96,6 @@ export const nxDarkStyle = {
         color: '#F8FAFC',
         transition: 'background-color 0.2s ease',
     },
-    a: {
-        color: '#F8FAFC',
-        textDecoration: 'none',
-        '&:hover': {
-            color: '#E2E8F0',
-        },
-    },
     code: {
         backgroundColor: '#1E293B',
         color: '#F8FAFC',

package/dist/design-system/types.d.ts

@@ -0,0 +1 @@
+export * from '../types';

package/dist/design-system/types.js

@@ -0,0 +1 @@
+export * from '../types';

package/dist/index.d.ts

@@ -2,6 +2,9 @@ export * from "./types";
 export * from "./lib/utils";
 export * from "./context";
 export * from "./components";
+export type { ButtonProps } from "./components/ui/Button";
+export type { CardProps } from "./components/ui/Card";
+export type { BashProps, BashCommand } from "./components/ui/Bash";
 export { default as DesignSystemProvider } from "./design-system/components/DesignSystemProvider/DesignSystemProvider";
 export { default as Heading } from "./design-system/components/headings/Heading/Heading";
 export { default as Logo } from "./design-system/components/brand/Logo/Logo";
@@ -12,8 +15,6 @@ export { default as ListItemText } from "./design-system/components/lists/ListIt
 export { default as ListSubheader } from "./design-system/components/lists/ListSubheader/ListSubheader";
 export { default as Alert } from "./design-system/components/feedback/Alert/Alert";
 export { default as Field } from "./design-system/components/feedback/Field/Field";
-export type { AlertProps } from "./design-system/components/feedback/Alert/types";
-export type { FieldProps } from "./design-system/components/feedback/Field/types";
 export { default as NxButton } from "./design-system/components/buttons/Button/Button";
 export { Button } from "./components/ui/Button";
 export { default as IconButton } from "./design-system/components/buttons/IconButton/IconButton";
@@ -25,6 +26,6 @@ export { default as Swatch } from "./design-system/components/surfaces/Swatch/Sw
 export { default as SwatchGroup } from "./design-system/components/surfaces/SwatchGroup/SwatchGroup";
 export { default as Icon, ICON_NAMES } from "./design-system/components/icons/Icon/Icon";
 export { DesktopOnly, MobileOnly, useIsMobile } from "./design-system/components/responsive/Viewport/Viewport";
+export { Waiting, type WaitingProps } from "./components/navigation/Waiting";
 export { createAppTheme } from "./styles/theme";
 export type { IconName, IconProps } from "./design-system/components/icons/Icon/Icon";
-export type { DesignSystemMode, DesignSystemProviderProps, DesignSystemThemeConfig } from "./design-system/types";

package/dist/index.js

@@ -23,4 +23,5 @@ export { default as Swatch } from "./design-system/components/surfaces/Swatch/Sw
 export { default as SwatchGroup } from "./design-system/components/surfaces/SwatchGroup/SwatchGroup";
 export { default as Icon, ICON_NAMES } from "./design-system/components/icons/Icon/Icon";
 export { DesktopOnly, MobileOnly, useIsMobile } from "./design-system/components/responsive/Viewport/Viewport";
+export { Waiting } from "./components/navigation/Waiting";
 export { createAppTheme } from "./styles/theme";

package/dist/styles/globals.css

@@ -24,8 +24,8 @@
     --background: #0F172A;
     --background-secondary: #1E293B;
     --paper: #1E293B;
-    --primary: #F8FAFC;
-    --primary-hover: #E2E8F0;
+    --primary: #ffffff;
+    --primary-hover: #38BDF8;
     --secondary: #F8FAFC;
     --foreground: #F8FAFC;
     --foreground-muted: #CBD5E1;
@@ -85,19 +85,17 @@
     color: var(--foreground);
   }
 
-  * {
-    border-color: rgba(15, 23, 42, 0.12);
+  h1, h2, h3, h4, h5, h6,
+  :where(.dark, .dark *) h1,
+  :where(.dark, .dark *) h2,
+  :where(.dark, .dark *) h3,
+  :where(.dark, .dark *) h4,
+  :where(.dark, .dark *) h5,
+  :where(.dark, .dark *) h6 {
+    font-weight: 400 !important;
   }
 
-  a {
-    color: var(--primary);
-    text-decoration: none;
-    transition: color 0.15s ease;
-  }
 
-  a:hover {
-    color: var(--primary-hover);
-  }
 
   html {
     scroll-behavior: smooth;

package/dist/styles/theme.js

@@ -1,9 +1,9 @@
 import { createTheme } from '@mui/material/styles';
-export function createAppTheme(mode = 'light', themeConfig) {
+export function createAppTheme(mode = 'dark', themeConfig) {
     const isDark = mode === 'dark';
     const resolvedPrimary = themeConfig?.primary ?? (isDark ? '#FFFFFF' : '#5A5A5A');
     const resolvedSecondary = themeConfig?.secondary ?? (isDark ? '#F5F5F5' : '#7A7A7A');
-    const palette = {
+    const paletteMap = {
         dark: {
             primary: resolvedPrimary,
             secondary: resolvedSecondary,
@@ -76,7 +76,8 @@ export function createAppTheme(mode = 'light', themeConfig) {
                 contrastText: '#FFFFFF',
             },
         },
-    }[mode];
+    };
+    const palette = paletteMap[mode && mode in paletteMap ? mode : 'light'];
     const resolvedPalette = {
         ...palette,
         background: themeConfig?.background ?? palette.background,
@@ -134,6 +135,32 @@ export function createAppTheme(mode = 'light', themeConfig) {
                 fontSize: '1.5rem',
                 color: resolvedPalette.secondary,
             },
+            h4: {
+                fontFamily: 'var(--font-title)',
+                fontWeight: 400,
+                fontSize: '1.25rem',
+                color: resolvedPalette.secondary,
+            },
+            h5: {
+                fontFamily: 'var(--font-title)',
+                fontWeight: 400,
+                fontSize: '1.1rem',
+                color: resolvedPalette.secondary,
+            },
+            h6: {
+                fontFamily: 'var(--font-title)',
+                fontWeight: 400,
+                fontSize: '1rem',
+                color: resolvedPalette.secondary,
+            },
+            subtitle1: {
+                fontFamily: 'var(--font-title)',
+                fontWeight: 400,
+            },
+            subtitle2: {
+                fontFamily: 'var(--font-title)',
+                fontWeight: 400,
+            },
             button: {
                 textTransform: 'none',
                 fontWeight: 400,

package/dist/types/index.d.ts

@@ -1,3 +1,4 @@
+import type { TextFieldProps } from '@mui/material';
 export interface SiteMetadata {
     title: string;
     description: string;
@@ -317,3 +318,222 @@ export interface GuideArticle extends GuideMeta {
     content: string;
     rawMarkdown: string;
 }
+export type DesignSystemMode = 'light' | 'dark';
+export interface DesignSystemThemeConfig {
+    primary?: string;
+    secondary?: string;
+    background?: string;
+    paper?: string;
+    text?: string;
+    textSecondary?: string;
+}
+export interface DesignSystemProviderProps {
+    children: React.ReactNode;
+    mode?: DesignSystemMode;
+    themeConfig?: DesignSystemThemeConfig;
+}
+export type ButtonSize = 'sm' | 'md' | 'lg';
+export type ButtonTone = 'primary' | 'neutral' | 'danger';
+export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'text';
+export interface NxButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {
+    variant?: ButtonVariant;
+    tone?: ButtonTone;
+    size?: ButtonSize;
+    fullWidth?: boolean;
+    href?: string;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    ariaLabel?: string;
+    sx?: unknown;
+}
+export type ButtonProps = NxButtonProps;
+export interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {
+    icon?: React.ReactNode;
+    variant?: ButtonVariant;
+    tone?: ButtonTone;
+    size?: ButtonSize;
+    href?: string;
+    ariaLabel?: string;
+    color?: string;
+    sx?: unknown;
+}
+export interface AlertProps {
+    children?: React.ReactNode;
+    title?: string;
+    severity?: 'info' | 'success' | 'warning' | 'error';
+    dismissible?: boolean;
+}
+export interface NxCardProps {
+    children?: React.ReactNode;
+    padding?: 'sm' | 'md' | 'lg';
+    variant?: 'paper' | 'glass' | 'tile' | 'ink';
+    hoverLift?: boolean;
+    mode?: DesignSystemMode;
+}
+export type CardProps = NxCardProps;
+export interface FieldProps extends Omit<TextFieldProps, 'label' | 'error' | 'helperText'> {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    hint?: string;
+}
+export type HeadingTone = 'clay' | 'ink' | 'primary' | 'secondary';
+export type HeadingVariant = 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    tone?: HeadingTone;
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';
+    variant?: HeadingVariant;
+    style?: React.CSSProperties;
+    sx?: unknown;
+}
+export interface FeaturedImageData {
+    src?: string;
+    alt?: string;
+    width?: number | string;
+    height?: number | string;
+    objectFit?: 'cover' | 'contain' | 'fill';
+}
+export interface OgImageVersion {
+    path: string;
+    dimensions?: {
+        width: number;
+        height: number;
+    };
+}
+export interface OgImageItem {
+    id?: string;
+    category?: string;
+    name?: string;
+    versions?: {
+        light?: OgImageVersion;
+        dark?: OgImageVersion;
+        [key: string]: OgImageVersion | undefined;
+    };
+}
+export interface OgImagesManifest {
+    items: OgImageItem[];
+}
+export interface FeaturedImageProps {
+    image?: FeaturedImageData;
+    slug?: string;
+    alt?: string;
+    width?: number | string;
+    height?: number | string;
+    objectFit?: 'cover' | 'contain' | 'fill';
+    manifest?: OgImagesManifest;
+    borderRadius?: string | number;
+    flushTop?: boolean;
+}
+export interface AppShellProps {
+    children: React.ReactNode;
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+}
+export interface SiteFooterLink {
+    title: string;
+    href: string;
+}
+export interface SiteFooterColumn {
+    title: string;
+    href: string;
+    children?: SiteFooterLink[];
+}
+export interface SiteFooterProps {
+    columns?: SiteFooterColumn[];
+}
+export interface SiteHeaderProps {
+    title?: string;
+    icon?: string;
+    iconSize?: number;
+    homeHref?: string;
+    logoSrc?: string;
+    logoAlt?: string;
+    logo?: React.ReactNode;
+    nav?: React.ReactNode;
+    actions?: React.ReactNode;
+    children?: React.ReactNode;
+}
+export interface SiteMainProps {
+    children?: React.ReactNode;
+    className?: string;
+    featuredImage?: string;
+}
+export interface MenuDrawerProps {
+    open: boolean;
+    onClose: () => void;
+    children?: React.ReactNode;
+    navItems?: React.ReactNode;
+    actions?: React.ReactNode;
+    toggleAriaLabel?: string;
+}
+export interface PageSectionProps {
+    children?: React.ReactNode;
+    id?: string;
+    className?: string;
+    title?: string;
+    subtitle?: string;
+}
+export interface SectionTitleProps {
+    title: string;
+    subtitle?: string;
+    align?: 'left' | 'center' | 'right';
+}
+export interface BreadcrumbItem {
+    label: string;
+    href?: string;
+}
+export interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+}
+export type ShareSize = 'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large';
+export interface ShareProps {
+    url?: string;
+    title?: string;
+    description?: string;
+    size?: ShareSize;
+}
+export interface T_NavNode {
+    slug?: string;
+    path?: string;
+    title?: string;
+    label?: string;
+    href?: string;
+    children?: T_NavNode[];
+    items?: T_NavNode[];
+    [key: string]: unknown;
+}
+export interface SiteNavProps {
+    nodes?: T_NavNode[];
+    items?: T_NavNode[];
+    navigateTo?: (path: string) => void;
+}
+export interface UseIsMobileOptions {
+    breakpoint?: number;
+    maxWidth?: number | string;
+}
+export interface VisibilityProps {
+    children: React.ReactNode;
+    isMobile?: boolean;
+    maxWidth?: number | string;
+    fallback?: React.ReactNode;
+}
+export interface SwatchProps {
+    label: string;
+    value: string;
+}
+export interface SwatchGroupProps {
+    items: SwatchProps[];
+}
+export interface LogoProps {
+    href?: string;
+    name?: string;
+    text?: string;
+    subtitle?: string;
+    src?: string;
+    icon?: string;
+    favicon?: boolean;
+    faceColor?: string;
+    smileColor?: string;
+    iconSize?: number;
+    children?: React.ReactNode;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goldlabelapps/theme",
-  "version": "3.2.8",
+  "version": "3.6.0",
   "description": "NX° theme tokens, UI primitives, and layout showcase blocks",
   "publishConfig": {
     "access": "public"
@@ -42,7 +42,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "pnpm --dir ../flash build && tsc -p tsconfig.build.json && mkdir -p dist/styles && cp src/styles/*.css dist/styles/",
+    "build": "tsc -p tsconfig.build.json && mkdir -p dist/styles && cp src/styles/*.css dist/styles/",
     "type-check": "tsc --noEmit",
     "test": "vitest run",
     "lint": "eslint .",
@@ -57,6 +57,7 @@
   },
   "dependencies": {
     "@goldlabelapps/flash": "workspace:*",
+    "@goldlabelapps/uberedux": "workspace:*",
     "canvas-confetti": "^1.9.4",
     "clsx": "^2.1.1",
     "framer-motion": "^13.1.1",

package/dist/components/guide/GuideLayout.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-import type { GuideMeta } from "../../types";
-export interface GuideLayoutProps {
-    guides: GuideMeta[];
-    currentGuide?: GuideMeta;
-    children: React.ReactNode;
-}
-export declare function GuideLayout({ guides, currentGuide, children, }: GuideLayoutProps): React.JSX.Element;

package/dist/components/guide/GuideLayout.js

@@ -1,12 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Link from "next/link";
-import { BookOpen } from "lucide-react";
-export function GuideLayout({ guides, currentGuide, children, }) {
-    return (_jsx("div", { className: "min-h-screen pt-28 pb-20 bg-white", children: _jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-12 gap-8", children: [_jsx("aside", { className: "lg:col-span-3 space-y-4", children: _jsxs("div", { className: "p-4 rounded-2xl bg-slate-50 border border-slate-200", children: [_jsxs("div", { className: "flex items-center gap-2 mb-4 text-[#012867] font-bold text-sm", children: [_jsx(BookOpen, { className: "h-4 w-4" }), _jsx("span", { children: "How To Guides" })] }), _jsx("ul", { className: "space-y-1", children: guides.map((g) => {
-                                        const isActive = currentGuide?.slug === g.slug;
-                                        return (_jsx("li", { children: _jsx(Link, { href: `/how-to${g.slug === "/" ? "" : g.slug}`, className: `block px-3 py-2 rounded-xl text-xs font-semibold transition-colors ${isActive
-                                                    ? "bg-[#012867] text-white"
-                                                    : "text-slate-700 hover:bg-slate-200/70"}`, children: g.title }) }, g.slug));
-                                    }) })] }) }), _jsx("main", { className: "lg:col-span-9", children: children })] }) }) }));
-}