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

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

@@ -1,91 +1,91 @@
-"use client";
-
-import React from "react";
-import Image from "next/image";
-import { Card, CardContent } from "@/components/ui/card";
-import { cn } from "@/lib/utils";
-
-export interface FeatureCardProps {
-  /** Optional id and root className */
-  id?: string;
-  className?: string;
-
-  /** Image source URL for the feature card image */
-  cardImageSrc: string;
-  /** Alt text for the feature card image */
-  cardImageAlt: string;
-  /** Heading text displayed on the feature card */
-  cardHeadingText: string;
-  /** Subheading or description text on the feature card */
-  cardSubheadingText: string;
-
-  /** Styling configuration objects */
-  card?: { className?: string };
-  image?: { className?: string };
-  heading?: { className?: string };
-  subheading?: { className?: string };
-  /** Next/Image quality (1-100) */
-  imageQuality?: number;
-  /** Next/Image sizes attribute */
-  imageSizes?: string;
-}
-
-export function FeatureCard({
-  id,
-  className,
-  cardImageSrc,
-  cardImageAlt,
-  cardHeadingText,
-  cardSubheadingText,
-  card = {
-    className:
-      "h-full transition-all duration-200 hover:shadow-lg bg-card text-card-foreground border rounded-md border-border",
-  },
-  image = { className: "object-cover" },
-  heading = {
-    className:
-      "mb-2 text-lg font-semibold text-foreground text-[var(--card-title-fg)]",
-  },
-  subheading = {
-    className:
-      "text-sm leading-relaxed text-muted-foreground text-[var(--card-muted-fg)]",
-  },
-  imageQuality = 85,
-  imageSizes = "(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw",
-}: FeatureCardProps) {
-  return (
-    <Card id={id} className={cn("group", card.className, className)}>
-      <CardContent className="relative flex h-full flex-col p-6">
-        {/* Spotlight overlay */}
-        <div className="pointer-events-none absolute inset-0 -z-10 opacity-0 transition-opacity duration-500 group-hover:opacity-100">
-          <div className="absolute -top-10 -left-10 h-40 w-40 rounded-full bg-white/5 blur-2xl dark:bg-white/10" />
-        </div>
-
-        <div className="relative mb-4 h-48 w-full overflow-hidden rounded-md">
-          {cardImageSrc ? (
-            <Image
-              src={cardImageSrc}
-              alt={cardImageAlt || "Feature image"}
-              fill
-              className={cn(
-                "transition-transform duration-500 group-hover:scale-105",
-                image.className,
-              )}
-              quality={imageQuality}
-              sizes={imageSizes}
-            />
-          ) : (
-            <div className="bg-muted text-muted-foreground flex h-full w-full items-center justify-center">
-              <span className="text-xs">No image</span>
-            </div>
-          )}
-        </div>
-
-        <div className="flex flex-1 flex-col">
-          <h3 className={heading.className}>{cardHeadingText}</h3>
-          <p className={subheading.className}>{cardSubheadingText}</p>
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
+"use client";
+
+import React from "react";
+import Image from "next/image";
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+export interface FeatureCardProps {
+  /** Optional id and root className */
+  id?: string;
+  className?: string;
+
+  /** Image source URL for the feature card image */
+  cardImageSrc: string;
+  /** Alt text for the feature card image */
+  cardImageAlt: string;
+  /** Heading text displayed on the feature card */
+  cardHeadingText: string;
+  /** Subheading or description text on the feature card */
+  cardSubheadingText: string;
+
+  /** Styling configuration objects */
+  card?: { className?: string };
+  image?: { className?: string };
+  heading?: { className?: string };
+  subheading?: { className?: string };
+  /** Next/Image quality (1-100) */
+  imageQuality?: number;
+  /** Next/Image sizes attribute */
+  imageSizes?: string;
+}
+
+export function FeatureCard({
+  id,
+  className,
+  cardImageSrc,
+  cardImageAlt,
+  cardHeadingText,
+  cardSubheadingText,
+  card = {
+    className:
+      "h-full transition-all duration-200 hover:shadow-lg bg-card text-card-foreground border rounded-md border-border",
+  },
+  image = { className: "object-cover" },
+  heading = {
+    className:
+      "mb-2 text-lg font-semibold text-foreground text-[var(--card-title-fg)]",
+  },
+  subheading = {
+    className:
+      "text-sm leading-relaxed text-muted-foreground text-[var(--card-muted-fg)]",
+  },
+  imageQuality = 85,
+  imageSizes = "(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw",
+}: FeatureCardProps) {
+  return (
+    <Card id={id} className={cn("group", card.className, className)}>
+      <CardContent className="relative flex h-full flex-col p-6">
+        {/* Spotlight overlay */}
+        <div className="pointer-events-none absolute inset-0 -z-10 opacity-0 transition-opacity duration-500 group-hover:opacity-100">
+          <div className="absolute -top-10 -left-10 h-40 w-40 rounded-full bg-white/5 blur-2xl dark:bg-white/10" />
+        </div>
+
+        <div className="relative mb-4 h-48 w-full overflow-hidden rounded-md">
+          {cardImageSrc ? (
+            <Image
+              src={cardImageSrc}
+              alt={cardImageAlt || "Feature image"}
+              fill
+              className={cn(
+                "transition-transform duration-500 group-hover:scale-105",
+                image.className,
+              )}
+              quality={imageQuality}
+              sizes={imageSizes}
+            />
+          ) : (
+            <div className="bg-muted text-muted-foreground flex h-full w-full items-center justify-center">
+              <span className="text-xs">No image</span>
+            </div>
+          )}
+        </div>
+
+        <div className="flex flex-1 flex-col">
+          <h3 className={heading.className}>{cardHeadingText}</h3>
+          <p className={subheading.className}>{cardSubheadingText}</p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -1,27 +1,27 @@
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        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 h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium 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, these are ignored and tokens above apply.
-          "focus-visible:ring-offset-background border-[var(--input-border)] bg-[var(--input-bg)] text-[var(--input-fg)] placeholder:text-[var(--input-placeholder)] focus-visible:ring-[var(--input-focus-ring,var(--ring))] focus-visible:ring-offset-2",
-          className,
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-Input.displayName = "Input";
-
-export { Input };
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        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 h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium 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, these are ignored and tokens above apply.
+          "focus-visible:ring-offset-background border-[var(--input-border)] bg-[var(--input-bg)] text-[var(--input-fg)] placeholder:text-[var(--input-placeholder)] focus-visible:ring-[var(--input-focus-ring,var(--ring))] focus-visible:ring-offset-2",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Input.displayName = "Input";
+
+export { Input };

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}
+    />
+  );
+}