nextworks 0.0.1 → 0.1.0-alpha.0

package/dist/kits/blocks/components/enhanced-theme-provider.tsx

@@ -0,0 +1,195 @@
+export { EnhancedThemeProvider, useThemeVariant } from "@nextworks/blocks-core";
+
+// "use client";
+
+// import * as React from "react";
+// import { ThemeProvider as NextThemesProvider } from "next-themes";
+// import type { ThemeProviderProps as NextThemesProviderProps } from "next-themes";
+// import {
+//   ThemeVariant,
+//   themes,
+//   darkThemes,
+//   type ThemeConfig,
+// } from "@/lib/themes";
+
+// type ColorTokens = ThemeConfig["colors"];
+// const CUSTOM_STORAGE_KEY = "nxw-theme-custom";
+
+// interface EnhancedThemeProviderProps {
+//   children: React.ReactNode;
+//   attribute?: NextThemesProviderProps["attribute"];
+//   defaultTheme?: NextThemesProviderProps["defaultTheme"];
+//   enableSystem?: NextThemesProviderProps["enableSystem"];
+//   disableTransitionOnChange?: NextThemesProviderProps["disableTransitionOnChange"];
+//   defaultThemeVariant?: ThemeVariant;
+//   // Optional DX: provide default custom tokens declaratively (e.g. brand colors)
+//   defaultCustomTokens?: Partial<ColorTokens> | null;
+// }
+
+// interface ThemeContextType {
+//   themeVariant: ThemeVariant;
+//   setThemeVariant: (variant: ThemeVariant) => void;
+
+//   customTheme: Partial<ColorTokens> | null;
+//   setCustomTheme: (tokens: Partial<ColorTokens> | null) => void;
+//   setCustomBrandColors: (tokens: Partial<ColorTokens>) => void;
+
+//   applyTheme: (variant: ThemeVariant, isDark?: boolean) => void;
+// }
+
+// const ThemeContext = React.createContext<ThemeContextType | undefined>(
+//   undefined,
+// );
+
+// export function useThemeVariant() {
+//   const context = React.useContext(ThemeContext);
+//   if (context === undefined) {
+//     throw new Error(
+//       "useThemeVariant must be used within an EnhancedThemeProvider",
+//     );
+//   }
+//   return context;
+// }
+
+// export function EnhancedThemeProvider({
+//   children,
+//   attribute = "class",
+//   defaultTheme = "system",
+//   enableSystem = true,
+//   disableTransitionOnChange = false,
+//   defaultThemeVariant = "monochrome",
+//   defaultCustomTokens = null,
+// }: EnhancedThemeProviderProps) {
+//   const [themeVariant, setThemeVariant] =
+//     React.useState<ThemeVariant>(defaultThemeVariant);
+//   const [customTheme, setCustomThemeState] =
+//     React.useState<Partial<ColorTokens> | null>(defaultCustomTokens);
+
+//   const writeCustomCookies = React.useCallback(
+//     (tokens: Partial<ColorTokens> | null) => {
+//       if (tokens) {
+//         document.cookie = `theme-variant=custom; Path=/; Max-Age=31536000; SameSite=Lax`;
+//         document.cookie = `theme-custom=${encodeURIComponent(JSON.stringify(tokens))}; Path=/; Max-Age=31536000; SameSite=Lax`;
+//       } else {
+//         document.cookie = `theme-custom=; Path=/; Max-Age=0; SameSite=Lax`;
+//       }
+//     },
+//     [],
+//   );
+
+//   const setCustomTheme = React.useCallback(
+//     (tokens: Partial<ColorTokens> | null) => {
+//       setCustomThemeState(tokens);
+//       try {
+//         if (tokens) {
+//           localStorage.setItem(CUSTOM_STORAGE_KEY, JSON.stringify(tokens));
+//         } else {
+//           localStorage.removeItem(CUSTOM_STORAGE_KEY);
+//         }
+//       } catch {}
+//       writeCustomCookies(tokens ?? null);
+//     },
+//     [writeCustomCookies],
+//   );
+
+//   const setCustomBrandColors = React.useCallback(
+//     (tokens: Partial<ColorTokens>) => {
+//       setThemeVariant("custom");
+//       setCustomTheme(tokens);
+//     },
+//     [setCustomTheme],
+//   );
+
+//   const applyTheme = React.useCallback(
+//     (variant: ThemeVariant, isDark = false) => {
+//       const base = isDark ? darkThemes[variant].colors : themes[variant].colors;
+//       const merged =
+//         variant === "custom" && customTheme
+//           ? { ...base, ...customTheme }
+//           : base;
+
+//       // Apply CSS custom properties to the document root
+//       const root = document.documentElement;
+
+//       // Reflect the current variant for CSS selectors
+//       root.setAttribute("data-theme-variant", variant);
+
+//       Object.entries(merged).forEach(([key, value]) => {
+//         const cssVar = `--${key.replace(/([A-Z])/g, "-$1").toLowerCase()}`;
+//         root.style.setProperty(cssVar, value as string);
+//       });
+//     },
+//     [customTheme],
+//   );
+
+//   // Apply theme when variant or custom tokens change
+//   React.useEffect(() => {
+//     const isDark = document.documentElement.classList.contains("dark");
+//     applyTheme(themeVariant, isDark);
+//   }, [themeVariant, customTheme, applyTheme]);
+
+//   // Load custom tokens from localStorage on mount (overrides defaultCustomTokens if present)
+//   React.useEffect(() => {
+//     try {
+//       const raw = localStorage.getItem(CUSTOM_STORAGE_KEY);
+//       if (raw) {
+//         const parsed = JSON.parse(raw) as Partial<ColorTokens>;
+//         setCustomThemeState(parsed);
+//       }
+//     } catch {}
+//   }, []);
+
+//   // Listen for theme changes from next-themes
+
+//   React.useEffect(() => {
+//     const observer = new MutationObserver((mutations) => {
+//       mutations.forEach((mutation) => {
+//         if (
+//           mutation.type === "attributes" &&
+//           mutation.attributeName === "class"
+//         ) {
+//           const isDark = document.documentElement.classList.contains("dark");
+//           applyTheme(themeVariant, isDark);
+//         }
+//       });
+//     });
+
+//     observer.observe(document.documentElement, {
+//       attributes: true,
+//       attributeFilter: ["class"],
+//     });
+
+//     return () => observer.disconnect();
+//   }, [themeVariant, applyTheme]);
+
+//   const contextValue = React.useMemo(
+//     () => ({
+//       themeVariant,
+//       setThemeVariant,
+//       customTheme,
+//       setCustomTheme,
+//       setCustomBrandColors,
+//       applyTheme,
+//     }),
+//     [
+//       themeVariant,
+//       customTheme,
+//       setCustomTheme,
+//       setCustomBrandColors,
+//       applyTheme,
+//     ],
+//   );
+
+//   return (
+//     <NextThemesProvider
+//       attribute={attribute}
+//       defaultTheme={defaultTheme}
+//       enableSystem={enableSystem}
+//       disableTransitionOnChange={disableTransitionOnChange}
+//     >
+//       <ThemeContext.Provider value={contextValue}>
+//         {children}
+//       </ThemeContext.Provider>
+//     </NextThemesProvider>
+//   );
+// }

