nextworks 0.0.1 → 0.1.0-alpha.0

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

@@ -0,0 +1,120 @@
+"use client";
+
+import React from "react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+import { Check } from "lucide-react";
+
+export interface PricingCardProps {
+  /** Optional id and root className */
+  id?: string;
+  className?: string;
+
+  /** Header text/title of the pricing plan */
+  pricingCardTitle?: string;
+  /** Price text for the pricing plan */
+  pricingCardPrice?: string;
+  /** Array of features included in the pricing plan */
+  pricingCardFeatures?: string[];
+  /** Label text for the pricing call-to-action button */
+  pricingCardCTALabel?: string;
+  /** URL/href for the pricing call-to-action button */
+  pricingCardCTAHref?: string;
+  /** Whether this is the featured/popular plan */
+  isPopular?: boolean;
+
+  /** Styling configuration objects */
+  card?: { className?: string };
+  header?: { className?: string };
+  title?: { className?: string };
+  price?: { className?: string };
+  features?: { className?: string };
+  featureItem?: { className?: string };
+  cta?: {
+    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;
+  };
+  popularBadge?: { className?: string };
+}
+
+export function PricingCard({
+  id,
+  className,
+  pricingCardTitle = "Basic Plan",
+  pricingCardPrice = "$9.99",
+  pricingCardFeatures = ["Feature 1", "Feature 2", "Feature 3"],
+  pricingCardCTALabel = "Select Plan",
+  pricingCardCTAHref = "#contact",
+  isPopular = false,
+  card = {
+    className:
+      "relative bg-card text-card-foreground border border-border rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200",
+  },
+  header = { className: "p-6 text-center border-b border-border" },
+  title = { className: "text-xl font-bold text-foreground mb-2" },
+  price = { className: "text-3xl font-bold text-foreground mb-4" },
+  features = { className: "p-6 space-y-3" },
+  featureItem = {
+    className: "flex items-center text-muted-foreground text-sm",
+  },
+  cta = {
+    variant: "default",
+    size: "lg",
+    className:
+      "w-full 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",
+  },
+  popularBadge = {
+    className:
+      "absolute -top-3 left-1/2 transform -translate-x-1/2 bg-primary text-primary-foreground px-4 py-1 rounded-full text-sm font-medium",
+  },
+}: PricingCardProps) {
+  return (
+    <Card id={id} className={cn(card.className, className, "rounded-lg")}>
+      {isPopular && <div className={popularBadge.className}>Most Popular</div>}
+
+      <div className={header.className}>
+        <h3 className={title.className}>{pricingCardTitle}</h3>
+        <div className={price.className}>{pricingCardPrice}</div>
+      </div>
+
+      <div className={features.className}>
+        {pricingCardFeatures?.map((feature, index) => (
+          <div key={index} className={featureItem.className}>
+            <Check className="mr-3 h-4 w-4 flex-shrink-0 text-green-500" />
+            <span>{feature}</span>
+          </div>
+        ))}
+      </div>
+
+      <div className="p-6 pt-0">
+        <Button
+          asChild
+          variant={cta.variant}
+          size={cta.size}
+          className={cn(
+            // Allow presets to take over with var hooks from Button
+            "border-[var(--btn-border)] focus-visible:ring-[var(--btn-ring)]",
+            cta.className,
+            "hover:animate-none motion-safe:animate-none",
+          )}
+          {...(cta.unstyled ? { unstyled: true } : {})}
+          style={cta.style}
+        >
+          <Link href={pricingCardCTAHref || "#"}>{pricingCardCTALabel}</Link>
+        </Button>
+      </div>
+    </Card>
+  );
+}

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

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export type SelectProps = React.SelectHTMLAttributes<HTMLSelectElement>;
+
+const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <select
+        ref={ref}
+        className={cn(
+          "border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/30 dark:aria-invalid:focus-visible:ring-destructive/40 flex h-10 w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+          "bg-[var(--input-bg)] text-[var(--input-fg)]",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </select>
+    );
+  },
+);
+Select.displayName = "Select";
+
+export { Select };

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

@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils";
+
+export function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("bg-muted animate-pulse rounded-md", className)}
+      {...props}
+    />
+  );
+}

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

