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

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

@@ -1,29 +1,29 @@
-import * as React from "react";
-import * as LabelPrimitive from "@radix-ui/react-label";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/lib/utils";
-
-const labelVariants = cva(
-  "text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-);
-
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root
-    ref={ref}
-    className={cn(
-      labelVariants(),
-      // Optional color override via var; falls back to inherited color when unset
-      "text-[var(--label-fg)]",
-      className,
-    )}
-    {...props}
-  />
-));
-Label.displayName = LabelPrimitive.Root.displayName;
-
-export { Label };
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const labelVariants = cva(
+  "text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(
+      labelVariants(),
+      // Optional color override via var; falls back to inherited color when unset
+      "text-[var(--label-fg)]",
+      className,
+    )}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

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

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

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

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