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

package/dist/kits/blocks/components/ui/brand-node.tsx

@@ -1,121 +1,121 @@
-"use client";
-
-import React from "react";
-import type { ComponentType } from "react";
-import { Sparkles } from "lucide-react";
-import { cn } from "@/lib/utils";
-
-export interface BrandNodeProps {
-  /** Optional wrapper className to override size/colors (merged with defaults) */
-  className?: string;
-}
-
-export interface BrandNodeIconBadgeProps extends BrandNodeProps {
-  /** Icon component to render inside the badge */
-  icon?: ComponentType<{ className?: string }>;
-  /** Tailwind classes to control icon size; default `h-4 w-4` */
-  iconClassName?: string;
-}
-
-export function BrandNodeIconBadge({
-  className,
-  icon: Icon = Sparkles,
-  iconClassName = "h-4 w-4",
-}: BrandNodeIconBadgeProps) {
-  const base = "grid h-8 w-8 place-items-center rounded-md bg-primary/10 ring-1 ring-primary/30 text-primary";
-  return (
-    <div className={cn(base, className)} aria-label="Brand icon badge">
-      <Icon className={iconClassName} />
-    </div>
-  );
-}
-
-export interface BrandNodeGradientRingProps extends BrandNodeProps {
-  /** CSS conic-gradient string; provide two or more colors */
-  gradient?: string;
-  /** Inner fill background (center disc) */
-  innerBgClassName?: string;
-}
-
-export function BrandNodeGradientRing({
-  className,
-  gradient = "conic-gradient(hsl(var(--primary)), hsl(var(--accent)), hsl(var(--primary)))",
-  innerBgClassName = "h-full w-full rounded-full bg-background",
-}: BrandNodeGradientRingProps) {
-  const base = "relative h-8 w-8";
-  return (
-    <div className={cn(base, className)} aria-label="Brand gradient ring">
-      <div className="absolute inset-0 rounded-full p-[2px]" style={{ background: gradient }}>
-        <div className={innerBgClassName} />
-      </div>
-    </div>
-  );
-}
-
-export function BrandNodeGeometricMark({ className }: BrandNodeProps) {
-  const base = "grid h-8 w-8 place-items-center rounded-md bg-gradient-to-br from-primary/10 to-accent/10 ring-1 ring-border";
-  return (
-    <div className={cn(base, className)} aria-label="Brand geometric mark">
-      <svg viewBox="0 0 24 24" className="fill-primary h-4 w-4">
-        <path d="M12 4l8 14H4l8-14z" />
-      </svg>
-    </div>
-  );
-}
-
-export interface BrandNodeEmojiBadgeProps extends BrandNodeProps {
-  emoji?: string;
-}
-
-export function BrandNodeEmojiBadge({ className, emoji = "⚡" }: BrandNodeEmojiBadgeProps) {
-  const base = "grid h-8 w-8 place-items-center rounded-md bg-card/60 backdrop-blur ring-1 ring-border";
-  return (
-    <div className={cn(base, className)} aria-label="Brand emoji badge">
-      <span className="text-base" aria-hidden>
-        {emoji}
-      </span>
-    </div>
-  );
-}
-
-export interface BrandNodeDiagonalAppIconProps extends BrandNodeProps {
-  /** Base and overlay colors */
-  baseColorClass?: string;
-  overlayColorClass?: string;
-}
-
-export function BrandNodeDiagonalAppIcon({
-  className,
-  baseColorClass = "bg-primary",
-  overlayColorClass = "bg-accent",
-}: BrandNodeDiagonalAppIconProps) {
-  const base = "relative h-8 w-8 overflow-hidden rounded-md ring-1 ring-black/5 dark:ring-white/10";
-  return (
-    <div className={cn(base, className)} aria-label="Brand diagonal app icon">
-      <div className={cn("absolute inset-0", baseColorClass)} />
-      <div className={cn("absolute inset-0 translate-y-1/3 -skew-y-12", overlayColorClass)} />
-    </div>
-  );
-}
-
-export function BrandNodeCubeOutline({ className }: BrandNodeProps) {
-  const base = "grid h-8 w-8 place-items-center rounded-md bg-foreground text-background ring-1 ring-border";
-  return (
-    <div className={cn(base, className)} aria-label="Brand cube outline">
-      <svg viewBox="0 0 24 24" className="h-4 w-4">
-        <path d="M12 2l8 4.5v9L12 20 4 15.5v-9L12 2z" fill="none" stroke="currentColor" strokeWidth="1.6" />
-        <path d="M12 20v-9M4 6l8 5 8-5" fill="none" stroke="currentColor" strokeWidth="1.6" />
-      </svg>
-    </div>
-  );
-}
-
-/** Registry for quick swapping by name */
-export const BrandNodes = {
-  IconBadge: BrandNodeIconBadge,
-  GradientRing: BrandNodeGradientRing,
-  GeometricMark: BrandNodeGeometricMark,
-  EmojiBadge: BrandNodeEmojiBadge,
-  DiagonalAppIcon: BrandNodeDiagonalAppIcon,
-  CubeOutline: BrandNodeCubeOutline,
-};
+"use client";
+
+import React from "react";
+import type { ComponentType } from "react";
+import { Sparkles } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export interface BrandNodeProps {
+  /** Optional wrapper className to override size/colors (merged with defaults) */
+  className?: string;
+}
+
+export interface BrandNodeIconBadgeProps extends BrandNodeProps {
+  /** Icon component to render inside the badge */
+  icon?: ComponentType<{ className?: string }>;
+  /** Tailwind classes to control icon size; default `h-4 w-4` */
+  iconClassName?: string;
+}
+
+export function BrandNodeIconBadge({
+  className,
+  icon: Icon = Sparkles,
+  iconClassName = "h-4 w-4",
+}: BrandNodeIconBadgeProps) {
+  const base = "grid h-8 w-8 place-items-center rounded-md bg-primary/10 ring-1 ring-primary/30 text-primary";
+  return (
+    <div className={cn(base, className)} aria-label="Brand icon badge">
+      <Icon className={iconClassName} />
+    </div>
+  );
+}
+
+export interface BrandNodeGradientRingProps extends BrandNodeProps {
+  /** CSS conic-gradient string; provide two or more colors */
+  gradient?: string;
+  /** Inner fill background (center disc) */
+  innerBgClassName?: string;
+}
+
+export function BrandNodeGradientRing({
+  className,
+  gradient = "conic-gradient(hsl(var(--primary)), hsl(var(--accent)), hsl(var(--primary)))",
+  innerBgClassName = "h-full w-full rounded-full bg-background",
+}: BrandNodeGradientRingProps) {
+  const base = "relative h-8 w-8";
+  return (
+    <div className={cn(base, className)} aria-label="Brand gradient ring">
+      <div className="absolute inset-0 rounded-full p-[2px]" style={{ background: gradient }}>
+        <div className={innerBgClassName} />
+      </div>
+    </div>
+  );
+}
+
+export function BrandNodeGeometricMark({ className }: BrandNodeProps) {
+  const base = "grid h-8 w-8 place-items-center rounded-md bg-gradient-to-br from-primary/10 to-accent/10 ring-1 ring-border";
+  return (
+    <div className={cn(base, className)} aria-label="Brand geometric mark">
+      <svg viewBox="0 0 24 24" className="fill-primary h-4 w-4">
+        <path d="M12 4l8 14H4l8-14z" />
+      </svg>
+    </div>
+  );
+}
+
+export interface BrandNodeEmojiBadgeProps extends BrandNodeProps {
+  emoji?: string;
+}
+
+export function BrandNodeEmojiBadge({ className, emoji = "⚡" }: BrandNodeEmojiBadgeProps) {
+  const base = "grid h-8 w-8 place-items-center rounded-md bg-card/60 backdrop-blur ring-1 ring-border";
+  return (
+    <div className={cn(base, className)} aria-label="Brand emoji badge">
+      <span className="text-base" aria-hidden>
+        {emoji}
+      </span>
+    </div>
+  );
+}
+
+export interface BrandNodeDiagonalAppIconProps extends BrandNodeProps {
+  /** Base and overlay colors */
+  baseColorClass?: string;
+  overlayColorClass?: string;
+}
+
+export function BrandNodeDiagonalAppIcon({
+  className,
+  baseColorClass = "bg-primary",
+  overlayColorClass = "bg-accent",
+}: BrandNodeDiagonalAppIconProps) {
+  const base = "relative h-8 w-8 overflow-hidden rounded-md ring-1 ring-black/5 dark:ring-white/10";
+  return (
+    <div className={cn(base, className)} aria-label="Brand diagonal app icon">
+      <div className={cn("absolute inset-0", baseColorClass)} />
+      <div className={cn("absolute inset-0 translate-y-1/3 -skew-y-12", overlayColorClass)} />
+    </div>
+  );
+}
+
+export function BrandNodeCubeOutline({ className }: BrandNodeProps) {
+  const base = "grid h-8 w-8 place-items-center rounded-md bg-foreground text-background ring-1 ring-border";
+  return (
+    <div className={cn(base, className)} aria-label="Brand cube outline">
+      <svg viewBox="0 0 24 24" className="h-4 w-4">
+        <path d="M12 2l8 4.5v9L12 20 4 15.5v-9L12 2z" fill="none" stroke="currentColor" strokeWidth="1.6" />
+        <path d="M12 20v-9M4 6l8 5 8-5" fill="none" stroke="currentColor" strokeWidth="1.6" />
+      </svg>
+    </div>
+  );
+}
+
+/** Registry for quick swapping by name */
+export const BrandNodes = {
+  IconBadge: BrandNodeIconBadge,
+  GradientRing: BrandNodeGradientRing,
+  GeometricMark: BrandNodeGeometricMark,
+  EmojiBadge: BrandNodeEmojiBadge,
+  DiagonalAppIcon: BrandNodeDiagonalAppIcon,
+  CubeOutline: BrandNodeCubeOutline,
+};

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