@@ -0,0 +1,78 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export type SwitchProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  isLoading?: boolean;
+};
+
+const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
+  ({ className, isLoading, disabled, ...props }, ref) => {
+    const checked = !!(props as any).checked;
+    const isDisabled = !!disabled || !!isLoading;
+    return (
+      <label
+        className={cn(
+          "focus-within:ring-offset-background inline-flex items-center rounded-full focus-within:ring-2 focus-within:ring-[var(--ring)] focus-within:ring-offset-2",
+          isDisabled ? "cursor-not-allowed opacity-80" : "cursor-pointer",
+          className,
+        )}
+      >
+        <input
+          type="checkbox"
+          role="switch"
+          ref={ref}
+          className="sr-only"
+          disabled={isDisabled}
+          aria-busy={isLoading ? "true" : undefined}
+          {...(props as any)}
+        />
+        <span
+          aria-hidden
+          className={cn(
+            "relative inline-flex h-6 w-11 flex-shrink-0 rounded-full transition-colors duration-200",
+            checked ? "bg-[var(--primary)]" : "bg-[var(--primary)]/80",
+          )}
+        >
+          <span
+            className={cn(
+              // Thumb should adjust for theme to guarantee contrast
+              "absolute top-0.5 left-0.5 h-5 w-5 transform rounded-full bg-[var(--switch-thumb)] shadow-md transition-transform duration-200 ease-in-out",
+              checked ? "translate-x-5" : "translate-x-0",
+            )}
+          />
+
+          {/* Loading indicator centered inside the switch when isLoading */}
+          {isLoading && (
+            <span className="absolute inset-0 flex items-center justify-center">
+              <svg
+                className="h-4 w-4 animate-spin text-white"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                aria-hidden
+              >
+                <circle
+                  className="opacity-25"
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  stroke="currentColor"
+                  strokeWidth="4"
+                />
+                <path
+                  className="opacity-75"
+                  fill="currentColor"
+                  d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
+                />
+              </svg>
+            </span>
+          )}
+        </span>
+      </label>
+    );
+  },
+);
+
+Switch.displayName = "Switch";
+
+export { Switch };

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

