nextworks 0.2.0-alpha.11 → 0.2.0-alpha.13

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

@@ -1,98 +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}
-    />
-  );
-}
+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

@@ -1,108 +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>
-  );
-}
+"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

@@ -1,26 +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 };
+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 };