package/dist/kits/blocks/components/sections/About.tsx

@@ -0,0 +1,291 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * Data used to render a single statistic in the About section.
+ *
+ * @remarks
+ * Typical examples include counts like projects completed or years of
+ * experience. The suffix lets you append symbols such as "+", "%", or "/7".
+ *
+ * @public
+ */
+export interface AboutStatData {
+  /** The main numeric/text value (e.g., "50") */
+  value?: string;
+  /** Short label describing the stat (e.g., "Successful Projects") */
+  label?: string;
+  /** Optional suffix appended to the value (e.g., "+") */
+  suffix?: string;
+}
+
+/**
+ * Props for the About section component.
+ *
+ * @remarks
+ * - Styling: exposes slot-style className overrides (section, container,
+ *   inner, contentContainer, contentStack, subheading, heading, content,
+ *   statsSection, statsGrid, statItem, statNumber, statLabel). Consumer
+ *   classes are merged after defaults via cn().
+ * - Layout: text alignment can be set via aboutTextAlign.
+ * - Motion: animateStats enables a count-up animation for numeric stats on first viewport visibility.
+ * - Accessibility: rendered as a semantic <section> with aria-label.
+ */
+interface AboutProps {
+  /** Main heading text displayed in the section header. @defaultValue "Your Success Is Our Mission" */
+  aboutHeadingText?: string;
+  /** Optional subheading text displayed above the heading. */
+  aboutSubheadingText?: string;
+  /** Primary paragraph/content body. @defaultValue a short marketing blurb */
+  aboutContentText?: string;
+  /** Optional list of statistics to render below the content. @defaultValue defaultStatsData */
+  aboutStats?: AboutStatData[];
+
+  /** Optional top-level class to override the section root */
+  className?: string;
+
+  /** Slot-style overrides */
+  section?: { className?: string };
+  container?: { className?: string };
+  inner?: { className?: string };
+  contentContainer?: { className?: string };
+  contentStack?: { className?: string };
+  subheading?: { className?: string };
+  heading?: { className?: string };
+  content?: { className?: string };
+  statsSection?: { className?: string };
+  statsGrid?: { className?: string };
+  statItem?: { className?: string };
+  statNumber?: { className?: string };
+  statLabel?: { className?: string };
+
+  /** Controls text alignment at various breakpoints. @defaultValue "center" */
+  aboutTextAlign?: "left" | "center" | "right";
+  /** Whether to render the stats block at the bottom. @defaultValue true */
+  showStats?: boolean;
+  /** Enable count-up animation for numeric stats when they enter the viewport. @defaultValue false */
+  animateStats?: boolean;
+
+  /** ARIA label for the section. @defaultValue "About section" */
+  ariaLabel?: string;
+}
+
+/**
+ * Default statistics displayed if no aboutStats are provided.
+ */
+const defaultStatsData: AboutStatData[] = [
+  { value: "50", label: "Successful Projects", suffix: "+" },
+  { value: "5", label: "Years Experience", suffix: "+" },
+  { value: "100", label: "Happy Clients", suffix: "%" },
+  { value: "24", label: "Support Hours", suffix: "/7" },
+];
+
+/**
+ * About section with a heading, optional subheading/content, and an optional
+ * stats block.
+ *
+ * @remarks
+ * - Styling: exposes slot-style className overrides. Consumer classes are
+ *   merged after defaults via cn().
+ * - Layout: control text alignment with aboutTextAlign.
+ * - Accessibility: rendered as a semantic <section> with aria-label.
+ *
+ * @example
+ * <About
+ *   aboutHeadingText="Your Success Is Our Mission"
+ *   aboutContentText="We build digital products that convert."
+ *   aboutStats={[{ value: "50", label: "Successful Projects", suffix: "+" }]}
+ * />
+ */
+/**
+ * About section with a heading, optional subheading/content, and an optional
+ * stats block.
+ *
+ * @remarks
+ * - Styling: exposes slot-style className overrides. Consumer classes are
+ *   merged after defaults via cn().
+ * - Layout: control text alignment with aboutTextAlign.
+ * - Accessibility: rendered as a semantic <section> with aria-label.
+ *
+ * @example
+ * <About
+ *   aboutHeadingText="Your Success Is Our Mission"
+ *   aboutContentText="We build digital products that convert."
+ *   aboutStats={[{ value: "50", label: "Successful Projects", suffix: "+" }]}
+ * />
+ */
+/**
+ * Animated count-up for integers using requestAnimationFrame.
+ * Eases out and runs once when shouldStart becomes true.
+ */
+function AnimatedCount({
+  end,
+  shouldStart,
+  duration = 1500,
+}: {
+  end: number;
+  shouldStart: boolean;
+  duration?: number;
+}) {
+  const [value, setValue] = React.useState(0);
+  const [done, setDone] = React.useState(false);
+
+  const prefersReduced = React.useMemo(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  }, []);
+
+  React.useEffect(() => {
+    if (prefersReduced) return; // show end value immediately below
+    if (!shouldStart || done) return;
+    let raf: number;
+    const startTs = performance.now();
+
+    const tick = (now: number) => {
+      const progress = Math.min((now - startTs) / duration, 1);
+      const eased = 1 - Math.pow(1 - progress, 3);
+      const next = Math.round(eased * end);
+      setValue(next);
+      if (progress < 1) {
+        raf = requestAnimationFrame(tick);
+      } else {
+        setDone(true);
+      }
+    };
+
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [shouldStart, end, duration, done, prefersReduced]);
+
+  if (prefersReduced) return <>{end}</>;
+  return <>{value}</>;
+}
+
+export function About({
+  aboutHeadingText = "Your Success Is Our Mission",
+  aboutSubheadingText,
+  aboutContentText = "With 50+ successful projects and 5 years of experience, we specialize in creating digital solutions that drive real business growth.",
+  aboutStats = defaultStatsData,
+  className,
+  section = { className: "py-20 bg-muted text-foreground" },
+  container = { className: "max-w-7xl mx-auto px-6" },
+  inner = { className: "flex flex-col gap-12" },
+  contentContainer = { className: "max-w-4xl mx-auto" },
+  contentStack = { className: "flex flex-col gap-6" },
+  subheading = {
+    className:
+      "text-sm font-semibold font-poppins text-primary uppercase tracking-wider",
+  },
+  heading = {
+    className: "text-3xl font-bold font-poppins text-foreground leading-tight",
+  },
+  content = {
+    className:
+      "text-lg font-inter text-foreground leading-relaxed opacity-90 max-w-3xl",
+  },
+  statsSection = {
+    className:
+      "bg-card p-8 rounded-xl shadow-lg mx-auto max-w-5xl w-full border border-border",
+  },
+  statsGrid = {
+    className: "grid grid-cols-2 md:grid-cols-4 gap-8 justify-items-center",
+  },
+  statItem = { className: "flex flex-col items-center gap-2" },
+  statNumber = {
+    className: "text-4xl font-bold font-poppins text-foreground leading-none",
+  },
+  statLabel = {
+    className:
+      "text-sm font-medium font-inter text-foreground text-center opacity-80",
+  },
+  aboutTextAlign = "center",
+  showStats = true,
+  animateStats = false,
+  ariaLabel = "About section",
+}: AboutProps) {
+  const textAlignClasses = {
+    left: "text-left",
+    right: "text-right",
+    center: "text-center",
+  } as const;
+
+  const statsSectionRef = React.useRef<HTMLDivElement | null>(null);
+  const [shouldStartCount, setShouldStartCount] = React.useState(false);
+
+  React.useEffect(() => {
+    if (!animateStats) return;
+    if (!statsSectionRef.current) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            setShouldStartCount(true);
+            observer.disconnect();
+            break;
+          }
+        }
+      },
+      { threshold: 0.3 },
+    );
+
+    observer.observe(statsSectionRef.current);
+
+    return () => observer.disconnect();
+  }, [animateStats]);
+
+  return (
+    <section
+      className={cn(section.className, className)}
+      aria-label={ariaLabel}
+    >
+      <div className={cn(container.className)}>
+        <div className={cn(inner.className)}>
+          <div
+            className={cn(
+              contentContainer.className,
+              textAlignClasses[aboutTextAlign],
+            )}
+          >
+            <div className={cn(contentStack.className)}>
+              {aboutSubheadingText && (
+                <div className={cn(subheading.className)}>
+                  {aboutSubheadingText}
+                </div>
+              )}
+              <h2 className={cn(heading.className)}>{aboutHeadingText}</h2>
+              <p className={cn(content.className)}>{aboutContentText}</p>
+            </div>
+          </div>
+          {showStats && aboutStats?.length ? (
+            <div ref={statsSectionRef} className={cn(statsSection.className)}>
+              <div className={cn(statsGrid.className)}>
+                {aboutStats.map((s, i) => (
+                  <div
+                    key={`${s.label ?? "stat"}-${i}`}
+                    className={cn(statItem.className)}
+                  >
+                    <div className={cn(statNumber.className)}>
+                      {animateStats && Number.isFinite(Number(s.value)) ? (
+                        <AnimatedCount
+                          end={Number(s.value)}
+                          shouldStart={shouldStartCount}
+                        />
+                      ) : (
+                        s.value
+                      )}
+                      {s.suffix}
+                    </div>
+                    <div className={cn(statLabel.className)}>{s.label}</div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </section>
+  );
+}