@@ -0,0 +1,98 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export function Table({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLTableElement>) {
+  return (
+    <div className="relative w-full overflow-auto">
+      <table
+        className={cn(
+          "w-full caption-bottom text-sm",
+          // Optional fg override
+          "text-[var(--table-fg)]",
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+export function TableHeader(
+  props: React.HTMLAttributes<HTMLTableSectionElement>,
+) {
+  return (
+    <thead
+      className={cn(
+        "[&_tr]:border-b",
+        // Variable hooks for border color and head text
+        "text-[var(--table-head-fg)] [&_tr]:border-[var(--table-border)]",
+      )}
+      {...props}
+    />
+  );
+}
+
+export function TableBody(
+  props: React.HTMLAttributes<HTMLTableSectionElement>,
+) {
+  return (
+    <tbody
+      className={cn(
+        "[&_tr:last-child]:border-0",
+        "[&_tr]:border-[var(--table-border)]",
+      )}
+      {...props}
+    />
+  );
+}
+
+export function TableRow(props: React.HTMLAttributes<HTMLTableRowElement>) {
+  return (
+    <tr
+      className={cn(
+        "hover:bg-muted/50 border-b transition-colors",
+        "border-[var(--table-border)] hover:bg-[var(--table-row-hover-bg)]",
+      )}
+      {...props}
+    />
+  );
+}
+
+export function TableHead(props: React.ThHTMLAttributes<HTMLTableCellElement>) {
+  return (
+    <th
+      className={cn(
+        "text-muted-foreground h-10 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0",
+        "text-[var(--table-head-fg)]",
+      )}
+      {...props}
+    />
+  );
+}
+
+export function TableCell(props: React.TdHTMLAttributes<HTMLTableCellElement>) {
+  return (
+    <td
+      className={cn(
+        "p-4 align-middle [&:has([role=checkbox])]:pr-0",
+        "text-[var(--table-fg)]",
+      )}
+      {...props}
+    />
+  );
+}
+
+export function TableCaption(props: React.HTMLAttributes<HTMLElement>) {
+  return (
+    <caption
+      className={cn(
+        "text-muted-foreground mt-4 text-sm",
+        "text-[var(--table-muted-fg)]",
+      )}
+      {...props}
+    />
+  );
+}

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

@@ -0,0 +1,108 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+
+export interface TestimonialCardProps {
+  /** Optional id for root card */
+  id?: string;
+  /** Optional root className merged with card.className */
+  className?: string;
+
+  /** Legacy props (kept for backward compatibility) */
+  testimonialText?: string;
+  testimonialAuthor?: string;
+  testimonialAuthorInitials?: string;
+
+  /** New props to align with upgraded sections */
+  quote?: string;
+  name?: string;
+  role?: string;
+
+  /** Styling configuration objects */
+  card?: {
+    className?: string;
+  };
+  content?: {
+    className?: string;
+  };
+  text?: {
+    className?: string;
+  };
+  author?: {
+    className?: string;
+  };
+  avatar?: {
+    className?: string;
+  };
+  avatarText?: {
+    className?: string;
+  };
+}
+
+function getInitials(from?: string) {
+  if (!from) return undefined;
+  const parts = from.trim().split(/\s+/);
+  const first = parts[0]?.[0] || "";
+  const last = parts.length > 1 ? parts[parts.length - 1]?.[0] || "" : "";
+  const res = `${first}${last}`.toUpperCase();
+  return res || undefined;
+}
+
+export function TestimonialCard({
+  id,
+  className,
+  // legacy defaults
+  testimonialText = "Lorem ipsum dolor sit amet! Consectetur adipiscing elit.",
+  testimonialAuthor = " - Cillum Dolore",
+  testimonialAuthorInitials = "JD",
+  // new props (no defaults, we derive below)
+  quote,
+  name,
+  role,
+  card = {
+    className:
+      "bg-card text-card-foreground p-6 rounded-lg border border-border shadow-md transition-transform duration-200 hover:-translate-y-1 bg-[var(--card-bg)] text-[var(--card-fg)] border-[var(--card-border)] shadow-[var(--card-shadow)]",
+  },
+  content = {
+    className: "flex flex-col space-y-4",
+  },
+  text = {
+    className:
+      "text-muted-foreground text-base leading-relaxed italic text-[var(--card-fg)]",
+  },
+  author = {
+    className:
+      "text-muted-foreground text-sm font-medium text-[var(--card-muted-fg)]",
+  },
+  avatar = {
+    className:
+      "w-12 h-12 bg-primary text-primary-foreground rounded-full flex items-center justify-center text-lg font-bold bg-[var(--badge-bg)] text-[var(--badge-fg)] border-[var(--badge-border)]",
+  },
+  avatarText = {
+    className: "text-white font-bold",
+  },
+}: TestimonialCardProps) {
+  const displayText = quote ?? testimonialText;
+  const computedAuthor =
+    testimonialAuthor ??
+    (name ? ` - ${name}${role ? `, ${role}` : ""}` : " - Cillum Dolore");
+  const initials = testimonialAuthorInitials ?? getInitials(name) ?? "JD";
+
+  return (
+    <div id={id} className={cn(card.className, className)}>
+      <div className={content.className}>
+        {/* Avatar */}
+        <div className={avatar.className}>
+          <span className={avatarText.className}>{initials}</span>
+        </div>
+
+        {/* Testimonial Text */}
+        <p className={text.className}>&ldquo;{displayText}&rdquo;</p>
+
+        {/* Author */}
+        <p className={author.className}>{computedAuthor}</p>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,26 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          // Base structural + token fallbacks
+          "border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/30 dark:aria-invalid:focus-visible:ring-destructive/40 flex min-h-[80px] w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+          // CSS variable hooks (preset-first). When vars are unset, tokens above apply.
+          "border-[var(--input-border)] bg-[var(--input-bg)] text-[var(--input-fg)] placeholder:text-[var(--input-placeholder)] focus-visible:ring-[var(--input-focus-ring)] focus-visible:ring-offset-[var(--input-ring-offset)]",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };