nextworks 0.2.0-alpha.2 → 0.2.0-alpha.21

package/dist/kits/blocks/components/ui/card.tsx

@@ -1,95 +1,95 @@
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-function Card({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card"
-      className={cn(
-        // Structural + token fallbacks
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
-        // CSS variable hooks for preset-first overrides
-        "border-[var(--card-border)] bg-[var(--card-bg)] text-[var(--card-fg)] shadow-[var(--card-shadow)]",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-header"
-      className={cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-title"
-      className={cn("leading-none font-semibold", className)}
-      {...props}
-    />
-  );
-}
-
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  );
-}
-
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-action"
-      className={cn(
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-content"
-      className={cn("px-6", className)}
-      {...props}
-    />
-  );
-}
-
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-footer"
-      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
-      {...props}
-    />
-  );
-}
-
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardAction,
-  CardDescription,
-  CardContent,
-};
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        // Structural + token fallbacks
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        // CSS variable hooks for preset-first overrides
+        "border-[var(--card-border)] bg-[var(--card-bg)] text-[var(--card-fg)] shadow-[var(--card-shadow)]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  );
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+};

package/dist/kits/blocks/components/ui/checkbox.tsx

@@ -1,30 +1,30 @@
-import * as React from "react";
-import { cn } from "@/lib/utils";
-
-export type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement>;
-
-const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
-  ({ className, ...props }, ref) => {
-    // Use the native accent-color where supported for consistent checkbox fill
-    const style: React.CSSProperties = { accentColor: "var(--primary)" }; // fallback; modern browsers will use this accent color
-
-    return (
-      <input
-        type="checkbox"
-        ref={ref}
-        style={style}
-        className={cn(
-          // Keep layout small but add smooth transitions and focus ring
-          "h-4 w-4 rounded border-[var(--input-border)] bg-[var(--input-bg)] text-[var(--input-fg)] transition-colors duration-200 ease-in-out",
-          "focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 focus-visible:outline-none",
-          "disabled:cursor-not-allowed disabled:opacity-50",
-          className,
-        )}
-        {...props}
-      />
-    );
-  },
-);
-Checkbox.displayName = "Checkbox";
-
-export { Checkbox };
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement>;
+
+const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  ({ className, ...props }, ref) => {
+    // Use the native accent-color where supported for consistent checkbox fill
+    const style: React.CSSProperties = { accentColor: "var(--primary)" }; // fallback; modern browsers will use this accent color
+
+    return (
+      <input
+        type="checkbox"
+        ref={ref}
+        style={style}
+        className={cn(
+          // Keep layout small but add smooth transitions and focus ring
+          "h-4 w-4 rounded border-[var(--input-border)] bg-[var(--input-bg)] text-[var(--input-fg)] transition-colors duration-200 ease-in-out",
+          "focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 focus-visible:outline-none",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+Checkbox.displayName = "Checkbox";
+
+export { Checkbox };

package/dist/kits/blocks/components/ui/cta-button.tsx

@@ -1,125 +1,125 @@
-"use client";
-
-import React from "react";
-import Link from "next/link";
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
-
-export interface CTAButtonProps {
-  /** Optional id on the root anchor/button */
-  id?: string;
-  /** Additional className merged with the button slot */
-  className?: string;
-
-  /** onClick handler for the CTA button (anchor element) */
-  onClick?: React.MouseEventHandler<HTMLAnchorElement>;
-  /** Label text for the CTA button */
-  ctaButtonLabel?: string;
-  /** URL or anchor target for the CTA button */
-  ctaButtonHref?: string;
-
-  /** Deprecated style shorthands (kept for backward-compat). Prefer button.className */
-  ctaButtonTextColor?: string;
-  ctaButtonBgColor?: string;
-  ctaButtonBorderColor?: string;
-  ctaButtonDarkMode?: {
-    color?: string;
-    bg?: string;
-    borderColor?: string;
-  };
-  ctaButtonHoverStyle?: {
-    color?: string;
-    bg?: string;
-    borderColor?: string;
-    transform?: string;
-    boxShadow?: string;
-  };
-
-  /** Slot for shadcn Button styling */
-  button?: {
-    variant?:
-      | "default"
-      | "destructive"
-      | "outline"
-      | "secondary"
-      | "ghost"
-      | "link";
-    size?: "default" | "sm" | "lg" | "icon";
-    className?: string;
-    /** Forward-through escape hatch matching Button */
-    unstyled?: boolean;
-    style?: React.CSSProperties;
-  };
-}
-
-export function CTAButton({
-  id,
-  className,
-  onClick,
-  ctaButtonLabel = "Get Started",
-  ctaButtonHref = "#contact",
-  ctaButtonTextColor,
-  ctaButtonBgColor,
-  ctaButtonBorderColor,
-  ctaButtonDarkMode,
-  ctaButtonHoverStyle,
-  button = {
-    variant: "default",
-    size: "lg",
-    className:
-      "bg-primary text-primary-foreground hover:bg-primary/90 font-medium shadow-md hover:shadow-lg transition-all duration-200 hover:-translate-y-0.5",
-  },
-}: CTAButtonProps) {
-  if (!ctaButtonLabel) return null;
-
-  // Build dynamic classes from deprecated style props (kept for compatibility)
-  const dynamic: string[] = [];
-  if (ctaButtonTextColor) dynamic.push(`text-${ctaButtonTextColor}`);
-  if (ctaButtonBgColor) dynamic.push(`bg-${ctaButtonBgColor}`);
-  if (ctaButtonBorderColor) dynamic.push(`border-${ctaButtonBorderColor}`);
-
-  if (ctaButtonHoverStyle) {
-    const { color, bg, borderColor, transform, boxShadow } =
-      ctaButtonHoverStyle;
-    if (color) dynamic.push(`hover:text-${color}`);
-    if (bg) dynamic.push(`hover:bg-${bg}`);
-    if (borderColor) dynamic.push(`hover:border-${borderColor}`);
-    if (transform) dynamic.push(`hover:${transform}`);
-    if (boxShadow) dynamic.push(`hover:${boxShadow}`);
-  }
-
-  if (ctaButtonDarkMode) {
-    const { color, bg, borderColor } = ctaButtonDarkMode;
-    if (color) dynamic.push(`dark:text-${color}`);
-    if (bg) dynamic.push(`dark:bg-${bg}`);
-    if (borderColor) dynamic.push(`dark:border-${borderColor}`);
-  }
-
-  const finalClassName = cn(
-    // Allow var hooks to flow through to Button
-    "border-[var(--btn-border)] focus-visible:ring-[var(--btn-ring)]",
-    button.className,
-    className,
-    dynamic.join(" "),
-  );
-
-  return (
-    <Button
-      asChild
-      variant={button.variant}
-      size={button.size}
-      className={finalClassName}
-      {...(button.unstyled ? { unstyled: true } : {})}
-      style={button.style}
-    >
-      <Link
-        id={id}
-        href={ctaButtonHref || "#"}
-        onClick={onClick}
-        aria-label={ctaButtonLabel}
-      >
-        {ctaButtonLabel}
-      </Link>
-    </Button>
-  );
-}
+"use client";
+
+import React from "react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+export interface CTAButtonProps {
+  /** Optional id on the root anchor/button */
+  id?: string;
+  /** Additional className merged with the button slot */
+  className?: string;
+
+  /** onClick handler for the CTA button (anchor element) */
+  onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+  /** Label text for the CTA button */
+  ctaButtonLabel?: string;
+  /** URL or anchor target for the CTA button */
+  ctaButtonHref?: string;
+
+  /** Deprecated style shorthands (kept for backward-compat). Prefer button.className */
+  ctaButtonTextColor?: string;
+  ctaButtonBgColor?: string;
+  ctaButtonBorderColor?: string;
+  ctaButtonDarkMode?: {
+    color?: string;
+    bg?: string;
+    borderColor?: string;
+  };
+  ctaButtonHoverStyle?: {
+    color?: string;
+    bg?: string;
+    borderColor?: string;
+    transform?: string;
+    boxShadow?: string;
+  };
+
+  /** Slot for shadcn Button styling */
+  button?: {
+    variant?:
+      | "default"
+      | "destructive"
+      | "outline"
+      | "secondary"
+      | "ghost"
+      | "link";
+    size?: "default" | "sm" | "lg" | "icon";
+    className?: string;
+    /** Forward-through escape hatch matching Button */
+    unstyled?: boolean;
+    style?: React.CSSProperties;
+  };
+}
+
+export function CTAButton({
+  id,
+  className,
+  onClick,
+  ctaButtonLabel = "Get Started",
+  ctaButtonHref = "#contact",
+  ctaButtonTextColor,
+  ctaButtonBgColor,
+  ctaButtonBorderColor,
+  ctaButtonDarkMode,
+  ctaButtonHoverStyle,
+  button = {
+    variant: "default",
+    size: "lg",
+    className:
+      "bg-primary text-primary-foreground hover:bg-primary/90 font-medium shadow-md hover:shadow-lg transition-all duration-200 hover:-translate-y-0.5",
+  },
+}: CTAButtonProps) {
+  if (!ctaButtonLabel) return null;
+
+  // Build dynamic classes from deprecated style props (kept for compatibility)
+  const dynamic: string[] = [];
+  if (ctaButtonTextColor) dynamic.push(`text-${ctaButtonTextColor}`);
+  if (ctaButtonBgColor) dynamic.push(`bg-${ctaButtonBgColor}`);
+  if (ctaButtonBorderColor) dynamic.push(`border-${ctaButtonBorderColor}`);
+
+  if (ctaButtonHoverStyle) {
+    const { color, bg, borderColor, transform, boxShadow } =
+      ctaButtonHoverStyle;
+    if (color) dynamic.push(`hover:text-${color}`);
+    if (bg) dynamic.push(`hover:bg-${bg}`);
+    if (borderColor) dynamic.push(`hover:border-${borderColor}`);
+    if (transform) dynamic.push(`hover:${transform}`);
+    if (boxShadow) dynamic.push(`hover:${boxShadow}`);
+  }
+
+  if (ctaButtonDarkMode) {
+    const { color, bg, borderColor } = ctaButtonDarkMode;
+    if (color) dynamic.push(`dark:text-${color}`);
+    if (bg) dynamic.push(`dark:bg-${bg}`);
+    if (borderColor) dynamic.push(`dark:border-${borderColor}`);
+  }
+
+  const finalClassName = cn(
+    // Allow var hooks to flow through to Button
+    "border-[var(--btn-border)] focus-visible:ring-[var(--btn-ring)]",
+    button.className,
+    className,
+    dynamic.join(" "),
+  );
+
+  return (
+    <Button
+      asChild
+      variant={button.variant}
+      size={button.size}
+      className={finalClassName}
+      {...(button.unstyled ? { unstyled: true } : {})}
+      style={button.style}
+    >
+      <Link
+        id={id}
+        href={ctaButtonHref || "#"}
+        onClick={onClick}
+        aria-label={ctaButtonLabel}
+      >
+        {ctaButtonLabel}
+      </Link>
+    </Button>
+  );
+}