@@ -1,122 +1,122 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/lib/utils";
-
-const buttonVariants = cva(
-  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground hover:bg-primary/90 shadow-xs",
-        destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 shadow-xs",
-        outline:
-          "bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border shadow-xs",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-xs",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-type ButtonProps = React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-    /** When true, bypasses tokenized buttonVariants so callers fully control classes */
-    unstyled?: boolean;
-    /** Opt-in: force inline CSS var styles for color/bg/border/ring */
-    forceInlineVars?: boolean;
-  };
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      className,
-      variant,
-      size,
-      asChild = false,
-      unstyled = false,
-      forceInlineVars = false,
-      ...props
-    },
-    ref,
-  ) => {
-    const Comp = asChild ? Slot : "button";
-
-    // Use caller-provided style; only inject inline var-driven colors when explicitly requested
-    const incomingStyle =
-      (props.style as React.CSSProperties | undefined) ?? undefined;
-    const finalStyle =
-      forceInlineVars && !unstyled
-        ? {
-            ...incomingStyle,
-            color: "var(--btn-fg)",
-            backgroundColor: "var(--btn-bg)",
-            borderColor: "var(--btn-border)",
-            "--tw-ring-color": "var(--btn-ring)",
-          }
-        : incomingStyle;
-
-    // Only enable CSS variable hooks when explicitly requested via inline vars
-    // or when the caller sets any [--btn-*] classes in className.
-    const wantsVarHooks =
-      !unstyled &&
-      (forceInlineVars ||
-        (typeof className === "string" && className.includes("[--btn-")));
-
-    return (
-      <Comp
-        ref={ref}
-        data-slot="button"
-        className={
-          unstyled
-            ? cn(
-                "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap disabled:pointer-events-none disabled:opacity-50",
-                className,
-              )
-            : cn(
-                buttonVariants({ variant, size }),
-                wantsVarHooks && [
-                  // Color var hooks (apply only when CSS vars are provided)
-                  "text-[var(--btn-fg)]",
-                  "bg-[var(--btn-bg)]",
-                  "hover:bg-[var(--btn-hover-bg)]",
-                  "hover:text-[var(--btn-hover-fg)]",
-                  // explicit dark variants to compete with dark: utilities from variants like outline
-                  "dark:bg-[var(--btn-bg)]",
-                  "dark:hover:bg-[var(--btn-hover-bg)]",
-                  "dark:hover:text-[var(--btn-hover-fg)]",
-                  // Focus ring and border hooks
-                  "focus-visible:ring-[var(--btn-ring)]",
-                  "border-[var(--btn-border)]",
-                  "dark:border-[var(--btn-border)]",
-                ],
-                className,
-              )
-        }
-        style={finalStyle}
-        {...props}
-      />
-    );
-  },
-);
-
-Button.displayName = "Button";
-
-export { Button, buttonVariants };
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground hover:bg-primary/90 shadow-xs",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 shadow-xs",
+        outline:
+          "bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border shadow-xs",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-xs",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+type ButtonProps = React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+    /** When true, bypasses tokenized buttonVariants so callers fully control classes */
+    unstyled?: boolean;
+    /** Opt-in: force inline CSS var styles for color/bg/border/ring */
+    forceInlineVars?: boolean;
+  };
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      variant,
+      size,
+      asChild = false,
+      unstyled = false,
+      forceInlineVars = false,
+      ...props
+    },
+    ref,
+  ) => {
+    const Comp = asChild ? Slot : "button";
+
+    // Use caller-provided style; only inject inline var-driven colors when explicitly requested
+    const incomingStyle =
+      (props.style as React.CSSProperties | undefined) ?? undefined;
+    const finalStyle =
+      forceInlineVars && !unstyled
+        ? {
+            ...incomingStyle,
+            color: "var(--btn-fg)",
+            backgroundColor: "var(--btn-bg)",
+            borderColor: "var(--btn-border)",
+            "--tw-ring-color": "var(--btn-ring)",
+          }
+        : incomingStyle;
+
+    // Only enable CSS variable hooks when explicitly requested via inline vars
+    // or when the caller sets any [--btn-*] classes in className.
+    const wantsVarHooks =
+      !unstyled &&
+      (forceInlineVars ||
+        (typeof className === "string" && className.includes("[--btn-")));
+
+    return (
+      <Comp
+        ref={ref}
+        data-slot="button"
+        className={
+          unstyled
+            ? cn(
+                "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap disabled:pointer-events-none disabled:opacity-50",
+                className,
+              )
+            : cn(
+                buttonVariants({ variant, size }),
+                wantsVarHooks && [
+                  // Color var hooks (apply only when CSS vars are provided)
+                  "text-[var(--btn-fg)]",
+                  "bg-[var(--btn-bg)]",
+                  "hover:bg-[var(--btn-hover-bg)]",
+                  "hover:text-[var(--btn-hover-fg)]",
+                  // explicit dark variants to compete with dark: utilities from variants like outline
+                  "dark:bg-[var(--btn-bg)]",
+                  "dark:hover:bg-[var(--btn-hover-bg)]",
+                  "dark:hover:text-[var(--btn-hover-fg)]",
+                  // Focus ring and border hooks
+                  "focus-visible:ring-[var(--btn-ring)]",
+                  "border-[var(--btn-border)]",
+                  "dark:border-[var(--btn-border)]",
+                ],
+                className,
+              )
+        }
+        style={finalStyle}
+        {...props}
+      />
+    );
+  },
+);
+
+Button.displayName = "Button";
+
+export { Button, buttonVariants };